@extends('adminlte::page')

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

@section('plugins.Select2', true)

@section('content_header')
    <div class="d-flex justify-content-between align-items-center pt-3 pb-2">
        <div>
            <h1 class="text-dark font-weight-bold mb-1" style="font-family: 'Inter', sans-serif; font-size: 1.5rem;">
                Registrasi Siswa Baru
            </h1>
            <p class="text-muted small mb-0 font-weight-500">
                Isi formulir buku induk secara lengkap untuk mendaftarkan siswa ke dalam sistem.
            </p>
        </div>
        <div class="d-none d-md-block">
            <a href="{{ route('siswa.index') }}" class="btn btn-light text-muted font-weight-bold shadow-sm rounded-pill px-4">
                <i class="fas fa-arrow-left mr-2"></i> Kembali
            </a>
        </div>
    </div>
@stop

@section('content')
<form action="{{ route('siswa.store') }}" method="POST" enctype="multipart/form-data" id="formSiswa">
    @csrf
    
    <div class="row">
        
        {{-- ==================================================== --}}
        {{-- KOLOM KIRI: FOTO, STATUS, & SUBSIDI (Lebar 3/12) --}}
        {{-- ==================================================== --}}
        <div class="col-lg-3 col-md-4 mb-4">
            
            {{-- CARD FOTO --}}
            <div class="card border-0 shadow-sm mb-3" style="border-radius: 15px;">
                <div class="card-body text-center p-4">
                    <div class="position-relative d-inline-block mb-3">
                        <img id="preview-foto" 
                             src="https://ui-avatars.com/api/?name=Siswa+Baru&background=F3F6F9&color=5B247A&size=200&bold=true" 
                             class="img-fluid rounded-circle shadow-sm" 
                             alt="Foto Siswa"
                             style="width: 150px; height: 150px; object-fit: cover; border: 4px solid #fff;">
                        
                        <label for="foto_url" class="btn-upload-icon shadow-sm" title="Ganti Foto">
                            <i class="fas fa-camera text-white"></i>
                        </label>
                        <input type="file" name="foto_url" id="foto_url" class="d-none" accept="image/*">
                    </div>
                    <p class="text-muted text-xs font-weight-bold mb-0">Upload Foto (Max 2MB)</p>
                </div>
            </div>

            {{-- CARD STATUS & SUBSIDI --}}
            <div class="card border-0 shadow-sm" style="border-radius: 15px;">
                <div class="card-body p-4">
                    <div class="form-group mb-3">
                        <label class="font-weight-bold text-muted text-xs text-uppercase">Status Siswa</label>
                        <select name="status_siswa" class="form-control form-control-solid">
                            <option value="Aktif" {{ old('status_siswa') == 'Aktif' ? 'selected' : '' }}>Aktif</option>
                            <option value="Pindah" {{ old('status_siswa') == 'Pindah' ? 'selected' : '' }}>Pindah</option>
                            <option value="Keluar" {{ old('status_siswa') == 'Keluar' ? 'selected' : '' }}>Keluar/DO</option>
                        </select>
                    </div>
                    
                    <div class="form-group mb-0">
                        <label class="font-weight-bold text-muted text-xs text-uppercase">Subsidi SPP Manual</label>
                        <div class="input-group">
                            <input type="number" name="persentase_subsidi" class="form-control form-control-solid" value="{{ old('persentase_subsidi', 0) }}" min="0" max="100">
                            <div class="input-group-append">
                                <span class="input-group-text bg-light border-0 font-weight-bold">%</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- CARD DOKUMEN CHECKLIST --}}
            <div class="card border-0 shadow-sm mt-3" style="border-radius: 15px;">
                <div class="card-body p-4 bg-light" style="border-radius: 15px;">
                    <label class="font-weight-bold text-muted text-xs text-uppercase mb-3 border-bottom pb-2 d-block">Kelengkapan Berkas</label>
                    <div class="custom-control custom-switch mb-2">
                        <input type="checkbox" class="custom-control-input" id="dokumen_kk" name="dokumen_kk" value="1" {{ old('dokumen_kk') ? 'checked' : '' }}>
                        <label class="custom-control-label font-weight-500 text-sm" for="dokumen_kk">Kartu Keluarga</label>
                    </div>
                    <div class="custom-control custom-switch mb-2">
                        <input type="checkbox" class="custom-control-input" id="dokumen_ijazah" name="dokumen_ijazah" value="1" {{ old('dokumen_ijazah') ? 'checked' : '' }}>
                        <label class="custom-control-label font-weight-500 text-sm" for="dokumen_ijazah">Ijazah Terakhir</label>
                    </div>
                    <div class="custom-control custom-switch">
                        <input type="checkbox" class="custom-control-input" id="dokumen_skl" name="dokumen_skl" value="1" {{ old('dokumen_skl') ? 'checked' : '' }}>
                        <label class="custom-control-label font-weight-500 text-sm" for="dokumen_skl">SKL / Mutasi</label>
                    </div>
                </div>
            </div>

        </div>

        {{-- ==================================================== --}}
        {{-- KOLOM KANAN: FORM LENGKAP (Lebar 9/12) --}}
        {{-- ==================================================== --}}
        <div class="col-lg-9 col-md-8 mb-4">
            <div class="card border-0 shadow-sm h-100" style="border-radius: 15px;">
                <div class="card-header bg-white border-0 pt-4 px-4 pb-0">
                    <h3 class="card-title font-weight-bold text-dark">Formulir Buku Induk</h3>
                </div>
                
                <div class="card-body p-4">
                    
                    {{-- 1. DATA PRIBADI --}}
                    <h6 class="text-purple font-weight-bold text-uppercase text-xs mb-3 spacing-1 border-bottom pb-2">
                        <i class="fas fa-user-circle mr-1"></i> Data Pribadi
                    </h6>
                    
                    <div class="form-row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-xs font-weight-bold text-muted">Nama Lengkap <span class="text-danger">*</span></label>
                            <input type="text" name="nama_lengkap" class="form-control form-control-solid @error('nama_lengkap') is-invalid @enderror" value="{{ old('nama_lengkap') }}" placeholder="Sesuai Akta Kelahiran" required>
                            @error('nama_lengkap') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                        
                        <div class="col-md-3 mb-3">
                            <label class="form-label text-xs font-weight-bold text-muted">NIS (Lokal) <span class="text-danger">*</span></label>
                            <input type="text" name="nis" class="form-control form-control-solid @error('nis') is-invalid @enderror" placeholder="Contoh: 2024001" value="{{ old('nis') }}" required>
                            @error('nis') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                        
                        <div class="col-md-3 mb-3">
                            <label class="form-label text-xs font-weight-bold text-muted">NISN (Nasional)</label>
                            <input type="text" name="nisn" class="form-control form-control-solid" placeholder="10 Digit Angka" value="{{ old('nisn') }}">
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="col-md-4 mb-3">
                            <label class="form-label text-xs font-weight-bold text-muted">Tempat Lahir <span class="text-danger">*</span></label>
                            <input type="text" name="tempat_lahir" class="form-control form-control-solid" placeholder="Kota Kelahiran" value="{{ old('tempat_lahir') }}" required>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label text-xs font-weight-bold text-muted">Tanggal Lahir <span class="text-danger">*</span></label>
                            <input type="date" name="tanggal_lahir" class="form-control form-control-solid" value="{{ old('tanggal_lahir') }}" required>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label text-xs font-weight-bold text-muted">Jenis Kelamin <span class="text-danger">*</span></label>
                            <div class="d-flex align-items-center" style="height: 45px;">
                                <div class="custom-control custom-radio mr-4">
                                    <input type="radio" id="lk" name="jenis_kelamin" value="Laki-laki" class="custom-control-input" {{ old('jenis_kelamin', 'Laki-laki') == 'Laki-laki' ? 'checked' : '' }} required>
                                    <label class="custom-control-label" for="lk">Laki-laki</label>
                                </div>
                                <div class="custom-control custom-radio">
                                    <input type="radio" id="pr" name="jenis_kelamin" value="Perempuan" class="custom-control-input" {{ old('jenis_kelamin') == 'Perempuan' ? 'checked' : '' }}>
                                    <label class="custom-control-label" for="pr">Perempuan</label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="col-md-4 mb-3">
                            <label class="form-label text-xs font-weight-bold text-muted">Agama</label>
                            <select name="agama" class="form-control form-control-solid">
                                <option value="">-- Pilih Agama --</option>
                                @foreach(['Islam', 'Kristen', 'Katolik', 'Hindu', 'Buddha', 'Konghucu'] as $agm)
                                    <option value="{{ $agm }}" {{ old('agama') == $agm ? 'selected' : '' }}>{{ $agm }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label text-xs font-weight-bold text-muted">Status Dlm Keluarga</label>
                            <select name="status_keluarga" class="form-control form-control-solid">
                                <option value="">-- Pilih --</option>
                                <option value="Anak Kandung" {{ old('status_keluarga') == 'Anak Kandung' ? 'selected' : '' }}>Anak Kandung</option>
                                <option value="Anak Tiri" {{ old('status_keluarga') == 'Anak Tiri' ? 'selected' : '' }}>Anak Tiri</option>
                                <option value="Anak Angkat" {{ old('status_keluarga') == 'Anak Angkat' ? 'selected' : '' }}>Anak Angkat</option>
                            </select>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label text-xs font-weight-bold text-muted">Anak Ke-</label>
                            <input type="number" name="anak_ke" class="form-control form-control-solid" min="1" placeholder="Contoh: 1" value="{{ old('anak_ke') }}">
                        </div>
                    </div>

                    <div class="form-group mb-4">
                        <label class="form-label text-xs font-weight-bold text-muted">Alamat Tempat Tinggal</label>
                        <textarea name="alamat" class="form-control form-control-solid" rows="2" placeholder="Jalan, RT/RW, Dusun, Desa...">{{ old('alamat') }}</textarea>
                    </div>

                    {{-- 2. RIWAYAT SEKOLAH --}}
                    <h6 class="text-primary font-weight-bold text-uppercase text-xs mb-3 spacing-1 border-bottom pb-2 mt-4">
                        <i class="fas fa-history mr-1"></i> Riwayat Masuk & Asal Sekolah
                    </h6>
                    <div class="form-row">
                        <div class="col-md-4 mb-3">
                            <label class="form-label text-xs font-weight-bold text-muted">Asal Sekolah Sebelumnya</label>
                            <input type="text" name="asal_sekolah" class="form-control form-control-solid" placeholder="Contoh: SMPN 1 Cerdas" value="{{ old('asal_sekolah') }}">
                        </div>
                        <div class="col-md-3 mb-3">
                            <label class="form-label text-xs font-weight-bold text-muted">Tahun Masuk</label>
                            <input type="text" name="tahun_masuk" class="form-control form-control-solid" placeholder="Contoh: 2023" value="{{ old('tahun_masuk') }}">
                        </div>
                        <div class="col-md-3 mb-3">
                            <label class="form-label text-xs font-weight-bold text-muted">Tanggal Masuk</label>
                            <input type="date" name="tanggal_masuk" class="form-control form-control-solid" value="{{ old('tanggal_masuk') }}">
                        </div>
                        <div class="col-md-2 mb-3">
                            <label class="form-label text-xs font-weight-bold text-muted">Diterima di Kls</label>
                            <input type="text" name="diterima_di_kelas" class="form-control form-control-solid" placeholder="Cth: 7A" value="{{ old('diterima_di_kelas') }}">
                        </div>
                    </div>

                    {{-- 3. DATA ORANG TUA --}}
                    <h6 class="text-info font-weight-bold text-uppercase text-xs mb-3 spacing-1 border-bottom pb-2 mt-4">
                        <i class="fas fa-users mr-1"></i> Data Orang Tua Kandung
                    </h6>
                    <div class="form-row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-xs font-weight-bold text-muted">Nama Ayah</label>
                            <input type="text" name="nama_ayah" class="form-control form-control-solid" value="{{ old('nama_ayah') }}">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-xs font-weight-bold text-muted">Pekerjaan Ayah</label>
                            <input type="text" name="pekerjaan_ayah" class="form-control form-control-solid" value="{{ old('pekerjaan_ayah') }}">
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-xs font-weight-bold text-muted">Nama Ibu</label>
                            <input type="text" name="nama_ibu" class="form-control form-control-solid" value="{{ old('nama_ibu') }}">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-xs font-weight-bold text-muted">Pekerjaan Ibu</label>
                            <input type="text" name="pekerjaan_ibu" class="form-control form-control-solid" value="{{ old('pekerjaan_ibu') }}">
                        </div>
                    </div>
                    <div class="form-group mb-4">
                        <label class="form-label text-xs font-weight-bold text-muted">Alamat Orang Tua (Isi jika berbeda dengan alamat siswa)</label>
                        <textarea name="alamat_ortu" class="form-control form-control-solid" rows="1">{{ old('alamat_ortu') }}</textarea>
                    </div>

                    {{-- 4. KONTAK WALI (FOKUS UTAMA TAGIHAN) --}}
                    <h6 class="text-success font-weight-bold text-uppercase text-xs mb-3 spacing-1 border-bottom pb-2 mt-4">
                        <i class="fab fa-whatsapp mr-1"></i> Data Wali & Kontak Darurat
                    </h6>
                    <div class="alert alert-light-success text-xs mb-3 border-0">
                        <i class="fas fa-info-circle mr-1"></i> Isikan data wali jika siswa tidak tinggal bersama orang tua, atau <b>isikan ulang data Ayah/Ibu di sini</b> sebagai kontak utama untuk menerima tagihan & notifikasi.
                    </div>
                    
                    <div class="form-row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-xs font-weight-bold text-muted">Nama Wali / Penanggung Jawab <span class="text-danger">*</span></label>
                            <input type="text" name="nama_wali" class="form-control form-control-solid border-success" value="{{ old('nama_wali') }}" placeholder="Contoh: Budi Santoso" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-xs font-weight-bold text-success">No. WhatsApp Wali <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text bg-success border-success text-white"><i class="fab fa-whatsapp"></i></span>
                                </div>
                                <input type="number" name="whatsapp_wali" class="form-control form-control-solid border-success" 
                                       placeholder="0812xxxx" value="{{ old('whatsapp_wali') }}" required>
                            </div>
                            @error('whatsapp_wali') <div class="text-danger text-xs mt-1">{{ $message }}</div> @enderror
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-xs font-weight-bold text-muted">Pekerjaan Wali</label>
                            <input type="text" name="pekerjaan_wali" class="form-control form-control-solid" value="{{ old('pekerjaan_wali') }}">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-xs font-weight-bold text-muted">Alamat Wali</label>
                            <input type="text" name="alamat_wali" class="form-control form-control-solid" value="{{ old('alamat_wali') }}">
                        </div>
                    </div>

                    {{-- 5. PENEMPATAN KELAS & SMART BILLING --}}
                    <h6 class="text-dark font-weight-bold text-uppercase text-xs mb-3 spacing-1 border-bottom pb-2 mt-4">
                        <i class="fas fa-cogs mr-1"></i> Sistem & Penempatan
                    </h6>

                    <div class="form-row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-xs font-weight-bold text-muted">Sekolah Penempatan <span class="text-danger">*</span></label>
                            @if(isset($sekolahs) && $sekolahs->count() > 1)
                                <select name="sekolah_id" id="sekolah_id" class="form-control select2-bs4" required>
                                    <option value="">-- Pilih Sekolah --</option>
                                    @foreach($sekolahs as $s)
                                        <option value="{{ $s->id }}" {{ old('sekolah_id') == $s->id ? 'selected' : '' }}>
                                            {{ $s->nama_sekolah }}
                                        </option>
                                    @endforeach
                                </select>
                            @else
                                <input type="hidden" name="sekolah_id" id="sekolah_id" value="{{ $sekolahs->first()->id ?? '' }}">
                                <input type="text" class="form-control form-control-solid bg-light" value="{{ $sekolahs->first()->nama_sekolah ?? 'Sekolah Default' }}" readonly>
                            @endif
                        </div>

                        <div class="col-md-6 mb-3">
                            <label class="form-label text-xs font-weight-bold text-muted">Kelas Tujuan <span class="text-danger">*</span></label>
                            <select name="kelas_id" id="kelas_id" class="form-control select2-bs4" required>
                                <option value="">-- Pilih Sekolah Dulu --</option>
                                @if(isset($kelas) && $kelas->count() > 0)
                                    @foreach($kelas as $k)
                                        <option value="{{ $k->id }}" {{ old('kelas_id') == $k->id ? 'selected' : '' }}>
                                            {{ $k->nama_kelas }}
                                        </option>
                                    @endforeach
                                @endif
                            </select>
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="col-md-12 mb-3">
                            <label class="form-label text-xs font-weight-bold text-muted">Kategori Keuangan (Smart Billing)</label>
                            <select name="kategori_keuangan_id" class="form-control select2-bs4">
                                <option value="">-- Standar (Siswa Reguler / Tanpa Kategori Khusus) --</option>
                                @if(isset($kategoriKeuangan))
                                    @foreach($kategoriKeuangan as $kat)
                                        <option value="{{ $kat->id }}" {{ old('kategori_keuangan_id') == $kat->id ? 'selected' : '' }}>
                                            {{ $kat->nama_kategori }}
                                        </option>
                                    @endforeach
                                @endif
                            </select>
                            <small class="text-info mt-1 d-block">
                                <i class="fas fa-magic mr-1"></i> Biarkan <i>default</i> jika siswa ini reguler. Pilih kategori jika siswa mendapat potongan khusus.
                            </small>
                        </div>
                    </div>

                    <div class="form-row mt-2">
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-xs font-weight-bold text-muted">Hubungkan Akun Ortu (App Login)</label>
                            <select name="orangtua_ids[]" class="form-control select2-multiple" multiple="multiple">
                                @if(isset($orangtuas))
                                    @foreach($orangtuas as $ortu)
                                        <option value="{{ $ortu->id }}" {{ collect(old('orangtua_ids'))->contains($ortu->id) ? 'selected' : '' }}>
                                            {{ $ortu->name }} ({{ $ortu->email }})
                                        </option>
                                    @endforeach
                                @endif
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-xs font-weight-bold text-primary">Kartu RFID (Scan Disini)</label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text bg-primary border-primary text-white"><i class="fas fa-wifi"></i></span>
                                </div>
                                <input type="text" name="rfid_uid" id="rfid_uid" class="form-control form-control-solid border-primary text-primary font-weight-bold" 
                                       placeholder="Tap Kartu..." value="{{ old('rfid_uid') }}" autocomplete="off">
                            </div>
                        </div>
                    </div>

                </div>

                {{-- FOOTER --}}
                <div class="card-footer bg-light border-0 text-right py-3 pr-4">
                    <button type="button" class="btn btn-link text-muted mr-3" onclick="history.back()">Batal</button>
                    <button type="submit" class="btn btn-apex-purple px-5 rounded-pill font-weight-bold shadow-sm hover-lift">
                        <i class="fas fa-save mr-2"></i> Simpan Buku Induk
                    </button>
                </div>

            </div>
        </div>
    </div>
</form>
@stop

@section('css')
<style>
    /* 1. Form Control Solid (Modern Look) */
    .form-control-solid { 
        background-color: #F5F8FA; 
        border: 1px solid #E4E6EF; 
        color: #5E6278; 
        border-radius: 8px; 
        height: 45px; 
        font-size: 0.95rem;
        padding: 0.5rem 1rem;
    }
    .form-control-solid:focus { 
        background-color: #EEF3F7; 
        border-color: #B5B5C3; 
        box-shadow: none;
    }
    
    /* 2. Select2 Tweaks untuk Height Presisi */
    .select2-container--bootstrap4 .select2-selection--single {
        height: 45px !important;
        padding-top: 8px;
        background-color: #F5F8FA !important;
        border: 1px solid #E4E6EF !important;
        border-radius: 8px !important;
    }
    .select2-container--default .select2-selection--multiple {
        min-height: 45px;
        background-color: #F5F8FA;
        border: 1px solid #E4E6EF;
        border-radius: 8px;
    }

    /* 3. Text & Spacing */
    .text-purple { color: #5B247A !important; }
    .spacing-1 { letter-spacing: 0.5px; }
    .bg-light-success { background-color: #e8fff3 !important; }
    
    /* 4. Button Upload Foto Presisi */
    .btn-upload-icon {
        position: absolute; 
        bottom: 5px; 
        right: 5px; 
        width: 40px; 
        height: 40px; 
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 50%; 
        display: flex; 
        align-items: center; 
        justify-content: center; 
        cursor: pointer;
        transition: transform 0.2s;
    }
    .btn-upload-icon:hover { transform: scale(1.1); }

    /* 5. Tombol Simpan Gradient */
    .btn-apex-purple {
        background: linear-gradient(90deg, #2E1451 0%, #5B247A 100%);
        color: white; border: none; transition: all 0.3s ease;
    }
    .btn-apex-purple:hover {
        background: linear-gradient(90deg, #5B247A 0%, #2E1451 100%);
        color: white; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(91, 36, 122, 0.3);
    }
    .hover-lift:hover { transform: translateY(-2px); transition: all 0.2s; }
</style>
@stop

@section('js')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
    $(document).ready(function() {
        
        // ===============================================
        // 1. AUTO-FILL TAHUN MASUK DARI TANGGAL MASUK
        // ===============================================
        $('input[name="tanggal_masuk"]').on('change', function() {
            let tanggal = $(this).val(); // Format default input date: YYYY-MM-DD
            if (tanggal) {
                // Ambil bagian tahun saja (4 digit pertama sebelum tanda strip '-')
                let tahun = tanggal.split('-')[0]; 
                
                // Masukkan otomatis ke kolom tahun_masuk
                $('input[name="tahun_masuk"]').val(tahun);
                
                // Tambahkan efek kilat (highlight) agar Admin sadar datanya terisi otomatis
                $('input[name="tahun_masuk"]').css('background-color', '#e8fff3');
                setTimeout(() => {
                    $('input[name="tahun_masuk"]').css('background-color', '#F5F8FA'); // Kembali ke warna solid form
                }, 800);
            }
        });

        // ===============================================
        // 2. LOGIKA PREVIEW FOTO & VALIDASI UKURAN (MAX 2MB)
        // ===============================================
        $('#foto_url').on('change', function(event) {
            var file = event.target.files[0];
            
            if (file) {
                // A. Validasi Tipe File
                if (!file.type.match('image.*')) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Format Tidak Valid!',
                        text: 'Silakan pilih file berupa gambar (JPG / PNG / WEBP).',
                        confirmButtonColor: '#5B247A'
                    });
                    $(this).val(''); 
                    return;
                }

                // B. Validasi Ukuran File (Maksimal 2 MB = 2097152 Bytes)
                var maxSize = 2 * 1024 * 1024; 
                if (file.size > maxSize) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Ukuran Foto Terlalu Besar!',
                        text: 'Maksimal ukuran foto adalah 2 MB. Silakan kecilkan (kompres) foto Anda terlebih dahulu.',
                        confirmButtonColor: '#5B247A'
                    });
                    $(this).val(''); 
                    return;
                }

                // C. Preview Foto
                var reader = new FileReader();
                reader.onload = function(e) { 
                    $('#preview-foto').attr('src', e.target.result); 
                }
                reader.readAsDataURL(file);
            }
        });

        // ===============================================
        // 3. INIT SELECT2 & AJAX KELAS
        // ===============================================
        try {
            $('.select2-bs4').select2({ theme: 'bootstrap4', width: '100%' });
            $('.select2-multiple').select2({ theme: 'default', placeholder: "Pilih Orang Tua..." });
        } catch (e) {
            console.warn("Select2 gagal dimuat.");
        }

        const sekolahSelect = $('#sekolah_id');
        const kelasSelect = $('#kelas_id');
        const currentKelasId = "{{ old('kelas_id', $siswa->kelas_id ?? '') }}";

        function loadKelas(sekolahId, selectedId = null) {
            if (!sekolahId) return;

            kelasSelect.empty().append('<option value="">Memuat data...</option>').prop('disabled', true);

            let url = "{{ route('ajax.kelas', ':id') }}";
            url = url.replace(':id', sekolahId);

            $.ajax({
                url: url,
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    kelasSelect.empty().append('<option value="">-- Pilih Kelas --</option>');
                    if (data.length > 0) {
                        $.each(data, function(key, value) {
                            let isSelected = (value.id == selectedId) ? 'selected' : '';
                            kelasSelect.append('<option value="' + value.id + '" '+ isSelected +'>' + value.nama_kelas + '</option>');
                        });
                        kelasSelect.prop('disabled', false);
                    } else {
                        kelasSelect.append('<option value="">Tidak ada kelas di sekolah ini</option>');
                    }
                },
                error: function() {
                    kelasSelect.empty().append('<option value="">Gagal memuat data kelas</option>');
                }
            });
        }

        sekolahSelect.on('change', function() { loadKelas($(this).val()); });

        if(kelasSelect.children('option').length <= 1 && sekolahSelect.val()) {
             loadKelas(sekolahSelect.val(), currentKelasId);
        }

        // ===============================================
        // 4. EFEK LOADING SAAT DISIMPAN (MENCEGAH SPAM KLIK)
        // ===============================================
        $('form').on('submit', function() {
            let btnSubmit = $(this).find('button[type="submit"]');
            
            btnSubmit.html('<i class="fas fa-circle-notch fa-spin mr-2"></i> Memproses Data...');
            btnSubmit.prop('disabled', true);
            btnSubmit.css('opacity', '0.8');
        });

        // ===============================================
        // 5. ANTI SUBMIT SAAT SCAN RFID
        // ===============================================
        $('#rfid_uid').on('keypress', function(e) {
            if(e.which == 13) { 
                e.preventDefault(); 
                Swal.fire({
                    toast: true,
                    position: 'top-end',
                    icon: 'success',
                    title: 'Kartu RFID Terbaca!',
                    showConfirmButton: false,
                    timer: 1500
                });
            }
        });
        
    });
</script>
@stop