@extends('layouts.app')

@section('title', 'Order ' . $order->order_number . ' - ECA Networks')

@section('content')
<div class="min-h-screen bg-gray-50 py-10">
<div class="max-w-2xl mx-auto px-4">

    <div class="flex items-center gap-3 mb-6">
        <a href="{{ route('track.index') }}" class="text-gray-400 hover:text-navy transition-colors">
            <i class="fas fa-arrow-left"></i>
        </a>
        <div>
            <h1 class="text-2xl font-bold text-navy">Order {{ $order->order_number }}</h1>
            <p class="text-gray-400 text-sm">Placed on {{ $order->created_at->format('d M Y, h:i A') }}</p>
        </div>
        @php
            $badgeClass = [
                'pending'    => 'bg-yellow-100 text-yellow-700',
                'processing' => 'bg-blue-100 text-blue-700',
                'shipped'    => 'bg-indigo-100 text-indigo-700',
                'delivered'  => 'bg-green-100 text-green-700',
                'cancelled'  => 'bg-red-100 text-red-700',
            ][$order->status] ?? 'bg-gray-100 text-gray-700';
        @endphp
        <span class="ml-auto px-4 py-1.5 rounded-full text-sm font-semibold {{ $badgeClass }}">
            {{ ucfirst($order->status) }}
        </span>
    </div>

    <!-- Tracking Timeline -->
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 mb-6">
        <div class="flex items-center gap-2 mb-6">
            <i class="fas fa-route text-blue-500"></i>
            <h2 class="font-bold text-navy">Order Progress</h2>
        </div>

        @php
            $allSteps = [
                'pending'    => ['icon' => 'fa-clock',        'label' => 'Order Placed',       'desc' => 'Your order has been received.'],
                'processing' => ['icon' => 'fa-cog',          'label' => 'Processing',         'desc' => 'We are preparing your order.'],
                'shipped'    => ['icon' => 'fa-truck',         'label' => 'Shipped',            'desc' => 'Your order is on its way.'],
                'delivered'  => ['icon' => 'fa-check-circle',  'label' => 'Delivered',          'desc' => 'Your order has been delivered.'],
            ];
            $statusOrder = ['pending', 'processing', 'shipped', 'delivered'];
            $currentIdx  = array_search($order->status, $statusOrder);
            if ($currentIdx === false) $currentIdx = 0;

            // Build history lookup: status => first occurrence timestamp
            $historyMap = [];
            foreach ($order->statusHistories as $h) {
                if (!isset($historyMap[$h->status])) {
                    $historyMap[$h->status] = $h;
                }
            }
            // Always include placed time
            if (!isset($historyMap['pending'])) {
                $historyMap['pending'] = (object)['created_at' => $order->created_at, 'note' => null];
            }

            $isCancelled = $order->status === 'cancelled';
        @endphp

        @if($isCancelled)
        <div class="flex items-center gap-4 p-4 bg-red-50 border border-red-200 rounded-xl">
            <div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center shrink-0">
                <i class="fas fa-times-circle text-red-500"></i>
            </div>
            <div>
                <p class="font-bold text-red-700">Order Cancelled</p>
                <p class="text-sm text-red-500">This order has been cancelled. Contact us at info@home.ecanetworks.com for help.</p>
            </div>
        </div>
        @else
        <div class="relative">
            <div class="absolute left-5 top-5 bottom-5 w-0.5 bg-gray-200 z-0"></div>
            @foreach($allSteps as $status => $step)
            @php
                $stepIdx   = array_search($status, $statusOrder);
                $isDone    = $stepIdx < $currentIdx;
                $isCurrent = $stepIdx === $currentIdx;
                $isPending = $stepIdx > $currentIdx;
                $history   = $historyMap[$status] ?? null;
            @endphp
            <div class="relative flex items-start gap-4 mb-6 last:mb-0 z-10">
                <div class="w-10 h-10 rounded-full flex items-center justify-center shrink-0 border-2
                    {{ $isDone ? 'bg-blue-500 border-blue-500' : ($isCurrent ? 'bg-white border-blue-500' : 'bg-white border-gray-200') }}">
                    @if($isDone)
                        <i class="fas fa-check text-white text-sm"></i>
                    @else
                        <i class="fas {{ $step['icon'] }} {{ $isCurrent ? 'text-blue-500' : 'text-gray-300' }} text-sm"></i>
                    @endif
                </div>
                <div class="flex-1 pt-1.5">
                    <div class="flex items-center justify-between">
                        <p class="font-semibold text-sm {{ $isPending ? 'text-gray-400' : 'text-navy' }}">
                            {{ $step['label'] }}
                            @if($isCurrent)<span class="ml-2 text-xs bg-blue-100 text-blue-600 px-2 py-0.5 rounded-full">Current</span>@endif
                        </p>
                        @if($history)
                        <span class="text-xs text-gray-400">{{ $history->created_at->format('d M, h:i A') }}</span>
                        @endif
                    </div>
                    <p class="text-xs {{ $isPending ? 'text-gray-300' : 'text-gray-500' }} mt-0.5">
                        {{ $history->note ?? $step['desc'] }}
                    </p>
                </div>
            </div>
            @endforeach
        </div>
        @endif
    </div>

    <!-- Shipping + Tracking Number -->
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-5">
            <div class="flex items-center gap-2 mb-3">
                <i class="fas fa-map-marker-alt text-blue-500"></i>
                <h3 class="font-bold text-navy text-sm">Delivery Address</h3>
            </div>
            <div class="text-sm text-gray-600 space-y-0.5">
                <p class="font-semibold text-navy">{{ $order->shipping_name }}</p>
                <p>{{ $order->shipping_address }}</p>
                <p>{{ $order->shipping_city }}, {{ $order->shipping_country }}</p>
            </div>
        </div>

        @if($order->tracking_number || $order->courier)
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-5">
            <div class="flex items-center gap-2 mb-3">
                <i class="fas fa-barcode text-blue-500"></i>
                <h3 class="font-bold text-navy text-sm">Shipment Info</h3>
            </div>
            <div class="text-sm text-gray-600 space-y-1">
                @if($order->courier)
                <div class="flex justify-between"><span class="text-gray-400">Courier</span><span class="font-semibold">{{ $order->courier }}</span></div>
                @endif
                @if($order->tracking_number)
                <div class="flex justify-between"><span class="text-gray-400">Tracking No.</span><span class="font-mono font-bold text-navy">{{ $order->tracking_number }}</span></div>
                @endif
            </div>
        </div>
        @endif
    </div>

    <!-- Order Items -->
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden mb-6">
        <div class="px-5 py-4 border-b border-gray-100 flex items-center gap-2">
            <i class="fas fa-box text-blue-500"></i>
            <h2 class="font-bold text-navy text-sm">Items Ordered ({{ $order->orderItems->count() }})</h2>
        </div>
        <div class="divide-y divide-gray-100">
            @foreach($order->orderItems as $item)
            <div class="flex items-center gap-3 px-5 py-3">
                <div class="flex-1">
                    <p class="font-medium text-navy text-sm">{{ $item->product_name }}</p>
                    <p class="text-xs text-gray-400">Qty: {{ $item->quantity }} × KES {{ number_format($item->price) }}</p>
                </div>
                <p class="font-bold text-navy text-sm">KES {{ number_format($item->subtotal) }}</p>
            </div>
            @endforeach
        </div>
        <div class="px-5 py-3 bg-gray-50 flex justify-between font-bold text-sm border-t border-gray-100">
            <span>Total</span>
            <span class="text-blue-600">KES {{ number_format($order->total) }}</span>
        </div>
    </div>

    <div class="text-center space-y-3">
        <a href="{{ route('track.index') }}" class="inline-block text-blue-500 text-sm hover:underline">
            <i class="fas fa-search mr-1"></i> Track another order
        </a>
        <p class="text-xs text-gray-400">Need help? Contact us at <a href="mailto:info@home.ecanetworks.com" class="text-blue-500">info@home.ecanetworks.com</a> or call +254 712 315 165</p>
    </div>
</div>
</div>
@endsection