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

@push('styles')
<style>
/* ── Progress steps ──────────────────────────────────── */
.track-steps {
    display: flex;
    align-items: flex-start;
    position: relative;
    margin: 2.5rem 0;
    padding: 0 1rem;
}
.track-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 1;
}
.track-step-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    margin-bottom: .65rem;
    transition: all .3s ease;
    border: 3px solid #e2e8f0;
    background: #fff;
    color: #cbd5e1;
}
.track-step.done .track-step-icon {
    background: #10b981;
    border-color: #10b981;
    color: #fff;
    box-shadow: 0 0 0 5px rgba(16,185,129,.15);
}
.track-step.current .track-step-icon {
    background: #6366f1;
    border-color: #6366f1;
    color: #fff;
    box-shadow: 0 0 0 6px rgba(99,102,241,.18);
    animation: pulse-ring 2s infinite;
}
@keyframes pulse-ring {
    0%   { box-shadow: 0 0 0 0 rgba(99,102,241,.4); }
    70%  { box-shadow: 0 0 0 10px rgba(99,102,241,0); }
    100% { box-shadow: 0 0 0 0 rgba(99,102,241,0); }
}
.track-step-label {
    font-size: .78rem;
    font-weight: 600;
    color: #94a3b8;
    line-height: 1.3;
    transition: color .3s;
}
.track-step.done .track-step-label,
.track-step.current .track-step-label {
    color: #1e293b;
}
.track-step-sub {
    font-size: .68rem;
    color: #94a3b8;
    margin-top: .2rem;
    display: block;
}
.track-connector {
    flex: 1;
    height: 3px;
    background: #e2e8f0;
    margin-top: 24px;
    position: relative;
    z-index: 0;
    border-radius: 99px;
    overflow: hidden;
}
.track-connector.active::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #10b981, #6366f1);
    border-radius: 99px;
}
</style>
@endpush

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

    {{-- Header --}}
    <div style="text-align:center; margin-bottom:2rem;">
        <i class="fa-solid fa-box-open" style="font-size:2.5rem; color:#6366f1; margin-bottom:.75rem; display:block;"></i>
        <h1 style="font-family:'Playfair Display',serif; margin:0 0 .4rem; font-size:1.75rem;">
            Thank you, {{ $order->name }}!
        </h1>
        <p style="color:#64748b; margin:0;">Your order has been placed. We'll keep you updated every step of the way.</p>
    </div>

    {{-- Tracking ID Banner --}}
    <div style="background:linear-gradient(135deg,#6366f1,#4f46e5); color:#fff; border-radius:14px; padding:1.25rem 1.5rem; margin-bottom:1.75rem; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.75rem;">
        <div>
            <p style="margin:0; font-size:.78rem; opacity:.8; text-transform:uppercase; letter-spacing:.08em;">Your Tracking ID</p>
            <p style="margin:.3rem 0 0; font-size:1.4rem; font-weight:700; font-family:monospace; letter-spacing:.08em;">{{ $order->tracking_id }}</p>
        </div>
        <div style="text-align:right; font-size:.8rem; opacity:.85;">
            <div>Order #{{ $order->id }}</div>
            <div style="margin-top:.2rem; opacity:.75;">{{ $order->created_at->format('d M Y · h:i A') }}</div>
        </div>
    </div>

    {{-- 4-Step Progress Bar --}}
    @php
        $steps = [
            ['key'=>'pending',   'icon'=>'fa-clock',        'label'=>'Order Placed',     'sub'=>'Awaiting review'],
            ['key'=>'confirmed', 'icon'=>'fa-hammer',       'label'=>'In Production',    'sub'=>'Crafting your boots'],
            ['key'=>'shipped',   'icon'=>'fa-truck',        'label'=>'Shipped',          'sub'=>'On the way'],
            ['key'=>'complete',  'icon'=>'fa-circle-check', 'label'=>'Delivered',        'sub'=>'Enjoy!'],
        ];
        $order_idx = ['pending'=>0,'confirmed'=>1,'shipped'=>2,'complete'=>3];
        $cur = $order_idx[$order->status] ?? 0;
    @endphp

    <div class="track-steps">
        @foreach($steps as $i => $step)
            @php
                $isDone    = $cur > $i;
                $isCurrent = $cur === $i;
            @endphp
            <div class="track-step {{ $isDone ? 'done' : '' }} {{ $isCurrent ? 'current' : '' }}">
                <div class="track-step-icon">
                    <i class="fa-solid {{ $step['icon'] }}"></i>
                </div>
                <div class="track-step-label">
                    {{ $step['label'] }}
                    <span class="track-step-sub">{{ $step['sub'] }}</span>
                </div>
            </div>
            @if($i < count($steps) - 1)
                <div class="track-connector {{ $cur > $i ? 'active' : '' }}"></div>
            @endif
        @endforeach
    </div>

    {{-- Current status message --}}
    @php
        $messages = [
            'pending'   => ['icon'=>'fa-clock', 'color'=>'#92400e', 'bg'=>'#fffbeb', 'border'=>'#fde68a',
                            'title'=>'Order Received!',
                            'body'=>'Our team has received your order and will confirm it shortly. You\'ll get an email once it\'s confirmed.'],
            'confirmed' => ['icon'=>'fa-hammer', 'color'=>'#1e40af', 'bg'=>'#eff6ff', 'border'=>'#bfdbfe',
                            'title'=>'Your Boots Are Being Crafted!',
                            'body'=>'Our craftsmen have started working on your order. Every pair is handmade with care — we\'ll notify you when it ships.'],
            'shipped'   => ['icon'=>'fa-truck', 'color'=>'#065f46', 'bg'=>'#f0fdf4', 'border'=>'#6ee7b7',
                            'title'=>'Your Order Is On Its Way!',
                            'body'=>'Your order has been dispatched and is heading to you. Check the shipment details below.'],
        ];
        $msg = $messages[$order->status] ?? $messages['pending'];
    @endphp
    <div style="background:{{ $msg['bg'] }}; border:1px solid {{ $msg['border'] }}; border-radius:12px; padding:1.1rem 1.4rem; margin-bottom:1.5rem; display:flex; align-items:flex-start; gap:1rem;">
        <i class="fa-solid {{ $msg['icon'] }}" style="font-size:1.4rem; color:{{ $msg['color'] }}; margin-top:.1rem; flex-shrink:0;"></i>
        <div>
            <p style="margin:0 0 .3rem; font-weight:700; color:{{ $msg['color'] }};">{{ $msg['title'] }}</p>
            <p style="margin:0; font-size:.88rem; color:{{ $msg['color'] }}; opacity:.85;">{{ $msg['body'] }}</p>
        </div>
    </div>

    {{-- Shipment Details (only when shipped) --}}
    @if($order->status === 'shipped')
    <div style="background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:1.25rem 1.5rem; margin-bottom:1.5rem;">
        <h3 style="margin:0 0 1rem; font-size:.95rem; color:#334155;"><i class="fa-solid fa-truck" style="color:#1d4ed8;"></i> Shipment Details</h3>
        <table style="width:100%; font-size:.875rem; border-collapse:collapse;">
            @if($order->courier)
            <tr style="border-bottom:1px solid #f1f5f9;">
                <td style="padding:.45rem 0; color:#64748b; width:120px;">Courier</td>
                <td style="padding:.45rem 0; font-weight:600;">{{ $order->courier }}</td>
            </tr>
            @endif
            @if($order->shipped_at)
            <tr>
                <td style="padding:.45rem 0; color:#64748b;">Shipped On</td>
                <td style="padding:.45rem 0;">{{ $order->shipped_at->format('d M Y, h:i A') }}</td>
            </tr>
            @endif
        </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:#1d4ed8; color:#fff; padding:.65rem 1.25rem; border-radius:8px; text-decoration:none; font-size:.875rem; font-weight:600;">
                <i class="fa-solid fa-arrow-up-right-from-square"></i> Track on Courier Website
            </a>
        </div>
        @endif
    </div>
    @endif

    {{-- Order Items --}}
    <div style="background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:1.25rem 1.5rem; margin-bottom:1.5rem;">
        <h3 style="margin:0 0 1rem; font-size:.95rem; color:#334155;"><i class="fa-solid fa-box" style="color:#f59e0b;"></i> Your Items</h3>
        @foreach($order->items as $it)
        <div style="display:flex; align-items:center; gap:1rem; padding:.65rem 0; border-bottom:1px solid #f1f5f9;">
            <img src="{{ asset($it->image) }}" alt="{{ $it->product_name }}"
                 style="width:56px; height:56px; object-fit:cover; border-radius:8px; flex-shrink:0; border:1px solid #f1f5f9;">
            <div style="flex:1; min-width:0;">
                <div style="font-weight:600; font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">{{ $it->product_name }}</div>
                <div style="font-size:.78rem; color:#64748b; margin-top:.15rem;">
                    Size: {{ $it->size ?? 'N/A' }} &nbsp;·&nbsp; Qty: {{ $it->qty }}
                </div>
            </div>
            <div style="font-weight:700; font-size:.9rem; flex-shrink:0;">Rs {{ number_format($it->price * $it->qty, 0) }}</div>
        </div>
        @endforeach

        <div style="margin-top:.85rem; display:flex; flex-direction:column; gap:.35rem; font-size:.875rem;">
            <div style="display:flex; justify-content:space-between; color:#64748b;">
                <span>Subtotal</span>
                <span>Rs {{ number_format($order->subtotal, 0) }}</span>
            </div>
            <div style="display:flex; justify-content:space-between; color:#64748b;">
                <span>Shipping</span>
                <span>{{ $order->shipping == 0 ? 'FREE' : 'Rs '.number_format($order->shipping, 0) }}</span>
            </div>
            <div style="display:flex; justify-content:space-between; font-weight:700; font-size:.95rem; margin-top:.25rem; padding-top:.5rem; border-top:1px solid #f1f5f9;">
                <span>Total</span>
                <span>Rs {{ number_format($order->total, 0) }}</span>
            </div>
        </div>
    </div>

    {{-- Delivery Address --}}
    @php
        $deliveryLocation = trim(
            $order->city .
            ($order->state ? ', ' . $order->state : '') .
            ($order->zip ? ' ' . $order->zip : '')
        );
    @endphp
    <div style="background:#f8fafc; border:1px solid #e2e8f0; border-radius:12px; padding:1.1rem 1.4rem; margin-bottom:1.75rem; font-size:.875rem; color:#475569;">
        <p style="margin:0 0 .4rem; font-weight:600; color:#334155;"><i class="fa-solid fa-location-dot" style="color:#6366f1;"></i> Delivering To</p>
        <p style="margin:0; line-height:1.7;">
            {{ $order->address }},
            {{ $deliveryLocation }}<br>
            <i class="fa-solid fa-phone" style="font-size:.75rem;"></i> {{ $order->phone }}
        </p>
    </div>

    {{-- CTA --}}
    <div style="text-align:center;">
        <a href="{{ route('home') }}" class="btn" style="background:#6366f1; border:none; color:#fff; padding:.9rem 2rem; border-radius:12px; font-size:.95rem; text-decoration:none; display:inline-block;">
            <i class="fa-solid fa-arrow-left"></i> Continue Shopping
        </a>
        <p style="margin-top:1.25rem; color:#94a3b8; font-size:.82rem;">
            Questions? Email us at
            <a href="mailto:avioboots0@gmail.com" style="color:#6366f1;">avioboots0@gmail.com</a>
        </p>
    </div>

</main>
@endsection