@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.cars.index') }}" style="background: #666; color: white; padding: 0.5rem 1rem; border-radius: 0.5rem; text-decoration: none;">عودة</a>
</div>

<div style="margin-bottom: 2rem;">

    <form action="{{ route('admin.cars.store') }}" method="POST" enctype="multipart/form-data" style="display: block;">
        @csrf
        
        <div style="background: #111; border: 1px solid #333; border-radius: 1rem; padding: 2rem; margin-bottom: 2rem; display: block;">
            <h3 style="color: #d4af37; font-weight: bold; margin-bottom: 1.5rem;">🆔 البيانات الأساسية</h3>
            <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem;">
                <div>
                    <label class="block text-sm text-gray-400 mb-2">الفرع</label>
                    <select name="branch_id" required style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.5rem; color: white;">
                        <option value="">اختر الفرع</option>
                        @foreach($branches as $branch)
                            <option value="{{ $branch->id }}">{{ $branch->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-sm text-gray-400 mb-2">الشركة المصنعة</label>
                    <select name="brand_id" required style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.5rem; color: white;">
                        <option value="">اختر الشركة</option>
                        @foreach($brands as $brand)
                            <option value="{{ $brand->id }}">{{ $brand->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-sm text-gray-400 mb-2">الموديل</label>
                    <select name="car_model_id" required style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.5rem; color: white;">
                        <option value="">اختر الموديل</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm text-gray-400 mb-2">التريم</label>
                    <select name="trim_id" required style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.5rem; color: white;">
                        <option value="">اختر التريم</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm text-gray-400 mb-2">سنة الصنع</label>
                    <select name="year" required style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.5rem; color: white;">
                        @for($y = date('Y') + 1; $y >= 2000; $y--)
                            <option value="{{ $y }}">{{ $y }}</option>
                        @endfor
                    </select>
                </div>
                <div>
                    <label class="block text-sm text-gray-400 mb-2">نوع الهيكل</label>
                    <select name="body_type" required style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.5rem; color: white;">
                        <option value="sedan">سيدان</option>
                        <option value="suv">SUV</option>
                        <option value="crossover">كروس أوفر</option>
                        <option value="hatchback">هاتشباك</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm text-gray-400 mb-2">رقم اللوحة</label>
                    <input type="text" name="plate_number" placeholder="أدخل رقم اللوحة" style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.5rem; color: white;">
                </div>
                <div>
                    <label class="block text-sm text-gray-400 mb-2">رقم المسلسل (VIN)</label>
                    <input type="text" name="vin" placeholder="أدخل رقم المسلسل" style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.5rem; color: white;">
                </div>
            </div>
            <div style="margin-top: 1.5rem;">
                <label class="block text-sm text-gray-400 mb-2">العنوان</label>
                <input type="text" name="title" required style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.5rem; color: white;">
            </div>
        </div>

        <div style="background: #111; border: 1px solid #333; border-radius: 1rem; padding: 2rem; margin-bottom: 2rem;">
            <h3 style="color: #d4af37; font-weight: bold; margin-bottom: 1.5rem;">⚙️ البيانات الفنية</h3>
            <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem;">
                <div>
                    <label class="block text-sm text-gray-400 mb-2">نوع المحرك</label>
                    <select name="fuel_type" required style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.5rem; color: white;">
                        <option value="petrol">بنزين</option>
                        <option value="diesel">ديزل</option>
                        <option value="electric">كهرباء</option>
                        <option value="hybrid">هايبرد</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm text-gray-400 mb-2">ناقل الحركة</label>
                    <select name="transmission" required style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.5rem; color: white;">
                        <option value="automatic">أوتوماتيك</option>
                        <option value="manual">عادي</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm text-gray-400 mb-2">نظام الدفع</label>
                    <select name="drive_type" required style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.5rem; color: white;">
                        <option value="FWD">أمامي</option>
                        <option value="RWD">خلفي</option>
                        <option value="AWD">رباعي</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm text-gray-400 mb-2">سعة المحرك</label>
                    <input type="text" name="engine_size" style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.5rem; color: white;">
                </div>
            </div>
            <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 1.5rem;">
                <div>
                    <label class="block text-sm text-gray-400 mb-2">عدد الأحصنة</label>
                    <input type="number" name="horsepower" style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.5rem; color: white;">
                </div>
                <div>
                    <label class="block text-sm text-gray-400 mb-2">عدد المقاعد</label>
                    <input type="number" name="seats" value="5" required style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.5rem; color: white;">
                </div>
                <div>
                    <label class="block text-sm text-gray-400 mb-2">عدد الأبواب</label>
                    <input type="number" name="doors" value="4" required style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.5rem; color: white;">
                </div>
            </div>
        </div>

        <div style="background: #111; border: 1px solid #333; border-radius: 1rem; padding: 2rem; margin-bottom: 2rem;">
            <h3 style="color: #d4af37; font-weight: bold; margin-bottom: 1.5rem;">🛣️ بيانات الاستخدام</h3>
            <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;">
                <div>
                    <label class="block text-sm text-gray-400 mb-2">الكيلومترات</label>
                    <input type="number" name="mileage" value="0" required style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.5rem; color: white;">
                </div>
                <div>
                    <label class="block text-sm text-gray-400 mb-2">الحالة</label>
                    <select name="condition" required style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.5rem; color: white;">
                        <option value="new">جديدة</option>
                        <option value="used">مستعملة</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm text-gray-400 mb-2">اللون الخارجي</label>
                    <input type="text" name="color_ext" style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.5rem; color: white;">
                </div>
                <div>
                    <label class="block text-sm text-gray-400 mb-2">اللون الداخلي</label>
                    <input type="text" name="color_int" style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.5rem; color: white;">
                </div>
            </div>
        </div>

        <div style="background: #111; border: 1px solid #333; border-radius: 1rem; padding: 2rem; margin-bottom: 2rem;">
            <h3 style="color: #d4af37; font-weight: bold; margin-bottom: 1.5rem;">💰 البيانات التجارية</h3>
            <div style="margin-bottom: 2rem;">
                <label class="block text-sm text-gray-400 mb-2">نوع المعاملة</label>
                <select name="type" id="transactionType" required style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.5rem; color: white;">
                    <option value="sale">بيع فقط</option>
                    <option value="rent">تأجير فقط</option>
                    <option value="both">كلاهما</option>
                </select>
            </div>

            <div id="saleSection" style="display: block; border-bottom: 1px solid #333; padding-bottom: 2rem; margin-bottom: 2rem;">
                <h4 style="font-weight: bold; color: white; margin-bottom: 1rem;">بيانات البيع</h4>
                <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;">
                    <div>
                        <label class="block text-sm text-gray-400 mb-2">السعر</label>
                        <input type="number" name="price" style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.5rem; color: white;">
                    </div>
                    <div>
                        <label class="block text-sm text-gray-400 mb-2">الدفعة الأولى</label>
                        <input type="number" name="first_payment" style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.5rem; color: white;">
                    </div>
                    <div>
                        <label class="block text-sm text-gray-400 mb-2">مدة التقسيط (شهر)</label>
                        <input type="number" name="installment_months" style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.5rem; color: white;">
                    </div>
                </div>
            </div>

            <div id="rentSection" style="display: none;">
                <h4 style="font-weight: bold; color: white; margin-bottom: 1rem;">بيانات التأجير</h4>
                <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem;">
                    <div>
                        <label class="block text-sm text-gray-400 mb-2">سعر اليوم</label>
                        <input type="number" name="daily_price" style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.5rem; color: white;">
                    </div>
                    <div>
                        <label class="block text-sm text-gray-400 mb-2">سعر الأسبوع</label>
                        <input type="number" name="weekly_price" style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.5rem; color: white;">
                    </div>
                    <div>
                        <label class="block text-sm text-gray-400 mb-2">سعر الشهر</label>
                        <input type="number" name="monthly_price" style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.5rem; color: white;">
                    </div>
                    <div>
                        <label class="block text-sm text-gray-400 mb-2">مبلغ التأمين</label>
                        <input type="number" name="insurance_deposit" style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.5rem; color: white;">
                    </div>
                </div>
            </div>
        </div>

        <div style="background: #111; border: 1px solid #333; border-radius: 1rem; padding: 2rem; margin-bottom: 2rem;">
            <h3 style="color: #d4af37; font-weight: bold; margin-bottom: 1.5rem;">🚀 عزز تجربتك لهذه السيارة</h3>
            <p class="text-sm text-gray-400 mb-6">حدد الخدمات الإضافية المتاحة لهذه السيارة، ويمكنك تخصيص السعر لكل خدمة.</p>
            
            <div style="display: grid; grid-template-columns: repeat(1, 1fr); gap: 1rem;">
                @foreach($addOns as $addOn)
                    <div style="background: #000; border: 1px solid #222; border-radius: 1rem; padding: 1rem; display: flex; align-items: center; justify-content: space-between; transition: all 0.3s;" class="addon-card">
                        <div style="display: flex; align-items: center; gap: 1rem; flex: 1;">
                            <input type="checkbox" name="add_ons[]" value="{{ $addOn->id }}" id="addon_{{ $addOn->id }}" 
                                   style="width: 1.5rem; height: 1.5rem; accent-color: #d4af37; cursor: pointer;">
                            <div>
                                <label for="addon_{{ $addOn->id }}" style="color: white; font-weight: bold; cursor: pointer; display: block;">
                                    {{ $addOn->name }} 
                                    @if($addOn->badge)
                                        <span style="background: #d4af37; color: black; font-size: 0.6rem; padding: 0.1rem 0.5rem; border-radius: 999px; margin-right: 0.5rem;">{{ $addOn->badge }}</span>
                                    @endif
                                </label>
                                <span style="color: #666; font-size: 0.8rem;">{{ $addOn->description }}</span>
                            </div>
                        </div>
                        
                        <div style="display: flex; align-items: center; gap: 1.5rem;">
                            <div style="text-align: left;">
                                <label class="block text-[10px] text-gray-500 mb-1">السعر المخصص (اختياري)</label>
                                <div style="display: flex; align-items: center; gap: 0.5rem;">
                                    <input type="number" name="add_on_custom_prices[{{ $addOn->id }}]" step="0.01" placeholder="{{ $addOn->price }}"
                                           style="width: 100px; background: #111; border: 1px solid #333; border-radius: 0.5rem; padding: 0.3rem 0.5rem; color: white; text-align: center;">
                                    <span style="color: #444; font-size: 0.8rem;">ر.س / {{ $addOn->price_type == 'daily' ? 'يومي' : 'ثابت' }}</span>
                                </div>
                            </div>
                            
                            @if($addOn->is_bundle)
                                <div style="display: flex; flex-direction: column; align-items: center; gap: 0.2rem; border-right: 1px solid #222; padding-right: 1rem;">
                                    <label class="block text-[10px] text-gold mb-1">باقة مقترحة</label>
                                    <input type="radio" name="suggested_bundle_id" value="{{ $addOn->id }}" style="accent-color: #d4af37;">
                                </div>
                            @endif
                        </div>
                    </div>
                @endforeach
            </div>
        </div>

        <div style="background: #111; border: 1px solid #333; border-radius: 1rem; padding: 2rem; margin-bottom: 2rem;">
            <h3 style="color: #d4af37; font-weight: bold; margin-bottom: 1.5rem;">✅ الحالة والوسائط</h3>
            <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem;">
                <div>
                    <label class="block text-sm text-gray-400 mb-2">الحالة</label>
                    <select name="status" required style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.5rem; color: white;">
                        <option value="available">متاح</option>
                        <option value="reserved">محجوز</option>
                        <option value="rented">مؤجر</option>
                        <option value="sold">مباع</option>
                        <option value="maintenance">صيانة</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm text-gray-400 mb-2">المميزات</label>
                    <input type="text" name="features" placeholder="فتحة سقف, جلد" style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.5rem; color: white;">
                </div>
            </div>
            <div style="margin-top: 1.5rem;">
                <label class="block text-sm text-gray-400 mb-2">الوصف</label>
                <textarea name="description" rows="4" style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.5rem; color: white;"></textarea>
            </div>
            <div style="margin-top: 1.5rem;">
                <label class="block text-sm text-gray-400 mb-2">الصورة الرئيسية</label>
                <div style="margin-bottom: 1rem;">
                    <input type="file" name="main_image" accept="image/*" style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.5rem; color: white;">
                    <div id="mainImagePreview" style="margin-top: 0.5rem; width: 150px; height: 150px; border: 1px solid #333; border-radius: 0.5rem; overflow: hidden; background: #1a1a1a; display: none;">
                        <img id="mainImageImg" style="width: 100%; height: 100%; object-fit: cover;">
                    </div>
                </div>

                <label class="block text-sm text-gray-400 mb-2">صور إضافية (حد أقصى 4 صور)</label>
                <input type="file" name="additional_images[]" multiple accept="image/*" style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.5rem; color: white;">
                <div id="additionalImagesPreview" style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 1rem;">
                </div>
            </div>

            <script>
                document.querySelector('input[name="main_image"]').addEventListener('change', function(e) {
                    const file = e.target.files[0];
                    if (file) {
                        const reader = new FileReader();
                        reader.onload = function(event) {
                            document.getElementById('mainImageImg').src = event.target.result;
                            document.getElementById('mainImagePreview').style.display = 'block';
                        };
                        reader.readAsDataURL(file);
                    }
                });

                document.querySelector('input[name="additional_images[]"]').addEventListener('change', function(e) {
                    const preview = document.getElementById('additionalImagesPreview');
                    preview.innerHTML = '';
                    Array.from(e.target.files).slice(0, 4).forEach((file, index) => {
                        const reader = new FileReader();
                        reader.onload = function(event) {
                            const div = document.createElement('div');
                            div.style.cssText = 'width: 100%; padding-top: 100%; position: relative; border: 1px solid #333; border-radius: 0.5rem; overflow: hidden; background: #1a1a1a;';
                            const img = document.createElement('img');
                            img.src = event.target.result;
                            img.style.cssText = 'position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;';
                            div.appendChild(img);
                            preview.appendChild(div);
                        };
                        reader.readAsDataURL(file);
                    });
                });
            </script>
        </div>

        <div style="background: #111; border: 1px solid #333; border-radius: 1rem; padding: 2rem; margin-bottom: 2rem;">
            <h3 style="color: #d4af37; font-weight: bold; margin-bottom: 1.5rem;">📉 بيانات الإهلاك</h3>
            <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem;">
                <div>
                    <label class="block text-sm text-gray-400 mb-2">سعر الشراء</label>
                    <input type="number" step="0.01" name="purchase_price" style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.5rem; color: white;">
                </div>
                <div>
                    <label class="block text-sm text-gray-400 mb-2">تاريخ الشراء</label>
                    <input type="date" name="purchase_date" style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.5rem; color: white;">
                </div>
                <div>
                    <label class="block text-sm text-gray-400 mb-2">العمر الإنتاجي (سنوات)</label>
                    <input type="number" name="useful_life_years" value="5" style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.5rem; color: white;">
                </div>
                <div>
                    <label class="block text-sm text-gray-400 mb-2">القيمة المتبقية (خردة)</label>
                    <input type="number" step="0.01" name="salvage_value" value="0" style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.5rem; color: white;">
                </div>
                <div>
                    <label class="block text-sm text-gray-400 mb-2">طريقة الإهلاك</label>
                    <select name="depreciation_method" id="depMethod" style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.5rem; color: white;">
                        <option value="straight_line">القسط الثابت</option>
                        <option value="declining_balance">القسط المتناقص</option>
                        <option value="units_of_production">حسب الكيلومترات</option>
                    </select>
                </div>
                <div id="rateField" style="display: none;">
                    <label class="block text-sm text-gray-400 mb-2">نسبة الإهلاك السنوي</label>
                    <input type="number" step="0.01" name="depreciation_rate" placeholder="0.20" style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.5rem; color: white;">
                </div>
                <div id="kmField" style="display: none;">
                    <label class="block text-sm text-gray-400 mb-2">إجمالي الكيلومترات المتوقع</label>
                    <input type="number" name="total_expected_mileage" style="width: 100%; background: black; border: 1px solid #333; border-radius: 0.5rem; padding: 0.5rem; color: white;">
                </div>
                <div style="display: flex; align-items: center; margin-top: 2rem;">
                    <label style="display: flex; align-items: center; gap: 0.5rem; color: #999; cursor: pointer;">
                        <input type="checkbox" name="is_leased" value="1" style="width: 1.2rem; height: 1.2rem; accent-color: #d4af37;">
                        سيارة مؤجرة (Lease)
                    </label>
                </div>
            </div>
        </div>

        <div style="display: flex; gap: 1rem; margin-bottom: 3rem;">
            <button type="submit" style="background: #d4af37; color: black; padding: 0.75rem 2rem; border-radius: 0.75rem; font-weight: bold; border: none; cursor: pointer;">
                حفظ السيارة
            </button>
            <a href="{{ route('admin.cars.index') }}" style="padding: 0.75rem 2rem; border-radius: 0.75rem; border: 1px solid #333; color: #aaa; text-decoration: none;">
                إلغاء
            </a>
        </div>
    </form>

    <script>
        document.getElementById('transactionType').addEventListener('change', function() {
            const type = this.value;
            document.getElementById('saleSection').style.display = (type === 'sale' || type === 'both') ? 'block' : 'none';
            document.getElementById('rentSection').style.display = (type === 'rent' || type === 'both') ? 'block' : 'none';
        });

        document.getElementById('depMethod').addEventListener('change', function() {
            const method = this.value;
            document.getElementById('rateField').style.display = method === 'declining_balance' ? 'block' : 'none';
            document.getElementById('kmField').style.display = method === 'units_of_production' ? 'block' : 'none';
        });
        
        // Initialize on load
        document.getElementById('transactionType').dispatchEvent(new Event('change'));
        document.getElementById('depMethod').dispatchEvent(new Event('change'));
    </script>

</div>

@endsection