@extends('layouts.app')

@section('title', "{$vehicle->full_name} (Lot #{$vehicle->lot_number}) – Japan Live Auction | MotoSolution")
@section('meta_description', "Live Japan auction bidding for {$vehicle->full_name} at {$vehicle->auctionHouse->name}. Grade {$vehicle->auction_grade}, verified inspection sheet, live landed cost breakdown.")

@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('auction.index') }}" class="hover:text-white">Japan Live Auctions</a>
        <span>/</span>
        <span class="text-white font-medium truncate">{{ $vehicle->full_name }} (Lot #{{ $vehicle->lot_number }})</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 }}',
        sheetZoomModal: false,
        bidModalOpen: false,
        bidAmountJpy: {{ (int) $vehicle->starting_bid_jpy }},
        startingBidJpy: {{ (int) $vehicle->starting_bid_jpy }},
        rate: {{ config('motosolution.currency.jpy_to_bdt_rate') }},
        engineCc: {{ $vehicle->engine_cc }},
        fuelType: '{{ $vehicle->fuel_type }}',
        year: {{ $vehicle->year }},
        termsAccepted: false,
        isCalculating: false,
        
        get calculatedBdCost() {
            // Live formula calculation based on NBR tariffs
            let jpy = parseFloat(this.bidAmountJpy) || this.startingBidJpy;
            let jpyTotal = jpy + 25000 + 35000 + 180000;
            let cifBdt = (jpyTotal * this.rate) + 25000;
            
            // Age depreciation
            let currentYear = new Date().getFullYear();
            let age = Math.max(0, currentYear - this.year);
            let depRate = age >= 4 ? 0.40 : (age === 3 ? 0.30 : (age === 2 ? 0.20 : (age === 1 ? 0.10 : 0.0)));
            let av = cifBdt * (1 - depRate);

            // Duty rate based on CC and Hybrid
            let isHyb = this.fuelType.toLowerCase().includes('hybrid');
            let sdRate = this.engineCc <= 1500 ? 0.20 : (this.engineCc <= 1800 ? (isHyb ? 0.45 : 0.60) : (this.engineCc <= 2000 ? (isHyb ? 0.60 : 1.00) : (isHyb ? 1.50 : 2.00)));
            
            let cd = av * 0.25;
            let rd = av * 0.03;
            let baseSd = av + cd + rd;
            let sd = baseSd * sdRate;
            let baseVat = baseSd + sd;
            let vat = baseVat * 0.15;
            let ait = av * 0.05;
            let at = baseVat * 0.05;
            
            let duties = cd + rd + sd + vat + ait + at;
            let localCharges = 55000 + 135000 + 50000 + 15000;
            
            return Math.round(cifBdt + duties + localCharges);
        }
     }">

    <div class="grid grid-cols-1 lg:grid-cols-12 gap-10">
        
        <!-- Left 7 Cols: Images, Auction Sheet, Condition Map -->
        <div class="lg:col-span-7 space-y-6">
            
            <!-- Main Lot Image -->
            <div class="relative bg-slate-950 rounded-3xl overflow-hidden aspect-[16/10] border border-white/10 shadow-2xl">
                <img :src="activeImage || '/images/car-placeholder.svg'" alt="{{ $vehicle->full_name }}" onerror="this.onerror=null;this.src='/images/car-placeholder.svg';" class="w-full h-full object-cover transition duration-300">
                
                <div class="absolute top-4 left-4 flex gap-2">
                    <span class="bg-red-600 text-white text-xs font-black px-3 py-1 rounded-lg shadow">
                        {{ $vehicle->auctionHouse->name }} • Lot #{{ $vehicle->lot_number }}
                    </span>
                    <span class="bg-amber-400 text-slate-950 text-xs font-black px-3 py-1 rounded-lg shadow">
                        Grade {{ $vehicle->auction_grade }}
                    </span>
                </div>

                <div class="absolute bottom-4 inset-x-4 bg-black/75 backdrop-blur-md rounded-xl p-3 flex items-center justify-between text-xs text-white border border-white/10">
                    <div class="flex items-center gap-2">
                        <span class="w-2.5 h-2.5 rounded-full bg-emerald-400 animate-ping"></span>
                        <span class="font-bold">Live Auction Schedule:</span>
                    </div>
                    <span class="font-extrabold text-amber-300">{{ $vehicle->auction_date->format('M d, Y') }} at {{ $vehicle->auction_time }}</span>
                </div>
            </div>

            @php
                $seenKeys = [];
                $allImages = collect($vehicle->gallery ?? [$vehicle->main_image])
                    ->filter()
                    ->filter(function ($img) use (&$seenKeys) {
                        $target = $img;
                        if (str_contains($target, 'url=')) {
                            $parsed = parse_url($target, PHP_URL_QUERY);
                            if ($parsed) {
                                parse_str($parsed, $qp);
                                if (!empty($qp['url'])) {
                                    $target = $qp['url'];
                                }
                            }
                        }
                        $clean = preg_replace('/\?.*$/', '', $target);
                        $key = strtolower(basename($clean));
                        if (isset($seenKeys[$key])) {
                            return false;
                        }
                        $seenKeys[$key] = true;

                        return true;
                    })
                    ->values();
                if ($allImages->isEmpty() && $vehicle->main_image) {
                    $allImages = collect([$vehicle->main_image]);
                }
                $sheetOcr = $liveDetail['raw']['car_identification']['SheetOcr'] ?? null;
                $ocrFields = $sheetOcr['fields'] ?? [];
            @endphp

            <!-- Thumbnail Gallery -->
            <div class="space-y-2">
                <div class="flex items-center justify-between text-xs text-slate-400">
                    <span class="font-bold flex items-center gap-1.5 text-slate-300">
                        <i class="fa-solid fa-images text-red-500"></i>
                        <span>Vehicle Photos {{ $vehicle->auction_sheet_url ? '& Inspection Sheet' : '' }} ({{ $allImages->count() }})</span>
                    </span>
                    @if($vehicle->auction_sheet_url)
                        <button type="button" @click="sheetZoomModal = true" class="text-amber-400 hover:text-amber-300 font-bold flex items-center gap-1 text-[11px] bg-amber-500/10 px-2.5 py-1 rounded-lg border border-amber-500/20">
                            <i class="fa-solid fa-file-contract"></i>
                            <span>Inspect Auction Sheet</span>
                        </button>
                    @else
                        <span class="text-amber-400 font-bold flex items-center gap-1.5 text-[11px] bg-amber-500/10 px-2.5 py-1 rounded-lg border border-amber-500/20">
                            <i class="fa-solid fa-circle-check text-emerald-400"></i>
                            <span>Hall Photography Verified</span>
                        </span>
                    @endif
                </div>

                <div class="grid grid-cols-4 sm:grid-cols-6 md:grid-cols-7 gap-2">
                    @foreach($allImages as $index => $img)
                        @php
                            $isSheet = (!empty($vehicle->auction_sheet_url) && $img === $vehicle->auction_sheet_url);
                        @endphp
                        <button type="button" 
                                @click="activeImage = '{{ $img }}'" 
                                class="relative aspect-[4/3] rounded-xl overflow-hidden border-2 transition group {{ $isSheet ? 'border-amber-400/90 bg-amber-950/40 ring-1 ring-amber-400/50' : '' }}" 
                                :class="activeImage === '{{ $img }}' ? 'border-red-600 ring-2 ring-red-600/40 scale-[1.02]' : 'border-white/10 opacity-75 hover:opacity-100'">
                            <img src="{{ $img }}" alt="{{ $vehicle->full_name }} photo {{ $index + 1 }}" onerror="this.onerror=null;this.src='https://images.unsplash.com/photo-1549399542-7e3f8b79c341?w=1200&q=80';" loading="lazy" class="w-full h-full object-cover">
                            @if($isSheet)
                                <div class="absolute bottom-0 inset-x-0 bg-amber-500 text-slate-950 font-black text-[9px] py-0.5 text-center uppercase tracking-wider shadow">
                                    Sheet
                                </div>
                            @else
                                <div class="absolute top-1 left-1 bg-black/60 backdrop-blur-sm text-white text-[9px] font-bold px-1 rounded opacity-0 group-hover:opacity-100 transition">
                                    #{{ $index + 1 }}
                                </div>
                            @endif
                        </button>
                    @endforeach

                    <!-- Direct Zoom Button if sheet is available -->
                    @if($vehicle->auction_sheet_url)
                        <button type="button" @click="sheetZoomModal = true" class="aspect-[4/3] rounded-xl overflow-hidden border-2 border-amber-400/60 bg-amber-950/30 flex flex-col items-center justify-center text-amber-300 text-xs font-bold p-1 hover:bg-amber-900/40 transition">
                            <i class="fa-solid fa-magnifying-glass-plus text-base mb-1"></i>
                            <span class="text-[10px] text-center leading-tight">Zoom Sheet</span>
                        </button>
                    @endif
                </div>
            </div>

            <!-- Authentic Japanese Auction Sheet Viewer Card -->
            <div class="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden space-y-0">
                <div class="p-4 sm:p-5 border-b border-slate-100 flex items-center justify-between bg-white">
                    <div class="flex items-center gap-2.5">
                        <div class="w-8 h-8 rounded-lg bg-red-50 text-red-600 flex items-center justify-center font-bold text-sm">
                            <i class="fa-solid fa-file-lines"></i>
                        </div>
                        <div>
                            <h3 class="font-extrabold text-slate-900 text-sm sm:text-base uppercase tracking-wider font-heading">
                                AUCTION SHEET
                            </h3>
                        </div>
                    </div>
                    @if($vehicle->auction_sheet_url)
                        <button type="button" @click="sheetZoomModal = true" class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-slate-100 hover:bg-slate-200 text-slate-700 text-xs font-bold transition">
                            <i class="fa-solid fa-magnifying-glass-plus text-red-600"></i>
                            <span>Full-Screen Zoom</span>
                        </button>
                    @endif
                </div>

                <div class="p-4 sm:p-6 bg-slate-50 flex items-center justify-center">
                    @if($vehicle->auction_sheet_url)
                        <div class="w-full max-w-2xl bg-white rounded-xl p-2.5 border border-slate-200 shadow-sm cursor-pointer group transition hover:border-red-300" @click="sheetZoomModal = true">
                            <div class="relative overflow-hidden rounded-lg bg-white flex justify-center">
                                <img src="{{ $vehicle->auction_sheet_url }}" alt="Auction Sheet Lot {{ $vehicle->lot_number }}" class="w-full h-auto max-h-[580px] object-contain transition duration-300 group-hover:scale-[1.01]">
                                <div class="absolute inset-0 bg-slate-950/20 opacity-0 group-hover:opacity-100 transition flex items-center justify-center">
                                    <span class="px-4 py-2 rounded-xl bg-red-600 text-white font-bold text-xs shadow-xl flex items-center gap-2">
                                        <i class="fa-solid fa-magnifying-glass-plus"></i> Click to Zoom High-Res Sheet
                                    </span>
                                </div>
                            </div>
                        </div>
                    @else
                        <!-- If awaiting floor digitized sheet upload -->
                        <div class="w-full p-8 text-center bg-white rounded-xl border border-slate-200 space-y-3 max-w-xl mx-auto">
                            <div class="w-12 h-12 rounded-xl bg-amber-50 text-amber-600 mx-auto flex items-center justify-center text-xl">
                                <i class="fa-solid fa-file-signature"></i>
                            </div>
                            <h4 class="text-sm font-bold text-slate-800">Japanese Floor Inspection Document In-Transit</h4>
                            <p class="text-xs text-slate-500 leading-relaxed">
                                Paper inspection sheets (出品票) are digitized 24–48h before the floor gavel. You can request direct inspector translation from our Tokyo desk.
                            </p>
                            <a href="https://wa.me/8801404066329?text=Hello%20MotoSolution,%20please%20provide%20sheet%20translation%20for%20{{ urlencode($vehicle->full_name) }}%20(Lot%20%23{{ $vehicle->lot_number }})" target="_blank" class="inline-flex items-center gap-2 px-4 py-2 bg-emerald-600 hover:bg-emerald-500 text-white rounded-lg text-xs font-bold transition shadow">
                                <i class="fa-brands fa-whatsapp text-sm"></i>
                                <span>Request Hall Sheet Translation</span>
                            </a>
                        </div>
                    @endif
                </div>

                @if($vehicle->damage_info)
                    <div class="px-6 py-3 bg-amber-50/80 border-t border-amber-200/60 text-xs text-amber-900 flex items-start gap-2">
                        <i class="fa-solid fa-circle-info text-amber-600 mt-0.5"></i>
                        <div>
                            <span class="font-bold text-amber-950">Inspector Floor Notes:</span>
                            <span class="text-amber-900">{{ $vehicle->damage_info }}</span>
                        </div>
                    </div>
                @endif
            </div>

            <!-- Standard Japanese Auction Sheet Mark Legend Card -->
            <div class="bg-white rounded-2xl border border-slate-200 shadow-sm p-5 sm:p-6 space-y-4">
                <div class="flex items-center gap-2.5 pb-3 border-b border-slate-100">
                    <div class="w-7 h-7 rounded-lg bg-blue-50 text-blue-600 flex items-center justify-center font-bold text-sm">
                        <i class="fa-solid fa-book-open"></i>
                    </div>
                    <h3 class="font-extrabold text-slate-900 text-sm uppercase tracking-wider font-heading">
                        AUCTION SHEET MARK LEGEND
                    </h3>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-3 text-[11px] sm:text-xs text-slate-600 leading-relaxed">
                    <!-- Left Column -->
                    <div class="space-y-2.5">
                        <div class="leading-relaxed">
                            <span class="inline-block bg-red-100 text-red-600 font-extrabold text-[11px] px-1.5 py-0.2 rounded font-mono">A1</span> Small Scratch
                            <span class="text-slate-300 mx-1">/</span>
                            <span class="inline-block bg-red-100 text-red-600 font-extrabold text-[11px] px-1.5 py-0.2 rounded font-mono">A2</span> Scratch
                            <span class="text-slate-300 mx-1">/</span>
                            <span class="inline-block bg-red-100 text-red-600 font-extrabold text-[11px] px-1.5 py-0.2 rounded font-mono">A3</span> Big Scratch
                            <span class="text-slate-300 mx-1">/</span>
                            <span class="inline-block bg-red-100 text-red-600 font-extrabold text-[11px] px-1.5 py-0.2 rounded font-mono">B1</span> Small dent with scratch (size like a thumb)
                            <span class="text-slate-300 mx-1">/</span>
                            <span class="inline-block bg-red-100 text-red-600 font-extrabold text-[11px] px-1.5 py-0.2 rounded font-mono">B2</span> Dent with scratch (size like flat of the hand)
                            <span class="text-slate-300 mx-1">/</span>
                            <span class="inline-block bg-red-100 text-red-600 font-extrabold text-[11px] px-1.5 py-0.2 rounded font-mono">B3</span> Big Dent with scratch (size like elbow)
                        </div>

                        <div class="leading-relaxed pt-1">
                            <span class="inline-block bg-red-100 text-red-600 font-extrabold text-[11px] px-1.5 py-0.2 rounded font-mono">C1</span> Corrosion
                            <span class="text-slate-300 mx-1">/</span>
                            <span class="inline-block bg-red-100 text-red-600 font-extrabold text-[11px] px-1.5 py-0.2 rounded font-mono">C2</span> Heavy Corrosion
                            <span class="text-slate-300 mx-1">/</span>
                            <span class="inline-block bg-red-100 text-red-600 font-extrabold text-[11px] px-1.5 py-0.2 rounded font-mono">E1</span> Few Dimples
                            <span class="text-slate-300 mx-1">/</span>
                            <span class="inline-block bg-red-100 text-red-600 font-extrabold text-[11px] px-1.5 py-0.2 rounded font-mono">E2</span> Several Dimples
                            <span class="text-slate-300 mx-1">/</span>
                            <span class="inline-block bg-red-100 text-red-600 font-extrabold text-[11px] px-1.5 py-0.2 rounded font-mono">E3</span> Many Dimples
                            <span class="text-slate-300 mx-1">/</span>
                            <span class="inline-block bg-red-100 text-red-600 font-extrabold text-[11px] px-1.5 py-0.2 rounded font-mono">G</span> Chip in glass
                        </div>
                    </div>

                    <!-- Right Column -->
                    <div class="space-y-2.5">
                        <div class="leading-relaxed">
                            <span class="inline-block bg-red-100 text-red-600 font-extrabold text-[11px] px-1.5 py-0.2 rounded font-mono">H</span> Paint faded
                            <span class="text-slate-300 mx-1">/</span>
                            <span class="inline-block bg-red-100 text-red-600 font-extrabold text-[11px] px-1.5 py-0.2 rounded font-mono">P</span> Paint marked
                            <span class="text-slate-300 mx-1">/</span>
                            <span class="inline-block bg-red-100 text-red-600 font-extrabold text-[11px] px-1.5 py-0.2 rounded font-mono">R</span> Repaired Crack on Windshield
                            <span class="text-slate-300 mx-1">/</span>
                            <span class="inline-block bg-red-100 text-red-600 font-extrabold text-[11px] px-1.5 py-0.2 rounded font-mono">RX</span> Repaired Crack on Windshield (needs to be replaced)
                            <span class="text-slate-300 mx-1">/</span>
                            <span class="inline-block bg-red-100 text-red-600 font-extrabold text-[11px] px-1.5 py-0.2 rounded font-mono">S1</span> Rust
                            <span class="text-slate-300 mx-1">/</span>
                            <span class="inline-block bg-red-100 text-red-600 font-extrabold text-[11px] px-1.5 py-0.2 rounded font-mono">S2</span> Heavy Rust
                        </div>

                        <div class="leading-relaxed pt-1">
                            <span class="inline-block bg-red-100 text-red-600 font-extrabold text-[11px] px-1.5 py-0.2 rounded font-mono">U1</span> Small Dent
                            <span class="text-slate-300 mx-1">/</span>
                            <span class="inline-block bg-red-100 text-red-600 font-extrabold text-[11px] px-1.5 py-0.2 rounded font-mono">U2</span> Dent
                            <span class="text-slate-300 mx-1">/</span>
                            <span class="inline-block bg-red-100 text-red-600 font-extrabold text-[11px] px-1.5 py-0.2 rounded font-mono">U3</span> Big Dent
                            <span class="text-slate-300 mx-1">/</span>
                            <span class="inline-block bg-red-100 text-red-600 font-extrabold text-[11px] px-1.5 py-0.2 rounded font-mono">W1</span> Repair Mark/Wave (hardly detectable)
                            <span class="text-slate-300 mx-1">/</span>
                            <span class="inline-block bg-red-100 text-red-600 font-extrabold text-[11px] px-1.5 py-0.2 rounded font-mono">W2</span> Repair Mark/Wave
                            <span class="text-slate-300 mx-1">/</span>
                            <span class="inline-block bg-red-100 text-red-600 font-extrabold text-[11px] px-1.5 py-0.2 rounded font-mono">W3</span> Obvious Repair Mark/Wave (needs to be repainted)
                        </div>

                        <div class="leading-relaxed pt-1">
                            <span class="inline-block bg-red-100 text-red-600 font-extrabold text-[11px] px-1.5 py-0.2 rounded font-mono">X</span> Crack on Windshield (needs to be replaced)
                            <span class="text-slate-300 mx-1">/</span>
                            <span class="inline-block bg-red-100 text-red-600 font-extrabold text-[11px] px-1.5 py-0.2 rounded font-mono">X1</span> Small Crack on Windshield (~1cm)
                            <span class="text-slate-300 mx-1">/</span>
                            <span class="inline-block bg-red-100 text-red-600 font-extrabold text-[11px] px-1.5 py-0.2 rounded font-mono">XX</span> Replaced
                            <span class="text-slate-300 mx-1">/</span>
                            <span class="inline-block bg-red-100 text-red-600 font-extrabold text-[11px] px-1.5 py-0.2 rounded font-mono">Y1</span> Small Hole or Crack
                            <span class="text-slate-300 mx-1">/</span>
                            <span class="inline-block bg-red-100 text-red-600 font-extrabold text-[11px] px-1.5 py-0.2 rounded font-mono">Y2</span> Hole or Crack
                            <span class="text-slate-300 mx-1">/</span>
                            <span class="inline-block bg-red-100 text-red-600 font-extrabold text-[11px] px-1.5 py-0.2 rounded font-mono">Y3</span> Big Hole or Crack
                        </div>
                    </div>
                </div>
            </div>

            <!-- Equipment & Factory Options -->
            <div class="bg-white p-6 rounded-2xl border border-slate-200 space-y-3 text-xs">
                <h3 class="text-sm font-bold text-slate-900 border-b border-slate-100 pb-2">Factory Specifications & Options</h3>
                <p class="text-slate-600 leading-relaxed">{{ $vehicle->equipment_options ?? 'Standard equipment and options as verified on Japanese auction floor.' }}</p>
            </div>
        </div>

        <!-- Right 5 Cols: Pricing, Live Landed Cost, Bidding Authorization Box -->
        <div class="lg:col-span-5 space-y-6">
            <div class="bg-[#111827] text-white p-6 rounded-3xl border border-white/10 shadow-2xl space-y-6 sticky top-24" id="bid-section">
                
                <!-- Lot Header -->
                <div>
                    <div class="flex items-center justify-between">
                        <span class="text-xs font-bold text-red-400 uppercase tracking-wider">{{ $vehicle->auctionHouse->name }}</span>
                        <div class="flex items-center gap-1.5">
                            @if(!empty($vehicle->live_price_data) || !empty($liveDetail['live_price']))
                                <span class="text-[10px] font-extrabold bg-emerald-500/20 text-emerald-400 border border-emerald-500/30 px-2 py-0.5 rounded flex items-center gap-1">
                                    <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-ping"></span> Live Floor Bid
                                </span>
                            @endif
                            <span class="text-xs font-mono bg-red-600/30 text-red-400 border border-red-500/30 px-2 py-0.5 rounded font-bold">Lot #{{ $vehicle->lot_number }}</span>
                        </div>
                    </div>
                    <h1 class="text-2xl font-extrabold text-white font-heading mt-1">{{ $vehicle->full_name }}</h1>
                    <div class="flex flex-wrap items-center gap-2 mt-1.5 text-xs text-slate-300">
                        <span class="inline-flex items-center gap-1.5 bg-white/5 border border-white/10 px-2.5 py-0.5 rounded-full font-semibold">
                            <span class="w-2.5 h-2.5 rounded-full border border-white/30 shadow-sm shrink-0" style="background-color: {{ $vehicle->color_code }};"></span>
                            <span>{{ $vehicle->color }}</span>
                        </span>
                        <span class="text-slate-500">•</span>
                        <span>{{ $vehicle->transmission }}</span>
                        <span class="text-slate-500">•</span>
                        <span class="font-mono text-slate-300">Chassis: {{ $vehicle->chassis_number }}</span>
                    </div>
                </div>

                <!-- Starting Floor Price -->
                <div class="p-4 rounded-2xl bg-black/40 border border-white/10 flex items-center justify-between">
                    <div>
                        <span class="text-[10px] uppercase font-bold text-slate-400 block">Starting Floor Price</span>
                        <span class="text-2xl font-extrabold text-white font-heading">{{ $vehicle->formatted_starting_bid }}</span>
                    </div>
                    <div class="text-right">
                        <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 font-bold text-xs">
                            <i class="fa-solid fa-circle-check"></i> Verified Floor Lot
                        </span>
                    </div>
                </div>

                <!-- Customer Bidding Console -->
                <div class="space-y-4 pt-2 border-t border-white/10">
                    <div>
                        <div class="flex items-center justify-between mb-1.5">
                            <label class="block text-xs font-bold uppercase tracking-wider text-slate-200">
                                Your Authorized Maximum Bid (JPY)
                            </label>
                            <span class="text-xs text-amber-400 font-bold" x-text="'¥' + parseInt(bidAmountJpy).toLocaleString()"></span>
                        </div>
                        
                        <div class="relative">
                            <span class="absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-400 font-bold text-sm">¥</span>
                            <input type="number" x-model.number="bidAmountJpy" step="10000" min="{{ (int) $vehicle->starting_bid_jpy }}"
                                class="w-full pl-8 pr-4 py-3 bg-black/60 border border-white/20 rounded-xl text-white font-bold text-base focus:outline-none focus:border-red-500">
                        </div>

                        <!-- Quick Increment Buttons -->
                        <div class="grid grid-cols-3 gap-2 mt-2">
                            <button type="button" @click="bidAmountJpy += 50000" class="py-1.5 px-2 bg-white/5 hover:bg-white/10 rounded-lg text-xs font-semibold text-slate-300 border border-white/5 transition">
                                +¥50,000
                            </button>
                            <button type="button" @click="bidAmountJpy += 100000" class="py-1.5 px-2 bg-white/5 hover:bg-white/10 rounded-lg text-xs font-semibold text-slate-300 border border-white/5 transition">
                                +¥100,000
                            </button>
                            <button type="button" @click="bidAmountJpy = startingBidJpy" class="py-1.5 px-2 bg-white/5 hover:bg-white/10 rounded-lg text-xs font-semibold text-slate-400 border border-white/5 transition">
                                Reset
                            </button>
                        </div>
                    </div>

                    <!-- Terms Checkbox -->
                    <div class="flex items-start gap-2 text-xs text-slate-300">
                        <input type="checkbox" id="agree_terms" x-model="termsAccepted" class="mt-0.5 rounded bg-black/60 border-white/20 text-red-600 focus:ring-0">
                        <label for="agree_terms">
                            I authorize MotoSolution to bid up to <strong class="text-white" x-text="'¥' + parseInt(bidAmountJpy).toLocaleString()"></strong> on my behalf in Japan. I agree to the <a href="{{ route('faq') }}" target="_blank" class="text-red-400 hover:underline">Auction Terms & Conditions</a>.
                        </label>
                    </div>

                    <!-- Action Trigger Button -->
                    @auth
                        <button type="button" @click="bidModalOpen = true" :disabled="!termsAccepted || bidAmountJpy < startingBidJpy"
                            class="w-full py-4 px-6 bg-red-600 hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed text-white text-sm font-bold rounded-xl shadow-xl shadow-red-900/40 transition flex items-center justify-center gap-2">
                            <i class="fa-solid fa-gavel"></i>
                            <span>Submit Maximum Authorized Bid</span>
                        </button>
                    @else
                        <a href="{{ route('login') }}" class="w-full py-4 px-6 bg-red-600 hover:bg-red-700 text-white text-sm font-bold rounded-xl shadow-xl shadow-red-900/40 transition flex items-center justify-center gap-2">
                            <i class="fa-solid fa-lock"></i>
                            <span>Login to Place Authorized Bid</span>
                        </a>
                    @endauth

                    <!-- Critical Business Rule Note -->
                    <div class="p-3 bg-red-950/30 border border-red-500/20 rounded-xl text-[11px] text-red-300 leading-relaxed">
                        <i class="fa-solid fa-shield-halved text-red-400 mr-1"></i>
                        <strong>Important Commercial Workflow:</strong> Your bid is authorization for our Tokyo floor team. The bid is first reviewed and verified by MotoSolution administration before dispatching to the Japanese auction floor.
                    </div>
                </div>

                <!-- Complete Specifications Table -->
                <div class="border-t border-white/10 pt-4">
                    <h3 class="text-xs font-bold uppercase tracking-wider text-slate-400 mb-3">Lot Technical Specifications</h3>
                    <div class="divide-y divide-white/10 text-xs">
                        <div class="py-2 flex justify-between"><span class="text-slate-400">Auction House</span><span class="font-bold text-white">{{ $vehicle->auctionHouse->name }}</span></div>
                        <div class="py-2 flex justify-between"><span class="text-slate-400">Lot Number</span><span class="font-bold text-white">#{{ $vehicle->lot_number }}</span></div>
                        <div class="py-2 flex justify-between"><span class="text-slate-400">Year / Month</span><span class="font-bold text-white">{{ $vehicle->year }}</span></div>
                        <div class="py-2 flex justify-between"><span class="text-slate-400">Engine CC</span><span class="font-bold text-white">{{ $vehicle->engine_cc }} cc</span></div>
                        <div class="py-2 flex justify-between"><span class="text-slate-400">Fuel</span><span class="font-bold text-white">{{ $vehicle->fuel_type }}</span></div>
                        <div class="py-2 flex justify-between"><span class="text-slate-400">Transmission</span><span class="font-bold text-white">{{ $vehicle->transmission }}</span></div>
                        <div class="py-2 flex justify-between"><span class="text-slate-400">Drive</span><span class="font-bold text-white">{{ $vehicle->drive_type }}</span></div>
                        <div class="py-2 flex justify-between items-center"><span class="text-slate-400">Exterior Color</span><span class="font-bold text-white flex items-center gap-2"><span class="w-3.5 h-3.5 rounded-full border border-white/30 shadow-sm inline-block shrink-0" style="background-color: {{ $vehicle->color_code }};"></span>{{ $vehicle->color }}</span></div>
                        <div class="py-2 flex justify-between"><span class="text-slate-400">Mileage</span><span class="font-bold text-white">{{ number_format($vehicle->mileage) }} km</span></div>
                        <div class="py-2 flex justify-between"><span class="text-slate-400">Overall Auction Grade</span><span class="font-bold text-amber-400">Grade {{ $vehicle->auction_grade }}</span></div>
                        <div class="py-2 flex justify-between"><span class="text-slate-400">Interior / Exterior</span><span class="font-bold text-white">{{ $vehicle->interior_grade }} / {{ $vehicle->exterior_grade }}</span></div>
                        <div class="py-2 flex justify-between"><span class="text-slate-400">Chassis</span><span class="font-mono font-bold text-slate-300">{{ $vehicle->chassis_number }}</span></div>
                    </div>
                </div>

            </div>
        </div>

    </div>

    <!-- Final Bid Confirmation Modal -->
    <div x-show="bidModalOpen" x-transition class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-md" style="display: none;">
        <div class="bg-[#111827] text-white rounded-3xl max-w-lg w-full p-7 border border-white/10 shadow-2xl relative" @click.outside="bidModalOpen = false">
            <button @click="bidModalOpen = false" class="absolute top-4 right-4 text-slate-400 hover:text-white">
                <i class="fa-solid fa-xmark text-lg"></i>
            </button>

            <div class="text-center pb-4 border-b border-white/10">
                <div class="w-12 h-12 rounded-2xl bg-red-600/20 text-red-500 flex items-center justify-center text-xl mx-auto mb-2 border border-red-500/30">
                    <i class="fa-solid fa-gavel"></i>
                </div>
                <h3 class="text-xl font-bold text-white font-heading">Confirm Bid Authorization</h3>
                <p class="text-xs text-slate-400 mt-0.5">Please review your maximum authorized ceiling before submission.</p>
            </div>

            <form method="POST" action="{{ route('auction.bid', $vehicle->id) }}" class="space-y-4 pt-4 text-xs">
                @csrf
                <input type="hidden" name="max_bid_jpy" :value="bidAmountJpy">
                <input type="hidden" name="terms" value="1">

                <div class="p-4 bg-black/40 rounded-xl border border-white/10 space-y-2">
                    <div class="flex justify-between items-center text-sm">
                        <span class="text-slate-300">Vehicle:</span>
                        <span class="font-bold text-white">{{ $vehicle->full_name }}</span>
                    </div>
                    <div class="flex justify-between items-center text-sm">
                        <span class="text-slate-300">Auction Lot:</span>
                        <span class="font-bold text-red-400">{{ $vehicle->auctionHouse->name }} #{{ $vehicle->lot_number }}</span>
                    </div>
                    <div class="flex justify-between items-center text-sm pt-2 border-t border-white/10">
                        <span class="text-slate-300">Maximum Floor Bid Ceiling:</span>
                        <span class="font-extrabold text-amber-400 text-base" x-text="'¥' + parseInt(bidAmountJpy).toLocaleString()"></span>
                    </div>
                </div>

                <div>
                    <label class="block font-bold text-slate-300 uppercase mb-1">Special Instructions for Tokyo Desk (Optional)</label>
                    <textarea name="notes" rows="2" placeholder="e.g. Do not exceed ¥2,600,000 if bidding gets competitive" class="w-full bg-black/40 border border-white/10 rounded-xl p-2.5 text-white focus:outline-none focus:border-red-500"></textarea>
                </div>

                <div class="p-3 bg-amber-500/10 border border-amber-500/20 rounded-xl text-[11px] text-amber-300 leading-relaxed">
                    By confirming, you authorize MotoSolution Bangladesh to bid at the Japanese auction hall up to this ceiling. If won, you will only pay the actual winning hammer price.
                </div>

                <div class="grid grid-cols-2 gap-3 pt-2">
                    <button type="button" @click="bidModalOpen = false" class="py-3 px-4 bg-white/10 hover:bg-white/15 text-white font-bold rounded-xl transition">
                        Cancel
                    </button>
                    <button type="submit" class="py-3 px-4 bg-red-600 hover:bg-red-700 text-white font-bold rounded-xl shadow-lg shadow-red-900/40 transition">
                        Authorize Bid Now
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Full-Screen Auction Sheet Lightbox Modal -->
    @if($vehicle->auction_sheet_url)
    <div x-show="sheetZoomModal" x-transition class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/90 backdrop-blur-md" style="display: none;">
        <div class="max-w-5xl w-full bg-[#111827] rounded-3xl p-6 border border-white/15 shadow-2xl relative" @click.outside="sheetZoomModal = false">
            <button @click="sheetZoomModal = false" class="absolute top-4 right-4 text-slate-400 hover:text-white text-xl">
                <i class="fa-solid fa-xmark"></i>
            </button>
            <div class="flex flex-col sm:flex-row sm:items-center justify-between pb-3 border-b border-white/10 mb-4 gap-2 pr-8">
                <div>
                    <h3 class="font-bold text-white text-base">Auction Inspection Certificate – Lot #{{ $vehicle->lot_number }} (Grade {{ $vehicle->auction_grade }})</h3>
                    <p class="text-xs text-slate-400">Authentic Japanese auction floor inspection document</p>
                </div>
                <div class="flex items-center gap-2">
                    <span class="text-xs text-amber-400 font-bold bg-amber-500/10 px-2.5 py-1 rounded-lg border border-amber-500/20">Verified Certificate</span>
                    <a href="{{ $vehicle->auction_sheet_url }}" target="_blank" rel="noopener noreferrer" class="text-xs font-bold text-white bg-white/10 hover:bg-white/20 px-3 py-1 rounded-lg border border-white/15 flex items-center gap-1.5 transition">
                        <i class="fa-solid fa-arrow-up-right-from-square"></i> Open Full Native Res
                    </a>
                </div>
            </div>
            <div class="overflow-auto max-h-[75vh] flex justify-center bg-black/60 rounded-xl p-3 border border-white/10">
                <img src="{{ $vehicle->auction_sheet_url }}" alt="Inspection Sheet Lot {{ $vehicle->lot_number }}" class="max-w-full h-auto object-contain">
            </div>
            <p class="text-center text-xs text-slate-400 mt-3">Recorded and authenticated by certified Japanese automotive inspectors at {{ $vehicle->auctionHouse->name }}.</p>
        </div>
    </div>
    @endif

</div>
@endsection