@extends('layouts.app')

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

@section('content')
<div class="pkbm-master-page mx-auto max-w-7xl space-y-5">
    <header class="pkbm-dashboard__heading">
        <div class="min-w-0">
            <p class="pkbm-dashboard__breadcrumb"><span>Kelola Kegiatan</span><i class="bi bi-chevron-right" aria-hidden="true"></i>Form Kehadiran</p>
            <h1 class="pkbm-dashboard__title">Form Kehadiran</h1>
            <p class="pkbm-dashboard__subtitle">Buat form kehadiran dinamis per kegiatan: tambahkan pertanyaan (nama lembaga, checkbox, options, jawaban singkat, tanda tangan), lalu lihat &amp; cetak hasilnya.</p>
        </div>
        <button type="button" class="sp-btn-primary shrink-0" data-open-dialog="form-create-dialog">
            <i class="bi bi-plus-lg" aria-hidden="true"></i>Buat Form Kehadiran
        </button>
    </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 form.</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 overflow-hidden">
        <div class="sp-card-header">
            <h2 class="sp-section-title">Daftar form kehadiran</h2>
            <p class="mt-1 text-xs text-slate-500">{{ number_format($forms->total(), 0, ',', '.') }} form terdaftar</p>
        </div>
        <div class="overflow-x-auto">
            <table class="sp-table min-w-full">
                <thead>
                    <tr>
                        <th scope="col" class="w-12">No</th>
                        <th scope="col">Judul form</th>
                        <th scope="col">Kegiatan</th>
                        <th scope="col" class="text-center">Pertanyaan</th>
                        <th scope="col" class="text-center">Isian</th>
                        <th scope="col" class="text-right">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($forms as $form)
                        <tr>
                            <td class="text-slate-500">{{ $forms->firstItem() + $loop->index }}</td>
                            <td>
                                <a href="{{ route('fk.kegiatan-form.show', $form->id) }}" class="block font-bold text-slate-900 hover:text-blue-700">{{ $form->judul }}</a>
                                @if ($form->deskripsi)<span class="mt-0.5 block text-xs text-slate-500">{{ Str::limit($form->deskripsi, 80) }}</span>@endif
                            </td>
                            <td>
                                <span class="block text-sm text-slate-700">{{ $form->judul_kegiatan ?: 'Kegiatan tanpa judul' }}</span>
                                @if ($form->tanggal_kegiatan && $form->tanggal_kegiatan !== '0000-00-00')
                                    <span class="block text-xs text-slate-500">{{ \Carbon\CarbonImmutable::parse($form->tanggal_kegiatan)->format('d/m/Y') }}</span>
                                @endif
                            </td>
                            <td class="text-center"><span class="rounded-full bg-blue-50 px-2.5 py-1 text-xs font-semibold text-blue-700">{{ $form->pertanyaan_count }}</span></td>
                            <td class="text-center"><span class="rounded-full bg-emerald-50 px-2.5 py-1 text-xs font-semibold text-emerald-700">{{ $form->isian_count }}</span></td>
                            <td class="text-right">
                                <div class="flex flex-wrap justify-end gap-1">
                                    <a href="{{ route('fk.kegiatan-form.show', $form->id) }}" class="sp-btn-secondary whitespace-nowrap" title="Kelola pertanyaan"><i class="bi bi-ui-checks" aria-hidden="true"></i>Kelola</a>
                                    <a href="{{ $form->public_token ? route('public.form-kehadiran.show', $form->public_token) : route('fk.kegiatan-form.isi', $form->id) }}" target="_blank" rel="noopener" class="sp-btn-secondary whitespace-nowrap" title="Isi form (publik)"><i class="bi bi-pencil-square" aria-hidden="true"></i>Isi</a>
                                    <a href="{{ route('fk.kegiatan-form.hasil', $form->id) }}" class="sp-btn-secondary whitespace-nowrap" title="Lihat hasil"><i class="bi bi-table" aria-hidden="true"></i>Hasil</a>
                                    <form method="POST" action="{{ route('fk.kegiatan-form.destroy', $form->id) }}" onsubmit="return confirm('Hapus form ini beserta seluruh pertanyaan dan isian?')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="settings-icon-action settings-icon-action--delete" aria-label="Hapus form" title="Hapus form"><i class="bi bi-trash3" aria-hidden="true"></i></button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" 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-clipboard-check" aria-hidden="true"></i></span>
                                <p class="mt-3 font-semibold text-slate-700">Belum ada form kehadiran</p>
                                <p class="mt-1 text-xs text-slate-500">Klik "Buat Form Kehadiran" untuk memulai.</p>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if ($forms->hasPages())
            <div class="border-t border-slate-100 px-4 py-3">{{ $forms->links() }}</div>
        @endif
    </section>
</div>

<dialog id="form-create-dialog" class="pkbm-master-dialog pkbm-class-form-dialog" aria-labelledby="form-create-title">
    <form method="POST" action="{{ route('fk.kegiatan-form.store') }}">
        @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="form-create-title" class="sp-section-title">Buat form kehadiran</h2>
                <p class="mt-1 text-xs text-slate-500">Pilih kegiatan tempat form ini akan dipakai.</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="form-kegiatan" class="sp-form-label">Kegiatan</label>
                <select id="form-kegiatan" name="id_kegiatan" required class="sp-form-control px-3 py-2.5 text-sm">
                    <option value="">Pilih kegiatan</option>
                    @foreach ($kegiatans as $kegiatan)
                        <option value="{{ $kegiatan->id }}" @selected(old('id_kegiatan') == $kegiatan->id)>{{ $kegiatan->judul_kegiatan ?: 'Kegiatan #'.$kegiatan->id }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label for="form-judul" class="sp-form-label">Judul form</label>
                <input id="form-judul" name="judul" maxlength="255" required value="{{ old('judul') }}" placeholder="mis. Daftar Hadir Rapat Koordinasi" class="sp-form-control px-3 py-2.5 text-sm">
            </div>
            <div>
                <label for="form-deskripsi" class="sp-form-label">Deskripsi (opsional)</label>
                <textarea id="form-deskripsi" name="deskripsi" rows="3" maxlength="2000" class="sp-form-control px-3 py-2.5 text-sm">{{ old('deskripsi') }}</textarea>
            </div>
        </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>Buat &amp; tambah pertanyaan</button>
        </div>
    </form>
</dialog>

@push('scripts')
    <script>
        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(); });
        });
        @if ($errors->any() && old('id_kegiatan'))
            document.getElementById('form-create-dialog')?.showModal();
        @endif
    </script>
@endpush
@endsection