@extends('layouts.app')

@section('title', 'Tambah Pengurus')

@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><span>Kelola Pengurus</span><i class="bi bi-chevron-right" aria-hidden="true"></i>Tambah Pengurus</p>
            <h1 class="pkbm-dashboard__title">Kelola Pengurus</h1>
            <p class="pkbm-dashboard__subtitle">Kelola periode kepengurusan, divisi, dan pengurus inti organisasi FK PKBM.</p>
        </div>
        <a href="{{ route('fk.pengurus.program.index') }}" class="sp-btn-secondary shrink-0">
            <i class="bi bi-diagram-2" aria-hidden="true"></i>Program Pengurus
        </a>
    </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

    {{-- Ringkasan struktur organisasi: periode aktif, pengurus inti + jabatan, dan divisi. --}}
    @php
        $periodeAktif = $periodes->firstWhere('is_aktif', 1) ?? $periodes->first();
        $pengurusInti = $penguruses->whereNull('divisi_id');
    @endphp
    <section class="sp-card overflow-hidden">
        <div class="sp-card-header flex flex-wrap items-center justify-between gap-3">
            <div class="flex items-center gap-3">
                <h2 class="sp-section-title">Struktur Organisasi</h2>
                <span class="inline-flex rounded-full bg-sky-50 px-3 py-1 text-xs font-semibold text-sky-700">{{ $penguruses->count() }} pengurus</span>
            </div>
            <p class="text-sm text-slate-500">Ringkasan kepengurusan FK PKBM.</p>
        </div>
        <div class="grid gap-px bg-slate-100 sm:grid-cols-3">
            {{-- Periode --}}
            <div class="bg-white p-5">
                <p class="text-sm font-semibold text-slate-800">Periode</p>
                @if ($periodeAktif)
                    <p class="mt-2 text-base font-bold leading-snug text-sky-700">{{ $periodeAktif->nama }}</p>
                    <p class="mt-0.5 text-sm text-slate-500">{{ $periodeAktif->tahun_mulai && $periodeAktif->tahun_selesai ? $periodeAktif->tahun_mulai.' – '.$periodeAktif->tahun_selesai : 'Tahun belum diisi' }}</p>
                    <span class="mt-2 inline-flex rounded-full bg-emerald-50 px-2.5 py-1 text-xs font-semibold text-emerald-700">Aktif</span>
                @else
                    <p class="mt-2 text-sm text-slate-400">Belum ada periode.</p>
                @endif
            </div>
            {{-- Pengurus Inti & Jabatan --}}
            <div class="bg-white p-5">
                <p class="text-sm font-semibold text-slate-800">Pengurus Inti &amp; Jabatan</p>
                @if ($pengurusInti->isEmpty())
                    <p class="mt-2 text-sm text-slate-400">Belum ada pengurus inti.</p>
                @else
                    <ul class="mt-2 space-y-1.5">
                        @foreach ($pengurusInti as $pi)
                            <li class="flex items-center justify-between gap-2 text-sm">
                                <span class="font-medium text-slate-700">{{ $pi->nama_lengkap }}</span>
                                <span class="shrink-0 rounded-full bg-slate-100 px-2 py-0.5 text-xs font-semibold text-slate-600">{{ $pi->jabatan }}</span>
                            </li>
                        @endforeach
                    </ul>
                @endif
            </div>
            {{-- Divisi --}}
            <div class="bg-white p-5">
                <p class="text-sm font-semibold text-slate-800">Divisi</p>
                @if ($divisis->isEmpty())
                    <p class="mt-2 text-sm text-slate-400">Belum ada divisi.</p>
                @else
                    <ul class="mt-2 space-y-1.5">
                        @foreach ($divisis as $dv)
                            <li class="flex items-center justify-between gap-2 text-sm">
                                <span class="font-medium text-slate-700">{{ $dv->nama }}</span>
                                <span class="shrink-0 text-xs text-slate-500">{{ $penguruses->where('divisi_id', $dv->id)->count() }} anggota</span>
                            </li>
                        @endforeach
                    </ul>
                @endif
            </div>
        </div>
    </section>

    {{-- Tab switcher --}}
    <div class="flex flex-wrap gap-2">
        @foreach ([
            ['key' => 'periode', 'label' => 'Periode', 'icon' => 'bi-calendar-range', 'count' => $periodes->count()],
            ['key' => 'divisi', 'label' => 'Divisi', 'icon' => 'bi-diagram-3', 'count' => $divisis->count()],
            ['key' => 'pengurus', 'label' => 'Pengurus Inti', 'icon' => 'bi-person-badge', 'count' => $penguruses->count()],
        ] as $t)
            <button type="button" data-tab="{{ $t['key'] }}"
                    @class([
                        'inline-flex items-center gap-2 rounded-lg px-3.5 py-2 text-sm font-semibold text-slate-800 transition',
                        'bg-sky-50 ring-1 ring-sky-200' => $t['key'] === 'periode',
                        'hover:bg-slate-100' => $t['key'] !== 'periode',
                    ])>
                <i class="bi {{ $t['icon'] }}" aria-hidden="true"></i>{{ $t['label'] }}
                <span class="rounded-full bg-slate-200/70 px-1.5 text-xs font-semibold text-slate-600">{{ $t['count'] }}</span>
            </button>
        @endforeach
    </div>

    {{-- Panel: Periode --}}
    <section class="sp-card overflow-hidden" data-panel="periode">
        <div class="sp-card-header flex flex-wrap items-center justify-between gap-3">
            <div>
                <h2 class="sp-section-title">Periode Kepengurusan</h2>
                <p class="mt-1 text-xs text-slate-500">Masa bakti organisasi FK.</p>
            </div>
            <button type="button" class="sp-btn-primary" data-dialog-open="create-periode">
                <i class="bi bi-plus-circle" aria-hidden="true"></i>Tambah Periode
            </button>
        </div>
        <div class="overflow-x-auto">
            <table class="sp-table min-w-[46rem]">
                <thead>
                    <tr>
                        <th scope="col" class="w-12 text-center">No</th>
                        <th scope="col">Nama Periode</th>
                        <th scope="col" class="text-center">Tahun</th>
                        <th scope="col">Status</th>
                        <th scope="col">Keterangan</th>
                        <th scope="col" class="text-right">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($periodes as $pd)
                        <tr>
                            <td class="text-center text-slate-500">{{ $loop->iteration }}</td>
                            <th scope="row" class="font-semibold text-slate-800">{{ $pd->nama }}</th>
                            <td class="text-center text-sm text-slate-600">{{ $pd->tahun_mulai && $pd->tahun_selesai ? $pd->tahun_mulai.' - '.$pd->tahun_selesai : '-' }}</td>
                            <td>
                                @if ($pd->is_aktif)
                                    <span class="inline-flex rounded-full bg-emerald-50 px-2.5 py-1 text-xs font-semibold text-emerald-700">Aktif</span>
                                @else
                                    <span class="inline-flex rounded-full bg-slate-100 px-2.5 py-1 text-xs font-semibold text-slate-500">Non-aktif</span>
                                @endif
                            </td>
                            <td class="text-sm text-slate-500">{{ $pd->keterangan ?: '-' }}</td>
                            <td class="text-right">
                                <div class="inline-flex items-center gap-1">
                                    <button type="button" class="settings-icon-action" data-dialog-open="edit-periode-{{ $pd->id }}" aria-label="Ubah periode" title="Ubah"><i class="bi bi-pencil-square" aria-hidden="true"></i></button>
                                    <form method="POST" action="{{ route('fk.pengurus.periode.destroy', $pd->id) }}" onsubmit="return confirm('Hapus periode ini?')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="settings-icon-action text-rose-600" aria-label="Hapus periode" title="Hapus"><i class="bi bi-trash" aria-hidden="true"></i></button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="6" class="py-12 text-center text-sm text-slate-500">Belum ada periode. Tambahkan periode terlebih dahulu.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </section>

    {{-- Panel: Divisi --}}
    <section class="sp-card overflow-hidden hidden" data-panel="divisi">
        <div class="sp-card-header flex flex-wrap items-center justify-between gap-3">
            <div>
                <h2 class="sp-section-title">Divisi / Bidang</h2>
                <p class="mt-1 text-xs text-slate-500">Bidang kerja dalam struktur organisasi.</p>
            </div>
            <button type="button" class="sp-btn-primary" data-dialog-open="create-divisi">
                <i class="bi bi-plus-circle" aria-hidden="true"></i>Tambah Divisi
            </button>
        </div>
        <div class="overflow-x-auto">
            <table class="sp-table min-w-[40rem]">
                <thead>
                    <tr>
                        <th scope="col" class="w-12 text-center">No</th>
                        <th scope="col">Nama Divisi</th>
                        <th scope="col">Keterangan</th>
                        <th scope="col" class="text-center">Pengurus</th>
                        <th scope="col" class="text-right">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($divisis as $dv)
                        <tr>
                            <td class="text-center text-slate-500">{{ $loop->iteration }}</td>
                            <th scope="row" class="font-semibold text-slate-800">{{ $dv->nama }}</th>
                            <td class="text-sm text-slate-500">{{ $dv->keterangan ?: '-' }}</td>
                            <td class="text-center">
                                <span class="inline-flex rounded-full bg-slate-100 px-2.5 py-1 text-xs font-semibold text-slate-600">{{ $penguruses->where('divisi_id', $dv->id)->count() }}</span>
                            </td>
                            <td class="text-right">
                                <div class="inline-flex items-center gap-1">
                                    <button type="button" class="settings-icon-action" data-dialog-open="edit-divisi-{{ $dv->id }}" aria-label="Ubah divisi" title="Ubah"><i class="bi bi-pencil-square" aria-hidden="true"></i></button>
                                    <form method="POST" action="{{ route('fk.pengurus.divisi.destroy', $dv->id) }}" onsubmit="return confirm('Hapus divisi ini?')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="settings-icon-action text-rose-600" aria-label="Hapus divisi" 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 divisi.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </section>

    {{-- Panel: Pengurus Inti --}}
    <section class="sp-card overflow-hidden hidden" data-panel="pengurus">
        <div class="sp-card-header flex flex-wrap items-center justify-between gap-3">
            <div>
                <h2 class="sp-section-title">Pengurus Inti &amp; Anggota</h2>
                <p class="mt-1 text-xs text-slate-500">Daftar personalia beserta jabatan, divisi, dan periodenya.</p>
            </div>
            <button type="button" class="sp-btn-primary" data-dialog-open="create-pengurus">
                <i class="bi bi-plus-circle" aria-hidden="true"></i>Tambah Pengurus
            </button>
        </div>
        <div class="overflow-x-auto">
            <table class="sp-table min-w-[58rem]">
                <thead>
                    <tr>
                        <th scope="col" class="w-12 text-center">No</th>
                        <th scope="col">Nama &amp; Jabatan</th>
                        <th scope="col" class="text-center">JK</th>
                        <th scope="col">Kontak</th>
                        <th scope="col">Divisi</th>
                        <th scope="col">Periode</th>
                        <th scope="col">Status</th>
                        <th scope="col" class="text-right">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($penguruses as $pg)
                        <tr>
                            <td class="text-center text-slate-500">{{ $loop->iteration }}</td>
                            <th scope="row" class="font-normal">
                                <div class="font-semibold text-slate-800">{{ $pg->nama_lengkap }}</div>
                                <div class="text-xs text-sky-600">{{ $pg->jabatan }}</div>
                            </th>
                            <td class="text-center text-sm text-slate-600">{{ $pg->jenis_kelamin ?: '-' }}</td>
                            <td class="text-sm text-slate-600">{{ $pg->no_hp ?: '-' }}</td>
                            <td class="text-sm text-slate-600">{{ $pg->divisi_nama ?: '-' }}</td>
                            <td class="text-sm text-slate-600">{{ $pg->periode_nama ?: '-' }}</td>
                            <td>
                                <span @class([
                                    'inline-flex rounded-full px-2.5 py-1 text-xs font-semibold',
                                    'bg-emerald-50 text-emerald-700' => $pg->status_aktif,
                                    'bg-slate-100 text-slate-500' => ! $pg->status_aktif,
                                ])>{{ $pg->status_aktif ? 'Aktif' : 'Non-aktif' }}</span>
                            </td>
                            <td class="text-right">
                                <div class="inline-flex items-center gap-1">
                                    <button type="button" class="settings-icon-action" data-dialog-open="edit-pengurus-{{ $pg->id }}" aria-label="Ubah pengurus" title="Ubah"><i class="bi bi-pencil-square" aria-hidden="true"></i></button>
                                    <form method="POST" action="{{ route('fk.pengurus.anggota.destroy', $pg->id) }}" onsubmit="return confirm('Hapus pengurus ini?')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="settings-icon-action text-rose-600" aria-label="Hapus pengurus" title="Hapus"><i class="bi bi-trash" aria-hidden="true"></i></button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="8" class="py-12 text-center text-sm text-slate-500">Belum ada pengurus terdaftar.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </section>
