@extends('layouts.customer')

@section('title', 'Bid Authorization Details – MotoSolution Portal')
@section('page_title', 'Bid Authorization #' . $bid->id)

@section('content')
<div class="space-y-8 max-w-6xl">
    
    <!-- Top Back Navigation & Status Banner -->
    <div class="flex items-center justify-between">
        <a href="{{ route('customer.bids.index') }}" class="text-xs font-bold text-slate-400 hover:text-white flex items-center gap-1.5">
            <i class="fa-solid fa-arrow-left"></i>
            <span>Back to All Bids</span>
        </a>
        
        @if($bid->status === 'pending')
            <form method="POST" action="{{ route('customer.bids.cancel', $bid->id) }}" onsubmit="return confirm('Cancel this bid authorization before it is processed by admin?')">
                @csrf
                <button type="submit" class="px-3.5 py-1.5 rounded-xl bg-rose-500/20 hover:bg-rose-500/40 text-rose-300 text-xs font-bold transition border border-rose-500/30 flex items-center gap-1.5">
                    <i class="fa-solid fa-ban"></i>
                    <span>Cancel Authorization</span>
                </button>
            </form>
        @endif
    </div>

    <!-- Won Auction Success Callout -->
    @if($bid->status === 'won' && $bid->order)
        <div class="bg-gradient-to-r from-emerald-950 via-slate-900 to-slate-900 border-2 border-emerald-500/40 rounded-2xl p-6 flex flex-col sm:flex-row items-center justify-between gap-6 shadow-2xl">
            <div class="flex items-center gap-4">
                <div class="w-12 h-12 rounded-2xl bg-emerald-500 text-slate-950 font-extrabold text-xl flex items-center justify-center shrink-0">
                    <i class="fa-solid fa-trophy"></i>
                </div>
                <div>
                    <span class="text-[10px] font-bold uppercase tracking-wider text-emerald-400">Congratulations!</span>
                    <h3 class="text-lg font-extrabold text-white">This vehicle was successfully won at Japanese Auction!</h3>
                    <p class="text-xs text-slate-300 mt-0.5">Order #{{ $bid->order->order_number }} has been generated and import tracking has commenced.</p>
                </div>
            </div>
            <a href="{{ route('customer.orders.show', $bid->order->id) }}" class="px-5 py-2.5 rounded-xl bg-emerald-600 hover:bg-emerald-500 text-white font-bold text-xs shadow-lg transition shrink-0 flex items-center gap-2">
                <i class="fa-solid fa-ship"></i>
                <span>Open Import Tracker</span>
            </a>
        </div>
    @endif

    <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
        
        <!-- Left 7 Cols: Vehicle & Auction Sheet Card -->
        <div class="lg:col-span-7 space-y-6">
            
            <div class="bg-slate-900 border border-white/10 rounded-2xl overflow-hidden shadow-xl">
                <!-- Vehicle Hero Image -->
                <div class="aspect-16/9 bg-slate-950 relative overflow-hidden">
                    @if($bid->auctionVehicle && !empty($bid->auctionVehicle->images))
                        <img src="{{ $bid->auctionVehicle->images[0] }}" alt="Vehicle" class="w-full h-full object-cover">
                    @else
                        <div class="w-full h-full flex items-center justify-center text-slate-700"><i class="fa-solid fa-car text-5xl"></i></div>
                    @endif
                    <div class="absolute top-4 left-4 bg-slate-900/90 border border-white/10 backdrop-blur-md px-3 py-1 rounded-lg text-xs font-bold text-white">
                        Grade {{ $bid->auctionVehicle->grade ?? '4.5' }}
                    </div>
                    <div class="absolute top-4 right-4 bg-red-600 text-white px-3 py-1 rounded-lg text-xs font-bold uppercase">
                        {{ $bid->auctionVehicle->auctionHouse->name ?? 'USS' }}
                    </div>
                </div>

                <div class="p-6">
                    <h2 class="text-xl font-bold text-white font-heading">
                        {{ $bid->auctionVehicle->year ?? '' }} {{ $bid->auctionVehicle->brand ?? 'Toyota' }} {{ $bid->auctionVehicle->model ?? 'Vehicle' }} {{ $bid->auctionVehicle->grade_package ?? '' }}
                    </h2>
                    <p class="text-xs text-slate-400 mt-1">
                        Lot #{{ $bid->auctionVehicle->lot_number }} · Chassis: <span class="font-mono text-slate-300">{{ $bid->auctionVehicle->chassis_number ?? 'Pending' }}</span>
                    </p>

                    <!-- Technical Specs Grid -->
                    <div class="grid grid-cols-2 sm:grid-cols-4 gap-3 mt-5 pt-5 border-t border-white/10 text-xs">
                        <div class="bg-slate-950 p-3 rounded-xl border border-white/5">
                            <span class="text-[10px] text-slate-500 font-bold uppercase block">Mileage</span>
                            <span class="font-bold text-white mt-0.5 block">{{ number_format($bid->auctionVehicle->mileage ?? 0) }} km</span>
                        </div>
                        <div class="bg-slate-950 p-3 rounded-xl border border-white/5">
                            <span class="text-[10px] text-slate-500 font-bold uppercase block">Displacement</span>
                            <span class="font-bold text-white mt-0.5 block">{{ $bid->auctionVehicle->engine_cc ?? 1800 }} cc</span>
                        </div>
                        <div class="bg-slate-950 p-3 rounded-xl border border-white/5">
                            <span class="text-[10px] text-slate-500 font-bold uppercase block">Transmission</span>
                            <span class="font-bold text-white mt-0.5 block">{{ $bid->auctionVehicle->transmission ?? 'Automatic' }}</span>
                        </div>
                        <div class="bg-slate-950 p-3 rounded-xl border border-white/5">
                            <span class="text-[10px] text-slate-500 font-bold uppercase block">Fuel Type</span>
                            <span class="font-bold text-white mt-0.5 block">{{ $bid->auctionVehicle->fuel_type ?? 'Hybrid' }}</span>
                        </div>
                    </div>

                    <!-- Auction Sheet Section -->
                    @if($bid->auctionVehicle && $bid->auctionVehicle->auction_sheet_url)
                        <div class="mt-6 pt-6 border-t border-white/10">
                            <div class="flex items-center justify-between mb-3">
                                <h4 class="text-xs font-bold uppercase tracking-wider text-slate-300 flex items-center gap-2">
                                    <i class="fa-solid fa-file-invoice text-amber-400"></i> Official Auction Sheet
                                </h4>
                                <a href="{{ $bid->auctionVehicle->auction_sheet_url }}" target="_blank" class="text-xs font-bold text-red-400 hover:text-red-300 flex items-center gap-1">
                                    <span>Open Full Screen</span> <i class="fa-solid fa-arrow-up-right-from-square text-[10px]"></i>
                                </a>
                            </div>
                            <div class="rounded-xl overflow-hidden border border-white/10 bg-slate-950 max-h-72">
                                <img src="{{ $bid->auctionVehicle->auction_sheet_url }}" alt="Auction Sheet" class="w-full h-auto object-contain">
                            </div>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Bid History Audit Trail -->
            <div class="bg-slate-900 border border-white/10 rounded-2xl p-6 shadow-xl">
                <h3 class="text-sm font-bold uppercase tracking-wider text-white font-heading border-b border-white/10 pb-3 mb-4 flex items-center gap-2">
                    <i class="fa-solid fa-timeline text-red-500"></i> Bid Activity Log
                </h3>
                <div class="space-y-4">
                    @forelse($bid->history as $history)
                        <div class="flex items-start gap-3 text-xs">
                            <div class="w-2 h-2 rounded-full bg-red-500 mt-1.5 shrink-0"></div>
                            <div class="flex-1">
                                <div class="flex items-center justify-between">
                                    <span class="font-bold text-white">{{ ucwords(str_replace('_', ' ', $history->action)) }}</span>
                                    <span class="text-[10px] text-slate-500">{{ $history->created_at->format('M d, Y h:i A') }}</span>
                                </div>
                                <p class="text-slate-400 text-[11px] mt-0.5">{{ $history->notes ?? 'Status transitioned from ' . $history->from_status . ' to ' . $history->to_status }}</p>
                            </div>
                        </div>
                    @empty
                        <p class="text-xs text-slate-500">No activity logged yet.</p>
                    @endforelse
                </div>
            </div>

        </div>

        <!-- Right 5 Cols: Financial Authorization Card -->
        <div class="lg:col-span-5 space-y-6">
            
            <div class="bg-slate-900 border border-white/10 rounded-2xl p-6 sm:p-7 shadow-xl space-y-5">
                <div class="flex items-center justify-between border-b border-white/10 pb-4">
                    <div>
                        <span class="text-[10px] font-bold uppercase tracking-wider text-slate-400">Authorization Record</span>
                        <h3 class="text-base font-bold text-white font-heading">Bid Financial Summary</h3>
                    </div>
                    @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-3 py-1 rounded-full text-xs font-bold uppercase border {{ $badgeStyles[$bid->status] ?? 'bg-slate-800 text-slate-300' }}">
                        {{ $bid->status }}
                    </span>
                </div>

                <div class="space-y-3 text-xs">
                    <div class="flex justify-between text-slate-400">
                        <span>Starting Auction Price:</span>
                        <span class="font-medium text-slate-200">¥{{ number_format($bid->auctionVehicle->starting_price_jpy ?? 0) }}</span>
                    </div>
                    <div class="flex justify-between text-slate-400">
                        <span>Your Maximum Authorized Bid:</span>
                        <span class="font-bold text-amber-400 text-sm">¥{{ number_format($bid->max_bid_jpy) }}</span>
                    </div>
                    <div class="border-t border-white/10 pt-3 flex justify-between text-slate-400">
                        <span>Estimated Landed Cost (Dhaka):</span>
                        <span class="font-extrabold text-white text-base">৳{{ number_format($bid->estimated_landed_cost_bdt) }}</span>
                    </div>
                    <div class="flex justify-between text-slate-400 text-[11px]">
                        <span>Security Deposit Token:</span>
                        <span class="font-bold text-emerald-400">৳{{ number_format($bid->deposit_amount_bdt ?? 200000) }} ({{ ucfirst($bid->deposit_status ?? 'verified') }})</span>
                    </div>
                </div>

                <div class="p-4 rounded-xl bg-slate-950 border border-white/5 text-xs text-slate-400 space-y-2">
                    <p class="font-bold text-slate-300">How Japanese Auction Bidding Works:</p>
                    <p class="text-[11px] leading-relaxed">
                        1. MotoSolution does not hammer bids with single clicks.<br>
                        2. Our CRM administrators verify your deposit and submit the bid ceiling to the auction floor.<br>
                        3. If hammer falls below your ceiling, the entire difference is credited back to you!
                    </p>
                </div>

                <div class="pt-2">
                    <a href="https://wa.me/{{ config('motosolution.contact.whatsapp') }}?text=Hello%20MotoSolution,%20I%20have%20an%20inquiry%20regarding%20Bid%20%23{{ $bid->id }}" target="_blank" class="w-full flex items-center justify-center gap-2 py-3 rounded-xl bg-emerald-600 hover:bg-emerald-500 text-white font-bold text-xs shadow transition">
                        <i class="fa-brands fa-whatsapp text-sm"></i>
                        <span>Speak With Bidding Specialist</span>
                    </a>
                </div>
            </div>

        </div>

    </div>

</div>
@endsection