@extends('layouts.app')

@section('content')

<div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <!-- Add Rental Button -->
            <div class="mb-6 flex justify-end">
                <a href="{{ route('admin.rentals.create') }}" class="px-6 py-3 rounded-lg bg-[#d4af37] text-black text-sm font-bold hover:bg-[#b08d2a] transition-colors flex items-center gap-2">
                    <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 4v16m8-8H4"></path></svg>
                    {{ app()->getLocale() == 'ar' ? '+ إضافة عقد' : '+ New Contract' }}
                </a>
            </div>

            <!-- Search Form -->
            <div class="bg-[#111] border border-gray-800 rounded-2xl p-6 mb-8">
                <form action="{{ route('admin.rentals.index') }}" method="GET">
                    <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
                        <div>
                            <label class="block text-xs text-gray-500 mb-2 uppercase tracking-wider">{{ app()->getLocale() == 'ar' ? 'رقم العقد' : 'Contract Number' }}</label>
                            <input type="text" name="contract_number" value="{{ request('contract_number') }}" class="w-full bg-black border-gray-800 rounded-lg px-4 py-2.5 text-white focus:border-[#d4af37] outline-none text-sm" placeholder="RENT-...">
                        </div>

                        <div>
                            <label class="block text-xs text-gray-500 mb-2 uppercase tracking-wider">{{ app()->getLocale() == 'ar' ? 'الحالة' : 'Status' }}</label>
                            <select name="status" class="w-full bg-black border-gray-800 rounded-lg px-4 py-2.5 text-white focus:border-[#d4af37] outline-none text-sm">
                                <option value="">{{ app()->getLocale() == 'ar' ? 'الكل' : 'All' }}</option>
                                <option value="open" {{ request('status') == 'open' ? 'selected' : '' }}>{{ app()->getLocale() == 'ar' ? 'مفتوح' : 'Open' }}</option>
                                <option value="closed" {{ request('status') == 'closed' ? 'selected' : '' }}>{{ app()->getLocale() == 'ar' ? 'مغلق' : 'Closed' }}</option>
                                <option value="cancelled" {{ request('status') == 'cancelled' ? 'selected' : '' }}>{{ app()->getLocale() == 'ar' ? 'ملغي' : 'Cancelled' }}</option>
                            </select>
                        </div>

                        <div>
                            <label class="block text-xs text-gray-500 mb-2 uppercase tracking-wider">{{ app()->getLocale() == 'ar' ? 'من تاريخ' : 'Date From' }}</label>
                            <input type="date" name="date_from" value="{{ request('date_from') }}" class="w-full bg-black border-gray-800 rounded-lg px-4 py-2.5 text-white focus:border-[#d4af37] outline-none text-sm">
                        </div>

                        <div>
                            <label class="block text-xs text-gray-500 mb-2 uppercase tracking-wider">{{ app()->getLocale() == 'ar' ? 'إلى تاريخ' : 'Date To' }}</label>
                            <input type="date" name="date_to" value="{{ request('date_to') }}" class="w-full bg-black border-gray-800 rounded-lg px-4 py-2.5 text-white focus:border-[#d4af37] outline-none text-sm">
                        </div>
                    </div>

                    <div class="flex justify-end mt-6">
                        <button type="submit" class="px-8 py-2 rounded-lg bg-[#d4af37] text-black text-sm font-bold hover:bg-[#b08d2a] transition-colors">
                            {{ app()->getLocale() == 'ar' ? 'بحث' : 'Search' }}
                        </button>
                    </div>
                </form>
            </div>

            <div class="bg-[#111] border border-gray-800 rounded-2xl overflow-hidden">
                <table class="w-full {{ app()->getLocale() == 'ar' ? 'text-right' : 'text-left' }}">
                    <thead class="bg-black/50 text-gray-500 text-xs uppercase">
                        <tr>
                            <th class="px-6 py-4">{{ app()->getLocale() == 'ar' ? 'رقم العقد' : 'Contract #' }}</th>
                            <th class="px-6 py-4">{{ app()->getLocale() == 'ar' ? 'السيارة' : 'Car' }}</th>
                            <th class="px-6 py-4">{{ app()->getLocale() == 'ar' ? 'العميل' : 'Customer' }}</th>
                            <th class="px-6 py-4">{{ app()->getLocale() == 'ar' ? 'البداية' : 'Start Date' }}</th>
                            <th class="px-6 py-4">{{ app()->getLocale() == 'ar' ? 'النهاية' : 'End Date' }}</th>
                            <th class="px-6 py-4">{{ app()->getLocale() == 'ar' ? 'الإجمالي' : 'Total' }}</th>
                            <th class="px-6 py-4">{{ app()->getLocale() == 'ar' ? 'الحالة' : 'Status' }}</th>
                            <th class="px-6 py-4">{{ app()->getLocale() == 'ar' ? 'العمليات' : 'Actions' }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-800">
                        @foreach($rentals as $rental)
                        <tr class="hover:bg-white/5 transition-colors">
                            <td class="px-6 py-4 text-sm font-bold text-[#d4af37]">{{ $rental->contract_number }}</td>
                            <td class="px-6 py-4 text-sm">{{ $rental->car->title }}</td>
                            <td class="px-6 py-4 text-sm">{{ $rental->customer->name }}</td>
                            <td class="px-6 py-4 text-sm">{{ $rental->start_date->format('Y-m-d') }}</td>
                            <td class="px-6 py-4 text-sm">{{ $rental->end_date->format('Y-m-d') }}</td>
                            <td class="px-6 py-4 text-sm">{{ number_format($rental->total_amount) }} {{ app()->getLocale() == 'ar' ? 'ر.س' : 'SAR' }}</td>
                            <td class="px-6 py-4">
                                <span class="text-[10px] px-2 py-0.5 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') }}">
                                    {{ $rental->status }}
                                </span>
                            </td>
                            <td class="px-6 py-4 space-x-2 space-x-reverse">
                                <a href="{{ route('admin.rentals.show', $rental->id) }}" class="text-blue-400 hover:text-blue-300 text-xs">{{ app()->getLocale() == 'ar' ? 'عرض' : 'View' }}</a>
                                @if($rental->status == 'open')
                                <a href="{{ route('admin.rentals.close-screen', $rental->id) }}" class="text-orange-400 hover:text-orange-300 text-xs">{{ app()->getLocale() == 'ar' ? 'إغلاق' : 'Close' }}</a>
                                @endif
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
                <div class="p-4 border-t border-gray-800">
                    {{ $rentals->links() }}
                </div>
            </div>
        </div>
    </div>
</div>

@endsection