<x-layouts.admin title="Orders">
    <x-admin.page-header title="Orders" subtitle="{{ $orders->total() }} total" />

    <form method="GET" class="mb-4 flex flex-wrap gap-3">
        <div class="relative max-w-xs flex-1">
            <i class="fa-solid fa-magnifying-glass absolute left-3 top-1/2 -translate-y-1/2 text-xs text-ink/30"></i>
            <x-admin.input type="search" name="search" value="{{ request('search') }}" placeholder="Order number, name, or phone…" class="pl-9" />
        </div>
        <x-admin.select name="order_status" class="max-w-[180px]" onchange="this.form.submit()">
            <option value="">All Statuses</option>
            @foreach ($statuses as $status)
                <option value="{{ $status->value }}" @selected(request('order_status') === $status->value)>{{ $status->label() }}</option>
            @endforeach
        </x-admin.select>
        <x-admin.select name="payment_status" class="max-w-[180px]" onchange="this.form.submit()">
            <option value="">All Payment Statuses</option>
            <option value="pending" @selected(request('payment_status') === 'pending')>Pending</option>
            <option value="paid" @selected(request('payment_status') === 'paid')>Paid</option>
            <option value="rejected" @selected(request('payment_status') === 'rejected')>Rejected</option>
        </x-admin.select>
        <x-admin.button variant="ghost">Filter</x-admin.button>
    </form>

    <x-admin.card :padded="false">
        @if ($orders->isEmpty())
            <x-admin.empty-state icon="fa-solid fa-receipt" title="No orders yet" subtitle="Orders will appear here once customers start checking out." />
        @else
            <div class="overflow-x-auto">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>Order</th>
                            <th>Customer</th>
                            <th>Total</th>
                            <th>Payment</th>
                            <th>Status</th>
                            <th>Date</th>
                            <th class="text-right">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($orders as $order)
                            <tr>
                                <td class="font-medium text-ink">{{ $order->order_number }}</td>
                                <td>
                                    <p class="text-ink">{{ $order->customer_name }}</p>
                                    <p class="text-xs text-ink/40">{{ $order->customer_phone }}</p>
                                </td>
                                <td class="tabular-nums text-ink/60">{{ config('niyarasa.currency.symbol') }} {{ number_format((float) $order->grand_total) }}</td>
                                <td><x-admin.badge :color="$order->payment_status->color()">{{ $order->payment_status->label() }}</x-admin.badge></td>
                                <td><x-admin.badge :color="$order->order_status->color()">{{ $order->order_status->label() }}</x-admin.badge></td>
                                <td class="text-ink/50">{{ $order->created_at->format('d M Y') }}</td>
                                <td class="text-right">
                                    <a href="{{ route('admin.orders.show', $order) }}" class="text-ink/50 hover:text-ink" title="View">
                                        <i class="fa-solid fa-eye"></i>
                                    </a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <div class="border-t border-black/5 px-5 py-4">
                {{ $orders->links() }}
            </div>
        @endif
    </x-admin.card>
</x-layouts.admin>
