@extends('layouts.store')

@section('content')
<section class="max-w-3xl mx-auto px-5 md:px-8 py-10 md:py-14">
    <h1 class="text-3xl font-headline font-extrabold text-primary">Track Your Order</h1>
    <form method="GET" action="{{ route('store.track') }}" class="mt-6 flex gap-2">
        <input class="flex-1 rounded-md border border-outline-variant/40 px-4 py-3 bg-white" name="order_number" value="{{ $query }}" placeholder="Order number or tracking number" required>
        <button class="px-5 py-3 rounded-md bg-primary text-white font-bold" type="submit">Track</button>
    </form>

    @if($query !== '' && ! $order)
        <div class="mt-6 rounded-md bg-red-50 text-red-700 px-4 py-3">No order found for "{{ $query }}".</div>
    @endif

    @if($order)
        <div class="mt-6 rounded-xl bg-white border border-outline-variant p-6">
            <p><strong>Order #:</strong> {{ $order->order_number }}</p>
            <p><strong>Status:</strong> {{ ucfirst($order->status) }}</p>
            <p><strong>Tracking Number:</strong> {{ $order->tracking_number ?? 'Not assigned yet' }}</p>
            <p><strong>Courier:</strong> {{ $order->courier_name ?? 'Not assigned yet' }}</p>
            <p><strong>Notes:</strong> {{ $order->tracking_notes ?? 'No notes yet' }}</p>
            @if($order->shipped_at)
                <p><strong>Shipped At:</strong> {{ $order->shipped_at->format('d M Y, h:i A') }}</p>
            @endif
            @if($order->delivered_at)
                <p><strong>Delivered At:</strong> {{ $order->delivered_at->format('d M Y, h:i A') }}</p>
            @endif
        </div>
    @endif
</section>
@endsection