@extends('layouts.app')

@section('title', $form->judul)

@section('content')
<main class="public-exam-order relative isolate min-h-[calc(100vh-4rem)] overflow-hidden bg-slate-50 px-4 py-8 sm:px-6 sm:py-12">
    <div class="pointer-events-none absolute inset-x-0 top-0 -z-10 h-96 bg-gradient-to-b from-blue-50 via-slate-50 to-transparent"></div>
    <div class="pointer-events-none absolute -right-24 top-8 -z-10 size-72 rounded-full bg-blue-100/60 blur-3xl"></div>
    <div class="mx-auto max-w-4xl space-y-6 sm:space-y-8">
        <header class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-slate-950 via-blue-950 to-blue-900 px-6 py-8 text-white shadow-xl shadow-blue-950/15 sm:px-10 sm:py-10">
            <div class="pointer-events-none absolute -right-10 -top-20 size-72 rounded-full border border-white/10"></div>
            <div class="pointer-events-none absolute -right-1 top-12 size-44 rounded-full border border-white/10"></div>
            <div class="relative max-w-3xl">
                <div class="inline-flex items-center gap-2 rounded-full border border-cyan-300/20 bg-cyan-300/10 px-3 py-1.5 text-[0.68rem] font-bold uppercase tracking-[0.14em] text-cyan-200">
                    <i class="bi bi-journal-check text-sm" aria-hidden="true"></i>
                    <span>{{ $form->nama_ujian }} <span class="mx-1 text-cyan-100/50">/</span> {{ $form->tahun_pelajaran }}</span>
                </div>
                <h1 class="public-exam-order__title mt-5 font-bold tracking-tight">{{ $form->judul }}</h1>
                @if ($form->deskripsi)<p class="mt-4 max-w-2xl text-sm leading-6 text-blue-100/85 sm:text-base">{{ $form->deskripsi }}</p>@endif
                @if ($form->batas_waktu)
                    <div class="mt-6 inline-flex items-center gap-2 rounded-lg border border-white/10 bg-white/10 px-3.5 py-2.5 text-sm font-medium text-white/90 backdrop-blur-sm">
                        <i class="bi bi-calendar3 text-cyan-200" aria-hidden="true"></i>
                        <span>Batas pemesanan</span>
                        <span class="font-bold text-white">{{ \Carbon\CarbonImmutable::parse($form->batas_waktu)->format('d/m/Y') }}</span>
                    </div>
                @endif
            </div>
        </header>

        @if ($expired)
            <section class="rounded-2xl border border-amber-200 bg-white p-8 text-center shadow-sm sm:p-10">
                <span class="mx-auto grid size-14 place-items-center rounded-2xl bg-amber-50 text-2xl text-amber-700"><i class="bi bi-calendar-x" aria-hidden="true"></i></span>
                <h2 class="public-exam-order__card-title mt-4 font-bold tracking-tight text-slate-900">Pemesanan ditutup</h2>
                <p class="mx-auto mt-2 max-w-md text-sm leading-6 text-slate-600">Form ini sudah tidak menerima pesanan baru. Hubungi pengelola jika Anda membutuhkan informasi lebih lanjut.</p>
            </section>
        @else
            @if ($errors->any())
                <div role="alert" class="settings-notice settings-notice--error rounded-xl">
                    <i class="bi bi-exclamation-circle-fill" aria-hidden="true"></i>
                    <div><p class="font-semibold">Periksa kembali data pemesanan.</p><ul class="mt-1 list-inside list-disc">@foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul></div>
                </div>
            @endif
            <form method="POST" action="{{ route('public.pemesanan-ujian.submit', $form->token) }}" class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-lg shadow-slate-900/[0.04]">
                @csrf
                <div class="border-b border-slate-100 px-5 py-5 sm:px-8 sm:py-6">
                    <div class="flex items-start gap-3.5">
                        <span class="grid size-11 shrink-0 place-items-center rounded-xl bg-blue-50 text-lg text-blue-700"><i class="bi bi-receipt" aria-hidden="true"></i></span>
                        <div>
                            <p class="text-xs font-bold uppercase tracking-[0.12em] text-blue-700">Formulir pemesanan</p>
                            <h2 class="public-exam-order__card-title mt-1 font-bold tracking-tight text-slate-900">Lengkapi detail pesanan</h2>
                            <p class="mt-1 text-sm leading-5 text-slate-500">Pastikan data pemesan dan paket soal sudah sesuai sebelum dikirim.</p>
                        </div>
                    </div>
                </div>
                <div class="space-y-6 px-5 py-6 sm:px-8 sm:py-8">
                    <div>
                        <label for="order-pkbm" class="mb-2 block text-sm font-semibold text-slate-800">PKBM <span class="text-rose-600">*</span></label>
                        <select id="order-pkbm" name="id_pkbm" required data-native-select class="sp-form-control w-full border px-3.5 py-3 text-sm">
                            <option value="">Pilih lembaga</option>
                            @foreach ($institutions as $institution)<option value="{{ $institution->id }}" @selected(old('id_pkbm') == $institution->id)>{{ $institution->nama_pkbm }}</option>@endforeach
                        </select>
                    </div>
                    <div class="grid gap-5 sm:grid-cols-2">
                        <div>
                            <label for="order-name" class="mb-2 block text-sm font-semibold text-slate-800">Nama pemesan <span class="text-rose-600">*</span></label>
                            <input id="order-name" name="nama_pemesan" required maxlength="150" value="{{ old('nama_pemesan') }}" placeholder="Masukkan nama lengkap" autocomplete="name" class="sp-form-control w-full border px-3.5 py-3 text-sm placeholder:text-slate-400">
                        </div>
                        <div>
                            <label for="order-contact" class="mb-2 block text-sm font-semibold text-slate-800">Nomor kontak <span class="font-normal text-slate-400">(opsional)</span></label>
                            <input id="order-contact" name="kontak" maxlength="50" value="{{ old('kontak') }}" placeholder="Contoh: 0812 3456 7890" autocomplete="tel" class="sp-form-control w-full border px-3.5 py-3 text-sm placeholder:text-slate-400">
                        </div>
                    </div>
                    <section data-order-builder data-class-prices='@json($pricesByGrade)' data-initial-orders='@json(old("pesanan", []))' class="space-y-4">
                        <div class="flex flex-wrap items-end justify-between gap-3">
                            <div>
                                <h3 class="public-exam-order__section-title font-bold text-slate-900">Jenjang dan jumlah pesanan <span class="text-rose-600">*</span></h3>
                                <p class="mt-1 text-xs leading-5 text-slate-500">Isi jumlah untuk setiap kelas yang memesan. Satu jenjang hanya dapat ditambahkan satu kali.</p>
                            </div>
                            <button type="button" data-add-level class="inline-flex min-h-10 items-center justify-center gap-2 rounded-lg border border-blue-200 bg-blue-50 px-3.5 py-2 text-sm font-bold text-blue-800 transition hover:border-blue-300 hover:bg-blue-100 disabled:cursor-not-allowed disabled:opacity-50">
                                <i class="bi bi-plus-lg" aria-hidden="true"></i>Tambah jenjang
                            </button>
                        </div>
                        <div data-order-lines class="space-y-4"></div>
                        <div data-no-prices hidden class="rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm leading-5 text-amber-900">Harga setiap kelas mengikuti tahun pelajaran dan jenis ujian pada formulir ini. Jika harga kelas yang dipesan belum tersedia, pesanan tetap dapat dikirim dan tagihannya menunggu penetapan harga.</div>
                        <div class="rounded-xl border border-slate-200 bg-slate-50 p-4 sm:p-5">
                            <h3 class="public-exam-order__summary-title font-bold uppercase text-slate-600">Ringkasan pesanan</h3>
                            <div data-level-totals class="mt-3 grid gap-2 sm:grid-cols-3"></div>
                            <div class="mt-4 flex flex-wrap items-end justify-between gap-2 border-t border-slate-200 pt-4">
                                <div><p data-grand-label class="text-xs font-bold uppercase tracking-[0.1em] text-slate-500">Total keseluruhan</p><p data-grand-total class="mt-1 text-2xl font-extrabold tracking-tight text-slate-950">Rp 0</p><p data-unpriced-note hidden class="mt-1 text-xs text-amber-700">Belum termasuk jenjang yang menunggu penetapan harga.</p></div>
                                <p data-grand-quantity class="text-sm font-semibold text-slate-600">0 paket</p>
                            </div>
                        </div>
                    </section>
                    <div>
                        <label for="order-note" class="mb-2 block text-sm font-semibold text-slate-800">Catatan <span class="font-normal text-slate-400">(opsional)</span></label>
                        <textarea id="order-note" name="catatan" rows="3" maxlength="2000" placeholder="Tambahkan informasi yang perlu kami ketahui..." class="sp-form-control w-full resize-y border px-3.5 py-3 text-sm placeholder:text-slate-400">{{ old('catatan') }}</textarea>
                    </div>
                </div>
                <div class="flex flex-col gap-5 border-t border-slate-100 bg-slate-50/80 px-5 py-5 sm:flex-row sm:items-center sm:justify-between sm:px-8 sm:py-6">
                    <div>
                        <p data-grand-label-footer class="text-xs font-bold uppercase tracking-[0.1em] text-slate-500">Total keseluruhan</p>
                        <p data-grand-total-footer aria-live="polite" class="mt-1 text-2xl font-extrabold tracking-tight text-slate-950">Rp 0</p>
                    </div>
                    <button type="submit" data-order-submit class="inline-flex min-h-12 w-full items-center justify-center gap-2 rounded-xl border border-blue-700 bg-blue-700 px-6 py-3 text-sm font-bold text-white shadow-md shadow-blue-700/20 transition hover:border-blue-800 hover:bg-blue-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-700 disabled:cursor-not-allowed disabled:opacity-50 sm:w-auto">
                        <i class="bi bi-send-fill text-xs" aria-hidden="true"></i>
                        Kirim pemesanan
                        <i class="bi bi-arrow-right text-sm" aria-hidden="true"></i>
                    </button>
                </div>
            </form>
        @endif
        <footer class="flex items-center justify-center gap-2 pt-1 text-center text-xs font-medium text-slate-400">
            <span class="grid size-6 place-items-center rounded-md bg-white text-[0.65rem] text-blue-700 shadow-sm"><i class="bi bi-mortarboard-fill" aria-hidden="true"></i></span>
            <span>SmartPenF <span class="mx-1 text-slate-300">·</span> Forum Komunikasi PKBM</span>
        </footer>
    </div>
