@extends('layouts.app')

@section('title', 'Kelola Form Kehadiran')

@php
    $typeLabels = [
        'lembaga' => 'Nama Lembaga (dropdown)',
        'checkbox' => 'Checkbox',
        'options' => 'Options (Pilihan)',
        'short' => 'Jawaban Singkat',
        'signature' => 'Tanda Tangan',
    ];
    $typeIcons = [
        'lembaga' => 'bi-bank',
        'checkbox' => 'bi-check-square',
        'options' => 'bi-list-ul',
        'short' => 'bi-input-cursor-text',
        'signature' => 'bi-pencil',
    ];
@endphp

@section('content')
<div class="pkbm-master-page mx-auto max-w-5xl space-y-5">
    <header class="pkbm-dashboard__heading">
        <div class="min-w-0">
            <p class="pkbm-dashboard__breadcrumb">
                <a href="{{ route('fk.kegiatan-form.index') }}" class="hover:text-blue-700"><span>Form Kehadiran</span></a>
                <i class="bi bi-chevron-right" aria-hidden="true"></i>Kelola Form
            </p>
            <h1 class="pkbm-dashboard__title">{{ $form->judul }}</h1>
            <p class="pkbm-dashboard__subtitle">
                {{ $activity?->judul_kegiatan ?: 'Kegiatan tanpa judul' }}
                @if ($activity && $activity->tanggal_kegiatan && $activity->tanggal_kegiatan !== '0000-00-00')
                    &middot; {{ \Carbon\CarbonImmutable::parse($activity->tanggal_kegiatan)->locale('id')->translatedFormat('d F Y') }}
                @endif
            </p>
            @if ($form->batas_waktu)
                @php $expiredNow = \Carbon\CarbonImmutable::parse($form->batas_waktu, 'Asia/Jakarta')->lt(\Carbon\CarbonImmutable::now('Asia/Jakarta')); @endphp
                <span class="mt-1 inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-semibold {{ $expiredNow ? 'bg-rose-50 text-rose-700' : 'bg-emerald-50 text-emerald-700' }}">
                    <i class="bi {{ $expiredNow ? 'bi-hourglass-split' : 'bi-clock-history' }}" aria-hidden="true"></i>
                    {{ $expiredNow ? 'Berakhir' : 'Terbuka hingga' }} {{ \Carbon\CarbonImmutable::parse($form->batas_waktu)->locale('id')->translatedFormat('l, d F Y H:i') }} WIB
                </span>
            @else
                <span class="mt-1 inline-flex items-center gap-1.5 rounded-full bg-slate-100 px-2.5 py-1 text-xs font-semibold text-slate-500"><i class="bi bi-infinity" aria-hidden="true"></i>Tanpa batas waktu</span>
            @endif
        </div>
        <div class="flex shrink-0 flex-wrap gap-2">
            <a href="{{ route('public.form-kehadiran.show', $form->public_token) }}" target="_blank" rel="noopener" class="sp-btn-secondary"><i class="bi bi-box-arrow-up-right" aria-hidden="true"></i>Buka Form Publik</a>
            <a href="{{ route('fk.kegiatan-form.hasil', $form->id) }}" class="sp-btn-secondary"><i class="bi bi-table" aria-hidden="true"></i>Lihat Hasil</a>
            <a href="{{ route('fk.kegiatan-form.print', $form->id) }}" class="sp-btn-primary" target="_blank" rel="noopener"><i class="bi bi-printer" aria-hidden="true"></i>Cetak</a>
        </div>
    </header>

    @if (session('status'))
        <div role="status" class="settings-notice settings-notice--success"><i class="bi bi-check-circle-fill" aria-hidden="true"></i><span>{{ session('status') }}</span></div>
    @endif
    @if ($errors->any())
        <div role="alert" class="settings-notice settings-notice--error">
            <i class="bi bi-exclamation-circle-fill" aria-hidden="true"></i>
            <div><p class="font-semibold">Periksa kembali data.</p><ul class="mt-1 list-inside list-disc">@foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul></div>
        </div>
    @endif

    <section class="sp-card">
        <div class="sp-card-header"><h2 class="sp-section-title">Tautan publik (isi tanpa login)</h2><p class="mt-1 text-xs text-slate-500">Bagikan tautan ini ke peserta. Pengisian form tidak memerlukan akun.</p></div>
        <div class="flex flex-col gap-2 p-5 sm:flex-row sm:items-center">
            <input id="public-share-url" readonly value="{{ route('public.form-kehadiran.show', $form->public_token) }}" class="sp-form-control flex-1 px-3 py-2.5 text-sm"
                onclick="this.select();">
            <div class="flex shrink-0 gap-2">
                <button type="button" id="copy-public-url" class="sp-btn-secondary whitespace-nowrap"><i class="bi bi-clipboard" aria-hidden="true"></i>Salin</button>
                <a href="{{ route('public.form-kehadiran.show', $form->public_token) }}" target="_blank" rel="noopener" class="sp-btn-primary whitespace-nowrap"><i class="bi bi-box-arrow-up-right" aria-hidden="true"></i>Pratinjau</a>
            </div>
        </div>
    </section>

    <section class="sp-card">
        <div class="sp-card-header"><h2 class="sp-section-title">Informasi form</h2></div>
        <form method="POST" action="{{ route('fk.kegiatan-form.update', $form->id) }}" class="space-y-4 p-5">
            @csrf
            @method('PUT')
            <div class="grid gap-4 sm:grid-cols-2">
                <div>
                    <label for="judul" class="sp-form-label">Judul form</label>
                    <input id="judul" name="judul" maxlength="255" required value="{{ old('judul', $form->judul) }}" class="sp-form-control px-3 py-2.5 text-sm">
                </div>
                <div>
                    <label class="sp-form-label">Kegiatan</label>
                    <p class="rounded-lg bg-slate-50 px-3 py-2.5 text-sm text-slate-600">{{ $activity?->judul_kegiatan ?: '-' }}</p>
                </div>
            </div>
            <div>
                <label for="deskripsi" class="sp-form-label">Deskripsi (opsional)</label>
                <textarea id="deskripsi" name="deskripsi" rows="2" maxlength="2000" class="sp-form-control px-3 py-2.5 text-sm">{{ old('deskripsi', $form->deskripsi) }}</textarea>
            </div>
            <div>
                <label for="batas_waktu" class="sp-form-label">Batas waktu pengisian (opsional)</label>
                <input id="batas_waktu" type="datetime-local" name="batas_waktu" class="sp-form-control px-3 py-2.5 text-sm"
                    value="{{ old('batas_waktu', $form->batas_waktu ? \Carbon\CarbonImmutable::parse($form->batas_waktu)->format('Y-m-d\TH:i') : '') }}">
                <p class="mt-1 text-xs text-slate-500">Setelah waktu ini terlewat, form publik hanya menampilkan kop dan pesan "waktu pengisian telah berakhir". Kosongkan agar form selalu terbuka.</p>
            </div>
            <div class="flex justify-end">
                <button type="submit" class="sp-btn-primary"><i class="bi bi-check2-circle" aria-hidden="true"></i>Simpan informasi</button>
            </div>
        </form>
    </section>

    <section class="sp-card overflow-hidden">
        <div class="sp-card-header flex items-center justify-between gap-3">
            <div>
                <h2 class="sp-section-title">Pertanyaan</h2>
                <p class="mt-1 text-xs text-slate-500">{{ $questions->count() }} pertanyaan &middot; gunakan "Tambah Pertanyaan" untuk menambah field form.</p>
            </div>
            <button type="button" class="sp-btn-primary shrink-0" data-open-dialog="question-create-dialog">
                <i class="bi bi-plus-lg" aria-hidden="true"></i>Tambah Pertanyaan
            </button>
        </div>
        <div class="divide-y divide-slate-100">
            @forelse ($questions as $question)
                <div class="flex items-start justify-between gap-3 p-4">
                    <div class="min-w-0">
                        <div class="flex flex-wrap items-center gap-2">
                            <span class="grid size-7 place-items-center rounded-lg bg-blue-50 text-blue-600"><i class="bi {{ $typeIcons[$question->tipe] ?? 'bi-question-lg' }}" aria-hidden="true"></i></span>
                            <p class="font-semibold text-slate-900">{{ $loop->iteration }}. {{ $question->pertanyaan }}</p>
                            @if ($question->wajib)<span class="rounded-full bg-amber-50 px-2 py-0.5 text-xs font-semibold text-amber-700">Wajib</span>@endif
                        </div>
                        <p class="mt-1 text-xs text-slate-500">{{ $typeLabels[$question->tipe] ?? $question->tipe }}</p>
                        @if (! empty($question->opsi_list))
                            <ul class="mt-1 flex flex-wrap gap-1.5">
                                @foreach ($question->opsi_list as $opt)
                                    <li class="rounded-md bg-slate-100 px-2 py-0.5 text-xs text-slate-600">{{ $opt }}</li>
                                @endforeach
                            </ul>
                        @endif
                    </div>
                    <div class="flex shrink-0 items-center gap-1">
                        <button type="button" class="settings-icon-action" data-edit-question="{{ $question->id }}" title="Ubah"><i class="bi bi-pencil" aria-hidden="true"></i></button>
                        <form method="POST" action="{{ route('fk.kegiatan-form.pertanyaan.destroy', [$form->id, $question->id]) }}" onsubmit="return confirm('Hapus pertanyaan ini?')">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="settings-icon-action settings-icon-action--delete" aria-label="Hapus pertanyaan" title="Hapus"><i class="bi bi-trash3" aria-hidden="true"></i></button>
                        </form>
                    </div>
                </div>
            @empty
                <div class="px-4 py-10 text-center">
                    <span class="mx-auto grid size-11 place-items-center rounded-xl bg-blue-50 text-xl text-blue-600"><i class="bi bi-ui-checks" aria-hidden="true"></i></span>
                    <p class="mt-3 font-semibold text-slate-700">Belum ada pertanyaan</p>
                    <p class="mt-1 text-xs text-slate-500">Klik "Tambah Pertanyaan" untuk menyusun form.</p>
                </div>
            @endforelse
        </div>
    </section>
