@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