</main>
@endsection

@push('scripts')
<script>
    const orderBuilder = document.querySelector('[data-order-builder]');
    if (orderBuilder) {
        const prices = JSON.parse(orderBuilder.dataset.classPrices || '{}');
        const initialOrders = JSON.parse(orderBuilder.dataset.initialOrders || '{}');
        const gradesByLevel = {A: [1, 2, 3, 4, 5, 6], B: [7, 8, 9], C: [10, 11, 12]};
        const levelLabels = {A: 'Paket A', B: 'Paket B', C: 'Paket C'};
        const money = new Intl.NumberFormat('id-ID', {style: 'currency', currency: 'IDR', maximumFractionDigits: 0});
        const lines = orderBuilder.querySelector('[data-order-lines]');
        const addButton = orderBuilder.querySelector('[data-add-level]');
        const summary = orderBuilder.querySelector('[data-level-totals]');
        let nextLineId = 0;

        const selectedLevels = (exceptLine = null) => new Set(
            Array.from(lines.querySelectorAll('[data-order-line]'))
                .filter((line) => line !== exceptLine && line.dataset.level)
                .map((line) => line.dataset.level),
        );

        const refreshLevelOptions = () => {
            const used = selectedLevels();
            lines.querySelectorAll('[data-level-select]').forEach((select) => {
                const currentLevel = select.value;
                select.replaceChildren(new Option('Pilih jenjang', ''));
                ['A', 'B', 'C'].forEach((level) => {
                    if (!used.has(level) || level === currentLevel) {
                        const grades = gradesByLevel[level];
                        select.add(new Option(`${levelLabels[level]} · Kelas ${grades[0]}–${grades[grades.length - 1]}`, level));
                    }
                });
                select.value = currentLevel;
            });
            addButton.disabled = ['A', 'B', 'C'].every((level) => used.has(level))
                || Array.from(lines.querySelectorAll('[data-order-line]')).some((line) => !line.dataset.level);
        };

        const updateSummary = () => {
            let grandTotal = 0;
            let grandQuantity = 0;
            let hasUnpricedLevel = false;
            summary.replaceChildren();
            ['A', 'B', 'C'].forEach((level) => {
                let quantity = 0;
                let subtotal = 0;
                let hasPrice = true;
                lines.querySelectorAll(`[data-order-line][data-level="${level}"]`).forEach((line) => {
                    line.querySelectorAll('[data-grade-quantity]').forEach((input) => {
                        const count = Math.max(0, Number(input.value || 0));
                        quantity += count;
                        if (count > 0) {
                            const classPrice = prices[input.dataset.grade];
                            if (classPrice === undefined) {
                                hasPrice = false;
                            } else {
                                subtotal += count * Number(classPrice);
                            }
                        }
                    });
                });
                if (quantity > 0 && hasPrice) grandTotal += subtotal;
                if (selectedLevels().has(level) && quantity > 0 && !hasPrice) hasUnpricedLevel = true;
                grandQuantity += quantity;
                const card = document.createElement('div');
                card.className = 'rounded-lg border border-slate-200 bg-white px-3 py-2.5';
                const title = document.createElement('p');
                title.className = 'text-xs font-semibold text-slate-500';
                title.textContent = `${levelLabels[level]} · ${quantity} paket`;
                const amount = document.createElement('p');
                amount.className = 'mt-1 text-sm font-bold text-slate-900';
                amount.textContent = quantity === 0 || !hasPrice ? (quantity > 0 ? 'Menunggu harga' : money.format(0)) : money.format(subtotal);
                card.append(title, amount);
                summary.append(card);
            });
            orderBuilder.querySelector('[data-grand-total]').textContent = money.format(grandTotal);
            document.querySelector('[data-grand-total-footer]').textContent = money.format(grandTotal);
            orderBuilder.querySelector('[data-grand-quantity]').textContent = `${grandQuantity} paket`;
            const totalLabel = hasUnpricedLevel ? 'Total sementara' : 'Total keseluruhan';
            orderBuilder.querySelector('[data-grand-label]').textContent = totalLabel;
            document.querySelector('[data-grand-label-footer]').textContent = totalLabel;
            orderBuilder.querySelector('[data-unpriced-note]').hidden = !hasUnpricedLevel;
            document.querySelector('[data-order-submit]').disabled = grandQuantity < 1;
        };

        const renderClasses = (line, values = {}) => {
            const container = line.querySelector('[data-grade-fields]');
            container.replaceChildren();
            const level = line.dataset.level;
            if (!level) {
                container.classList.add('hidden');
                return;
            }

            container.classList.remove('hidden');
            gradesByLevel[level].forEach((grade) => {
                const field = document.createElement('label');
                field.className = 'block rounded-lg border border-slate-200 bg-white p-3';
                const title = document.createElement('span');
                title.className = 'mb-2 block text-xs font-semibold text-slate-700';
                title.textContent = `Kelas ${grade}`;
                const priceLabel = document.createElement('span');
                priceLabel.className = 'mb-2 block text-[0.7rem] text-slate-500';
                priceLabel.textContent = prices[grade] === undefined ? 'Harga menunggu penetapan' : money.format(Number(prices[grade])) + ' / paket';
                const quantity = document.createElement('input');
                quantity.type = 'number';
                quantity.name = `pesanan[${level}][${grade}]`;
                quantity.min = '0';
                quantity.max = '1000';
                quantity.step = '1';
                quantity.value = values[grade] ?? 0;
                quantity.inputMode = 'numeric';
                quantity.setAttribute('aria-label', `Jumlah pesanan Kelas ${grade}`);
                quantity.dataset.grade = grade;
                quantity.className = 'sp-form-control w-full border px-3 py-2 text-sm';
                quantity.dataset.gradeQuantity = '';
                quantity.addEventListener('input', updateSummary);
                field.append(title, priceLabel, quantity);
                container.append(field);
            });
        };

        const addLine = (level = '') => {
            const line = document.createElement('article');
            line.dataset.orderLine = '';
            line.className = 'rounded-xl border border-slate-200 bg-slate-50/70 p-4 sm:p-5';
            const header = document.createElement('div');
            header.className = 'flex flex-wrap items-end justify-between gap-3';
            const field = document.createElement('div');
            field.className = 'min-w-52 flex-1';
            const label = document.createElement('label');
            label.className = 'mb-2 block text-sm font-semibold text-slate-800';
            label.htmlFor = `order-level-${++nextLineId}`;
            label.textContent = 'Jenjang';
            const select = document.createElement('select');
            select.id = label.htmlFor;
            select.required = true;
            select.dataset.levelSelect = '';
            select.dataset.nativeSelect = '';
            select.className = 'sp-form-control w-full border px-3.5 py-3 text-sm';
            field.append(label, select);
            const remove = document.createElement('button');
            remove.type = 'button';
            remove.className = 'inline-flex min-h-10 items-center justify-center gap-2 rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm font-semibold text-slate-600 transition hover:border-rose-200 hover:bg-rose-50 hover:text-rose-700';
            remove.innerHTML = '<i class="bi bi-trash3" aria-hidden="true"></i>Hapus';
            remove.addEventListener('click', () => {
                line.remove();
                refreshLevelOptions();
                updateSummary();
            });
            header.append(field, remove);
            const gradeFields = document.createElement('div');
            gradeFields.dataset.gradeFields = '';
            gradeFields.className = 'mt-4 grid hidden grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-6';
            line.append(header, gradeFields);
            lines.append(line);
            select.addEventListener('change', () => {
                line.dataset.level = select.value;
                renderClasses(line);
                refreshLevelOptions();
                updateSummary();
            });
            refreshLevelOptions();
            select.value = level;
            line.dataset.level = level;
            renderClasses(line, initialOrders[level] || {});
            refreshLevelOptions();
            return line;
        };

        const hasAllClassPrices = gradesByLevel.A.concat(gradesByLevel.B, gradesByLevel.C).every((grade) => prices[grade] !== undefined);
        orderBuilder.querySelector('[data-no-prices]').hidden = hasAllClassPrices;
        addButton.hidden = false;
        const restoredLevels = Object.keys(initialOrders).filter((level) => gradesByLevel[level]);
        if (restoredLevels.length) {
            restoredLevels.forEach((level) => addLine(level));
        } else {
            addLine();
        }
        addButton.addEventListener('click', () => {
            const used = selectedLevels();
            const nextLevel = ['A', 'B', 'C'].find((level) => !used.has(level));
            if (nextLevel) addLine(nextLevel);
        });
        refreshLevelOptions();
        updateSummary();
    }
</script>
@endpush