</div>

{{-- Dialog tambah pertanyaan --}}
<dialog id="question-create-dialog" class="pkbm-master-dialog pkbm-class-form-dialog" aria-labelledby="question-create-title">
    <form method="POST" action="{{ route('fk.kegiatan-form.pertanyaan.store', $form->id) }}">
        @csrf
        <div class="pkbm-class-form-dialog__header flex items-start justify-between gap-3 border-b border-slate-100 p-5">
            <div>
                <h2 id="question-create-title" class="sp-section-title">Tambah pertanyaan</h2>
                <p class="mt-1 text-xs text-slate-500">Pilih tipe field untuk menentukan bentuk jawaban.</p>
            </div>
            <button type="button" data-close-dialog class="pkbm-class-form-dialog__close grid size-8 shrink-0 place-items-center rounded-lg text-slate-500" aria-label="Tutup"><i class="bi bi-x-lg" aria-hidden="true"></i></button>
        </div>
        <div class="space-y-4 p-5">
            <div>
                <label for="create-pertanyaan" class="sp-form-label">Teks pertanyaan</label>
                <input id="create-pertanyaan" name="pertanyaan" maxlength="500" required value="{{ old('pertanyaan') }}" placeholder="mis. Nama lembaga peserta" class="sp-form-control px-3 py-2.5 text-sm">
            </div>
            <div>
                <label for="create-tipe" class="sp-form-label">Tipe pertanyaan</label>
                <select id="create-tipe" name="tipe" required data-options-toggle class="sp-form-control px-3 py-2.5 text-sm">
                    @foreach ($types as $tipe)
                        <option value="{{ $tipe }}" @selected(old('tipe') === $tipe)>{{ $typeLabels[$tipe] }}</option>
                    @endforeach
                </select>
            </div>
            <div data-options-field class="@if (! in_array(old('tipe'), ['checkbox', 'options'], true)) hidden @endif">
                <label for="create-opsi" class="sp-form-label">Opsi (satu per baris)</label>
                <textarea id="create-opsi" name="opsi_text" rows="4" maxlength="2000" placeholder="Hadir&#10;Berhalangan&#10;Izin" class="sp-form-control px-3 py-2.5 text-sm">{{ old('opsi_text') }}</textarea>
                <p class="mt-1 text-xs text-slate-500">Hisi untuk tipe Checkbox &amp; Options.</p>
            </div>
            <label class="flex items-center gap-2 text-sm text-slate-700">
                <input type="checkbox" name="wajib" value="1" @checked(old('wajib')) class="size-4 rounded border-slate-300">
                Wajib diisi
            </label>
        </div>
        <div class="pkbm-class-form-dialog__footer flex justify-end gap-2 border-t border-slate-100 p-5">
            <button type="button" data-close-dialog class="sp-btn-secondary">Batal</button>
            <button type="submit" class="sp-btn-primary"><i class="bi bi-check2-circle" aria-hidden="true"></i>Tambah</button>
        </div>
    </form>
