@extends('layouts.app')

@section('title', 'Set Tugas Tambahan')

@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>Set Kelas dan Tugas</span><i class="bi bi-chevron-right" aria-hidden="true"></i>Set Tugas Tambahan</p>
            <h1 class="pkbm-dashboard__title">Set Tugas Tambahan</h1>
            <p class="pkbm-dashboard__subtitle">Atur jabatan pengelola lembaga dan hubungkan dengan akun guru atau akun PKBM yang sudah terdaftar.</p>
        </div>
    </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

    <div class="grid items-start gap-5 lg:grid-cols-2">
        <section class="sp-card">
            <div class="sp-card-header flex flex-wrap items-center justify-between gap-3">
                <div>
                    <h2 class="sp-section-title">Daftar jabatan</h2>
                    <p class="mt-1 text-xs text-slate-500">Jabatan bisa ditambah sesuai kebutuhan lembaga.</p>
                </div>
                <button type="button" class="sp-btn-primary px-3 py-2 text-xs" data-open-role>
                    <i class="bi bi-plus-lg" aria-hidden="true"></i>Tambah jabatan
                </button>
            </div>
            <div class="overflow-x-auto">
                <table class="sp-table min-w-[24rem]">
                    <thead>
                        <tr>
                            <th scope="col">Jabatan</th>
                            <th scope="col">Pengguna</th>
                            <th scope="col" class="text-right">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($roles as $role)
                            <tr>
                                <th scope="row" class="font-semibold text-slate-800">{{ $role->nama_jabatan }}</th>
                                <td>{{ $role->jumlah_aktif }} akun aktif</td>
                                <td class="text-right">
                                    <form method="POST" action="{{ route('pkbm.tugas-tambahan.roles.destroy', $role->id) }}"
                                          onsubmit="return confirm('Hapus jabatan ini?')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="settings-icon-action settings-icon-action--delete"
                                                aria-label="Hapus jabatan {{ $role->nama_jabatan }}" title="Hapus jabatan">
                                            <i class="bi bi-trash" aria-hidden="true"></i>
                                        </button>
                                    </form>
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="3" class="py-8 text-center text-sm text-slate-500">Belum ada jabatan yang diatur.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </section>

        <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">Penugasan aktif</h2>
                    <p class="mt-1 text-xs text-slate-500">{{ $assignments->count() }} penugasan</p>
                </div>
                <button type="button" class="sp-btn-primary px-3 py-2 text-xs" data-open-assignment>
                    <i class="bi bi-plus-lg" aria-hidden="true"></i>Tambah penugasan
                </button>
            </div>
            <div class="overflow-x-auto">
                <table class="sp-table min-w-[35rem]">
                    <thead>
                        <tr>
                            <th scope="col">Jabatan</th>
                            <th scope="col">Pemegang</th>
                            <th scope="col">Akun</th>
                            <th scope="col" class="text-right">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($assignments as $assignment)
                            <tr>
                                <th scope="row" class="font-semibold text-slate-800">{{ $assignment->jabatan }}</th>
                                <td>{{ $assignment->nama_pengguna }}</td>
                                <td>{{ $assignment->username ?: 'Belum tertaut' }}</td>
                                <td class="text-right">
                                    <form method="POST" action="{{ route('pkbm.tugas-tambahan.assignments.destroy', $assignment->id) }}"
                                          onsubmit="return confirm('Nonaktifkan penugasan ini?')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="settings-icon-action settings-icon-action--delete"
                                                aria-label="Nonaktifkan jabatan {{ $assignment->jabatan }} untuk {{ $assignment->nama_pengguna }}"
                                                title="Nonaktifkan penugasan">
                                            <i class="bi bi-person-dash" aria-hidden="true"></i>
                                        </button>
                                    </form>
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="4" class="py-8 text-center text-sm text-slate-500">Belum ada penugasan jabatan aktif.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </section>
    </div>
</div>

<dialog id="create-role-dialog" class="pkbm-master-dialog pkbm-class-form-dialog" aria-labelledby="create-role-title">
    <form method="POST" action="{{ route('pkbm.tugas-tambahan.roles.store') }}">
        @csrf
        <input type="hidden" name="_form" value="role">
        <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-badge"></i></span>
                <div>
                    <h2 id="create-role-title" class="sp-section-title">Tambah jabatan</h2>
                    <p class="mt-1 text-xs text-slate-500">Tambahkan jabatan pengelola sesuai kebutuhan lembaga.</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="p-5">
            <label for="nama-jabatan" class="sp-form-label">Nama jabatan</label>
            <input id="nama-jabatan" type="text" name="nama_jabatan" maxlength="100" required
                   value="{{ old('_form') === 'role' ? old('nama_jabatan') : '' }}" placeholder="Contoh: Kepala PKBM"
                   class="sp-form-control px-3 py-2 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-plus-lg" aria-hidden="true"></i>Tambah jabatan</button>
        </div>
    </form>
</dialog>

<dialog id="create-assignment-dialog" class="pkbm-master-dialog pkbm-class-form-dialog" aria-labelledby="create-assignment-title">
    <form method="POST" action="{{ route('pkbm.tugas-tambahan.assignments.store') }}">
        @csrf
        <input type="hidden" name="_form" value="assignment">
        <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-assignment-title" class="sp-section-title">Tambah penugasan</h2>
                    <p class="mt-1 text-xs text-slate-500">Guru yang ditugaskan tetap memiliki akun dan peran guru.</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">
            @if ($roles->isEmpty() || $accounts->isEmpty())
                <p role="status" class="rounded-xl border border-sky-200 bg-sky-50 p-4 text-sm text-sky-900">
                    {{ $roles->isEmpty() ? 'Tambahkan jabatan terlebih dahulu.' : 'Belum ada akun PKBM atau guru untuk ditautkan.' }}
                </p>
            @else
                <div>
                    <label for="id-jabatan" class="sp-form-label">Jabatan</label>
                    <select id="id-jabatan" name="id_jabatan" required class="sp-form-control px-3 py-2 text-sm">
                        <option value="">Pilih jabatan</option>
                        @foreach ($roles as $role)
                            <option value="{{ $role->id }}" @selected(old('_form') === 'assignment' && old('id_jabatan') == $role->id)>{{ $role->nama_jabatan }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label for="id-user" class="sp-form-label">Akun pemegang jabatan</label>
                    <select id="id-user" name="id_user" required class="sp-form-control px-3 py-2 text-sm">
                        <option value="">Pilih akun</option>
                        @foreach ($accounts as $account)
                            <option value="{{ $account->id }}" @selected(old('_form') === 'assignment' && old('id_user') == $account->id)>
                                {{ $account->nama_lengkap ?: $account->username }} ({{ $account->username }} · {{ strtoupper($account->level) }})
                            </option>
                        @endforeach
                    </select>
                </div>
            @endif
        </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" @disabled($roles->isEmpty() || $accounts->isEmpty())>
                <i class="bi bi-save" aria-hidden="true"></i>Simpan penugasan
            </button>
        </div>
    </form>
</dialog>

@push('scripts')
    <script>
        const roleDialog = document.querySelector('#create-role-dialog');
        document.querySelector('[data-open-role]')?.addEventListener('click', () => roleDialog.showModal());

        const assignmentDialog = document.querySelector('#create-assignment-dialog');
        document.querySelector('[data-open-assignment]')?.addEventListener('click', () => assignmentDialog.showModal());

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

        @if (old('_form') === 'role')
            roleDialog.showModal();
        @elseif (old('_form') === 'assignment')
            assignmentDialog.showModal();
        @endif
    </script>
@endpush
@endsection