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

@section('content')
<main class="container" style="padding:4rem 2rem; max-width:680px;">

    {{-- Back link --}}
    <a href="{{ route('track.index') }}" style="color:#6366f1; font-size:.9rem; text-decoration:none; display:inline-flex; align-items:center; gap:.4rem; margin-bottom:2rem;">
        <i class="fa-solid fa-arrow-left"></i> Track another order
    </a>

    @if(!$order)
    {{-- Not found --}}
    <div style="text-align:center; padding:3rem 2rem; background:#fef2f2; border:1px solid #fecaca; border-radius:16px;">
        <i class="fa-solid fa-circle-xmark" style="font-size:3rem; color:#dc2626; margin-bottom:1rem;"></i>
        <h2 style="margin:0 0 .75rem; color:#991b1b;">Order Not Found</h2>
        <p style="color:#7f1d1d;">No order found with Tracking ID: <strong style="font-family:monospace;">{{ $trackingId }}</strong></p>
        <p style="color:#9ca3af; font-size:.9rem; margin-top:1rem;">Please check your email for the correct Tracking ID, or contact us at <a href="mailto:avioboots0@gmail.com" style="color:#6366f1;">avioboots0@gmail.com</a></p>
    </div>

    @else
    {{-- Header --}}
    <div style="display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; margin-bottom:2rem;">
        <div>
            <h1 style="font-family:'Playfair Display',serif; margin:0 0 .25rem;">Order #{{ $order->id }}</h1>
            <p style="margin:0; color:#64748b; font-size:.9rem;">Placed {{ $order->created_at->format('d M Y, h:i A') }}</p>
        </div>
        @php
            $statusColors = [
                'pending'   => ['bg' => '#fffbeb', 'border' => '#fde68a', 'text' => '#92400e'],
                'confirmed' => ['bg' => '#eff6ff', 'border' => '#bfdbfe', 'text' => '#1e40af'],
                'shipped'   => ['bg' => '#f0fdf4', 'border' => '#bbf7d0', 'text' => '#166534'],
                'complete'  => ['bg' => '#f0fdf4', 'border' => '#6ee7b7', 'text' => '#065f46'],
            ];
            $sc = $statusColors[$order->status] ?? ['bg'=>'#f1f5f9','border'=>'#e2e8f0','text'=>'#334155'];
        @endphp
        <span style="background:{{ $sc['bg'] }}; border:1px solid {{ $sc['border'] }}; color:{{ $sc['text'] }}; padding:.4rem 1rem; border-radius:20px; font-weight:600; font-size:.9rem;">
            @if($order->status === 'pending')   <i class="fa-solid fa-clock"></i> Pending
            @elseif($order->status === 'confirmed') <i class="fa-solid fa-hammer"></i> In Production
            @elseif($order->status === 'shipped')   <i class="fa-solid fa-truck"></i> Shipped
            @elseif($order->status === 'complete')  <i class="fa-solid fa-circle-check"></i> Delivered
            @endif
        </span>
    </div>

    {{-- 4-Step Progress Bar --}}
    @php
        $steps = [
            ['key'=>'pending',   'icon'=>'fa-clock',        'label'=>'Order Placed',  'sub'=>'Awaiting confirmation'],
            ['key'=>'confirmed', 'icon'=>'fa-hammer',       'label'=>'In Production', 'sub'=>'Your boots are being crafted'],
            ['key'=>'shipped',   'icon'=>'fa-truck',        'label'=>'Shipped',       'sub'=>'On the way to you'],
            ['key'=>'complete',  'icon'=>'fa-circle-check', 'label'=>'Delivered',     'sub'=>'Enjoy your boots!'],
        ];
        $statusOrder = ['pending'=>0, 'confirmed'=>1, 'shipped'=>2, 'complete'=>3];
        $currentIdx  = $statusOrder[$order->status] ?? 0;
    @endphp
    <div style="display:flex; align-items:flex-start; margin:2rem 0; position:relative;">
        @foreach($steps as $i => $step)
            @php $done = $currentIdx >= $i; $current = $currentIdx === $i; @endphp
            <div style="flex:1; text-align:center; position:relative; z-index:1;">
                <div style="width:44px; height:44px; border-radius:50%; margin:0 auto .6rem; display:flex; align-items:center; justify-content:center; font-size:1rem;
                    background:{{ $done ? ($current ? '#6366f1' : '#10b981') : '#e2e8f0' }};
                    color:{{ $done ? '#fff' : '#94a3b8' }};
                    box-shadow:{{ $current ? '0 0 0 4px rgba(99,102,241,.2)' : 'none' }};">
                    <i class="fa-solid {{ $step['icon'] }}"></i>
                </div>
                <div style="font-size:.78rem; font-weight:{{ $current ? '700' : '500' }}; color:{{ $done ? '#1e293b' : '#94a3b8' }}; line-height:1.3;">
                    {{ $step['label'] }}
                    <br><span style="font-weight:400; color:#94a3b8; font-size:.72rem;">{{ $step['sub'] }}</span>
                </div>
            </div>
            @if($i < count($steps)-1)
                <div style="position:absolute; top:22px; height:2px; z-index:0;
                    left:calc({{ (100/count($steps)) * ($i+0.5) }}% );
                    width:calc({{ 100/count($steps) }}%);
                    background:{{ $currentIdx > $i ? '#10b981' : '#e2e8f0' }};"></div>
            @endif
        @endforeach
    </div>

    {{-- Tracking Info --}}
    <div style="background:#f8fafc; border:1px solid #e2e8f0; border-radius:12px; padding:1.25rem 1.5rem; margin:1.5rem 0;">
        <h3 style="margin:0 0 1rem; font-size:1rem; color:#334155;"><i class="fa-solid fa-qrcode" style="color:#6366f1;"></i> Tracking Details</h3>
        <table style="width:100%; font-size:.9rem; border-collapse:collapse;">
            <tr style="border-bottom:1px solid #f1f5f9;">
                <td style="padding:.5rem 0; color:#64748b; width:140px;">Tracking ID</td>
                <td style="padding:.5rem 0;"><strong style="font-family:monospace; letter-spacing:.05em; color:#6366f1;">{{ $order->tracking_id }}</strong></td>
            </tr>
            @if($order->courier)
            <tr style="border-bottom:1px solid #f1f5f9;">
                <td style="padding:.5rem 0; color:#64748b;">Courier</td>
                <td style="padding:.5rem 0;"><strong>{{ $order->courier }}</strong></td>
            </tr>
            @endif
            @if($order->shipped_at)
            <tr style="border-bottom:1px solid #f1f5f9;">
                <td style="padding:.5rem 0; color:#64748b;">Shipped On</td>
                <td style="padding:.5rem 0;">{{ $order->shipped_at->format('d M Y, h:i A') }}</td>
            </tr>
            @endif
            <tr>
                <td style="padding:.5rem 0; color:#64748b;">Delivery To</td>
                <td style="padding:.5rem 0;">{{ $order->city }}@if($order->state), {{ $order->state }}@endif</td>
            </tr>
        </table>
        @if($order->tracking_url)
        <div style="margin-top:1rem;">
            <a href="{{ $order->tracking_url }}" target="_blank"
               style="display:inline-flex; align-items:center; gap:.5rem; background:#6366f1; color:#fff; padding:.65rem 1.25rem; border-radius:8px; text-decoration:none; font-size:.9rem; font-weight:600;">
                <i class="fa-solid fa-arrow-up-right-from-square"></i> Track on Courier Website
            </a>
        </div>
        @endif
    </div>

    {{-- Order Items --}}
    <div style="background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:1.25rem 1.5rem; margin:1.5rem 0;">
        <h3 style="margin:0 0 1rem; font-size:1rem; color:#334155;"><i class="fa-solid fa-box" style="color:#f59e0b;"></i> Items Ordered</h3>
        @foreach($order->items as $it)
        <div style="display:flex; align-items:center; gap:1rem; padding:.6rem 0; border-bottom:1px solid #f1f5f9;">
            <img src="{{ asset($it->image) }}" alt="{{ $it->product_name }}" style="width:52px; height:52px; object-fit:cover; border-radius:8px; flex-shrink:0;">
            <div style="flex:1;">
                <div style="font-weight:600; font-size:.9rem;">{{ $it->product_name }}</div>
                <div style="font-size:.8rem; color:#64748b;">Size: {{ $it->size ?? 'N/A' }} &nbsp;·&nbsp; Qty: {{ $it->qty }}</div>
            </div>
            <div style="font-weight:700; font-size:.9rem;">Rs {{ number_format($it->price * $it->qty, 0) }}</div>
        </div>
        @endforeach
        <div style="display:flex; justify-content:space-between; margin-top:.75rem; font-size:.9rem;">
            <span style="color:#64748b;">Shipping</span>
            <span>{{ $order->shipping == 0 ? 'FREE' : 'Rs '.number_format($order->shipping, 0) }}</span>
        </div>
        <div style="display:flex; justify-content:space-between; margin-top:.4rem; font-weight:700;">
            <span>Total</span>
            <span>Rs {{ number_format($order->total, 0) }}</span>
        </div>
    </div>

    <p style="text-align:center; color:#94a3b8; font-size:.85rem;">
        Questions? Email us at <a href="mailto:avioboots0@gmail.com" style="color:#6366f1;">avioboots0@gmail.com</a>
    </p>
    @endif
</main>
@endsection