@extends('layouts.app')

@section('title', 'Live Vehicle Import & Shipment Tracking | MotoSolution Bangladesh')
@section('meta_description', 'Track your imported Japanese reconditioned vehicle step-by-step from Yokohama/Nagoya ports, Chittagong customs clearance to final Dhaka showroom handover.')

@section('content')
<!-- Header Banner -->
<div class="bg-[#0B0F19] text-white py-14 border-b border-white/10 relative overflow-hidden">
    <div class="absolute top-0 right-0 w-96 h-96 bg-red-600/10 rounded-full blur-3xl pointer-events-none"></div>
    <div class="absolute bottom-0 left-1/4 w-80 h-80 bg-blue-600/10 rounded-full blur-3xl pointer-events-none"></div>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center max-w-3xl mx-auto">
        <div class="inline-flex items-center gap-2 px-3.5 py-1 rounded-full bg-red-600/20 text-red-400 text-xs font-bold mb-3 border border-red-500/30">
            <span class="w-2 h-2 rounded-full bg-red-500 animate-pulse"></span>
            <span>12-Step Japan to Bangladesh Import Tracker</span>
        </div>
        <h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold font-heading text-white tracking-tight">
            Live Shipment & Order Tracking
        </h1>
        <p class="text-slate-400 text-sm sm:text-base mt-2 leading-relaxed">
            Enter your 10-digit MotoSolution Order Tracking Number (e.g. <span class="text-white font-mono font-semibold">MS-ORD-2026-XXXXX</span>) to view real-time shipping vessel, port status, and customs progress.
        </p>

        <!-- Search Box -->
        <form method="GET" action="{{ route('track') }}" class="mt-8 max-w-xl mx-auto flex items-center gap-2 bg-white/10 backdrop-blur-xl p-2 rounded-2xl border border-white/15 shadow-2xl">
            <div class="relative flex-1">
                <i class="fa-solid fa-magnifying-glass absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 text-sm"></i>
                <input type="text" name="order_number" value="{{ $orderNumber ?? '' }}" placeholder="Enter Order # (e.g. MS-ORD-2026-...)" required class="w-full pl-11 pr-4 py-3 bg-transparent text-white text-sm placeholder:text-slate-400 focus:outline-none font-mono">
            </div>
            <button type="submit" class="px-6 py-3 bg-red-600 hover:bg-red-700 text-white text-xs sm:text-sm font-bold rounded-xl shadow-lg shadow-red-900/30 transition hover:-translate-y-0.5 shrink-0 flex items-center gap-2">
                <span>Track</span>
                <i class="fa-solid fa-arrow-right text-xs"></i>
            </button>
        </form>
    </div>
</div>

