@extends('layouts.customer')

@section('title', 'My Authorized Bids – Customer Portal')
@section('page_title', 'My Authorized Bids')

@section('content')
<div class="space-y-6">
    
    <!-- Header & Filter Tabs -->
    <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">Japan Auction Bidding History</h2>
            <p class="text-xs text-slate-400">All vehicle bid authorizations placed through your MotoSolution account.</p>
        </div>
        <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 transition inline-flex items-center gap-2 self-start">
            <i class="fa-solid fa-plus"></i>
            <span>Browse New Lots</span>
        </a>
    </div>

    <!-- Status Filters -->
    <div class="flex flex-wrap gap-2 text-xs">
        <a href="{{ route('customer.bids.index') }}" class="px-3.5 py-1.5 rounded-xl font-medium transition {{ !request('status') ? 'bg-red-600 text-white font-bold' : 'bg-slate-900 text-slate-400 hover:bg-white/5 hover:text-white' }}">
            All Bids
        </a>
        <a href="{{ route('customer.bids.index', ['status' => 'pending']) }}" class="px-3.5 py-1.5 rounded-xl font-medium transition {{ request('status') === 'pending' ? 'bg-amber-600 text-white font-bold' : 'bg-slate-900 text-slate-400 hover:bg-white/5 hover:text-white' }}">
            Pending Review
        </a>
        <a href="{{ route('customer.bids.index', ['status' => 'approved']) }}" class="px-3.5 py-1.5 rounded-xl font-medium transition {{ request('status') === 'approved' ? 'bg-blue-600 text-white font-bold' : 'bg-slate-900 text-slate-400 hover:bg-white/5 hover:text-white' }}">
            Approved by Admin
        </a>
        <a href="{{ route('customer.bids.index', ['status' => 'submitted']) }}" class="px-3.5 py-1.5 rounded-xl font-medium transition {{ request('status') === 'submitted' ? 'bg-purple-600 text-white font-bold' : 'bg-slate-900 text-slate-400 hover:bg-white/5 hover:text-white' }}">
            Sent to Japan Floor
        </a>
        <a href="{{ route('customer.bids.index', ['status' => 'won']) }}" class="px-3.5 py-1.5 rounded-xl font-medium transition {{ request('status') === 'won' ? 'bg-emerald-600 text-white font-bold' : 'bg-slate-900 text-slate-400 hover:bg-white/5 hover:text-white' }}">
            Won Auctions
        </a>
        <a href="{{ route('customer.bids.index', ['status' => 'lost']) }}" class="px-3.5 py-1.5 rounded-xl font-medium transition {{ request('status') === 'lost' ? 'bg-slate-700 text-white font-bold' : 'bg-slate-900 text-slate-400 hover:bg-white/5 hover:text-white' }}">
            Outbid / Lost
        </a>
    </div>

    <!-- Bids Table -->
    <div class="bg-slate-900 border border-white/10 rounded-2xl overflow-hidden shadow-xl">
        @if($bids->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 Number</th>
                            <th class="p-4">Auction House</th>
                            <th class="p-4">Max Authorized Bid</th>
                            <th class="p-4">Landed Cost (Est)</th>
                            <th class="p-4">Status</th>
                            <th class="p-4">Authorization Date</th>
                            <th class="p-4 text-right">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-white/5 text-slate-300">
                        @foreach($bids 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>
                                            <a href="{{ route('customer.bids.show', $bid->id) }}" class="font-bold text-white hover:text-red-400 transition">
                                                {{ $bid->auctionVehicle->year ?? '' }} {{ $bid->auctionVehicle->brand ?? 'Toyota' }} {{ $bid->auctionVehicle->model ?? 'Vehicle' }}
                                            </a>
                                            <span class="text-[11px] text-slate-400 block">Lot #{{ $bid->auctionVehicle->lot_number ?? 'N/A' }} · Grade {{ $bid->auctionVehicle->grade ?? '4.5' }}</span>
                                        </div>
                                    </div>
                                </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">
                                    @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
                                        @elseif($bid->status === 'won') <i class="fa-solid fa-trophy"></i> Won
                                        @elseif($bid->status === 'lost') <i class="fa-solid fa-xmark"></i> Outbid
                                        @elseif($bid->status === 'cancelled') <i class="fa-solid fa-ban"></i> Cancelled
                                        @else {{ $bid->status }}
                                        @endif
                                    </span>
                                </td>
                                <td class="p-4 text-slate-400">
                                    {{ $bid->created_at->format('M d, Y h:i A') }}
                                </td>
                                <td class="p-4 text-right">
                                    <div class="flex items-center justify-end gap-2">
                                        <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 transition">
                                            Details
                                        </a>
                                        @if($bid->status === 'pending')
                                            <form method="POST" action="{{ route('customer.bids.cancel', $bid->id) }}" onsubmit="return confirm('Are you sure you want to cancel this bid authorization?')">
                                                @csrf
                                                <button type="submit" class="px-3 py-1.5 rounded-lg bg-rose-500/20 hover:bg-rose-500/40 text-rose-300 font-bold transition border border-rose-500/30">
                                                    Cancel
                                                </button>
                                            </form>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <div class="p-4 border-t border-white/10">
                {{ $bids->links() }}
            </div>
        @else
            <div class="p-12 text-center text-slate-400">
                <i class="fa-solid fa-gavel text-4xl mb-3 text-slate-600 block"></i>
                <p class="text-base font-bold text-white">No bids matching this criteria.</p>
                <p class="text-xs text-slate-500 mt-1">Browse upcoming Japanese lots to place your maximum bid authorization.</p>
            </div>
        @endif
    </div>

</div>
@endsection