@extends('layouts.app')
@section('title', 'Track Your Order - AVIOBOOTS')

@section('content')
@php
    $activeTrackingOrders = $activeTrackingOrders ?? collect();
    $prefilledTrackingId = old('tracking_id', request('tracking_id', $activeTrackingOrders->first()->tracking_id ?? ''));
@endphp

<main class="container" style="padding:5rem 2rem; max-width:860px;">
    <div style="text-align:center; margin-bottom:2.5rem;">
        <i class="fa-solid fa-truck-fast" style="font-size:3rem; color:#6366f1; margin-bottom:1rem;"></i>
        <h1 style="font-family:'Playfair Display',serif; margin:0 0 .5rem;">Track Your Order</h1>
        <p style="color:#777; max-width:560px; margin:0 auto;">Enter your Tracking ID to see the latest order status, or open one of your active orders below.</p>
    </div>

    @if($activeTrackingOrders->isNotEmpty())
        <section style="margin-bottom:2rem;">
            <div style="display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; flex-wrap:wrap;">
                <h2 style="margin:0; font-size:1.15rem; color:#0f172a;">Your Active Orders</h2>
                <span style="font-size:.82rem; color:#64748b;">Visible here until delivery is complete</span>
            </div>

            <div style="display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:1rem;">
                @foreach($activeTrackingOrders as $order)
                    @php
                        $statusMeta = [
                            'pending' => ['label' => 'Pending', 'bg' => '#fffbeb', 'border' => '#fde68a', 'text' => '#92400e'],
                            'confirmed' => ['label' => 'In Production', 'bg' => '#eff6ff', 'border' => '#bfdbfe', 'text' => '#1d4ed8'],
                            'shipped' => ['label' => 'Shipped', 'bg' => '#f0fdf4', 'border' => '#86efac', 'text' => '#166534'],
                        ][$order->status] ?? ['label' => ucfirst($order->status), 'bg' => '#f8fafc', 'border' => '#cbd5e1', 'text' => '#334155'];
                    @endphp
                    <div style="background:#fff; border:1px solid #e2e8f0; border-radius:14px; padding:1rem 1.1rem; box-shadow:0 10px 24px rgba(15,23,42,.05);">
                        <div style="display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem; margin-bottom:.85rem;">
                            <div>
                                <p style="margin:0; font-size:.78rem; color:#64748b; text-transform:uppercase; letter-spacing:.06em;">Order #{{ $order->id }}</p>
                                <p style="margin:.25rem 0 0; font-family:monospace; font-weight:700; color:#4338ca; letter-spacing:.05em;">{{ $order->tracking_id }}</p>
                            </div>
                            <span style="background:{{ $statusMeta['bg'] }}; border:1px solid {{ $statusMeta['border'] }}; color:{{ $statusMeta['text'] }}; border-radius:999px; padding:.3rem .7rem; font-size:.76rem; font-weight:700; white-space:nowrap;">
                                {{ $statusMeta['label'] }}
                            </span>
                        </div>
                        <p style="margin:0 0 1rem; color:#64748b; font-size:.84rem;">Placed {{ $order->created_at->format('d M Y') }}</p>
                        <div style="display:flex; gap:.65rem; flex-wrap:wrap;">
                            <a href="{{ route('my-order', $order) }}" class="btn" style="padding:.75rem 1rem; border-radius:10px; text-decoration:none; font-size:.84rem; flex:1; min-width:140px; text-align:center;">
                                Open Live Tracking
                            </a>
                            <a href="{{ route('track.show', $order->tracking_id) }}" style="padding:.75rem 1rem; border-radius:10px; text-decoration:none; font-size:.84rem; font-weight:600; color:#4338ca; border:1px solid #c7d2fe; background:#eef2ff; flex:1; min-width:140px; text-align:center;">
                                Open Public Page
                            </a>
                        </div>
                    </div>
                @endforeach
            </div>
        </section>
    @endif

    @if($errors->any())
        <div style="background:#fef2f2; color:#dc2626; padding:.85rem 1rem; border-radius:10px; margin-bottom:1.5rem; border:1px solid #fecaca; font-size:.9rem;">
            <i class="fa-solid fa-circle-exclamation"></i> {{ $errors->first() }}
        </div>
    @endif

    <div style="background:#fff; border:1px solid #e2e8f0; border-radius:18px; padding:1.5rem; box-shadow:0 18px 40px rgba(15,23,42,.06);">
        <form action="{{ route('track.search') }}" method="POST" style="display:flex; gap:.75rem; flex-wrap:wrap;">
            @csrf
            <input type="text"
                   name="tracking_id"
                   placeholder="e.g. ORD-260424-1532-A7F9"
                   value="{{ $prefilledTrackingId }}"
                   style="flex:1 1 320px; padding:.95rem 1.1rem; border:2px solid #e2e8f0; border-radius:12px; font-size:1rem; font-family:monospace; text-transform:uppercase; letter-spacing:.05em;"
                   autocomplete="off" required>
            <button type="submit" class="btn" style="padding:.95rem 1.75rem; white-space:nowrap; border-radius:12px;">
                <i class="fa-solid fa-magnifying-glass"></i> Track
            </button>
        </form>

        <div style="display:flex; justify-content:space-between; gap:1rem; margin-top:1rem; flex-wrap:wrap;">
            <p style="margin:0; color:#94a3b8; font-size:.85rem;">
                Your Tracking ID is shared after checkout and in your order email.
            </p>
            @if($activeTrackingOrders->isNotEmpty())
                <p style="margin:0; color:#6366f1; font-size:.85rem; font-weight:600;">
                    Quick tip: the first active order is already filled in for you.
                </p>
            @endif
        </div>
    </div>
</main>
@endsection