@extends('layouts.app')

@section('title', 'Track Order #' . $order->order_number . ' - ' . ($shopSettings['shop_name'] ?? 'Orange Groceries'))
@section('meta_robots', 'noindex, nofollow')
@section('canonical', route('orders.track', $order->order_number))

@section('content')
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-8">
    
    <!-- Top Header -->
    <div class="bg-white rounded-3xl p-6 border border-slate-200/80 shadow-sm flex flex-col sm:flex-row items-center justify-between gap-4">
        <div>
            <div class="flex items-center gap-2 mb-1">
                <span class="text-xs font-bold text-slate-400">Order Number:</span>
                <span class="text-sm font-extrabold text-slate-900 font-mono">#{{ $order->order_number }}</span>
            </div>
            <p class="text-xs text-slate-500 font-medium">Placed on {{ $order->placed_at ? $order->placed_at->format('d M Y, h:i A') : $order->created_at->format('d M Y, h:i A') }}</p>
        </div>

        <div class="flex items-center gap-3">
            <a href="{{ route('orders.invoice', $order->order_number) }}" target="_blank" class="px-5 py-2.5 bg-slate-900 hover:bg-slate-800 text-white font-extrabold text-xs rounded-2xl shadow transition flex items-center gap-2">
                <i class="fa-solid fa-file-invoice"></i> Download Invoice
            </a>
        </div>
    </div>

    <!-- Flipkart-style Visual Order Progress Bar -->
    <div class="bg-white rounded-3xl p-8 border border-slate-200/80 shadow-xl shadow-slate-200/40 space-y-8">
        <h3 class="font-extrabold text-slate-900 text-base">Live Order Delivery Status</h3>

        <!-- Status Progress Bar -->
        <div class="relative py-4">
            <!-- Background Line -->
            <div class="absolute top-1/2 left-4 right-4 -translate-y-1/2 h-2 bg-slate-100 rounded-full z-0"></div>
            <!-- Active Fill Line -->
            <div class="absolute top-1/2 left-4 -translate-y-1/2 h-2 bg-gradient-to-r from-brand-500 to-emerald-600 rounded-full transition-all duration-700 z-0" style="width: {{ $progress }}%"></div>

            <!-- Steps Icons -->
            <div class="relative z-10 flex justify-between items-center text-center">
                
                <!-- Step 1: Placed -->
                <div class="flex flex-col items-center">
                    <div class="w-10 h-10 rounded-full flex items-center justify-center font-bold text-sm shadow-md {{ $progress >= 20 ? 'bg-brand-600 text-white ring-4 ring-brand-100' : 'bg-slate-200 text-slate-500' }}">
                        <i class="fa-solid fa-check"></i>
                    </div>
                    <span class="text-xs font-extrabold text-slate-800 mt-2">Order Placed</span>
                    <span class="text-[10px] text-slate-400">{{ $order->placed_at ? $order->placed_at->format('h:i A') : '' }}</span>
                </div>

                <!-- Step 2: Accepted -->
                <div class="flex flex-col items-center">
                    <div class="w-10 h-10 rounded-full flex items-center justify-center font-bold text-sm shadow-md {{ $progress >= 40 ? 'bg-brand-600 text-white ring-4 ring-brand-100' : 'bg-slate-200 text-slate-500' }}">
                        <i class="fa-solid fa-store"></i>
                    </div>
                    <span class="text-xs font-extrabold text-slate-800 mt-2">Accepted</span>
                    <span class="text-[10px] text-slate-400">{{ $order->accepted_at ? $order->accepted_at->format('h:i A') : '' }}</span>
                </div>

                <!-- Step 3: Packed -->
                <div class="flex flex-col items-center">
                    <div class="w-10 h-10 rounded-full flex items-center justify-center font-bold text-sm shadow-md {{ $progress >= 60 ? 'bg-brand-600 text-white ring-4 ring-brand-100' : 'bg-slate-200 text-slate-500' }}">
                        <i class="fa-solid fa-box-open"></i>
                    </div>
                    <span class="text-xs font-extrabold text-slate-800 mt-2">Packed</span>
                    <span class="text-[10px] text-slate-400">{{ $order->packed_at ? $order->packed_at->format('h:i A') : '' }}</span>
                </div>

                <!-- Step 4: Out For Delivery -->
                <div class="flex flex-col items-center">
                    <div class="w-10 h-10 rounded-full flex items-center justify-center font-bold text-sm shadow-md {{ $progress >= 80 ? 'bg-brand-600 text-white ring-4 ring-brand-100' : 'bg-slate-200 text-slate-500' }}">
                        <i class="fa-solid fa-person-biking"></i>
                    </div>
                    <span class="text-xs font-extrabold text-slate-800 mt-2">Out For Delivery</span>
                    <span class="text-[10px] text-slate-400">{{ $order->out_for_delivery_at ? $order->out_for_delivery_at->format('h:i A') : '' }}</span>
                </div>

                <!-- Step 5: Delivered -->
                <div class="flex flex-col items-center">
                    <div class="w-10 h-10 rounded-full flex items-center justify-center font-bold text-sm shadow-md {{ $progress >= 100 ? 'bg-emerald-600 text-white ring-4 ring-emerald-100' : 'bg-slate-200 text-slate-500' }}">
                        <i class="fa-solid fa-house-circle-check"></i>
                    </div>
                    <span class="text-xs font-extrabold text-slate-800 mt-2">Delivered</span>
                    <span class="text-[10px] text-slate-400">{{ $order->delivered_at ? $order->delivered_at->format('h:i A') : '' }}</span>
                </div>

            </div>
        </div>

        <!-- Assigned Delivery Partner Card -->
        @if($order->deliveryPartner)
            <div class="bg-emerald-50/60 p-5 rounded-2xl border border-emerald-200/80 flex items-center justify-between">
                <div class="flex items-center gap-4">
                    @if($order->deliveryPartner->photo)
                        <img src="{{ filter_var($order->deliveryPartner->photo, FILTER_VALIDATE_URL) ? $order->deliveryPartner->photo : asset($order->deliveryPartner->photo) }}" class="w-12 h-12 rounded-2xl object-cover border-2 border-emerald-500 shadow">
                    @else
                        <div class="w-12 h-12 rounded-2xl bg-emerald-600 text-white font-bold flex items-center justify-center text-xl shadow">
                            <i class="fa-solid fa-motorcycle"></i>
                        </div>
                    @endif
                    <div>
                        <div class="text-xs font-semibold text-emerald-800 uppercase tracking-wider">Assigned Delivery Partner</div>
                        <div class="font-extrabold text-slate-900 text-sm">{{ $order->deliveryPartner->name }}</div>
                        <div class="text-xs text-slate-500 font-medium">{{ $order->deliveryPartner->vehicle_details }} ({{ $order->deliveryPartner->vehicle_number ?? 'Vehicle' }})</div>
                    </div>
                </div>
                <a href="tel:{{ $order->deliveryPartner->phone }}" class="px-4 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white font-bold text-xs rounded-xl shadow transition flex items-center gap-2">
                    <i class="fa-solid fa-phone"></i> Call Partner
                </a>
            </div>
        @endif

        <!-- Delivery Verification OTP Card (When Out For Delivery) -->
        @if($order->order_status === 'out_for_delivery' && $order->delivery_otp)
            <div class="bg-gradient-to-r from-amber-500/10 via-amber-500/5 to-amber-500/10 border-2 border-dashed border-amber-400 p-6 rounded-3xl flex flex-col sm:flex-row items-center justify-between gap-6 shadow-sm">
                <div class="flex items-center gap-4">
                    <div class="w-14 h-14 rounded-2xl bg-amber-500 text-white flex items-center justify-center text-2xl shadow-lg shadow-amber-500/30 shrink-0">
                        <i class="fa-solid fa-shield-halved"></i>
                    </div>
                    <div>
                        <div class="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full bg-amber-100 text-amber-800 text-[11px] font-extrabold uppercase tracking-wider mb-1">
                            <i class="fa-solid fa-lock"></i> Delivery Verification OTP
                        </div>
                        <h4 class="font-extrabold text-slate-900 text-base">Share this OTP with Delivery Partner</h4>
                        <p class="text-xs text-slate-500 font-medium">Please provide this 4-digit code to <strong class="text-slate-800">{{ $order->deliveryPartner->name ?? 'your delivery partner' }}</strong> when they arrive with your package.</p>
                    </div>
                </div>
                <div class="flex flex-col items-center justify-center bg-white px-8 py-3 rounded-2xl border border-amber-200 shadow-md shrink-0">
                    <span class="text-[10px] font-bold uppercase text-slate-400 tracking-widest">Delivery OTP</span>
                    <span class="text-3xl font-black text-amber-600 font-mono tracking-widest">{{ $order->delivery_otp }}</span>
                </div>
            </div>
        @endif

        <!-- Delivery Success & Payment Collection Banner (When Delivered) -->
        @if($order->order_status === 'delivered')
            <div class="bg-gradient-to-r from-emerald-500/10 via-emerald-500/5 to-teal-500/10 border border-emerald-200 p-6 rounded-3xl space-y-4 shadow-sm">
                <div class="flex items-start gap-4">
                    <div class="w-14 h-14 rounded-2xl bg-emerald-600 text-white flex items-center justify-center text-2xl shadow-lg shadow-emerald-600/30 shrink-0">
                        <i class="fa-solid fa-circle-check"></i>
                    </div>
                    <div class="space-y-1 w-full">
                        <div class="flex items-center gap-2">
                            <span class="text-xs font-extrabold uppercase px-2.5 py-0.5 rounded-full bg-emerald-100 text-emerald-800">Delivery Completed</span>
                            <span class="text-xs text-slate-400 font-medium">{{ $order->delivered_at ? $order->delivered_at->format('d M Y, h:i A') : '' }}</span>
                        </div>
                        <h4 class="font-extrabold text-slate-900 text-lg">Order Delivered Successfully! 🎉</h4>

                        @if(strtolower($order->payment_method) === 'cod')
                            <div class="mt-3 p-4 bg-white/80 rounded-2xl border border-emerald-200/80 space-y-1 text-sm">
                                <div class="font-extrabold text-slate-900 flex items-center gap-2">
                                    <i class="fa-solid fa-hand-holding-dollar text-emerald-600 text-lg"></i>
                                    <span>Cash Payment to Delivery Partner</span>
                                </div>
                                <p class="text-slate-700 text-xs font-semibold">
                                    Please pay <strong class="text-emerald-700 text-sm font-extrabold">₹{{ number_format($order->total_amount, 2) }}</strong> in cash to delivery partner <span class="font-bold text-slate-900">{{ $order->deliveryPartner->name ?? 'Delivery Executive' }}</span>.
                                </p>
                                <p class="text-[11px] text-emerald-700 font-bold flex items-center gap-1 pt-1">
                                    <i class="fa-solid fa-heart"></i> Thank you for shopping with {{ $shopSettings['shop_name'] ?? 'Orange Groceries' }}! Have a wonderful day!
                                </p>
                            </div>
                        @else
                            <div class="mt-3 p-4 bg-white/80 rounded-2xl border border-emerald-200/80 space-y-1 text-sm">
                                <div class="font-extrabold text-slate-900 flex items-center gap-2">
                                    <i class="fa-solid fa-circle-check text-emerald-600 text-lg"></i>
                                    <span>Online Payment Pre-paid</span>
                                </div>
                                <p class="text-slate-700 text-xs font-semibold">
                                    Payment of <strong class="text-emerald-700 text-sm font-extrabold">₹{{ number_format($order->total_amount, 2) }}</strong> was completed online via {{ strtoupper($order->payment_method) }}. Order handed over by <span class="font-bold text-slate-900">{{ $order->deliveryPartner->name ?? 'Delivery Partner' }}</span>.
                                </p>
                                <p class="text-[11px] text-emerald-700 font-bold flex items-center gap-1 pt-1">
                                    <i class="fa-solid fa-sparkles"></i> Thank you for your order! Enjoy your fresh groceries!
                                </p>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        @endif
    </div>

    <!-- Items & Payment Breakdown Grid -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        
        <!-- Left Column: Ordered Items List -->
        <div class="md:col-span-2 bg-white rounded-3xl p-6 border border-slate-200/80 shadow-sm space-y-4">
            <h4 class="font-extrabold text-slate-900 text-base border-b border-slate-100 pb-3">Ordered Items</h4>
            <div class="divide-y divide-slate-100">
                @foreach($order->items as $item)
                    <div class="py-3 flex items-center justify-between text-xs">
                        <div class="flex items-center gap-3">
                            <img src="{{ $item->product->image ?? 'https://images.unsplash.com/photo-1542838132-92c53300491e?auto=format&fit=crop&w=100&q=80' }}" class="w-12 h-12 object-contain rounded-xl bg-slate-50 border p-1">
                            <div>
                                <div class="font-bold text-slate-900 text-sm">{{ $item->product_name }}</div>
                                <div class="text-slate-400 font-medium">Qty: {{ $item->quantity }} × ₹{{ number_format($item->unit_price, 2) }}</div>
                            </div>
                        </div>
                        <div class="font-extrabold text-slate-900 text-sm">₹{{ number_format($item->total_price, 2) }}</div>
                    </div>
                @endforeach
            </div>
        </div>

        <!-- Right Column: Payment Details & Delivery Address -->
        <div class="space-y-6">
            
            <!-- Payment Mode & Summary Card -->
            <div class="bg-white rounded-3xl p-6 border border-slate-200/80 shadow-sm space-y-4">
                <h4 class="font-extrabold text-slate-900 text-base border-b border-slate-100 pb-3 flex items-center justify-between">
                    <span>Payment Details</span>
                    @if($order->payment_status === 'paid')
                        <span class="px-2.5 py-0.5 rounded-full bg-emerald-100 text-emerald-800 font-extrabold uppercase text-[10px] flex items-center gap-1"><i class="fa-solid fa-circle-check"></i> Paid</span>
                    @elseif($order->payment_status === 'failed')
                        <span class="px-2.5 py-0.5 rounded-full bg-rose-100 text-rose-800 font-extrabold uppercase text-[10px] flex items-center gap-1"><i class="fa-solid fa-circle-xmark"></i> Failed</span>
                    @else
                        <span class="px-2.5 py-0.5 rounded-full bg-amber-100 text-amber-800 font-extrabold uppercase text-[10px] flex items-center gap-1"><i class="fa-solid fa-clock"></i> Pending</span>
                    @endif
                </h4>

                <div class="text-xs space-y-3 font-semibold">
                    <div>
                        <span class="text-slate-400 font-medium block">Payment Method</span>
                        <div class="mt-1">
                            @if($order->payment_method === 'razorpay')
                                <span class="px-2.5 py-1 rounded-xl bg-blue-50 text-blue-700 border border-blue-200 font-extrabold inline-flex items-center gap-1.5"><i class="fa-solid fa-credit-card"></i> Online Payment (Razorpay UPI/Card)</span>
                            @elseif($order->payment_method === 'cod')
                                <span class="px-2.5 py-1 rounded-xl bg-amber-50 text-amber-800 border border-amber-200 font-extrabold inline-flex items-center gap-1.5"><i class="fa-solid fa-money-bill-wave"></i> Cash on Delivery (COD)</span>
                            @elseif(str_contains($order->payment_method, 'pos'))
                                <span class="px-2.5 py-1 rounded-xl bg-emerald-50 text-emerald-800 border border-emerald-200 font-extrabold inline-flex items-center gap-1.5"><i class="fa-solid fa-cash-register"></i> {{ strtoupper(str_replace('_', ' ', $order->payment_method)) }}</span>
                            @else
                                <span class="px-2.5 py-1 rounded-xl bg-slate-100 text-slate-800 font-extrabold uppercase">{{ $order->payment_method }}</span>
                            @endif
                        </div>
                    </div>

                    @if($order->razorpay_payment_id)
                        <div class="pt-2 border-t border-slate-100">
                            <span class="text-slate-400 font-medium block">Razorpay Transaction ID</span>
                            <span class="font-mono text-slate-900 font-extrabold select-all block mt-0.5">{{ $order->razorpay_payment_id }}</span>
                        </div>
                    @endif

                    <!-- Bill Breakdown -->
                    <div class="border-t border-slate-100 pt-3 space-y-2 text-slate-600">
                        <div class="flex justify-between"><span>Items Subtotal:</span><span class="font-bold text-slate-900">₹{{ number_format($order->subtotal, 2) }}</span></div>
                        
                        @if($order->discount_amount > 0)
                            <div class="flex justify-between text-emerald-600"><span>Coupon Discount:</span><span class="font-extrabold">-₹{{ number_format($order->discount_amount, 2) }}</span></div>
                        @endif

                        <div class="flex justify-between">
                            <span>Delivery Charges:</span>
                            @if($order->delivery_charge == 0)
                                <span class="text-emerald-600 font-extrabold uppercase">FREE</span>
                            @else
                                <span class="font-bold text-slate-900">₹{{ number_format($order->delivery_charge, 2) }}</span>
                            @endif
                        </div>

                        @if($order->gst_amount > 0)
                            <div class="flex justify-between text-slate-400 text-[11px]"><span>Taxes & GST:</span><span>₹{{ number_format($order->gst_amount, 2) }}</span></div>
                        @endif

                        <div class="border-t border-dashed border-slate-200 pt-2 flex justify-between items-center text-sm font-black text-slate-900">
                            <span>Total Paid / Payable:</span>
                            <span class="text-base font-extrabold text-brand-700">₹{{ number_format($order->total_amount, 2) }}</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Delivery Address Card -->
            <div class="bg-white rounded-3xl p-6 border border-slate-200/80 shadow-sm space-y-4">
                <h4 class="font-extrabold text-slate-900 text-base border-b border-slate-100 pb-3">Delivery Address</h4>
                @if($order->shipping_address)
                    <div class="text-xs text-slate-600 space-y-1.5 font-medium">
                        <div class="font-bold text-slate-900 text-sm">{{ $order->shipping_address['full_name'] ?? '' }}</div>
                        <div>{{ $order->shipping_address['house_no'] ?? '' }} {{ $order->shipping_address['apartment'] ?? '' }}</div>
                        <div>{{ $order->shipping_address['street'] ?? '' }}, {{ $order->shipping_address['area'] ?? '' }}</div>
                        <div>{{ $order->shipping_address['city'] ?? '' }}, {{ $order->shipping_address['state'] ?? '' }} - <strong class="text-slate-900 font-mono">{{ $order->shipping_address['pincode'] ?? '' }}</strong></div>
                        <div class="pt-2 text-slate-500 font-semibold"><i class="fa-solid fa-phone text-brand-600"></i> {{ $order->shipping_address['mobile'] ?? '' }}</div>
                    </div>
                @endif
            </div>

        </div>

    </div>
</div>
@endsection