@extends('layouts.app')

@section('title', 'Formulir PMBM | MTsN 2 Pekanbaru')

@section('css')
<style>
    .card-modern { border-radius: 20px; border: 1px solid #e2e8f0; background: #ffffff; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); overflow: hidden; }
    .nav-tabs-clean { border-bottom: 2px solid #f1f5f9; gap: 10px; padding: 0 20px; background: #f8fafc; }
    .nav-tabs-clean .nav-link { border: none; color: #94a3b8; font-weight: 600; padding: 18px 15px; transition: 0.3s; font-size: 0.9rem; position: relative; }
    .nav-tabs-clean .nav-link.active { color: #059669; background: transparent; }
    .nav-tabs-clean .nav-link.active::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 3px; background: #059669; border-radius: 10px; }
    
    .form-group label { font-weight: 700; color: #334155; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; display: block; }
    .form-control-modern { border-radius: 10px; border: 1.5px solid #e2e8f0; padding: 12px 15px; font-size: 0.95rem; transition: all 0.2s ease; width: 100%; background-color: #fff; }
    .form-control-modern:focus { border-color: #059669; box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.08); outline: none; }
    .form-control-modern:disabled { background-color: #f1f5f9; color: #64748b; cursor: not-allowed; }
    
    .section-label { font-size: 0.75rem; font-weight: 800; color: #059669; letter-spacing: 1.5px; display: flex; align-items: center; gap: 15px; margin: 2.5rem 0 1.5rem; }
    .section-label span { height: 1px; flex-grow: 1; background: #e2e8f0; }

    .btn-save-data { background: #059669; color: white; border-radius: 12px; padding: 12px 30px; font-weight: 700; border: none; transition: 0.3s; width: 100%; }
    .btn-save-data:hover { background: #047857; transform: translateY(-2px); }
    .btn-edit-data { background: #f59e0b; color: white; border-radius: 12px; padding: 12px 30px; font-weight: 700; border: none; transition: 0.3s; width: 100%; }
    .btn-edit-data:hover { background: #d97706; transform: translateY(-2px); }
    .input-group-text { border-radius: 10px 0 0 10px; border: 1.5px solid #e2e8f0; border-right: none; }
</style>
@endsection

@section('content')
<div class="content-header px-4">
    <div class="container-fluid">
        <h1 class="font-weight-800 text-dark">Formulir PMBM MTsN 2 Pekanbaru</h1>
        <p class="text-muted">Pastikan seluruh data terisi dengan benar sesuai dokumen asli.</p>
    </div>
</div>

<section class="content px-4 pb-5">
    <div class="container-fluid">
        <div class="card-modern">
            <div class="card-header p-0 border-0">
                <ul class="nav nav-tabs nav-tabs-clean" id="custom-tabs-four-tab" role="tablist">
                    <li class="nav-item"><a class="nav-link active" data-toggle="pill" href="#siswa">Data Siswa & Fisik</a></li>
                    <li class="nav-item"><a class="nav-link" data-toggle="pill" href="#ortu">Orang Tua & Wali</a></li>
                    <li class="nav-item"><a class="nav-link" data-toggle="pill" href="#hobi">Pendidikan & Kegemaran</a></li>
                </ul>
            </div>

            <div class="card-body p-lg-5">
                <div class="tab-content">
                    
                    {{-- TAB 1: DATA SISWA --}}
                    <div class="tab-pane fade show active" id="siswa">
                        @php $lockedSiswa = isset($data_siswa); @endphp
                        <form action="{{ route('user.datadiri.store_siswa') }}" method="POST" enctype="multipart/form-data" class="form-lockable">
                            @csrf
                            {{-- Input Foto --}}
                            <div class="col-md-12 mb-4">
                                <div class="form-group">
                                    <label>Pas Foto Calon Siswa (Terbaru)</label>
                                    <div class="d-flex align-items-center gap-3">
                                        <div class="preview-container mb-2" style="width: 120px; height: 150px; border: 2px dashed #cbd5e1; border-radius: 10px; overflow: hidden; background: #f8fafc; display: flex; align-items: center; justify-content: center;">
                                            @if(isset($data_siswa) && $data_siswa->foto)
                                                <img id="imgPreview" src="{{ asset('storage/' . $data_siswa->foto) }}" style="width: 100%; height: 100%; object-fit: cover;">
                                                <i id="placeholderIcon" class="fas fa-user-circle fa-4x text-muted" style="display: none;"></i>
                                            @else
                                                <img id="imgPreview" src="#" style="width: 100%; height: 100%; object-fit: cover; display: none;">
                                                <i id="placeholderIcon" class="fas fa-user-circle fa-4x text-muted"></i>
                                            @endif
                                        </div>
                                        <div class="flex-grow-1 ml-3">
                                            <input type="file" name="foto" class="form-control-modern" id="inputFoto" accept="image/*" {{ $lockedSiswa ? 'disabled' : '' }} onchange="previewImage(this)">
                                            <small class="text-muted d-block mt-2">Format: JPG/PNG, Maks: 2MB. Background Merah disarankan.</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="section-label">I. DATA SISWA <span></span></div>
                            <div class="row">
                                <div class="col-md-12 mb-3">
                                    <div class="form-group">
                                        <label>NISN <small class="text-danger">(10 Digit Angka)</small></label>
                                        <input type="text" name="nisn" class="form-control-modern" value="{{ $data_siswa->nisn ?? '' }}" required maxlength="10" minlength="10" oninput="this.value = this.value.replace(/[^0-9]/g, '')" {{ $lockedSiswa ? 'disabled' : '' }}>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>1a. Nama Lengkap</label>
                                        <input type="text" name="nama_lengkap" class="form-control-modern" value="{{ $data_siswa->nama_lengkap ?? Auth::user()->name }}" required {{ $lockedSiswa ? 'disabled' : '' }}>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group"><label>1b. Nama Panggilan</label><input type="text" name="nama_panggilan" class="form-control-modern" value="{{ $data_siswa->nama_panggilan ?? '' }}" {{ $lockedSiswa ? 'disabled' : '' }}></div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label>2. Jenis Kelamin</label>
                                        <select name="jenis_kelamin" class="form-control-modern" required {{ $lockedSiswa ? 'disabled' : '' }}>
                                            <option value="">Pilih...</option>
                                            <option value="L" {{ ($data_siswa->jenis_kelamin ?? '') == 'L' ? 'selected' : '' }}>Laki-laki</option>
                                            <option value="P" {{ ($data_siswa->jenis_kelamin ?? '') == 'P' ? 'selected' : '' }}>Perempuan</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group"><label>3. Tempat Lahir</label><input type="text" name="tempat_lahir" class="form-control-modern" value="{{ $data_siswa->tempat_lahir ?? '' }}" required {{ $lockedSiswa ? 'disabled' : '' }}></div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group"><label>4. Tanggal Lahir</label><input type="date" name="tanggal_lahir" class="form-control-modern" value="{{ $data_siswa->tanggal_lahir ?? '' }}" required {{ $lockedSiswa ? 'disabled' : '' }}></div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group"><label>5. Anak Ke -</label><input type="number" name="anak_ke" class="form-control-modern" value="{{ $data_siswa->anak_ke ?? '' }}" required {{ $lockedSiswa ? 'disabled' : '' }}></div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group"><label>6. Jumlah Saudara</label><input type="number" name="jumlah_saudara" class="form-control-modern" value="{{ $data_siswa->jumlah_saudara ?? '' }}" required {{ $lockedSiswa ? 'disabled' : '' }}></div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label>7. Status Yatim/Piatu</label>
                                        <select name="status_yatim" class="form-control-modern" required {{ $lockedSiswa ? 'disabled' : '' }}>
                                            <option value="Tidak" {{ ($data_siswa->status_yatim ?? '') == 'Tidak' ? 'selected' : '' }}>Tidak</option>
                                            <option value="Yatim" {{ ($data_siswa->status_yatim ?? '') == 'Yatim' ? 'selected' : '' }}>Yatim</option>
                                            <option value="Piatu" {{ ($data_siswa->status_yatim ?? '') == 'Piatu' ? 'selected' : '' }}>Piatu</option>
                                            <option value="Yatim Piatu" {{ ($data_siswa->status_yatim ?? '') == 'Yatim Piatu' ? 'selected' : '' }}>Yatim Piatu</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group"><label>8. Bahasa Sehari-hari</label><input type="text" name="bahasa_harian" class="form-control-modern" value="{{ $data_siswa->bahasa_harian ?? 'Indonesia' }}" required {{ $lockedSiswa ? 'disabled' : '' }}></div>
                                </div>
                            </div>

                            <div class="section-label">II. KETERANGAN TEMPAT TINGGAL <span></span></div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group"><label>9. Alamat Jalan</label><textarea name="alamat" class="form-control-modern" rows="2" required {{ $lockedSiswa ? 'disabled' : '' }}>{{ $data_siswa->alamat ?? '' }}</textarea></div>
                                </div>
                                <div class="col-md-2 col-6">
                                    <div class="form-group"><label>RT</label><input type="text" name="rt" class="form-control-modern" value="{{ $data_siswa->rt ?? '' }}" required {{ $lockedSiswa ? 'disabled' : '' }}></div>
                                </div>
                                <div class="col-md-2 col-6">
                                    <div class="form-group"><label>RW</label><input type="text" name="rw" class="form-control-modern" value="{{ $data_siswa->rw ?? '' }}" required {{ $lockedSiswa ? 'disabled' : '' }}></div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group"><label>Kelurahan</label><input type="text" name="kelurahan" class="form-control-modern" value="{{ $data_siswa->kelurahan ?? '' }}" required {{ $lockedSiswa ? 'disabled' : '' }}></div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group"><label>Kecamatan</label><input type="text" name="kecamatan" class="form-control-modern" value="{{ $data_siswa->kecamatan ?? '' }}" required {{ $lockedSiswa ? 'disabled' : '' }}></div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group"><label>Kab/Kota</label><input type="text" name="kota_kab" class="form-control-modern" value="{{ $data_siswa->kota_kab ?? '' }}" required {{ $lockedSiswa ? 'disabled' : '' }}></div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group"><label>10. No WA Aktif</label><input type="text" name="no_hp" class="form-control-modern" value="{{ $data_siswa->no_hp ?? '' }}" required oninput="this.value = this.value.replace(/[^0-9]/g, '')" {{ $lockedSiswa ? 'disabled' : '' }}></div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group"><label>11. Jarak ke Madrasah (KM)</label><input type="number" name="jarak" class="form-control-modern" value="{{ $data_siswa->jarak ?? '' }}" required {{ $lockedSiswa ? 'disabled' : '' }}></div>
                                </div>
                            </div>

                            <div class="section-label">III. KETERANGAN KESEHATAN <span></span></div>
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label>12. Golongan Darah</label>
                                        <select name="gol_darah" class="form-control-modern" required {{ $lockedSiswa ? 'disabled' : '' }}>
                                            <option value="">Pilih...</option>
                                            <option value="A" {{ ($data_siswa->gol_darah ?? '') == 'A' ? 'selected' : '' }}>A</option>
                                            <option value="B" {{ ($data_siswa->gol_darah ?? '') == 'B' ? 'selected' : '' }}>B</option>
                                            <option value="AB" {{ ($data_siswa->gol_darah ?? '') == 'AB' ? 'selected' : '' }}>AB</option>
                                            <option value="O" {{ ($data_siswa->gol_darah ?? '') == 'O' ? 'selected' : '' }}>O</option>
                                            {{-- PERBAIKAN: Ubah value="Belum Tahu" menjadi value="-" --}}
                                            <option value="-" {{ ($data_siswa->gol_darah ?? '') == '-' ? 'selected' : '' }}>Belum Tahu / Cek</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group"><label>13. Penyakit Pernah Diderita</label><input type="text" name="penyakit" class="form-control-modern" placeholder="Isi '-' jika tidak ada" value="{{ $data_siswa->penyakit ?? '' }}" required {{ $lockedSiswa ? 'disabled' : '' }}></div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group"><label>14. Kelainan Jasmani</label><input type="text" name="kelainan" class="form-control-modern" placeholder="Isi '-' jika tidak ada" value="{{ $data_siswa->kelainan ?? '' }}" required {{ $lockedSiswa ? 'disabled' : '' }}></div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group"><label>15. Tinggi Badan (cm)</label><input type="number" name="tinggi" class="form-control-modern" value="{{ $data_siswa->tinggi ?? '' }}" required {{ $lockedSiswa ? 'disabled' : '' }}></div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group"><label>16. Berat Badan (kg)</label><input type="number" name="berat" class="form-control-modern" value="{{ $data_siswa->berat ?? '' }}" required {{ $lockedSiswa ? 'disabled' : '' }}></div>
                                </div>
                            </div>
                            <div class="mt-4">
                                @if($lockedSiswa)
                                    <button type="button" class="btn-edit-data" onclick="unlockForm(this)"><i class="fas fa-edit mr-2"></i> EDIT DATA SISWA</button>
                                    <button type="submit" class="btn-save-data d-none"><i class="fas fa-save mr-2"></i> SIMPAN PERUBAHAN SISWA</button>
                                @else
                                    <button type="submit" class="btn-save-data">SIMPAN DATA BAGIAN I-III</button>
                                @endif
                            </div>
                        </form>
                    </div>

                    {{-- TAB 2: DATA ORANG TUA & WALI --}}
                    <div class="tab-pane fade" id="ortu">
                        @php $lockedOrtu = isset($data_ortu); @endphp
                        <form action="{{ route('user.datadiri.store_ortu') }}" method="POST" class="form-lockable" onsubmit="return validateNikOrtu()">
                            @csrf
                            <div class="row">
                                {{-- IV. DATA AYAH --}}
                                <div class="col-md-6 border-right pr-4">
                                    <div class="section-label">IV. DATA AYAH <span></span></div>
                                    <div class="form-group"><label>17. Nama Lengkap Ayah</label><input type="text" name="nama_ayah" class="form-control-modern" value="{{ $data_ortu->nama_ayah ?? '' }}" required {{ $lockedOrtu ? 'disabled' : '' }}></div>
                                    <div class="row">
                                        <div class="col-md-6"><div class="form-group"><label>18. Tempat Lahir</label><input type="text" name="tempat_lahir_ayah" class="form-control-modern" value="{{ $data_ortu->tempat_lahir_ayah ?? '' }}" required {{ $lockedOrtu ? 'disabled' : '' }}></div></div>
                                        <div class="col-md-6"><div class="form-group"><label>19. Tanggal Lahir</label><input type="date" name="tgl_lahir_ayah" class="form-control-modern" value="{{ $data_ortu->tgl_lahir_ayah ?? '' }}" required {{ $lockedOrtu ? 'disabled' : '' }}></div></div>
                                    </div>
                                    <div class="form-group">
                                        <label>NIK Ayah <small class="text-danger">(16 Digit Angka)</small></label>
                                        <input type="text" name="nik_ayah" id="nik_ayah" class="form-control-modern" value="{{ $data_ortu->nik_ayah ?? '' }}" required maxlength="16" minlength="16" oninput="this.value = this.value.replace(/[^0-9]/g, '')" {{ $lockedOrtu ? 'disabled' : '' }}>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>20. Pendidikan</label>
                                                <select name="pendidikan_ayah" class="form-control-modern" required {{ $lockedOrtu ? 'disabled' : '' }}>
                                                    @foreach(['SD','SMP','SMA','D1/D2/D3','S1','S2/S3', 'Tidak Sekolah'] as $p)
                                                        <option value="{{ $p }}" {{ ($data_ortu->pendidikan_ayah ?? '') == $p ? 'selected' : '' }}>{{ $p }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>21. Pekerjaan</label>
                                                <select name="pekerjaan_ayah" class="form-control-modern" required {{ $lockedOrtu ? 'disabled' : '' }}>
                                                    @foreach(['PNS','TNI','POLRI','Karyawan BUMN/BUMD','Pegawai Swasta','Wiraswasta', 'Petani', 'Nelayan', 'Buruh', 'Lainnya', 'Meninggal Dunia'] as $pkj)
                                                        <option value="{{ $pkj }}" {{ ($data_ortu->pekerjaan_ayah ?? '') == $pkj ? 'selected' : '' }}>{{ $pkj }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label>22. Penghasilan Per Bulan</label>
                                        <div class="input-group">
                                            <div class="input-group-prepend"><span class="input-group-text bg-light">Rp</span></div>
                                            <input type="text" class="form-control-modern rupiah-input" style="border-radius: 0 10px 10px 0;" value="{{ $data_ortu->gaji_ayah ?? '' }}" {{ $lockedOrtu ? 'disabled' : '' }} required>
                                            <input type="hidden" name="gaji_ayah" class="rupiah-hidden" value="{{ $data_ortu->gaji_ayah ?? '' }}">
                                        </div>
                                    </div>
                                    <div class="form-group"><label>23. Alamat Ayah</label><textarea name="alamat_ayah" class="form-control-modern" rows="2" required {{ $lockedOrtu ? 'disabled' : '' }}>{{ $data_ortu->alamat_ayah ?? '' }}</textarea></div>
                                    <div class="form-group"><label>24. No WA Ayah</label><input type="text" name="hp_ayah" class="form-control-modern" value="{{ $data_ortu->hp_ayah ?? '' }}" required oninput="this.value = this.value.replace(/[^0-9]/g, '')" {{ $lockedOrtu ? 'disabled' : '' }}></div>
                                </div>

                                {{-- V. DATA IBU --}}
                                <div class="col-md-6 pl-4">
                                    <div class="section-label">V. DATA IBU <span></span></div>
                                    <div class="form-group"><label>25. Nama Lengkap Ibu</label><input type="text" name="nama_ibu" class="form-control-modern" value="{{ $data_ortu->nama_ibu ?? '' }}" required {{ $lockedOrtu ? 'disabled' : '' }}></div>
                                    <div class="row">
                                        <div class="col-md-6"><div class="form-group"><label>26. Tempat Lahir</label><input type="text" name="tempat_lahir_ibu" class="form-control-modern" value="{{ $data_ortu->tempat_lahir_ibu ?? '' }}" required {{ $lockedOrtu ? 'disabled' : '' }}></div></div>
                                        <div class="col-md-6"><div class="form-group"><label>27. Tanggal Lahir</label><input type="date" name="tgl_lahir_ibu" class="form-control-modern" value="{{ $data_ortu->tgl_lahir_ibu ?? '' }}" required {{ $lockedOrtu ? 'disabled' : '' }}></div></div>
                                    </div>
                                    <div class="form-group">
                                        <label>NIK Ibu <small class="text-danger">(16 Digit Angka)</small></label>
                                        <input type="text" name="nik_ibu" id="nik_ibu" class="form-control-modern" value="{{ $data_ortu->nik_ibu ?? '' }}" required maxlength="16" minlength="16" oninput="this.value = this.value.replace(/[^0-9]/g, '')" {{ $lockedOrtu ? 'disabled' : '' }}>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group"><label>28. Pendidikan</label>
                                                <select name="pendidikan_ibu" class="form-control-modern" required {{ $lockedOrtu ? 'disabled' : '' }}>
                                                    @foreach(['SD','SMP','SMA','D1/D2/D3','S1','S2/S3', 'Tidak Sekolah'] as $p)
                                                        <option value="{{ $p }}" {{ ($data_ortu->pendidikan_ibu ?? '') == $p ? 'selected' : '' }}>{{ $p }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group"><label>29. Pekerjaan</label>
                                                <select name="pekerjaan_ibu" class="form-control-modern" required {{ $lockedOrtu ? 'disabled' : '' }}>
                                                    @foreach(['Ibu Rumah Tangga','PNS','TNI','POLRI','Karyawan BUMN/BUMD','Pegawai Swasta','Wiraswasta', 'Petani', 'Lainnya', 'Meninggal Dunia'] as $pkj)
                                                        <option value="{{ $pkj }}" {{ ($data_ortu->pekerjaan_ibu ?? '') == $pkj ? 'selected' : '' }}>{{ $pkj }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label>30. Penghasilan Per Bulan</label>
                                        <div class="input-group">
                                            <div class="input-group-prepend"><span class="input-group-text bg-light">Rp</span></div>
                                            <input type="text" class="form-control-modern rupiah-input" style="border-radius: 0 10px 10px 0;" value="{{ $data_ortu->gaji_ibu ?? '' }}" {{ $lockedOrtu ? 'disabled' : '' }} required>
                                            <input type="hidden" name="gaji_ibu" class="rupiah-hidden" value="{{ $data_ortu->gaji_ibu ?? '' }}">
                                        </div>
                                    </div>
                                    <div class="form-group"><label>31. Alamat Ibu</label><textarea name="alamat_ibu" class="form-control-modern" rows="2" required {{ $lockedOrtu ? 'disabled' : '' }}>{{ $data_ortu->alamat_ibu ?? '' }}</textarea></div>
                                    <div class="form-group"><label>32. No WA Ibu</label><input type="text" name="hp_ibu" class="form-control-modern" value="{{ $data_ortu->hp_ibu ?? '' }}" required oninput="this.value = this.value.replace(/[^0-9]/g, '')" {{ $lockedOrtu ? 'disabled' : '' }}></div>
                                </div>
                            </div>

                            {{-- VI. KETERANGAN WALI BARU --}}
                            <div class="section-label">VI. KETERANGAN WALI (JIKA ADA) <span></span></div>
                            <div class="row">
                                <div class="col-md-12"><div class="form-group"><label>29. Nama</label><input type="text" name="nama_wali" class="form-control-modern" value="{{ $data_ortu->nama_wali ?? '' }}" {{ $lockedOrtu ? 'disabled' : '' }}></div></div>
                                
                                <div class="col-md-6"><div class="form-group"><label>30. Tempat Lahir</label><input type="text" name="tempat_lahir_wali" class="form-control-modern" value="{{ $data_ortu->tempat_lahir_wali ?? '' }}" {{ $lockedOrtu ? 'disabled' : '' }}></div></div>
                                <div class="col-md-6"><div class="form-group"><label>31. Tanggal Lahir</label><input type="date" name="tgl_lahir_wali" class="form-control-modern" value="{{ $data_ortu->tgl_lahir_wali ?? '' }}" {{ $lockedOrtu ? 'disabled' : '' }}></div></div>
                                
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>32. Pendidikan Terakhir</label>
                                        <select name="pendidikan_wali" class="form-control-modern" {{ $lockedOrtu ? 'disabled' : '' }}>
                                            <option value="">Pilih...</option>
                                            @foreach(['1. SD', '2. SLTP', '3. SMA', '4. D2', '5. D3', '6. S1', '7. S2', '8. S3'] as $p)
                                                <option value="{{ $p }}" {{ ($data_ortu->pendidikan_wali ?? '') == $p ? 'selected' : '' }}>{{ $p }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>33. Pekerjaan</label>
                                        <select name="pekerjaan_wali" class="form-control-modern" {{ $lockedOrtu ? 'disabled' : '' }}>
                                            <option value="">Pilih...</option>
                                            @foreach(['1. PNS', '2. TNI', '3. POLRI', '4. Pensiunan', '5. Buruh', '6. Sopir', '7. Swasta', '8. Petani', '9. Wiraswasta', '10. Tani'] as $pkj)
                                                <option value="{{ $pkj }}" {{ ($data_ortu->pekerjaan_wali ?? '') == $pkj ? 'selected' : '' }}>{{ $pkj }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>34. Penghasilan</label>
                                        <div class="input-group">
                                            <div class="input-group-prepend"><span class="input-group-text bg-light">Rp</span></div>
                                            <input type="text" class="form-control-modern rupiah-input" style="border-radius: 0 10px 10px 0;" value="{{ $data_ortu->gaji_wali ?? '' }}" {{ $lockedOrtu ? 'disabled' : '' }}>
                                            <input type="hidden" name="gaji_wali" class="rupiah-hidden" value="{{ $data_ortu->gaji_wali ?? '' }}">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6"><div class="form-group"><label>36. Nomor WA Aktif</label><input type="text" name="hp_wali" class="form-control-modern" value="{{ $data_ortu->hp_wali ?? '' }}" oninput="this.value = this.value.replace(/[^0-9]/g, '')" {{ $lockedOrtu ? 'disabled' : '' }}></div></div>

                                <div class="col-md-12"><label class="mb-2 mt-2" style="font-weight: 700; color: #334155; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px;">35. Alamat</label></div>
                                
                                {{-- Memecah UI menjadi RT, RW, Kel, Kec untuk mencocokkan gambar tanpa merusak database --}}
                                <div class="col-md-12"><div class="form-group"><input type="text" id="alamat_wali_jalan" class="form-control-modern" placeholder="Nama Jalan (Atau alamat utuh dari data lama)" {{ $lockedOrtu ? 'disabled' : '' }}></div></div>
                                <div class="col-md-3 col-6"><div class="form-group"><input type="text" id="alamat_wali_rt" class="form-control-modern" placeholder="RT" {{ $lockedOrtu ? 'disabled' : '' }}></div></div>
                                <div class="col-md-3 col-6"><div class="form-group"><input type="text" id="alamat_wali_rw" class="form-control-modern" placeholder="RW" {{ $lockedOrtu ? 'disabled' : '' }}></div></div>
                                <div class="col-md-6"><div class="form-group"><input type="text" id="alamat_wali_kel" class="form-control-modern" placeholder="Kel." {{ $lockedOrtu ? 'disabled' : '' }}></div></div>
                                <div class="col-md-6"><div class="form-group"><input type="text" id="alamat_wali_kec" class="form-control-modern" placeholder="Kec." {{ $lockedOrtu ? 'disabled' : '' }}></div></div>
                                <div class="col-md-6"><div class="form-group"><input type="text" id="alamat_wali_kab" class="form-control-modern" placeholder="Kab/Kota" {{ $lockedOrtu ? 'disabled' : '' }}></div></div>
                                
                                {{-- Hidden Input yang akan menyimpan alamat yang digabung untuk tabel DB Anda --}}
                                <input type="hidden" name="alamat_wali" id="alamat_wali_combined" value="{{ $data_ortu->alamat_wali ?? '' }}">
                            </div>

                            <div class="mt-4">
                                @if($lockedOrtu)
                                    <button type="button" class="btn-edit-data" onclick="unlockForm(this)"><i class="fas fa-edit mr-2"></i> EDIT DATA ORANG TUA</button>
                                    <button type="submit" class="btn-save-data d-none"><i class="fas fa-save mr-2"></i> SIMPAN PERUBAHAN ORTU</button>
                                @else
                                    <button type="submit" class="btn-save-data"><i class="fas fa-save mr-2"></i> SIMPAN DATA ORANG TUA & WALI</button>
                                @endif
                            </div>
                        </form>
                    </div>

                    {{-- TAB 3: PENDIDIKAN & KEGEMARAN --}}
                    <div class="tab-pane fade" id="hobi">
                        @php $lockedSekolah = isset($data_sekolah); @endphp
                        <form action="{{ route('user.datadiri.store_sekolah') }}" method="POST" class="form-lockable">
                            @csrf
                            
                            {{-- IV. KETERANGAN PENDIDIKAN (PENGGANTI DATA SEKOLAH ASAL) --}}
                            <div class="section-label">IV. KETERANGAN PENDIDIKAN <span></span></div>
                            <div class="row">
                                <div class="col-md-12"><div class="form-group"><label>17. Asal Sekolah/Madrasah</label><input type="text" name="asal_sekolah" class="form-control-modern" value="{{ $data_sekolah->asal_sekolah ?? '' }}" required {{ $lockedSekolah ? 'disabled' : '' }}></div></div>
                                
                                <div class="col-md-4"><div class="form-group"><label>18. Tanggal Ijazah</label><input type="date" name="tanggal_ijazah" class="form-control-modern" value="{{ $data_sekolah->tanggal_ijazah ?? '' }}" required {{ $lockedSekolah ? 'disabled' : '' }}></div></div>
                                
                                <div class="col-md-5"><div class="form-group"><label>19. Nomor Ijazah</label><input type="text" name="nomor_ijazah" class="form-control-modern" value="{{ $data_sekolah->nomor_ijazah ?? '' }}" required {{ $lockedSekolah ? 'disabled' : '' }}></div></div>
                                
                                <div class="col-md-3"><div class="form-group"><label>20. Lama Belajar (Tahun)</label><input type="number" name="lama_belajar" class="form-control-modern" placeholder="Contoh: 6" value="{{ $data_sekolah->lama_belajar ?? '' }}" required {{ $lockedSekolah ? 'disabled' : '' }}></div></div>
                                
                                {{-- 
                                    PENTING: Input tersembunyi untuk NPSN. 
                                    Di Controller Anda saat ini mewajibkan (required) input 'npsn'. 
                                    Untuk mencegah Error validasi, saya pasang nilai dummy/bawaan "00000000" sebagai bypass sementara.
                                --}}
                                <input type="hidden" name="npsn" value="{{ $data_sekolah->npsn_sekolah ?? '00000000' }}">
                            </div>

                            <div class="section-label">VII. KEGEMARAN (HOBI) <span></span></div>
                            <div class="row">
                                <div class="col-md-6"><div class="form-group"><label>37. Kesenian</label><input type="text" name="hobi_seni" class="form-control-modern" placeholder="Sebutkan, isi '-' jika tidak ada" value="{{ $data_siswa->hobi_seni ?? '' }}" required {{ $lockedSekolah ? 'disabled' : '' }}></div></div>
                                <div class="col-md-6"><div class="form-group"><label>38. Olahraga</label><input type="text" name="hobi_olahraga" class="form-control-modern" placeholder="Sebutkan, isi '-' jika tidak ada" value="{{ $data_siswa->hobi_olahraga ?? '' }}" required {{ $lockedSekolah ? 'disabled' : '' }}></div></div>
                                <div class="col-md-6"><div class="form-group"><label>39. Kemasyarakatan / Organisasi</label><input type="text" name="hobi_organisasi" class="form-control-modern" placeholder="Sebutkan, isi '-' jika tidak ada" value="{{ $data_siswa->hobi_organisasi ?? '' }}" required {{ $lockedSekolah ? 'disabled' : '' }}></div></div>
                                <div class="col-md-6"><div class="form-group"><label>40. Lain-lain</label><input type="text" name="hobi_lain" class="form-control-modern" placeholder="Sebutkan, isi '-' jika tidak ada" value="{{ $data_siswa->hobi_lain ?? '' }}" required {{ $lockedSekolah ? 'disabled' : '' }}></div></div>
                            </div>
                            <div class="mt-4">
                                @if($lockedSekolah)
                                    <button type="button" class="btn-edit-data" onclick="unlockForm(this)"><i class="fas fa-edit mr-2"></i> EDIT DATA PENDIDIKAN & HOBI</button>
                                    <button type="submit" class="btn-save-data d-none"><i class="fas fa-save mr-2"></i> SIMPAN PERUBAHAN PENDIDIKAN</button>
                                @else
                                    <button type="submit" class="btn-save-data">SIMPAN DATA AKHIR</button>
                                @endif
                            </div>
                        </form>
                    </div>

                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@section('js')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    function unlockForm(btn) {
        const form = btn.closest('form');
        const inputs = form.querySelectorAll('input, select, textarea');
        const saveBtn = form.querySelector('.btn-save-data');

        inputs.forEach(input => {
            input.disabled = false;
        });

        btn.classList.add('d-none');
        saveBtn.classList.remove('d-none');
        
        Swal.fire({
            icon: 'info',
            title: 'Mode Edit Aktif',
            text: 'Silakan ubah data dan klik simpan kembali.',
            timer: 1500,
            showConfirmButton: false
        });
    }

    // Fungsi Format Rupiah
    function formatRupiah(angka) {
        var number_string = angka.replace(/[^,\d]/g, '').toString(),
        split   = number_string.split(','),
        sisa    = split[0].length % 3,
        rupiah  = split[0].substr(0, sisa),
        ribuan  = split[0].substr(sisa).match(/\d{3}/gi);

        if(ribuan){
            separator = sisa ? '.' : '';
            rupiah += separator + ribuan.join('.');
        }

        rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah;
        return rupiah;
    }

    document.querySelectorAll('.rupiah-input').forEach(function(input) {
        if(input.value) {
            input.value = formatRupiah(input.value);
        }

        input.addEventListener('keyup', function(e) {
            this.value = formatRupiah(this.value);
            let hiddenInput = this.nextElementSibling;
            if(hiddenInput && hiddenInput.classList.contains('rupiah-hidden')) {
                hiddenInput.value = this.value.replace(/\./g, '');
            }
        });
    });

    function validateNikOrtu() {
        const nikAyah = document.getElementById('nik_ayah').value;
        const nikIbu = document.getElementById('nik_ibu').value;

        if(nikAyah && nikIbu && nikAyah === nikIbu) {
            Swal.fire({
                icon: 'error',
                title: 'Data NIK Invalid!',
                text: 'NIK Ayah dan NIK Ibu tidak boleh sama.'
            });
            return false;
        }
        return true;
    }

    // SCRIPT PENGGABUNGAN ALAMAT WALI OTOMATIS
    function initAlamatWali() {
        const combinedInput = document.getElementById('alamat_wali_combined');
        const jalanInput = document.getElementById('alamat_wali_jalan');
        
        // Memasukkan data lama ke form "Jalan" jika datanya tidak kosong
        if (combinedInput && combinedInput.value && jalanInput) {
            jalanInput.value = combinedInput.value;
        }

        const fields = ['jalan', 'rt', 'rw', 'kel', 'kec', 'kab'];
        fields.forEach(f => {
            const el = document.getElementById('alamat_wali_' + f);
            if(el) {
                el.addEventListener('input', function() {
                    let jalan = document.getElementById('alamat_wali_jalan').value;
                    let rt = document.getElementById('alamat_wali_rt').value;
                    let rw = document.getElementById('alamat_wali_rw').value;
                    let kel = document.getElementById('alamat_wali_kel').value;
                    let kec = document.getElementById('alamat_wali_kec').value;
                    let kab = document.getElementById('alamat_wali_kab').value;

                    let finalAlamat = jalan;
                    if(rt || rw) finalAlamat += `, RT ${rt}/RW ${rw}`;
                    if(kel) finalAlamat += `, Kel. ${kel}`;
                    if(kec) finalAlamat += `, Kec. ${kec}`;
                    if(kab) finalAlamat += `, Kab/Kota ${kab}`;

                    combinedInput.value = finalAlamat;
                });
            }
        });
    }

    document.querySelectorAll('.form-lockable').forEach(form => {
        form.addEventListener('submit', function(e) {
            const inputs = this.querySelectorAll('input, select, textarea');
            inputs.forEach(i => i.disabled = false);
        });
    });

    document.addEventListener('DOMContentLoaded', function() {
        initAlamatWali();
    });

    @if(session('success'))
        Swal.fire({ icon: 'success', title: 'Berhasil!', text: "{{ session('success') }}", confirmButtonColor: '#059669' });
    @endif
    
    @if(session('error'))
        Swal.fire({ icon: 'error', title: 'Gagal!', text: "{{ session('error') }}" });
    @endif

    @if ($errors->any())
        Swal.fire({
            icon: 'error',
            title: 'Gagal Menyimpan!',
            html: '<ul>' +
                @foreach ($errors->all() as $error)
                    '<li>{{ $error }}</li>' +
                @endforeach
                '</ul>',
        });
    @endif

    function previewImage(input) {
        const preview = document.getElementById('imgPreview');
        const icon = document.getElementById('placeholderIcon');
        
        if (input.files && input.files[0]) {
            const reader = new FileReader();
            reader.onload = function(e) {
                preview.src = e.target.result;
                preview.style.display = 'block';
                if(icon) icon.style.display = 'none';
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
</script>
@endsection