</div>

{{-- Dialogs: Periode --}}
<dialog id="create-periode" class="pkbm-master-dialog pkbm-class-form-dialog" aria-labelledby="create-periode-title">
    <form method="POST" action="{{ route('fk.pengurus.periode.store') }}">
        @csrf
        @include('fk.pengurus.partials.periode-fields', ['mode' => 'create', 'periode' => null])
    </form>
</dialog>
@foreach ($periodes as $pd)
    <dialog id="edit-periode-{{ $pd->id }}" class="pkbm-master-dialog pkbm-class-form-dialog" aria-labelledby="edit-periode-{{ $pd->id }}-title">
        <form method="POST" action="{{ route('fk.pengurus.periode.update', $pd->id) }}">
            @csrf
            @method('PUT')
            @include('fk.pengurus.partials.periode-fields', ['mode' => 'edit', 'periode' => $pd])
        </form>
    </dialog>
@endforeach

{{-- Dialogs: Divisi --}}
<dialog id="create-divisi" class="pkbm-master-dialog pkbm-class-form-dialog" aria-labelledby="create-divisi-title">
    <form method="POST" action="{{ route('fk.pengurus.divisi.store') }}">
        @csrf
        @include('fk.pengurus.partials.divisi-fields', ['mode' => 'create', 'divisi' => null])
    </form>
