<x-app-layout>
    @section('page-title', 'Manajemen Pengguna')
    <div class="container-fluid p-0">

        <div class="d-flex justify-content-between align-items-center mb-3">
            <h1 class="h3 text-gray-800">{{ $pageTitle ?? 'Manajemen Pengguna' }}</h1>
        </div>

        <div class="card shadow mb-5">
            <div class="card-header py-3 d-flex justify-content-between align-items-center flex-wrap gap-2">
                <h6 class="m-0 font-weight-bold text-primary">Daftar Pengguna Aktif</h6>

                <div class="d-flex align-items-center">
                    <form action="{{ route('admin.pengguna.index') }}" method="GET" class="me-2 mb-0">
                        <select name="role" class="form-select form-select-sm" onchange="this.form.submit()">
                            <option value="">Semua Kategori</option>
                            <option value="siswa" {{ request('role')=='siswa' ? 'selected' : '' }}>Siswa</option>
                            <option value="guru" {{ request('role')=='guru' ? 'selected' : '' }}>Guru</option>
                            <option value="penjaga perpus" {{ request('role')=='penjaga perpus' ? 'selected' : '' }}>
                                Petugas</option>
                        </select>
                    </form>

                    <a href="{{ route('admin.pengguna.create') }}" class="btn btn-sm btn-primary">
                        <i class="bi bi-plus-circle-fill me-1"></i>Tambah Pengguna
                    </a>
                </div>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered align-middle" width="100%" cellspacing="0">
                        <thead class="table-light">
                            <tr>
                                <th>No</th>
                                <th>Nama Lengkap</th>
                                <th>Kontak (Email & HP)</th>
                                <th>Role</th>
                                <th>NISN / NIP / NIK</th>
                                <th>Kelas / Golongan</th>
                                <th class="text-center">Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($users as $index => $user)
                            <tr>
                                <td>{{ $users->firstItem() + $index }}</td>
                                <td class="fw-bold">{{ $user->name }}</td>
                                <td>
                                    <div>{{ $user->email }}</div>
                                    <div class="small text-muted"><i class="bi bi-telephone me-1"></i>{{ $user->no_hp ??
                                        '-' }}</div>
                                </td>
                                <td>
                                    @if($user->role == 'guru')
                                    <span class="badge bg-info text-dark">Guru</span>
                                    @elseif($user->role == 'siswa')
                                    <span class="badge bg-primary">Siswa</span>
                                    @else
                                    <span class="badge bg-secondary">Petugas</span>
                                    @endif
                                </td>
                                <td class="font-monospace text-primary">
                                    {{ $user->nisn ?? ($user->nip ?? '-') }}
                                </td>
                                <td>
                                    @if($user->role == 'siswa')
                                    <span class="badge bg-light text-black border">Kelas: {{ $user->kelas ?? '-' }} / {{
                                        $user->golongan ?? '-' }}</span>
                                    @else
                                    -
                                    @endif
                                </td>
                                <td class="text-center">
                                    <a href="{{ route('admin.pengguna.edit', $user->id) }}"
                                        class="btn btn-sm btn-warning">
                                        <i class="bi bi-pencil"></i> Edit
                                    </a>

                                    <button type="button" class="btn btn-sm btn-secondary btn-reset-password"
                                        data-nama="{{ $user->name }}" title="Reset Password (OTP)">
                                        <i class="bi bi-key-fill"></i>
                                    </button>

                                    <form action="{{ route('admin.pengguna.destroy', $user->id) }}" method="POST"
                                        class="d-inline form-delete-user" data-nama="{{ $user->name }}">
                                        @csrf
                                        @method('DELETE')
                                        <button type="button" class="btn btn-sm btn-danger btn-hapus"><i
                                                class="bi bi-trash"></i></button>
                                    </form>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="7" class="text-center py-4 text-muted">Belum ada pengguna terdaftar.</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                    <div class="mt-3">
                        {{ $users->links() }}
                    </div>
                </div>
            </div>
        </div>

        <hr class="my-5 border-4">

        {{-- BAGIAN DATA INDUK (WHITELIST) --}}
        <div class="d-flex justify-content-between align-items-center mb-3">
            <div>
                <h4 class="fw-bold text-success mb-1"><i class="bi bi-database-lock me-2"></i>Data Induk (Whitelist)
                </h4>
                <p class="text-muted mb-0">Daftar NIP/NISN/NIK yang <b>diizinkan</b> untuk mendaftar.</p>
            </div>
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalMasterInduk">
                <i class="bi bi-plus-lg me-1"></i> Tambah Data Induk
            </button>
        </div>

        <div class="card shadow mb-4 border-left-success">
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover table-bordered align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>No</th>
                                <th>NIP / NISN</th>
                                <th>Nama Pemilik</th>
                                <th class="text-center">Role</th>
                                <th class="text-center">Status Akun</th>
                                <th class="text-center">Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($whitelists as $index => $item)
                            <tr>
                                <td>{{ $index + 1 }}</td>
                                <td class="fw-bold font-monospace">{{ $item->nomor_induk }}</td>
                                <td>{{ $item->nama_pemilik }}</td>
                                <td class="text-center">
                                    @if($item->role == 'guru')
                                    <span class="badge bg-info text-dark">Guru</span>
                                    @elseif($item->role == 'siswa')
                                    <span class="badge bg-primary">Siswa</span>
                                    @else
                                    <span class="badge bg-secondary">Petugas</span>
                                    @endif
                                </td>
                                <td class="text-center">
                                    @php
                                    $isRegistered = \App\Models\User::where('nisn', $item->nomor_induk)->orWhere('nip',
                                    $item->nomor_induk)->exists();
                                    @endphp
                                    @if ($isRegistered)
                                    <span class="badge bg-success text-white"><i
                                            class="bi bi-check-circle-fill me-1"></i>Terdaftar</span>
                                    @else
                                    <span class="badge bg-warning text-dark"><i
                                            class="bi bi-hourglass-split me-1"></i>Belum Daftar</span>
                                    @endif
                                </td>
                                <td class="text-center">
                                    <form action="{{ route('admin.master-induk.destroy', $item->id) }}" method="POST"
                                        class="d-inline form-delete-whitelist" data-induk="{{ $item->nomor_induk }}">
                                        @csrf
                                        @method('DELETE')
                                        <button type="button" class="btn btn-sm btn-outline-danger btn-hapus-whitelist">
                                            <i class="bi bi-trash"></i> Hapus
                                        </button>
                                    </form>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="6" class="text-center py-4 text-muted">Belum ada data whitelist. Silakan
                                    tambah data.</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    {{-- MODAL TAMBAH DATA INDUK --}}
    <div class="modal fade" id="modalMasterInduk" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title fw-bold">Tambah Whitelist (NIP/NISN)</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                {{-- FORM TAMBAH WHITELIST --}}
                <form action="{{ route('admin.master-induk.store') }}" method="POST" id="formWhitelist">
                    @csrf
                    <div class="modal-body">
                        <div class="alert alert-info small mb-3">
                            <i class="bi bi-info-circle-fill me-1"></i>
                            Masukkan data siswa/guru yang valid agar mereka bisa mendaftar.
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Role</label>
                            <select name="role" class="form-select" required>
                                <option value="siswa">Siswa</option>
                                <option value="guru">Guru</option>
                                <option value="penjaga perpus">Petugas Perpustakaan</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">NIP / NISN / NIK</label>
                            <input type="number" name="nomor_induk" class="form-control"
                                placeholder="Contoh: 1234567890" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Nama Pemilik</label>
                            <input type="text" name="nama_pemilik" class="form-control" placeholder="Nama Siswa/Guru..."
                                required>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-success">Simpan Data</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    @push('scripts')
    <script>
        $(document).ready(function() {
            $('.btn-hapus').on('click', function(e) {
                e.preventDefault();
                let form = $(this).closest('form');
                let nama = form.data('nama');

                modernSwal.fire({
                    title: 'Hapus Pengguna?',
                    text: `Apakah Anda yakin ingin menghapus akun milik ${nama}?`,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, Hapus',
                    cancelButtonText: 'Batal',
                    confirmButtonColor: '#dc3545'
                }).then((result) => {
                    if (result.isConfirmed) {
                        modernSwal.fire({
                            title: 'Menghapus...',
                            allowOutsideClick: false,
                            didOpen: () => Swal.showLoading()
                        });
                        form.submit();
                    }
                });
            });

            $('.btn-hapus-whitelist').on('click', function(e) {
                e.preventDefault();
                let form = $(this).closest('form');
                let induk = form.data('induk');

                modernSwal.fire({
                    title: 'Hapus Data Induk?',
                    text: `Data dengan nomor ${induk} tidak akan bisa mendaftar lagi.`,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, Hapus',
                    cancelButtonText: 'Batal',
                    confirmButtonColor: '#dc3545'
                }).then((result) => {
                    if (result.isConfirmed) {
                        modernSwal.fire({
                            title: 'Menghapus...',
                            allowOutsideClick: false,
                            didOpen: () => Swal.showLoading()
                        });
                        form.submit();
                    }
                });
            });

            $('#formWhitelist').on('submit', function() {
                modernSwal.fire({
                    title: 'Menyimpan...',
                    allowOutsideClick: false,
                    didOpen: () => Swal.showLoading()
                });
            });
        });

        @if(session('success'))
        document.addEventListener('DOMContentLoaded', function() {
            Toast.fire({
                icon: 'success',
                title: 'Berhasil',
                text: '{{ session("success") }}'
            });
        });
        @endif

        // GENERATE OTP & LINK RESET 
        $(document).on('click', '.btn-reset-password', function() {
            const nama = $(this).data('nama');
            const otpCode = "678901";
            const linkReset = "{{ route('reset.password-request') }}";

            modernSwal.fire({
                title: 'Generate OTP Reset?',
                html: `Anda akan membuat Token Reset Password untuk <b>${nama}</b>.`,
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Ya, Generate',
                cancelButtonText: 'Batal',
                confirmButtonColor: '#0d6efd'
            }).then((result) => {
                if (result.isConfirmed) {
                    modernSwal.fire({
                        title: 'Generating...',
                        timer: 1000,
                        didOpen: () => Swal.showLoading()
                    }).then(() => {
                        modernSwal.fire({
                            title: 'OTP Berhasil Dibuat!',
                            html: `
                                    <div class="text-start bg-light p-3 rounded border">
                                        <p class="mb-1 small text-muted">Kode OTP:</p>
                                        <h3 class="text-primary fw-bold letter-spacing-1 mb-3">${otpCode}</h3>
                                        <p class="mb-1 small text-muted">Link Reset:</p>
                                        <div class="input-group">
                                            <input type="text" class="form-control form-control-sm" value="${linkReset}" readonly>
                                        </div>
                                    </div>
                                    <div class="mt-3 small text-muted">
                                        Silakan salin Kode OTP & Link di atas lalu kirim ke WhatsApp user.
                                    </div>
                                `,
                            icon: 'success',
                            confirmButtonText: 'Selesai'
                        });
                    });
                }
            });
        });
    </script>
    @endpush
</x-app-layout>