@extends('adminlte::page')

@section('title', 'Tambah User | Smart Cendekia')

{{-- Aktifkan plugin Select2 --}}
@section('plugins.Select2', true)

@section('content_header')
    <div class="d-flex justify-content-between align-items-center">
        <div>
            <h1 class="text-dark font-weight-bold" style="font-family: 'Poppins', sans-serif;">Registrasi Pengguna</h1>
            <ol class="breadcrumb bg-transparent p-0 mt-1">
                <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{{ route('users.index') }}">Manajemen User</a></li>
                <li class="breadcrumb-item active">Tambah Baru</li>
            </ol>
        </div>
    </div>
@stop

@section('content')
<form action="{{ route('users.store') }}" method="POST">
    @csrf

    <div class="row">
        
        {{-- KOLOM KIRI: FORM INPUT UTAMA --}}
        <div class="col-md-8">
            
            {{-- 1. DATA AKUN & LOGIN --}}
            <div class="card border-0 shadow-sm mb-4" style="border-radius: 15px;">
                <div class="card-header bg-white py-3">
                    <h3 class="card-title font-weight-bold text-primary">
                        <i class="fas fa-user-shield mr-2"></i> Data Akun
                    </h3>
                </div>
                <div class="card-body">
                    
                    {{-- BARIS 1: NAMA & EMAIL --}}
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Nama Lengkap <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text bg-light border-0"><i class="fas fa-user text-muted"></i></span>
                                    </div>
                                    <input type="text" class="form-control bg-light border-0 @error('name') is-invalid @enderror" 
                                           name="name" value="{{ old('name') }}" placeholder="Contoh: Budi Santoso" required>
                                    @error('name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Alamat Email <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text bg-light border-0"><i class="fas fa-envelope text-muted"></i></span>
                                    </div>
                                    <input type="email" class="form-control bg-light border-0 @error('email') is-invalid @enderror" 
                                           name="email" value="{{ old('email') }}" placeholder="email@sekolah.sch.id" required>
                                    @error('email') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- BARIS 2: USERNAME & NO WHATSAPP --}}
                    <div class="row mt-2">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Username (Login) <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text bg-light border-0"><i class="fas fa-id-badge text-muted"></i></span>
                                    </div>
                                    <input type="text" class="form-control bg-light border-0 @error('username') is-invalid @enderror" 
                                           name="username" value="{{ old('username') }}" placeholder="Tanpa spasi, cth: budi123" required autocomplete="new-username">
                                    @error('username') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>No. WhatsApp <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text bg-light border-0"><i class="fab fa-whatsapp text-success"></i></span>
                                    </div>
                                    <input type="tel" class="form-control bg-light border-0 @error('no_hp') is-invalid @enderror" 
                                           name="no_hp" value="{{ old('no_hp') }}" placeholder="Contoh: 08123456789" required>
                                    @error('no_hp') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                </div>
                                <small class="text-muted d-block mt-1">
                                    <i class="fas fa-info-circle mr-1"></i> Penting untuk notifikasi sistem.
                                </small>
                            </div>
                        </div>
                    </div>

                    {{-- BARIS 2.5: RFID --}}
                    <div class="row mt-2">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Nomor Kartu (RFID UID)</label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text bg-warning border-0 text-white"><i class="fas fa-wifi"></i></span>
                                    </div>
                                    <input type="text" name="rfid_uid" class="form-control border-0 font-weight-bold bg-light @error('rfid_uid') is-invalid @enderror" 
                                           value="{{ old('rfid_uid') }}" placeholder="Tempelkan Kartu..." autocomplete="off">
                                    @error('rfid_uid') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                </div>
                                <small class="text-muted d-block mt-1">
                                    <i class="fas fa-info-circle mr-1"></i> Kosongkan jika user ini tidak wajib absen dengan kartu.
                                </small>
                            </div>
                        </div>
                    </div>

                    {{-- BARIS 3: PASSWORD --}}
                    <div class="row mt-2">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Password <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text bg-light border-0"><i class="fas fa-lock text-muted"></i></span>
                                    </div>
                                    <input type="password" class="form-control bg-light border-0 @error('password') is-invalid @enderror" 
                                           name="password" placeholder="Min. 6 Karakter" required autocomplete="new-password">
                                    @error('password') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Konfirmasi Password <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text bg-light border-0"><i class="fas fa-check-circle text-muted"></i></span>
                                    </div>
                                    <input type="password" class="form-control bg-light border-0" 
                                           name="password_confirmation" placeholder="Ulangi Password" required>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            {{-- 2. HAK AKSES & PERAN --}}
            <div class="card border-0 shadow-sm" style="border-radius: 15px;">
                <div class="card-header bg-white py-3">
                    <h3 class="card-title font-weight-bold text-info">
                        <i class="fas fa-layer-group mr-2"></i> Peran & Penugasan
                    </h3>
                </div>
                <div class="card-body">
                    
                    {{-- PILIH ROLE --}}
                    <div class="form-group">
                        <label>Role Pengguna <span class="text-danger">*</span></label>
                        <select class="form-control select2 bg-light border-0 @error('role') is-invalid @enderror" id="role" name="role" required>
                            <option value="" disabled selected>-- Pilih Role --</option>
                            @foreach($roles as $key => $label)
                                <option value="{{ $key }}" {{ old('role') == $key ? 'selected' : '' }}>{{ $label }}</option>
                            @endforeach
                        </select>
                        @error('role') <div class="invalid-feedback d-block">{{ $message }}</div> @enderror
                    </div>

                    {{-- DYNAMIC FIELDS AREA --}}
                    <div class="row mt-3">
                        
                        {{-- A. SEKOLAH (Multi Select - Pivot Table) --}}
                        <div class="col-md-12" id="form-group-sekolah" style="display:none;">
                            <div class="form-group">
                                <label>Penugasan Lembaga / Sekolah <span class="text-danger">*</span></label>
                                <div class="alert alert-light border small p-2 mb-2">
                                    <i class="fas fa-info-circle text-info"></i> Pilih di sekolah mana user ini bertugas (Bisa lebih dari satu).
                                </div>
                                <select class="form-control select2-multiple @error('sekolah_ids') is-invalid @enderror" 
                                        id="sekolah_ids" name="sekolah_ids[]" multiple="multiple" data-placeholder="Pilih Sekolah..." style="width: 100%;">
                                    @foreach($sekolahs as $sekolah)
                                        <option value="{{ $sekolah->id }}" {{ (collect(old('sekolah_ids'))->contains($sekolah->id)) ? 'selected' : '' }}>
                                            {{ $sekolah->nama_sekolah }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('sekolah_ids') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                            </div>
                        </div>

                        {{-- B. KELAS (Single Select - Untuk Guru/Siswa) --}}
                        <div class="col-md-12" id="form-group-kelas" style="display:none;">
                            <div class="form-group">
                                <label id="label-kelas" for="kelas_id">Wali Kelas / Kelas Siswa</label>
                                <select class="form-control select2 bg-light border-0 @error('kelas_id') is-invalid @enderror" 
                                        id="kelas_id" name="kelas_id" style="width: 100%;">
                                    <option value="">-- Tidak Ada / Pilih Kelas --</option>
                                    @foreach($kelas as $kls)
                                        <option value="{{ $kls->id }}" {{ old('kelas_id') == $kls->id ? 'selected' : '' }}>
                                            {{ $kls->nama_kelas }} - {{ $kls->sekolah->nama_sekolah ?? '' }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('kelas_id') <div class="invalid-feedback d-block">{{ $message }}</div> @enderror
                            </div>
                        </div>

                        {{-- C. PILIH ANAK (Khusus Orang Tua) --}}
                        <div class="col-md-12" id="form-group-anak" style="display:none;">
                            <div class="form-group bg-light p-3 rounded border">
                                <label><i class="fas fa-child text-success mr-1"></i> Hubungkan dengan Siswa (Anak) <span class="text-danger">*</span></label>
                                <p class="text-muted text-xs mb-2">Cari nama siswa yang akan dihubungkan dengan akun orang tua ini.</p>
                                
                                <select class="form-control select2-multiple @error('siswa_ids') is-invalid @enderror" 
                                        name="siswa_ids[]" multiple="multiple" data-placeholder="Ketik Nama Siswa..." style="width: 100%;">
                                    @foreach($siswas as $siswa)
                                        <option value="{{ $siswa->id }}" {{ (collect(old('siswa_ids'))->contains($siswa->id)) ? 'selected' : '' }}>
                                            {{ $siswa->nama_lengkap }} ({{ $siswa->nis }}) - {{ $siswa->kelas->nama_kelas ?? 'Tanpa Kelas' }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('siswa_ids') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                            </div>
                        </div>

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

        {{-- KOLOM KANAN: TOMBOL AKSI & INFO --}}
        <div class="col-md-4">
            <div class="card border-0 shadow-sm mb-3" style="border-radius: 15px;">
                <div class="card-body">
                    <button type="submit" class="btn btn-primary btn-block shadow rounded-pill font-weight-bold py-2 mb-2">
                        <i class="fas fa-save mr-2"></i> Simpan Data User
                    </button>
                    <a href="{{ route('users.index') }}" class="btn btn-outline-secondary btn-block rounded-pill">
                        <i class="fas fa-arrow-left mr-1"></i> Batal / Kembali
                    </a>
                </div>
            </div>

            <div class="card bg-light-info border-0 shadow-none mb-3" style="border-radius: 15px; background-color: #e3f2fd;">
                <div class="card-body">
                    <h5 class="text-primary font-weight-bold mb-3"><i class="fas fa-info-circle mr-2"></i> Panduan Role</h5>
                    <ul class="pl-3 small text-muted mb-0" style="line-height: 1.6;">
                        <li><strong>Super Admin:</strong> Akses penuh sistem.</li>
                        <li><strong>Manajemen:</strong> Wajib memilih Sekolah.</li>
                        <li><strong>Guru:</strong> Wajib memilih Sekolah. Opsional memilih Kelas (jika sebagai Wali Kelas).</li>
                        <li><strong>Siswa:</strong> Wajib memilih Sekolah & Kelas.</li>
                        <li><strong>Orang Tua:</strong> Wajib memilih Data Anak.</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</form>
@stop

@section('css')
<style>
    .form-control.bg-light { background-color: #f8f9fa !important; transition: all 0.3s ease; }
    .form-control.bg-light:focus { background-color: #fff !important; box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1); }
    .select2-container .select2-selection--single { height: 38px !important; border: 1px solid #ced4da !important; background-color: #fff !important; padding-top: 5px; }
    .select2-container--default .select2-selection--multiple { border: 1px solid #ced4da !important; min-height: 38px; border-radius: 0.25rem; }
    .select2-container--default .select2-selection--multiple .select2-selection__choice {
        background-color: #007bff; border: 1px solid #006fe6; color: white; border-radius: 20px; padding: 2px 10px; margin-top: 6px;
    }
    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: white; margin-right: 5px; opacity: 0.8; }
    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { color: #fff; opacity: 1; }
</style>
@stop

@section('js')
<script>
    $(document).ready(function() {
        // Inisialisasi Select2
        $('.select2').select2({ theme: 'default', width: '100%' });
        $('.select2-multiple').select2({ theme: 'default', width: '100%', allowClear: true });

        // Fungsi Dinamis Form Hak Akses
        function toggleRoleFields() {
            var selectedRole = $('#role').val();
            
            // Sembunyikan semua field dinamis terlebih dahulu
            $('#form-group-sekolah').slideUp();
            $('#form-group-kelas').slideUp();
            $('#form-group-anak').slideUp();

            // [FIXED] Menyesuaikan array dengan Enum yang valid (admin_lembaga & satpam ditambahkan)
            var roleButuhSekolah = [
                'kepala_sekolah', 'admin_lembaga', 'tu', 'bendahara_lembaga', 'sarpras', 'satpam',
                'guru', 'bk', 'pustakawan', 'siswa'
            ];

            // 1. Logika Tampil Sekolah
            if (roleButuhSekolah.includes(selectedRole)) {
                $('#form-group-sekolah').slideDown();
            }

            // 2. Logika Tampil Kelas
            if (selectedRole === 'guru') {
                $('#label-kelas').text('Wali Kelas (Opsional)');
                $('#form-group-kelas').slideDown();
            } 
            else if (selectedRole === 'siswa') {
                $('#label-kelas').text('Kelas Siswa (Wajib)');
                $('#form-group-kelas').slideDown();
            }
            
            // 3. Logika Tampil Anak
            else if (selectedRole === 'orangtua') {
                $('#form-group-anak').slideDown(); 
            }
        }
        
        // Panggil saat halaman dimuat (berguna saat ada validation error dari Laravel / old values)
        toggleRoleFields(); 
        
        // Panggil saat role diganti
        $('#role').on('change', function() {
            toggleRoleFields(); 
        });
    });
</script>
@stop