@extends('layouts.customer')

@section('title', 'Customer Dashboard – MotoSolution Portal')
@section('page_title', 'Account Overview')

@section('content')
<div class="space-y-8">
    
    <!-- Welcome Banner -->
    <div class="bg-gradient-to-r from-red-950/60 via-slate-900 to-slate-900 border border-red-500/30 rounded-2xl p-6 sm:p-8 flex flex-col md:flex-row items-start md:items-center justify-between gap-6 shadow-2xl relative overflow-hidden">
        <div class="relative z-10">
            <span class="text-xs font-bold uppercase tracking-widest text-red-400 block mb-1">Welcome Back</span>
            <h2 class="text-2xl sm:text-3xl font-extrabold text-white font-heading">
                {{ $user->name }}
            </h2>
            <p class="text-xs sm:text-sm text-slate-400 mt-1 max-w-xl">
                Track your active Japanese auction bid authorizations, vessel shipments, and showroom ready stock from your personal automotive portal.
            </p>
        </div>
        <div class="flex flex-wrap gap-3 relative z-10 shrink-0">
            <a href="{{ route('auction.index') }}" class="px-4 py-2.5 rounded-xl bg-red-600 hover:bg-red-700 text-white font-bold text-xs shadow-lg shadow-red-900/30 transition flex items-center gap-2">
                <i class="fa-solid fa-gavel"></i>
                <span>Browse Live Auctions</span>
            </a>
            <a href="{{ route('calculator') }}" class="px-4 py-2.5 rounded-xl bg-white/10 hover:bg-white/20 text-white font-bold text-xs transition flex items-center gap-2">
                <i class="fa-solid fa-calculator text-amber-400"></i>
                <span>Landed Cost</span>
            </a>
        </div>
    </div>

    <!-- 4 KPI Metrics -->
    <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
        <div class="bg-slate-900 border border-white/10 rounded-2xl p-5 shadow-lg">
            <div class="flex items-center justify-between">
                <span class="text-xs font-bold uppercase tracking-wider text-slate-400">Active Bids</span>
                <div class="w-9 h-9 rounded-xl bg-amber-500/20 text-amber-400 flex items-center justify-center text-sm">
                    <i class="fa-solid fa-gavel"></i>
                </div>
            </div>
            <p class="text-2xl sm:text-3xl font-extrabold text-white font-heading mt-3">
                {{ $activeBids->count() }}
            </p>
            <span class="text-[11px] text-slate-400 mt-1 block">Awaiting auction result</span>
        </div>

        <div class="bg-slate-900 border border-white/10 rounded-2xl p-5 shadow-lg">
            <div class="flex items-center justify-between">
                <span class="text-xs font-bold uppercase tracking-wider text-slate-400">Won Auctions</span>
                <div class="w-9 h-9 rounded-xl bg-emerald-500/20 text-emerald-400 flex items-center justify-center text-sm">
                    <i class="fa-solid fa-trophy"></i>
                </div>
            </div>
            <p class="text-2xl sm:text-3xl font-extrabold text-emerald-400 font-heading mt-3">
                {{ $wonAuctionsCount }}
            </p>
            <span class="text-[11px] text-slate-400 mt-1 block">Successfully hammered</span>
        </div>

        <div class="bg-slate-900 border border-white/10 rounded-2xl p-5 shadow-lg">
            <div class="flex items-center justify-between">
                <span class="text-xs font-bold uppercase tracking-wider text-slate-400">Tracked Orders</span>
                <div class="w-9 h-9 rounded-xl bg-blue-500/20 text-blue-400 flex items-center justify-center text-sm">
                    <i class="fa-solid fa-ship"></i>
                </div>
            </div>
            <p class="text-2xl sm:text-3xl font-extrabold text-white font-heading mt-3">
                {{ $recentOrders->count() }}
            </p>
            <span class="text-[11px] text-slate-400 mt-1 block">In 12-step import pipeline</span>
        </div>

        <div class="bg-slate-900 border border-white/10 rounded-2xl p-5 shadow-lg">
            <div class="flex items-center justify-between">
                <span class="text-xs font-bold uppercase tracking-wider text-slate-400">Saved Watchlist</span>
                <div class="w-9 h-9 rounded-xl bg-rose-500/20 text-rose-400 flex items-center justify-center text-sm">
                    <i class="fa-solid fa-heart"></i>
                </div>
            </div>
            <p class="text-2xl sm:text-3xl font-extrabold text-white font-heading mt-3">
                {{ $watchlistCount }}
            </p>
            <span class="text-[11px] text-slate-400 mt-1 block">Vehicles tracked</span>
        </div>
    </div>

    <!-- Active Bids Section -->
    <div class="bg-slate-900 border border-white/10 rounded-2xl overflow-hidden shadow-xl">
        <div class="p-5 sm:p-6 border-b border-white/10 flex items-center justify-between">
            <div>
                <h3 class="text-base font-bold text-white font-heading flex items-center gap-2">
                    <i class="fa-solid fa-gavel text-red-500"></i> Active Authorized Bids
                </h3>
                <p class="text-xs text-slate-400">Bids currently queued, approved by admin, or participating on the Japanese auction floor.</p>
            </div>
            <a href="{{ route('customer.bids.index') }}" class="text-xs font-bold text-red-400 hover:text-red-300">
                View All Bids &rarr;
            </a>
        </div>

        @if($activeBids->count() > 0)
            <div class="overflow-x-auto">
                <table class="w-full text-left text-xs">
                    <thead class="bg-slate-950 text-slate-400 uppercase tracking-wider text-[10px] border-b border-white/10">
                        <tr>
                            <th class="p-4">Vehicle / Lot</th>
                            <th class="p-4">Auction House</th>
                            <th class="p-4">Max Authorized Bid</th>
                            <th class="p-4">Estimated Landed Cost</th>
                            <th class="p-4">Status</th>
                            <th class="p-4 text-right">Action</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-white/5 text-slate-300">
                        @foreach($activeBids as $bid)
                            <tr class="hover:bg-white/5 transition">
                                <td class="p-4">
                                    <div class="flex items-center gap-3">
                                        <div class="w-12 h-10 rounded-lg overflow-hidden bg-slate-800 shrink-0">
                                            @if($bid->auctionVehicle && !empty($bid->auctionVehicle->images))
                                                <img src="{{ $bid->auctionVehicle->images[0] }}" alt="Car" class="w-full h-full object-cover">
                                            @else
                                                <div class="w-full h-full flex items-center justify-center text-slate-600"><i class="fa-solid fa-car"></i></div>
                                            @endif
                                        </div>
                                        <div>
                                            <p class="font-bold text-white">
                                                {{ $bid->auctionVehicle->year ?? '' }} {{ $bid->auctionVehicle->brand ?? 'Toyota' }} {{ $bid->auctionVehicle->model ?? 'Vehicle' }}
                                            </p>
                                            <span class="text-[11px] text-slate-400">Lot #{{ $bid->auctionVehicle->lot_number ?? 'N/A' }} · Grade {{ $bid->auctionVehicle->grade ?? '4.5' }}</span>
                                        </div>
                                    </div>
                                </td>
                                <td class="p-4 text-slate-300 font-medium">
                                    {{ $bid->auctionVehicle->auctionHouse->name ?? 'USS Tokyo' }}
                                </td>
                                <td class="p-4 font-bold text-amber-400">
                                    ¥{{ number_format($bid->max_bid_jpy) }}
                                </td>
                                <td class="p-4 font-bold text-white">
                                    ৳{{ number_format($bid->estimated_landed_cost_bdt) }}
                                </td>
                                <td class="p-4">
                                    @php
                                        $badgeStyles = [
                                            'pending' => 'bg-amber-500/20 text-amber-300 border-amber-500/30',
                                            'approved' => 'bg-blue-500/20 text-blue-300 border-blue-500/30',
                                            'submitted' => 'bg-purple-500/20 text-purple-300 border-purple-500/30',
                                            'bidding' => 'bg-red-500/20 text-red-300 border-red-500/30 animate-pulse',
                                            'won' => 'bg-emerald-500/20 text-emerald-300 border-emerald-500/30',
                                            'lost' => 'bg-slate-700/40 text-slate-400 border-slate-600/30',
                                            'cancelled' => 'bg-rose-500/20 text-rose-300 border-rose-500/30'
                                        ];
                                    @endphp
                                    <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[10px] font-bold uppercase border {{ $badgeStyles[$bid->status] ?? 'bg-slate-800 text-slate-300 border-white/10' }}">
                                        @if($bid->status === 'pending') <i class="fa-solid fa-clock"></i> Admin Review
                                        @elseif($bid->status === 'approved') <i class="fa-solid fa-check"></i> Approved
                                        @elseif($bid->status === 'submitted') <i class="fa-solid fa-paper-plane"></i> Sent to Japan
                                        @elseif($bid->status === 'bidding') <i class="fa-solid fa-satellite-dish"></i> Floor Bidding
                                        @else {{ $bid->status }}
                                        @endif
                                    </span>
                                </td>
                                <td class="p-4 text-right">
                                    <a href="{{ route('customer.bids.show', $bid->id) }}" class="px-3 py-1.5 rounded-lg bg-white/10 hover:bg-white/20 text-white font-bold text-xs transition">
                                        Details
                                    </a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @else
            <div class="p-8 text-center text-slate-400">
                <i class="fa-solid fa-gavel text-3xl mb-2 text-slate-600 block"></i>
                <p class="text-sm font-semibold">You currently have no active bids.</p>
                <p class="text-xs text-slate-500 mt-1">Explore upcoming Japanese lots from USS, TAA, and CAA to place your first authorized bid.</p>
                <a href="{{ route('auction.index') }}" class="inline-block mt-4 px-4 py-2 rounded-xl bg-red-600 hover:bg-red-700 text-white font-bold text-xs transition">
                    Browse Live Japanese Auctions
                </a>
            </div>
        @endif
    </div>

    <!-- Active Orders & Shipments -->
    <div class="bg-slate-900 border border-white/10 rounded-2xl overflow-hidden shadow-xl">
        <div class="p-5 sm:p-6 border-b border-white/10 flex items-center justify-between">
            <div>
                <h3 class="text-base font-bold text-white font-heading flex items-center gap-2">
                    <i class="fa-solid fa-ship text-blue-500"></i> My Vehicle Orders & 12-Step Tracking
                </h3>
                <p class="text-xs text-slate-400">Live shipping status and customs clearance progress.</p>
            </div>
            <a href="{{ route('customer.orders.index') }}" class="text-xs font-bold text-blue-400 hover:text-blue-300">
                View All Orders &rarr;
            </a>
        </div>

        @if($recentOrders->count() > 0)
            <div class="divide-y divide-white/5">
                @foreach($recentOrders as $order)
                    <div class="p-5 sm:p-6 flex flex-col md:flex-row items-start md:items-center justify-between gap-6 hover:bg-white/5 transition">
                        <div class="flex items-center gap-4">
                            <div class="w-14 h-12 rounded-xl overflow-hidden bg-slate-800 shrink-0">
                                @if($order->vehicle && !empty($order->vehicle->images))
                                    <img src="{{ $order->vehicle->images[0] }}" alt="Car" class="w-full h-full object-cover">
                                @elseif($order->auctionVehicle && !empty($order->auctionVehicle->images))
                                    <img src="{{ $order->auctionVehicle->images[0] }}" alt="Car" class="w-full h-full object-cover">
                                @else
                                    <div class="w-full h-full flex items-center justify-center text-slate-600"><i class="fa-solid fa-car text-lg"></i></div>
                                @endif
                            </div>
                            <div>
                                <span class="text-[10px] font-bold uppercase tracking-wider text-red-400">Order #{{ $order->order_number }}</span>
                                <h4 class="text-sm font-bold text-white">
                                    {{ $order->vehicle->title ?? ($order->auctionVehicle->brand . ' ' . $order->auctionVehicle->model) }}
                                </h4>
                                <p class="text-xs text-slate-400">
                                    Chassis: <span class="font-mono text-slate-300">{{ $order->chassis_number ?? 'In Allocation' }}</span> · Total: <span class="font-bold text-white">৳{{ number_format($order->total_landed_cost_bdt) }}</span>
                                </p>
                            </div>
                        </div>

                        <!-- Progress Bar & Current Stage -->
                        <div class="w-full md:w-80">
                            @php
                                $stepNumber = (int) $order->tracking_stage;
                                $percentage = min(100, round(($stepNumber / 12) * 100));
                            @endphp
                            <div class="flex justify-between items-center text-[11px] mb-1.5">
                                <span class="font-bold text-slate-300">Step {{ $stepNumber }} of 12: <span class="text-emerald-400">{{ str_replace('_', ' ', $order->current_status) }}</span></span>
                                <span class="text-slate-400">{{ $percentage }}%</span>
                            </div>
                            <div class="w-full h-2 rounded-full bg-slate-800 overflow-hidden">
                                <div class="bg-gradient-to-r from-red-600 to-emerald-500 h-full transition-all" style="width: {{ $percentage }}%"></div>
                            </div>
                            <span class="text-[10px] text-slate-500 mt-1 block">ETA: {{ $order->estimated_delivery_date ? $order->estimated_delivery_date->format('M d, Y') : 'Processing' }}</span>
                        </div>

                        <div class="shrink-0">
                            <a href="{{ route('customer.orders.show', $order->id) }}" class="px-4 py-2 rounded-xl bg-blue-600 hover:bg-blue-500 text-white font-bold text-xs shadow transition flex items-center gap-1.5">
                                <i class="fa-solid fa-location-crosshairs"></i>
                                <span>Track Journey</span>
                            </a>
                        </div>
                    </div>
                @endforeach
            </div>
        @else
            <div class="p-8 text-center text-slate-400">
                <i class="fa-solid fa-ship text-3xl mb-2 text-slate-600 block"></i>
                <p class="text-sm font-semibold">No confirmed vehicle orders yet.</p>
                <p class="text-xs text-slate-500 mt-1">Once your auction bid is won or you book a ready stock vehicle, live import tracking begins here.</p>
            </div>
        @endif
    </div>

</div>
@endsection