@extends('layouts.app')

@section('title', 'Atur Menu 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>Atur Menu PKBM</p>
            <h1 class="pkbm-dashboard__title">Hak Akses Modul PKBM</h1>
            <p class="pkbm-dashboard__subtitle">Tentukan modul yang dapat diakses tiap lembaga. Ini juga mengontrol tombol "Aktifkan" pada halaman Panduan &amp; Fitur PKBM.</p>
        </div>
    </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

    <section class="sp-card">
        <div class="p-5">
            <form method="GET" action="{{ route('fk.menu.index') }}" class="mx-auto flex max-w-xl flex-col gap-2 sm:flex-row">
                <label for="id_pkbm" class="sp-form-label shrink-0 self-center">Pilih Lembaga PKBM</label>
                <select id="id_pkbm" name="id_pkbm" onchange="this.form.submit()" class="sp-form-control flex-1 px-3 py-2.5 text-sm">
                    <option value="">-- Cari &amp; Pilih PKBM --</option>
                    @foreach ($institutions as $institution)
                        <option value="{{ $institution->id }}" @selected($pkbmId === $institution->id)>{{ $institution->nama_pkbm }}</option>
                    @endforeach
                </select>
            </form>
        </div>
    </section>

    @if ($pkbmId)
        <form method="POST" action="{{ route('fk.menu.store') }}">
            @csrf
            <input type="hidden" name="id_pkbm" value="{{ $pkbmId }}">
            <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
                @foreach ($groups as $title => $group)
                    <section class="sp-card flex h-full flex-col">
                        <div class="sp-card-header">
                            <h2 class="sp-section-title flex items-center gap-2">
                                <i class="bi {{ $group['icon'] }} text-sky-600" aria-hidden="true"></i>{{ $title }}
                            </h2>
                        </div>
                        <div class="flex-1 space-y-1 p-4">
                            @foreach ($group['items'] as $key => $label)
                                <label class="flex cursor-pointer items-center gap-2.5 rounded-lg px-2 py-1.5 text-sm hover:bg-slate-50">
                                    <input type="checkbox" name="menu[]" value="{{ $key }}"
                                           @checked(array_key_exists($key, $active))
                                           class="size-4 rounded border-slate-300 text-sky-600 focus:ring-sky-500">
                                    <span class="text-slate-700">{{ $label }}</span>
                                </label>
                            @endforeach
                        </div>
                    </section>
                @endforeach
            </div>
            <div class="mt-5 flex justify-center">
                <button type="submit" class="sp-btn-primary px-6">
                    <i class="bi bi-save" aria-hidden="true"></i>Simpan Perubahan Akses
                </button>
            </div>
        </form>
    @else
        <div class="sp-card">
            <div class="grid place-items-center gap-2 p-12 text-center">
                <i class="bi bi-hand-index-thumb text-3xl text-slate-300" aria-hidden="true"></i>
                <p class="text-sm text-slate-500">Silakan pilih lembaga untuk mengelola modul.</p>
            </div>
        </div>
    @endif
</div>
@endsection