<!-- Main Tracking Content -->
<section class="py-12 lg:py-16 bg-slate-50 min-h-[500px]">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        @if(!empty($order))
            <!-- Order Details Overview Card -->
            <div class="bg-white rounded-3xl p-6 sm:p-8 border border-slate-200 shadow-sm mb-10">
                <div class="flex flex-col lg:flex-row lg:items-center justify-between gap-6 pb-6 border-b border-slate-100">
                    <div>
                        <div class="flex items-center gap-3">
                            <span class="text-xs font-mono font-bold bg-slate-900 text-white px-3 py-1 rounded-lg">
                                {{ $order->order_number }}
                            </span>
                            <span class="text-xs font-bold px-3 py-1 rounded-lg bg-emerald-50 text-emerald-700 border border-emerald-200 uppercase">
                                {{ str_replace('_', ' ', $order->status) }}
                            </span>
                        </div>
                        <h2 class="text-2xl font-extrabold text-slate-900 mt-2 font-heading">
                            {{ $order->vehicle?->full_name ?? ($order->auctionVehicle?->full_name ?? 'Imported Vehicle') }}
                        </h2>
                        <p class="text-xs text-slate-500 mt-0.5">
                            Port of Loading: <span class="font-semibold text-slate-700">{{ $order->port_of_loading ?? 'Yokohama Port, Japan' }}</span> • Port of Discharge: <span class="font-semibold text-slate-700">{{ $order->port_of_discharge ?? 'Chittagong Port, Bangladesh' }}</span>
                        </p>
                    </div>

                    <div class="grid grid-cols-2 sm:grid-cols-3 gap-4 text-xs">
                        <div class="bg-slate-50 p-3.5 rounded-2xl border border-slate-100">
                            <span class="text-slate-400 block font-medium">Vessel Name</span>
                            <span class="font-bold text-slate-900 text-sm mt-0.5 block truncate">{{ $order->vessel_name ?? 'Pending Allocation' }}</span>
                        </div>
                        <div class="bg-slate-50 p-3.5 rounded-2xl border border-slate-100">
                            <span class="text-slate-400 block font-medium">B/L Number</span>
                            <span class="font-mono font-bold text-slate-900 text-sm mt-0.5 block truncate">{{ $order->bl_number ?? 'In Processing' }}</span>
                        </div>
                        <div class="bg-slate-50 p-3.5 rounded-2xl border border-slate-100 col-span-2 sm:col-span-1">
                            <span class="text-slate-400 block font-medium">Est. Chittagong ETA</span>
                            <span class="font-bold text-red-600 text-sm mt-0.5 block">{{ $order->eta_chittagong ? \Carbon\Carbon::parse($order->eta_chittagong)->format('M d, Y') : 'Scheduled' }}</span>
                        </div>
                    </div>
                </div>

                <!-- 12-Step Progress Timeline -->
                <div class="pt-8">
                    <h3 class="text-sm font-bold text-slate-900 uppercase tracking-wider mb-6 flex items-center gap-2">
                        <i class="fa-solid fa-route text-red-600"></i>
                        <span>Import Lifecycle Timeline</span>
                    </h3>

                    @php
                        $steps = [
                            ['key' => 'auction_won', 'title' => 'Auction Won', 'desc' => 'Vehicle secured at Japan auction floor'],
                            ['key' => 'yard_received', 'title' => 'Japan Yard Storage', 'desc' => 'Transported to Yokohama/Nagoya export yard'],
                            ['key' => 'inspection_passed', 'title' => 'JAAI Inspection', 'desc' => 'Export compliance & radiation certification'],
                            ['key' => 'export_cert_issued', 'title' => 'Export Certificate', 'desc' => 'Original Japanese deregistration issued'],
                            ['key' => 'vessel_booked', 'title' => 'Vessel Booked', 'desc' => 'RoRo shipping container confirmed'],
                            ['key' => 'loaded_on_vessel', 'title' => 'Loaded on Vessel', 'desc' => 'Departed Japan Port (ETD recorded)'],
                            ['key' => 'in_transit_sea', 'title' => 'In Ocean Transit', 'desc' => 'Voyage en-route to Bay of Bengal'],
                            ['key' => 'arrived_chittagong', 'title' => 'Arrived Chittagong', 'desc' => 'Berthing & IGM submission at CPA'],
                            ['key' => 'customs_assessment', 'title' => 'Customs Assessment', 'desc' => 'Bill of Entry & duty assessment by NBR'],
                            ['key' => 'customs_cleared', 'title' => 'Customs Cleared', 'desc' => 'Duty paid & port release gate pass issued'],
                            ['key' => 'transport_to_dhaka', 'title' => 'Transit to Dhaka', 'desc' => 'Dedicated vehicle carrier transport'],
                            ['key' => 'delivered', 'title' => 'Showroom Delivery', 'desc' => 'Final handover, BRTA & detailing ready'],
                        ];
                        $currentIndex = $order->current_step_index ?? 0;
                    @endphp

                    <div class="relative">
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                            @foreach($steps as $idx => $step)
                                @php
                                    $isPassed = $idx <= $currentIndex;
                                    $isCurrent = $idx === $currentIndex;
                                @endphp
                                <div class="p-4 rounded-2xl border transition {{ $isCurrent ? 'bg-red-50/70 border-red-500 shadow-md ring-1 ring-red-500' : ($isPassed ? 'bg-emerald-50/40 border-emerald-200' : 'bg-white border-slate-200 opacity-60') }}">
                                    <div class="flex items-center justify-between mb-2">
                                        <div class="flex items-center gap-2">
                                            <div class="w-6 h-6 rounded-full flex items-center justify-center text-xs font-black {{ $isCurrent ? 'bg-red-600 text-white' : ($isPassed ? 'bg-emerald-600 text-white' : 'bg-slate-200 text-slate-600') }}">
                                                @if($isPassed && !$isCurrent)
                                                    <i class="fa-solid fa-check text-[10px]"></i>
                                                @else
                                                    {{ $idx + 1 }}
                                                @endif
                                            </div>
                                            <span class="text-xs font-bold {{ $isCurrent ? 'text-red-700' : ($isPassed ? 'text-emerald-900' : 'text-slate-700') }}">
                                                {{ $step['title'] }}
                                            </span>
                                        </div>
                                        @if($isCurrent)
                                            <span class="text-[9px] uppercase font-extrabold bg-red-600 text-white px-2 py-0.5 rounded-full animate-pulse">
                                                Active
                                            </span>
                                        @elseif($isPassed)
                                            <span class="text-[9px] uppercase font-bold text-emerald-700">
                                                Done
                                            </span>
                                        @endif
                                    </div>
                                    <p class="text-[11px] text-slate-500 leading-relaxed pl-8">
                                        {{ $step['desc'] }}
                                    </p>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        @elseif($orderNumber)
            <div class="bg-white rounded-3xl p-12 text-center border border-slate-200 max-w-xl mx-auto">
                <div class="w-16 h-16 rounded-full bg-red-50 text-red-500 flex items-center justify-center text-2xl mx-auto mb-4">
                    <i class="fa-solid fa-magnifying-glass"></i>
                </div>
                <h3 class="text-lg font-bold text-slate-900 font-heading">Order Not Found</h3>
                <p class="text-xs text-slate-500 mt-1 max-w-sm mx-auto leading-relaxed">
                    We could not find an active import order matching <span class="font-mono font-bold text-slate-800">{{ $orderNumber }}</span>. Please double-check your order number on your booking receipt.
                </p>
                <div class="mt-6 flex justify-center gap-3">
                    <a href="{{ route('track') }}" class="px-5 py-2.5 bg-slate-900 text-white text-xs font-bold rounded-xl hover:bg-slate-800 transition">
                        Try Another Number
                    </a>
                    <a href="{{ route('contact') }}" class="px-5 py-2.5 bg-white text-slate-700 border border-slate-200 text-xs font-bold rounded-xl hover:bg-slate-50 transition">
                        Contact Support
                    </a>
                </div>
            </div>
        @else
            <!-- How to Track Guidance Cards -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="bg-white p-8 rounded-3xl border border-slate-200 shadow-sm space-y-3">
                    <div class="w-12 h-12 rounded-2xl bg-red-50 text-red-600 flex items-center justify-center text-xl font-bold">
                        1
                    </div>
                    <h3 class="text-base font-bold text-slate-900 font-heading">Locate Your Order Code</h3>
                    <p class="text-xs text-slate-500 leading-relaxed">
                        Find your 10-digit booking reference on your official MotoSolution invoice or customer portal dashboard.
                    </p>
                </div>
                <div class="bg-white p-8 rounded-3xl border border-slate-200 shadow-sm space-y-3">
                    <div class="w-12 h-12 rounded-2xl bg-blue-50 text-blue-600 flex items-center justify-center text-xl font-bold">
                        2
                    </div>
                    <h3 class="text-base font-bold text-slate-900 font-heading">Real-Time Port Sync</h3>
                    <p class="text-xs text-slate-500 leading-relaxed">
                        Monitor vessel departure, live AIS ocean positioning, and ETA arrival at Chittagong Port berth.
                    </p>
                </div>
                <div class="bg-white p-8 rounded-3xl border border-slate-200 shadow-sm space-y-3">
                    <div class="w-12 h-12 rounded-2xl bg-emerald-50 text-emerald-600 flex items-center justify-center text-xl font-bold">
                        3
                    </div>
                    <h3 class="text-base font-bold text-slate-900 font-heading">Customs & Delivery</h3>
                    <p class="text-xs text-slate-500 leading-relaxed">
                        Track automated NBR customs duty clearance, carrier transport from Chittagong, and showroom delivery appointment.
                    </p>
                </div>
            </div>
        @endif
    </div>
</section>
@endsection