@extends('layouts.customer')

@section('title', 'Saved Watchlist – Customer Portal')
@section('page_title', 'Saved Watchlist')

@section('content')
<div class="space-y-6">
    
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
            <h2 class="text-xl font-bold text-white font-heading">Your Saved Vehicles</h2>
            <p class="text-xs text-slate-400">Keep track of price changes and auction start times for your favorite vehicles.</p>
        </div>
        <div class="flex gap-2">
            <a href="{{ route('inventory.index') }}" class="px-4 py-2 rounded-xl bg-white/10 hover:bg-white/20 text-white font-bold text-xs transition">
                Browse Ready Stock
            </a>
            <a href="{{ route('auction.index') }}" class="px-4 py-2 rounded-xl bg-red-600 hover:bg-red-700 text-white font-bold text-xs shadow transition">
                Browse Japan Auctions
            </a>
        </div>
    </div>

    @if($watchlists->count() > 0)
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            @foreach($watchlists as $item)
                @php
                    $isAuction = !empty($item->auction_vehicle_id);
                    $car = $isAuction ? $item->auctionVehicle : $item->vehicle;
                @endphp

                @if($car)
                    <div class="bg-slate-900 border border-white/10 rounded-2xl overflow-hidden shadow-xl hover:border-red-500/40 transition flex flex-col justify-between group">
                        <div>
                            <div class="aspect-16/10 bg-slate-950 relative overflow-hidden">
                                @if(!empty($car->images) && isset($car->images[0]))
                                    <img src="{{ $car->images[0] }}" alt="Vehicle" class="w-full h-full object-cover group-hover:scale-105 transition duration-500">
                                @else
                                    <div class="w-full h-full flex items-center justify-center text-slate-700"><i class="fa-solid fa-car text-4xl"></i></div>
                                @endif

                                <span class="absolute top-3 left-3 px-2.5 py-1 rounded-md text-[10px] font-bold uppercase tracking-wider text-white {{ $isAuction ? 'bg-amber-600' : 'bg-emerald-600' }}">
                                    {{ $isAuction ? 'Live Auction' : 'Ready Stock' }}
                                </span>

                                <form method="POST" action="{{ route('customer.watchlist.toggle') }}" class="absolute top-3 right-3">
                                    @csrf
                                    @if($isAuction)
                                        <input type="hidden" name="auction_vehicle_id" value="{{ $car->id }}">
                                    @else
                                        <input type="hidden" name="vehicle_id" value="{{ $car->id }}">
                                    @endif
                                    <button type="submit" class="w-8 h-8 rounded-full bg-slate-900/80 text-rose-500 hover:bg-rose-600 hover:text-white transition flex items-center justify-center text-xs shadow">
                                        <i class="fa-solid fa-heart"></i>
                                    </button>
                                </form>
                            </div>

                            <div class="p-5">
                                <h3 class="text-sm font-bold text-white group-hover:text-red-400 transition font-heading">
                                    {{ $car->year ?? '' }} {{ $car->brand ?? '' }} {{ $car->model ?? '' }}
                                </h3>
                                <p class="text-xs text-slate-400 mt-1">
                                    {{ number_format($car->mileage ?? 0) }} km · {{ $car->engine_cc ?? 1800 }}cc · {{ $car->fuel_type ?? 'Hybrid' }}
                                </p>
                                
                                <div class="mt-4 pt-3 border-t border-white/5 flex items-baseline justify-between">
                                    <span class="text-[10px] text-slate-500 font-bold uppercase">
                                        {{ $isAuction ? 'Starting Bid' : 'Showroom Price' }}
                                    </span>
                                    <span class="text-base font-extrabold text-white">
                                        @if($isAuction)
                                            ¥{{ number_format($car->starting_price_jpy ?? 0) }}
                                        @else
                                            ৳{{ number_format($car->price_bdt ?? 0) }}
                                        @endif
                                    </span>
                                </div>
                            </div>
                        </div>

                        <div class="p-5 pt-0">
                            @if($isAuction)
                                <a href="{{ route('auction.show', $car->id) }}" class="w-full block py-2.5 rounded-xl bg-red-600 hover:bg-red-700 text-white font-bold text-xs text-center shadow transition">
                                    View Lot & Authorize Bid
                                </a>
                            @else
                                <a href="{{ route('inventory.show', $car->slug ?? $car->id) }}" class="w-full block py-2.5 rounded-xl bg-blue-600 hover:bg-blue-500 text-white font-bold text-xs text-center shadow transition">
                                    View Showroom Specs
                                </a>
                            @endif
                        </div>
                    </div>
                @endif
            @endforeach
        </div>
        <div class="p-4">
            {{ $watchlists->links() }}
        </div>
    @else
        <div class="bg-slate-900 border border-white/10 rounded-2xl p-12 text-center text-slate-400">
            <i class="fa-regular fa-heart text-4xl mb-3 text-slate-600 block"></i>
            <p class="text-base font-bold text-white">Your watchlist is currently empty.</p>
            <p class="text-xs text-slate-500 mt-1">Browse through our showroom ready stock or upcoming Japan auction lots and click the heart icon to save vehicles.</p>
            <div class="mt-6 flex justify-center gap-3">
                <a href="{{ route('inventory.index') }}" class="px-4 py-2 rounded-xl bg-white/10 hover:bg-white/20 text-white font-bold text-xs transition">
                    Browse Ready Stock
                </a>
                <a href="{{ route('auction.index') }}" class="px-4 py-2 rounded-xl bg-red-600 hover:bg-red-700 text-white font-bold text-xs transition">
                    Browse Japan Auctions
                </a>
            </div>
        </div>
    @endif

</div>
@endsection