{{-- resources/views/admin/kesiswaan/siswa/_form.blade.php --}}
@php
    $isSiswaPortal = auth()->check() && auth()->user()->type == 4;
    $initLevel  = $siswa->kelas->rombel->levelKelas->level_kelas ?? $siswa->kelas->levelKelas->level_kelas ?? '';
    $initRombel = $siswa->kelas->rombel->rombel ?? '';
    $initJenkel = $siswa->kelas->rombel->jenkel ?? '';
@endphp

@csrf
<div class="card-body">
    <div class="row mb-4">
        <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;">
                
                    <div class="position-absolute bottom-0 end-0">
                        <button type="button" class="btn btn-primary text-white rounded-circle p-0 shadow border-0 d-flex align-items-center justify-content-center" 
                                style="width: 45px; height: 45px; transition: all 0.3s;"
                                data-bs-toggle="dropdown" aria-expanded="false" title="Ubah Foto">
                            <i class="fas fa-camera fs-5"></i>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end shadow border-0 rounded-3">
                            <li>
                                <label class="dropdown-item py-2 fw-bold" for="img_input" style="cursor: pointer;">
                                    <i class="fas fa-upload me-2 text-primary"></i> Upload File Gambar
                                </label>
                            </li>
                            <li>
                                <a class="dropdown-item py-2 fw-bold" href="#" data-bs-toggle="modal" data-bs-target="#kameraModal">
                                    <i class="fas fa-video me-2 text-success"></i> Ambil dari Kamera
                                </a>
                            </li>
                        </ul>
                    </div>
                </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
            
            <small class="text-muted mt-3 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>
                    @if($isSiswaPortal) <small class="text-danger ms-2 fst-italic">*Dikunci oleh Admin</small> @endif
                </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) || $isSiswaPortal)
                        <input type="text" class="form-control form-control-sm {{ $isSiswaPortal ? 'bg-white text-muted' : '' }}" 
                               value="{{ $siswa->angkatan->tahun_masuk ?? $siswa->kelas->angkatan->tahun_masuk ?? '-' }}" readonly tabindex="-1">
                        <input type="hidden" name="angkatan_id" value="{{ $siswa->angkatan_id ?? $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 {{ $isSiswaPortal ? 'bg-white text-muted' : '' }}" required {{ $isSiswaPortal ? 'style=pointer-events:none; tabindex=-1' : '' }}>
                        @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 {{ $isSiswaPortal ? 'bg-white text-muted' : '' }}" {{ $isSiswaPortal ? 'style=pointer-events:none; tabindex=-1' : '' }}>
                        <option value="{{ $initLevel }}">{{ $initLevel ?: '-- 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 {{ $isSiswaPortal ? 'bg-white text-muted' : '' }}" {{ $isSiswaPortal ? 'style=pointer-events:none; tabindex=-1' : '' }}>
                        <option value="{{ $initRombel }}">{{ $initRombel ?: '-- 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 {{ $isSiswaPortal ? 'bg-white text-muted' : '' }}" {{ $isSiswaPortal ? 'style=pointer-events:none; tabindex=-1' : '' }}>
                        <option value="{{ $initJenkel }}">{{ $initJenkel == 'L' ? 'Putra (L)' : ($initJenkel == 'P' ? 'Putri (P)' : '-- 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 tabindex="-1">
                        <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 {{ $isSiswaPortal ? 'bg-light text-muted' : '' }} @error('nis') is-invalid @enderror" 
                           name="nis" value="{{ old('nis', $siswa->nis ?? '') }}" 
                           placeholder="Nomor Induk Siswa Nasional" {{ $isSiswaPortal ? 'readonly tabindex=-1' : '' }}>
                    @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 {{ $isSiswaPortal ? 'bg-light text-muted' : '' }}" required {{ $isSiswaPortal ? 'style=pointer-events:none; tabindex=-1' : '' }}>
                        <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" 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>
    
    @if(!$isSiswaPortal)
    <div class="row mt-2">
        <div class="col-md-12">
            <div class="card bg-light border-0 shadow-none">
                <div class="card-body py-2 px-3">
                    <div class="form-check form-switch d-flex align-items-center">
                        <input class="form-check-input me-3" type="checkbox" name="hak_akses" id="hak_akses"
                               {{ old('hak_akses', $siswa->hak_akses ?? false) ? 'checked' : '' }} 
                               style="cursor: pointer; width: 3em; height: 1.5em;" value="1">
                        <div>
                            <label class="form-check-label fw-bold text-dark mb-0" for="hak_akses" style="cursor: pointer;">Aktifkan Akun Login Siswa</label>
                            <small class="d-block text-muted">Jika diaktifkan, sistem akan membuatkan akun di manajemen pengguna agar siswa bisa login ke Portal.</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif

</div>

<div class="card-footer text-end">
    <a href="{{ $isSiswaPortal ? route('siswa.dashboard') : 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
    </button>
</div>

<div class="modal fade" id="kameraModal" tabindex="-1" aria-labelledby="kameraModalLabel" aria-hidden="true" data-bs-backdrop="static">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg">
            <div class="modal-header bg-dark text-white">
                <h5 class="modal-title fw-bold" id="kameraModalLabel"><i class="fas fa-camera me-2"></i> Ambil Foto Kamera</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-0 text-center bg-black position-relative">
                <video id="kameraVideo" width="100%" autoplay playsinline style="display: block; max-height: 400px; object-fit: cover;"></video>
                <canvas id="kameraCanvas" style="display: none;"></canvas>
            </div>
            <div class="modal-footer justify-content-center bg-light border-0">
                <button type="button" class="btn btn-secondary fw-bold shadow-sm" id="switchCameraBtn">
                    <i class="fas fa-sync-alt me-1"></i> Ganti Kamera
                </button>
                <button type="button" class="btn btn-primary fw-bold shadow-sm px-4" id="captureCameraBtn">
                    <i class="fas fa-bullseye me-1"></i> Ambil Foto
                </button>
            </div>
        </div>
    </div>
</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]);
        }
    });

    let video = document.getElementById('kameraVideo');
    let canvas = document.getElementById('kameraCanvas');
    let stream = null;
    let useFrontCamera = true; 

    function startCamera() {
        let constraints = {
            video: {
                facingMode: (useFrontCamera ? "user" : "environment"),
                width: { ideal: 1280 },
                height: { ideal: 720 }
            }
        };

        navigator.mediaDevices.getUserMedia(constraints)
            .then(function (mediaStream) {
                stream = mediaStream;
                video.srcObject = stream;
            })
            .catch(function (error) {
                console.error("Akses kamera ditolak atau tidak ditemukan!", error);
                alert("Gagal mengakses kamera!\n\nKode Error: " + error.name);
            });
    }

    function stopCamera() {
        if (stream) {
            stream.getTracks().forEach(track => track.stop());
            video.srcObject = null;
        }
    }

    $('#kameraModal').on('shown.bs.modal', function () {
        startCamera();
    });

    $('#kameraModal').on('hidden.bs.modal', function () {
        stopCamera();
    });

    $('#switchCameraBtn').click(function() {
        stopCamera();
        useFrontCamera = !useFrontCamera;
        startCamera();
    });

    $('#captureCameraBtn').click(function() {
        if (!stream) return;

        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        let context = canvas.getContext('2d');
        
        if (useFrontCamera) {
            context.translate(canvas.width, 0);
            context.scale(-1, 1);
        }
        
        context.drawImage(video, 0, 0, canvas.width, canvas.height);

        canvas.toBlob(function(blob) {
            let file = new File([blob], "foto_siswa_" + Date.now() + ".jpg", { type: "image/jpeg" });
            let container = new DataTransfer();
            container.items.add(file);
            document.getElementById('img_input').files = container.files;

            $('#img_input').trigger('change');
            $('#kameraModal').modal('hide');
            
        }, 'image/jpeg', 0.9); 
    });

    @if(!$isSiswaPortal)
    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 = [];
    
    const initLevel  = "{{ $initLevel }}";
    const initRombel = "{{ $initRombel }}";
    const initJenkel = "{{ $initJenkel }}";
    const initKelasId = "{{ $siswa->kelas_id ?? '' }}";

    function sortRomanLevels(levels) {
        const romanOrder = { "VII": 7, "VIII": 8, "IX": 9, "X": 10, "XI": 11, "XII": 12 };
        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); })
        }
    });

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

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

        if(initRombel && selectedLevel === initLevel && !uniqueRombels.includes(initRombel)) {
            uniqueRombels.push(initRombel);
        }

        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) {
                if(initLevel && initRombel && selectedId == initKelasId) {
                    $kelasLevel.empty().append(`<option value="${initLevel}">${initLevel}</option>`);
                    $kelasRombel.empty().append(`<option value="${initRombel}">${initRombel}</option>`);
                    $kelasJenkel.val(initJenkel);
                    $kelasId.val(initKelasId);
                } else {
                    $kelasLevel.empty().append('<option value="">-- Pilih --</option>');
                    $kelasRombel.empty().append('<option value="">-- Pilih --</option>');
                    $kelasJenkel.val('');
                    $kelasId.val('');
                }
                return;
            }

            cachedKelasData = res.data;
            
            let rawLevels = res.data.map(item => item.level);
            let uniqueLevels = [...new Set(rawLevels.filter(Boolean))];
            uniqueLevels = sortRomanLevels(uniqueLevels);

            if(initLevel && !uniqueLevels.includes(initLevel) && selectedId == initKelasId) {
                uniqueLevels.push(initLevel);
            }

            $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.level || '';
                    const rombelVal = selectedClass.rombel || '';
                    const jenkelVal = selectedClass.jenkel || '';

                    $kelasLevel.val(levelVal);
                    populateRombel(levelVal);
                    $kelasRombel.val(rombelVal);
                    $kelasJenkel.val(jenkelVal);
                    $kelasId.val(selectedId);
                } else if(selectedId == initKelasId && initLevel) {
                    $kelasLevel.val(initLevel);
                    populateRombel(initLevel);
                    $kelasRombel.val(initRombel);
                    $kelasJenkel.val(initJenkel);
                    $kelasId.val(initKelasId);
                }
            }
          });
    }

    $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 => {
                return item.level == level && item.rombel == rombel && item.jenkel == jenkel;
            });
            if (foundClass) {
                $kelasId.val(foundClass.id);
            } else if (initKelasId && level == initLevel && rombel == initRombel && jenkel == initJenkel) {
                $kelasId.val(initKelasId); 
            }
        }
    });

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

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