@extends('layouts.admin')

@section('title', 'Admin CRM Dashboard – MotoSolution Bangladesh')
@section('page_title', 'Automotive Management Console')

@section('content')
<div class="space-y-8">
    
    <!-- Action Required Alert Banner if Pending Bids exist -->
    @if($pendingBids > 0)
        <div class="bg-gradient-to-r from-amber-950/60 to-slate-900 border-2 border-amber-500/50 rounded-2xl p-5 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 shadow-xl">
            <div class="flex items-center gap-3.5">
                <div class="w-10 h-10 rounded-xl bg-amber-500 text-slate-950 font-bold flex items-center justify-center text-lg shrink-0 animate-bounce">
                    <i class="fa-solid fa-gavel"></i>
                </div>
                <div>
                    <h3 class="text-sm font-bold text-white">{{ $pendingBids }} Customer Bid Authorizations Awaiting Verification</h3>
                    <p class="text-xs text-slate-400">Clients have authorized max bid ceilings in JPY. Verify deposit and dispatch to Japan floor API.</p>
                </div>
            </div>
            <a href="{{ route('admin.bids.index', ['status' => 'pending']) }}" class="px-4 py-2 rounded-xl bg-amber-500 hover:bg-amber-400 text-slate-950 font-bold text-xs shadow transition shrink-0">
                Review Pending Bids &rarr;
            </a>
        </div>
    @endif

    <!-- Top KPI Metrics Grid -->
    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4">
        
        <!-- Pending Bids -->
        <div class="bg-slate-900 border border-white/10 rounded-xl p-4 shadow-md">
            <div class="flex items-center justify-between">
                <span class="text-[10px] font-bold uppercase tracking-wider text-slate-400">Pending Bids</span>
                <i class="fa-solid fa-clock text-amber-400 text-sm"></i>
            </div>
            <p class="text-2xl font-extrabold text-amber-400 font-heading mt-2">{{ $pendingBids }}</p>
            <span class="text-[10px] text-slate-500 mt-0.5 block">Needs review</span>
        </div>

        <!-- Won Auctions -->
        <div class="bg-slate-900 border border-white/10 rounded-xl p-4 shadow-md">
            <div class="flex items-center justify-between">
                <span class="text-[10px] font-bold uppercase tracking-wider text-slate-400">Won Auctions</span>
                <i class="fa-solid fa-trophy text-emerald-400 text-sm"></i>
            </div>
            <p class="text-2xl font-extrabold text-emerald-400 font-heading mt-2">{{ $wonAuctions }}</p>
            <span class="text-[10px] text-slate-500 mt-0.5 block">Hammered</span>
        </div>

        <!-- Active Japan Lots -->
        <div class="bg-slate-900 border border-white/10 rounded-xl p-4 shadow-md">
            <div class="flex items-center justify-between">
                <span class="text-[10px] font-bold uppercase tracking-wider text-slate-400">Live Auctions</span>
                <i class="fa-solid fa-satellite-dish text-blue-400 text-sm"></i>
            </div>
            <p class="text-2xl font-extrabold text-white font-heading mt-2">{{ $activeAuctions }}</p>
            <span class="text-[10px] text-slate-500 mt-0.5 block">Across 6 houses</span>
        </div>

        <!-- Ready Stock Vehicles -->
        <div class="bg-slate-900 border border-white/10 rounded-xl p-4 shadow-md">
            <div class="flex items-center justify-between">
                <span class="text-[10px] font-bold uppercase tracking-wider text-slate-400">Ready Stock</span>
                <i class="fa-solid fa-car text-red-400 text-sm"></i>
            </div>
            <p class="text-2xl font-extrabold text-white font-heading mt-2">{{ $readyStockCount }}</p>
            <span class="text-[10px] text-slate-500 mt-0.5 block">In Dhaka showroom</span>
        </div>

        <!-- Active Orders -->
        <div class="bg-slate-900 border border-white/10 rounded-xl p-4 shadow-md">
            <div class="flex items-center justify-between">
                <span class="text-[10px] font-bold uppercase tracking-wider text-slate-400">Import Orders</span>
                <i class="fa-solid fa-ship text-teal-400 text-sm"></i>
            </div>
            <p class="text-2xl font-extrabold text-white font-heading mt-2">{{ $totalOrders }}</p>
            <span class="text-[10px] text-slate-500 mt-0.5 block">12-step pipeline</span>
        </div>

        <!-- New Inquiries -->
        <div class="bg-slate-900 border border-white/10 rounded-xl p-4 shadow-md">
            <div class="flex items-center justify-between">
                <span class="text-[10px] font-bold uppercase tracking-wider text-slate-400">New Leads</span>
                <i class="fa-solid fa-funnel-dollar text-purple-400 text-sm"></i>
            </div>
            <p class="text-2xl font-extrabold text-purple-400 font-heading mt-2">{{ $newLeadsCount }}</p>
            <span class="text-[10px] text-slate-500 mt-0.5 block">Uncontacted</span>
        </div>

    </div>

    <!-- Financial Revenue Summary Banner -->
    <div class="bg-gradient-to-r from-slate-900 via-slate-900 to-[#1b1424] border border-white/10 rounded-2xl p-6 shadow-xl">
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-6">
            <div>
                <span class="text-xs font-bold uppercase tracking-wider text-slate-400 block">Total Pipeline Value</span>
                <p class="text-2xl sm:text-3xl font-extrabold text-white font-heading mt-1">৳{{ number_format($totalRevenueBdt) }}</p>
                <span class="text-xs text-slate-500">Gross landed value of active vehicle orders</span>
            </div>
            <div class="border-t sm:border-t-0 sm:border-l border-white/10 pt-4 sm:pt-0 sm:pl-6">
                <span class="text-xs font-bold uppercase tracking-wider text-emerald-400 block">Verified Collections</span>
                <p class="text-2xl sm:text-3xl font-extrabold text-emerald-400 font-heading mt-1">৳{{ number_format($totalPaidBdt) }}</p>
                <span class="text-xs text-slate-500">Credited to MotoSolution corporate bank</span>
            </div>
            <div class="border-t sm:border-t-0 sm:border-l border-white/10 pt-4 sm:pt-0 sm:pl-6">
                <span class="text-xs font-bold uppercase tracking-wider text-amber-400 block">Outstanding Balance</span>
                <p class="text-2xl sm:text-3xl font-extrabold text-amber-400 font-heading mt-1">৳{{ number_format($pendingPaymentsBdt) }}</p>
                <span class="text-xs text-slate-500">Scheduled on Chittagong & delivery milestones</span>
            </div>
        </div>
    </div>

    <!-- Pending Bids Action Console -->
    <div class="bg-slate-900 border border-white/10 rounded-2xl overflow-hidden shadow-xl">
        <div class="p-5 border-b border-white/10 flex items-center justify-between">
            <h3 class="text-sm font-bold text-white font-heading flex items-center gap-2">
                <i class="fa-solid fa-gavel text-red-500"></i> Bids Requiring Staff Review
            </h3>
            <a href="{{ route('admin.bids.index') }}" class="text-xs font-bold text-red-400 hover:text-red-300">
                All Bids CRM &rarr;
            </a>
        </div>

        @if($pendingBidsList->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">Customer</th>
                            <th class="p-4">Vehicle / Lot</th>
                            <th class="p-4">Auction House</th>
                            <th class="p-4">Max Bid JPY</th>
                            <th class="p-4">Landed BDT (Est)</th>
                            <th class="p-4 text-right">Review Action</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-white/5 text-slate-300">
                        @foreach($pendingBidsList as $bid)
                            <tr class="hover:bg-white/5 transition">
                                <td class="p-4">
                                    <p class="font-bold text-white">{{ $bid->user->name ?? 'Customer' }}</p>
                                    <span class="text-[11px] text-slate-400">{{ $bid->user->phone ?? '' }}</span>
                                </td>
                                <td class="p-4">
                                    <p class="font-bold text-white">{{ $bid->auctionVehicle->brand ?? '' }} {{ $bid->auctionVehicle->model ?? '' }}</p>
                                    <span class="text-[11px] text-slate-400">Lot #{{ $bid->auctionVehicle->lot_number }} · Grade {{ $bid->auctionVehicle->grade ?? '4.5' }}</span>
                                </td>
                                <td class="p-4 font-medium text-slate-300">
                                    {{ $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 text-right">
                                    <a href="{{ route('admin.bids.show', $bid->id) }}" class="px-3 py-1.5 rounded-lg bg-red-600 hover:bg-red-700 text-white font-bold transition inline-flex items-center gap-1.5">
                                        <span>Review & Dispatch</span>
                                        <i class="fa-solid fa-arrow-right text-[10px]"></i>
                                    </a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @else
            <div class="p-8 text-center text-slate-400 text-xs">
                <i class="fa-solid fa-circle-check text-2xl text-emerald-400 mb-2 block"></i>
                All client bid authorizations have been reviewed and dispatched!
            </div>
        @endif
    </div>

    <!-- Recent Import Orders -->
    <div class="bg-slate-900 border border-white/10 rounded-2xl overflow-hidden shadow-xl">
        <div class="p-5 border-b border-white/10 flex items-center justify-between">
            <h3 class="text-sm font-bold text-white font-heading flex items-center gap-2">
                <i class="fa-solid fa-ship text-blue-400"></i> Active Import Logistics Orders
            </h3>
            <a href="{{ route('admin.orders.index') }}" class="text-xs font-bold text-blue-400 hover:text-blue-300">
                All Orders &rarr;
            </a>
        </div>

        <div class="divide-y divide-white/5">
            @foreach($recentOrders as $order)
                <div class="p-4 sm:p-5 flex flex-col md:flex-row items-start md:items-center justify-between gap-4 hover:bg-white/5 transition text-xs">
                    <div class="flex items-center gap-4">
                        <div class="w-12 h-10 rounded-lg overflow-hidden bg-slate-800 shrink-0">
                            <img src="{{ $order->car_image }}" alt="Car" class="w-full h-full object-cover">
                        </div>
                        <div>
                            <div class="flex items-center gap-2">
                                <span class="text-xs font-bold text-white">#{{ $order->order_number }}</span>
                                <span class="text-slate-400">({{ $order->user->name ?? 'Client' }})</span>
                            </div>
                            <p class="text-slate-300 mt-0.5">{{ $order->car_title }}</p>
                            <span class="text-[10px] text-slate-500 font-mono">B/L: {{ $order->bl_number ?? 'Pending' }}</span>
                        </div>
                    </div>

                    <div class="flex items-center gap-4">
                        <div class="text-right">
                            <span class="font-bold text-emerald-400 uppercase text-[10px] block">{{ str_replace('_', ' ', $order->status) }}</span>
                            <span class="text-slate-400">Paid: ৳{{ number_format($order->paid_amount_bdt) }} / ৳{{ number_format($order->total_amount_bdt) }}</span>
                        </div>
                        <a href="{{ route('admin.orders.show', $order->id) }}" class="px-3 py-1.5 rounded-lg bg-white/10 hover:bg-white/20 text-white font-bold transition">
                            Manage
                        </a>
                    </div>
                </div>
            @endforeach
        </div>
    </div>

</div>
@endsection