@extends('layouts.app')

@section('title', 'Track Order #' . $order->order_number)

@section('content')

<!-- Header Breadcrumb & Title -->
<div class="mb-8">
    <div class="flex items-center gap-2 text-xs text-slate-400 mb-2">
        <a href="{{ route('home') }}" class="hover:text-brand-light">Home</a>
        <span>/</span>
        <a href="{{ route('orders.index') }}" class="hover:text-brand-light">My Orders</a>
        <span>/</span>
        <span class="text-brand-light font-bold">{{ $order->order_number }}</span>
    </div>
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
            <h1 class="font-display font-black text-2xl sm:text-3xl text-white">Track Footwear Shipment</h1>
            <p class="text-xs text-slate-400 mt-1">Order #{{ $order->order_number }} &middot; Placed on {{ $order->created_at->format('d M Y, h:i A') }}</p>
        </div>
        <div class="flex items-center gap-2">
            <a href="{{ route('orders.receipt', $order) }}" class="bg-white/5 hover:bg-white/10 text-slate-200 border border-white/10 text-xs font-semibold px-4 py-2 rounded-full transition">
                View Receipt
            </a>
            <a href="{{ route('orders.receipt.download', $order) }}" class="bg-brand hover:bg-brand-hover text-white text-xs font-bold px-4 py-2 rounded-full shadow-glow transition">
                📥 Download PDF Invoice
            </a>
        </div>
    </div>
</div>

