@extends('layouts.app')
@section('title', 'My Orders — Jumia Clone')

@section('content')
<div class="max-w-4xl mx-auto px-3 md:px-6 py-4"
     x-data="ordersList()"
     x-init="init()">

    {{-- Header --}}
    <div class="flex items-center gap-3 mb-5">
        <h1 class="text-lg font-bold text-gray-900">My Orders</h1>
        <span x-show="orders.length" x-text="`(${orders.length})`" class="text-sm text-gray-400"></span>
    </div>

    {{-- Loading --}}
    <div x-show="loading" class="space-y-3">
        @for($i = 0; $i < 4; $i++)
        <div class="card-padded animate-pulse">
            <div class="flex gap-4">
                <div class="skeleton w-16 h-16 rounded-lg flex-shrink-0"></div>
                <div class="flex-1 space-y-2">
                    <div class="skeleton h-4 w-2/3"></div>
                    <div class="skeleton h-3 w-1/3"></div>
                    <div class="skeleton h-3 w-1/4"></div>
                </div>
                <div class="skeleton w-20 h-6 rounded-full"></div>
            </div>
        </div>
        @endfor
    </div>

    {{-- Empty state --}}
    <div x-show="!loading && orders.length === 0"
         class="flex flex-col items-center justify-center py-20 text-center">
        <div class="w-24 h-24 bg-orange-50 rounded-full flex items-center justify-center text-5xl mb-4">📦</div>
        <h3 class="text-lg font-bold text-gray-900 mb-2">No orders yet</h3>
        <p class="text-gray-500 text-sm mb-4">Start shopping to place your first order!</p>
        <a href="/products" class="btn-primary">Browse Products</a>
    </div>

    {{-- Orders list --}}
    <div x-show="!loading && orders.length > 0" class="space-y-3">
        <template x-for="order in orders" :key="order.uuid">
            <div class="card hover:shadow-md transition-shadow">
                {{-- Order header --}}
                <div class="flex items-center justify-between px-4 py-3 border-b border-gray-100 bg-gray-50 rounded-t-lg">
                    <div>
                        <p class="text-xs text-gray-500">Order #<span x-text="order.order_number"></span></p>
                        <p class="text-xs text-gray-400"
                           x-text="new Date(order.created_at).toLocaleDateString('en-NG', {year:'numeric',month:'long',day:'numeric'})"></p>
                    </div>
                    <div class="flex items-center gap-2">
                        <span :class="statusClass(order.status)" x-text="statusLabel(order.status)"></span>
                    </div>
                </div>

                {{-- Order items preview --}}
                <div class="px-4 py-3">
                    <div class="flex gap-2 mb-3">
                        <template x-for="(item, idx) in (order.items || []).slice(0, 3)" :key="item.id">
                            <div class="w-12 h-12 bg-gray-100 rounded-lg overflow-hidden flex-shrink-0 border border-gray-200">
                                <img :src="item.product?.primary_image || '/images/placeholder.png'"
                                     class="w-full h-full object-cover"
                                     :alt="item.product_name">
                            </div>
                        </template>
                        <div x-show="(order.items || []).length > 3"
                             class="w-12 h-12 bg-gray-100 rounded-lg flex items-center justify-center text-xs text-gray-500 font-medium flex-shrink-0 border border-gray-200"
                             x-text="`+${order.items.length - 3}`">
                        </div>
                    </div>

                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-xs text-gray-500"
                               x-text="`${(order.items || []).length} item${(order.items || []).length !== 1 ? 's' : ''}`"></p>
                            <p class="text-base font-bold text-orange-500" x-text="price(order.total_amount)"></p>
                        </div>
                        <div class="flex gap-2">
                            <a :href="`/orders/${order.uuid}`"
                               class="btn-secondary text-xs px-3 py-2">View Details</a>
                            <button x-show="order.status === 0"
                                    @click="cancelOrder(order.uuid)"
                                    class="text-xs px-3 py-2 border border-red-300 text-red-500 rounded hover:bg-red-50 transition-colors">
                                Cancel
                            </button>
                        </div>
                    </div>
                </div>

                {{-- Tracking bar --}}
                <div x-show="order.status >= 1 && order.status <= 5"
                     class="px-4 pb-3">
                    <div class="flex items-center gap-1">
                        @foreach([
                            [1, 'Confirmed'],
                            [2, 'Processing'],
                            [3, 'Shipped'],
                            [5, 'Delivered'],
                        ] as [$statusVal, $stepLabel])
                        <div class="flex items-center gap-1 flex-1">
                            <div class="flex flex-col items-center gap-0.5 flex-1">
                                <div class="w-full h-1 rounded-full transition-colors"
                                     :class="order.status >= {{ $statusVal }} ? 'bg-orange-400' : 'bg-gray-200'"></div>
                                <span class="text-[10px] text-gray-500 hidden sm:block">{{ $stepLabel }}</span>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </template>
    </div>
</div>
@endsection

@section('scripts')
<script>
    document.addEventListener('alpine:init', () => {
        // Extend ordersList with cancel action
        const orig = Alpine.data('ordersList')
        Alpine.data('ordersList', () => ({
            ...orig(),
            async cancelOrder(uuid) {
                if (!confirm('Are you sure you want to cancel this order?')) return
                try {
                    await api.post(`/orders/${uuid}/cancel`)
                    Alpine.store('app').toast('Order cancelled', 'success')
                    await this.init()
                } catch (e) {
                    Alpine.store('app').toast(e.message, 'error')
                }
            }
        }))
    })
</script>
@endsection