@extends('layouts.app')

@section('title', 'Japan Live Auction Vehicles & Bidding | MotoSolution Bangladesh')
@section('meta_description', 'Direct live access to USS Tokyo, TAA Yokohama, CAA Chubu, and HAA Kobe car auctions. View inspection sheets, live countdowns, and authorize your maximum bid.')

@section('content')
<!-- Header Banner -->
<div class="bg-[#0B0F19] text-white py-12 border-b border-white/10 relative overflow-hidden">
    <div class="absolute top-0 right-0 w-96 h-96 bg-red-600/10 rounded-full blur-3xl pointer-events-none"></div>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div>
            <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-red-600/20 text-red-400 text-xs font-bold mb-2 border border-red-500/30">
                <span class="w-2 h-2 rounded-full bg-red-500 animate-ping"></span>
                USS, TAA, CAA, HAA Real-Time Auction Feeds
            </div>
            <h1 class="text-3xl sm:text-4xl font-extrabold font-heading">Japan Live Auctions</h1>
            <p class="text-slate-400 text-sm mt-1">Direct access to verified Japanese auction halls. Authorize your maximum bid with total landed cost transparency.</p>
        </div>
        <div class="text-xs text-slate-400 bg-white/5 px-4 py-2 rounded-xl border border-white/10">
            Active Lots: <span class="font-bold text-white">{{ $auctionVehicles->total() }}</span> | Rate: <span class="font-bold text-emerald-400">¥1 = ৳{{ config('motosolution.currency.jpy_to_bdt_rate') }}</span>
        </div>
    </div>
