@extends('theme::layouts.app', ['title' => $title ?? __('account.title|Orders')])

@section('content')
<main class="flex-grow w-full max-w-[1440px] mx-auto px-6 lg:px-10 py-10">
    <div class="flex flex-col lg:flex-row gap-10">
        <!-- Sidebar -->
        <aside class="w-full lg:w-64 flex-shrink-0">
            @include('theme::partials.account.nav')
        </aside>

        <!-- Main Content -->
        <section class="flex-grow">
            @if(isset($pageHeader))
            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-6 mb-8">
                <div>
                    <h1 class="text-2xl font-bold text-text-main dark:text-white">{{ $pageHeader['title'] }}</h1>
                    <p class="text-text-muted dark:text-gray-400 mt-1">{{ $pageHeader['subtitle'] }}</p>
                </div>
            </div>
            @endif

            <div class="bg-white dark:bg-surface-dark rounded-xl border border-gray-100 dark:border-gray-800 overflow-hidden shadow-sm">
                <div class="overflow-x-auto">
                    <table class="w-full text-left border-collapse">
                        <thead>
                            <tr class="bg-gray-50/50 dark:bg-gray-800/50 border-b border-gray-100 dark:border-gray-800">
                                <th class="px-6 py-4 text-[11px] font-bold uppercase tracking-wider text-text-muted">{{ __('account.Order ID') }}</th>
                                <th class="px-6 py-4 text-[11px] font-bold uppercase tracking-wider text-text-muted">{{ __('account.Date') }}</th>
                                <th class="px-6 py-4 text-[11px] font-bold uppercase tracking-wider text-text-muted">{{ __('account.Product Name') }}</th>
                                <th class="px-6 py-4 text-[11px] font-bold uppercase tracking-wider text-text-muted">{{ __('account.Amount') }}</th>
                                <th class="px-6 py-4 text-[11px] font-bold uppercase tracking-wider text-text-muted">{{ __('account.Status') }}</th>
                                <th class="px-6 py-4 text-[11px] font-bold uppercase tracking-wider text-text-muted text-right">{{ __('account.Action') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
                            @forelse($orders as $order)
                                @php
                                    $statusDetails = getStatusDetails($order->status);
                                    $statusClass = match((int)$order->status) {
                                        1 => 'status-completed',
                                        0 => 'status-pending',
                                        2 => 'status-processing',
                                        3 => 'status-refunded',
                                        4, 5 => 'status-failed',
                                        6, 7 => 'status-cancelled',
                                        default => 'status-default',
                                    };
                                    $firstItem = $order->itemPurchased->first();
                                @endphp
                                <tr class="group hover:bg-gray-50/50 dark:hover:bg-gray-800/30 transition-colors">
                                    <td class="px-6 py-5 whitespace-nowrap">
                                        <a href="{{ route('ch_order_view', [$order->encrypted_id]) }}"
                                           class="text-sm font-semibold text-text-main dark:text-white hover:text-primary transition-colors">
                                            #{{ $order->order_reference }}
                                        </a>
                                    </td>
                                    <td class="px-6 py-5 whitespace-nowrap">
                                        <span class="text-sm text-text-muted" title="{{ $order->created_at }}">
                                            {{ $order->created_at->format('M d, Y') }}
                                        </span>
                                    </td>
                                    <td class="px-6 py-5">
                                        <div class="flex items-center gap-3 max-w-xs">
                                            @if($firstItem && $firstItem->product_image)
                                                <img alt="{{ html_entity_decode($firstItem->name ?? 'Product') }}"
                                                     class="size-8 rounded object-cover flex-shrink-0"
                                                     src="{{ $firstItem->product_image }}" />
                                            @else
                                                <div class="size-8 rounded bg-gray-100 dark:bg-gray-800 flex items-center justify-center text-text-muted flex-shrink-0">
                                                    <span class="material-symbols-outlined text-[18px]">extension</span>
                                                </div>
                                            @endif
                                            <span class="text-sm font-medium text-text-main dark:text-white truncate" title="{{ html_entity_decode($firstItem->name ?? 'N/A') }}">
                                                {{ html_entity_decode($firstItem->name ?? 'N/A') }}
                                            </span>
                                        </div>
                                    </td>
                                    <td class="px-6 py-5 whitespace-nowrap">
                                        <span class="text-sm font-semibold">
                                            {!! ch_currency_symbol(setting('currency', 'USD')) !!}{{ number_format($order->total, 2) }}
                                        </span>
                                    </td>
                                    <td class="px-6 py-5">
                                        <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold {{ $statusClass }}">
                                            <span class="size-1.5 rounded-full status-dot"></span>
                                            {{ $statusDetails['label'] }}
                                        </span>
                                    </td>
                                    <td class="px-6 py-5 text-right whitespace-nowrap">
                                        <a href="{{ route('ch_order_view', [$order->encrypted_id]) }}"
                                           class="inline-flex items-center gap-1.5 text-xs font-semibold text-primary hover:text-primary-dark transition-colors">
                                            <span class="material-symbols-outlined text-[18px]">receipt_long</span>
                                            {{ __('account.View Order') }}
                                        </a>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6" class="px-6 py-12 text-center">
                                        <div class="flex flex-col items-center gap-3">
                                            <span class="material-symbols-outlined text-[48px] text-gray-300 dark:text-gray-600">shopping_cart</span>
                                            <p class="text-text-muted dark:text-gray-400 font-medium">{{ __('account.No orders found') }}</p>
                                            <a href="{{ route('home') }}" class="text-sm text-primary hover:text-primary-dark font-semibold">
                                                {{ __('account.Start Shopping') }} →
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

            @if($orders->hasPages())
                <div class="mt-10 flex items-center justify-between border-t border-gray-100 dark:border-gray-800 pt-6">
                    <p class="text-sm text-text-muted">
                        {{ __('account.Showing :first to :last of :total orders', ['first' => $orders->firstItem(), 'last' => $orders->lastItem(), 'total' => $orders->total()]) }}
                    </p>
                    <div class="flex gap-2">
                        @if($orders->onFirstPage())
                            <button class="p-2 border border-gray-200 dark:border-gray-700 rounded-lg opacity-50 cursor-not-allowed" disabled>
                                <span class="material-symbols-outlined text-[20px]">chevron_left</span>
                            </button>
                        @else
                            <a href="{{ $orders->previousPageUrl() }}" class="p-2 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
                                <span class="material-symbols-outlined text-[20px]">chevron_left</span>
                            </a>
                        @endif

                        @if($orders->hasMorePages())
                            <a href="{{ $orders->nextPageUrl() }}" class="p-2 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
                                <span class="material-symbols-outlined text-[20px]">chevron_right</span>
                            </a>
                        @else
                            <button class="p-2 border border-gray-200 dark:border-gray-700 rounded-lg opacity-50 cursor-not-allowed" disabled>
                                <span class="material-symbols-outlined text-[20px]">chevron_right</span>
                            </button>
                        @endif
                    </div>
                </div>
            @endif
        </section>
    </div>
</main>
@endsection