@extends('layouts.dashboard')

@section('title', 'Pesanan Tiket')

@section('content')
<form class="mb-5 grid gap-3 rounded-lg border border-slate-200 bg-white p-4 shadow-sm md:grid-cols-[1fr_220px_auto]">
    <input name="search" value="{{ request('search') }}" placeholder="Cari kode/nama" class="rounded-md border border-slate-300 px-3 py-3">
    <select name="status" class="rounded-md border border-slate-300 px-3 py-3">
        <option value="">Semua status</option>
        @foreach(['menunggu_pembayaran','menunggu_verifikasi','aktif','digunakan','ditolak','kadaluarsa','dibatalkan'] as $status)
            <option value="{{ $status }}" @selected(request('status') === $status)>{{ str($status)->replace('_', ' ')->title() }}</option>
        @endforeach
    </select>
    <button class="inline-flex items-center justify-center gap-2 rounded-md bg-slate-950 px-4 py-3 font-black text-white hover:bg-sky-700">
        <i data-lucide="filter" class="h-4 w-4"></i>
        Filter
    </button>
</form>

<section class="grid gap-3 md:hidden">
    @forelse($orders as $order)
        <article class="rounded-lg border border-slate-200 bg-white p-4 shadow-sm">
            <div class="flex items-start justify-between gap-3">
                <div class="min-w-0">
                    <p class="truncate font-black text-slate-950">{{ $order->order_code }}</p>
                    <p class="mt-1 truncate text-sm font-semibold text-slate-600">{{ $order->user?->name ?? 'Pengunjung' }}</p>
                </div>
                <x-status-badge :status="$order->status" />
            </div>
            <div class="mt-4 grid grid-cols-2 gap-3 text-sm">
                <p class="rounded-md bg-slate-50 p-3"><span class="block text-xs font-black uppercase text-slate-500">Tanggal</span><span class="font-bold">{{ $order->visit_date->format('d/m/Y') }}</span></p>
                <p class="rounded-md bg-slate-50 p-3"><span class="block text-xs font-black uppercase text-slate-500">Jumlah</span><span class="font-bold">{{ $order->total_ticket }}</span></p>
                <p class="rounded-md bg-slate-50 p-3"><span class="block text-xs font-black uppercase text-slate-500">Total</span><span class="font-bold">{{ \App\Support\LocaleFormat::money($order->total_price) }}</span></p>
                <div class="rounded-md bg-slate-50 p-3"><span class="block text-xs font-black uppercase text-slate-500">Pembayaran</span><div class="mt-1"><x-status-badge :status="$order->payment_status" /></div></div>
            </div>
        </article>
    @empty
        <p class="rounded-lg border border-slate-200 bg-white p-5 text-sm font-semibold text-slate-500 shadow-sm">Belum ada pesanan tiket.</p>
    @endforelse
</section>

<div class="hidden overflow-x-auto rounded-lg border border-slate-200 bg-white shadow-sm md:block">
    <table class="w-full text-left text-sm">
        <thead class="bg-slate-50 text-xs font-black uppercase text-slate-500">
            <tr>
                <th class="p-3">Kode</th>
                <th class="p-3">User</th>
                <th class="p-3">Tanggal</th>
                <th class="p-3">Jumlah</th>
                <th class="p-3">Total</th>
                <th class="p-3">Status</th>
                <th class="p-3">Pembayaran</th>
            </tr>
        </thead>
        <tbody>
        @forelse($orders as $order)
            <tr class="border-t border-slate-100">
                <td class="p-3 font-black text-slate-950">{{ $order->order_code }}</td>
                <td class="p-3 font-semibold text-slate-700">{{ $order->user?->name ?? 'Pengunjung' }}</td>
                <td class="p-3 text-slate-600">{{ $order->visit_date->format('d/m/Y') }}</td>
                <td class="p-3 text-slate-600">{{ $order->total_ticket }}</td>
                <td class="p-3 text-slate-600">{{ \App\Support\LocaleFormat::money($order->total_price) }}</td>
                <td class="p-3"><x-status-badge :status="$order->status" /></td>
                <td class="p-3"><x-status-badge :status="$order->payment_status" /></td>
            </tr>
        @empty
            <tr><td colspan="7" class="p-4 text-slate-500">Belum ada pesanan tiket.</td></tr>
        @endforelse
        </tbody>
    </table>
</div>

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