@extends('layouts.app')

@php
    $bulanId = [1 => 'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
    $tanggal = function (?string $tgl) use ($bulanId): string {
        if (! $tgl) {
            return '-';
        }
        $ts = strtotime($tgl);

        return date('j', $ts) . ' ' . $bulanId[(int) date('n', $ts)] . ' ' . date('Y', $ts);
    };
@endphp

@section('title', 'Program 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>Program Pengurus</p>
            <h1 class="pkbm-dashboard__title">Program Pengurus</h1>
            <p class="pkbm-dashboard__subtitle">Catat program kerja organisasi FK beserta jadwal dan status pelaksanaannya.</p>
        </div>
        <a href="{{ route('fk.pengurus.index') }}" class="sp-btn-secondary shrink-0">
            <i class="bi bi-person-badge" aria-hidden="true"></i>Tambah 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 status + filter periode --}}
    <div class="flex flex-wrap items-center justify-between gap-3">
        <div class="flex flex-wrap items-center gap-2">
            <span class="inline-flex items-center gap-1.5 rounded-full bg-emerald-50 px-3 py-1 text-xs font-semibold text-emerald-700">
                <i class="bi bi-check-circle-fill" aria-hidden="true"></i>{{ $sudah }} Sudah Dilaksanakan
            </span>
            <span class="inline-flex items-center gap-1.5 rounded-full bg-amber-50 px-3 py-1 text-xs font-semibold text-amber-700">
                <i class="bi bi-clock-history" aria-hidden="true"></i>{{ $belum }} Belum Dilaksanakan
            </span>
        </div>
        <form method="GET" action="{{ route('fk.pengurus.program.index') }}" class="flex items-center gap-2">
            <label class="text-xs font-semibold text-slate-500" for="filter-periode">Periode</label>
            <select id="filter-periode" name="periode" onchange="this.form.submit()"
                    class="rounded-lg border border-slate-200 bg-white px-3 py-1.5 text-sm font-medium text-slate-700 shadow-sm focus:border-sky-400 focus:outline-none focus:ring-2 focus:ring-sky-100">
                <option value="">Semua Periode</option>
                @foreach ($periodes as $pd)
                    <option value="{{ $pd->id }}" @selected((string) $periodeFilter === (string) $pd->id)>{{ $pd->nama }}</option>
                @endforeach
            </select>
        </form>
    </div>

    {{-- Daftar program --}}
    <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">Daftar Program Kerja</h2>
                <span class="inline-flex rounded-full bg-sky-50 px-3 py-1 text-xs font-semibold text-sky-700">{{ $programs->count() }}</span>
            </div>
            <button type="button" class="sp-btn-primary" data-dialog-open="create-program">
                <i class="bi bi-plus-circle" aria-hidden="true"></i>Tambah Program
            </button>
        </div>
        <div class="overflow-x-auto">
            <table class="sp-table min-w-[64rem]">
                <thead>
                    <tr>
                        <th scope="col" class="w-12 text-center">No</th>
                        <th scope="col">Program Kerja</th>
                        <th scope="col">Periode</th>
                        <th scope="col">Divisi</th>
                        <th scope="col">Penanggung Jawab</th>
                        <th scope="col">Jadwal</th>
                        <th scope="col">Status</th>
                        <th scope="col" class="text-right">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($programs as $pr)
                        <tr>
                            <td class="text-center text-slate-500">{{ $loop->iteration }}</td>
                            <th scope="row" class="max-w-xs font-normal">
                                <div class="font-semibold text-slate-800">{{ $pr->nama_program }}</div>
                                @if ($pr->deskripsi)
                                    <div class="mt-0.5 line-clamp-2 text-xs font-normal text-slate-500">{{ $pr->deskripsi }}</div>
                                @endif
                            </th>
                            <td class="text-sm text-slate-600">{{ $pr->periode_nama ?: '-' }}</td>
                            <td class="text-sm text-slate-600">{{ $pr->divisi_nama ?: '-' }}</td>
                            <td class="text-sm text-slate-600">{{ $pr->pj_nama ?: '-' }}</td>
                            <td class="whitespace-nowrap text-sm text-slate-600">
                                @if ($pr->tanggal_mulai || $pr->tanggal_selesai)
                                    @if ($pr->tanggal_mulai && $pr->tanggal_selesai)
                                        {{ $tanggal($pr->tanggal_mulai) }} <span class="text-slate-400">&ndash;</span> {{ $tanggal($pr->tanggal_selesai) }}
                                    @elseif ($pr->tanggal_mulai)
                                        {{ $tanggal($pr->tanggal_mulai) }}
                                    @else
                                        {{ $tanggal($pr->tanggal_selesai) }}
                                    @endif
                                @else
                                    <span class="text-slate-400">Belum dijadwalkan</span>
                                @endif
                            </td>
                            <td>
                                @if ($pr->status === 'sudah dilaksanakan')
                                    <span class="inline-flex rounded-full bg-emerald-50 px-2.5 py-1 text-xs font-semibold text-emerald-700">Sudah Dilaksanakan</span>
                                @else
                                    <span class="inline-flex rounded-full bg-amber-50 px-2.5 py-1 text-xs font-semibold text-amber-700">Belum Dilaksanakan</span>
                                @endif
                            </td>
                            <td class="text-right">
                                <div class="inline-flex items-center gap-1">
                                    <button type="button" class="settings-icon-action" data-dialog-open="edit-program-{{ $pr->id }}" aria-label="Ubah program" title="Ubah"><i class="bi bi-pencil-square" aria-hidden="true"></i></button>
                                    <form method="POST" action="{{ route('fk.pengurus.program.destroy', $pr->id) }}" onsubmit="return confirm('Hapus program ini?')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="settings-icon-action text-rose-600" aria-label="Hapus program" 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 program kerja. Tambahkan program terlebih dahulu.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </section>
</div>

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

@push('scripts')
    <script>
        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('_dialog'))
            document.querySelector('#{{ old('_dialog') }}')?.showModal();
        @endif
    </script>
@endpush