@extends('layouts.store')

@section('title', __('Track Your Shipment') . ' | OMNITRADE Global Direct')

@section('content')
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8 sm:py-12 lg:py-16">
    <div class="text-center max-w-xl mx-auto mb-8 sm:mb-12">
        <span class="text-xs font-bold uppercase tracking-wider text-primary">
            {{ __('24/7 Global Dispatch Tracking') }}
        </span>
        <h1 class="text-2xl sm:text-3xl lg:text-4xl font-extrabold text-on-surface tracking-tight mt-2 mb-3">
            {{ __('Track Your Shipment') }}
        </h1>
        <p class="text-xs sm:text-body-sm text-on-surface-variant leading-relaxed">
            {{ __('Enter your third-party carrier tracking code (Speedaf, DHL, FedEx, etc.) or your store order number to view live milestone checkpoints, flight cargo updates, and local carrier handoff.') }}
        </p>
    </div>

    @if(session('error'))
        <div class="bg-error-container text-on-error-container border border-error/20 p-4 rounded-xl text-sm mb-6 flex items-center gap-2">
            <span class="material-symbols-outlined text-lg">error</span>
            <span>{{ session('error') }}</span>
        </div>
    @endif

    <!-- Search Form (Responsive Grid) -->
    <div class="bg-surface-container-lowest border border-surface-container rounded-2xl p-5 sm:p-7 shadow-sm mb-8">
        <form action="{{ route('store.track') }}" method="GET" class="grid grid-cols-1 sm:grid-cols-12 gap-4 items-end">
            <div class="sm:col-span-5">
                <label class="block text-xs font-bold uppercase tracking-wider text-secondary mb-1.5">
                    {{ __('Tracking Code or Order Number *') }}
                </label>
                <input type="text" name="order_number" placeholder="e.g. SPF94829104, DHL89410, or OT-2026-89410" value="{{ $orderNumber ?? old('order_number') }}" required class="w-full h-11 px-3.5 rounded-xl bg-surface-container-low border border-surface-container text-sm text-on-surface placeholder:text-outline focus:outline-none focus:border-primary">
            </div>

            <div class="sm:col-span-5">
                <label class="block text-xs font-bold uppercase tracking-wider text-secondary mb-1.5">
                    {{ __('Email Address (Optional)') }}
                </label>
                <input type="email" name="email" placeholder="e.g. customer@example.com" value="{{ $email ?? old('email') }}" class="w-full h-11 px-3.5 rounded-xl bg-surface-container-low border border-surface-container text-sm text-on-surface placeholder:text-outline focus:outline-none focus:border-primary">
            </div>

            <div class="sm:col-span-2">
                <button type="submit" class="w-full h-11 rounded-xl bg-primary-container hover:bg-primary text-on-primary font-label-md font-bold flex items-center justify-center gap-1.5 shadow-sm transition-all cursor-pointer">
                    <span class="material-symbols-outlined text-[20px]">search</span>
                    <span>{{ __('Track') }}</span>
                </button>
            </div>
        </form>
    </div>

    @if($tracking || $order)
        @php
            $currentCarrier = $tracking->carrier ?? ($order->tracking_carrier ?? 'Speedaf Express');
            $trackingCode = $tracking->tracking_code ?? ($order->tracking_number ?? 'In Progress');
            $trackingStatus = $tracking->status ?? ($order->fulfillment_status ?? 'in_transit');
            $progressPct = $tracking ? $tracking->progressPercentage() : match($trackingStatus) {
                'delivered' => 100,
                'shipped' => 65,
                'supplier_ordered' => 40,
                default => 25
            };
            $checkpoints = $tracking ? $tracking->checkpoints : collect([]);
        @endphp

        <!-- Tracking Result Card -->
        <div class="bg-surface-container-lowest border border-surface-container rounded-2xl p-5 sm:p-8 shadow-sm">
            
            <!-- Top Header & Carrier Details -->
            <div class="flex items-center justify-between border-b border-surface-container pb-5 mb-6 flex-wrap gap-4">
                <div>
                    <div class="flex items-center gap-2 flex-wrap mb-1">
                        <span class="px-2.5 py-0.5 rounded-md text-[11px] font-bold uppercase bg-surface-container-high text-primary tracking-wide">
                            {{ $currentCarrier }}
                        </span>
                        @if($order)
                            <span class="text-xs text-on-surface-variant font-medium">
                                {{ __('Linked to Order') }} #{{ $order->order_number }}
                            </span>
                        @endif
                    </div>
                    <div class="flex items-center gap-3">
                        <h2 class="text-xl sm:text-2xl font-mono font-extrabold text-on-surface tracking-tight">
                            {{ $trackingCode }}
                        </h2>
                        <button type="button" onclick="navigator.clipboard.writeText('{{ $trackingCode }}'); alert('Tracking code copied to clipboard!');" title="Copy tracking code" class="text-xs px-2 py-1 rounded bg-surface-container text-on-surface-variant hover:text-primary transition-colors flex items-center gap-1">
                            <span class="material-symbols-outlined text-[14px]">content_copy</span>
                            <span>{{ __('Copy') }}</span>
                        </button>
                    </div>
                </div>

                <div class="flex items-center gap-2 flex-wrap">
                    <span class="px-3.5 py-1.5 rounded-full text-xs font-bold uppercase tracking-wider {{ $trackingStatus === 'delivered' ? 'bg-emerald-100 text-emerald-800' : 'bg-primary-container text-on-primary' }}">
                        @if($trackingStatus === 'delivered')
                            {{ __('Delivered') }}
                        @elseif($trackingStatus === 'shipped' || $trackingStatus === 'in_transit')
                            {{ __('In Transit') }}
                        @elseif($trackingStatus === 'dispatched')
                            {{ __('Dispatched') }}
                        @else
                            {{ ucwords(str_replace('_', ' ', $trackingStatus)) }}
                        @endif
                    </span>

                    @if(!empty($tracking->carrier_tracking_url) || !empty($order->tracking_url))
                        <a href="{{ $tracking->carrier_tracking_url ?? $order->tracking_url }}" target="_blank" class="px-3 py-1.5 rounded-lg border border-surface-container hover:bg-surface-container-low text-xs font-semibold text-primary inline-flex items-center gap-1 transition-all">
                            <span>{{ __('Track on') }} {{ $currentCarrier }}</span>
                            <span class="material-symbols-outlined text-[15px]">open_in_new</span>
                        </a>
                    @endif
                </div>
            </div>

            <!-- Carrier & Route Highlights Grid -->
            <div class="bg-surface-container-low border border-surface-container rounded-xl p-4 sm:p-5 mb-8 grid grid-cols-1 sm:grid-cols-4 gap-4">
                <div>
                    <span class="text-xs text-secondary block mb-1">{{ __('Carrier Provider') }}</span>
                    <strong class="text-sm font-bold text-on-surface flex items-center gap-1">
                        <span class="material-symbols-outlined text-primary text-[16px]">local_shipping</span>
                        <span>{{ $currentCarrier }}</span>
                    </strong>
                </div>
                <div>
                    <span class="text-xs text-secondary block mb-1">{{ __('Origin / Hub') }}</span>
                    <strong class="text-sm font-bold text-on-surface truncate block" title="{{ $tracking->origin ?? 'Global Sort Hub' }}">
                        {{ $tracking->origin ?? 'Global Sort Hub' }}
                    </strong>
                </div>
                <div>
                    <span class="text-xs text-secondary block mb-1">{{ __('Destination') }}</span>
                    <strong class="text-sm font-bold text-on-surface truncate block" title="{{ $tracking->destination ?? ($order ? $order->city . ', ' . $order->country : 'Customer Address') }}">
                        {{ $tracking->destination ?? ($order ? $order->city . ', ' . $order->country : __('Destination')) }}
                    </strong>
                </div>
                <div>
                    <span class="text-xs text-secondary block mb-1">{{ __('Estimated Arrival') }}</span>
                    <strong class="text-sm font-bold text-primary">
                        @if($tracking && $tracking->estimated_delivery)
                            {{ $tracking->estimated_delivery->format('M d, Y') }}
                        @else
                            {{ now()->addDays(4)->format('M d') }} – {{ now()->addDays(7)->format('M d') }}
                        @endif
                    </strong>
                </div>
            </div>

            <!-- Step Progression Bar -->
            <div class="relative py-6 mb-10 px-2 sm:px-6">
                <!-- Background Line -->
                <div class="absolute top-1/2 left-8 right-8 h-1 bg-surface-container -translate-y-1/2 rounded-full"></div>
                <!-- Active Progress Line -->
                <div class="absolute top-1/2 left-8 h-1 bg-primary -translate-y-1/2 rounded-full transition-all duration-700" style="width: calc({{ $progressPct }}% - 2rem);"></div>

                <div class="relative flex justify-between items-center text-center">
                    <!-- Step 1: Registered -->
                    <div class="flex flex-col items-center">
                        <div class="w-8 h-8 rounded-full bg-primary text-on-primary flex items-center justify-center text-sm font-bold shadow-sm">
                            <span class="material-symbols-outlined text-[18px]">check</span>
                        </div>
                        <span class="text-[11px] sm:text-xs font-bold text-on-surface pt-2">{{ __('Registered') }}</span>
                    </div>

                    <!-- Step 2: Picked Up -->
                    <div class="flex flex-col items-center">
                        <div class="w-8 h-8 rounded-full {{ $progressPct >= 40 ? 'bg-primary text-on-primary' : 'bg-surface-container text-secondary' }} flex items-center justify-center text-sm font-bold shadow-sm">
                            <span class="material-symbols-outlined text-[18px]">inventory_2</span>
                        </div>
                        <span class="text-[11px] sm:text-xs font-bold {{ $progressPct >= 40 ? 'text-primary' : 'text-secondary' }} pt-2">{{ __('Dispatched') }}</span>
                    </div>

                    <!-- Step 3: In Transit -->
                    <div class="flex flex-col items-center">
                        <div class="w-8 h-8 rounded-full {{ $progressPct >= 65 ? 'bg-primary text-on-primary ring-4 ring-primary/20 animate-pulse' : 'bg-surface-container text-secondary' }} flex items-center justify-center text-sm font-bold shadow-sm">
                            <span class="material-symbols-outlined text-[18px]">flight_takeoff</span>
                        </div>
                        <span class="text-[11px] sm:text-xs font-bold {{ $progressPct >= 65 ? 'text-primary' : 'text-secondary' }} pt-2">{{ __('In Transit') }}</span>
                    </div>

                    <!-- Step 4: Out for Delivery -->
                    <div class="flex flex-col items-center">
                        <div class="w-8 h-8 rounded-full {{ $progressPct >= 85 ? 'bg-primary text-on-primary ring-4 ring-primary/20' : 'bg-surface-container text-secondary' }} flex items-center justify-center text-sm font-bold shadow-sm">
                            <span class="material-symbols-outlined text-[18px]">local_shipping</span>
                        </div>
                        <span class="text-[11px] sm:text-xs font-bold {{ $progressPct >= 85 ? 'text-primary' : 'text-secondary' }} pt-2">{{ __('Out for Delivery') }}</span>
                    </div>

                    <!-- Step 5: Delivered -->
                    <div class="flex flex-col items-center">
                        <div class="w-8 h-8 rounded-full {{ $progressPct >= 100 ? 'bg-emerald-600 text-white' : 'bg-surface-container text-secondary' }} flex items-center justify-center text-sm font-bold shadow-sm">
                            <span class="material-symbols-outlined text-[18px]">done_all</span>
                        </div>
                        <span class="text-[11px] sm:text-xs font-bold {{ $progressPct >= 100 ? 'text-emerald-700' : 'text-secondary' }} pt-2">{{ __('Delivered') }}</span>
                    </div>
                </div>
            </div>

            <!-- Detailed Tracking History Timeline -->
            <div class="border-t border-surface-container pt-8 mb-8">
                <div class="flex items-center justify-between mb-6 flex-wrap gap-2">
                    <div class="flex items-center gap-2">
                        <span class="material-symbols-outlined text-primary text-[22px]">timeline</span>
                        <h3 class="text-base sm:text-lg font-extrabold text-on-surface tracking-tight">
                            {{ __('Live Tracking History & Milestone Checkpoints') }}
                        </h3>
                    </div>
                    <span class="text-xs text-on-surface-variant bg-surface-container-low px-2.5 py-1 rounded-full border border-surface-container">
                        {{ __('Updated in real-time') }}
                    </span>
                </div>

                @if($checkpoints->isNotEmpty())
                    <div class="relative pl-6 sm:pl-8 space-y-6 before:content-[''] before:absolute before:left-3 before:top-3 before:bottom-3 before:w-0.5 before:bg-surface-container">
                        @foreach($checkpoints as $index => $cp)
                            @php
                                $isLatest = ($index === 0);
                            @endphp
                            <div class="relative group">
                                <!-- Marker Dot -->
                                <div class="absolute -left-[19px] sm:-left-[27px] top-1.5 w-3.5 h-3.5 rounded-full {{ $isLatest ? 'bg-primary ring-4 ring-primary/25 animate-pulse' : 'bg-secondary/40' }} transition-all"></div>

                                <div class="bg-surface-container-lowest border {{ $isLatest ? 'border-primary/40 bg-primary/5' : 'border-surface-container' }} rounded-xl p-4 transition-all">
                                    <div class="flex items-start justify-between flex-wrap gap-2 mb-1.5">
                                        <div class="flex items-center gap-2 flex-wrap">
                                            <strong class="text-sm font-bold text-on-surface">{{ $cp->title }}</strong>
                                            @if($cp->carrier)
                                                <span class="text-[10px] uppercase font-bold tracking-wider px-2 py-0.5 rounded bg-surface-container text-primary">
                                                    {{ $cp->carrier }}
                                                </span>
                                            @endif
                                            @if($isLatest)
                                                <span class="text-[10px] font-bold uppercase tracking-wider px-2 py-0.5 rounded bg-primary text-on-primary">
                                                    {{ __('Latest Update') }}
                                                </span>
                                            @endif
                                        </div>

                                        <span class="text-xs font-medium text-secondary whitespace-nowrap">
                                            {{ $cp->checkpoint_time->format('M d, Y • h:i A') }}
                                        </span>
                                    </div>

                                    @if($cp->location)
                                        <div class="flex items-center gap-1 text-xs text-secondary mb-2">
                                            <span class="material-symbols-outlined text-[14px] text-primary">location_on</span>
                                            <span>{{ $cp->location }}</span>
                                        </div>
                                    @endif

                                    @if($cp->description)
                                        <p class="text-xs sm:text-body-sm text-on-surface-variant leading-relaxed">
                                            {{ $cp->description }}
                                        </p>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <!-- Fallback if no checkpoints entered yet -->
                    <div class="bg-surface-container-low border border-surface-container rounded-xl p-6 text-center">
                        <span class="material-symbols-outlined text-secondary text-3xl mb-2">pending</span>
                        <p class="text-sm font-semibold text-on-surface">Tracking initialized with carrier {{ $currentCarrier }}</p>
                        <p class="text-xs text-secondary mt-1">{{ __('No tracking checkpoints have been recorded for this shipment yet. Check back shortly.') }}</p>
                    </div>
                @endif
            </div>

            <!-- Ordered Items / Package Contents (if linked to order) -->
            @if($order && $order->items->isNotEmpty())
                <div class="border-t border-surface-container pt-6">
                    <h3 class="text-xs font-bold uppercase tracking-wider text-secondary mb-4 flex items-center gap-1.5">
                        <span class="material-symbols-outlined text-[16px]">inventory_2</span>
                        <span>{{ __('Items in this Order') }} ({{ $order->items->count() }} {{ __('items') }})</span>
                    </h3>
                    <div class="divide-y divide-surface-container">
                        @foreach($order->items as $item)
                            <div class="py-3 flex items-center justify-between gap-3">
                                <div class="flex items-center gap-3 min-w-0">
                                    <img src="{{ $item->product_image ?? 'https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=200' }}" alt="{{ $item->product_title }}" class="w-12 h-12 rounded-xl object-cover border border-surface-container bg-surface-container-low shrink-0">
                                    <div class="truncate">
                                        <span class="text-xs sm:text-sm font-bold text-on-surface block truncate">{{ $item->product_title }}</span>
                                        <span class="text-[11px] text-secondary">{{ __('Qty:') }} {{ $item->quantity }} • ${{ number_format($item->unit_price, 2) }}</span>
                                    </div>
                                </div>
                                <span class="text-xs sm:text-sm font-bold text-on-surface shrink-0">${{ number_format($item->total_price, 2) }}</span>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif

        </div>
    @endif
</div>
@endsection