@extends('layouts.app')

@section('content')

<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; margin-top: 15px;">
    <h2 style="color: #d4af37; font-size: 1.5rem; font-weight: bold;">
        {{ app()->getLocale() == 'ar' ? 'تفاصيل عقد التأجير' : 'Rental Contract Details' }} - {{ $rental->contract_number }}
    </h2>
    <div style="display: flex; gap: 1rem;">
        <a href="{{ route('admin.rentals.index') }}" style="background: #666; color: white; padding: 0.5rem 1rem; border-radius: 0.5rem; text-decoration: none; font-size: 0.875rem; font-weight: bold;">
            {{ app()->getLocale() == 'ar' ? 'عودة' : 'Back' }}
        </a>
        <a href="{{ route('admin.rentals.pdf', $rental->id) }}" style="background: #666; color: white; padding: 0.5rem 1rem; border-radius: 0.5rem; text-decoration: none; font-size: 0.875rem; font-weight: bold;">
            {{ app()->getLocale() == 'ar' ? 'تحميل PDF' : 'Download PDF' }}
        </a>
        @if($rental->status == 'open')
        <a href="{{ route('admin.rentals.close-screen', $rental->id) }}" style="background: #ea7f0a; color: black; padding: 0.5rem 1rem; border-radius: 0.5rem; text-decoration: none; font-size: 0.875rem; font-weight: bold;">
            {{ app()->getLocale() == 'ar' ? 'إغلاق العقد' : 'Close Contract' }}
        </a>
        @endif
    </div>
