<x-app-layout>
    @section('page-title', $pageTitle)
    <div class="d-flex align-items-center mb-4">
        <a href="{{ route('admin.pengguna.index') }}" class="btn btn-outline-secondary me-3">
            <i class="bi bi-arrow-left"></i>
        </a>
        <h3 class="my-0 fw-bold">Formulir Edit Pengguna</h3>
    </div>

    <div class="row justify-content-center">
        <div class="col-md-10">
            <div class="card border-0 shadow-sm">
                <div class="card-body p-4">
                    <form action="{{ route('admin.pengguna.update', $pengguna->id) }}" method="POST" id="formEditPengguna">
                        @csrf
                        @method('PATCH')

                        <div class="mb-3">
                            <label for="role" class="form-label">Role <span class="text-danger">*</span></label>
                            <select class="form-select @error('role') is-invalid @enderror" id="role" name="role" required onchange="toggleFields()">
                                <option value="siswa" {{ old('role', $pengguna->role) == 'siswa' ? 'selected' : '' }}>Siswa</option>
                                <option value="guru" {{ old('role', $pengguna->role) == 'guru' ? 'selected' : '' }}>Guru</option>
                                <option value="penjaga perpus" {{ old('role', $pengguna->role) == 'penjaga perpus' ? 'selected' : '' }}>Penjaga Perpustakaan</option>
                            </select>
                            @error('role') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        <div id="dynamic-form">
                            <div class="mb-3">
                                <label for="nama_lengkap" class="form-label">Nama Lengkap</label>
                                <input type="text" class="form-control @error('nama_lengkap') is-invalid @enderror"
                                    id="nama_lengkap" name="nama_lengkap" value="{{ old('nama_lengkap', $pengguna->name) }}" required>
                            </div>

                            <div class="mb-3">
                                @php $oldNomorInduk = old('nomor_induk', $pengguna->role == 'siswa' ? $pengguna->nisn : $pengguna->nip); @endphp
                                <label for="nomor_induk" class="form-label" id="label_nomor_induk">NISN / NIP</label>
                                <input type="number" class="form-control @error('nomor_induk') is-invalid @enderror"
                                    id="nomor_induk" name="nomor_induk" value="{{ $oldNomorInduk }}" placeholder="Masukkan Nomor Induk">
                                @error('nomor_induk') <div class="invalid-feedback fw-bold">{{ $message }}</div> @enderror
                            </div>

                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="email" class="form-label">Email</label>
                                    <input type="email" class="form-control @error('email') is-invalid @enderror"
                                        id="email" name="email" value="{{ old('email', $pengguna->email) }}" required>
                                    @error('email') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="no_hp" class="form-label">No. Handphone</label>
                                    <input type="text" class="form-control" id="no_hp" name="no_hp" value="{{ old('no_hp', $pengguna->no_hp) }}">
                                </div>
                            </div>

                            <div class="row" id="field_siswa_only" style="display: none;">
                                <div class="col-md-6 mb-3">
                                    <label for="kelas" class="form-label">Kelas</label>
                                    <input type="text" class="form-control" id="kelas" name="kelas" value="{{ old('kelas', $pengguna->kelas) }}">
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="golongan" class="form-label">Golongan</label>
                                    <input type="text" class="form-control" id="golongan" name="golongan" value="{{ old('golongan', $pengguna->golongan) }}">
                                </div>
                            </div>

                            <hr>

                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="password" class="form-label">Password Baru <span class="small text-muted">(opsional)</span></label>
                                    <input type="password" class="form-control @error('password') is-invalid @enderror" id="password" name="password" placeholder="Kosongkan jika tidak diubah">
                                    @error('password') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="password_confirmation" class="form-label">Konfirmasi Password Baru</label>
                                    <input type="password" class="form-control" id="password_confirmation" name="password_confirmation" placeholder="Ulangi password baru">
                                </div>
                            </div>

                            <div class="d-flex justify-content-end mt-3">
                                <button type="submit" class="btn btn-primary px-4">Simpan Perubahan</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
    <script>
        function toggleFields() {
            const role = document.getElementById('role').value;
            const labelInduk = document.getElementById('label_nomor_induk');
            const inputInduk = document.getElementById('nomor_induk');
            const fieldSiswaOnly = document.getElementById('field_siswa_only');

            if (role === 'siswa') {
                labelInduk.innerHTML = 'NISN <span class="text-danger">*</span>';
                inputInduk.placeholder = 'Masukkan NISN Siswa';
                fieldSiswaOnly.style.display = 'flex';
            } else if (role === 'guru') {
                labelInduk.innerHTML = 'NIP / NIK <span class="text-danger">*</span>';
                inputInduk.placeholder = 'Masukkan NIP/NIK Guru';
                fieldSiswaOnly.style.display = 'none';
            } else if (role === 'penjaga perpus') {
                labelInduk.innerHTML = 'NIP / NIK <span class="text-danger">*</span>';
                inputInduk.placeholder = 'Masukkan NIP/NIK Petugas';
                fieldSiswaOnly.style.display = 'none';
            }
        }
        document.addEventListener('DOMContentLoaded', toggleFields);

        document.getElementById('formEditPengguna').addEventListener('submit', function() {
            modernSwal.fire({
                title: 'Menyimpan Perubahan...',
                allowOutsideClick: false,
                didOpen: () => Swal.showLoading()
            });
        });

        @if(session('success'))
        Toast.fire({
            icon: 'success',
            title: 'Berhasil',
            text: '{{ session("success") }}'
        });
        @endif
    </script>
    @endpush
</x-app-layout>