@extends('layouts.admin')

@section('title', 'Daftar Pengguna')

@section('content')
<!-- Style Khusus Modal Fix Backdrop Z-Index -->
<style>
.modal-backdrop {
    z-index: 1040 !important;
}
.modal {
    z-index: 1050 !important;
}
.modal-content-custom {
    background-color: #ffffff !important;
    border: none;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}
.modal-header-custom {
    background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%);
}
.cursor-pointer {
    cursor: pointer;
}
.pagination {
    margin-bottom: 0;
}
</style>

<div class="container-fluid">
    <!-- Header Halaman -->
    <div class="d-flex align-items-center justify-content-between mb-4">
        <div>
            <h4 class="fw-bold mb-1"><i class="fas fa-users-cog text-primary me-2"></i>Daftar Pengguna Sistem</h4>
            <p class="text-muted small mb-0">Kelola akun akses sistem untuk Guru Bimbingan Konseling (BK) dan pendaftaran siswa.</p>
        </div>
        <button type="button" class="btn btn-primary rounded-pill px-4 shadow-sm fw-semibold" data-bs-toggle="modal" data-bs-target="#modalTambahUser">
            <i class="fas fa-user-plus me-2"></i>Tambah Akun Guru
        </button>
    </div>

    @if (session('success'))
        <div class="alert alert-success alert-dismissible fade show rounded-3 border-0 shadow-sm mb-4" role="alert">
            <i class="fas fa-check-circle me-1"></i> {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    @if (session('error'))
        <div class="alert alert-danger alert-dismissible fade show rounded-3 border-0 shadow-sm mb-4" role="alert">
            <i class="fas fa-exclamation-triangle me-1"></i> {{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <!-- Tabel Daftar User -->
<div class="card border-0 shadow-sm rounded-4">
    <div class="card-body p-4">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="table-light">
                    <tr>
                        <th class="ps-3">No</th>
                        <th>Nama Lengkap</th>
                        <th>Email</th>
                        <th>Peran Akses</th>
                        <th>Tanggal Terdaftar</th>
                        <th class="text-center">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($users as $index => $u)
                        <tr>
                            <td class="ps-3 fw-medium text-muted">{{ $users->firstItem() + $index }}</td>
                            <td class="fw-bold text-dark">{{ $u->name }}</td>
                            <td>{{ $u->email }}</td>
                            <td>
                                @if($u->role === 'admin' || $u->role === 'guru')
                                    <span class="badge bg-primary-subtle text-primary border border-primary-subtle px-3 py-1 rounded-pill fw-semibold">
                                        <i class="fas fa-user-tie me-1"></i> Guru
                                    </span>
                                @else
                                    <span class="badge bg-info-subtle text-info-emphasis border border-info-subtle px-3 py-1 rounded-pill fw-medium">
                                        <i class="fas fa-user-graduate me-1"></i> Siswa
                                    </span>
                                @endif
                            </td>
                            <td>{{ \Carbon\Carbon::parse($u->created_at)->translatedFormat('d M Y') }}</td>
                            <td class="text-center">
                                @if(auth()->id() === $u->id)
                                    <span class="badge bg-light text-primary border fw-medium px-3 py-1 rounded-pill">Akun Anda</span>
                                @elseif($u->role === 'siswa')
                                    <form action="{{ route('admin.users.destroy', $u->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Apakah Anda yakin ingin menghapus akun Siswa ini?')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-sm btn-outline-danger rounded-3 px-2 py-1" title="Hapus Akun Siswa">
                                            <i class="fas fa-trash-alt me-1"></i> Hapus
                                        </button>
                                    </form>
                                @else
                                    <span class="badge bg-light text-secondary border fw-medium px-3 py-1 rounded-pill">
                                        <i class="fas fa-shield-alt me-1"></i> Akun Guru
                                    </span>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="text-center text-muted py-4">Belum ada data pengguna terdaftar.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <!-- Footer Card & Pagination Rapi -->
        <div class="d-flex flex-column flex-md-row justify-content-between align-items-center mt-4 pt-3 border-top gap-2">
                <div class="small text-muted">
                    Menampilkan <strong>{{ $users->firstItem() ?? 0 }}</strong> - <strong>{{ $users->lastItem() ?? 0 }}</strong> dari <strong>{{ $users->total() }}</strong> pengguna
                </div>
                <div>
                    {{ $users->appends(request()->query())->links('pagination::bootstrap-5') }}
                </div>
            </div>
    </div>
</div>
</div>
@endsection

{{-- MODAL TAMBAH AKUN GURU BK --}}
<div class="modal fade" id="modalTambahUser" tabindex="-1" aria-labelledby="modalTambahUserLabel" aria-hidden="true" data-bs-backdrop="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content modal-content-custom rounded-4 overflow-hidden">
            
            <!-- Modal Header -->
            <div class="modal-header modal-header-custom text-white p-4">
                <div>
                    <h5 class="modal-title fw-bold mb-1 text-white" id="modalTambahUserLabel">
                        <i class="fas fa-user-plus me-2"></i>Tambah Akun Guru
                    </h5>
                    <p class="small text-white opacity-75 mb-0">Buatkan akun akses baru untuk pengelola Bimbingan Konseling</p>
                </div>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <form action="{{ route('admin.users.store') }}" method="POST">
                @csrf
                <input type="hidden" name="role" value="admin">

                <div class="modal-body p-4 bg-white">
                    
                    <!-- Alert Petunjuk Pengisian yang Umum & Fleksibel -->
                    <div class="alert alert-primary bg-primary-subtle border-0 rounded-3 p-3 mb-4">
                        <div class="d-flex align-items-start">
                            <i class="fas fa-info-circle text-primary fs-5 me-3 mt-1"></i>
                            <div class="small text-primary-emphasis">
                                <strong>Informasi Registrasi:</strong><br>
                                Isikan data diri Guru BK yang akan diberi hak akses. Email dan kata sandi ini akan digunakan untuk masuk ke dalam sistem.
                            </div>
                        </div>
                    </div>

                    <!-- Input Nama Lengkap -->
                    <div class="mb-3">
                        <label class="form-label fw-semibold text-dark small text-uppercase">Nama Lengkap</label>
                        <div class="input-group">
                            <span class="input-group-text bg-white border-end-0 rounded-start-3 text-muted">
                                <i class="fas fa-user"></i>
                            </span>
                            <input type="text" name="name" class="form-control bg-white border-start-0 rounded-end-3 py-2" placeholder="Contoh: Siti Rahmawati (gelar opsional)" required>
                        </div>
                    </div>

                    <!-- Input Email -->
                    <div class="mb-3">
                        <label class="form-label fw-semibold text-dark small text-uppercase">Alamat Email</label>
                        <div class="input-group">
                            <span class="input-group-text bg-white border-end-0 rounded-start-3 text-muted">
                                <i class="fas fa-envelope"></i>
                            </span>
                            <input type="email" name="email" class="form-control bg-white border-start-0 rounded-end-3 py-2" placeholder="Contoh: nama@gmail.com" required>
                        </div>
                    </div>

                    <!-- Input Password dengan Toggle Lihat Password -->
                    <div class="mb-3">
                        <label class="form-label fw-semibold text-dark small text-uppercase">Kata Sandi (Password)</label>
                        <div class="input-group">
                            <span class="input-group-text bg-white border-end-0 rounded-start-3 text-muted">
                                <i class="fas fa-lock"></i>
                            </span>
                            <input type="password" name="password" id="passwordInput" class="form-control bg-white border-start-0 border-end-0 py-2" placeholder="Masukkan kata sandi (minimal 8 karakter)" required>
                            <span class="input-group-text bg-white border-start-0 rounded-end-3 text-muted cursor-pointer" id="togglePassword">
                                <i class="fas fa-eye" id="togglePasswordIcon"></i>
                            </span>
                        </div>
                    </div>

                </div>

                <div class="modal-footer bg-light border-0 p-3 px-4">
                    <button type="button" class="btn btn-outline-secondary rounded-pill px-4" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary rounded-pill px-4 fw-bold shadow-sm">
                        <i class="fas fa-save me-1"></i> Simpan Akun Guru
                    </button>
                </div>
            </form>

        </div>
    </div>
</div>

<!-- SCRIPT UNTUK TOGGLE EYE SEE/HIDE PASSWORD -->
<script>
document.addEventListener('DOMContentLoaded', function () {
    const togglePassword = document.querySelector('#togglePassword');
    const passwordInput = document.querySelector('#passwordInput');
    const toggleIcon = document.querySelector('#togglePasswordIcon');

    if (togglePassword && passwordInput && toggleIcon) {
        togglePassword.addEventListener('click', function () {
            // Toggle tipe atribut input
            const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
            passwordInput.setAttribute('type', type);
            
            // Toggle ikon mata
            toggleIcon.classList.toggle('fa-eye');
            toggleIcon.classList.toggle('fa-eye-slash');
        });
    }
});
</script>