</div>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-8">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                <!-- Main Info -->
                <div class="lg:col-span-2 space-y-8">
                    <div class="bg-[#111] border border-gray-800 rounded-2xl p-6">
                        <div class="flex justify-between items-center mb-6 border-b border-gray-800 pb-2">
                            <h3 class="text-lg font-bold text-white">{{ app()->getLocale() == 'ar' ? 'معلومات العقد' : 'Contract Info' }}</h3>
                            <span class="text-xs px-3 py-1 rounded-full 
                                {{ $rental->status == 'open' ? 'bg-green-500/20 text-green-400' : ($rental->status == 'closed' ? 'bg-blue-500/20 text-blue-400' : 'bg-red-500/20 text-red-400') }}">
                                {{ strtoupper($rental->status) }}
                            </span>
                        </div>
                        
                        <div class="grid grid-cols-2 md:grid-cols-3 gap-8">
                            <div>
                                <label class="block text-xs text-gray-500 mb-1 uppercase">{{ app()->getLocale() == 'ar' ? 'تاريخ البداية' : 'Start Date' }}</label>
                                <div class="text-white font-medium">{{ $rental->start_date->format('Y-m-d H:i') }}</div>
                            </div>
                            <div>
                                <label class="block text-xs text-gray-500 mb-1 uppercase">{{ app()->getLocale() == 'ar' ? 'تاريخ النهاية' : 'End Date' }}</label>
                                <div class="text-white font-medium">{{ $rental->end_date->format('Y-m-d H:i') }}</div>
                            </div>
                            <div>
                                <label class="block text-xs text-gray-500 mb-1 uppercase">{{ app()->getLocale() == 'ar' ? 'السيارة' : 'Car' }}</label>
                                <div class="text-[#d4af37] font-bold">{{ $rental->car->title }}</div>
                                <div class="text-xs text-gray-400">{{ $rental->car->plate_number }}</div>
                            </div>
                            <div>
                                <label class="block text-xs text-gray-500 mb-1 uppercase">{{ app()->getLocale() == 'ar' ? 'العميل' : 'Customer' }}</label>
                                <div class="text-white font-medium">{{ $rental->customer->name }}</div>
                                <div class="text-xs text-gray-400">{{ $rental->customer->phone }}</div>
                            </div>
                            <div>
                                <label class="block text-xs text-gray-500 mb-1 uppercase">{{ app()->getLocale() == 'ar' ? 'عداد البداية' : 'Start Odometer' }}</label>
                                <div class="text-white font-medium">{{ number_format($rental->start_odometer) }} KM</div>
                            </div>
                            <div>
                                <label class="block text-xs text-gray-500 mb-1 uppercase">{{ app()->getLocale() == 'ar' ? 'عداد النهاية' : 'End Odometer' }}</label>
                                <div class="text-white font-medium">{{ $rental->end_odometer ? number_format($rental->end_odometer) . ' KM' : '-' }}</div>
                            </div>
                        </div>
                    </div>

                    <!-- Financial Details -->
                    <div class="bg-[#111] border border-gray-800 rounded-2xl p-6">
                        <div class="flex justify-between items-center mb-6 border-b border-gray-800 pb-2">
                            <h3 class="text-lg font-bold text-white">{{ app()->getLocale() == 'ar' ? 'التفاصيل المالية' : 'Financial Details' }}</h3>
                            <div class="flex gap-4 items-center text-xs">
                                <div class="flex flex-col">
                                    <span class="text-gray-500 uppercase">{{ app()->getLocale() == 'ar' ? 'المدفوع' : 'Paid' }}</span>
                                    <span class="text-green-400 font-bold">{{ number_format($rental->paid_amount, 2) }} SAR</span>
                                </div>
                                <div class="flex flex-col border-r border-gray-800 pr-4">
                                    <span class="text-gray-500 uppercase">{{ app()->getLocale() == 'ar' ? 'المتبقي' : 'Remaining' }}</span>
                                    <span class="text-[#d4af37] font-bold">{{ number_format($rental->remaining_amount, 2) }} SAR</span>
                                </div>
                            </div>
                        </div>
                        <div class="space-y-4">
                            <div class="flex justify-between border-b border-gray-800/50 pb-2">
                                <span class="text-gray-400">{{ app()->getLocale() == 'ar' ? 'السعر اليومي' : 'Daily Price' }}</span>
                                <span class="text-white">{{ number_format($rental->daily_price, 2) }} SAR</span>
                            </div>
                            <div class="flex justify-between border-b border-gray-800/50 pb-2">
                                <span class="text-gray-400">{{ app()->getLocale() == 'ar' ? 'مبلغ التأمين' : 'Insurance' }}</span>
                                <span class="text-white">{{ number_format($rental->insurance_amount, 2) }} SAR</span>
                            </div>
                            <div class="flex justify-between border-b border-gray-800/50 pb-2 text-red-400">
                                <span class="text-gray-400">{{ app()->getLocale() == 'ar' ? 'الخصم' : 'Discount' }}</span>
                                <span>- {{ number_format($rental->discount, 2) }} SAR</span>
                            </div>

                            <!-- New Add-ons Section -->
                            @if($rental->selectedAddOns->count() > 0)
                            <div class="py-4 border-b border-gray-800/50 space-y-3">
                                <h4 class="text-xs font-bold text-gray-500 uppercase tracking-widest flex items-center gap-2">
                                    <span>🚀</span>
                                    {{ app()->getLocale() == 'ar' ? 'الخدمات الإضافية المختارة' : 'Selected Add-ons' }}
                                </h4>
                                @foreach($rental->selectedAddOns as $addOn)
                                <div class="flex justify-between text-sm">
                                    <div class="flex flex-col">
                                        <span class="text-white font-medium">{{ $addOn->name }}</span>
                                        <span class="text-[10px] text-gray-500">{{ $addOn->price_type == 'daily' ? 'يومي' : 'ثابت' }} × {{ $addOn->pivot->quantity }}</span>
                                    </div>
                                    <span class="text-[#d4af37] font-bold">+ {{ number_format($addOn->pivot->total_price, 2) }} SAR</span>
                                </div>
                                @endforeach
                            </div>
                            @endif

                            <div class="flex justify-between border-b border-gray-800/50 pb-2">
                                <span class="text-gray-400">{{ app()->getLocale() == 'ar' ? 'الضريبة' : 'Tax' }}</span>
                                <span class="text-white">{{ number_format($rental->tax, 2) }} SAR</span>
                            </div>
                            @if($rental->extra_km_charges > 0)
                            <div class="flex justify-between border-b border-gray-800/50 pb-2 text-orange-400 font-bold">
                                <span class="text-gray-400">{{ app()->getLocale() == 'ar' ? 'رسوم كيلومترات إضافية' : 'Extra KM Charges' }}</span>
                                <span>+ {{ number_format($rental->extra_km_charges, 2) }} SAR</span>
                            </div>
                            @endif
                            <div class="flex justify-between pt-4 text-xl font-bold text-[#d4af37]">
                                <span>{{ app()->getLocale() == 'ar' ? 'الإجمالي النهائي' : 'Final Total' }}</span>
                                <span>{{ number_format($rental->total_amount, 2) }} SAR</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Sidebar info -->
                <div class="space-y-8">
                    <!-- Actions -->
                    <div class="bg-[#111] border border-gray-800 rounded-2xl p-6">
                        <h3 class="text-sm font-bold mb-4 text-white uppercase tracking-widest">{{ app()->getLocale() == 'ar' ? 'إجراءات سريعة' : 'Quick Actions' }}</h3>
                        <div class="space-y-4">
                            @if($rental->status == 'open')
                            <a href="{{ route('admin.receipts.create', ['rental_id' => $rental->id]) }}" class="flex items-center justify-center gap-2 w-full bg-[#d4af37] text-black py-3 rounded-xl font-bold hover:bg-[#b08d2a] transition-all shadow-lg shadow-[#d4af37]/10">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
                                {{ app()->getLocale() == 'ar' ? 'تسجيل دفعة (سند قبض)' : 'Register Payment (Receipt)' }}
                            </a>
                            @endif

                            @if($rental->insurance_amount > 0)
                            <a href="{{ route('admin.vouchers.create', ['rental_id' => $rental->id, 'reason' => 'Refund of Insurance']) }}" class="flex items-center justify-center gap-2 w-full bg-blue-600/20 text-blue-400 border border-blue-500/30 py-3 rounded-xl font-bold hover:bg-blue-600/30 transition-all">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"></path></svg>
                                {{ app()->getLocale() == 'ar' ? 'استرداد التأمين (سند صرف)' : 'Refund Insurance (Voucher)' }}
                            </a>
                            @endif
                        </div>
                    </div>

                    <!-- Receipts -->
                    @if($rental->paper_contract)
                    <div class="bg-[#111] border border-[#d4af37]/30 rounded-2xl p-6">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-sm font-bold text-[#d4af37] uppercase tracking-widest">{{ app()->getLocale() == 'ar' ? 'العقد الورقي المرفق' : 'Attached Paper Contract' }}</h3>
                        </div>
                        <a href="{{ asset('storage/' . $rental->paper_contract) }}" target="_blank" class="flex items-center justify-center gap-2 w-full bg-white/5 text-white py-3 rounded-xl font-bold hover:bg-white/10 transition-all border border-white/10">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
                            {{ app()->getLocale() == 'ar' ? 'عرض العقد المرفق' : 'View Attachment' }}
                        </a>
                    </div>
                    @endif

                    <!-- Additional Terms -->
                    @if($rental->additional_terms && count($rental->additional_terms) > 0)
                    <div class="bg-[#111] border border-gray-800 rounded-2xl p-6">
                        <h3 class="text-sm font-bold mb-4 text-white uppercase tracking-widest">{{ app()->getLocale() == 'ar' ? 'شروط إضافية خاصة' : 'Special Conditions' }}</h3>
                        <div class="space-y-3">
                            @foreach($rental->additional_terms as $index => $term)
                            <div class="bg-black/40 p-3 rounded-lg border border-gray-800 flex gap-3">
                                <span class="text-[#d4af37] font-bold text-xs">{{ $index + 1 }}</span>
                                <span class="text-gray-300 text-xs leading-relaxed">{{ $term }}</span>
                            </div>
                            @endforeach
                        </div>
                    </div>
                    @endif

                    <div class="bg-[#111] border border-gray-800 rounded-2xl p-6">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-sm font-bold text-white uppercase tracking-widest">{{ app()->getLocale() == 'ar' ? 'سندات القبض' : 'Receipts' }}</h3>
                            <span class="text-[10px] text-gray-500">{{ $rental->receipts->count() }} {{ app()->getLocale() == 'ar' ? 'سند' : 'Receipts' }}</span>
                        </div>
                        <div class="space-y-4">
                            @forelse($rental->receipts->sortByDesc('created_at') as $receipt)
                            <div class="bg-black/40 p-3 rounded-lg border {{ $receipt->status == 'cancelled' ? 'border-red-900/30 opacity-50' : 'border-gray-800' }}">
                                <div class="flex justify-between mb-1">
                                    <a href="{{ route('admin.receipts.show', $receipt->id) }}" class="text-[#d4af37] font-bold text-sm hover:underline">{{ $receipt->receipt_number }}</a>
                                    <span class="text-white font-bold text-sm">{{ number_format($receipt->amount, 2) }}</span>
                                </div>
                                <div class="flex justify-between items-center text-[10px] text-gray-500 uppercase">
                                    <span>{{ $receipt->payment_method }} | {{ $receipt->receipt_date->format('Y-m-d') }}</span>
                                    <span class="{{ $receipt->status == 'confirmed' ? 'text-green-500' : 'text-red-500' }}">{{ $receipt->status }}</span>
                                </div>
                            </div>
                            @empty
                            <div class="text-center py-4 text-xs text-gray-600">
                                {{ app()->getLocale() == 'ar' ? 'لا توجد سندات قبض مسجلة' : 'No receipts found' }}
                            </div>
                            @endforelse
                        </div>
                    </div>

                    <!-- Payments -->
                    <div class="bg-[#111] border border-gray-800 rounded-2xl p-6">
                        <h3 class="text-sm font-bold mb-4 text-white uppercase tracking-widest">{{ app()->getLocale() == 'ar' ? 'سجل المدفوعات' : 'Payment History' }}</h3>
                        <div class="space-y-4">
                            @foreach($rental->payments as $payment)
                            <div class="bg-black/40 p-3 rounded-lg border border-gray-800">
                                <div class="flex justify-between mb-1">
                                    <span class="text-[#d4af37] font-bold text-sm">{{ number_format($payment->amount, 2) }}</span>
                                    <span class="text-[10px] bg-gray-800 text-gray-400 px-2 py-0.5 rounded">{{ strtoupper($payment->method) }}</span>
                                </div>
                                <div class="text-[10px] text-gray-500 uppercase">{{ $payment->type }} | {{ $payment->created_at->format('Y-m-d') }}</div>
                            </div>
                            @endforeach
                        </div>
                    </div>

                    <!-- Alerts/Status -->
                    @if($overdueDays > 0)
                    <div class="bg-red-500/10 border border-red-500/50 rounded-2xl p-6">
                        <div class="flex items-center gap-3 text-red-500 mb-2">
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
                            <span class="font-bold uppercase tracking-wider text-xs">{{ app()->getLocale() == 'ar' ? 'تنبيه تأخير' : 'Overdue Alert' }}</span>
                        </div>
                        <p class="text-sm text-gray-300">
                            {{ app()->getLocale() == 'ar' ? "هذا العقد متأخر بمقدار $overdueDays يوم." : "This contract is overdue by $overdueDays days." }}
                        </p>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

@endsection