@extends('layouts.app')

@section('title', 'Data PKBM')

@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>Admin Kabupaten</span><i class="bi bi-chevron-right" aria-hidden="true"></i>Data PKBM</p>
            <h1 class="pkbm-dashboard__title">Database PKBM</h1>
            <p class="pkbm-dashboard__subtitle">Total terdaftar: {{ $institutions->count() }} lembaga.</p>
        </div>
        <button type="button" class="sp-btn-primary shrink-0" data-open-create>
            <i class="bi bi-plus-circle" aria-hidden="true"></i>Tambah PKBM
        </button>
    </header>

    @if (session('status'))
        <div role="status" class="settings-notice settings-notice--{{ session('status')['type'] ?? 'success' }}">
            <i class="bi {{ (session('status')['type'] ?? 'success') === 'success' ? 'bi-check-circle-fill' : 'bi-exclamation-circle-fill' }}" aria-hidden="true"></i>
            <span>{{ session('status')['message'] }}</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">Permintaan belum dapat diproses.</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 flex flex-wrap items-center justify-between gap-3">
            <div>
                <h2 class="sp-section-title">Daftar Lembaga PKBM</h2>
                <p class="mt-1 text-xs text-slate-500">Urut dari ID PKBM terendah. @if ($kecamatan)Kecamatan <span class="font-semibold text-slate-700">{{ $kecamatan }}</span>@endif</p>
            </div>
            <span class="inline-flex rounded-full bg-sky-50 px-3 py-1 text-xs font-semibold text-sky-700">{{ $institutions->count() }} Lembaga</span>
        </div>
        <div class="flex flex-wrap items-end gap-3 border-b border-slate-100 p-4">
            <form method="GET" action="{{ route('fk.pkbm.index') }}" class="flex flex-wrap items-end gap-3">
                <div class="w-full sm:w-64">
                    <label class="sp-form-label" for="kecamatan">Filter Kecamatan</label>
                    <select name="kecamatan" id="kecamatan" onchange="this.form.submit()" class="sp-form-control w-full px-3 py-2 text-sm">
                        <option value="">Semua Kecamatan</option>
                        @foreach ($kecamatanList as $kec)
                            <option value="{{ $kec }}" @selected($kecamatan === $kec)>{{ $kec }}</option>
                        @endforeach
                    </select>
                </div>
                @if ($kecamatan)
                    <a href="{{ route('fk.pkbm.index') }}" class="sp-btn-secondary px-3 py-2 text-sm">
                        <i class="bi bi-x-circle me-1" aria-hidden="true"></i>Reset
                    </a>
                @endif
            </form>
        </div>
        <div class="overflow-x-auto">
            <table class="sp-table min-w-[52rem]">
                <thead>
                    <tr>
                        <th scope="col" class="text-center">Nomor PKBM</th>
                        <th scope="col" class="text-center">ID PKBM</th>
                        <th scope="col">Profil Lembaga</th>
                        <th scope="col">Lokasi &amp; Alamat</th>
                        <th scope="col" class="text-right">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($institutions as $pkbm)
                        <tr>
                            <td class="text-center font-semibold text-slate-500">{{ $loop->iteration }}</td>
                            <td class="text-center">
                                <span class="inline-flex rounded-md bg-slate-100 px-2 py-0.5 font-mono text-xs font-semibold text-slate-600">#{{ $pkbm->id }}</span>
                            </td>
                            <th scope="row" class="font-normal">
                                <div class="flex items-center gap-3">
                                    <span class="grid size-11 shrink-0 place-items-center overflow-hidden rounded-lg border border-slate-200 bg-slate-50">
                                        @if ($pkbm->logo)
                                            <img src="{{ route('fk.pkbm.logo', $pkbm->id) }}" alt="" class="size-full object-cover">
                                        @else
                                            <i class="bi bi-image text-slate-400" aria-hidden="true"></i>
                                        @endif
                                    </span>
                                    <div class="min-w-0">
                                        <div class="font-semibold text-slate-800">{{ $pkbm->nama_pkbm }}</div>
                                        <div class="text-xs text-slate-500">
                                            <span class="me-2"><i class="bi bi-person-vcard me-1"></i>{{ $pkbm->npsn ?: '-' }}</span>
                                            <span><i class="bi bi-envelope me-1"></i>{{ $pkbm->email ?: '-' }}</span>
                                        </div>
                                        @if ($pkbm->website)
                                            <div class="text-xs text-sky-600"><i class="bi bi-globe me-1"></i>{{ $pkbm->website }}</div>
                                        @endif
                                    </div>
                                </div>
                            </th>
                            <td>
                                <div class="text-sm text-slate-700">{{ $pkbm->alamat ?: '-' }}</div>
                                <div class="text-xs text-slate-500">
                                    {{ collect([$pkbm->kelurahan ? 'Desa '.$pkbm->kelurahan : null, $pkbm->kecamatan ? 'Kec. '.$pkbm->kecamatan : null, $pkbm->kabupaten, $pkbm->provinsi])->filter()->implode(', ') }}
                                </div>
                            </td>
                            <td class="text-right">
                                <div class="inline-flex items-center gap-1">
                                    <button type="button" class="settings-icon-action" data-edit="{{ $pkbm->id }}" aria-label="Ubah {{ $pkbm->nama_pkbm }}" title="Ubah">
                                        <i class="bi bi-pencil-square" aria-hidden="true"></i>
                                    </button>
                                    <form method="POST" action="{{ route('fk.pkbm.destroy', $pkbm->id) }}" onsubmit="return confirm('Yakin ingin menghapus data ini?')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="settings-icon-action text-rose-600" aria-label="Hapus {{ $pkbm->nama_pkbm }}" title="Hapus">
                                            <i class="bi bi-trash" aria-hidden="true"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="5" class="py-12 text-center text-sm text-slate-500">Belum ada lembaga PKBM terdaftar.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </section>
