@extends('layouts.app')

@section('title', 'Kategori Kegiatan')

@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>Standar Pengelolaan</span><i class="bi bi-chevron-right" aria-hidden="true"></i>Manajemen Kegiatan<i class="bi bi-chevron-right" aria-hidden="true"></i>Kategori Kegiatan</p>
            <h1 class="pkbm-dashboard__title">Kategori Kegiatan</h1>
            <p class="pkbm-dashboard__subtitle">Kelola jenis kegiatan untuk mengelompokkan agenda dan risalah PKBM.</p>
        </div>
        <div class="flex flex-wrap gap-2">
            <a href="{{ route('pkbm.kegiatan.index') }}" class="sp-btn-secondary"><i class="bi bi-arrow-left" aria-hidden="true"></i>Daftar kegiatan</a>
            <button type="button" class="sp-btn-primary" data-open-dialog="category-create-dialog"><i class="bi bi-plus-lg" aria-hidden="true"></i>Tambah kategori</button>
        </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 kategori kegiatan.</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 settings-history-card__header">
            <h2 class="sp-section-title">Daftar kategori</h2>
            <p class="mt-1 text-xs text-slate-500">{{ number_format($categories->total(), 0, ',', '.') }} kategori 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">Nama kategori</th><th scope="col">Keterangan</th><th scope="col" class="text-right">Aksi</th></tr></thead>
                <tbody>
                    @forelse ($categories as $category)
                        <tr>
                            <td class="text-slate-500">{{ $categories->firstItem() + $loop->index }}</td>
                            <td><span class="font-bold text-slate-900">{{ $category->nama_kategori }}</span></td>
                            <td class="text-slate-600">{{ $category->keterangan ?: '-' }}</td>
                            <td class="text-right">
                                <div class="flex justify-end gap-1">
                                    <button type="button" class="settings-icon-action" data-edit-category data-url="{{ route('pkbm.kegiatan.categories.update', $category->id) }}" data-id="{{ $category->id }}" data-name="{{ $category->nama_kategori }}" data-description="{{ $category->keterangan }}" aria-label="Edit {{ $category->nama_kategori }}" title="Edit kategori"><i class="bi bi-pencil-square" aria-hidden="true"></i></button>
                                    <form method="POST" action="{{ route('pkbm.kegiatan.categories.destroy', $category->id) }}" onsubmit="return confirm('Hapus kategori ini? Kategori yang masih digunakan tidak dapat dihapus.')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="settings-icon-action settings-icon-action--delete" aria-label="Hapus {{ $category->nama_kategori }}" title="Hapus kategori"><i class="bi bi-trash3" aria-hidden="true"></i></button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="4" 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-tags" aria-hidden="true"></i></span><p class="mt-3 font-semibold text-slate-700">Belum ada kategori kegiatan</p><p class="mt-1 text-xs text-slate-500">Buat kategori untuk mengelompokkan kegiatan.</p></td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if ($categories->hasPages())
            <div class="border-t border-slate-100 px-4 py-3">{{ $categories->links() }}</div>
        @endif
    </section>
</div>

<dialog id="category-create-dialog" class="pkbm-master-dialog pkbm-class-form-dialog" aria-labelledby="category-create-title">
    <form method="POST" action="{{ route('pkbm.kegiatan.categories.store') }}">
        @csrf
        <input type="hidden" name="_form" value="create-category">
        <div class="pkbm-class-form-dialog__header flex items-start justify-between gap-3 border-b border-slate-100 p-5">
            <div><h2 id="category-create-title" class="sp-section-title">Buat kategori baru</h2><p class="mt-1 text-xs text-slate-500">Nama kategori harus berbeda dalam satu PKBM.</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="category-name" class="sp-form-label">Nama kategori</label><input id="category-name" name="nama_kategori" maxlength="100" required value="{{ old('_form') === 'create-category' ? old('nama_kategori') : '' }}" class="sp-form-control px-3 py-2.5 text-sm"></div>
            <div><label for="category-description" class="sp-form-label">Keterangan</label><textarea id="category-description" name="keterangan" rows="3" maxlength="255" class="sp-form-control px-3 py-2.5 text-sm">{{ old('_form') === 'create-category' ? old('keterangan') : '' }}</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>Simpan kategori</button>
        </div>
    </form>
</dialog>

<dialog id="category-edit-dialog" class="pkbm-master-dialog pkbm-class-form-dialog" aria-labelledby="category-edit-title">
    <form id="category-edit-form" method="POST">
        @csrf
        @method('PUT')
        <input type="hidden" name="_form" value="edit-category">
        <input id="edit-category-id" type="hidden" name="_category" value="{{ old('_form') === 'edit-category' ? old('_category') : '' }}">
        <div class="pkbm-class-form-dialog__header flex items-start justify-between gap-3 border-b border-slate-100 p-5">
            <div><h2 id="category-edit-title" class="sp-section-title">Edit kategori</h2><p class="mt-1 text-xs text-slate-500">Perbarui nama dan keterangan kategori.</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="edit-category-name" class="sp-form-label">Nama kategori</label><input id="edit-category-name" name="nama_kategori" maxlength="100" required value="{{ old('_form') === 'edit-category' ? old('nama_kategori') : '' }}" class="sp-form-control px-3 py-2.5 text-sm"></div>
            <div><label for="edit-category-description" class="sp-form-label">Keterangan</label><textarea id="edit-category-description" name="keterangan" rows="3" maxlength="255" class="sp-form-control px-3 py-2.5 text-sm">{{ old('_form') === 'edit-category' ? old('keterangan') : '' }}</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>Simpan perubahan</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();
            });
        });
        const editForm = document.getElementById('category-edit-form');
        document.querySelectorAll('[data-edit-category]').forEach((button) => {
            button.addEventListener('click', () => {
                editForm.action = button.dataset.url;
                document.getElementById('edit-category-id').value = button.dataset.id;
                document.getElementById('edit-category-name').value = button.dataset.name;
                document.getElementById('edit-category-description').value = button.dataset.description;
                document.getElementById('category-edit-dialog').showModal();
            });
        });
        const failedForm = @json((string) old('_form'));
        if (failedForm === 'create-category') {
            document.getElementById('category-create-dialog').showModal();
        } else if (failedForm === 'edit-category') {
            const failedCategoryId = @json((string) old('_category'));
            const failedButton = [...document.querySelectorAll('[data-edit-category]')].find((button) => button.dataset.id === failedCategoryId);
            if (failedButton) {
                editForm.action = failedButton.dataset.url;
                document.getElementById('category-edit-dialog').showModal();
            }
        }
    </script>
@endpush
@endsection