@extends('layouts.app')

@section('content')

<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">
    <h2 style="color: #d4af37; font-size: 1.5rem; font-weight: bold;">إنشاء عقد تأجير جديد</h2>
    <a href="{{ route('admin.rentals.index') }}" style="background: #666; color: white; padding: 0.5rem 1rem; border-radius: 0.5rem; text-decoration: none;">عودة</a>
</div>

<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">
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

<style>
    body { font-family: 'Tajawal', sans-serif !important; }
    .flatpickr-calendar { background: #111 !important; border: 1px solid #333 !important; }
    .flatpickr-day.selected { background: #d4af37 !important; border-color: #d4af37 !important; color: black !important; }
    .select2-container--default .select2-selection--single { background-color: black !important; border-color: #1f2937 !important; height: 42px !important; padding: 6px !important; }
    .select2-container--default .select2-selection--single .select2-selection__rendered { color: white !important; }
    .select2-dropdown { background-color: #111 !important; border-color: #333 !important; color: white !important; }
    .select2-search__field { background-color: black !important; color: white !important; }
    
    .tabs-container {
        display: flex;
        gap: 0.25rem;
        margin-bottom: 1.5rem;
        border-bottom: 2px solid #333;
        overflow-x: hidden;
    }
    
    .tab-button {
        padding: 1rem 0.6rem;
        background: transparent;
        border: none;
        color: #999;
        cursor: pointer;
        font-weight: 500;
        font-size: 0.85rem;
        border-bottom: 3px solid transparent;
        white-space: nowrap;
        transition: all 0.3s ease;
    }
    
    .tab-button.active {
        color: #d4af37;
        border-bottom-color: #d4af37;
    }
    
    .tab-button:hover {
        color: #ccc;
    }
    
    .tab-content {
        display: none;
    }
    
    .tab-content.active {
        display: block;
    }
    
    .insurance-status-badge {
        display: inline-block;
        padding: 0.25rem 0.75rem;
        border-radius: 0.5rem;
        font-size: 0.875rem;
        font-weight: bold;
    }
    
    .insurance-status-held {
        background: #ff9800;
        color: black;
    }
    
    .insurance-status-partially_refunded {
        background: #2196f3;
        color: white;
    }
    
    .insurance-status-refunded {
        background: #4caf50;
        color: white;
    }
</style>

<div x-data="rentalForm()" x-init="initPickers()" style="display: block;">
    <form action="{{ route('admin.rentals.store') }}" method="POST" enctype="multipart/form-data" style="display: block;">
        @csrf
        <div style="display: grid; grid-template-columns: 75% 25%; gap: 2rem;">
            <!-- Left Column: Main Form with Tabs -->
            <div>
                <!-- Tabs Navigation -->
                <div class="tabs-container">
                    <button type="button" class="tab-button active" @click="activeTab = 'customer'" :class="{ active: activeTab === 'customer' }">
                        <span style="margin-right: 0.5rem;">👥</span>بيانات العميل والسيارة
                    </button>
                    <button type="button" class="tab-button" @click="activeTab = 'dates'" :class="{ active: activeTab === 'dates' }">
                        <span style="margin-right: 0.5rem;">📅</span>التواريخ والكيلومترات
                    </button>
                    <button type="button" class="tab-button" @click="activeTab = 'addons'" :class="{ active: activeTab === 'addons' }">
                        <span style="margin-right: 0.5rem;">🚀</span>عزز تجربتك
                    </button>
                    <button type="button" class="tab-button" @click="activeTab = 'insurance'" :class="{ active: activeTab === 'insurance' }">
                        <span style="margin-right: 0.5rem;">🛡️</span>التأمين
                    </button>
                    <button type="button" class="tab-button" @click="activeTab = 'inspection'" :class="{ active: activeTab === 'inspection' }">
                        <span style="margin-right: 0.5rem;">🔍</span>فحص الاستلام
                    </button>
                    <button type="button" class="tab-button" @click="activeTab = 'financial'" :class="{ active: activeTab === 'financial' }">
                        <span style="margin-right: 0.5rem;">💰</span>الشروط المالية
                    </button>
                </div>

                <!-- Tab 1: Customer & Car -->
                <div class="tab-content" :class="{ active: activeTab === 'customer' }">
                    <div style="background: #111; border: 1px solid #333; border-radius: 1rem; padding: 1.5rem; margin-bottom: 1.5rem;">
                        <h3 style="font-size: 1.125rem; font-weight: bold; margin-bottom: 1.5rem; color: white; border-bottom: 1px solid #333; padding-bottom: 0.5rem;">بيانات العميل والسيارة</h3>
                        
                        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem;">
                            <div>
                                <label style="display: block; font-size: 0.75rem; color: #999; margin-bottom: 0.5rem; text-transform: uppercase;">الفرع <span style="color: red;">*</span></label>
                                <select name="branch_id" id="branch_select" x-model="branch_id" class="select2" style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.5rem; color: white;" required>
                                    <option value="">اختر فرع</option>
                                    @foreach($branches as $branch)
                                        <option value="{{ $branch->id }}" @if(auth()->user()->branch_id == $branch->id) selected @endif>{{ $branch->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div>
                                <label style="display: block; font-size: 0.75rem; color: #999; margin-bottom: 0.5rem; text-transform: uppercase;">مصدر العقد</label>
                                <select name="contract_source" x-model="contract_source" style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.5rem; color: white;">
                                    <option value="direct">مباشر</option>
                                    <option value="booking">حجز مسبق</option>
                                    <option value="repeat_customer">عميل متكرر</option>
                                </select>
                            </div>
                        </div>

                        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;">
                            <div>
                                <label style="display: block; font-size: 0.75rem; color: #999; margin-bottom: 0.5rem; text-transform: uppercase;">اختر السيارة <span style="color: red;">*</span></label>
                                <select name="car_id" id="car_select" x-model="car_id" @change="updateCarDetails()" class="select2" style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.5rem; color: white;" required>
                                    @if(auth()->user()->isAdmin() && !auth()->user()->branch_id)
                                        <option value="">اختر الفرع أولاً</option>
                                    @else
                                        <option value="">اختر سيارة</option>
                                        @foreach($cars as $car)
                                            <option value="{{ $car->id }}" data-price="{{ $car->daily_price }}" data-km="{{ $car->allowed_km_per_day }}" data-extra-price="{{ $car->extra_km_price }}" data-odometer="{{ $car->mileage }}">{{ $car->title }}</option>
                                        @endforeach
                                    @endif
                                </select>
                                @error('car_id')
                                    <span style="color: #ff6b6b; font-size: 0.875rem; margin-top: 0.25rem;">{{ $message }}</span>
                                @enderror
                            </div>
                            <div>
                                <label style="display: block; font-size: 0.75rem; color: #999; margin-bottom: 0.5rem; text-transform: uppercase;">اختر العميل <span style="color: red;">*</span></label>
                                <select name="customer_id" id="customer_select" x-model="customer_id" class="select2" style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.5rem; color: white;" required>
                                    <option value="">اختر عميل</option>
                                    @foreach($customers as $customer)
                                        <option value="{{ $customer->id }}">{{ $customer->name }}</option>
                                    @endforeach
                                </select>
                                @error('customer_id')
                                    <span style="color: #ff6b6b; font-size: 0.875rem; margin-top: 0.25rem;">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Tab 2: Dates & Mileage -->
                <div class="tab-content" :class="{ active: activeTab === 'dates' }">
                    <div style="background: #111; border: 1px solid #333; border-radius: 1rem; padding: 1.5rem; margin-bottom: 1.5rem;">
                        <h3 style="font-size: 1.125rem; font-weight: bold; margin-bottom: 1.5rem; color: white; border-bottom: 1px solid #333; padding-bottom: 0.5rem;">التواريخ</h3>
                        
                        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;">
                            <div>
                                <label style="display: block; font-size: 0.75rem; color: #999; margin-bottom: 0.5rem; text-transform: uppercase;">تاريخ البداية <span style="color: red;">*</span></label>
                                <input type="text" name="start_date" id="start_date" x-model="start_date" @change="calculateTotal()" style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.5rem; color: white;" required>
                                @error('start_date')
                                    <span style="color: #ff6b6b; font-size: 0.875rem; margin-top: 0.25rem;">{{ $message }}</span>
                                @enderror
                            </div>
                            <div>
                                <label style="display: block; font-size: 0.75rem; color: #999; margin-bottom: 0.5rem; text-transform: uppercase;">تاريخ النهاية <span style="color: red;">*</span></label>
                                <input type="text" name="end_date" id="end_date" x-model="end_date" @change="calculateTotal()" style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.5rem; color: white;" required>
                                @error('end_date')
                                    <span style="color: #ff6b6b; font-size: 0.875rem; margin-top: 0.25rem;">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div style="background: #111; border: 1px solid #333; border-radius: 1rem; padding: 1.5rem;">
                        <h3 style="font-size: 1.125rem; font-weight: bold; margin-bottom: 1.5rem; color: white; border-bottom: 1px solid #333; padding-bottom: 0.5rem;">الكيلومترات عند الاستلام</h3>
                        
                        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;">
                            <div>
                                <label style="display: block; font-size: 0.75rem; color: #999; margin-bottom: 0.5rem; text-transform: uppercase;">قراءة العداد عند الاستلام <span style="color: red;">*</span></label>
                                <input type="number" name="start_odometer" x-model.number="start_odometer" @change="calculateTotal()" style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.5rem; color: white;" required>
                                @error('start_odometer')
                                    <span style="color: #ff6b6b; font-size: 0.875rem; margin-top: 0.25rem;">{{ $message }}</span>
                                @enderror
                            </div>
                            <div>
                                <label style="display: block; font-size: 0.75rem; color: #999; margin-bottom: 0.5rem; text-transform: uppercase;">مستوى الوقود <span style="color: red;">*</span></label>
                                <select name="fuel_level_out" style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.5rem; color: white;" required>
                                    <option value="">اختر مستوى الوقود</option>
                                    <option value="25">ربع الخزان</option>
                                    <option value="50">نصف الخزان</option>
                                    <option value="75">ثلاثة أرباع الخزان</option>
                                    <option value="100">خزان ممتلئ</option>
                                </select>
                                @error('fuel_level_out')
                                    <span style="color: #ff6b6b; font-size: 0.875rem; margin-top: 0.25rem;">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Tab: Add-ons (🚀 عزز تجربتك) -->
                <div class="tab-content" :class="{ active: activeTab === 'addons' }">
                    <div style="background: #111; border: 1px solid #333; border-radius: 1rem; padding: 1.5rem; margin-bottom: 1.5rem;">
                        <h3 style="font-size: 1.125rem; font-weight: bold; margin-bottom: 1.5rem; color: white; border-bottom: 1px solid #333; padding-bottom: 0.5rem;">خدمات إضافية مميزة</h3>
                        <p style="color: #666; font-size: 0.8rem; margin-bottom: 1.5rem;">قم بزيادة جودة التجربة للعميل عبر إضافة خدمات تكميلية.</p>

                        <div x-show="!car_id" style="padding: 2rem; text-align: center; color: #666; border: 1px dashed #333; border-radius: 1rem;">
                            رجاء اختر السيارة أولاً لعرض الإضافات المتاحة لها.
                        </div>

                        <div x-show="car_id && availableAddOns.length === 0" style="padding: 2rem; text-align: center; color: #666; border: 1px dashed #333; border-radius: 1rem;">
                            لا توجد إضافات مسجلة لهذه السيارة.
                        </div>

                        <div x-show="car_id && availableAddOns.length > 0" style="display: grid; grid-template-columns: 1fr; gap: 1rem;">
                            <template x-for="addon in availableAddOns" :key="addon.id">
                                <div :class="{'border-[#d4af37]/40 bg-[#d4af37]/5': isAddonSelected(addon.id)}" 
                                     style="background: #000; border: 1px solid #222; border-radius: 1rem; padding: 1.25rem; display: flex; align-items: center; justify-content: space-between; transition: all 0.3s;">
                                    
                                    <div style="display: flex; align-items: center; gap: 1rem; flex: 1;">
                                        <input type="checkbox" 
                                               :id="'rental_addon_' + addon.id" 
                                               :value="addon.id"
                                               @change="toggleAddon(addon)"
                                               :checked="isAddonSelected(addon.id)"
                                               class="addon-checkbox"
                                               style="width: 1.5rem; height: 1.5rem; accent-color: #d4af37; cursor: pointer;">
                                        
                                        <!-- Hidden input for form submission -->
                                        <template x-if="isAddonSelected(addon.id)">
                                            <input type="hidden" name="selected_addons[]" :value="addon.id">
                                        </template>

                                        <div style="cursor: pointer;" @click="toggleAddon(addon)">
                                            <div style="display: flex; align-items: center; gap: 0.5rem;">
                                                <span x-text="addon.name" style="color: white; font-weight: bold; font-size: 1rem;"></span>
                                                <template x-if="addon.badge">
                                                    <span x-text="addon.badge" style="background: #d4af37; color: black; font-size: 0.6rem; padding: 0.1rem 0.5rem; border-radius: 999px; font-weight: 800;"></span>
                                                </template>
                                            </div>
                                            <p x-text="addon.description" style="color: #666; font-size: 0.8rem; margin-top: 0.2rem;"></p>
                                        </div>
                                    </div>

                                    <div style="text-align: left;">
                                        <div style="color: #d4af37; font-weight: 900; font-size: 1.1rem;" x-text="formatNumber(addon.price) + ' ر.س'"></div>
                                        <div style="color: #444; font-size: 0.7rem; font-weight: bold; text-transform: uppercase;" x-text="addon.price_type === 'daily' ? 'يومي' : 'ثابت'"></div>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>
                </div>

                <!-- Tab 3: Insurance -->
                <div class="tab-content" :class="{ active: activeTab === 'insurance' }">
                    <div style="background: #111; border: 1px solid #333; border-radius: 1rem; padding: 1.5rem;">
                        <h3 style="font-size: 1.125rem; font-weight: bold; margin-bottom: 1.5rem; color: white; border-bottom: 1px solid #333; padding-bottom: 0.5rem;">التأمين المسترد (Refundable Insurance)</h3>
                        
                        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;">
                            <div>
                                <label style="display: block; font-size: 0.75rem; color: #999; margin-bottom: 0.5rem; text-transform: uppercase;">مبلغ التأمين</label>
                                <input type="number" name="insurance_amount" x-model.number="insurance_amount" step="0.01" @change="calculateTotal()" style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.5rem; color: white;">
                                @error('insurance_amount')
                                    <span style="color: #ff6b6b; font-size: 0.875rem; margin-top: 0.25rem;">{{ $message }}</span>
                                @enderror
                            </div>
                            <div>
                                <label style="display: block; font-size: 0.75rem; color: #999; margin-bottom: 0.5rem; text-transform: uppercase;">الحالة الحالية</label>
                                <select name="insurance_status" x-model="insurance_status" style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.5rem; color: white;">
                                    <option value="held">محجوز</option>
                                    <option value="partially_refunded">مسترد جزئياً</option>
                                    <option value="refunded">مسترد كاملاً</option>
                                </select>
                            </div>
                        </div>

                        <div style="margin-top: 1.5rem;">
                            <label style="display: block; font-size: 0.75rem; color: #999; margin-bottom: 0.5rem; text-transform: uppercase;">ملاحظات التأمين</label>
                            <textarea name="insurance_notes" style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.5rem; color: white; height: 80px;"></textarea>
                        </div>

                        <div style="margin-top: 1rem; padding: 1rem; background: #1a1a1a; border-radius: 0.5rem; border-left: 3px solid #d4af37;">
                            <p style="color: #999; font-size: 0.875rem; margin: 0;">
                                <strong style="color: white;">ملاحظة:</strong> حالة التأمين تبدأ تلقائياً بـ "محجوز" عند الإنشاء. يمكن تحديثها عند إغلاق العقد.
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Tab 4: Inspection -->
                <div class="tab-content" :class="{ active: activeTab === 'inspection' }">
                    <div style="background: #111; border: 1px solid #333; border-radius: 1rem; padding: 1.5rem;">
                        <h3 style="font-size: 1.125rem; font-weight: bold; margin-bottom: 1.5rem; color: white; border-bottom: 1px solid #333; padding-bottom: 0.5rem;">فحص السيارة عند الاستلام</h3>
                        
                        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;">
                            <div>
                                <label style="display: block; font-size: 0.75rem; color: #999; margin-bottom: 0.5rem; text-transform: uppercase;">حالة المحرك والخارج</label>
                                <select name="inspection[exterior_condition]" style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.5rem; color: white;">
                                    <option value="">اختر الحالة</option>
                                    <option value="good">جيدة</option>
                                    <option value="scratches">بها خدوش</option>
                                    <option value="damages">بها أضرار</option>
                                </select>
                            </div>
                            <div>
                                <label style="display: block; font-size: 0.75rem; color: #999; margin-bottom: 0.5rem; text-transform: uppercase;">حالة الداخل</label>
                                <select name="inspection[interior_condition]" style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.5rem; color: white;">
                                    <option value="">اختر الحالة</option>
                                    <option value="good">جيدة</option>
                                    <option value="damaged">بها تلف</option>
                                </select>
                            </div>
                        </div>

                        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 1.5rem;">
                            <div>
                                <label style="display: block; font-size: 0.75rem; color: #999; margin-bottom: 0.5rem; text-transform: uppercase;">حالة الإطارات</label>
                                <select name="inspection[tires_condition]" style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.5rem; color: white;">
                                    <option value="">اختر الحالة</option>
                                    <option value="good">جيدة</option>
                                    <option value="worn">مهترئة</option>
                                    <option value="damaged">تالفة</option>
                                </select>
                            </div>
                            <div>
                                <label style="display: block; font-size: 0.75rem; color: #999; margin-bottom: 0.5rem; text-transform: uppercase;">مستوى الوقود</label>
                                <select name="inspection[fuel_level]" style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.5rem; color: white;">
                                    <option value="">اختر المستوى</option>
                                    <option value="quarter">ربع</option>
                                    <option value="half">نصف</option>
                                    <option value="three_quarters">ثلاثة أرباع</option>
                                    <option value="full">ممتلئ</option>
                                </select>
                            </div>
                        </div>

                        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 1.5rem;">
                            <div style="display: flex; align-items: center;">
                                <input type="checkbox" name="inspection[spare_tire_available]" value="1" style="width: 20px; height: 20px; margin-left: 0.5rem;" checked>
                                <label style="color: #999; font-size: 0.875rem;">الإطار البديل متوفر</label>
                            </div>
                            <div style="display: flex; align-items: center;">
                                <input type="checkbox" name="inspection[tools_available]" value="1" style="width: 20px; height: 20px; margin-left: 0.5rem;" checked>
                                <label style="color: #999; font-size: 0.875rem;">الأدوات متوفرة</label>
                            </div>
                        </div>

                        <div style="margin-top: 1.5rem;">
                            <label style="display: block; font-size: 0.75rem; color: #999; margin-bottom: 0.5rem; text-transform: uppercase;">وصف الخدوش (إن وجدت)</label>
                            <textarea name="inspection[scratches_description]" style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.5rem; color: white; height: 60px;"></textarea>
                        </div>

                        <div style="margin-top: 1.5rem;">
                            <label style="display: block; font-size: 0.75rem; color: #999; margin-bottom: 0.5rem; text-transform: uppercase;">وصف الأضرار (إن وجدت)</label>
                            <textarea name="inspection[damages_description]" style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.5rem; color: white; height: 60px;"></textarea>
                        </div>

                        <div style="margin-top: 1.5rem;">
                            <label style="display: block; font-size: 0.75rem; color: #999; margin-bottom: 0.5rem; text-transform: uppercase;">ملاحظات الفحص</label>
                            <textarea name="inspection[inspection_notes]" style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.5rem; color: white; height: 60px;"></textarea>
                        </div>
                    </div>
                </div>

                <!-- Tab 5: Financial Terms -->
                <div class="tab-content" :class="{ active: activeTab === 'financial' }">
                    <div style="background: #111; border: 1px solid #333; border-radius: 1rem; padding: 1.5rem; margin-bottom: 1.5rem;">
                        <h3 style="font-size: 1.125rem; font-weight: bold; margin-bottom: 1.5rem; color: white; border-bottom: 1px solid #333; padding-bottom: 0.5rem;">السعر اليومي والخصم</h3>
                        
                        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;">
                            <div>
                                <label style="display: block; font-size: 0.75rem; color: #999; margin-bottom: 0.5rem; text-transform: uppercase;">السعر اليومي <span style="color: red;">*</span></label>
                                <input type="number" name="daily_price" x-model.number="daily_price" step="0.01" @change="calculateTotal()" style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.5rem; color: white;" required>
                                @error('daily_price')
                                    <span style="color: #ff6b6b; font-size: 0.875rem; margin-top: 0.25rem;">{{ $message }}</span>
                                @enderror
                            </div>
                            <div>
                                <label style="display: block; font-size: 0.75rem; color: #999; margin-bottom: 0.5rem; text-transform: uppercase;">نسبة ضريبة القيمة المضافة (%)</label>
                                <select name="vat_percentage" x-model.number="vat_percentage" @change="calculateTotal()" style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.5rem; color: white;">
                                    <option value="0">0%</option>
                                    <option value="5">5%</option>
                                    <option value="10">10%</option>
                                    <option value="14">14%</option>
                                    <option value="15">15%</option>
                                </select>
                            </div>
                        </div>
                        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 1.5rem;">
                            <div>
                                <label style="display: block; font-size: 0.75rem; color: #999; margin-bottom: 0.5rem; text-transform: uppercase;">الخصم</label>
                                <input type="number" name="discount" x-model.number="discount" step="0.01" @change="calculateTotal()" style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.5rem; color: white;">
                            </div>
                            <div>
                                <label style="display: block; font-size: 0.75rem; color: #999; margin-bottom: 0.5rem; text-transform: uppercase;">قيمة الضريبة</label>
                                <input type="number" name="tax" x-model.number="tax" step="0.01" readonly style="width: 100%; background: #1a1a1a; border: 1px solid #333; border-radius: 0.5rem; padding: 0.5rem; color: #888;">
                            </div>
                        </div>
                    </div>

                    <div style="background: #111; border: 1px solid #333; border-radius: 1rem; padding: 1.5rem; margin-bottom: 1.5rem;">
                        <h3 style="font-size: 1.125rem; font-weight: bold; margin-bottom: 1.5rem; color: white; border-bottom: 1px solid #333; padding-bottom: 0.5rem;">الكيلومترات والرسوم الإضافية</h3>
                        
                        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;">
                            <div>
                                <label style="display: block; font-size: 0.75rem; color: #999; margin-bottom: 0.5rem; text-transform: uppercase;">الكيلومترات المسموحة يومياً <span style="color: red;">*</span></label>
                                <input type="number" name="allowed_km_per_day" x-model.number="allowed_km_per_day" style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.5rem; color: white;" required>
                                @error('allowed_km_per_day')
                                    <span style="color: #ff6b6b; font-size: 0.875rem; margin-top: 0.25rem;">{{ $message }}</span>
                                @enderror
                            </div>
                            <div>
                                <label style="display: block; font-size: 0.75rem; color: #999; margin-bottom: 0.5rem; text-transform: uppercase;">سعر الكيلومتر الإضافي <span style="color: red;">*</span></label>
                                <input type="number" name="extra_km_price" x-model.number="extra_km_price" step="0.01" style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.5rem; color: white;" required>
                                @error('extra_km_price')
                                    <span style="color: #ff6b6b; font-size: 0.875rem; margin-top: 0.25rem;">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div style="background: #111; border: 1px solid #333; border-radius: 1rem; padding: 1.5rem;">
                        <h3 style="font-size: 1.125rem; font-weight: bold; margin-bottom: 1.5rem; color: white; border-bottom: 1px solid #333; padding-bottom: 0.5rem;">شروط إضافية</h3>
                        
                        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;">
                            <div>
                                <label style="display: block; font-size: 0.75rem; color: #999; margin-bottom: 0.5rem; text-transform: uppercase;">نوع الضمان</label>
                                <select name="deposit_type" style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.5rem; color: white;">
                                    <option value="">اختر نوع الضمان</option>
                                    <option value="cash">نقدي</option>
                                    <option value="transfer">تحويل</option>
                                    <option value="check">شيك</option>
                                </select>
                            </div>
                            <div>
                                <label style="display: block; font-size: 0.75rem; color: #999; margin-bottom: 0.5rem; text-transform: uppercase;">رسوم التأخير اليومية</label>
                                <input type="number" name="late_fee_per_day" x-model.number="late_fee_per_day" step="0.01" style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.5rem; color: white;">
                            </div>
                        </div>

                        <!-- Paper Contract Attachment -->
                        <div style="margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #333;">
                            <label style="display: block; font-size: 0.75rem; color: #999; margin-bottom: 0.5rem; text-transform: uppercase;">إرفاق العقد الورقي (صورة أو PDF)</label>
                            <input type="file" name="paper_contract" style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.5rem; color: white;">
                            <p style="color: #666; font-size: 0.7rem; mt-1">يمكنك إرفاق نسخة من العقد الموقع يدوياً</p>
                        </div>

                        <!-- Additional Dynamic Terms -->
                        <div style="margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #333;">
                            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
                                <label style="display: block; font-size: 0.75rem; color: #999; text-transform: uppercase;">شروط إضافية خاصة بالعقد</label>
                                <button type="button" @click="addTerm()" style="background: #d4af37; color: black; border: none; width: 24px; height: 24px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-weight: bold;">+</button>
                            </div>
                            
                            <div style="display: flex; flex-direction: column; gap: 0.75rem;">
                                <template x-for="(term, index) in additionalTerms" :key="index">
                                    <div style="display: flex; gap: 0.5rem;">
                                        <input type="text" name="additional_terms[]" x-model="additionalTerms[index]" placeholder="أدخل شرطاً إضافياً..." style="flex-grow: 1; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.5rem; color: white;">
                                        <button type="button" @click="removeTerm(index)" style="background: #ff4d4d; color: white; border: none; padding: 0 0.75rem; border-radius: 0.5rem; cursor: pointer;">&times;</button>
                                    </div>
                                </template>
                                <div x-show="additionalTerms.length === 0" style="color: #555; font-size: 0.85rem; text-align: center; font-style: italic;">لم يتم إضافة شروط إضافية خاصة.</div>
                            </div>
                        </div>

                        <!-- Rental Terms Checkbox -->
                        <div style="margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #333;">
                            <label style="display: flex; align-items: center; gap: 0.75rem; cursor: pointer; margin-bottom: 0.75rem;">
                                <input type="checkbox" name="rental_terms_accepted" value="1" style="width: 1.25rem; height: 1.25rem; cursor: pointer; accent-color: #d4af37;" required>
                                <span style="color: #ccc; font-size: 0.95rem;">
                                    لقد قرأت 
                                    <a href="javascript:void(0)" onclick="openRentalTermsModal()" style="color: #d4af37; text-decoration: underline; cursor: pointer; font-weight: 600;">
                                        شروط الاستئجار
                                    </a>
                                    <span style="color: red;">*</span>
                                </span>
                            </label>
                            @error('rental_terms_accepted')
                                <span style="color: #ff6b6b; font-size: 0.875rem;">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>

            <!-- Right Column: Summary -->
            <div>
                <div style="background: #111; border: 1px solid #333; border-radius: 1rem; padding: 1.5rem; position: sticky; top: 2rem;">
                    <h3 style="font-size: 1.125rem; font-weight: bold; margin-bottom: 1.5rem; color: #d4af37;">ملخص العقد</h3>
                    
                    <div style="space-y: 1rem;">
                        <div style="display: flex; justify-content: space-between; padding-bottom: 0.5rem; border-bottom: 1px solid #333; margin-bottom: 0.5rem;">
                            <span style="color: #999;">السيارة:</span>
                            <span style="color: white;" x-text="car_name">-</span>
                        </div>
                        <div style="display: flex; justify-content: space-between; padding-bottom: 0.5rem; border-bottom: 1px solid #333; margin-bottom: 0.5rem;">
                            <span style="color: #999;">العميل:</span>
                            <span style="color: white;" x-text="customer_name">-</span>
                        </div>
                        <div style="display: flex; justify-content: space-between; padding-bottom: 0.5rem; border-bottom: 1px solid #333; margin-bottom: 0.5rem;">
                            <span style="color: #999;">عدد الأيام:</span>
                            <span style="color: white;" x-text="days">0</span>
                        </div>
                        <div style="display: flex; justify-content: space-between; padding-bottom: 0.5rem; border-bottom: 1px solid #333; margin-bottom: 0.5rem;">
                            <span style="color: #999;">السعر اليومي:</span>
                            <span style="color: white;" x-text="daily_price.toFixed(2) + ' ر.س'">0</span>
                        </div>

                        <!-- Add-ons in Summary -->
                        <template x-for="addon in selectedAddOns" :key="addon.id">
                            <div style="display: flex; justify-content: space-between; padding-bottom: 0.5rem; border-bottom: 1px solid #333; margin-bottom: 0.5rem; color: #d4af37;">
                                <span x-text="addon.name + (addon.price_type === 'daily' ? ' (يومي)' : ' (ثابت)')"></span>
                                <span x-text="addon.price_type === 'daily' ? (addon.price * days).toFixed(2) + ' ر.س' : addon.price.toFixed(2) + ' ر.س'"></span>
                            </div>
                        </template>

                        <div style="display: flex; justify-content: space-between; padding-bottom: 0.5rem; border-bottom: 1px solid #333; margin-bottom: 0.5rem;">
                            <span style="color: #999;">الإجمالي (قبل التأمين والضريبة):</span>
                            <span style="color: white;" x-text="total_before_insurance_formatted()">0 ر.س</span>
                        </div>
                        <div style="display: flex; justify-content: space-between; align-items: center; padding-bottom: 0.5rem; border-bottom: 1px solid #333; margin-bottom: 0.5rem;">
                            <div style="display: flex; flex-direction: column; gap: 0.25rem;">
                                <span style="color: #999;">ضريبة القيمة المضافة:</span>
                                <select name="vat_percentage" x-model.number="vat_percentage" @change="calculateTotal()" 
                                        style="background: #1a1a1a; border: 1px solid #444; color: #d4af37; border-radius: 0.4rem; padding: 0.2rem 0.5rem; font-size: 0.8rem; cursor: pointer; outline: none;">
                                    <option value="0">0%</option>
                                    <option value="5">5%</option>
                                    <option value="10">10%</option>
                                    <option value="14">14%</option>
                                    <option value="15">15%</option>
                                </select>
                            </div>
                            <span style="color: white; font-weight: bold;" x-text="tax.toFixed(2) + ' ر.س'">0 ر.س</span>
                        </div>
                        <div style="display: flex; justify-content: space-between; padding-bottom: 0.5rem; border-bottom: 1px solid #333; margin-bottom: 0.5rem;">
                            <span style="color: #999;">مبلغ التأمين:</span>
                            <span style="color: #ff9800;" x-text="insurance_amount.toFixed(2) + ' ر.س'">0</span>
                        </div>
                        <div style="display: flex; justify-content: space-between; padding: 0.75rem; border: 2px solid #d4af37; border-radius: 0.5rem; margin-top: 1rem;">
                            <span style="color: #d4af37; font-weight: bold;">الإجمالي النهائي:</span>
                            <span style="color: #d4af37; font-weight: bold; font-size: 1.25rem;" x-text="total">0 ر.س</span>
                        </div>
                        <div style="display: flex; justify-content: space-between; padding: 0.5rem; margin-top: 0.75rem; background: #1a1a1a; border-radius: 0.5rem;">
                            <span style="color: #999; font-size: 0.875rem;">حالة التأمين:</span>
                            <span style="color: white; font-size: 0.875rem;" x-text="insurance_status === 'held' ? 'محجوز' : (insurance_status === 'partially_refunded' ? 'مسترد جزئياً' : 'مسترد كاملاً')">محجوز</span>
                        </div>
                    </div>

                    <button type="submit" style="width: 100%; background: #d4af37; color: black; padding: 0.75rem; border-radius: 0.5rem; border: none; font-weight: bold; margin-top: 2rem; cursor: pointer;">
                        إنشاء العقد
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>

<!-- Rental Terms Modal -->
<div id="rentalTermsModal" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7); z-index: 1000; justify-content: center; align-items: center;" onclick="if(event.target === this) closeRentalTermsModal()">
    <div style="background: #1a1a1a; border: 1px solid #333; border-radius: 1rem; width: 90%; max-width: 600px; max-height: 80vh; overflow-y: auto; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.3);">
        <!-- Modal Header -->
        <div style="position: sticky; top: 0; background: #111; border-bottom: 1px solid #333; padding: 1.5rem; display: flex; justify-content: space-between; align-items: center;">
            <h2 style="color: #d4af37; font-size: 1.25rem; font-weight: bold; margin: 0;">شروط استئجار السيارات</h2>
            <button onclick="closeRentalTermsModal()" style="background: none; border: none; color: #999; font-size: 1.75rem; cursor: pointer; padding: 0;">&times;</button>
        </div>
        
        <!-- Modal Content -->
        <div style="padding: 2rem; color: #ccc; line-height: 1.8;">
            @php
                $settings = \App\Models\Setting::first();
                $rentalTerms = $settings?->rental_terms ?? 'لم يتم تحديد شروط الاستئجار بعد.';
            @endphp
            
            <div style="color: #ddd;">
                {!! $rentalTerms !!}
            </div>
        </div>
        
        <!-- Modal Footer -->
        <div style="position: sticky; bottom: 0; background: #111; border-top: 1px solid #333; padding: 1.5rem; display: flex; justify-content: flex-end; gap: 1rem;">
            <button onclick="closeRentalTermsModal()" style="background: #333; color: white; padding: 0.5rem 1.5rem; border-radius: 0.5rem; border: 1px solid #555; cursor: pointer; font-weight: 600; transition: all 0.3s;">
                إغلاق
            </button>
        </div>
    </div>
</div>

<script>
    function rentalForm() {
        return {
            activeTab: 'customer',
            branch_id: '{{ auth()->user()->branch_id }}',
            car_id: '',
            customer_id: '',
            start_date: '',
            end_date: '',
            start_odometer: 0,
            car_name: '',
            customer_name: '',
            daily_price: 0,
            discount: 0,
            vat_percentage: 15,
            tax: 0,
            insurance_amount: 0,
            insurance_status: 'held',
            allowed_km_per_day: 0,
            extra_km_price: 0,
            late_fee_per_day: 0,
            contract_source: 'direct',
            additionalTerms: [],
            days: 0,
            total: '0 ر.س',
            availableAddOns: [],
            selectedAddOns: [],
            
            addTerm() {
                this.additionalTerms.push('');
            },

            removeTerm(index) {
                this.additionalTerms.splice(index, 1);
            },
            
            initPickers() {
                flatpickr('#start_date', { 
                    minDate: 'today',
                    dateFormat: 'Y-m-d',
                    onChange: (selectedDates, dateStr) => {
                        this.start_date = dateStr;
                        this.calculateTotal();
                    }
                });
                flatpickr('#end_date', { 
                    minDate: 'today',
                    dateFormat: 'Y-m-d',
                    onChange: (selectedDates, dateStr) => {
                        this.end_date = dateStr;
                        this.calculateTotal();
                    }
                });
                
                // Initialize Select2 with a more robust configuration
                const self = this;
                $('.select2').select2({
                    dir: "rtl",
                    width: '100%'
                }).on('change', function (e) {
                    const value = $(this).val();
                    const id = $(this).attr('id');
                    
                    if (id === 'branch_select') {
                        self.branch_id = value;
                        self.fetchCars();
                    } else if (id === 'car_select') {
                        self.car_id = value;
                        self.updateCarDetails();
                    } else if (id === 'customer_select') {
                        self.customer_id = value;
                        self.customer_name = this.options[this.selectedIndex].text;
                    }
                });
                
                // If branch is pre-selected (for non-admins), fetch cars immediately
                if (this.branch_id) {
                    setTimeout(() => this.fetchCars(), 100);
                }
            },
            
            async fetchCars() {
                const carSelect = $('#car_select');
                
                if (!this.branch_id) {
                    carSelect.empty().append('<option value="">اختر الفرع أولاً</option>').trigger('change');
                    return;
                }
                
                try {
                    // رابط مباشر وبسيط
                    const response = await fetch(`/admin/api/cars-by-branch/${this.branch_id}`);
                    const cars = await response.json();
                    
                    carSelect.empty().append('<option value="">اختر سيارة</option>');
                    
                    cars.forEach(car => {
                        const option = new Option(car.title, car.id);
                        $(option).attr('data-price', car.daily_price || 0);
                        $(option).attr('data-km', car.allowed_km_per_day || 0);
                        $(option).attr('data-extra-price', car.extra_km_price || 0);
                        $(option).attr('data-odometer', car.mileage || 0);
                        carSelect.append(option);
                    });
                    
                    // تحديث القائمة فوراً
                    carSelect.trigger('change');
                } catch (error) {
                    console.error('Error:', error);
                }
            },
            
            updateCarDetails() {
                const selected = document.querySelector('#car_select option:checked');
                if(selected && selected.value) {
                    this.car_name = selected.textContent;
                    this.daily_price = parseFloat(selected.dataset.price) || 0;
                    this.allowed_km_per_day = parseInt(selected.dataset.km) || 0;
                    this.extra_km_price = parseFloat(selected.dataset.extraPrice) || 0;
                    this.start_odometer = parseInt(selected.dataset.odometer) || 0;
                    
                    // Fetch Add-ons
                    this.fetchAddOns(selected.value);
                    
                    this.calculateTotal();
                } else {
                    this.car_name = '-';
                    this.daily_price = 0;
                    this.allowed_km_per_day = 0;
                    this.extra_km_price = 0;
                    this.start_odometer = 0;
                    this.availableAddOns = [];
                    this.selectedAddOns = [];
                    this.calculateTotal();
                }
            },

            async fetchAddOns(carId) {
                try {
                    const response = await fetch(`/admin/api/car-addons/${carId}`);
                    this.availableAddOns = await response.json();
                    this.selectedAddOns = []; // Reset selected on car change
                    
                    // Auto-select suggested bundle if exists
                    const suggested = this.availableAddOns.find(a => a.is_suggested);
                    if (suggested) {
                        this.toggleAddon(suggested);
                    }
                } catch (error) {
                    console.error('Error fetching add-ons:', error);
                }
            },

            toggleAddon(addon) {
                const index = this.selectedAddOns.findIndex(a => a.id === addon.id);
                if (index > -1) {
                    this.selectedAddOns.splice(index, 1);
                } else {
                    // If it's a bundle, remove all other selected addons
                    if (addon.is_bundle) {
                        this.selectedAddOns = [addon];
                    } else {
                        // If we are selecting a normal addon, and a bundle is selected, remove the bundle
                        this.selectedAddOns = this.selectedAddOns.filter(a => !a.is_bundle);
                        this.selectedAddOns.push(addon);
                    }
                }
                this.calculateTotal();
            },

            isAddonSelected(id) {
                return this.selectedAddOns.some(a => a.id === id);
            },

            total_before_insurance() {
                const baseCost = this.days * this.daily_price;
                let addonsTotal = 0;
                this.selectedAddOns.forEach(addon => {
                    if (addon.price_type === 'daily') {
                        addonsTotal += addon.price * this.days;
                    } else {
                        addonsTotal += addon.price;
                    }
                });
                return ((baseCost + addonsTotal) - this.discount);
            },

            total_before_insurance_formatted() {
                return this.total_before_insurance().toFixed(2) + ' ر.س';
            },

            formatNumber(num) {
                return new Number(num || 0).toLocaleString('ar-SA', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + ' ر.س';
            },
            
            calculateTotal() {
                if(this.start_date && this.end_date) {
                    const start = new Date(this.start_date);
                    const end = new Date(this.end_date);
                    const diffTime = Math.abs(end - start);
                    this.days = Math.max(1, Math.ceil(diffTime / (1000 * 60 * 60 * 24)));
                    
                    const subtotal = this.total_before_insurance();
                    this.tax = subtotal * (this.vat_percentage / 100);
                    const finalTotal = subtotal + this.tax + this.insurance_amount;
                    
                    this.total = finalTotal.toLocaleString('ar-SA', { minimumFractionDigits: 2 }) + ' ر.س';
                }
            }
        }
    }

    function openRentalTermsModal() {
        document.getElementById('rentalTermsModal').style.display = 'flex';
        document.body.style.overflow = 'hidden';
    }

    function closeRentalTermsModal() {
        document.getElementById('rentalTermsModal').style.display = 'none';
        document.body.style.overflow = 'auto';
    }

    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            closeRentalTermsModal();
        }
    });
</script>

@endsection