@extends('layouts.user', ['heading' => 'My Orders'])

@section('content')
    <div class="mb-4 grid grid-cols-2 gap-4 md:grid-cols-5">
        <div class="user-card p-4">
            <div class="text-xs text-[var(--user-muted)]">Total Orders</div>
            <div class="mt-2 text-2xl font-semibold" data-count-to="{{ $summary['total'] }}">0</div>
        </div>
        <div class="user-card p-4">
            <div class="text-xs text-[var(--user-muted)]">Pending</div>
            <div class="mt-2 text-2xl font-semibold" data-count-to="{{ $summary['pending'] }}">0</div>
        </div>
        <div class="user-card p-4">
            <div class="text-xs text-[var(--user-muted)]">Approved</div>
            <div class="mt-2 text-2xl font-semibold" data-count-to="{{ $summary['approved'] }}">0</div>
        </div>
        <div class="user-card p-4">
            <div class="text-xs text-[var(--user-muted)]">Delivered</div>
            <div class="mt-2 text-2xl font-semibold" data-count-to="{{ $summary['delivered'] }}">0</div>
        </div>
        <div class="user-card p-4">
            <div class="text-xs text-[var(--user-muted)]">Total Amount</div>
            <div class="mt-2 text-2xl font-semibold">Rs. <span data-count-to="{{ $summary['total_amount'] }}">0</span></div>
        </div>
    </div>

    <form method="GET" class="mb-4 grid grid-cols-1 gap-2 md:grid-cols-4">
        <input name="q" value="{{ $search }}" placeholder="Search by order number" class="rounded border border-[var(--user-border)] p-2 text-sm md:col-span-2">
        <select name="status" class="rounded border border-[var(--user-border)] p-2 text-sm">
            <option value="">All Status</option>
            @foreach(['pending_payment','paid','approved','dispatched','delivered','cancelled','refunded'] as $item)
                <option value="{{ $item }}" @selected($status === $item)>{{ ucfirst(str_replace('_', ' ', $item)) }}</option>
            @endforeach
        </select>
        <div class="flex gap-2">
            <button class="rounded bg-[var(--user-primary)] px-4 py-2 text-sm text-white">Filter</button>
            <a href="{{ route('user.orders') }}" class="rounded border border-[var(--user-border)] px-4 py-2 text-sm">Reset</a>
        </div>
    </form>

    <div class="space-y-3">
        @forelse($orders as $order)
            <div class="user-card p-4">
                <div class="flex flex-wrap items-start justify-between gap-2">
                    <div>
                        <div class="text-sm font-semibold">{{ $order->order_number }}</div>
                        <div class="text-xs text-[var(--user-muted)]">{{ optional($order->created_at)->format('d M Y h:i A') }}</div>
                    </div>
                    <span class="user-badge {{ in_array($order->status, ['approved', 'delivered'], true) ? 'success' : (in_array($order->status, ['cancelled', 'refunded'], true) ? 'danger' : 'warning') }}">
                        {{ strtoupper($order->status) }}
                    </span>
                </div>

                <div class="mt-3 grid grid-cols-2 gap-2 text-xs md:grid-cols-4">
                    <div class="rounded bg-slate-50 p-2">Amount: <span class="font-semibold">Rs. {{ number_format((float) $order->total, 2) }}</span></div>
                    <div class="rounded bg-slate-50 p-2">BV: <span class="font-semibold">{{ number_format((float) $order->total_bv, 2) }}</span></div>
                    <div class="rounded bg-slate-50 p-2">Payment: <span class="font-semibold">{{ strtoupper((string) $order->payment_method) }}</span></div>
                    <div class="rounded bg-slate-50 p-2">Pay Status: <span class="font-semibold">{{ strtoupper((string) $order->payment_status) }}</span></div>
                </div>

                <div class="mt-3 text-xs text-[var(--user-muted)]">
                    Items:
                    {{ $order->items->map(fn ($item) => $item->product_name.' x '.$item->quantity)->implode(', ') }}
                </div>

                <div class="mt-3 flex flex-wrap gap-2">
                    <a href="{{ route('user.orders.invoice', $order) }}" target="_blank" class="rounded border border-[var(--user-border)] px-3 py-1 text-xs">Invoice</a>
                    @if(in_array($order->status, ['pending_payment', 'paid'], true))
                        <form method="POST" action="{{ route('user.orders.cancel', $order) }}">
                            @csrf
                            <button class="rounded bg-rose-600 px-3 py-1 text-xs text-white">Cancel</button>
                        </form>
                    @endif
                </div>
            </div>
        @empty
            <div class="user-card p-6 text-center text-sm text-[var(--user-muted)]">No orders found.</div>
        @endforelse
    </div>

    <div class="mt-4">{{ $orders->links() }}</div>
@endsection