@extends('layouts.dashboard')

@section('title', 'Kuota Tiket Harian')

@section('content')
<section class="rounded-lg border border-slate-200 bg-white p-5 shadow-sm">
    <div class="flex items-start gap-3">
        <span class="grid h-10 w-10 place-items-center rounded-md bg-emerald-100 text-emerald-700">
            <i data-lucide="gauge" class="h-5 w-5"></i>
        </span>
        <div>
            <h2 class="font-black text-slate-950">Atur kuota harian</h2>
            <p class="mt-1 text-sm leading-6 text-slate-600">Tentukan kapasitas tiket untuk tanggal kunjungan tertentu.</p>
        </div>
    </div>
    <form method="POST" action="{{ route('admin.daily-quotas.store') }}" class="mt-5 grid gap-3 md:grid-cols-[1fr_1fr_1fr_auto]">
        @csrf
        <input name="visit_date" type="date" class="rounded-md border border-slate-300 px-3 py-3" required>
        <input name="quota_total" type="number" min="1" value="250" placeholder="Kuota total" class="rounded-md border border-slate-300 px-3 py-3" required>
        <input name="quota_used" type="number" min="0" value="0" placeholder="Terpakai" class="rounded-md border border-slate-300 px-3 py-3">
        <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-emerald-700">
            <i data-lucide="save" class="h-4 w-4"></i>
            Simpan
        </button>
    </form>
</section>

<section class="mt-6 grid gap-4">
    @forelse($quotas as $quota)
        <form method="POST" action="{{ route('admin.daily-quotas.update', $quota) }}" class="rounded-lg border border-slate-200 bg-white p-5 shadow-sm">
            @csrf
            @method('PUT')
            <div class="grid gap-3 lg:grid-cols-[1fr_130px_130px_130px_130px_auto] lg:items-end">
                <div class="rounded-md bg-slate-50 p-3">
                    <p class="text-xs font-black uppercase text-slate-500">Tanggal</p>
                    <p class="mt-1 font-black text-slate-950">{{ $quota->visit_date->format('d/m/Y') }}</p>
                </div>
                <label class="grid gap-2 text-sm font-bold text-slate-700">
                    Total
                    <input name="quota_total" type="number" min="1" value="{{ $quota->quota_total }}" class="rounded-md border border-slate-300 px-3 py-2.5">
                </label>
                <label class="grid gap-2 text-sm font-bold text-slate-700">
                    Terpakai
                    <input name="quota_used" type="number" min="0" value="{{ $quota->quota_used }}" class="rounded-md border border-slate-300 px-3 py-2.5">
                </label>
                <div class="rounded-md bg-slate-50 p-3">
                    <p class="text-xs font-black uppercase text-slate-500">Sisa</p>
                    <p class="mt-1 font-black text-slate-950">{{ $quota->remaining_quota }}</p>
                </div>
                <div class="rounded-md bg-slate-50 p-3">
                    <p class="text-xs font-black uppercase text-slate-500">Status</p>
                    <div class="mt-2"><x-status-badge :status="$quota->computed_status" /></div>
                </div>
                <button class="inline-flex items-center justify-center gap-2 rounded-md bg-slate-950 px-4 py-2.5 text-sm font-black text-white hover:bg-emerald-700">
                    <i data-lucide="save" class="h-4 w-4"></i>
                    Simpan
                </button>
            </div>
        </form>
    @empty
        <p class="rounded-lg border border-slate-200 bg-white p-5 text-sm font-semibold text-slate-500 shadow-sm">Belum ada kuota harian.</p>
    @endforelse
</section>

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