@extends('layouts.app')

@section('content')
        <div class="flex justify-between items-center" style="margin-top: 15px;">
            <h2 class="font-semibold text-xl text-[#d4af37] leading-tight">
                {{ app()->getLocale() == 'ar' ? 'إدارة الاستمارة والفحص الدوري' : 'Registration & Inspection Management' }}
            </h2>
            <button @click="$dispatch('open-doc-modal')" class="bg-[#d4af37] text-black px-6 py-2 rounded-lg text-sm font-bold shadow-lg shadow-[#d4af37]/20 hover:bg-[#b08d2a] transition-all">
                {{ app()->getLocale() == 'ar' ? 'إضافة أو تعديل وثيقة' : 'Add/Edit Document' }}
            </button>
        </div>

    <div class="py-12" x-data="documentManager()">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            
            <!-- Advanced Search -->
            <div class="bg-[#111] border border-gray-800 rounded-2xl p-6 mb-8">
                <form action="{{ route('admin.vehicle-documents.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' ? 'بحث (السيارة / اللوحة)' : 'Search (Car / Plate)' }}</label>
                            <input type="text" name="search" value="{{ request('search') }}" 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="...">
                        </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="valid" {{ request('status') == 'valid' ? 'selected' : '' }}>{{ app()->getLocale() == 'ar' ? 'ساري' : 'Valid' }}</option>
                                <option value="expiring_soon" {{ request('status') == 'expiring_soon' ? 'selected' : '' }}>{{ app()->getLocale() == 'ar' ? 'سينتهي قريباً' : 'Expiring Soon' }}</option>
                                <option value="expired" {{ request('status') == 'expired' ? 'selected' : '' }}>{{ app()->getLocale() == 'ar' ? 'منتهي' : 'Expired' }}</option>
                            </select>
                        </div>

                        <div>
                            <label class="block text-xs text-gray-500 mb-2 uppercase tracking-wider">{{ app()->getLocale() == 'ar' ? 'تصفية سريعة' : 'Quick Filter' }}</label>
                            <div class="flex items-center gap-2 mt-2">
                                <input type="checkbox" name="expiring_soon" id="exp_soon" value="1" {{ request('expiring_soon') ? 'checked' : '' }} class="rounded border-gray-800 bg-black text-[#d4af37] focus:ring-[#d4af37]">
                                <label for="exp_soon" class="text-sm text-gray-400">{{ app()->getLocale() == 'ar' ? 'ينتهي خلال 30 يوم' : 'Expires in 30 days' }}</label>
                            </div>
                        </div>

                        <div class="flex items-end gap-2">
                            <button type="submit" class="flex-1 px-4 py-2.5 rounded-lg bg-[#d4af37] text-black text-sm font-bold hover:bg-[#b08d2a] transition-colors">
                                {{ app()->getLocale() == 'ar' ? 'بحث' : 'Search' }}
                            </button>
                            <a href="{{ route('admin.vehicle-documents.index') }}" class="px-4 py-2.5 rounded-lg bg-gray-800 text-white text-sm hover:bg-gray-700 transition-colors">
                                {{ app()->getLocale() == 'ar' ? 'إلغاء' : 'Reset' }}
                            </a>
                        </div>
                    </div>
                </form>
            </div>

            <!-- Documents Table -->
            <div class="bg-[#111] border border-gray-800 rounded-2xl overflow-hidden shadow-2xl">
                <table class="w-full {{ app()->getLocale() == 'ar' ? 'text-right' : 'text-left' }}">
                    <thead class="bg-black/50 text-gray-500 text-xs uppercase tracking-widest font-black">
                        <tr>
                            <th class="px-6 py-5">{{ app()->getLocale() == 'ar' ? 'السيارة واللوحة' : 'Vehicle & Plate' }}</th>
                            <th class="px-6 py-5">{{ app()->getLocale() == 'ar' ? 'انتهاء الاستمارة' : 'Reg. Expiry' }}</th>
                            <th class="px-6 py-5">{{ app()->getLocale() == 'ar' ? 'آخر فحص' : 'Last Insp.' }}</th>
                            <th class="px-6 py-5">{{ app()->getLocale() == 'ar' ? 'انتهاء الفحص' : 'Insp. Expiry' }}</th>
                            <th class="px-6 py-5">{{ app()->getLocale() == 'ar' ? 'الحالة' : 'Status' }}</th>
                            <th class="px-6 py-5 text-center">{{ app()->getLocale() == 'ar' ? 'العمليات' : 'Actions' }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-800">
                        @php
                            $status_colors = [
                                'valid' => 'bg-green-500/10 text-green-400 border border-green-500/20',
                                'expiring_soon' => 'bg-yellow-500/10 text-yellow-400 border border-yellow-500/20',
                                'expired' => 'bg-red-500/10 text-red-400 border border-red-500/20'
                            ];
                            $status_labels = [
                                'valid' => ['ar' => 'ساري', 'en' => 'Valid'],
                                'expiring_soon' => ['ar' => 'سينتهي قريباً', 'en' => 'Soon'],
                                'expired' => ['ar' => 'منتهي', 'en' => 'Expired']
                            ];
                        @endphp
                        @forelse($documents as $doc)
                        <tr class="hover:bg-white/[0.02] transition-colors group">
                            <td class="px-6 py-4">
                                <div class="font-bold text-white group-hover:text-[#d4af37] transition-colors">{{ $doc->car->title }}</div>
                                <div class="text-[10px] text-gray-500 font-mono tracking-tighter">{{ $doc->car->plate_number }}</div>
                            </td>
                            <td class="px-6 py-4">
                                <div class="text-sm {{ $doc->registration_expiry_date->isPast() ? 'text-red-400' : ($doc->registration_expiry_date->diffInDays(now()) <= 30 ? 'text-yellow-400' : 'text-gray-300') }}">
                                    {{ $doc->registration_expiry_date->format('Y-m-d') }}
                                </div>
                                <div class="text-[9px] text-gray-600 mt-1 uppercase">{{ $doc->registration_expiry_date->diffForHumans() }}</div>
                            </td>
                            <td class="px-6 py-4 text-sm text-gray-400">
                                {{ $doc->inspection_date->format('Y-m-d') }}
                            </td>
                            <td class="px-6 py-4">
                                <div class="text-sm {{ $doc->inspection_expiry_date->isPast() ? 'text-red-400' : ($doc->inspection_expiry_date->diffInDays(now()) <= 30 ? 'text-yellow-400' : 'text-gray-300') }}">
                                    {{ $doc->inspection_expiry_date->format('Y-m-d') }}
                                </div>
                                <div class="text-[9px] text-gray-600 mt-1 uppercase">{{ $doc->inspection_expiry_date->diffForHumans() }}</div>
                            </td>
                            <td class="px-6 py-4">
                                <span class="text-[10px] px-3 py-1 rounded-full font-bold uppercase tracking-wider {{ $status_colors[$doc->status] }}">
                                    {{ $status_labels[$doc->status][app()->getLocale()] }}
                                </span>
                            </td>
                            <td class="px-6 py-4">
                                <div class="flex items-center justify-center gap-3">
                                    <button @click="editDoc({{ $doc->car_id }})" class="p-2 bg-blue-500/10 text-blue-400 rounded-lg hover:bg-blue-500 hover:text-white transition-all">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
                                    </button>
                                    <a href="{{ route('admin.cars.edit', $doc->car_id) }}" class="p-2 bg-gray-800 text-gray-400 rounded-lg hover:bg-gray-700 hover:text-white transition-all">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
                                    </a>
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="6" class="px-6 py-20 text-center text-gray-600 italic">
                                {{ app()->getLocale() == 'ar' ? 'لا توجد بيانات تطابق بحثك.' : 'No data matching your search found.' }}
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
                <div class="p-6 border-t border-gray-800 bg-black/20">
                    {{ $documents->links() }}
                </div>
            </div>
        </div>

        <!-- Smart Modal -->
        <div x-show="showModal" 
             class="fixed inset-0 z-[100] overflow-y-auto" 
             x-cloak
             @keydown.escape.window="showModal = false"
             @open-doc-modal.window="showModal = true; resetForm();"
             x-init="initPickers()">
            
            <div class="flex items-center justify-center min-h-screen p-4">
                <div class="fixed inset-0 bg-black/90 backdrop-blur-sm transition-opacity" @click="showModal = false"></div>

                <div class="relative bg-[#111] border border-gray-800 rounded-3xl w-full max-w-2xl shadow-2xl transform transition-all overflow-hidden">
                    <div class="p-8 border-b border-gray-800 flex justify-between items-center bg-black/40">
                        <h3 class="text-xl font-black text-[#d4af37] uppercase tracking-tighter">
                            {{ app()->getLocale() == 'ar' ? 'إدارة وثائق المركبة' : 'Vehicle Document Management' }}
                        </h3>
                        <button @click="showModal = false" class="text-gray-500 hover:text-white transition-colors">
                            <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="M6 18L18 6M6 6l12 12"></path></svg>
                        </button>
                    </div>

                    <div class="p-8">
                        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
                        <link rel="stylesheet" type="text/css" href="https://npmcdn.com/flatpickr/dist/themes/dark.css">
                        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
                        <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
                        <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ar.js"></script>
                        <style>
                            .flatpickr-calendar { background: #111 !important; border: 1px solid #333 !important; color: white !important; }
                            .flatpickr-day.selected { background: #d4af37 !important; border-color: #d4af37 !important; color: black !important; }
                            .flatpickr-month { background: #111 !important; color: white !important; }
                            .flatpickr-weekday { background: #111 !important; color: #999 !important; }
                            .flatpickr-current-month input.cur-year { background: #111 !important; color: white !important; border: 1px solid #333 !important; }
                            .flatpickr-prev-month, .flatpickr-next-month { fill: #d4af37 !important; }
                        </style>
                        
                        <form :action="formAction" method="POST" enctype="multipart/form-data" id="docForm">
                            @csrf
                            <template x-if="isEditing">
                                <input type="hidden" name="_method" value="PUT">
                            </template>

                            <div class="space-y-6">
                                <!-- Car Selection -->
                                <div>
                                    <label class="block text-xs text-gray-500 mb-2 uppercase tracking-widest font-bold">{{ app()->getLocale() == 'ar' ? 'اختر السيارة' : 'Select Vehicle' }}</label>
                                    <select name="car_id" 
                                            x-model="selectedCarId" 
                                            @change="loadCarDoc"
                                            :disabled="isEditing"
                                            class="w-full bg-black border-gray-800 rounded-xl px-4 py-3 text-white focus:border-[#d4af37] outline-none transition-all disabled:opacity-50">
                                        <option value="">{{ app()->getLocale() == 'ar' ? '--- اختر السيارة ---' : '--- Select Vehicle ---' }}</option>
                                        @foreach($cars as $car)
                                            <option value="{{ $car->id }}">{{ $car->title }} ({{ $car->plate_number }})</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div x-show="selectedCarId" x-transition class="space-y-6">
                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                        <!-- Registration -->
                                        <div class="space-y-4 p-4 bg-black/40 rounded-2xl border border-gray-800">
                                            <div class="text-[10px] font-black text-[#d4af37] uppercase tracking-[0.2em] mb-2">{{ app()->getLocale() == 'ar' ? 'بيانات الاستمارة' : 'Registration' }}</div>
                                            <div>
                                                <label class="block text-[10px] text-gray-600 mb-1 uppercase">{{ app()->getLocale() == 'ar' ? 'تاريخ الانتهاء' : 'Expiry Date' }}</label>
                                                <input type="text" name="registration_expiry_date" id="reg_expiry" x-model="formData.reg_expiry" required class="w-full bg-black border-gray-800 rounded-lg px-4 py-2.5 text-white focus:border-[#d4af37] outline-none text-sm datepicker">
                                            </div>
                                            <div>
                                                <label class="block text-[10px] text-gray-600 mb-1 uppercase">{{ app()->getLocale() == 'ar' ? 'وثيقة الاستمارة' : 'Reg. Document' }}</label>
                                                <input type="file" name="registration_document" class="w-full bg-black border-gray-800 rounded-lg px-4 py-2 text-white text-xs">
                                                <template x-if="formData.reg_url">
                                                    <a :href="formData.reg_url" target="_blank" class="text-[10px] text-blue-400 mt-1 inline-block hover:underline">{{ app()->getLocale() == 'ar' ? 'عرض الوثيقة الحالية' : 'View Current Doc' }}</a>
                                                </template>
                                            </div>
                                        </div>

                                        <!-- Inspection -->
                                        <div class="space-y-4 p-4 bg-black/40 rounded-2xl border border-gray-800">
                                            <div class="text-[10px] font-black text-[#d4af37] uppercase tracking-[0.2em] mb-2">{{ app()->getLocale() == 'ar' ? 'بيانات الفحص الدوري' : 'Inspection' }}</div>
                                            <div>
                                                <label class="block text-[10px] text-gray-600 mb-1 uppercase">{{ app()->getLocale() == 'ar' ? 'تاريخ الفحص' : 'Insp. Date' }}</label>
                                                <input type="text" name="inspection_date" id="ins_date" x-model="formData.ins_date" required class="w-full bg-black border-gray-800 rounded-lg px-4 py-2.5 text-white focus:border-[#d4af37] outline-none text-sm datepicker">
                                            </div>
                                            <div>
                                                <label class="block text-[10px] text-gray-600 mb-1 uppercase">{{ app()->getLocale() == 'ar' ? 'تاريخ الانتهاء' : 'Expiry Date' }}</label>
                                                <input type="text" name="inspection_expiry_date" id="ins_expiry" x-model="formData.ins_expiry" required class="w-full bg-black border-gray-800 rounded-lg px-4 py-2.5 text-white focus:border-[#d4af37] outline-none text-sm datepicker">
                                            </div>
                                            <div>
                                                <label class="block text-[10px] text-gray-600 mb-1 uppercase">{{ app()->getLocale() == 'ar' ? 'وثيقة الفحص' : 'Insp. Document' }}</label>
                                                <input type="file" name="inspection_document" class="w-full bg-black border-gray-800 rounded-lg px-4 py-2 text-white text-xs">
                                                <template x-if="formData.ins_url">
                                                    <a :href="formData.ins_url" target="_blank" class="text-[10px] text-blue-400 mt-1 inline-block hover:underline">{{ app()->getLocale() == 'ar' ? 'عرض الوثيقة الحالية' : 'View Current Doc' }}</a>
                                                </template>
                                            </div>
                                        </div>
                                    </div>

                                    <div>
                                        <label class="block text-[10px] text-gray-600 mb-1 uppercase tracking-widest">{{ app()->getLocale() == 'ar' ? 'ملاحظات' : 'Notes' }}</label>
                                        <textarea name="notes" x-model="formData.notes" rows="2" class="w-full bg-black border-gray-800 rounded-xl px-4 py-3 text-white focus:border-[#d4af37] outline-none text-sm"></textarea>
                                    </div>

                                    <div class="pt-6 border-t border-gray-800 flex justify-end gap-4">
                                        <button type="button" @click="showModal = false" class="px-8 py-3 rounded-xl border border-gray-800 text-gray-400 hover:bg-white/5 transition-all font-bold">
                                            {{ app()->getLocale() == 'ar' ? 'إلغاء' : 'Cancel' }}
                                        </button>
                                        <button type="submit" class="px-12 py-3 rounded-xl bg-[#d4af37] text-black font-black uppercase tracking-widest shadow-lg shadow-[#d4af37]/20 hover:scale-[1.02] active:scale-95 transition-all" style="padding-left: 2rem; padding-right: 2rem;">
                                            {{ app()->getLocale() == 'ar' ? 'حفظ البيانات' : 'Save Changes' }}
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
    <script>
        function documentManager() {
            return {
                showModal: false,
                isEditing: false,
                selectedCarId: '',
                formAction: '{{ route('admin.vehicle-documents.store') }}',
                formData: {
                    reg_expiry: '',
                    ins_date: '',
                    ins_expiry: '',
                    notes: '',
                    reg_url: null,
                    ins_url: null
                },

                initPickers() {
                    const locale = '{{ app()->getLocale() }}';
                    const options = {
                        dateFormat: 'Y-m-d',
                        locale: locale === 'ar' ? 'ar' : 'default',
                        enableTime: false
                    };
                    
                    flatpickr('#reg_expiry', options);
                    flatpickr('#ins_date', options);
                    flatpickr('#ins_expiry', options);
                },

                resetForm() {
                    this.isEditing = false;
                    this.selectedCarId = '';
                    this.formAction = '{{ route('admin.vehicle-documents.store') }}';
                    this.formData = {
                        reg_expiry: '',
                        ins_date: '',
                        ins_expiry: '',
                        notes: '',
                        reg_url: null,
                        ins_url: null
                    };
                    setTimeout(() => this.initPickers(), 100);
                },

                loadCarDoc() {
                    if (!this.selectedCarId) return;

                    fetch(`{{ url('admin/vehicle-documents/car') }}/${this.selectedCarId}`)
                        .then(res => res.json())
                        .then(data => {
                            if (data.exists) {
                                this.isEditing = true;
                                this.formAction = data.update_url;
                                this.formData.reg_expiry = data.document.registration_expiry_date.split('T')[0];
                                this.formData.ins_date = data.document.inspection_date.split('T')[0];
                                this.formData.ins_expiry = data.document.inspection_expiry_date.split('T')[0];
                                this.formData.notes = data.document.notes;
                                this.formData.reg_url = data.registration_doc_url;
                                this.formData.ins_url = data.inspection_doc_url;
                            } else {
                                this.isEditing = false;
                                this.formAction = data.store_url;
                                this.formData.reg_expiry = '';
                                this.formData.ins_date = '';
                                this.formData.ins_expiry = '';
                                this.formData.notes = '';
                                this.formData.reg_url = null;
                                this.formData.ins_url = null;
                            }
                            setTimeout(() => this.initPickers(), 100);
                        });
                },

                editDoc(carId) {
                    this.selectedCarId = carId;
                    this.showModal = true;
                    this.loadCarDoc();
                }
            }
        }
    </script>
    @endpush
</div>
@endsection