</dialog>
@foreach ($divisis as $dv)
    <dialog id="edit-divisi-{{ $dv->id }}" class="pkbm-master-dialog pkbm-class-form-dialog" aria-labelledby="edit-divisi-{{ $dv->id }}-title">
        <form method="POST" action="{{ route('fk.pengurus.divisi.update', $dv->id) }}">
            @csrf
            @method('PUT')
            @include('fk.pengurus.partials.divisi-fields', ['mode' => 'edit', 'divisi' => $dv])
        </form>
    </dialog>
@endforeach

{{-- Dialogs: Pengurus --}}
<dialog id="create-pengurus" class="pkbm-master-dialog pkbm-class-form-dialog" aria-labelledby="create-pengurus-title">
    <form method="POST" action="{{ route('fk.pengurus.anggota.store') }}">
        @csrf
        @include('fk.pengurus.partials.pengurus-fields', ['mode' => 'create', 'pengurus' => null])
    </form>
</dialog>
@foreach ($penguruses as $pg)
    <dialog id="edit-pengurus-{{ $pg->id }}" class="pkbm-master-dialog pkbm-class-form-dialog" aria-labelledby="edit-pengurus-{{ $pg->id }}-title">
        <form method="POST" action="{{ route('fk.pengurus.anggota.update', $pg->id) }}">
            @csrf
            @method('PUT')
            @include('fk.pengurus.partials.pengurus-fields', ['mode' => 'edit', 'pengurus' => $pg])
        </form>
    </dialog>
@endforeach
@endsection

@push('scripts')
    <script>
        const tabs = document.querySelectorAll('[data-tab]');
        const panels = document.querySelectorAll('[data-panel]');
        function setTab(name) {
            tabs.forEach((b) => {
                const on = b.dataset.tab === name;
                b.classList.toggle('bg-sky-50', on);
                b.classList.toggle('ring-1', on);
                b.classList.toggle('ring-sky-200', on);
                b.classList.toggle('hover:bg-slate-100', !on);
            });
            panels.forEach((p) => p.classList.toggle('hidden', p.dataset.panel !== name));
        }
        tabs.forEach((b) => b.addEventListener('click', () => setTab(b.dataset.tab)));

        document.querySelectorAll('[data-dialog-open]').forEach((button) => {
            button.addEventListener('click', () => {
                document.querySelector('#' + button.dataset.dialogOpen)?.showModal();
            });
        });
        document.querySelectorAll('[data-close-dialog]').forEach((button) => {
            button.addEventListener('click', () => button.closest('dialog').close());
        });

        @if (old('_tab'))
            setTab('{{ old('_tab') }}');
        @endif
        @if (old('_dialog'))
            document.querySelector('#{{ old('_dialog') }}')?.showModal();
        @endif
    </script>
@endpush