</dialog>

{{-- Dialog ubah pertanyaan --}}
<dialog id="question-edit-dialog" class="pkbm-master-dialog pkbm-class-form-dialog" aria-labelledby="question-edit-title">
    <form method="POST" id="question-edit-form" action="">
        @csrf
        @method('PUT')
        <div class="pkbm-class-form-dialog__header flex items-start justify-between gap-3 border-b border-slate-100 p-5">
            <div>
                <h2 id="question-edit-title" class="sp-section-title">Ubah pertanyaan</h2>
            </div>
            <button type="button" data-close-dialog class="pkbm-class-form-dialog__close grid size-8 shrink-0 place-items-center rounded-lg text-slate-500" aria-label="Tutup"><i class="bi bi-x-lg" aria-hidden="true"></i></button>
        </div>
        <div class="space-y-4 p-5">
            <div>
                <label for="edit-pertanyaan" class="sp-form-label">Teks pertanyaan</label>
                <input id="edit-pertanyaan" name="pertanyaan" maxlength="500" required class="sp-form-control px-3 py-2.5 text-sm">
            </div>
            <div>
                <label for="edit-tipe" class="sp-form-label">Tipe pertanyaan</label>
                <select id="edit-tipe" name="tipe" required data-options-toggle class="sp-form-control px-3 py-2.5 text-sm">
                    @foreach ($types as $tipe)
                        <option value="{{ $tipe }}">{{ $typeLabels[$tipe] }}</option>
                    @endforeach
                </select>
            </div>
            <div data-options-field class="hidden">
                <label for="edit-opsi" class="sp-form-label">Opsi (satu per baris)</label>
                <textarea id="edit-opsi" name="opsi_text" rows="4" maxlength="2000" class="sp-form-control px-3 py-2.5 text-sm"></textarea>
            </div>
            <label class="flex items-center gap-2 text-sm text-slate-700">
                <input type="checkbox" id="edit-wajib" name="wajib" value="1" class="size-4 rounded border-slate-300">
                Wajib diisi
            </label>
        </div>
        <div class="pkbm-class-form-dialog__footer flex justify-end gap-2 border-t border-slate-100 p-5">
            <button type="button" data-close-dialog class="sp-btn-secondary">Batal</button>
            <button type="submit" class="sp-btn-primary"><i class="bi bi-check2-circle" aria-hidden="true"></i>Simpan</button>
        </div>
    </form>
