@extends('layouts.app')

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

@section('content')
<div class="max-w-4xl mx-auto px-4 py-8">
    <div class="flex items-center gap-3 mb-6">
        <a href="{{ route('account.orders') }}" 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-500 text-sm">Placed on {{ $order->created_at->format('F d, Y \a\t h:i A') }}</p>
        </div>
        <span class="ml-auto inline-block px-4 py-1.5 rounded-full text-sm font-semibold
            {{ $order->status === 'delivered' ? 'bg-green-100 text-green-700' : '' }}
            {{ $order->status === 'pending' ? 'bg-yellow-100 text-yellow-700' : '' }}
            {{ $order->status === 'processing' ? 'bg-blue-100 text-blue-700' : '' }}
            {{ $order->status === 'shipped' ? 'bg-indigo-100 text-indigo-700' : '' }}
            {{ $order->status === 'cancelled' ? 'bg-red-100 text-red-700' : '' }}
        ">
            {{ ucfirst($order->status) }}
        </span>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <!-- Left: Items & Summary -->
        <div class="md:col-span-2 space-y-6">
            <!-- Order Items -->
            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-100 flex items-center gap-2">
                    <i class="fas fa-box text-electric-blue"></i>
                    <h2 class="font-bold text-navy">Order Items</h2>
                </div>
                <div class="divide-y divide-gray-100">
                    @foreach($order->orderItems as $item)
                    <div class="flex items-center gap-4 px-6 py-4">
                        <div class="w-16 h-16 bg-gray-50 rounded-xl overflow-hidden border border-gray-100 shrink-0">
                            @if($item->product_image)
                            <img src="{{ Storage::url($item->product_image) }}" alt="{{ $item->product_name }}" class="w-full h-full object-contain p-1">
                            @else
                            <div class="w-full h-full flex items-center justify-center"><i class="fas fa-image text-gray-300"></i></div>
                            @endif
                        </div>
                        <div class="flex-1">
                            <p class="font-medium text-navy text-sm">{{ $item->product_name }}</p>
                            <p class="text-xs text-gray-500 mt-1">KES {{ number_format($item->price) }} × {{ $item->quantity }}</p>
                        </div>
                        <p class="font-bold text-navy">KES {{ number_format($item->subtotal) }}</p>
                    </div>
                    @endforeach
                </div>

                <!-- Totals -->
                <div class="px-6 py-4 bg-gray-50 space-y-2 text-sm">
                    <div class="flex justify-between">
                        <span class="text-gray-600">Subtotal</span>
                        <span>KES {{ number_format($order->subtotal) }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-600">Shipping</span>
                        @if($order->shipping_fee == 0)
                        <span class="text-green-600">Free</span>
                        @else
                        <span>KES {{ number_format($order->shipping_fee) }}</span>
                        @endif
                    </div>
                    <div class="flex justify-between font-bold text-base border-t border-gray-200 pt-2">
                        <span>Total</span>
                        <span class="text-electric-blue">KES {{ number_format($order->total) }}</span>
                    </div>
                </div>
            </div>

            <!-- Tracking (live) -->
            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
                <div class="flex items-center gap-2 mb-4">
                    <i class="fas fa-truck text-electric-blue"></i>
                    <h2 class="font-bold text-navy">Order Tracking</h2>
                </div>
                @php
                    $allSteps = [
                        'pending'    => ['Order Placed',   'Your order has been received.'],
                        'processing' => ['Processing',     'We are preparing your order.'],
                        'shipped'    => ['Shipped',        'Your order is on its way.'],
                        'delivered'  => ['Delivered',      'Your order has been delivered.'],
                    ];
                    $statusOrder = ['pending','processing','shipped','delivered'];
                    $currentIdx  = array_search($order->status, $statusOrder);
                    if ($currentIdx === false) $currentIdx = 0;
                    $historyMap = [];
                    foreach ($order->statusHistories as $h) {
                        if (!isset($historyMap[$h->status])) $historyMap[$h->status] = $h;
                    }
                    if (!isset($historyMap['pending'])) {
                        $historyMap['pending'] = (object)['created_at' => $order->created_at, 'note' => null];
                    }
                @endphp
                @if($order->status === 'cancelled')
                <div class="bg-red-50 border border-red-200 rounded-xl p-4 text-red-700 text-sm">
                    <i class="fas fa-times-circle mr-2"></i> This order has been cancelled.
                </div>
                @else
                <div class="relative pl-8 space-y-5">
                    <div class="absolute left-3 top-2 bottom-2 w-0.5 bg-gray-200"></div>
                    @foreach($allSteps as $status => $info)
                    @php
                        $stepIdx   = array_search($status, $statusOrder);
                        $isDone    = $stepIdx < $currentIdx;
                        $isCurrent = $stepIdx === $currentIdx;
                        $isPending = $stepIdx > $currentIdx;
                        $h         = $historyMap[$status] ?? null;
                    @endphp
                    <div class="relative flex items-start gap-3">
                        <div class="w-6 h-6 rounded-full border-2 flex items-center justify-center z-10 mt-0.5 shrink-0
                            {{ $isDone ? 'bg-electric-blue border-electric-blue' : ($isCurrent ? 'bg-white border-electric-blue' : 'bg-white border-gray-300') }}">
                            @if($isDone)
                                <i class="fas fa-check text-white text-xs"></i>
                            @elseif($isCurrent)
                                <div class="w-2 h-2 rounded-full bg-electric-blue"></div>
                            @endif
                        </div>
                        <div class="flex-1 {{ $isPending ? 'text-gray-400' : 'text-navy' }}">
                            <div class="flex items-center justify-between">
                                <p class="font-semibold text-sm">{{ $info[0] }}
                                    @if($isCurrent)<span class="ml-1 text-xs bg-blue-100 text-blue-600 px-2 py-0.5 rounded-full">Current</span>@endif
                                </p>
                                @if($h)<span class="text-xs text-gray-400">{{ $h->created_at->format('d M, h:i A') }}</span>@endif
                            </div>
                            <p class="text-xs mt-0.5 {{ $isPending ? 'text-gray-300' : 'text-gray-500' }}">{{ $h->note ?? $info[1] }}</p>
                        </div>
                    </div>
                    @endforeach
                </div>
                @if($order->tracking_number)
                <div class="mt-4 pt-4 border-t border-gray-100 text-sm flex items-center justify-between">
                    <span class="text-gray-500"><i class="fas fa-barcode mr-1"></i> Tracking No.</span>
                    <span class="font-mono font-bold text-navy">{{ $order->courier ? $order->courier . ': ' : '' }}{{ $order->tracking_number }}</span>
                </div>
                @endif
                @endif
            </div>
        </div>

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

            <!-- Payment Info -->
            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-5">
                <div class="flex items-center gap-2 mb-4">
                    <i class="fas fa-credit-card text-electric-blue"></i>
                    <h3 class="font-bold text-navy">Payment Info</h3>
                </div>
                <div class="text-sm space-y-2">
                    <div class="flex justify-between">
                        <span class="text-gray-500">Method</span>
                        <span class="font-medium capitalize">{{ str_replace('_', ' ', $order->payment_method) }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-500">Status</span>
                        <span class="font-semibold {{ $order->payment_status === 'paid' ? 'text-green-600' : ($order->payment_status === 'failed' ? 'text-red-600' : 'text-yellow-600') }}">
                            {{ ucfirst($order->payment_status) }}
                        </span>
                    </div>
                    @if($order->mpesa_code)
                    <div class="flex justify-between">
                        <span class="text-gray-500">M-Pesa Code</span>
                        <span class="font-mono font-medium">{{ $order->mpesa_code }}</span>
                    </div>
                    @endif
                </div>
            </div>

            @if($order->notes)
            <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-sticky-note text-electric-blue"></i>
                    <h3 class="font-bold text-navy">Order Notes</h3>
                </div>
                <p class="text-sm text-gray-600">{{ $order->notes }}</p>
            </div>
            @endif

            <a href="{{ route('products.index') }}" class="block text-center bg-electric-blue text-white py-3 rounded-xl font-semibold hover:bg-blue-dark transition-colors">
                <i class="fas fa-shopping-bag mr-2"></i> Continue Shopping
            </a>
        </div>
    </div>
</div>
@endsection