{{-- resources/views/tracking/result.blade.php --}}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tracking Result</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 min-h-screen px-4 py-10">

@php
    $statuses = [
        'received' => [
            'label' => 'Received',
            'icon'  => 'arrow-down-tray',
        ],
        'departed' => [
            'label' => 'Departed',
            'icon'  => 'paper-airplane',
        ],
        'in_transit' => [
            'label' => 'In Transit',
            'icon'  => 'truck',
        ],
        'arrived' => [
            'label' => 'Arrived',
            'icon'  => 'flag',
        ],
        'customs_clearance' => [
            'label' => 'Customs Clearance',
            'icon'  => 'shield-check',
        ],
        'ready_for_pickup' => [
            'label' => 'Ready for Pickup',
            'icon'  => 'inbox-arrow-down',
        ],
        'delivered' => [
            'label' => 'Delivered',
            'icon'  => 'check-circle',
        ],
    ];
    $statusKeys = array_keys($statuses);
    $currentIndex = array_search($consignment->status, $statusKeys);
@endphp

<div class="max-w-2xl mx-auto">

    {{-- Back --}}
    <a href="{{ route('track.index') }}"
       class="text-sm text-blue-600 hover:underline mb-4 inline-block">
        ← Track another shipment
    </a>

    {{-- Header card --}}
    <div class="bg-white rounded-2xl shadow-sm border p-6 mb-4">
        <div class="flex items-start justify-between">
            <div>
                <p class="text-xs text-gray-400 uppercase tracking-wide">Tracking Code</p>
                <p class="text-xl font-bold text-gray-800 mt-1">
                    {{ $consignment->tracking_code }}
                </p>
            </div>
            <span class="text-xs font-semibold px-3 py-1 rounded-full
                {{ $consignment->shipment->type === 'air'
                    ? 'bg-blue-100 text-blue-700'
                    : 'bg-amber-100 text-amber-700' }}">
                {{ strtoupper($consignment->shipment->type) }} FREIGHT
            </span>
        </div>

        <div class="grid grid-cols-2 gap-4 mt-5 text-sm">
            <div>
                <p class="text-gray-400 text-xs">Consignee</p>
                <p class="font-medium text-gray-800">{{ $consignment->customer_name }}</p>
            </div>
            <div>
                <p class="text-gray-400 text-xs">Description</p>
                <p class="font-medium text-gray-800">{{ $consignment->description }}</p>
            </div>
            <div>
                <p class="text-gray-400 text-xs">Cartons</p>
                <p class="font-medium text-gray-800">{{ $consignment->ctns }}</p>
            </div>
            <div>
                <p class="text-gray-400 text-xs">CBM</p>
                <p class="font-medium text-gray-800">{{ $consignment->cbm }}</p>
            </div>
            @if($consignment->actual_weight)
            <div>
                <p class="text-gray-400 text-xs">Weight</p>
                <p class="font-medium text-gray-800">{{ $consignment->actual_weight }} kg</p>
            </div>
            @endif
            <div>
                <p class="text-gray-400 text-xs">Destination</p>
                <p class="font-medium text-gray-800">{{ $consignment->destination }}</p>
            </div>
            @if($consignment->shipment->eta)
            <div>
                <p class="text-gray-400 text-xs">ETA</p>
                <p class="font-medium text-gray-800">
                    {{ $consignment->shipment->eta->format('M d, Y') }}
                </p>
            </div>
            @endif
        </div>
    </div>

    {{-- Status Timeline --}}
    <div class="bg-white rounded-2xl shadow-sm border p-6 mb-4">
        <h3 class="font-semibold text-gray-700 mb-5">Shipment Progress</h3>

        <div class="space-y-4">
            @foreach($statuses as $key => $info)
            @php
                $stepIndex = array_search($key, $statusKeys);
                $done      = $stepIndex <= $currentIndex;
                $current   = $key === $consignment->status;
            @endphp
            <div class="flex items-center gap-4">
                <div class="w-9 h-9 rounded-full flex items-center justify-center
                    {{ $done
                        ? 'bg-blue-600 text-white shadow'
                        : 'bg-gray-100 text-gray-300' }}">
                    <x-dynamic-component
                        :component="'heroicon-o-' . $info['icon']"
                        class="w-5 h-5"
                    />
                </div>
                <div>
                    <p class="text-sm font-medium
                        {{ $current ? 'text-blue-700' : ($done ? 'text-gray-700' : 'text-gray-400') }}">
                        {{ $info['label'] }}
                        @if($current)
                            <span class="ml-2 text-xs bg-blue-100 text-blue-600
                                         px-2 py-0.5 rounded-full">Current</span>
                        @endif
                    </p>
                </div>
            </div>
            @if(! $loop->last)
                <div class="ml-4 w-px h-4 {{ $done ? 'bg-blue-300' : 'bg-gray-200' }}
                            ml-[17px]"></div>
            @endif
            @endforeach
        </div>
    </div>

    {{-- Create account nudge --}}
    @guest
    <div class="bg-blue-50 border border-blue-200 rounded-2xl p-5 text-center">
        <p class="text-sm text-blue-800 font-medium mb-3">
            Create a free account to track all your shipments in one place
        </p>
        <a href="{{ route('register') }}"
           class="inline-block bg-blue-700 text-white text-sm font-medium
                  px-5 py-2 rounded-lg hover:bg-blue-800 transition">
            Create Account →
        </a>
    </div>
    @endguest

</div>
</body>
</html>