@extends('layouts.customer')

@section('title', 'My Vehicle Orders & Tracking – Customer Portal')
@section('page_title', 'My Orders & Import Tracking')

@section('content')
<div class="space-y-6">
    
    <div>
        <h2 class="text-xl font-bold text-white font-heading">Vehicle Import & Delivery Orders</h2>
        <p class="text-xs text-slate-400">Track the end-to-end 12-step importation process from Japan to Dhaka.</p>
    </div>

    @if($orders->count() > 0)
        <div class="space-y-4">
            @foreach($orders as $order)
                @php
                    $stepIndex = $order->current_step_index;
                    $percent = min(100, round((($stepIndex + 1) / 12) * 100));
                    $steps = \App\Models\Order::trackingSteps();
                    $stepInfo = $steps[$order->status] ?? ['title' => ucwords(str_replace('_', ' ', $order->status)), 'desc' => ''];
                @endphp

                <div class="bg-slate-900 border border-white/10 rounded-2xl p-6 hover:border-red-500/40 transition shadow-xl space-y-6">
                    <div class="flex flex-col md:flex-row items-start md:items-center justify-between gap-4 border-b border-white/10 pb-5">
                        <div class="flex items-center gap-4">
                            <div class="w-16 h-14 rounded-xl 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 uppercase tracking-wider text-red-400">Order #{{ $order->order_number }}</span>
                                    <span class="text-[10px] bg-white/10 text-slate-300 font-semibold px-2 py-0.5 rounded-full uppercase">{{ $order->order_type }}</span>
                                </div>
                                <h3 class="text-base font-bold text-white font-heading mt-0.5">
                                    {{ $order->car_title }}
                                </h3>
                                <p class="text-xs text-slate-400">
                                    Chassis: <span class="font-mono text-slate-200">{{ $order->chassis_number ?? 'In Allocation' }}</span>
                                </p>
                            </div>
                        </div>

                        <div class="flex items-center gap-3 self-end md:self-auto">
                            <div class="text-right hidden sm:block">
                                <span class="text-[10px] text-slate-400 font-bold uppercase block">Total Landed Cost</span>
                                <span class="text-base font-extrabold text-white">৳{{ number_format($order->total_amount_bdt) }}</span>
                            </div>
                            <a href="{{ route('customer.orders.show', $order->id) }}" class="px-4 py-2 rounded-xl bg-red-600 hover:bg-red-700 text-white font-bold text-xs shadow-lg transition flex items-center gap-1.5">
                                <i class="fa-solid fa-location-dot"></i>
                                <span>Track Details</span>
                            </a>
                        </div>
                    </div>

                    <!-- 12-Step Progress Indicator -->
                    <div>
                        <div class="flex items-center justify-between text-xs mb-2">
                            <span class="font-bold text-slate-200">
                                Current Milestone: <span class="text-emerald-400">{{ $stepInfo['title'] }}</span> (Step {{ $stepIndex + 1 }} of 12)
                            </span>
                            <span class="font-extrabold text-slate-400">{{ $percent }}% Completed</span>
                        </div>
                        <div class="w-full h-2.5 rounded-full bg-slate-950 overflow-hidden border border-white/5">
                            <div class="bg-gradient-to-r from-red-600 via-amber-500 to-emerald-500 h-full transition-all duration-500" style="width: {{ $percent }}%"></div>
                        </div>
                        <p class="text-[11px] text-slate-400 mt-1.5">{{ $stepInfo['desc'] }}</p>
                    </div>

                    <!-- Vessel / Shipping Highlights -->
                    <div class="grid grid-cols-2 sm:grid-cols-4 gap-3 pt-4 border-t border-white/5 text-xs">
                        <div class="bg-slate-950 p-3 rounded-xl border border-white/5">
                            <span class="text-[10px] text-slate-500 font-bold block uppercase">Vessel Name</span>
                            <span class="font-bold text-white mt-0.5 block truncate">{{ $order->vessel_name ?? 'Pending Allocation' }}</span>
                        </div>
                        <div class="bg-slate-950 p-3 rounded-xl border border-white/5">
                            <span class="text-[10px] text-slate-500 font-bold block uppercase">B/L Number</span>
                            <span class="font-mono text-slate-300 mt-0.5 block truncate">{{ $order->bl_number ?? 'In Issuance' }}</span>
                        </div>
                        <div class="bg-slate-950 p-3 rounded-xl border border-white/5">
                            <span class="text-[10px] text-slate-500 font-bold block uppercase">ETA Chittagong</span>
                            <span class="font-bold text-amber-400 mt-0.5 block">{{ $order->eta_chittagong ? $order->eta_chittagong->format('M d, Y') : 'Estimating' }}</span>
                        </div>
                        <div class="bg-slate-950 p-3 rounded-xl border border-white/5">
                            <span class="text-[10px] text-slate-500 font-bold block uppercase">Payment Status</span>
                            <span class="font-bold text-emerald-400 mt-0.5 block">Paid: ৳{{ number_format($order->paid_amount_bdt) }}</span>
                        </div>
                    </div>
                </div>
            @endforeach

            <div class="p-4">
                {{ $orders->links() }}
            </div>
        </div>
    @else
        <div class="bg-slate-900 border border-white/10 rounded-2xl p-12 text-center text-slate-400">
            <i class="fa-solid fa-ship text-4xl mb-3 text-slate-600 block"></i>
            <p class="text-base font-bold text-white">No active orders found.</p>
            <p class="text-xs text-slate-500 mt-1">When an auction bid is hammered or you purchase from showroom stock, your order pipeline appears here.</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 Japan Live Auctions
            </a>
        </div>
    @endif

</div>
@endsection