</div>

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
    <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
        
        <!-- Left Filter Sidebar -->
        <div class="lg:col-span-1">
            <div class="bg-[#111827] text-white p-6 rounded-2xl border border-white/10 sticky top-24 space-y-6">
                <div class="flex items-center justify-between pb-3 border-b border-white/10">
                    <h3 class="font-bold text-white text-sm uppercase tracking-wider flex items-center gap-2">
                        <i class="fa-solid fa-satellite-dish text-red-500"></i> Auction Filters
                    </h3>
                    <a href="{{ route('auction.index') }}" class="text-xs text-red-400 font-bold hover:underline">Reset</a>
                </div>

                <form method="GET" action="{{ route('auction.index') }}" class="space-y-4 text-xs">
                    <!-- Auction House -->
                    <div>
                        <label class="block font-bold text-slate-300 uppercase mb-1">Auction Hall</label>
                        <select name="auction_house_id" onchange="this.form.submit()" class="w-full bg-black/40 border border-white/10 rounded-lg p-2 font-medium text-white focus:border-red-500 focus:outline-none">
                            <option value="">All Auction Houses</option>
                            @foreach($auctionHouses as $ah)
                                <option value="{{ $ah->id }}" {{ request('auction_house_id') == $ah->id ? 'selected' : '' }}>{{ $ah->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Make -->
                    <div>
                        <label class="block font-bold text-slate-300 uppercase mb-1">Make</label>
                        <select name="make" onchange="this.form.submit()" class="w-full bg-black/40 border border-white/10 rounded-lg p-2 font-medium text-white focus:border-red-500 focus:outline-none">
                            <option value="">All Makes</option>
                            @foreach($makes as $m)
                                <option value="{{ $m }}" {{ request('make') === $m ? 'selected' : '' }}>{{ $m }}</option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Model Search -->
                    <div>
                        <label class="block font-bold text-slate-300 uppercase mb-1">Model Keyword</label>
                        <input type="text" name="model" value="{{ request('model') }}" placeholder="e.g. Harrier, Vezel, Prado" 
                            class="w-full bg-black/40 border border-white/10 rounded-lg p-2 font-medium text-white placeholder-slate-500 focus:border-red-500 focus:outline-none">
                    </div>

                    <!-- Auction Grade -->
                    <div>
                        <label class="block font-bold text-slate-300 uppercase mb-1">Minimum Grade</label>
                        <select name="grade" onchange="this.form.submit()" class="w-full bg-black/40 border border-white/10 rounded-lg p-2 font-medium text-white focus:border-red-500 focus:outline-none">
                            <option value="">Any Auction Grade</option>
                            <option value="5.0" {{ request('grade') === '5.0' ? 'selected' : '' }}>Grade 5.0 (Like New)</option>
                            <option value="4.5" {{ request('grade') === '4.5' ? 'selected' : '' }}>Grade 4.5 (Very Clean)</option>
                            <option value="4.0" {{ request('grade') === '4.0' ? 'selected' : '' }}>Grade 4.0 (Clean)</option>
                        </select>
                    </div>

                    <!-- Year -->
                    <div>
                        <label class="block font-bold text-slate-300 uppercase mb-1">Year</label>
                        <select name="year" onchange="this.form.submit()" class="w-full bg-black/40 border border-white/10 rounded-lg p-2 font-medium text-white focus:border-red-500 focus:outline-none">
                            <option value="">Any Year</option>
                            @foreach($years as $yr)
                                <option value="{{ $yr }}" {{ request('year') == $yr ? 'selected' : '' }}>{{ $yr }}</option>
                            @endforeach
                        </select>
                    </div>

                    <button type="submit" class="w-full py-2.5 bg-red-600 hover:bg-red-700 text-white font-bold rounded-lg transition shadow-md">
                        Filter Lots
                    </button>
                </form>
            </div>
        </div>

        <!-- Right Auction Cards Grid -->
        <div class="lg:col-span-3 space-y-6">
            
            <!-- Sorting Header Bar -->
            <div class="bg-white p-4 rounded-xl border border-slate-200 flex items-center justify-between text-xs">
                <span class="text-slate-600 font-medium">Found <strong class="text-slate-900">{{ $auctionVehicles->total() }}</strong> live Japanese auction lots</span>
                
                <div class="flex items-center gap-2">
                    <span class="text-slate-500">Sort By:</span>
                    <form method="GET" action="{{ route('auction.index') }}">
                        @foreach(request()->except('sort') as $key => $val)
                            <input type="hidden" name="{{ $key }}" value="{{ $val }}">
                        @endforeach
                        <select name="sort" onchange="this.form.submit()" class="bg-slate-50 border border-slate-200 rounded-lg p-1.5 font-bold text-slate-800 focus:outline-none">
                            <option value="closing_soon" {{ request('sort') === 'closing_soon' ? 'selected' : '' }}>Closing Soonest</option>
                            <option value="starting_bid_asc" {{ request('sort') === 'starting_bid_asc' ? 'selected' : '' }}>Starting Bid: Low to High</option>
                            <option value="starting_bid_desc" {{ request('sort') === 'starting_bid_desc' ? 'selected' : '' }}>Starting Bid: High to Low</option>
                            <option value="year_desc" {{ request('sort') === 'year_desc' ? 'selected' : '' }}>Latest Model Year</option>
                            <option value="mileage_asc" {{ request('sort') === 'mileage_asc' ? 'selected' : '' }}>Lowest Mileage</option>
                        </select>
                    </form>
                </div>
            </div>

            <!-- Auction Lots Grid -->
            @if($auctionVehicles->isEmpty())
                <div class="p-12 text-center bg-white rounded-2xl border border-slate-200 space-y-3">
                    <i class="fa-solid fa-satellite-dish text-4xl text-slate-300"></i>
                    <h3 class="text-base font-bold text-slate-700">No live auction lots match your current filters</h3>
                    <p class="text-xs text-slate-500">Auction lots update continuously throughout the week. Try resetting your filters.</p>
                    <a href="{{ route('auction.index') }}" class="inline-block py-2 px-4 bg-red-600 text-white rounded-lg text-xs font-bold">Clear Filters</a>
                </div>
            @else
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    @foreach($auctionVehicles as $auction)
                        <div class="bg-[#111827] rounded-2xl border border-white/10 overflow-hidden card-hover-effect flex flex-col justify-between">
                            <div>
                                <!-- Image Container -->
                                <div class="relative aspect-[16/10] overflow-hidden group">
                                    <img src="{{ $auction->main_image }}" alt="{{ $auction->full_name }}" class="w-full h-full object-cover group-hover:scale-105 transition duration-500">
                                    <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-black/30"></div>

                                    <div class="absolute top-3 left-3 flex items-center gap-1.5">
                                        <span class="bg-black/70 backdrop-blur-md text-white text-[10px] font-bold px-2 py-0.5 rounded border border-white/15">
                                            {{ $auction->auctionHouse->name }}
                                        </span>
                                        <span class="bg-red-600 text-white text-[10px] font-black px-1.5 py-0.5 rounded shadow">
                                            #{{ $auction->lot_number }}
                                        </span>
                                    </div>

                                    <div class="absolute top-3 right-3">
                                        <span class="bg-amber-400 text-slate-950 text-xs font-black px-2 py-0.5 rounded shadow">
                                            Grade {{ $auction->auction_grade }}
                                        </span>
                                    </div>

                                    <div class="absolute bottom-2.5 inset-x-3 bg-black/60 backdrop-blur-md rounded-lg px-2.5 py-1 flex items-center justify-between text-[11px] border border-white/10">
                                        <span class="text-slate-300 flex items-center gap-1">
                                            <i class="fa-solid fa-clock text-red-400"></i> Auction Time:
                                        </span>
                                        <span class="font-bold text-amber-300">{{ $auction->auction_date->format('M d') }} ({{ $auction->auction_time }})</span>
                                    </div>
                                </div>

                                <!-- Body -->
                                <div class="p-4">
                                    <h3 class="text-base font-bold text-white leading-snug">
                                        <a href="{{ route('auction.show', $auction->slug) }}" class="hover:text-red-400 transition">
                                            {{ $auction->full_name }}
                                        </a>
                                    </h3>

                                    <div class="flex flex-wrap gap-1.5 mt-2.5 text-[11px] text-slate-400">
                                        <span class="bg-white/5 px-2 py-0.5 rounded"><i class="fa-solid fa-gauge mr-1"></i>{{ number_format($auction->mileage) }} km</span>
                                        <span class="bg-white/5 px-2 py-0.5 rounded"><i class="fa-solid fa-gas-pump mr-1"></i>{{ $auction->fuel_type }}</span>
                                        <span class="bg-white/5 px-2 py-0.5 rounded"><i class="fa-solid fa-gears mr-1"></i>{{ $auction->engine_cc }}cc</span>
                                    </div>

                                    <div class="mt-3.5 pt-3 border-t border-white/10 grid grid-cols-2 gap-2">
                                        <div>
                                            <span class="text-[9px] uppercase font-bold text-slate-400 block">Starting Bid</span>
                                            <span class="text-sm font-extrabold text-white">{{ $auction->formatted_starting_bid }}</span>
                                        </div>
                                        <div class="text-right">
                                            <span class="text-[9px] uppercase font-bold text-slate-400 block">Est. BD Landed</span>
                                            <span class="text-sm font-extrabold text-emerald-400">{{ $auction->formatted_estimated_bd_cost }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="p-4 pt-0 grid grid-cols-2 gap-2">
                                <a href="{{ route('auction.show', $auction->slug) }}" class="py-2 px-3 bg-white/5 hover:bg-white/10 text-white text-xs font-semibold rounded-lg text-center border border-white/10 transition">
                                    View Details
                                </a>
                                <a href="{{ route('auction.show', $auction->slug) }}#bid-section" class="py-2 px-3 bg-red-600 hover:bg-red-700 text-white text-xs font-bold rounded-lg text-center shadow transition">
                                    Bid Now
                                </a>
                            </div>
                        </div>
                    @endforeach
                </div>

                <!-- Pagination -->
                <div class="pt-6">
                    {{ $auctionVehicles->links() }}
                </div>
            @endif
        </div>
    </div>
</div>
@endsection