@extends('layouts.app')

@section('title', "{$vehicle->full_name} – Japanese Reconditioned Car in Dhaka | MotoSolution")
@section('meta_description', "{$vehicle->full_name} available in Dhaka showroom. {$vehicle->formatted_mileage}, Grade {$vehicle->auction_grade}, verified Japanese auction inspection sheet. Book a test drive today.")

@section('content')
<!-- Breadcrumbs -->
<div class="bg-[#0B0F19] border-b border-white/10 text-xs py-3 text-slate-400">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center gap-2">
        <a href="{{ route('home') }}" class="hover:text-white">Home</a>
        <span>/</span>
        <a href="{{ route('inventory.index') }}" class="hover:text-white">Ready Stock</a>
        <span>/</span>
        <span class="text-white font-medium truncate">{{ $vehicle->full_name }}</span>
    </div>
</div>

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10" x-data="{ activeImage: '{{ $vehicle->main_image }}', testDriveOpen: false }">
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-10">
        
        <!-- Left 7 Cols: Image Gallery & Description -->
        <div class="lg:col-span-7 space-y-6">
            <!-- Main Hero Image Showcase -->
            <div class="relative bg-slate-900 rounded-3xl overflow-hidden aspect-[16/10] border border-slate-200 shadow-xl">
                <img :src="activeImage" alt="{{ $vehicle->full_name }}" class="w-full h-full object-cover transition duration-300">
                
                <div class="absolute top-4 left-4 flex gap-2">
                    <span class="bg-emerald-600 text-white text-xs font-black px-3 py-1 rounded-lg shadow">Ready Stock</span>
                    <span class="bg-slate-950/80 backdrop-blur-md text-amber-300 text-xs font-black px-2.5 py-1 rounded-lg border border-white/10">
                        Grade {{ $vehicle->auction_grade }}
                    </span>
                </div>

                <div class="absolute bottom-4 left-4">
                    <span class="bg-black/70 backdrop-blur-md text-white text-xs px-3 py-1 rounded-lg font-mono">
                        Chassis: {{ $vehicle->chassis_number }}
                    </span>
                </div>
            </div>

            <!-- Thumbnail Gallery -->
            <div class="grid grid-cols-4 sm:grid-cols-6 gap-2.5">
                <button type="button" @click="activeImage = '{{ $vehicle->main_image }}'" 
                    class="aspect-[4/3] rounded-xl overflow-hidden border-2 transition" 
                    :class="activeImage === '{{ $vehicle->main_image }}' ? 'border-red-600 ring-2 ring-red-600/30' : 'border-transparent opacity-70 hover:opacity-100'">
                    <img src="{{ $vehicle->main_image }}" class="w-full h-full object-cover">
                </button>
                @if($vehicle->gallery)
                    @foreach($vehicle->gallery as $img)
                        <button type="button" @click="activeImage = '{{ $img }}'" 
                            class="aspect-[4/3] rounded-xl overflow-hidden border-2 transition"
                            :class="activeImage === '{{ $img }}' ? 'border-red-600 ring-2 ring-red-600/30' : 'border-transparent opacity-70 hover:opacity-100'">
                            <img src="{{ $img }}" class="w-full h-full object-cover">
                        </button>
                    @endforeach
                @endif
            </div>

            <!-- Overview Description -->
            <div class="bg-white p-6 rounded-2xl border border-slate-200 space-y-4">
                <h3 class="text-base font-bold text-slate-900 border-b border-slate-100 pb-3">Vehicle Overview & Inspection Notes</h3>
                <p class="text-sm text-slate-600 leading-relaxed">
                    {{ $vehicle->description ?? "Japanese reconditioned {$vehicle->full_name} in pristine condition. Mechanically certified, verified odometer, original auction sheet, and fully prepared for Bangladeshi road conditions." }}
                </p>

                <!-- Features Badges -->
                @if($vehicle->features_list)
                    <div class="pt-2">
                        <h4 class="text-xs font-bold uppercase tracking-wider text-slate-400 mb-3">Key Factory Equipment</h4>
                        <div class="flex flex-wrap gap-2">
                            @foreach($vehicle->features_list as $feature)
                                <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-slate-100 text-slate-800 text-xs font-semibold">
                                    <i class="fa-solid fa-check text-emerald-600 text-[10px]"></i>
                                    {{ $feature }}
                                </span>
                            @endforeach
                        </div>
                    </div>
                @endif
            </div>

            <!-- Auction Sheet Verification Card -->
            <div class="bg-gradient-to-br from-slate-900 to-slate-800 text-white p-6 rounded-2xl border border-slate-700 flex flex-col sm:flex-row items-center justify-between gap-4">
                <div class="space-y-1 text-center sm:text-left">
                    <span class="text-xs font-bold text-red-400 uppercase tracking-wider">100% Genuine Japanese Inspection</span>
                    <h4 class="text-lg font-bold">Verified Auction Sheet Available</h4>
                    <p class="text-xs text-slate-400">Chassis {{ $vehicle->chassis_number }} verified by MotoSolution Tokyo inspection desk.</p>
                </div>
                <a href="{{ route('auction-sheet') }}?chassis={{ $vehicle->chassis_number }}" class="shrink-0 px-5 py-2.5 bg-red-600 hover:bg-red-700 text-white text-xs font-bold rounded-xl shadow transition flex items-center gap-2">
                    <i class="fa-solid fa-file-shield"></i>
                    <span>Verify Sheet Online</span>
                </a>
            </div>
        </div>

        <!-- Right 5 Cols: Price, Specifications Table, & CTA Card -->
        <div class="lg:col-span-5 space-y-6">
            <div class="bg-white p-6 rounded-3xl border border-slate-200 shadow-xl space-y-6 sticky top-24">
                
                <!-- Title & Stock -->
                <div>
                    <div class="flex items-center justify-between">
                        <span class="text-xs font-bold text-red-600 uppercase tracking-wider">{{ $vehicle->make }}</span>
                        <span class="text-xs font-mono text-slate-400 font-bold">Stock #{{ $vehicle->stock_number }}</span>
                    </div>
                    <h1 class="text-2xl font-extrabold text-slate-900 font-heading mt-1">{{ $vehicle->full_name }}</h1>
                    <p class="text-xs text-slate-500 mt-0.5">{{ $vehicle->color }} • {{ $vehicle->transmission }} • Grade {{ $vehicle->auction_grade }}</p>
                </div>

                <!-- Price Box -->
                <div class="p-4 bg-slate-50 rounded-2xl border border-slate-100 flex items-center justify-between">
                    <div>
                        <span class="text-xs font-bold text-slate-400 uppercase block">Showroom Asking Price</span>
                        <span class="text-3xl font-extrabold text-slate-900 font-heading">{{ $vehicle->formatted_price }}</span>
                    </div>
                    @if($vehicle->discount_bdt > 0)
                        <div class="text-right">
                            <span class="text-xs line-through text-slate-400">৳{{ number_format($vehicle->selling_price_bdt, 0) }}</span>
                            <span class="block text-xs font-bold text-emerald-600 bg-emerald-100 px-2 py-0.5 rounded mt-0.5">
                                Save ৳{{ number_format($vehicle->discount_bdt / 1000) }}k
                            </span>
                        </div>
                    @endif
                </div>

                <!-- Action Buttons -->
                <div class="space-y-2.5">
                    <button type="button" @click="testDriveOpen = true" class="w-full py-3.5 px-4 bg-red-600 hover:bg-red-700 text-white text-sm font-bold rounded-xl shadow-lg shadow-red-900/30 transition flex items-center justify-center gap-2">
                        <i class="fa-solid fa-key"></i>
                        <span>Book a Test Drive in Gulshan</span>
                    </button>

                    <div class="grid grid-cols-2 gap-2">
                        <a href="https://wa.me/{{ config('motosolution.contact.whatsapp') }}?text=Hello%20MotoSolution,%20I%20am%20interested%20in%20Ready%20Stock%20{{ urlencode($vehicle->full_name) }}%20({{ $vehicle->stock_number }})." target="_blank" class="py-3 px-4 bg-emerald-600 hover:bg-emerald-500 text-white text-xs font-bold rounded-xl text-center shadow transition flex items-center justify-center gap-1.5">
                            <i class="fa-brands fa-whatsapp text-sm"></i>
                            <span>WhatsApp Us</span>
                        </a>
                        <a href="tel:{{ config('motosolution.contact.phone') }}" class="py-3 px-4 bg-slate-100 hover:bg-slate-200 text-slate-800 text-xs font-bold rounded-xl text-center transition flex items-center justify-center gap-1.5">
                            <i class="fa-solid fa-phone text-xs"></i>
                            <span>Call Showroom</span>
                        </a>
                    </div>
                </div>

                <!-- Complete Specifications Table -->
                <div class="border-t border-slate-100 pt-5">
                    <h3 class="text-xs font-bold uppercase tracking-wider text-slate-400 mb-3">Complete Vehicle Specifications</h3>
                    <div class="divide-y divide-slate-100 text-xs">
                        <div class="py-2 flex justify-between"><span class="text-slate-500">Year of Manufacture</span><span class="font-bold text-slate-900">{{ $vehicle->year }}</span></div>
                        <div class="py-2 flex justify-between"><span class="text-slate-500">Engine Displacement</span><span class="font-bold text-slate-900">{{ $vehicle->engine_cc }} cc</span></div>
                        <div class="py-2 flex justify-between"><span class="text-slate-500">Fuel Type</span><span class="font-bold text-slate-900">{{ $vehicle->fuel_type }}</span></div>
                        <div class="py-2 flex justify-between"><span class="text-slate-500">Transmission</span><span class="font-bold text-slate-900">{{ $vehicle->transmission }}</span></div>
                        <div class="py-2 flex justify-between"><span class="text-slate-500">Drive Type</span><span class="font-bold text-slate-900">{{ $vehicle->drive_type }}</span></div>
                        <div class="py-2 flex justify-between"><span class="text-slate-500">Body Type</span><span class="font-bold text-slate-900">{{ $vehicle->body_type }}</span></div>
                        <div class="py-2 flex justify-between"><span class="text-slate-500">Color</span><span class="font-bold text-slate-900">{{ $vehicle->color }}</span></div>
                        <div class="py-2 flex justify-between"><span class="text-slate-500">Odometer Mileage</span><span class="font-bold text-slate-900">{{ $vehicle->formatted_mileage }}</span></div>
                        <div class="py-2 flex justify-between"><span class="text-slate-500">Auction Overall Grade</span><span class="font-black text-amber-600">Grade {{ $vehicle->auction_grade }}</span></div>
                        <div class="py-2 flex justify-between"><span class="text-slate-500">Interior / Exterior</span><span class="font-bold text-slate-900">{{ $vehicle->interior_grade }} / {{ $vehicle->exterior_grade }}</span></div>
                        <div class="py-2 flex justify-between"><span class="text-slate-500">Chassis Number</span><span class="font-mono font-bold text-slate-800">{{ $vehicle->chassis_number }}</span></div>
                        <div class="py-2 flex justify-between"><span class="text-slate-500">Location</span><span class="font-bold text-slate-900">Niketan Showroom, Dhaka</span></div>
                    </div>
                </div>

                <!-- Showroom Assurance Box -->
                <div class="p-4 rounded-xl bg-slate-50 border border-slate-200 text-xs text-slate-600 space-y-1.5">
                    <p class="font-bold text-slate-900 flex items-center gap-1.5">
                        <i class="fa-solid fa-shield-halved text-emerald-600"></i> MotoSolution Purchase Assurance:
                    </p>
                    <p>• 100% Genuine Auction Sheet guarantee with original Japanese inspection certificate.</p>
                    <p>• Complete BRTA registration processing assistance and auto loan facilities.</p>
                </div>
            </div>
        </div>

    </div>

    <!-- Test Drive Booking Modal -->
    <div x-show="testDriveOpen" x-transition class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/70 backdrop-blur-sm" style="display: none;">
        <div class="bg-white rounded-2xl max-w-md w-full p-6 shadow-2xl relative" @click.outside="testDriveOpen = false">
            <button @click="testDriveOpen = false" class="absolute top-4 right-4 text-slate-400 hover:text-slate-700">
                <i class="fa-solid fa-xmark text-lg"></i>
            </button>
            <div class="text-center pb-4 border-b border-slate-100">
                <h3 class="text-lg font-bold text-slate-900">Schedule a Test Drive</h3>
                <p class="text-xs text-slate-500 mt-0.5">Experience this {{ $vehicle->full_name }} at our Gulshan showroom.</p>
            </div>
            <form method="POST" action="{{ route('lead.store') }}" class="space-y-4 pt-4 text-xs">
                @csrf
                <input type="hidden" name="vehicle_id" value="{{ $vehicle->id }}">
                <input type="hidden" name="interested_vehicle" value="{{ $vehicle->full_name }} (Stock: {{ $vehicle->stock_number }})">
                <input type="hidden" name="source" value="test_drive_modal">

                <div>
                    <label class="block font-bold text-slate-700 uppercase mb-1">Your Full Name *</label>
                    <input type="text" name="name" required placeholder="e.g. Tanvir Ahmed" class="w-full bg-slate-50 border border-slate-200 rounded-lg p-2.5 focus:border-red-600 focus:outline-none">
                </div>
                <div>
                    <label class="block font-bold text-slate-700 uppercase mb-1">Mobile Number (WhatsApp) *</label>
                    <input type="text" name="phone" required placeholder="e.g. 01712345678" class="w-full bg-slate-50 border border-slate-200 rounded-lg p-2.5 focus:border-red-600 focus:outline-none">
                </div>
                <div>
                    <label class="block font-bold text-slate-700 uppercase mb-1">Preferred Date & Time</label>
                    <input type="text" name="message" placeholder="e.g. Saturday 4:00 PM" class="w-full bg-slate-50 border border-slate-200 rounded-lg p-2.5 focus:border-red-600 focus:outline-none">
                </div>
                <button type="submit" class="w-full py-3 bg-red-600 hover:bg-red-700 text-white font-bold rounded-xl shadow transition">
                    Confirm Test Drive Request
                </button>
            </form>
        </div>
    </div>
</div>
@endsection