@extends('layouts.app')

@section('title', 'Track Order Status — Divine Drops')

@section('content')

    <x-breadcrumb :items="[['label' => 'Live Shipment Order Tracking']]" />

    <section class="py-12 lg:py-16 bg-cream-50 min-h-[70vh]">
        <div class="container-shop max-w-4xl mx-auto">
            
            {{-- Header --}}
            <div class="text-center max-w-xl mx-auto mb-10">
                <span style="display: inline-block; background: #e0eff9; color: #186297; font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; padding: 4px 12px; border-radius: 20px; border: 1px solid #b9dff3; margin-bottom: 12px;">
                    LIVE SHIPMENT TRACKER
                </span>
                <h1 class="font-serif text-3xl sm:text-4xl font-medium text-ink-900" style="margin: 0; color: #0f172a;">Track Your Package</h1>
                <p class="text-sm text-ink-500 mt-2">Enter your Order Reference Number (e.g., DIV-39538) to view real-time courier tracking updates.</p>
            </div>

            {{-- Search Box Card --}}
            <div class="bg-white border border-cream-200 rounded-2xl p-6 sm:p-8 shadow-xs mb-10">
                <form action="{{ route('order.track.search') }}" method="POST" class="flex flex-col sm:flex-row gap-3">
                    @csrf
                    <input type="text" name="order_number" value="{{ old('order_number', $searchedNumber) }}" placeholder="Enter Order Number (e.g. DIV-39538)" class="field-input flex-1 uppercase font-bold tracking-wider !py-3 !text-base" required>
                    <button type="submit" class="btn-primary !px-8 !py-3 cursor-pointer justify-center text-sm font-bold">
                        <x-icon name="truck" class="h-5 w-5" /> Track Package
                    </button>
                </form>

                @if(!$order && $searchedNumber)
                    <div class="mt-4 p-4 bg-red-50 border border-red-200 rounded-xl text-center text-xs font-semibold text-red-700">
                        ⚠️ No order found matching "{{ $searchedNumber }}". Please check your order confirmation email or SMS.
                    </div>
                @endif
            </div>

            {{-- Order Tracking Results --}}
            @if($order)
                @php
                    $status = strtolower($order->order_status);
                    $steps = [
                        'pending' => 1,
                        'processing' => 2,
                        'shipped' => 3,
                        'delivered' => 4,
                        'cancelled' => 0
                    ];
                    $currentStep = $steps[$status] ?? 1;
                @endphp

                <div class="bg-white border border-cream-200 rounded-2xl p-6 sm:p-8 shadow-xs mb-10">
                    
                    {{-- Status Banner --}}
                    <div class="flex flex-wrap items-center justify-between border-b border-cream-200 pb-6 mb-8 gap-4">
                        <div>
                            <span class="text-xs text-ink-400 uppercase font-bold tracking-wider block">Order Reference</span>
                            <h2 class="font-serif text-2xl font-bold text-ink-900 mt-0.5" style="color: #186297;">#{{ $order->order_number }}</h2>
                            <p class="text-xs text-ink-500 mt-1">Placed on {{ $order->created_at ? $order->created_at->format('F d, Y \a\t h:i A') : 'Recent' }}</p>
                        </div>

                        <div class="text-right">
                            <span class="text-xs text-ink-400 uppercase font-bold tracking-wider block">Shipment Status</span>
                            <span class="inline-block mt-1 px-4 py-1.5 text-xs font-bold rounded-full uppercase tracking-wider
                                @if($status === 'delivered') bg-green-100 text-green-800 border border-green-300
                                @elseif($status === 'shipped') bg-blue-100 text-blue-800 border border-blue-300
                                @elseif($status === 'processing') bg-purple-100 text-purple-800 border border-purple-300
                                @elseif($status === 'cancelled') bg-red-100 text-red-800 border border-red-300
                                @else bg-amber-100 text-amber-800 border border-amber-300 @endif">
                                {{ ucfirst($order->order_status) }}
                            </span>
                        </div>
                    </div>

                    {{-- Live 4-Step Progress Bar --}}
                    @if($status === 'cancelled')
                        <div class="p-6 bg-red-50 border border-red-200 rounded-xl text-center mb-8">
                            <h3 class="font-serif text-lg font-bold text-red-800">This Order Has Been Cancelled</h3>
                            <p class="text-xs text-red-600 mt-1">If you have any questions regarding refunds or cancellations, please contact customer support.</p>
                        </div>
                    @else
                        <div class="mb-10 px-2 sm:px-6">
                            <div style="position: relative; display: flex; align-items: center; justify-content: space-between;">
                                {{-- Background Connecting Line --}}
                                <div style="position: absolute; top: 20px; left: 0; width: 100%; height: 4px; background-color: #e2e8f0; z-index: 0;"></div>
                                <div style="position: absolute; top: 20px; left: 0; height: 4px; background-color: #186297; transition: all 0.5s ease; z-index: 0; width: {{ (($currentStep - 1) / 3) * 100 }}%;"></div>

                                {{-- Step 1: Placed --}}
                                <div style="position: relative; z-index: 10; text-align: center; flex: 1;">
                                    @if($currentStep >= 1)
                                        <div style="width: 42px; height: 42px; border-radius: 50%; background-color: #186297; color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; margin: 0 auto; box-shadow: 0 0 0 4px #e0eff9;">
                                            {{ $currentStep > 1 ? '✓' : '1' }}
                                        </div>
                                    @else
                                        <div style="width: 42px; height: 42px; border-radius: 50%; background-color: #f1f5f9; color: #94a3b8; border: 2px solid #cbd5e1; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; margin: 0 auto;">
                                            1
                                        </div>
                                    @endif
                                    <div style="margin-top: 8px; font-size: 12px; font-weight: 700; color: {{ $currentStep >= 1 ? '#0f172a' : '#94a3b8' }};">Order Placed</div>
                                    <div style="font-size: 10px; color: #64748b; margin-top: 2px;">Confirmed</div>
                                </div>

                                {{-- Step 2: Processing --}}
                                <div style="position: relative; z-index: 10; text-align: center; flex: 1;">
                                    @if($currentStep >= 2)
                                        <div style="width: 42px; height: 42px; border-radius: 50%; background-color: #186297; color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; margin: 0 auto; box-shadow: 0 0 0 4px #e0eff9;">
                                            {{ $currentStep > 2 ? '✓' : '2' }}
                                        </div>
                                    @else
                                        <div style="width: 42px; height: 42px; border-radius: 50%; background-color: #f1f5f9; color: #94a3b8; border: 2px solid #cbd5e1; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; margin: 0 auto;">
                                            2
                                        </div>
                                    @endif
                                    <div style="margin-top: 8px; font-size: 12px; font-weight: 700; color: {{ $currentStep >= 2 ? '#0f172a' : '#94a3b8' }};">Packed</div>
                                    <div style="font-size: 10px; color: #64748b; margin-top: 2px;">Central Warehouse</div>
                                </div>

                                {{-- Step 3: Shipped --}}
                                <div style="position: relative; z-index: 10; text-align: center; flex: 1;">
                                    @if($currentStep >= 3)
                                        <div style="width: 42px; height: 42px; border-radius: 50%; background-color: #186297; color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; margin: 0 auto; box-shadow: 0 0 0 4px #e0eff9;">
                                            {{ $currentStep > 3 ? '✓' : '3' }}
                                        </div>
                                    @else
                                        <div style="width: 42px; height: 42px; border-radius: 50%; background-color: #f1f5f9; color: #94a3b8; border: 2px solid #cbd5e1; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; margin: 0 auto;">
                                            3
                                        </div>
                                    @endif
                                    <div style="margin-top: 8px; font-size: 12px; font-weight: 700; color: {{ $currentStep >= 3 ? '#0f172a' : '#94a3b8' }};">In Transit</div>
                                    <div style="font-size: 10px; color: #64748b; margin-top: 2px;">Express Air Courier</div>
                                </div>

                                {{-- Step 4: Delivered --}}
                                <div style="position: relative; z-index: 10; text-align: center; flex: 1;">
                                    @if($currentStep >= 4)
                                        <div style="width: 42px; height: 42px; border-radius: 50%; background-color: #186297; color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; margin: 0 auto; box-shadow: 0 0 0 4px #e0eff9;">
                                            ✓
                                        </div>
                                    @else
                                        <div style="width: 42px; height: 42px; border-radius: 50%; background-color: #f1f5f9; color: #94a3b8; border: 2px solid #cbd5e1; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; margin: 0 auto;">
                                            4
                                        </div>
                                    @endif
                                    <div style="margin-top: 8px; font-size: 12px; font-weight: 700; color: {{ $currentStep >= 4 ? '#0f172a' : '#94a3b8' }};">Delivered</div>
                                    <div style="font-size: 10px; color: #64748b; margin-top: 2px;">Doorstep Handover</div>
                                </div>
                            </div>
                        </div>
                    @endif

                    {{-- Shipment & Address Grid --}}
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
                        <div class="bg-cream-50 border border-cream-200 rounded-xl p-5">
                            <span class="text-[11px] font-bold text-moss-800 uppercase tracking-wider block mb-2">Delivery Address</span>
                            <div class="font-bold text-sm text-ink-900">{{ $order->customer_name }}</div>
                            <div class="text-xs text-ink-700 leading-relaxed mt-1">
                                {{ $order->shipping_address }}<br>
                                {{ $order->city }}, {{ $order->state }} — <strong class="text-ink-900">{{ $order->pincode }}</strong><br>
                                <strong>Phone:</strong> {{ $order->customer_phone }}
                            </div>
                        </div>

                        <div class="bg-cream-50 border border-cream-200 rounded-xl p-5">
                            <span class="text-[11px] font-bold text-moss-800 uppercase tracking-wider block mb-2">Courier Tracking Info</span>
                            <div class="text-xs text-ink-700 space-y-1.5">
                                <div><strong>Courier Partner:</strong> Express Air Surface Logistics</div>
                                <div><strong>Airway Bill (AWB):</strong> <span class="font-mono font-bold text-moss-900">AWB-DIV-{{ substr(md5($order->id), 0, 8) }}</span></div>
                                <div><strong>Payment Method:</strong> {{ strtoupper($order->payment_method) }} ({{ ucfirst($order->payment_status) }})</div>
                                <div class="pt-1 text-moss-800 font-semibold">
                                    🚀 Estimated Delivery: {{ $order->created_at ? $order->created_at->addDays(4)->format('M d, Y') : '3-5 Business Days' }}
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Order Items Table --}}
                    <div>
                        <h3 class="font-serif text-lg font-bold text-ink-900 mb-4">Package Contents</h3>
                        <div class="divide-y divide-cream-200 border-y border-cream-200">
                            @foreach($order->items as $item)
                                <div class="py-4 flex items-center justify-between text-sm">
                                    <div>
                                        <div class="font-bold text-ink-900">{{ $item->product_name }}</div>
                                        <div class="text-xs text-ink-500 mt-0.5">Size: <span class="font-semibold text-ink-700">{{ $item->size ?? 'Standard' }}</span> &middot; Quantity: {{ $item->quantity }}</div>
                                    </div>
                                    <div class="font-bold text-ink-900">₹{{ number_format($item->subtotal, 2) }}</div>
                                </div>
                            @endforeach
                        </div>
                        <div class="flex justify-between items-center pt-4 text-sm font-bold text-ink-900">
                            <span>Total Amount Paid:</span>
                            <span class="font-serif text-xl text-moss-900">₹{{ number_format($order->total_amount, 2) }}</span>
                        </div>
                    </div>

                </div>
            @endif

        </div>
    </section>

@endsection