<x-app-layout>
    @section('page-title', $pageTitle)

    <div class="card shadow-sm border-0">
        <div class="card-header bg-white d-flex justify-content-between align-items-center">
            <h5 class="my-0 fw-bold">Daftar Semua Pengguna</h5>
            <a href="{{ route('admin.pengguna.create') }}" class="btn btn-primary">
                <i class="bi bi-plus-circle-fill me-2"></i>Tambah Pengguna
            </a>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Nama Lengkap</th>
                            <th>Email</th>
                            <th>Role</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($semuaSiswa as $siswa)
                        <tr>
                            <td>{{ $loop->iteration }}</td>
                            <td>{{ $siswa['nama_lengkap'] }}</td>
                            <td>{{ $siswa['email'] }}</td>
                            <td>
                                @if($siswa['role'] == 'penjaga perpus')
                                    <span class="badge bg-success-subtle text-success-emphasis">{{ Str::title($siswa['role']) }}</span>
                                @else
                                    <span class="badge bg-primary-subtle text-primary-emphasis">{{ Str::title($siswa['role']) }}</span>
                                @endif
                            </td>
                            <td>
                                <button class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#detailPenggunaModal"
                                    data-id="{{ $siswa['id'] }}"
                                    data-nama="{{ $siswa['nama_lengkap'] }}"
                                    data-email="{{ $siswa['email'] }}"
                                    data-role="{{ Str::title($siswa['role']) }}"
                                    data-nisn="{{ $siswa['nisn'] ?? 'N/A' }}">
                                    <i class="bi bi-eye-fill"></i> Detail
                                </button>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="5" class="text-center">Tidak ada data pengguna.</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="modal fade" id="detailPenggunaModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title fw-bold" id="modalNama"></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <table class="table table-borderless table-sm">
                        <tr><th width="80px">Email</th><td id="modalEmail"></td></tr>
                        <tr><th>Role</th><td><span id="modalRole" class="badge"></span></td></tr>
                        <tr><th>NISN</th><td id="modalNisn"></td></tr>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                    <a href="#" id="modalEditPengguna" class="btn btn-primary"><i class="bi bi-pencil-fill me-2"></i>Edit</a>
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const detailPenggunaModal = document.getElementById('detailPenggunaModal');
            if(detailPenggunaModal) {
                detailPenggunaModal.addEventListener('show.bs.modal', event => {
                    const button = event.relatedTarget;
                    
                    const id = button.getAttribute('data-id');
                    const nama = button.getAttribute('data-nama');
                    const email = button.getAttribute('data-email');
                    const role = button.getAttribute('data-role');
                    const nisn = button.getAttribute('data-nisn');

                    const modalNama = detailPenggunaModal.querySelector('#modalNama');
                    const modalEmail = detailPenggunaModal.querySelector('#modalEmail');
                    const modalRole = detailPenggunaModal.querySelector('#modalRole');
                    const modalNisn = detailPenggunaModal.querySelector('#modalNisn');
                    const modalEditPengguna = detailPenggunaModal.querySelector('#modalEditPengguna');

                    modalNama.textContent = nama;
                    modalEmail.textContent = `: ${email}`;
                    modalRole.textContent = role;
                    modalNisn.textContent = `: ${nisn}`;
                    modalEditPengguna.href = `{{ url('admin/pengguna') }}/${id}/edit`;

                    if (role.toLowerCase() === 'penjaga perpus') {
                        modalRole.className = 'badge bg-success-subtle text-success-emphasis';
                    } else {
                        modalRole.className = 'badge bg-primary-subtle text-primary-emphasis';
                    }
                });
            }
        });
    </script>
    @endpush
</x-app-layout>