@extends('layouts.app')

@section('title', 'Book Service & Free Quotation — Abu Dhabi Auto Care')

@section('content')
<div class="py-16 bg-slate-950 min-h-screen">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <!-- Header -->
        <div class="text-center mb-10">
            <span class="inline-block px-3.5 py-1 text-xs font-bold rounded-full bg-sky-500/10 text-sky-400 border border-sky-500/20 mb-3">
                FAST ONLINE BOOKING
            </span>
            <h1 class="text-3xl sm:text-4xl font-black text-white tracking-tight">
                Request Free Quotation & Book Service
            </h1>
            <p class="text-slate-400 text-sm mt-2 max-w-xl mx-auto">
                Fill in your vehicle details below for a transparent quotation with optional free vehicle pickup across Abu Dhabi.
            </p>
        </div>

        @if($errors->any())
            <div class="mb-6 p-4 rounded-xl bg-rose-950/80 border border-rose-500/40 text-rose-300 text-xs">
                <ul class="list-disc pl-5 space-y-1">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="bg-slate-900 rounded-3xl border border-slate-800 p-6 sm:p-10 shadow-2xl shadow-sky-950/30">
            <form action="{{ route('orders.store') }}" method="POST" class="space-y-8" x-data="{
                pickupRequired: false,
                selectedService: '{{ $selectedServiceId ?? ($services->first()->id ?? 1) }}',
                vehicleCategory: '{{ $selectedVehicle ?? 'Sedan' }}',
                packageType: '{{ $selectedPackage ?? 'Same-Colour Painting' }}'
            }">
                @csrf

                <!-- Section 1: Customer Contact Information -->
                <div>
                    <h2 class="text-base font-bold text-white mb-4 flex items-center">
                        <span class="w-6 h-6 rounded-full bg-sky-500/20 text-sky-400 text-xs flex items-center justify-center font-bold mr-2 rtl:mr-0 rtl:ml-2">1</span>
                        Client Information
                    </h2>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-xs">
                        <div>
                            <label for="name" class="block font-semibold text-slate-300 mb-1">Full Name *</label>
                            <input type="text" name="name" id="name" value="{{ old('name', auth()->user() ? auth()->user()->name : '') }}" required placeholder="e.g. Mohammed Al Mansoori" class="w-full px-4 py-3 rounded-xl bg-slate-950 border border-slate-800 text-white focus:outline-none focus:border-sky-500 text-sm">
                        </div>
                        <div>
                            <label for="phone" class="block font-semibold text-slate-300 mb-1">Mobile Number *</label>
                            <input type="text" name="phone" id="phone" value="{{ old('phone', auth()->user() ? auth()->user()->phone : '') }}" required placeholder="+971 50 123 4567" class="w-full px-4 py-3 rounded-xl bg-slate-950 border border-slate-800 text-white focus:outline-none focus:border-sky-500 text-sm">
                        </div>
                        <div>
                            <label for="whatsapp" class="block font-semibold text-slate-300 mb-1">WhatsApp Number (Optional)</label>
                            <input type="text" name="whatsapp" id="whatsapp" value="{{ old('whatsapp') }}" placeholder="For photo/video progress updates" class="w-full px-4 py-3 rounded-xl bg-slate-950 border border-slate-800 text-white focus:outline-none focus:border-sky-500 text-sm">
                        </div>
                        <div>
                            <label for="email" class="block font-semibold text-slate-300 mb-1">Email Address (Optional)</label>
                            <input type="email" name="email" id="email" value="{{ old('email', auth()->user() ? auth()->user()->email : '') }}" placeholder="client@example.com" class="w-full px-4 py-3 rounded-xl bg-slate-950 border border-slate-800 text-white focus:outline-none focus:border-sky-500 text-sm">
                        </div>
                    </div>
                </div>

                <!-- Section 2: Vehicle Specifications -->
                <div class="pt-6 border-t border-slate-800">
                    <h2 class="text-base font-bold text-white mb-4 flex items-center">
                        <span class="w-6 h-6 rounded-full bg-sky-500/20 text-sky-400 text-xs flex items-center justify-center font-bold mr-2 rtl:mr-0 rtl:ml-2">2</span>
                        Vehicle Details
                    </h2>
                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 text-xs">
                        <div>
                            <label for="vehicle_make" class="block font-semibold text-slate-300 mb-1">Vehicle Make *</label>
                            <input type="text" name="vehicle_make" id="vehicle_make" value="{{ old('vehicle_make') }}" required placeholder="e.g. Nissan / Toyota / Porsche" class="w-full px-4 py-3 rounded-xl bg-slate-950 border border-slate-800 text-white focus:outline-none focus:border-sky-500 text-sm">
                        </div>
                        <div>
                            <label for="vehicle_model" class="block font-semibold text-slate-300 mb-1">Vehicle Model *</label>
                            <input type="text" name="vehicle_model" id="vehicle_model" value="{{ old('vehicle_model') }}" required placeholder="e.g. Patrol / Land Cruiser / 911" class="w-full px-4 py-3 rounded-xl bg-slate-950 border border-slate-800 text-white focus:outline-none focus:border-sky-500 text-sm">
                        </div>
                        <div>
                            <label for="vehicle_year" class="block font-semibold text-slate-300 mb-1">Model Year</label>
                            <input type="text" name="vehicle_year" id="vehicle_year" value="{{ old('vehicle_year') }}" placeholder="e.g. 2022" class="w-full px-4 py-3 rounded-xl bg-slate-950 border border-slate-800 text-white focus:outline-none focus:border-sky-500 text-sm">
                        </div>
                        <div>
                            <label for="vehicle_category" class="block font-semibold text-slate-300 mb-1">Vehicle Body Type *</label>
                            <select name="vehicle_category" id="vehicle_category" x-model="vehicleCategory" class="w-full px-4 py-3 rounded-xl bg-slate-950 border border-slate-800 text-white focus:outline-none focus:border-sky-500 text-sm">
                                <option value="Sedan">Sedan (starts from AED 1,299)</option>
                                <option value="Luxury / New Vehicle">Luxury / New Vehicle</option>
                                <option value="SUV / 7-Seater">SUV / 7-Seater</option>
                                <option value="Sports Car">Sports Car</option>
                                <option value="Muscle Car">Muscle Car</option>
                            </select>
                        </div>
                        <div>
                            <label for="current_color" class="block font-semibold text-slate-300 mb-1">Current Vehicle Colour</label>
                            <input type="text" name="current_color" id="current_color" value="{{ old('current_color') }}" placeholder="e.g. Pearl White / Silver" class="w-full px-4 py-3 rounded-xl bg-slate-950 border border-slate-800 text-white focus:outline-none focus:border-sky-500 text-sm">
                        </div>
                        <div>
                            <label for="target_color" class="block font-semibold text-slate-300 mb-1">Desired Colour / Shade</label>
                            <input type="text" name="target_color" id="target_color" value="{{ old('target_color') }}" placeholder="Same shade restore or custom new shade" class="w-full px-4 py-3 rounded-xl bg-slate-950 border border-slate-800 text-white focus:outline-none focus:border-sky-500 text-sm">
                        </div>
                    </div>
                </div>

                <!-- Section 3: Service & Package Selection -->
                <div class="pt-6 border-t border-slate-800">
                    <h2 class="text-base font-bold text-white mb-4 flex items-center">
                        <span class="w-6 h-6 rounded-full bg-sky-500/20 text-sky-400 text-xs flex items-center justify-center font-bold mr-2 rtl:mr-0 rtl:ml-2">3</span>
                        Required Service
                    </h2>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-xs">
                        <div>
                            <label for="service_id" class="block font-semibold text-slate-300 mb-1">Select Service *</label>
                            <select name="service_id" id="service_id" x-model="selectedService" class="w-full px-4 py-3 rounded-xl bg-slate-950 border border-slate-800 text-white focus:outline-none focus:border-sky-500 text-sm">
                                @foreach($services as $s)
                                    <option value="{{ $s->id }}">{{ $s->name }} (Starting AED {{ number_format($s->starting_price) }})</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label for="package_type" class="block font-semibold text-slate-300 mb-1">Package Option</label>
                            <select name="package_type" id="package_type" x-model="packageType" class="w-full px-4 py-3 rounded-xl bg-slate-950 border border-slate-800 text-white focus:outline-none focus:border-sky-500 text-sm">
                                <option value="Same-Colour Painting">Same-Colour Painting (From AED 1,299)</option>
                                <option value="Colour-Change Painting">Colour-Change Painting (From AED 1,650)</option>
                                <option value="Machine Polish">Machine Polish (Sedan AED 299 / SUV AED 350)</option>
                                <option value="Rim Painting (Set of 4)">Rim Painting (AED 399)</option>
                                <option value="Rims & Brake Calipers Combo">Rims & Brake Calipers (AED 450)</option>
                                <option value="Chassis Undercoating">Undercoating (AED 499)</option>
                                <option value="Sandblasting">Sandblasting (AED 499)</option>
                                <option value="Standard Inspection">Standard Inspection / Assessment</option>
                            </select>
                        </div>
                    </div>
                </div>

                <!-- Section 4: Abu Dhabi Free Pickup & Location -->
                <div class="pt-6 border-t border-slate-800">
                    <h2 class="text-base font-bold text-white mb-4 flex items-center">
                        <span class="w-6 h-6 rounded-full bg-sky-500/20 text-sky-400 text-xs flex items-center justify-center font-bold mr-2 rtl:mr-0 rtl:ml-2">4</span>
                        Free Car Pickup & Logistics
                    </h2>
                    
                    <div class="p-4 rounded-xl bg-sky-950/40 border border-sky-800/40 mb-4 flex items-start space-x-3 rtl:space-x-reverse">
                        <input type="checkbox" name="pickup_required" id="pickup_required" value="1" x-model="pickupRequired" class="mt-1 rounded bg-slate-900 border-slate-700 text-sky-500 focus:ring-0">
                        <label for="pickup_required" class="text-xs cursor-pointer">
                            <span class="font-bold text-sky-300 text-sm block">Yes, I want Free Car Pickup & Return in Abu Dhabi</span>
                            <span class="text-slate-400">Our recovery team collects your car from your home or office and returns it once completed.</span>
                        </label>
                    </div>

                    <div x-show="pickupRequired" x-transition class="space-y-4 text-xs mb-4">
                        <div>
                            <label for="pickup_location" class="block font-semibold text-slate-300 mb-1">Abu Dhabi Pickup Address / Sector *</label>
                            <input type="text" name="pickup_location" id="pickup_location" placeholder="e.g. Al Bateen Villa 14, or Khalifa City Sector 12, Abu Dhabi" class="w-full px-4 py-3 rounded-xl bg-slate-950 border border-slate-800 text-white focus:outline-none focus:border-sky-500 text-sm">
                        </div>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-xs">
                        <div>
                            <label for="preferred_date" class="block font-semibold text-slate-300 mb-1">Preferred Date</label>
                            <input type="date" name="preferred_date" id="preferred_date" class="w-full px-4 py-3 rounded-xl bg-slate-950 border border-slate-800 text-white focus:outline-none focus:border-sky-500 text-sm">
                        </div>
                        <div>
                            <label for="preferred_time" class="block font-semibold text-slate-300 mb-1">Preferred Time Window</label>
                            <select name="preferred_time" id="preferred_time" class="w-full px-4 py-3 rounded-xl bg-slate-950 border border-slate-800 text-white focus:outline-none focus:border-sky-500 text-sm">
                                <option value="Morning (9:00 AM - 1:00 PM)">Morning (9:00 AM - 1:00 PM)</option>
                                <option value="Afternoon (1:00 PM - 5:00 PM)">Afternoon (1:00 PM - 5:00 PM)</option>
                                <option value="Evening (5:00 PM - 8:00 PM)">Evening (5:00 PM - 8:00 PM)</option>
                            </select>
                        </div>
                    </div>
                </div>

                <!-- Section 5: Damage Description / Special Notes -->
                <div class="pt-6 border-t border-slate-800">
                    <label for="customer_notes" class="block text-xs font-semibold text-slate-300 mb-1">Description of Damage or Special Requests</label>
                    <textarea name="customer_notes" id="customer_notes" rows="3" placeholder="Describe any bumper scratches, dents, previous repaints, or specific finishing preferences..." class="w-full px-4 py-3 rounded-xl bg-slate-950 border border-slate-800 text-white focus:outline-none focus:border-sky-500 text-sm"></textarea>
                    <p class="text-[11px] text-slate-500 mt-1">You will also be able to dispatch photographs directly to our master painter on WhatsApp immediately after submitting.</p>
                </div>

                <!-- Submission CTA -->
                <div class="pt-4">
                    <button type="submit" class="w-full py-4 rounded-2xl bg-gradient-to-r from-sky-600 to-blue-600 hover:from-sky-500 hover:to-blue-500 text-white font-extrabold text-base shadow-xl shadow-sky-600/30 transition transform hover:-translate-y-0.5">
                        Submit Booking & Generate WhatsApp Quotation ➔
                    </button>
                    <p class="text-center text-[11px] text-slate-500 mt-3">
                        By submitting, you receive a unique Order Number and direct link to track your vehicle's live status.
                    </p>
                </div>

            </form>
        </div>

    </div>
</div>
@endsection