@extends('layouts.app')

@section('title', 'Order #' . $order->order_number . ' — Tracking')

@section('content')
<div class="max-w-4xl mx-auto px-4 py-8">

    {{-- Order Header --}}
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 mb-6">
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
            <div>
                <h1 class="text-2xl font-bold text-gray-900">Order #{{ $order->order_number }}</h1>
                <p class="text-gray-500 mt-1">Placed on {{ $order->created_at->format('d M Y, h:i A') }}</p>
            </div>
            <div class="flex items-center gap-3">
                @auth
                    @if($order->user_id === auth()->id())
                    <a href="{{ route('orders.invoice', $order->order_number) }}" target="_blank"
                       class="inline-flex items-center gap-1 text-sm font-medium text-primary hover:underline">
                        🧾 Order Slip / Invoice
                    </a>
                    @endif
                @endauth
                @php
                    $statusColors = [
                        'pending'    => 'bg-yellow-100 text-yellow-800',
                        'confirmed'  => 'bg-blue-100 text-blue-800',
                        'processing' => 'bg-indigo-100 text-indigo-800',
                        'shipped'    => 'bg-purple-100 text-purple-800',
                        'delivered'  => 'bg-green-100 text-green-800',
                        'completed'  => 'bg-green-100 text-green-800',
                        'cancelled'  => 'bg-red-100 text-red-800',
                    ];
                    $color = $statusColors[$order->status] ?? 'bg-gray-100 text-gray-800';
                @endphp
                <span class="px-4 py-1.5 rounded-full text-sm font-semibold {{ $color }}">
                    {{ ucfirst($order->status) }}
                </span>
            </div>
        </div>

        {{-- Progress timeline --}}
        @php
            $steps  = ['pending', 'confirmed', 'processing', 'shipped', 'delivered'];
            $current = array_search($order->status, $steps);
            $current = ($current === false) ? 0 : $current;
        @endphp
        <div class="mt-6 flex items-center">
            @foreach($steps as $i => $step)
            <div class="flex items-center {{ $loop->last ? '' : 'flex-1' }}">
                <div class="flex flex-col items-center">
                    <div class="w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold
                        {{ $i <= $current ? 'bg-primary text-white' : 'bg-gray-200 text-gray-500' }}">
                        @if($i < $current)✓@else{{ $i + 1 }}@endif
                    </div>
                    <span class="text-xs mt-1 hidden sm:block {{ $i <= $current ? 'text-primary font-medium' : 'text-gray-400' }}">
                        {{ ucfirst($step) }}
                    </span>
                </div>
                @unless($loop->last)
                <div class="flex-1 h-1 mx-1 rounded {{ $i < $current ? 'bg-primary' : 'bg-gray-200' }}"></div>
                @endunless
            </div>
            @endforeach
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div class="lg:col-span-2 space-y-6">

            {{-- Shipments --}}
            @forelse($trackingData as $tracking)
            @php $shipment = $tracking['shipment']; @endphp
            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="font-semibold text-gray-900">Shipment Tracking</h3>
                    @if($shipment->awb)
                    <span class="text-sm font-mono bg-gray-100 px-3 py-1 rounded">{{ $shipment->awb }}</span>
                    @endif
                </div>

                @if($shipment->tracking_url)
                <a href="{{ $shipment->tracking_url }}" target="_blank"
                   class="inline-flex items-center gap-2 text-sm text-primary font-medium hover:underline mb-4">
                    🔗 Track on {{ ucfirst($shipment->provider) }}
                </a>
                @endif

                @if($shipment->estimated_delivery)
                <div class="bg-blue-50 rounded-xl p-3 mb-4 text-sm text-blue-700">
                    🚚 Estimated delivery: <strong>{{ \Carbon\Carbon::parse($shipment->estimated_delivery)->format('l, d M Y') }}</strong>
                </div>
                @endif

                {{-- Tracking events --}}
                @if(!empty($tracking['events']))
                <div class="space-y-3">
                    @foreach($tracking['events'] as $event)
                    <div class="flex gap-3">
                        <div class="flex flex-col items-center">
                            <div class="w-3 h-3 rounded-full bg-primary mt-1"></div>
                            @unless($loop->last)<div class="w-0.5 flex-1 bg-gray-200 mt-1"></div>@endunless
                        </div>
                        <div class="pb-3">
                            <p class="font-medium text-gray-900 text-sm">{{ $event['status'] }}</p>
                            @if(!empty($event['location']))
                            <p class="text-xs text-gray-500">📍 {{ $event['location'] }}</p>
                            @endif
                            @if(!empty($event['timestamp']))
                            <p class="text-xs text-gray-400">{{ $event['timestamp'] }}</p>
                            @endif
                        </div>
                    </div>
                    @endforeach
                </div>
                @else
                <p class="text-gray-500 text-sm">No tracking events yet. Check back soon.</p>
                @endif
            </div>
            @empty
            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
                <p class="text-gray-500">Your order has not been shipped yet. We'll update you when it's on the way.</p>
            </div>
            @endforelse

        </div>

        {{-- Order Summary --}}
        <div class="space-y-4">
            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
                <h3 class="font-semibold text-gray-900 mb-4">Order Summary</h3>
                @foreach($order->items as $item)
                <div class="flex justify-between text-sm py-2 border-b border-gray-50 last:border-0">
                    <span class="text-gray-700">{{ $item->product_name }} × {{ $item->quantity }}</span>
                    <span class="font-medium">NPR {{ number_format($item->total_price, 2) }}</span>
                </div>
                @endforeach
                <div class="mt-3 pt-3 border-t flex justify-between font-bold">
                    <span>Total</span>
                    <span class="text-primary">NPR {{ number_format($order->total_amount, 2) }}</span>
                </div>
            </div>

            @if($order->shipping_address)
            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
                <h3 class="font-semibold text-gray-900 mb-3">Shipping To</h3>
                <p class="text-sm text-gray-600">
                    {{ $order->shipping_address['name'] ?? '' }}<br>
                    {{ $order->shipping_address['line1'] ?? '' }}<br>
                    {{ $order->shipping_address['city'] ?? '' }}, {{ $order->shipping_address['country'] ?? '' }}
                </p>
            </div>
            @endif
        </div>
    </div>
</div>

{{-- Auto-refresh every 2 minutes --}}
<meta http-equiv="refresh" content="120">
@endsection