@php
    $v = $visit ?? null;
    $dateVal = old('visit_date', $v?->visit_date->format('Y-m-d') ?? now()->format('Y-m-d'));
    $instVal = old('institution', $v?->institution ?? '');
    $purposeVal = old('purpose', $v?->purpose ?? '');
    $guests = old('guests', $v?->guests ?? []);
    if (! is_array($guests) || empty($guests)) {
        $guests = [['full_name' => '', 'phone_number' => '']];
    }
    $countVal = count($guests);
@endphp

<form method="POST" action="{{ $v ? route('operator.update', $v) : route('visits.store') }}" class="grid grid-cols-1 gap-5 sm:grid-cols-2">
    @csrf
    @if ($v)
        @method('PUT')
    @elseif (! empty($service))
        <input type="hidden" name="service" value="{{ $service }}">
    @endif

    <div>
        <label class="label" for="visit_date">Tanggal Kunjungan</label>
        <input type="date" name="visit_date" id="visit_date" value="{{ $dateVal }}" class="field">
    </div>

    <div>
        <label class="label" for="guest_count">Jumlah Tamu</label>
        <input type="number" name="guest_count" id="guest_count" min="1" max="50" value="{{ $countVal }}" class="field">
    </div>

    <div class="sm:col-span-2">
        <label class="label" for="institution">Instansi / Asal</label>
        <input type="text" name="institution" id="institution" value="{{ $instVal }}" required class="field">
    </div>

    <div class="sm:col-span-2">
        <p class="label">Data Tamu</p>
        <div id="guest-forms" class="grid grid-cols-1 gap-4">
            @foreach ($guests as $i => $g)
                <div class="guest-block grid grid-cols-1 gap-4 rounded-field bg-paper-2/50 p-4 ring-1 ring-line sm:grid-cols-2">
                    <div class="sm:col-span-2">
                        <p class="text-xs font-semibold uppercase tracking-wider text-navy">Tamu <span class="guest-no">{{ $i + 1 }}</span></p>
                    </div>
                    <div>
                        <label class="label" for="guest-{{ $i }}-name">Nama Lengkap</label>
                        <input type="text" name="guests[{{ $i }}][full_name]" id="guest-{{ $i }}-name" value="{{ $g['full_name'] ?? '' }}" required class="field">
                    </div>
                    <div>
                        <label class="label" for="guest-{{ $i }}-phone">Nomor HP</label>
                        <input type="tel" name="guests[{{ $i }}][phone_number]" id="guest-{{ $i }}-phone" value="{{ $g['phone_number'] ?? '' }}" required placeholder="08xx xxxx xxxx" class="field">
                    </div>
                    @if (! $v)
                        <div class="sm:col-span-2">
                            <p class="label">Tanda Tangan Tamu {{ $i + 1 }}</p>
                            <div class="relative aspect-[2.2/1] w-full overflow-hidden rounded-field bg-white ring-1 ring-line">
                                <canvas class="pad-canvas h-full w-full touch-none select-none"></canvas>
                                <div class="pointer-events-none absolute inset-0 z-10 m-3 rounded-lg border-2 border-dashed border-line"></div>
                            </div>
                            <input type="hidden" name="guests[{{ $i }}][signature]" class="pad-data">
                            <button type="button" class="pad-clear btn-ghost mt-3 px-4 py-2 text-sm">Hapus Tanda Tangan</button>
                        </div>
                    @endif
                </div>
            @endforeach
        </div>
        @if (! $v)
            <p class="mt-2 text-xs text-ink-soft">Isi data lalu tanda tangani langsung di bawahnya untuk setiap tamu. Nomor antrian akan dicetak di halaman berikutnya.</p>
        @else
            <p class="mt-2 text-xs text-ink-soft">Instansi berlaku untuk semua tamu.</p>
        @endif
    </div>

    <div class="sm:col-span-2">
        <label class="label" for="purpose">Keperluan</label>
        <textarea name="purpose" id="purpose" rows="3" required class="field">{{ $purposeVal }}</textarea>
    </div>

    <div class="sm:col-span-2 flex flex-col gap-3 sm:flex-row">
        @if ($cancelUrl)
            <a href="{{ $cancelUrl }}" class="btn-ghost flex-1 px-6 py-3 text-center">Batal</a>
        @endif
        <button type="submit" class="btn-primary flex-1 px-6 py-3">
            @unless ($v)
                <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" aria-hidden="true">
                    <rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/>
                    <path d="M14 14h3v3h-3zM21 14v.01M14 21v.01M18 17h3v3h-3z"/>
                </svg>
            @endunless
            {{ $submitLabel }}
        </button>
    </div>
</form>

<script>
    const guestCount = document.getElementById('guest_count');
    const guestForms = document.getElementById('guest-forms');

    function guestBlock(i) {
        const div = document.createElement('div');
        div.className = 'guest-block grid grid-cols-1 gap-4 rounded-field bg-paper-2/50 p-4 ring-1 ring-line sm:grid-cols-2';
        div.innerHTML = `
            <div class="sm:col-span-2">
                <p class="text-xs font-semibold uppercase tracking-wider text-navy">Tamu <span class="guest-no"></span></p>
            </div>
            <div>
                <label class="label">Nama Lengkap</label>
                <input type="text" name="guests[${i}][full_name]" required class="field">
            </div>
            <div>
                <label class="label">Nomor HP</label>
                <input type="tel" name="guests[${i}][phone_number]" required placeholder="08xx xxxx xxxx" class="field">
            </div>
            <div class="sm:col-span-2">
                <p class="label">Tanda Tangan Tamu</p>
                <div class="relative aspect-[2.2/1] w-full overflow-hidden rounded-field bg-white ring-1 ring-line">
                    <canvas class="pad-canvas h-full w-full touch-none select-none"></canvas>
                    <div class="pointer-events-none absolute inset-0 z-10 m-3 rounded-lg border-2 border-dashed border-line"></div>
                </div>
                <input type="hidden" name="guests[${i}][signature]" class="pad-data">
                <button type="button" class="pad-clear btn-ghost mt-3 px-4 py-2 text-sm">Hapus Tanda Tangan</button>
            </div>`;
        return div;
    }

    function renumberGuestForms() {
        Array.from(guestForms.children).forEach((block, i) => {
            const inputs = block.querySelectorAll('input');
            inputs[0].name = `guests[${i}][full_name]`;
            inputs[1].name = `guests[${i}][phone_number]`;
            inputs[2].name = `guests[${i}][signature]`;
            block.querySelector('.guest-no').textContent = i + 1;
        });
    }

    function syncGuestForms() {
        const n = Math.max(1, parseInt(guestCount.value, 10) || 1);
        while (guestForms.children.length < n) guestForms.appendChild(guestBlock(guestForms.children.length));
        while (guestForms.children.length > n) guestForms.lastChild.remove();
        renumberGuestForms();
        if (window.initGuestPads) window.initGuestPads();
    }

    guestCount.addEventListener('input', syncGuestForms);
    guestCount.addEventListener('change', syncGuestForms);
    syncGuestForms();
</script>