@extends('layouts.app')

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

@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>Data Utama</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 akun login guru yang terhubung dengan data guru pada PKBM Anda.</p>
        </div>
        <button type="button" class="sp-btn-primary shrink-0" data-open-create @disabled($availableTeachers->isEmpty())>
            <i class="bi bi-person-plus" aria-hidden="true"></i>Tambah akun guru
        </button>
    </header>

    @if (session('status'))
        <div role="status" class="settings-notice settings-notice--success">
            <i class="bi bi-check-circle-fill" aria-hidden="true"></i><span>{{ session('status') }}</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

    @if ($availableTeachers->isEmpty())
        <p role="status" class="rounded-xl border border-sky-200 bg-sky-50 p-4 text-sm text-sky-900">
            Semua guru sudah memiliki akun atau belum ada data guru yang dapat dibuatkan akun.
        </p>
    @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">Akun guru</h2>
                <p class="mt-1 text-xs text-slate-500">{{ number_format($teachers->total(), 0, ',', '.') }} guru</p>
            </div>
            <form method="GET" action="{{ route('pkbm.manajemen-user.index') }}" class="flex w-full gap-2 sm:w-auto">
                <label for="user-search" class="sr-only">Cari guru atau username</label>
                <input id="user-search" type="search" name="q" value="{{ request('q') }}" placeholder="Cari guru atau username..."
                       class="sp-form-control min-w-0 flex-1 px-3 py-2 text-sm sm:w-72">
                <button type="submit" class="sp-btn-secondary">
                    <i class="bi bi-search" aria-hidden="true"></i><span class="sr-only sm:not-sr-only">Cari</span>
                </button>
            </form>
        </div>
        <div class="overflow-x-auto">
            <table class="sp-table min-w-[42rem]">
                <thead>
                    <tr>
                        <th scope="col">Guru</th>
                        <th scope="col">Username</th>
                        <th scope="col">Status akun</th>
                        <th scope="col" class="text-right">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($teachers as $teacher)
                        <tr>
                            <th scope="row" class="font-semibold text-slate-800">
                                {{ $teacher->nama ?: 'Nama guru tidak tersedia' }}
                                @if ($teacher->nuptk)
                                    <span class="mt-0.5 block text-xs font-normal text-slate-500">NUPTK: {{ $teacher->nuptk }}</span>
                                @endif
                            </th>
                            <td>{{ $teacher->username ?: '-' }}</td>
                            <td>
                                @if ($teacher->user_id)
                                    <span class="inline-flex rounded-full bg-emerald-50 px-2.5 py-1 text-xs font-semibold text-emerald-700">Akun aktif</span>
                                    @if ($teacher->account_count > 1)
                                        <span class="mt-1 block text-xs text-amber-700">Terdapat {{ $teacher->account_count }} akun tertaut.</span>
                                    @endif
                                @else
                                    <span class="inline-flex rounded-full bg-slate-100 px-2.5 py-1 text-xs font-semibold text-slate-600">Belum memiliki akun</span>
                                @endif
                            </td>
                            <td class="text-right">
                                @if ($teacher->user_id)
                                    <div class="inline-flex items-center gap-1">
                                        <button type="button" class="settings-icon-action" data-edit-username
                                                data-user-id="{{ $teacher->user_id }}" data-username="{{ $teacher->username }}"
                                                aria-label="Ubah username {{ $teacher->username }}" title="Ubah username">
                                            <i class="bi bi-pencil-square" aria-hidden="true"></i>
                                        </button>
                                        <button type="button" class="settings-icon-action" data-reset-password
                                                data-user-id="{{ $teacher->user_id }}" data-username="{{ $teacher->username }}"
                                                aria-label="Reset password {{ $teacher->username }}" title="Reset password">
                                            <i class="bi bi-key" aria-hidden="true"></i>
                                        </button>
                                    </div>
                                @else
                                    <button type="button" class="settings-icon-action" data-create-for-teacher
                                            data-teacher-id="{{ $teacher->id }}" data-teacher-name="{{ $teacher->nama }}"
                                            aria-label="Buat akun untuk {{ $teacher->nama }}" title="Buat akun">
                                        <i class="bi bi-person-plus" aria-hidden="true"></i>
                                    </button>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="4" class="py-10 text-center text-sm text-slate-500">Data guru tidak ditemukan.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if ($teachers->hasPages())
            <div class="border-t border-slate-100 px-4 py-3">{{ $teachers->links() }}</div>
        @endif
    </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('pkbm.manajemen-user.store') }}">
        @csrf
        <input type="hidden" name="_form" value="create">
        <div class="pkbm-class-form-dialog__header flex items-start justify-between gap-3 border-b border-slate-100 p-5">
            <div class="flex items-start gap-3">
                <span class="pkbm-class-form-dialog__icon" aria-hidden="true"><i class="bi bi-person-plus"></i></span>
                <div>
                    <h2 id="create-user-title" class="sp-section-title">Tambah akun guru</h2>
                    <p class="mt-1 text-xs text-slate-500">Akun dibuat dengan peran guru dan ditautkan ke data guru terpilih.</p>
                </div>
            </div>
            <button type="button" data-close-dialog class="pkbm-class-form-dialog__close grid size-8 shrink-0 place-items-center rounded-lg text-slate-500" aria-label="Tutup">
                <i class="bi bi-x-lg" aria-hidden="true"></i>
            </button>
        </div>
        <div class="space-y-4 p-5">
            <div>
                <label for="new-user-teacher" class="sp-form-label">Guru</label>
                <select id="new-user-teacher" name="id_guru" required class="sp-form-control px-3 py-2.5 text-sm">
                    <option value="">Pilih guru</option>
                    @foreach ($availableTeachers as $teacher)
                        <option value="{{ $teacher->id }}" @selected(old('_form') === 'create' && old('id_guru') == $teacher->id)>
                            {{ $teacher->nama ?: 'Nama guru tidak tersedia' }}{{ $teacher->nuptk ? ' · NUPTK '.$teacher->nuptk : '' }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div>
                <label for="new-user-username" class="sp-form-label">Username</label>
                <input id="new-user-username" name="username" type="text" maxlength="50" autocomplete="username" required
                       value="{{ old('_form') === 'create' ? old('username') : '' }}" class="sp-form-control px-3 py-2.5 text-sm">
            </div>
            <div>
                <label for="new-user-password" class="sp-form-label">Password awal</label>
                <input id="new-user-password" name="password" type="password" minlength="8" autocomplete="new-password" required class="sp-form-control px-3 py-2.5 text-sm">
            </div>
            <div>
                <label for="new-user-password-confirmation" class="sp-form-label">Konfirmasi password</label>
                <input id="new-user-password-confirmation" name="password_confirmation" type="password" minlength="8" autocomplete="new-password" required class="sp-form-control px-3 py-2.5 text-sm">
            </div>
        </div>
        <div class="pkbm-class-form-dialog__footer flex justify-end gap-2 border-t border-slate-100 p-5">
            <button type="button" data-close-dialog class="sp-btn-secondary">Batal</button>
            <button type="submit" class="sp-btn-primary"><i class="bi bi-check2-circle" aria-hidden="true"></i>Buat akun</button>
        </div>
    </form>
</dialog>

<dialog id="edit-username-dialog" class="pkbm-master-dialog pkbm-class-form-dialog" aria-labelledby="edit-username-title">
    <form id="edit-username-form" method="POST">
        @csrf
        @method('PUT')
        <input type="hidden" name="_form" value="username">
        <input id="edit-username-account" type="hidden" name="_account" value="{{ old('_account') }}">
        <div class="pkbm-class-form-dialog__header flex items-start justify-between gap-3 border-b border-slate-100 p-5">
            <div>
                <h2 id="edit-username-title" class="sp-section-title">Ubah username</h2>
                <p id="edit-username-description" class="mt-1 text-xs text-slate-500"></p>
            </div>
            <button type="button" data-close-dialog class="pkbm-class-form-dialog__close grid size-8 shrink-0 place-items-center rounded-lg text-slate-500" aria-label="Tutup">
                <i class="bi bi-x-lg" aria-hidden="true"></i>
            </button>
        </div>
        <div class="p-5">
            <label for="edit-username" class="sp-form-label">Username baru</label>
            <input id="edit-username" name="username" type="text" maxlength="50" autocomplete="username" required
                   value="{{ old('_form') === 'username' ? old('username') : '' }}" class="sp-form-control px-3 py-2.5 text-sm">
        </div>
        <div class="pkbm-class-form-dialog__footer flex justify-end gap-2 border-t border-slate-100 p-5">
            <button type="button" data-close-dialog class="sp-btn-secondary">Batal</button>
            <button type="submit" class="sp-btn-primary"><i class="bi bi-check2-circle" aria-hidden="true"></i>Simpan username</button>
        </div>
    </form>
</dialog>

<dialog id="reset-password-dialog" class="pkbm-master-dialog pkbm-class-form-dialog" aria-labelledby="reset-password-title">
    <form id="reset-password-form" method="POST">
        @csrf
        @method('PUT')
        <input type="hidden" name="_form" value="password">
        <input id="reset-password-account" type="hidden" name="_account" value="{{ old('_account') }}">
        <div class="pkbm-class-form-dialog__header flex items-start justify-between gap-3 border-b border-slate-100 p-5">
            <div>
                <h2 id="reset-password-title" class="sp-section-title">Reset password</h2>
                <p id="reset-password-description" class="mt-1 text-xs text-slate-500"></p>
            </div>
            <button type="button" data-close-dialog class="pkbm-class-form-dialog__close grid size-8 shrink-0 place-items-center rounded-lg text-slate-500" aria-label="Tutup">
                <i class="bi bi-x-lg" aria-hidden="true"></i>
            </button>
        </div>
        <div class="space-y-4 p-5">
            <div>
                <label for="reset-password" class="sp-form-label">Password baru</label>
                <input id="reset-password" name="password" type="password" minlength="8" autocomplete="new-password" required class="sp-form-control px-3 py-2.5 text-sm">
            </div>
            <div>
                <label for="reset-password-confirmation" class="sp-form-label">Konfirmasi password baru</label>
                <input id="reset-password-confirmation" name="password_confirmation" type="password" minlength="8" autocomplete="new-password" required class="sp-form-control px-3 py-2.5 text-sm">
            </div>
        </div>
        <div class="pkbm-class-form-dialog__footer flex justify-end gap-2 border-t border-slate-100 p-5">
            <button type="button" data-close-dialog class="sp-btn-secondary">Batal</button>
            <button type="submit" class="sp-btn-primary"><i class="bi bi-key" aria-hidden="true"></i>Simpan password</button>
        </div>
    </form>
</dialog>

@push('scripts')
    <script>
        const createDialog = document.querySelector('#create-user-dialog');
        const teacherSelect = document.querySelector('#new-user-teacher');
        document.querySelector('[data-open-create]')?.addEventListener('click', () => createDialog.showModal());
        document.querySelectorAll('[data-create-for-teacher]').forEach((button) => {
            button.addEventListener('click', () => {
                teacherSelect.value = button.dataset.teacherId;
                createDialog.showModal();
            });
        });

        const usernameDialog = document.querySelector('#edit-username-dialog');
        const usernameForm = document.querySelector('#edit-username-form');
        const usernameInput = document.querySelector('#edit-username');
        const usernameAccount = document.querySelector('#edit-username-account');
        document.querySelectorAll('[data-edit-username]').forEach((button) => {
            button.addEventListener('click', () => openUsernameDialog(button.dataset.userId, button.dataset.username));
        });
        function openUsernameDialog(userId, username) {
            usernameForm.action = `{{ url('/pkbm/manajemen-user') }}/${userId}/username`;
            usernameAccount.value = userId;
            document.querySelector('#edit-username-description').textContent = `Username untuk akun ${username}.`;
            usernameInput.value = username;
            usernameDialog.showModal();
        }

        const passwordDialog = document.querySelector('#reset-password-dialog');
        const passwordForm = document.querySelector('#reset-password-form');
        const passwordAccount = document.querySelector('#reset-password-account');
        document.querySelectorAll('[data-reset-password]').forEach((button) => {
            button.addEventListener('click', () => openPasswordDialog(button.dataset.userId, button.dataset.username));
        });
        function openPasswordDialog(userId, username) {
            passwordForm.action = `{{ url('/pkbm/manajemen-user') }}/${userId}/password`;
            passwordAccount.value = userId;
            document.querySelector('#reset-password-description').textContent = `Atur password baru untuk akun ${username}.`;
            passwordDialog.showModal();
        }

        document.querySelectorAll('[data-close-dialog]').forEach((button) => {
            button.addEventListener('click', () => button.closest('dialog').close());
        });

        @if (old('_form') === 'create')
            createDialog.showModal();
        @elseif (old('_form') === 'username' && old('_account'))
            openUsernameDialog(@js(old('_account')), @js(old('username')));
        @elseif (old('_form') === 'password' && old('_account'))
            openPasswordDialog(@js(old('_account')), 'guru');
        @endif
    </script>
@endpush
@endsection