@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' ? 'تسجيل التأمين على المركبات' : 'Vehicle Insurances' }}
    </h2>
    <button onclick="openInsuranceModal()" style="background: #d4af37; color: black; padding: 0.5rem 1rem; border-radius: 0.5rem; text-decoration: none; font-size: 0.875rem; font-weight: bold; border: none; cursor: pointer;">
        {{ app()->getLocale() == 'ar' ? '+ تسجيل تأمين جديد' : '+ New Insurance' }}
    </button>
</div>

<div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-[#111] border border-gray-800 rounded-2xl overflow-hidden shadow-xl">
                <table class="w-full text-right">
                    <thead class="bg-black/50 text-gray-500 text-xs uppercase">
                        <tr>
                            <th class="px-6 py-4">{{ app()->getLocale() == 'ar' ? 'السيارة' : 'Vehicle' }}</th>
                            <th class="px-6 py-4">{{ app()->getLocale() == 'ar' ? 'شركة التأمين' : 'Company' }}</th>
                            <th class="px-6 py-4">{{ app()->getLocale() == 'ar' ? 'رقم الوثيقة' : 'Policy #' }}</th>
                            <th class="px-6 py-4">{{ app()->getLocale() == 'ar' ? 'نوع التأمين' : 'Type' }}</th>
                            <th class="px-6 py-4">{{ app()->getLocale() == 'ar' ? 'تاريخ الانتهاء' : 'Expiry Date' }}</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($insurances as $insurance)
                        <tr class="hover:bg-white/5 transition-colors">
                            <td class="px-6 py-4">
                                <div class="text-sm font-bold text-white">{{ $insurance->car->brand?->name }} {{ $insurance->car->carModel?->name }}</div>
                                <div class="text-[10px] text-gray-500">{{ $insurance->car->plate_number }}</div>
                            </td>
                            <td class="px-6 py-4 text-sm text-gray-300">{{ $insurance->company->name }}</td>
                            <td class="px-6 py-4 text-sm font-mono text-gray-400">{{ $insurance->policy_number }}</td>
                            <td class="px-6 py-4 text-xs">
                                <span class="px-2 py-0.5 rounded-full {{ $insurance->insurance_type == 'comprehensive' ? 'bg-blue-500/10 text-blue-400' : 'bg-gray-500/10 text-gray-400' }}">
                                    {{ $insurance->insurance_type == 'comprehensive' ? (app()->getLocale() == 'ar' ? 'شامل' : 'Comprehensive') : (app()->getLocale() == 'ar' ? 'ضد الغير' : 'Third Party') }}
                                </span>
                            </td>
                            <td class="px-6 py-4">
                                <div class="text-sm {{ $insurance->end_date->isPast() ? 'text-red-400' : ($insurance->end_date->diffInDays(now()) < 30 ? 'text-yellow-400' : 'text-gray-300') }}">
                                    {{ $insurance->end_date->format('Y-m-d') }}
                                </div>
                            </td>
                            <td class="px-6 py-4">
                                <span class="text-[10px] px-2 py-0.5 rounded-full 
                                    {{ $insurance->status == 'active' ? 'bg-green-500/20 text-green-400' : 'bg-red-500/20 text-red-400' }}">
                                    {{ $insurance->status == 'active' ? (app()->getLocale() == 'ar' ? 'ساري' : 'Active') : (app()->getLocale() == 'ar' ? 'منتهي' : 'Expired') }}
                                </span>
                            </td>
                            <td class="px-6 py-4 text-xs">
                                <div class="flex items-center gap-3">
                                    <a href="{{ route('admin.vehicle-insurances.show', $insurance->id) }}" class="p-1.5 bg-gray-800 text-gray-400 rounded-lg hover:bg-[#d4af37] hover:text-black transition-all" title="{{ app()->getLocale() == 'ar' ? 'عرض' : 'View' }}">
                                        <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>
                                    
                                    <a href="{{ route('admin.vehicle-insurances.edit', $insurance->id) }}" class="p-1.5 bg-blue-500/10 text-blue-400 rounded-lg hover:bg-blue-500 hover:text-white transition-all" title="{{ app()->getLocale() == 'ar' ? 'تعديل' : 'Edit' }}">
                                        <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>
                                    </a>

                                    <form action="{{ route('admin.vehicle-insurances.destroy', $insurance->id) }}" method="POST" onsubmit="return confirm('{{ app()->getLocale() == 'ar' ? 'هل أنت متأكد من حذف هذا التأمين؟' : 'Are you sure you want to delete this insurance?' }}')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="p-1.5 bg-red-500/10 text-red-400 rounded-lg hover:bg-red-500 hover:text-white transition-all" title="{{ app()->getLocale() == 'ar' ? 'حذف' : 'Delete' }}">
                                            <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
                                        </button>
                                    </form>

                                    @if($insurance->document_path)
                                        <a href="{{ asset('storage/' . $insurance->document_path) }}" target="_blank" class="p-1.5 bg-blue-500/10 text-blue-400 rounded-lg hover:bg-blue-500 hover:text-white transition-all" title="{{ app()->getLocale() == 'ar' ? 'المستند' : 'Document' }}">
                                            <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="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>
                                        </a>
                                    @endif
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
                <div class="p-4 border-t border-gray-800">
                    {{ $insurances->links() }}
                </div>
            </div>
    </div>
</div>

<!-- Insurance Modal -->
<div id="insuranceModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 50; justify-content: center; align-items: center;">
    <div style="background: #111; border: 1px solid #333; border-radius: 1rem; padding: 2rem; max-width: 700px; width: 90%; max-height: 90vh; overflow-y: auto;">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;">
            <h3 style="color: #d4af37; font-size: 1.25rem; font-weight: bold;">
                {{ app()->getLocale() == 'ar' ? 'تسجيل تأمين جديد' : 'Register New Insurance' }}
            </h3>
            <button onclick="closeInsuranceModal()" style="background: none; border: none; color: #999; font-size: 1.5rem; cursor: pointer;">×</button>
        </div>

        <form action="{{ route('admin.vehicle-insurances.store') }}" method="POST" enctype="multipart/form-data">
            @csrf

            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem;">
                <div>
                    <label style="display: block; color: #999; font-size: 0.75rem; text-transform: uppercase; margin-bottom: 0.5rem;">{{ app()->getLocale() == 'ar' ? 'السيارة' : 'Vehicle' }}</label>
                    <select name="car_id" required style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.625rem; color: white; font-size: 0.875rem; text-align: right;">
                        <option value="">{{ app()->getLocale() == 'ar' ? 'اختر السيارة' : 'Select Car' }}</option>
                        @php
                            $cars = \App\Models\Car::all();
                        @endphp
                        @foreach($cars as $car)
                            <option value="{{ $car->id }}">{{ $car->brand?->name }} ({{ $car->plate_number }})</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label style="display: block; color: #999; font-size: 0.75rem; text-transform: uppercase; margin-bottom: 0.5rem;">{{ app()->getLocale() == 'ar' ? 'رقم الوثيقة' : 'Policy Number' }}</label>
                    <input type="text" name="policy_number" required style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.625rem; color: white; font-size: 0.875rem;" placeholder="POL-xxx">
                </div>
            </div>

            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem;">
                <div>
                    <label style="display: block; color: #999; font-size: 0.75rem; text-transform: uppercase; margin-bottom: 0.5rem;">{{ app()->getLocale() == 'ar' ? 'شركة التأمين' : 'Insurance Company' }}</label>
                    <select name="insurance_company_id" required style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.625rem; color: white; font-size: 0.875rem; text-align: right;">
                        <option value="">{{ app()->getLocale() == 'ar' ? 'اختر الشركة' : 'Select Company' }}</option>
                        @php
                            $companies = \App\Models\Rental\InsuranceCompany::where('is_active', true)->get();
                        @endphp
                        @foreach($companies as $company)
                            <option value="{{ $company->id }}">{{ $company->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label style="display: block; color: #999; font-size: 0.75rem; text-transform: uppercase; margin-bottom: 0.5rem;">{{ app()->getLocale() == 'ar' ? 'نوع التأمين' : 'Insurance Type' }}</label>
                    <select name="insurance_type" required style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.625rem; color: white; font-size: 0.875rem; text-align: right;">
                        <option value="comprehensive">{{ app()->getLocale() == 'ar' ? 'شامل' : 'Comprehensive' }}</option>
                        <option value="third_party">{{ app()->getLocale() == 'ar' ? 'ضد الغير' : 'Third Party' }}</option>
                    </select>
                </div>
            </div>

            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem;">
                <div>
                    <label style="display: block; color: #999; font-size: 0.75rem; text-transform: uppercase; margin-bottom: 0.5rem;">{{ app()->getLocale() == 'ar' ? 'تاريخ البداية' : 'Start Date' }}</label>
                    <input type="date" name="start_date" value="{{ date('Y-m-d') }}" required style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.625rem; color: white; font-size: 0.875rem;">
                </div>
                <div>
                    <label style="display: block; color: #999; font-size: 0.75rem; text-transform: uppercase; margin-bottom: 0.5rem;">{{ app()->getLocale() == 'ar' ? 'تاريخ الانتهاء' : 'End Date' }}</label>
                    <input type="date" name="end_date" required style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.625rem; color: white; font-size: 0.875rem;">
                </div>
            </div>

            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem;">
                <div>
                    <label style="display: block; color: #999; font-size: 0.75rem; text-transform: uppercase; margin-bottom: 0.5rem;">{{ app()->getLocale() == 'ar' ? 'قسط التأمين' : 'Premium Amount' }}</label>
                    <input type="number" step="0.01" name="premium_amount" required style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.625rem; color: #d4af37; font-size: 0.875rem; font-weight: bold;" placeholder="0.00">
                </div>
                <div>
                    <label style="display: block; color: #999; font-size: 0.75rem; text-transform: uppercase; margin-bottom: 0.5rem;">{{ app()->getLocale() == 'ar' ? 'قيمة التحمل' : 'Deductible' }}</label>
                    <input type="number" step="0.01" name="deductible_amount" value="0" required style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.625rem; color: white; font-size: 0.875rem;" placeholder="0.00">
                </div>
            </div>

            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem;">
                <div>
                    <label style="display: block; color: #999; font-size: 0.75rem; text-transform: uppercase; margin-bottom: 0.5rem;">{{ app()->getLocale() == 'ar' ? 'قيمة التغطية' : 'Coverage Amount' }}</label>
                    <input type="number" step="0.01" name="coverage_amount" style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.625rem; color: white; font-size: 0.875rem;" placeholder="0.00">
                </div>
                <div>
                    <label style="display: block; color: #999; font-size: 0.75rem; text-transform: uppercase; margin-bottom: 0.5rem;">{{ app()->getLocale() == 'ar' ? 'حالة الدفع' : 'Payment Status' }}</label>
                    <select name="payment_status" required style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.625rem; color: white; font-size: 0.875rem; text-align: right;">
                        <option value="unpaid">{{ app()->getLocale() == 'ar' ? 'غير مدفوع' : 'Unpaid' }}</option>
                        <option value="paid">{{ app()->getLocale() == 'ar' ? 'مدفوع' : 'Paid' }}</option>
                        <option value="partial">{{ app()->getLocale() == 'ar' ? 'مدفوع جزئياً' : 'Partial' }}</option>
                    </select>
                </div>
            </div>

            <div style="margin-bottom: 1.5rem;">
                <label style="display: block; color: #999; font-size: 0.75rem; text-transform: uppercase; margin-bottom: 0.5rem;">{{ app()->getLocale() == 'ar' ? 'ملاحظات' : 'Notes' }}</label>
                <textarea name="notes" style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.625rem; color: white; font-size: 0.875rem; height: 80px; text-align: right;"></textarea>
            </div>

            <div style="display: flex; gap: 1rem;">
                <button type="submit" style="flex: 1; background: #d4af37; color: black; padding: 0.75rem; border-radius: 0.5rem; border: none; font-weight: bold; cursor: pointer; font-size: 0.875rem;">
                    {{ app()->getLocale() == 'ar' ? 'حفظ التأمين' : 'Save Insurance' }}
                </button>
                <button type="button" onclick="closeInsuranceModal()" style="flex: 1; background: #666; color: white; padding: 0.75rem; border-radius: 0.5rem; border: none; font-weight: bold; cursor: pointer; font-size: 0.875rem;">
                    {{ app()->getLocale() == 'ar' ? 'إلغاء' : 'Cancel' }}
                </button>
            </div>
        </form>
    </div>
</div>

<script>
    function openInsuranceModal() {
        document.getElementById('insuranceModal').style.display = 'flex';
    }
    
    function closeInsuranceModal() {
        document.getElementById('insuranceModal').style.display = 'none';
    }
    
    document.getElementById('insuranceModal').addEventListener('click', function(e) {
        if (e.target === this) {
            closeInsuranceModal();
        }
    });
</script>

@endsection