</dialog>

@php
    $questionData = $questions->keyBy('id')->map(fn ($q) => [
        'pertanyaan' => $q->pertanyaan,
        'tipe' => $q->tipe,
        'wajib' => (bool) $q->wajib,
        'opsi_text' => implode("\n", $q->opsi_list ?? []),
    ]);
@endphp

@push('scripts')
    <script>
        const FORM_ID = @js($form->id);
        const QUESTION_DATA = @js($questionData);

        const FORM_URL = document.getElementById('public-share-url');
        document.getElementById('copy-public-url')?.addEventListener('click', async () => {
            try { await navigator.clipboard.writeText(FORM_URL.value); } catch (e) { FORM_URL.select(); document.execCommand('copy'); }
            const btn = document.getElementById('copy-public-url');
            const original = btn.innerHTML;
            btn.innerHTML = '<i class="bi bi-check2" aria-hidden="true"></i>Tersalin';
            setTimeout(() => { btn.innerHTML = original; }, 1800);
        });

        document.querySelectorAll('[data-open-dialog]').forEach((button) => {
            button.addEventListener('click', () => document.getElementById(button.dataset.openDialog)?.showModal());
        });
        document.querySelectorAll('[data-close-dialog]').forEach((button) => {
            button.addEventListener('click', () => button.closest('dialog')?.close());
        });
        document.querySelectorAll('dialog').forEach((dialog) => {
            dialog.addEventListener('click', (event) => { if (event.target === dialog) dialog.close(); });
        });

        // Toggle field opsi hanya untuk tipe checkbox/options.
        function syncOptionsVisibility(select) {
            const field = select.closest('form').querySelector('[data-options-field]');
            if (field) field.classList.toggle('hidden', !['checkbox', 'options'].includes(select.value));
        }
        document.querySelectorAll('[data-options-toggle]').forEach((select) => {
            select.addEventListener('change', () => syncOptionsVisibility(select));
            syncOptionsVisibility(select);
        });

        // Isi dialog ubah dari data pertanyaan.
        document.querySelectorAll('[data-edit-question]').forEach((button) => {
            button.addEventListener('click', () => {
                const q = QUESTION_DATA[button.dataset.editQuestion];
                if (!q) return;
                const dialog = document.getElementById('question-edit-dialog');
                document.getElementById('question-edit-form').action = `/fk/kegiatan-form/${FORM_ID}/pertanyaan/${button.dataset.editQuestion}`;
                document.getElementById('edit-pertanyaan').value = q.pertanyaan;
                document.getElementById('edit-tipe').value = q.tipe;
                document.getElementById('edit-opsi').value = q.opsi_text;
                document.getElementById('edit-wajib').checked = q.wajib;
                syncOptionsVisibility(document.getElementById('edit-tipe'));
                dialog.showModal();
            });
        });

        @if ($errors->any() && old('pertanyaan'))
            document.getElementById('question-create-dialog')?.showModal();
        @endif
    </script>
@endpush
@endsection