@extends('layouts.app')

@section('title', 'Manajemen User')

@php
    $levelBadge = [
        'fk' => 'bg-rose-50 text-rose-700',
        'pkbm' => 'bg-sky-50 text-sky-700',
        'guru' => 'bg-emerald-50 text-emerald-700',
        'walikelas' => 'bg-violet-50 text-violet-700',
        'dinas' => 'bg-amber-50 text-amber-700',
    ];
@endphp

@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>Manajemen User</p>
            <h1 class="pkbm-dashboard__title">Manajemen User</h1>
            <p class="pkbm-dashboard__subtitle">Kelola kredensial login untuk FK, PKBM, dan Guru.</p>
        </div>
        <button type="button" class="sp-btn-primary shrink-0" data-open-create>
            <i class="bi bi-person-plus" aria-hidden="true"></i>Tambah User Baru
        </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 User</h2>
                <p class="mt-1 text-xs text-slate-500">Total {{ $users->count() }} user. @if ($filterLevel)Level <span class="font-semibold text-slate-700">{{ strtoupper($filterLevel) }}</span>@endif @if ($filterPkbm)&middot; PKBM <span class="font-semibold text-slate-700">{{ $users->first()?->nama_pkbm ?? 'terpilih' }}</span>@endif</p>
            </div>
            <span class="inline-flex rounded-full bg-sky-50 px-3 py-1 text-xs font-semibold text-sky-700">{{ $users->count() }} User</span>
        </div>
        <div class="border-b border-slate-100 p-4">
            <form method="GET" action="{{ route('fk.user.index') }}" class="flex flex-nowrap items-end gap-3">
                <div class="min-w-0 flex-1">
                    <label class="sp-form-label" for="filter-pkbm">Nama PKBM</label>
                    <select name="id_pkbm" id="filter-pkbm" onchange="this.form.submit()" class="sp-form-control w-full px-3 py-2 text-sm">
                        <option value="">Semua PKBM</option>
                        @foreach ($institutions as $inst)
                            <option value="{{ $inst->id }}" @selected((string) $filterPkbm === (string) $inst->id)>{{ $inst->nama_pkbm }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="min-w-0 flex-1">
                    <label class="sp-form-label" for="filter-level">Level User</label>
                    <select name="level" id="filter-level" onchange="this.form.submit()" class="sp-form-control w-full px-3 py-2 text-sm">
                        <option value="">Semua Level</option>
                        @foreach (array_keys($levelBadge) as $lvl)
                            <option value="{{ $lvl }}" @selected($filterLevel === $lvl)>{{ strtoupper($lvl) }}</option>
                        @endforeach
                    </select>
                </div>
                @if ($filterPkbm || $filterLevel)
                    <a href="{{ route('fk.user.index') }}" class="sp-btn-secondary shrink-0 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-[46rem]">
                <thead>
                    <tr>
                        <th scope="col" class="text-center">No</th>
                        <th scope="col">Informasi User</th>
                        <th scope="col">Level Akses</th>
                        <th scope="col">Penempatan PKBM</th>
                        <th scope="col" class="text-right">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($users as $user)
                        <tr>
                            <td class="text-center font-semibold text-slate-500">{{ $loop->iteration }}</td>
                            <th scope="row" class="font-normal">
                                <div class="flex items-center gap-3">
                                    <span class="grid size-9 shrink-0 place-items-center rounded-full bg-slate-100 text-slate-500">
                                        <i class="bi bi-person" aria-hidden="true"></i>
                                    </span>
                                    <div>
                                        <div class="font-semibold text-slate-800">{{ $user->nama_lengkap }}</div>
                                        <div class="text-xs text-slate-500">@{{ $user->username }}</div>
                                    </div>
                                </div>
                            </th>
                            <td>
                                <span class="inline-flex rounded-full px-2.5 py-1 text-xs font-semibold {{ $levelBadge[$user->level] ?? 'bg-slate-100 text-slate-600' }}">
                                    {{ strtoupper($user->level) }}
                                </span>
                            </td>
                            <td class="text-sm {{ $user->nama_pkbm ? 'text-slate-700' : 'text-slate-400' }}">
                                {{ $user->nama_pkbm ?: 'Akses Global' }}
                            </td>
                            <td class="text-right">
                                <div class="inline-flex items-center gap-1">
                                    <button type="button" class="settings-icon-action" data-edit="{{ $user->id }}" aria-label="Ubah {{ $user->username }}" title="Ubah">
                                        <i class="bi bi-pencil-square" aria-hidden="true"></i>
                                    </button>
                                    <form method="POST" action="{{ route('fk.user.destroy', $user->id) }}" onsubmit="return confirm('Hapus user ini?')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="settings-icon-action text-rose-600" aria-label="Hapus {{ $user->username }}" 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 user.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </section>
</div>

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

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

@push('scripts')
    <script>
        const createDialog = document.querySelector('#create-user-dialog');
        document.querySelector('[data-open-create]')?.addEventListener('click', () => createDialog.showModal());
        document.querySelectorAll('[data-edit]').forEach((button) => {
            button.addEventListener('click', () => document.querySelector(`#edit-user-${button.dataset.edit}`)?.showModal());
        });
        document.querySelectorAll('[data-close-dialog]').forEach((button) => {
            button.addEventListener('click', () => button.closest('dialog').close());
        });
        // Nonaktifkan pilihan PKBM saat level = fk.
        document.querySelectorAll('form[data-user-form]').forEach((form) => {
            const level = form.querySelector('select[name="level"]');
            const pkbm = form.querySelector('select[name="id_pkbm"]');
            const sync = () => {
                const isFk = level.value === 'fk';
                pkbm.disabled = isFk;
                pkbm.classList.toggle('opacity-50', isFk);
                if (isFk) pkbm.value = '';
            };
            level.addEventListener('change', sync);
            sync();
        });

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