<div class="space-y-8 max-w-4xl mx-auto">
    
    {{-- ===== 1. SHIPMENT TIMELINE TRACKER ===== --}}
    <div class="bg-ink-card rounded-3xl border border-white/10 p-6 sm:p-8 shadow-2xl space-y-6">
        <div class="flex flex-wrap items-center justify-between gap-3 border-b border-white/10 pb-4">
            <div>
                <span class="text-[10px] text-slate-500 uppercase font-bold tracking-wider">Current Status</span>
                <p class="font-heading font-black text-lg text-white">{{ $order->status_label }}</p>
            </div>
            <div class="text-right">
                <span class="text-[10px] text-slate-500 uppercase font-bold tracking-wider">Estimated Delivery</span>
                <p class="text-xs font-bold text-emerald-400">Within 3-5 Business Days</p>
            </div>
        </div>

        <!-- 5-Step Visual Tracking Stepper -->
        @php($step = $order->tracking_step)
        <div class="relative py-4">
            <div class="hidden sm:block absolute top-1/2 left-6 right-6 -translate-y-1/2 h-1 bg-white/10 z-0">
                <div class="bg-gradient-to-r from-brand to-brand-light h-1 transition-all duration-700" 
                     style="width: {{ $step === 5 ? '100%' : ($step === 4 ? '75%' : ($step === 3 ? '50%' : ($step === 2 ? '25%' : '0%'))) }}"></div>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-5 gap-4 relative z-10">
                <!-- Step 1: Placed -->
                <div class="flex sm:flex-col items-center sm:text-center gap-3 sm:gap-2">
                    <div class="w-10 h-10 rounded-full flex items-center justify-center font-bold text-xs {{ $step >= 1 ? 'bg-brand text-white shadow-glow ring-2 ring-brand-light' : 'bg-ink border border-white/10 text-slate-500' }}">
                        ✓
                    </div>
                    <div>
                        <p class="text-xs font-bold {{ $step >= 1 ? 'text-white' : 'text-slate-500' }}">Order Placed</p>
                        <p class="text-[10px] text-slate-500">{{ $order->created_at->format('d M') }}</p>
                    </div>
                </div>

                <!-- Step 2: Processing -->
                <div class="flex sm:flex-col items-center sm:text-center gap-3 sm:gap-2">
                    <div class="w-10 h-10 rounded-full flex items-center justify-center font-bold text-xs {{ $step >= 2 ? 'bg-brand text-white shadow-glow ring-2 ring-brand-light' : 'bg-ink border border-white/10 text-slate-500' }}">
                        {{ $step >= 2 ? '✓' : '2' }}
                    </div>
                    <div>
                        <p class="text-xs font-bold {{ $step >= 2 ? 'text-white' : 'text-slate-500' }}">Confirmed</p>
                        <p class="text-[10px] text-slate-500">Payment Verified</p>
                    </div>
                </div>

                <!-- Step 3: Packed -->
                <div class="flex sm:flex-col items-center sm:text-center gap-3 sm:gap-2">
                    <div class="w-10 h-10 rounded-full flex items-center justify-center font-bold text-xs {{ $step >= 3 ? 'bg-brand text-white shadow-glow ring-2 ring-brand-light' : 'bg-ink border border-white/10 text-slate-500' }}">
                        {{ $step >= 3 ? '✓' : '3' }}
                    </div>
                    <div>
                        <p class="text-xs font-bold {{ $step >= 3 ? 'text-white' : 'text-slate-500' }}">Packed</p>
                        <p class="text-[10px] text-slate-500">Ready at Hub</p>
                    </div>
                </div>

                <!-- Step 4: Shipped -->
                <div class="flex sm:flex-col items-center sm:text-center gap-3 sm:gap-2">
                    <div class="w-10 h-10 rounded-full flex items-center justify-center font-bold text-xs {{ $step >= 4 ? 'bg-brand text-white shadow-glow ring-2 ring-brand-light' : 'bg-ink border border-white/10 text-slate-500' }}">
                        {{ $step >= 4 ? '✓' : '4' }}
                    </div>
                    <div>
                        <p class="text-xs font-bold {{ $step >= 4 ? 'text-white' : 'text-slate-500' }}">In Transit</p>
                        <p class="text-[10px] text-slate-500">{{ $order->courier_name ?? 'Dispatched' }}</p>
                    </div>
                </div>

                <!-- Step 5: Delivered -->
                <div class="flex sm:flex-col items-center sm:text-center gap-3 sm:gap-2">
                    <div class="w-10 h-10 rounded-full flex items-center justify-center font-bold text-xs {{ $step >= 5 ? 'bg-emerald-500 text-white shadow-glow ring-2 ring-emerald-400' : 'bg-ink border border-white/10 text-slate-500' }}">
                        {{ $step >= 5 ? '✓' : '5' }}
                    </div>
                    <div>
                        <p class="text-xs font-bold {{ $step >= 5 ? 'text-emerald-400' : 'text-slate-500' }}">Delivered</p>
                        <p class="text-[10px] text-slate-500">Package Handed</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Courier & Tracking details banner -->
        @if($order->tracking_number)
            <div class="p-4 rounded-2xl bg-ink border border-white/10 flex flex-wrap items-center justify-between gap-3 text-xs">
                <div class="flex items-center gap-3">
                    <span class="text-2xl">🚚</span>
                    <div>
                        <p class="font-bold text-white">{{ $order->courier_name ?? 'Express Courier Partner' }}</p>
                        <p class="text-slate-400 font-mono">AWB Tracking Code: <strong class="text-brand-light">{{ $order->tracking_number }}</strong></p>
                    </div>
                </div>
                <span class="px-3 py-1 bg-brand/20 text-brand-light rounded-full font-bold">Active Live Transit</span>
            </div>
        @endif

    </div>

    {{-- ===== 2. ORDER DETAILS & ITEMS ===== --}}
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        
        <!-- Left: Items List (2 cols) -->
        <div class="md:col-span-2 bg-ink-card rounded-3xl border border-white/10 p-6 shadow-xl space-y-4">
            <h3 class="font-heading font-bold text-sm text-white border-b border-white/10 pb-3">Package Items</h3>
            <div class="space-y-3">
                @foreach($order->items as $item)
                    @php($img = $item->product?->primaryImage())
                    <div class="flex items-center gap-4 p-3 rounded-2xl bg-ink border border-white/5">
                        <div class="w-16 h-16 rounded-xl bg-slate-900 overflow-hidden shrink-0 border border-white/10">
                            @if($img)<img src="{{ $img->url }}" class="w-full h-full object-cover">@endif
                        </div>
                        <div class="flex-1 min-w-0 text-xs">
                            <p class="font-bold text-white truncate">{{ $item->product_name }}</p>
                            <p class="text-[11px] text-slate-400 mt-0.5">
                                @if($item->size) Size: {{ $item->size }} @endif
                                @if($item->color) &middot; Color: {{ $item->color }} @endif
                            </p>
                            <div class="flex items-baseline gap-2 mt-1">
                                <span class="font-bold text-white">₹{{ number_format($item->unit_price, 2) }}</span>
                                <span class="text-slate-500 text-[10px]">Qty: {{ $item->quantity }}</span>
                            </div>
                        </div>
                        <span class="font-heading font-bold text-sm text-brand-light">₹{{ number_format($item->line_total, 2) }}</span>
                    </div>
                @endforeach
            </div>
        </div>

        <!-- Right: Address & Payment Summary (1 col) -->
        <div class="bg-ink-card rounded-3xl border border-white/10 p-6 shadow-xl space-y-5 text-xs">
            <div>
                <h3 class="font-heading font-bold text-white mb-2 uppercase text-[11px] tracking-wider">Delivery Address</h3>
                <p class="font-bold text-white">{{ $order->shipping_name }}</p>
                <p class="text-slate-400 mt-1 leading-relaxed">{{ $order->shipping_address }}, {{ $order->shipping_city }} - {{ $order->shipping_pincode }}</p>
                <p class="text-slate-400 mt-1">Phone: {{ $order->shipping_phone }}</p>
            </div>

            <div class="border-t border-white/10 pt-4 space-y-2">
                <h3 class="font-heading font-bold text-white mb-2 uppercase text-[11px] tracking-wider">Payment Breakdown</h3>
                <div class="flex justify-between text-slate-400">
                    <span>Subtotal</span>
                    <span class="text-white font-semibold">₹{{ number_format($order->subtotal, 2) }}</span>
                </div>
                @if($order->discount_total > 0)
                    <div class="flex justify-between text-emerald-400">
                        <span>Discount Saved</span>
                        <span>-₹{{ number_format($order->discount_total, 2) }}</span>
                    </div>
                @endif
                @if($order->coupon_discount > 0)
                    <div class="flex justify-between text-brand-light font-bold">
                        <span>Coupon ({{ $order->coupon_code }})</span>
                        <span>-₹{{ number_format($order->coupon_discount, 2) }}</span>
                    </div>
                @endif
                <div class="flex justify-between text-slate-400">
                    <span>GST (Tax)</span>
                    <span class="text-white font-semibold">₹{{ number_format($order->tax_total, 2) }}</span>
                </div>
                <div class="border-t border-white/10 pt-2 flex justify-between font-heading font-black text-sm text-white">
                    <span>Total Amount</span>
                    <span class="text-base text-brand-light">₹{{ number_format($order->grand_total, 2) }}</span>
                </div>
            </div>

            <div class="border-t border-white/10 pt-4">
                <a href="{{ route('orders.receipt', $order) }}" class="block w-full text-center bg-white/5 hover:bg-white/10 text-slate-200 border border-white/10 py-2.5 rounded-full font-bold transition">
                    View Full Invoice Receipt
                </a>
            </div>
        </div>

    </div>

</div>

@endsection