{{-- resources/views/admin/kesiswaan/siswa/_form.blade.php --}}
@csrf
<div class="card-body">
    <div class="row mb-4">
        {{-- KOLOM KIRI: Foto Profil --}}
        <div class="col-md-3 border-end d-flex flex-column align-items-center pt-2">
            <label class="form-label fw-bold mb-3">Foto Siswa</label>
            
            <div class="position-relative mb-3">
                <div class="avatar-upload" style="width: 160px; height: 160px; position: relative;">
                    <img id="img_preview" 
                         src="{{ ($siswa && $siswa->img) ? asset('uploads/siswa/' . $siswa->img) : asset('kaiadmin/assets/img/iconuser.png') }}" 
                         alt="Preview Foto" 
                         class="rounded-circle shadow-sm border border-3 border-white bg-light"
                         style="width: 100%; height: 100%; object-fit: cover;">
                    
                    <label for="img_input" class="position-absolute bottom-0 end-0 bg-primary text-white rounded-circle p-2 shadow-sm" 
                           style="cursor: pointer; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; transition: all 0.3s;"
                           title="Ganti Foto">
                        <i class="fas fa-camera"></i>
                    </label>
                </div>
            </div>

            <input type="file" class="d-none @error('img') is-invalid @enderror" 
                   id="img_input" name="img" accept="image/jpeg, image/png, image/jpg, image/webp">

            @error('img') 
                <div class="text-danger small mt-1 text-center">{{ $message }}</div> 
            @enderror

            <label for="img_input" class="btn btn-sm btn-outline-secondary btn-round mt-2">
                <i class="fas fa-upload me-1"></i> Pilih File
            </label>
            
            <small class="text-muted mt-2 d-block text-center" style="font-size: 0.75rem;">
                Format: JPG/PNG/WEBP.<br>Maks: 2MB.
            </small>
        </div>

        <div class="col-md-9 ps-md-4">
            <div class="row bg-light rounded p-2 mb-3 border mx-0">
                <div class="col-md-12 mb-2">
                    <span class="badge bg-primary">Data Akademik & Kelas</span>
                </div>
                <div class="col-md-6 mb-2">
                    <label class="form-label fw-bold small">Tahun Masuk (Angkatan) <span class="text-danger">*</span></label>
                    @if(isset($siswa) && $siswa)
                        <input type="text" class="form-control form-control-sm" 
                               value="{{ $siswa->kelas?->angkatan?->tahun_masuk ?? '-' }}" readonly>
                        <input type="hidden" name="angkatan_id" value="{{ $siswa->kelas?->angkatan?->id }}">
                    @else
                        <select id="angkatan_id" name="angkatan_id" class="form-select form-select-sm" required>
                            <option value="" disabled selected>-- Pilih Tahun Masuk --</option>
                            @foreach($masterData['angkatans'] as $item)
                                <option value="{{ $item->id }}" @selected(old('angkatan_id') == $item->id)>
                                    {{ $item->tahun_masuk }}
                                </option>
                            @endforeach
                        </select>
                    @endif
                </div>

                <div class="col-md-6 mb-2">
                    <label class="form-label fw-bold small">Tahun Ajaran Aktif <span class="text-danger">*</span></label>
                    <select id="tahun_ajaran_id" name="tahun_ajaran_id" class="form-select form-select-sm bg-white" required>
                        {{-- Filter hanya yang aktif di sini atau di controller, tapi biar aman kita filter manual di view jika controller kirim semua --}}
                        @foreach($masterData['tahunAjarans'] as $item)
                            @if($item->is_active == 1)
                                <option value="{{ $item->id }}" selected>
                                    {{ $item->tahun_ajaran }} (Aktif)
                                </option>
                            @endif
                        @endforeach
                    </select>
                </div>

                <div class="col-md-4 mb-2">
                    <label class="form-label fw-bold small">Kelas <span class="text-danger">*</span></label>
                    <select id="kelas_level" class="form-select form-select-sm">
                        <option value="">-- Pilih --</option>
                    </select>
                </div>
                <div class="col-md-4 mb-2">
                    <label class="form-label fw-bold small">Rombel <span class="text-danger">*</span></label>
                    <select id="kelas_rombel" class="form-select form-select-sm">
                        <option value="">-- Pilih --</option>
                    </select>
                </div>
                <div class="col-md-4 mb-2">
                    <label class="form-label fw-bold small">Gender Rombel <span class="text-danger">*</span></label>
                    <select id="kelas_jenkel" class="form-select form-select-sm">
                        <option value="">-- Pilih --</option>
                        <option value="L">Putra (L)</option>
                        <option value="P">Putri (P)</option>
                    </select>
                </div>
                <input type="hidden" name="kelas_id" id="kelas_id" value="{{ old('kelas_id', $siswa->kelas_id ?? '') }}">
            </div>

            <div class="row">
                <div class="col-md-6 mb-3">
                    <label class="form-label fw-bold">NIPD (Nomor Induk Peserta Didik)</label>
                    <div class="input-group">
                        <input type="text" id="nipd" name="nipd" 
                               class="form-control fw-bold text-primary bg-light" 
                               value="{{ old('nipd', $siswa->nipd ?? '') }}" 
                               placeholder="Otomatis" readonly>
                        <span class="input-group-text bg-light"><i class="fas fa-id-badge"></i></span>
                    </div>
                    <small class="text-muted">Digenerate otomatis berdasarkan Tahun Masuk.</small>
                </div>
                <div class="col-md-6 mb-3">
                    <label class="form-label fw-bold">NISN</label>
                    <input type="text" class="form-control @error('nis') is-invalid @enderror" 
                           name="nis" value="{{ old('nis', $siswa->nis ?? '') }}" 
                           placeholder="Nomor Induk Siswa Nasional">
                    @error('nis') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>
            </div>

            <div class="row">
                <div class="col-md-12 mb-3">
                    <label class="form-label fw-bold">Nama Lengkap <span class="text-danger">*</span></label>
                    <input type="text" class="form-control @error('name') is-invalid @enderror" 
                           name="name" value="{{ old('name', $siswa->name ?? '') }}" 
                           placeholder="Nama Siswa Sesuai Akta/Ijazah" required>
                    @error('name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>
            </div>

            <div class="row">
                <div class="col-md-6 mb-3">
                    <label class="form-label fw-bold">Jenis Kelamin <span class="text-danger">*</span></label>
                    <select name="jenkel" class="form-select" required>
                        <option value="L" @selected(old('jenkel', $siswa->jenkel ?? '')=='L')>Laki-laki</option>
                        <option value="P" @selected(old('jenkel', $siswa->jenkel ?? '')=='P')>Perempuan</option>
                    </select>
                </div>
                <div class="col-md-6 mb-3">
                    <label class="form-label fw-bold">Agama <span class="text-danger">*</span></label>
                    <select name="agama" class="form-select" required>
                        @foreach(['Islam', 'Kristen', 'Katolik', 'Hindu', 'Buddha', 'Khonghucu'] as $agm)
                            <option value="{{ $agm }}" @selected(old('agama', $siswa->agama ?? 'Islam') == $agm)>{{ $agm }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6 mb-3">
                    <label class="form-label fw-bold">Tempat Lahir <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" name="tmpt_lahir" 
                           value="{{ old('tmpt_lahir', $siswa->tmpt_lahir ?? '') }}" required>
                </div>
                <div class="col-md-6 mb-3">
                    <label class="form-label fw-bold">Tanggal Lahir <span class="text-danger">*</span></label>
                    {{-- Input type="date" value-nya HARUS format Y-m-d agar terbaca oleh browser --}}
                    <input type="date" class="form-control @error('tgl_lahir') is-invalid @enderror" 
                        name="tgl_lahir" 
                        value="{{ old('tgl_lahir', $siswa?->tgl_lahir?->format('Y-m-d')) }}" 
                        required>
                    @error('tgl_lahir') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>
            </div>

        </div> 
    </div> 

    <hr class="my-4">

    <h6 class="fw-bold text-primary mb-3"><i class="fas fa-address-book me-2"></i> Kontak & Akun Akses</h6>
    
    <div class="row">
        <div class="col-md-6 mb-3">
            <label class="form-label fw-bold">No. Handphone / WhatsApp</label>
            <input type="text" class="form-control @error('handphone') is-invalid @enderror" 
                   name="handphone" value="{{ old('handphone', $siswa->handphone ?? '') }}" 
                   placeholder="08xxxxxxxxxx (Milik Siswa)">
            @error('handphone') <div class="invalid-feedback">{{ $message }}</div> @enderror
        </div>

        <div class="col-md-6 mb-3">
            <label class="form-label fw-bold">Email (Username Login)</label>
            <input type="email" class="form-control @error('email') is-invalid @enderror" 
                   name="email" value="{{ old('email', $siswa->email ?? '') }}" 
                   placeholder="siswa@sekolah.id (Opsional)">
            @error('email') <div class="invalid-feedback">{{ $message }}</div> @enderror
        </div>
    </div>

    <div class="row">
        <div class="col-md-6 mb-3">
            <label for="password" class="form-label fw-bold">Password</label>
            <div class="input-group">
                <input type="password" class="form-control @error('password') is-invalid @enderror" 
                       id="password" name="password" placeholder="******">
                <button class="btn btn-outline-secondary" type="button" id="togglePasswordBtn">
                    <i class="fa fa-eye-slash" id="togglePasswordIcon"></i>
                </button>
            </div>
            
            @if(isset($siswa))
                <small class="form-text text-muted">Kosongkan jika tidak ingin mengubah password.</small>
            @else
                <small class="form-text text-muted">Wajib diisi (Min. 6 karakter). Default: <b>alidrus123</b></small>
            @endif
            
            @error('password') <div class="invalid-feedback d-block">{{ $message }}</div> @enderror
        </div>

        <div class="col-md-6 mb-3">
            <label for="password_confirmation" class="form-label fw-bold">Konfirmasi Password</label>
            <div class="input-group">
                <input type="password" class="form-control" 
                       id="password_confirmation" name="password_confirmation" placeholder="Ketik ulang password">
                <button class="btn btn-outline-secondary" type="button" id="toggleConfirmPasswordBtn">
                    <i class="fa fa-eye-slash" id="toggleConfirmPasswordIcon"></i>
                </button>
            </div>
            <small class="form-text text-muted">Pastikan sama dengan password di samping.</small>
        </div>
    </div>

</div>

<div class="card-footer text-end">
    <a href="{{ route('admin.siswa.index') }}" class="btn btn-secondary btn-round">
        <i class="fas fa-arrow-left me-1"></i> Batal
    </a>
    <button type="submit" class="btn btn-primary btn-round">
        <i class="fas fa-save me-1"></i> Simpan Data Siswa
    </button>
</div>

@push('scripts')
<script>
$(function () {

    $('#togglePasswordBtn').on('click', function () {
        const input = $('#password');
        const icon  = $('#togglePasswordIcon');
        const type  = input.attr('type') === 'password' ? 'text' : 'password';
        input.attr('type', type);
        icon.toggleClass('fa-eye fa-eye-slash');
    });

    $('#toggleConfirmPasswordBtn').on('click', function() {
        const input = $('#password_confirmation');
        const icon = $('#toggleConfirmPasswordIcon');
        const type = input.attr('type') === 'password' ? 'text' : 'password';
        input.attr('type', type);
        icon.toggleClass('fa-eye fa-eye-slash');
    });

    $('#img_input').change(function(){
        let reader = new FileReader();
        reader.onload = (e) => { 
          $('#img_preview').attr('src', e.target.result); 
        }
        if(this.files[0]){
            reader.readAsDataURL(this.files[0]);
        }
    });

    const kelasUrlTemplate = @json(route('admin.api.kelas-by-tahun-ajaran', ['tahunAjaran' => '__ID__']));
    const nipdUrlTemplate  = "{{ url('api/generate-nipd') }}/";

    const $angkatan = $('#angkatan_id');
    const $nipd     = $('#nipd');
    const $ta       = $('#tahun_ajaran_id'); 

    const $kelasLevel  = $('#kelas_level');
    const $kelasRombel = $('#kelas_rombel');
    const $kelasJenkel = $('#kelas_jenkel');
    const $kelasId     = $('#kelas_id');

    let cachedKelasData = [];

    function sortRomanLevels(levels) {
        const romanOrder = { "VII": 7, "VIII": 8, "IX": 9 };
        return levels.sort((a, b) => {
            return (romanOrder[a] || 0) - (romanOrder[b] || 0);
        });
    }

    $angkatan.on('change', function () {
        const angkatanId = $(this).val();
        if (!angkatanId) { $nipd.val(''); return; }

        if (!$nipd.prop('readonly') || $nipd.val() === '') {
            $.getJSON(nipdUrlTemplate + angkatanId)
              .done(res => { if (res.success && res.nipd) $nipd.val(res.nipd); })
              .fail(() => console.error('Gagal generate NIPD'));
        }
    });

    function populateRombel(selectedLevel) {
        $kelasRombel.empty().append('<option value="">-- Pilih --</option>');
        if (!selectedLevel) return;

        const filtered = cachedKelasData.filter(item => item.rombel.level_kelas.level_kelas == selectedLevel);
        const uniqueRombels = [...new Set(filtered.map(item => item.rombel.rombel))].sort();

        uniqueRombels.forEach(r => {
            $kelasRombel.append(`<option value="${r}">${r}</option>`);
        });
    }

    function loadKelas(tahunAjaranId, selectedId = null) {
        if (!tahunAjaranId) return;
        const url = kelasUrlTemplate.replace('__ID__', tahunAjaranId);

        $.getJSON(url)
          .done(function (res) {
            if (!res.success || !res.data.length) {
                $kelasLevel.empty().append('<option value="">-- Pilih --</option>');
                $kelasRombel.empty().append('<option value="">-- Pilih --</option>');
                $kelasJenkel.val('');
                $kelasId.val('');
                return;
            }

            cachedKelasData = res.data;
            
            let uniqueLevels = [...new Set(res.data.map(item => item.rombel.level_kelas.level_kelas))];
            uniqueLevels = sortRomanLevels(uniqueLevels);

            $kelasLevel.empty().append('<option value="">-- Pilih --</option>');
            uniqueLevels.forEach(level => {
              $kelasLevel.append(`<option value="${level}">${level}</option>`);
            });

            if (selectedId) {
                const selectedClass = cachedKelasData.find(c => c.id == selectedId);
                if (selectedClass) {
                    const levelVal  = selectedClass.rombel.level_kelas.level_kelas;
                    const rombelVal = selectedClass.rombel.rombel;
                    const jenkelVal = selectedClass.rombel.jenkel;

                    $kelasLevel.val(levelVal);
                    populateRombel(levelVal);
                    $kelasRombel.val(rombelVal);
                    $kelasJenkel.val(jenkelVal);
                    $kelasId.val(selectedId);
                }
            }
          })
          .fail(() => console.error('Gagal load kelas'));
    }

    $kelasLevel.on('change', function() {
        const level = $(this).val();
        $kelasRombel.empty().append('<option value="">-- Pilih --</option>');
        $kelasJenkel.val('');
        $kelasId.val('');
        populateRombel(level);
    });

    $('#kelas_rombel, #kelas_jenkel').on('change', function() {
        const level  = $kelasLevel.val();
        const rombel = $kelasRombel.val();
        const jenkel = $kelasJenkel.val();
        $kelasId.val(''); 

        if (level && rombel && jenkel) {
            const foundClass = cachedKelasData.find(item =>
                item.rombel.level_kelas.level_kelas == level &&
                item.rombel.rombel == rombel &&
                item.rombel.jenkel == jenkel
            );
            if (foundClass) {
                $kelasId.val(foundClass.id);
            }
        }
    });

    const taVal = $ta.val();
    if(taVal) {
        const initKelas = "{{ old('kelas_id', $siswa->kelas_id ?? '') }}"; 
        loadKelas(taVal, initKelas);
    }

    $ta.on('change', function () {
        loadKelas($(this).val());
    });
});
</script>
@endpush