@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' ? 'إضافة وثيقة تأمين جديدة' : 'Add New 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;">
        {{ app()->getLocale() == 'ar' ? 'عودة' : 'Back' }}
    </a>
</div>

<div style="background: #111; border: 1px solid #333; border-radius: 1rem; padding: 2rem; max-width: 700px; margin: 0 auto;">
                <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; text-align: right;">{{ 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>
                                @foreach($cars as $car)
                                    <option value="{{ $car->id }}" {{ old('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; text-align: right;">{{ 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>
                                @foreach($companies as $company)
                                    <option value="{{ $company->id }}" {{ old('insurance_company_id') == $company->id ? 'selected' : '' }}>{{ $company->name }}</option>
                                @endforeach
                            </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; text-align: right;">{{ app()->getLocale() == 'ar' ? 'رقم الوثيقة' : 'Policy Number' }}</label>
                            <input type="text" name="policy_number" value="{{ old('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;">
                        </div>
                        <div>
                            <label style="display: block; color: #999; font-size: 0.75rem; text-transform: uppercase; margin-bottom: 0.5rem; text-align: right;">{{ 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" {{ old('insurance_type') == 'comprehensive' ? 'selected' : '' }}>{{ app()->getLocale() == 'ar' ? 'شامل' : 'Comprehensive' }}</option>
                                <option value="third_party" {{ old('insurance_type') == 'third_party' ? 'selected' : '' }}>{{ 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; text-align: right;">{{ app()->getLocale() == 'ar' ? 'تاريخ البداية' : 'Start Date' }}</label>
                            <input type="date" name="start_date" value="{{ old('start_date', 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; text-align: right;">{{ app()->getLocale() == 'ar' ? 'تاريخ الانتهاء' : 'End Date' }}</label>
                            <input type="date" name="end_date" value="{{ old('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; text-align: right;">{{ app()->getLocale() == 'ar' ? 'قسط التأمين' : 'Premium Amount' }}</label>
                            <input type="number" step="0.01" name="premium_amount" value="{{ old('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; text-align: right;">{{ 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="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; text-align: right;">{{ app()->getLocale() == 'ar' ? 'قيمة التغطية' : 'Coverage Amount' }}</label>
                            <input type="number" step="0.01" name="coverage_amount" value="{{ old('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; text-align: right;">{{ app()->getLocale() == 'ar' ? 'قيمة التحمل' : 'Deductible' }}</label>
                            <input type="number" step="0.01" name="deductible_amount" value="{{ old('deductible_amount', 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="margin-bottom: 1.5rem;">
                        <label style="display: block; color: #999; font-size: 0.75rem; text-transform: uppercase; margin-bottom: 0.5rem; text-align: right;">{{ 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;">{{ old('notes') }}</textarea>
                    </div>

                    <div style="display: flex; gap: 1rem; margin-top: 2rem;">
                        <button type="submit" class="flex-1 bg-[#d4af37] text-black font-bold py-3 rounded-lg hover:bg-[#b08d2a] transition-colors">
                            {{ app()->getLocale() == 'ar' ? 'تسجيل الوثيقة' : 'Record Policy' }}
                        </button>
                        <a href="{{ route('admin.vehicle-insurances.index') }}" style="flex: 1; background: #666; color: white; padding: 0.75rem 1rem; border-radius: 0.5rem; text-decoration: none; text-align: center; font-weight: bold;">
                            {{ app()->getLocale() == 'ar' ? 'إلغاء' : 'Cancel' }}
                        </a>
                    </div>
                </form>
</div>

@endsection