</div>

<dialog id="create-pkbm-dialog" class="pkbm-master-dialog pkbm-class-form-dialog" aria-labelledby="create-pkbm-title">
    <form method="POST" action="{{ route('fk.pkbm.store') }}" enctype="multipart/form-data">
        @csrf
        <input type="hidden" name="_form" value="create">
        @include('fk.pkbm.partials.form-fields', ['mode' => 'create', 'pkbm' => null])
    </form>
</dialog>

@foreach ($institutions as $pkbm)
    <dialog id="edit-pkbm-{{ $pkbm->id }}" class="pkbm-master-dialog pkbm-class-form-dialog" aria-labelledby="edit-pkbm-title-{{ $pkbm->id }}">
        <form method="POST" action="{{ route('fk.pkbm.update', $pkbm->id) }}" enctype="multipart/form-data">
            @csrf
            @method('PUT')
            <input type="hidden" name="_form" value="edit">
            <input type="hidden" name="_id" value="{{ $pkbm->id }}">
            @include('fk.pkbm.partials.form-fields', ['mode' => 'edit', 'pkbm' => $pkbm])
        </form>
    </dialog>
@endforeach
@endsection

@push('scripts')
    <script>
        const createDialog = document.querySelector('#create-pkbm-dialog');
        document.querySelector('[data-open-create]')?.addEventListener('click', () => createDialog.showModal());
        document.querySelectorAll('[data-edit]').forEach((button) => {
            button.addEventListener('click', () => {
                const dialog = document.querySelector(`#edit-pkbm-${button.dataset.edit}`);
                dialog?.showModal();
            });
        });
        document.querySelectorAll('[data-close-dialog]').forEach((button) => {
            button.addEventListener('click', () => button.closest('dialog').close());
        });

        @if (old('_form') === 'create')
            createDialog.showModal();
        @elseif (old('_form') === 'edit' && old('_id'))
            document.querySelector(`#edit-pkbm-{{ old('_id') }}`)?.showModal();
        @endif
    </script>
@endpush