@extends('adminlte::page')

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

@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;">Edit Pengguna</h1>
            <p class="text-muted small mb-0">Perbarui data akun, hak akses, dan penugasan pengguna.</p>
        </div>
        <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') }}">User</a></li>
            <li class="breadcrumb-item active">Edit Data</li>
        </ol>
    </div>
@stop

@section('content')
<form action="{{ route('users.update', $user->id) }}" method="POST">
    @csrf
    @method('PUT')

    <div class="row">
        
        {{-- KOLOM KIRI --}}
        <div class="col-md-8">
            <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-edit mr-2"></i> Data Akun & Login
                    </h3>
                </div>
                <div class="card-body">
                    <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', $user->name) }}" placeholder="Nama Lengkap" required>
                                    @error('name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Username <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-card 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', $user->username) }}" placeholder="Username Unik" required>
                                    @error('username') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <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', $user->email) }}" placeholder="email@sekolah.sch.id" required>
                                    @error('email') <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', $user->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> Digunakan untuk notifikasi sistem.
                                </small>
                            </div>
                        </div>
                    </div>

                    <div class="form-group bg-light p-3 rounded border border-warning mt-2">
                        <label class="text-dark font-weight-bold mb-1">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 @error('rfid_uid') is-invalid @enderror" 
                                   value="{{ old('rfid_uid', $user->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> Scan kartu baru di sini jika ingin mengganti kartu lama.
                        </small>
                    </div>

                    <div class="alert alert-light border small p-2 mb-3 mt-3">
                        <i class="fas fa-info-circle text-info"></i> Kosongkan password jika tidak ingin mengubahnya.
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Password Baru (Opsional)</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="Isi untuk ganti password" 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</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 Baru">
                                </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-user-tag 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>-- Pilih Role --</option>
                            @foreach($roles as $key => $label)
                                @php $userRoleValue = is_object($user->role) ? $user->role->value : $user->role; @endphp
                                <option value="{{ $key }}" {{ old('role', $userRoleValue) == $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 --}}
                        <div class="col-md-12" id="form-group-sekolah" style="display:none;">
                            <div class="form-group">
                                <label>Penugasan Lembaga (Sekolah)</label>
                                <select class="form-control select2-multiple @error('sekolah_ids') is-invalid @enderror" 
                                        id="sekolah_ids" name="sekolah_ids[]" multiple="multiple" style="width: 100%;">
                                    @foreach($sekolahs as $sekolah)
                                        <option value="{{ $sekolah->id }}" 
                                            {{ in_array($sekolah->id, old('sekolah_ids', $user->sekolahs->pluck('id')->toArray())) ? 'selected' : '' }}>
                                            {{ $sekolah->nama_sekolah }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('sekolah_ids') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                            </div>
                        </div>

                        {{-- B. KELAS --}}
                        <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 (Opsional)</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', $user->kelas_id) == $kls->id ? 'selected' : '' }}>
                                            {{ $kls->nama_kelas }} ({{ $kls->sekolah->nama_sekolah ?? 'N/A' }})
                                        </option>
                                    @endforeach
                                </select>
                                @error('kelas_id') <div class="invalid-feedback d-block">{{ $message }}</div> @enderror
                            </div>
                        </div>

                        {{-- C. PILIH ANAK --}}
                        <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-info mr-1"></i> Hubungkan dengan Siswa (Anak)</label>
                                <select class="form-control select2-multiple @error('siswa_ids') is-invalid @enderror" 
                                        name="siswa_ids[]" multiple="multiple" data-placeholder="Cari Nama Siswa..." style="width: 100%;">
                                    @foreach($siswas as $siswa)
                                        <option value="{{ $siswa->id }}" 
                                            {{ in_array($siswa->id, old('siswa_ids', $user->anak->pluck('id')->toArray())) ? 'selected' : '' }}>
                                            {{ $siswa->nama_lengkap }} - {{ $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 --}}
        <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-success btn-block shadow rounded-pill font-weight-bold py-2 mb-2">
                        <i class="fas fa-save mr-2"></i> Simpan Perubahan
                    </button>
                    <a href="{{ route('users.index') }}" class="btn btn-outline-secondary btn-block rounded-pill">Batal</a>
                </div>
            </div>

            {{-- [DITAMBAHKAN KEMBALI] Info Card agar layout konsisten dengan form Create --}}
            <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(40, 167, 69, 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: #28a745; border: 1px solid #1e7e34; 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; }
</style>
@stop

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

        function toggleRoleFields() {
            var selectedRole = $('#role').val();
            
            $('#form-group-sekolah').slideUp();
            $('#form-group-kelas').slideUp();
            $('#form-group-anak').slideUp();

            // [FIXED] Disamakan dengan Create View
            var roleButuhSekolah = [
                'kepala_sekolah', 'admin_lembaga', 'tu', 'bendahara_lembaga', 'sarpras', 'satpam',
                'guru', 'bk', 'pustakawan', 'siswa'
            ];

            if (roleButuhSekolah.includes(selectedRole)) {
                $('#form-group-sekolah').slideDown();
            }

            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();
            }
            else if (selectedRole === 'orangtua') {
                $('#form-group-anak').slideDown(); 
            }
        }
        
        toggleRoleFields(); 
        
        $('#role').on('change', function() {
            toggleRoleFields(); 
        });
    });
</script>
@stop