@extends('store.layouts.app')

@section('title', 'Order #' . $order->order_number)
@section('meta_description', 'Order details – ' . ($store_name ?? config('app.name')))

@section('content')
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
    <nav class="text-sm text-gray-500 mb-6 flex items-center gap-2 flex-wrap">
        <a href="{{ route('orders.index') }}" class="hover:text-blinkit-green transition flex items-center gap-1">
            <i class="fas fa-arrow-left"></i> Back to Orders
        </a>
    </nav>

    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-8">
        <div>
            <h1 class="text-3xl font-black text-gray-900 mb-2">Order #{{ $order->order_number }}</h1>
            <p class="text-gray-600">
                <i class="far fa-calendar mr-1"></i>Placed on {{ $order->created_at->format('M j, Y g:i A') }}
            </p>
        </div>
        <span class="inline-block px-4 py-2 rounded-xl text-sm font-bold shadow-md
            @if($order->status === 'pending') bg-amber-100 text-amber-800
            @elseif($order->status === 'paid') bg-blue-100 text-blue-800
            @elseif($order->status === 'shipped') bg-indigo-100 text-indigo-800
            @elseif($order->status === 'delivered') bg-green-100 text-green-800
            @elseif($order->status === 'cancelled') bg-red-100 text-red-800
            @else bg-gray-100 text-gray-800 @endif">
            {{ ucfirst($order->status) }}
        </span>
    </div>

    {{-- Timeline --}}
    <div class="card p-6 mb-6">
        <h2 class="text-xl font-black text-gray-900 mb-6">Order Status</h2>
        <div class="space-y-4">
            @php
                $steps = [
                    ['key' => 'pending', 'label' => 'Order Placed', 'icon' => 'fa-shopping-cart'],
                    ['key' => 'paid', 'label' => 'Payment Confirmed', 'icon' => 'fa-credit-card'],
                    ['key' => 'shipped', 'label' => 'Shipped', 'icon' => 'fa-truck'],
                    ['key' => 'delivered', 'label' => 'Delivered', 'icon' => 'fa-check-circle']
                ];
                $statusOrder = ['pending' => 1, 'paid' => 2, 'shipped' => 3, 'delivered' => 4, 'cancelled' => 0];
                $current = $statusOrder[$order->status] ?? 0;
            @endphp
            @foreach($steps as $i => $step)
            <div class="timeline-item {{ $current >= ($i+1) ? 'timeline-completed' : ($current === ($i+1) ? 'timeline-active' : 'timeline-pending') }}">
                <div class="timeline-dot"></div>
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 rounded-full flex items-center justify-center {{ $current >= ($i+1) ? 'bg-blinkit-green text-white' : 'bg-gray-200 text-gray-400' }} transition">
                        <i class="fas {{ $step['icon'] }}"></i>
                    </div>
                    <div>
                        <p class="font-bold text-gray-900">{{ $step['label'] }}</p>
                        @if($current >= ($i+1))
                        <p class="text-xs text-gray-500">Completed</p>
                        @elseif($current === ($i+1))
                        <p class="text-xs text-blinkit-green font-semibold">In Progress</p>
                        @else
                        <p class="text-xs text-gray-400">Pending</p>
                        @endif
                    </div>
                </div>
            </div>
            @endforeach
            @if($order->status === 'cancelled')
            <div class="timeline-item timeline-pending">
                <div class="timeline-dot bg-red-500 border-red-500"></div>
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 rounded-full flex items-center justify-center bg-red-100 text-red-600">
                        <i class="fas fa-times"></i>
                    </div>
                    <div>
                        <p class="font-bold text-red-600">Order Cancelled</p>
                        @if($order->cancelled_at)
                        <p class="text-xs text-gray-500">Cancelled on {{ $order->cancelled_at->format('M j, Y') }}</p>
                        @endif
                    </div>
                </div>
            </div>
            @endif
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {{-- Order Items --}}
        <div class="lg:col-span-2 space-y-4">
            <div class="card p-6">
                <h2 class="text-xl font-black text-gray-900 mb-6">Order Items</h2>
                <div class="space-y-4">
                    @foreach($order->items as $item)
                    <div class="flex gap-4 pb-4 border-b border-gray-100 last:border-0">
                        <img src="{{ \App\Helpers\ImageHelper::urlOrPlaceholder($item->product->images->first()->image_path ?? null, 'https://images.unsplash.com/photo-1542838132-92c53300491e?w=100') }}" 
                             alt="{{ $item->product_name }}" class="w-20 h-20 object-cover rounded-xl">
                        <div class="flex-1">
                            <p class="font-bold text-gray-900 mb-1">{{ $item->product_name }}</p>
                            @if($item->variant_name)
                            <p class="text-sm text-gray-500 mb-2">{{ $item->variant_name }}</p>
                            @endif
                            <p class="text-sm text-gray-600">Quantity: {{ $item->quantity }} × {{ $currency_symbol }}{{ number_format($item->price, 0) }}</p>
                        </div>
                        <div class="text-right">
                            <p class="font-black text-gray-900 text-lg">{{ $currency_symbol }}{{ number_format($item->subtotal, 0) }}</p>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>

        {{-- Order Summary & Actions --}}
        <div class="lg:col-span-1 space-y-6">
            {{-- Summary --}}
            <div class="card p-6">
                <h2 class="text-xl font-black text-gray-900 mb-6">Order Summary</h2>
                <div class="space-y-2 mb-6">
                    <div class="flex justify-between text-gray-600">
                        <span>Subtotal</span>
                        <span class="font-semibold">{{ $currency_symbol }}{{ number_format($order->subtotal, 0) }}</span>
                    </div>
                    @if($order->discount > 0)
                    <div class="flex justify-between text-green-600">
                        <span>Discount</span>
                        <span class="font-bold">-{{ $currency_symbol }}{{ number_format($order->discount, 0) }}</span>
                    </div>
                    @endif
                    <div class="flex justify-between pt-3 border-t border-gray-200">
                        <span class="font-black text-lg text-gray-900">Total</span>
                        <span class="font-black text-xl text-blinkit-green">{{ $currency_symbol }}{{ number_format($order->total, 0) }}</span>
                    </div>
                </div>
            </div>

            {{-- Shipping Address --}}
            <div class="card p-6">
                <h3 class="font-black text-gray-900 mb-4 flex items-center gap-2">
                    <i class="fas fa-map-marker-alt text-blinkit-green"></i>
                    Shipping Address
                </h3>
                <div class="text-sm text-gray-600 space-y-1">
                    <p class="font-semibold text-gray-900">{{ $order->shipping_name }}</p>
                    <p>{{ $order->shipping_address }}</p>
                    @if($order->shipping_city)
                    <p>{{ $order->shipping_city }}{!! $order->shipping_state ? ', ' . $order->shipping_state : '' !!}</p>
                    @endif
                    <p>{{ $order->shipping_email }}</p>
                    <p>{{ $order->shipping_phone }}</p>
                </div>
            </div>

            {{-- Actions --}}
            <div class="card p-6 bg-gradient-to-br from-blinkit-green/5 to-blinkit-yellow/5 border-2 border-blinkit-green/20">
                <div class="space-y-3">
                    <a href="{{ route('orders.invoice', $order) }}" target="_blank" class="btn-outline w-full text-center">
                        <i class="fas fa-download mr-2"></i> Download Invoice
                    </a>
                    @if(!$order->items->isEmpty() && $order->status !== 'cancelled')
                    <form action="{{ route('orders.reorder', $order) }}" method="POST" class="inline w-full">
                        @csrf
                        <button type="submit" class="btn-primary w-full">
                            <i class="fas fa-redo mr-2"></i> Reorder
                        </button>
                    </form>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection