@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' ? 'تعديل وثيقة التأمين' : 'Edit Insurance Policy' }}
    </h2>
    <a href="{{ route('admin.vehicle-insurances.index') }}" style="background: #666; color: white; padding: 0.5rem 1rem; border-radius: 0.5rem; text-decoration: none; font-size: 0.875rem;">
        {{ app()->getLocale() == 'ar' ? 'عودة' : 'Back' }}
    </a>
</div>

<div style="background: #111; border: 1px solid #333; border-radius: 1rem; padding: 2rem; max-width: 800px; margin: 0 auto; shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);">
    <form action="{{ route('admin.vehicle-insurances.update', $vehicle_insurance->id) }}" method="POST" enctype="multipart/form-data">
        @csrf
        @method('PUT')

        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem;">
            <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.75rem; color: white; font-size: 0.875rem; text-align: right;">
                    @foreach($cars as $car)
                        <option value="{{ $car->id }}" {{ $vehicle_insurance->car_id == $car->id ? 'selected' : '' }}>
                            {{ $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" value="{{ old('policy_number', $vehicle_insurance->policy_number) }}" required style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.75rem; color: white; font-size: 0.875rem;">
            </div>
        </div>

        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem;">
            <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.75rem; color: white; font-size: 0.875rem; text-align: right;">
                    @foreach($companies as $company)
                        <option value="{{ $company->id }}" {{ $vehicle_insurance->insurance_company_id == $company->id ? 'selected' : '' }}>
                            {{ $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.75rem; color: white; font-size: 0.875rem; text-align: right;">
                    <option value="comprehensive" {{ $vehicle_insurance->insurance_type == 'comprehensive' ? 'selected' : '' }}>{{ app()->getLocale() == 'ar' ? 'شامل' : 'Comprehensive' }}</option>
                    <option value="third_party" {{ $vehicle_insurance->insurance_type == 'third_party' ? 'selected' : '' }}>{{ app()->getLocale() == 'ar' ? 'ضد الغير' : 'Third Party' }}</option>
                </select>
            </div>
        </div>

        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem;">
            <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="{{ old('start_date', $vehicle_insurance->start_date->format('Y-m-d')) }}" required style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.75rem; 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" value="{{ old('end_date', $vehicle_insurance->end_date->format('Y-m-d')) }}" required style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.75rem; color: white; font-size: 0.875rem;">
            </div>
        </div>

        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem;">
            <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" value="{{ old('premium_amount', $vehicle_insurance->premium_amount) }}" required style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.75rem; color: #d4af37; font-size: 0.875rem; font-weight: bold;">
            </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="{{ old('deductible_amount', $vehicle_insurance->deductible_amount) }}" required style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.75rem; color: white; font-size: 0.875rem;">
            </div>
        </div>

        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem;">
            <div>
                <label style="display: block; color: #999; font-size: 0.75rem; text-transform: uppercase; margin-bottom: 0.5rem;">{{ app()->getLocale() == 'ar' ? 'الحالة' : 'Status' }}</label>
                <select name="status" required style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.75rem; color: white; font-size: 0.875rem; text-align: right;">
                    <option value="active" {{ $vehicle_insurance->status == 'active' ? 'selected' : '' }}>{{ app()->getLocale() == 'ar' ? 'ساري' : 'Active' }}</option>
                    <option value="expired" {{ $vehicle_insurance->status == 'expired' ? 'selected' : '' }}>{{ app()->getLocale() == 'ar' ? 'منتهي' : 'Expired' }}</option>
                    <option value="cancelled" {{ $vehicle_insurance->status == 'cancelled' ? 'selected' : '' }}>{{ app()->getLocale() == 'ar' ? 'ملغي' : 'Cancelled' }}</option>
                </select>
            </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.75rem; color: white; font-size: 0.875rem; text-align: right;">
                    <option value="paid" {{ $vehicle_insurance->payment_status == 'paid' ? 'selected' : '' }}>{{ app()->getLocale() == 'ar' ? 'مدفوع' : 'Paid' }}</option>
                    <option value="unpaid" {{ $vehicle_insurance->payment_status == 'unpaid' ? 'selected' : '' }}>{{ app()->getLocale() == 'ar' ? 'غير مدفوع' : 'Unpaid' }}</option>
                    <option value="partial" {{ $vehicle_insurance->payment_status == 'partial' ? 'selected' : '' }}>{{ 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' ? 'وثيقة التأمين' : 'Insurance Document' }}</label>
            @if($vehicle_insurance->document_path)
                <div style="margin-bottom: 0.5rem;">
                    <a href="{{ asset('storage/' . $vehicle_insurance->document_path) }}" target="_blank" style="color: #3b82f6; font-size: 0.75rem;">
                        {{ app()->getLocale() == 'ar' ? 'عرض الوثيقة الحالية' : 'View Current Document' }}
                    </a>
                </div>
            @endif
            <input type="file" name="document_file" style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.75rem; color: white; font-size: 0.875rem;">
        </div>

        <div style="margin-bottom: 2rem;">
            <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.75rem; color: white; font-size: 0.875rem; height: 100px; text-align: right;">{{ old('notes', $vehicle_insurance->notes) }}</textarea>
        </div>

        <div style="display: flex; gap: 1rem;">
            <button type="submit" style="flex: 1; background: #d4af37; color: black; padding: 1rem; border-radius: 0.5rem; border: none; font-weight: bold; cursor: pointer; font-size: 1rem; transition: transform 0.2s;" onmouseover="this.style.transform='scale(1.02)'" onmouseout="this.style.transform='scale(1)'">
                {{ app()->getLocale() == 'ar' ? 'تحديث بيانات التأمين' : 'Update Insurance' }}
            </button>
        </div>
    </form>
</div>

@endsection