@extends('layouts.dashboard')

@section('title', 'Pesan Tiket Online')

@section('content')
<div class="grid gap-6 lg:grid-cols-[.85fr_1.15fr]">
    <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-11 w-11 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">Kuota Tanggal Kunjungan</h2>
                <p class="mt-1 text-sm leading-6 text-slate-600">Pilih tanggal untuk melihat sisa kapasitas sebelum membuat pesanan.</p>
            </div>
        </div>

        <div id="quotaBox" class="mt-5 grid gap-3 text-sm">
            <div class="rounded-lg bg-slate-50 p-4">
                <p class="text-xs font-black uppercase text-slate-500">Tanggal</p>
                <p id="quotaDate" class="mt-1 font-black text-slate-950">{{ $quota->visit_date->format('d/m/Y') }}</p>
            </div>
            <div class="grid gap-3 sm:grid-cols-3">
                <div class="rounded-lg bg-slate-50 p-4">
                    <p class="text-xs font-black uppercase text-slate-500">Kuota</p>
                    <p id="quotaTotal" class="mt-1 text-2xl font-black text-slate-950">{{ $quota->quota_total }}</p>
                </div>
                <div class="rounded-lg bg-slate-50 p-4">
                    <p class="text-xs font-black uppercase text-slate-500">Terisi</p>
                    <p id="quotaUsed" class="mt-1 text-2xl font-black text-slate-950">{{ $quota->quota_used }}</p>
                </div>
                <div class="rounded-lg bg-slate-50 p-4">
                    <p class="text-xs font-black uppercase text-slate-500">Sisa</p>
                    <p id="quotaRemaining" class="mt-1 text-2xl font-black text-slate-950">{{ $quota->remaining_quota }}</p>
                </div>
            </div>
            <div class="rounded-lg bg-sky-50 p-4">
                <p class="text-xs font-black uppercase text-sky-700">Status</p>
                <p id="quotaStatus" class="mt-1 font-black text-sky-800">{{ $quota->computed_status }}</p>
            </div>
        </div>
    </section>

    <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-11 w-11 place-items-center rounded-md bg-sky-100 text-sky-700">
                <i data-lucide="ticket" class="h-5 w-5"></i>
            </span>
            <div>
                <h2 class="font-black text-slate-950">Form Pemesanan</h2>
                <p class="mt-1 text-sm leading-6 text-slate-600">Tiket aktif setelah pembayaran diverifikasi oleh admin.</p>
            </div>
        </div>

        <form method="POST" action="{{ route('user.tickets.store') }}" class="mt-5 grid gap-4">
            @csrf
            <label class="grid gap-2 text-sm font-bold text-slate-700">
                Tanggal Kunjungan
                <input id="visitDate" name="visit_date" type="date" value="{{ old('visit_date', $visitDate) }}" min="{{ now()->toDateString() }}" class="rounded-md border border-slate-300 px-3 py-3" required>
            </label>
            <label class="grid gap-2 text-sm font-bold text-slate-700">
                Jenis Tiket
                <select id="ticketType" name="ticket_type_id" class="rounded-md border border-slate-300 px-3 py-3" required>
                    @foreach($ticketTypes as $type)
                        <option value="{{ $type->id }}" data-price="{{ $type->price }}">{{ $type->name }} - {{ \App\Support\LocaleFormat::money($type->price) }}</option>
                    @endforeach
                </select>
            </label>
            <label class="grid gap-2 text-sm font-bold text-slate-700">
                Jumlah Tiket
                <input id="quantity" name="quantity" type="number" min="1" value="{{ old('quantity', 1) }}" class="rounded-md border border-slate-300 px-3 py-3" required>
            </label>
            <div class="rounded-lg bg-slate-950 p-4 text-white">
                <p class="text-sm font-semibold text-slate-300">Total Pembayaran</p>
                <p id="totalPrice" class="mt-1 text-3xl font-black">Rp 0</p>
                <p id="quotaHint" class="mt-2 text-sm font-semibold text-slate-300">Menyesuaikan sisa kuota.</p>
            </div>
            <button id="submitBtn" class="inline-flex items-center justify-center gap-2 rounded-md bg-sky-700 px-4 py-3 font-black text-white hover:bg-slate-950">
                <i data-lucide="shopping-cart" class="h-4 w-4"></i>
                Buat Pesanan
            </button>
        </form>
    </section>
</div>

<script>
    const visitDate = document.getElementById('visitDate');
    const ticketType = document.getElementById('ticketType');
    const quantity = document.getElementById('quantity');
    const totalPrice = document.getElementById('totalPrice');
    const submitBtn = document.getElementById('submitBtn');
    const quotaHint = document.getElementById('quotaHint');
    let remaining = Number(document.getElementById('quotaRemaining').textContent);

    function rupiah(value) {
        return new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', maximumFractionDigits: 0 }).format(value);
    }

    function calculate() {
        const price = Number(ticketType.options[ticketType.selectedIndex]?.dataset.price || 0);
        const qty = Number(quantity.value || 0);
        const blocked = remaining <= 0 || qty < 1 || qty > remaining || !price;

        totalPrice.textContent = rupiah(price * qty);
        submitBtn.disabled = blocked;
        submitBtn.classList.toggle('opacity-60', blocked);
        quotaHint.textContent = blocked
            ? 'Jumlah tiket tidak tersedia untuk tanggal ini.'
            : `Sisa kuota setelah pesanan: ${remaining - qty} orang.`;
    }

    async function loadQuota() {
        try {
            const response = await fetch(`/quota/${visitDate.value}`, { headers: { Accept: 'application/json' } });
            if (!response.ok) throw new Error('Kuota gagal dimuat.');

            const data = await response.json();
            remaining = Number(data.remaining_quota);
            document.getElementById('quotaDate').textContent = data.visit_date;
            document.getElementById('quotaTotal').textContent = data.quota_total;
            document.getElementById('quotaUsed').textContent = data.quota_used;
            document.getElementById('quotaRemaining').textContent = data.remaining_quota;
            document.getElementById('quotaStatus').textContent = data.status;
        } catch (error) {
            quotaHint.textContent = 'Kuota gagal dimuat. Coba pilih tanggal lagi.';
        }

        calculate();
    }

    visitDate.addEventListener('change', loadQuota);
    ticketType.addEventListener('change', calculate);
    quantity.addEventListener('input', calculate);
    calculate();
</script>
@endsection