<?php $__env->startSection('content'); ?>
        <div class="flex justify-between items-center" style="margin-top: 15px;">
            <h2 class="font-semibold text-xl text-[#d4af37] leading-tight">
                <?php echo e(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">
                <?php echo e(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="<?php echo e(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"><?php echo e(app()->getLocale() == 'ar' ? 'بحث (السيارة / اللوحة)' : 'Search (Car / Plate)'); ?></label>
                            <input type="text" name="search" value="<?php echo e(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"><?php echo e(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=""><?php echo e(app()->getLocale() == 'ar' ? 'الكل' : 'All'); ?></option>
                                <option value="valid" <?php echo e(request('status') == 'valid' ? 'selected' : ''); ?>><?php echo e(app()->getLocale() == 'ar' ? 'ساري' : 'Valid'); ?></option>
                                <option value="expiring_soon" <?php echo e(request('status') == 'expiring_soon' ? 'selected' : ''); ?>><?php echo e(app()->getLocale() == 'ar' ? 'سينتهي قريباً' : 'Expiring Soon'); ?></option>
                                <option value="expired" <?php echo e(request('status') == 'expired' ? 'selected' : ''); ?>><?php echo e(app()->getLocale() == 'ar' ? 'منتهي' : 'Expired'); ?></option>
                            </select>
                        </div>

                        <div>
                            <label class="block text-xs text-gray-500 mb-2 uppercase tracking-wider"><?php echo e(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" <?php echo e(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"><?php echo e(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">
                                <?php echo e(app()->getLocale() == 'ar' ? 'بحث' : 'Search'); ?>

                            </button>
                            <a href="<?php echo e(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">
                                <?php echo e(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 <?php echo e(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"><?php echo e(app()->getLocale() == 'ar' ? 'السيارة واللوحة' : 'Vehicle & Plate'); ?></th>
                            <th class="px-6 py-5"><?php echo e(app()->getLocale() == 'ar' ? 'انتهاء الاستمارة' : 'Reg. Expiry'); ?></th>
                            <th class="px-6 py-5"><?php echo e(app()->getLocale() == 'ar' ? 'آخر فحص' : 'Last Insp.'); ?></th>
                            <th class="px-6 py-5"><?php echo e(app()->getLocale() == 'ar' ? 'انتهاء الفحص' : 'Insp. Expiry'); ?></th>
                            <th class="px-6 py-5"><?php echo e(app()->getLocale() == 'ar' ? 'الحالة' : 'Status'); ?></th>
                            <th class="px-6 py-5 text-center"><?php echo e(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']
                            ];
                        ?>
                        <?php $__empty_1 = true; $__currentLoopData = $documents; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $doc): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                        <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"><?php echo e($doc->car->title); ?></div>
                                <div class="text-[10px] text-gray-500 font-mono tracking-tighter"><?php echo e($doc->car->plate_number); ?></div>
                            </td>
                            <td class="px-6 py-4">
                                <div class="text-sm <?php echo e($doc->registration_expiry_date->isPast() ? 'text-red-400' : ($doc->registration_expiry_date->diffInDays(now()) <= 30 ? 'text-yellow-400' : 'text-gray-300')); ?>">
                                    <?php echo e($doc->registration_expiry_date->format('Y-m-d')); ?>

                                </div>
                                <div class="text-[9px] text-gray-600 mt-1 uppercase"><?php echo e($doc->registration_expiry_date->diffForHumans()); ?></div>
                            </td>
                            <td class="px-6 py-4 text-sm text-gray-400">
                                <?php echo e($doc->inspection_date->format('Y-m-d')); ?>

                            </td>
                            <td class="px-6 py-4">
                                <div class="text-sm <?php echo e($doc->inspection_expiry_date->isPast() ? 'text-red-400' : ($doc->inspection_expiry_date->diffInDays(now()) <= 30 ? 'text-yellow-400' : 'text-gray-300')); ?>">
                                    <?php echo e($doc->inspection_expiry_date->format('Y-m-d')); ?>

                                </div>
                                <div class="text-[9px] text-gray-600 mt-1 uppercase"><?php echo e($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 <?php echo e($status_colors[$doc->status]); ?>">
                                    <?php echo e($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(<?php echo e($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="<?php echo e(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>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                        <tr>
                            <td colspan="6" class="px-6 py-20 text-center text-gray-600 italic">
                                <?php echo e(app()->getLocale() == 'ar' ? 'لا توجد بيانات تطابق بحثك.' : 'No data matching your search found.'); ?>

                            </td>
                        </tr>
                        <?php endif; ?>
                    </tbody>
                </table>
                <div class="p-6 border-t border-gray-800 bg-black/20">
                    <?php echo e($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">
                            <?php echo e(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">
                            <?php echo csrf_field(); ?>
                            <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"><?php echo e(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=""><?php echo e(app()->getLocale() == 'ar' ? '--- اختر السيارة ---' : '--- Select Vehicle ---'); ?></option>
                                        <?php $__currentLoopData = $cars; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $car): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                            <option value="<?php echo e($car->id); ?>"><?php echo e($car->title); ?> (<?php echo e($car->plate_number); ?>)</option>
                                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                    </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"><?php echo e(app()->getLocale() == 'ar' ? 'بيانات الاستمارة' : 'Registration'); ?></div>
                                            <div>
                                                <label class="block text-[10px] text-gray-600 mb-1 uppercase"><?php echo e(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"><?php echo e(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"><?php echo e(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"><?php echo e(app()->getLocale() == 'ar' ? 'بيانات الفحص الدوري' : 'Inspection'); ?></div>
                                            <div>
                                                <label class="block text-[10px] text-gray-600 mb-1 uppercase"><?php echo e(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"><?php echo e(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"><?php echo e(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"><?php echo e(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"><?php echo e(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">
                                            <?php echo e(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;">
                                            <?php echo e(app()->getLocale() == 'ar' ? 'حفظ البيانات' : 'Save Changes'); ?>

                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <?php $__env->startPush('scripts'); ?>
    <script>
        function documentManager() {
            return {
                showModal: false,
                isEditing: false,
                selectedCarId: '',
                formAction: '<?php echo e(route('admin.vehicle-documents.store')); ?>',
                formData: {
                    reg_expiry: '',
                    ins_date: '',
                    ins_expiry: '',
                    notes: '',
                    reg_url: null,
                    ins_url: null
                },

                initPickers() {
                    const locale = '<?php echo e(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 = '<?php echo e(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(`<?php echo e(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>
    <?php $__env->stopPush(); ?>
</div>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\xampp\htdocs\tq cars\resources\views/admin/vehicle-documents/index.blade.php ENDPATH**/ ?>