{% extends 'admin_master/base_admin_master.html' if session.get('role') == 'admin_master' else 'admin_database/base_admin_database.html' %}
{% set active_page = 'santri' %}

{% block page_title %}{{ 'Edit Santri' if data else 'Tambah Santri' }} - Admin Database{% endblock %}

{% block page_header %}
<div class="d-flex align-items-center gap-3">
    <a href="/admin_database/santri" class="btn btn-sm btn-white border border-light-subtle rounded-circle d-flex align-items-center justify-content-center text-muted" style="width: 32px; height: 32px; transition: all 0.2s;">
        <i class="fas fa-arrow-left"></i>
    </a>
    <div>
        <h5 class="mb-1 fw-bold" style="color: #1f2937; font-size: 1.25rem;">{{ 'Edit Data Santri' if data else 'Tambah Data Santri (Isi Satuan)' }}</h5>
        <small class="text-muted" style="font-size: 0.85rem;">Formulir pengisian data induk santri secara manual.</small>
    </div>
</div>
{% endblock %}

{% block content %}
<div class="bg-white p-4 p-md-5">
    <form method="POST" action="" class="needs-validation" enctype="multipart/form-data" novalidate>
        
        <!-- BAGIAN 1: IDENTITAS -->
        <div class="d-flex align-items-center mb-4">
            <div class="rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px; background-color: rgba(0, 104, 95, 0.1); color: #00685f;">
                <i class="fas fa-user"></i>
            </div>
            <h6 class="fw-bold mb-0" style="color: #1f2937; font-size: 1.1rem;">I. Identitas Santri</h6>
        </div>
        
        <div class="row g-4 mb-5 ms-1 ms-md-4">
            <div class="col-md-3">
                <label class="form-label text-muted fw-medium" style="font-size: 0.85rem;">ID Santri <span class="text-danger">*</span></label>
                <input type="text" class="form-control border-light-subtle rounded-3 bg-light px-3 py-2 custom-input" name="id_santri" value="{{ data.id_santri if data else '' }}" required placeholder="Contoh: SN001">
            </div>
            <div class="col-md-5">
                <label class="form-label text-muted fw-medium" style="font-size: 0.85rem;">Nama Lengkap <span class="text-danger">*</span></label>
                <input type="text" class="form-control border-light-subtle rounded-3 bg-light px-3 py-2 custom-input" name="nama_lengkap" value="{{ data.nama_lengkap if data else '' }}" required placeholder="Masukkan nama lengkap sesuai dokumen">
            </div>
            <div class="col-md-4">
                <label class="form-label text-muted fw-medium" style="font-size: 0.85rem;">Jenis Kelamin</label>
                <select class="form-select border-light-subtle rounded-3 bg-light px-3 py-2 custom-input" name="jenis_kelamin" required>
                    <option value="">Pilih Kelamin...</option>
                    <option value="Laki-laki" {% if data and data.jenis_kelamin in ['Laki-laki', 'L', 'Putra'] %}selected{% endif %}>Laki-laki (Putra)</option>
                    <option value="Perempuan" {% if data and data.jenis_kelamin in ['Perempuan', 'P', 'Putri'] %}selected{% endif %}>Perempuan (Putri)</option>
                </select>
            </div>
            
            <div class="col-md-4">
                <label class="form-label text-muted fw-medium" style="font-size: 0.85rem;">NIK <span class="text-danger">*</span></label>
                <input type="text" class="form-control border-light-subtle rounded-3 bg-light px-3 py-2 custom-input" name="nik" value="{{ data.nik if data else '' }}" required placeholder="16 Digit Nomor Induk Kependudukan" maxlength="16" minlength="16" pattern="\d{16}" oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 16);">
            </div>
            <div class="col-md-4">
                <label class="form-label text-muted fw-medium" style="font-size: 0.85rem;">NISN</label>
                <input type="text" class="form-control border-light-subtle rounded-3 bg-light px-3 py-2 custom-input" name="nisn" value="{{ data.nisn if data else '' }}" placeholder="Nomor Induk Siswa Nasional">
            </div>
            <div class="col-md-4">
                <label class="form-label text-muted fw-medium" style="font-size: 0.85rem;">NISM</label>
                <input type="text" class="form-control border-light-subtle rounded-3 bg-light px-3 py-2 custom-input" name="nism" value="{{ data.nism if data else '' }}" placeholder="Nomor Induk Siswa Madrasah">
            </div>
            
            <div class="col-md-6">
                <label class="form-label text-muted fw-medium" style="font-size: 0.85rem;">Tempat Lahir</label>
                <input type="text" class="form-control border-light-subtle rounded-3 bg-light px-3 py-2 custom-input" name="tempat_lahir" value="{{ data.tempat_lahir if data else '' }}" placeholder="Kota/Kabupaten kelahiran">
            </div>
            <div class="col-md-6">
                <label class="form-label text-muted fw-medium" style="font-size: 0.85rem;">Tanggal Lahir</label>
                <input type="date" class="form-control border-light-subtle rounded-3 bg-light px-3 py-2 custom-input" name="tanggal_lahir" value="{{ data.tanggal_lahir if data else '' }}">
            </div>
        </div>
        
        <hr class="border-light-subtle mb-5">

        <!-- BAGIAN 2: PENDIDIKAN & KEPESANTRENAN -->
        <div class="d-flex align-items-center mb-4">
            <div class="rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px; background-color: rgba(20, 184, 166, 0.1); color: #0d9488;">
                <i class="fas fa-graduation-cap"></i>
            </div>
            <h6 class="fw-bold mb-0" style="color: #1f2937; font-size: 1.1rem;">II. Pendidikan & Kepesantrenan</h6>
        </div>
        
        <div class="row g-4 mb-5 ms-1 ms-md-4">
            <div class="col-md-6">
                <label class="form-label text-muted fw-medium" style="font-size: 0.85rem;">Tingkat Kelas (Otomatis dari Master Data)</label>
                <select class="form-select border-light-subtle rounded-3 bg-light px-3 py-2 custom-input" name="tingkat_kelas">
                    <option value="">-- Pilih Kelas Saat Ini --</option>
                    {% for k in kelas %}
                    <option value="{{ k.id }}" {% if data and data.id_kelas == k.id %}selected{% endif %}>
                        {{ k.nama_kelas }} (Jenjang: {{ k.jenjang }} - Tingkat: {{ k.tingkat }})
                    </option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-6">
                <label class="form-label text-muted fw-medium" style="font-size: 0.85rem;">Penempatan Kamar & Asrama</label>
                <select class="form-select border-light-subtle rounded-3 bg-light px-3 py-2 custom-input" name="kamar">
                    <option value="">-- Pilih Kamar Saat Ini --</option>
                    {% for km in kamar %}
                    <option value="{{ km.id }}" {% if data and data.id_kamar == km.id %}selected{% endif %}>
                        {{ km.nama_kamar }} (Area: {{ km.jenis_kelamin }})
                    </option>
                    {% endfor %}
                </select>
            </div>
            
            <div class="col-md-6">
                <label class="form-label text-muted fw-medium" style="font-size: 0.85rem;">Status Mukim (Menetap)</label>
                <select class="form-select border-light-subtle rounded-3 bg-light px-3 py-2 custom-input" name="status_mukim">
                    <option value="Mukim" {% if data and data.status_mukim == 'Mukim' %}selected{% endif %}>Mukim (Menetap di Asrama)</option>
                    <option value="Tidak Mukim" {% if data and data.status_mukim == 'Tidak Mukim' %}selected{% endif %}>Tidak Mukim (Pulang Pergi / Ndlaju)</option>
                </select>
            </div>
            <div class="col-md-6">
                <label class="form-label text-muted fw-medium" style="font-size: 0.85rem;">Status Keaktifan Santri</label>
                <select class="form-select border-light-subtle rounded-3 bg-light px-3 py-2 custom-input" name="status_keaktifan">
                    <option value="Aktif" {% if data and data.status_keaktifan == 'Aktif' %}selected{% endif %}>Aktif Belajar</option>
                    <option value="Lulus" {% if data and data.status_keaktifan == 'Lulus' %}selected{% endif %}>Telah Lulus (Mutakhoorijin)</option>
                    <option value="Berhenti" {% if data and data.status_keaktifan == 'Berhenti' %}selected{% endif %}>Berhenti / Pindah</option>
                </select>
            </div>
        </div>

        <hr class="border-light-subtle mb-5">

        <!-- BAGIAN 3: ORANG TUA / WALI -->
        <div class="d-flex align-items-center mb-4">
            <div class="rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px; background-color: rgba(245, 158, 11, 0.1); color: #d97706;">
                <i class="fas fa-users"></i>
            </div>
            <h6 class="fw-bold mb-0" style="color: #1f2937; font-size: 1.1rem;">III. Informasi Keluarga</h6>
        </div>
        
        <div class="row g-4 mb-4 ms-1 ms-md-4">
            <div class="col-md-8">
                <label class="form-label text-muted fw-medium" style="font-size: 0.85rem;">Nama Ayah Kandung</label>
                <input type="text" class="form-control border-light-subtle rounded-3 bg-light px-3 py-2 custom-input" name="nama_ayah" value="{{ data.nama_ayah if data else '' }}" placeholder="Nama lengkap ayah">
            </div>
            <div class="col-md-4">
                <label class="form-label text-muted fw-medium" style="font-size: 0.85rem;">Status Ayah</label>
                <select class="form-select border-light-subtle rounded-3 bg-light px-3 py-2 custom-input" name="status_ayah">
                    <option value="Hidup" {% if data and data.status_ayah == 'Hidup' %}selected{% endif %}>Masih Hidup</option>
                    <option value="Meninggal" {% if data and data.status_ayah == 'Meninggal' %}selected{% endif %}>Meninggal Dunia</option>
                </select>
            </div>
            
            <div class="col-md-8">
                <label class="form-label text-muted fw-medium" style="font-size: 0.85rem;">Nama Ibu Kandung</label>
                <input type="text" class="form-control border-light-subtle rounded-3 bg-light px-3 py-2 custom-input" name="nama_ibu" value="{{ data.nama_ibu if data else '' }}" placeholder="Nama lengkap ibu">
            </div>
            <div class="col-md-4">
                <label class="form-label text-muted fw-medium" style="font-size: 0.85rem;">Status Ibu</label>
                <select class="form-select border-light-subtle rounded-3 bg-light px-3 py-2 custom-input" name="status_ibu">
                    <option value="Hidup" {% if data and data.status_ibu == 'Hidup' %}selected{% endif %}>Masih Hidup</option>
                    <option value="Meninggal" {% if data and data.status_ibu == 'Meninggal' %}selected{% endif %}>Meninggal Dunia</option>
                </select>
            </div>
            
            <div class="col-md-4">
                <label class="form-label text-muted fw-medium" style="font-size: 0.85rem;">Nama Wali (Jika Tidak Bersama Ortu)</label>
                <input type="text" class="form-control border-light-subtle rounded-3 bg-light px-3 py-2 custom-input" name="nama_wali" value="{{ data.nama_wali if data else '' }}" placeholder="Opsional">
            </div>
            <div class="col-md-4">
                <label class="form-label text-muted fw-medium" style="font-size: 0.85rem;">Nomor WhatsApp Keluarga</label>
                <div class="input-group">
                    <span class="input-group-text bg-light border-light-subtle text-muted rounded-start-3"><i class="fab fa-whatsapp"></i></span>
                    <input type="text" class="form-control border-light-subtle bg-light px-3 py-2 rounded-end-3 custom-input border-start-0" name="nomor_wa" value="{{ data.nomor_wa if data else '' }}" placeholder="Awali dengan 08/62">
                </div>
            </div>
            <div class="col-md-4">
                <label class="form-label text-muted fw-medium" style="font-size: 0.85rem;">No. Kartu Keluarga (KK)</label>
                <input type="text" class="form-control border-light-subtle rounded-3 bg-light px-3 py-2 custom-input" name="no_kk" value="{{ data.no_kk if data else '' }}" placeholder="16 Digit Nomor KK" maxlength="16" minlength="16" pattern="\d{16}" oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 16);">
            </div>
            
            <div class="col-md-3">
                <label class="form-label text-muted fw-medium" style="font-size: 0.85rem;">Provinsi</label>
                <select id="provinsi" class="form-select border-light-subtle rounded-3 bg-light px-3 py-2 custom-input" onchange="loadKabupaten(this.value)">
                    <option value="" disabled selected>Pilih Provinsi...</option>
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label text-muted fw-medium" style="font-size: 0.85rem;">Kabupaten/Kota</label>
                <select id="kabupaten" class="form-select border-light-subtle rounded-3 bg-light px-3 py-2 custom-input" onchange="loadKecamatan(this.value)" disabled>
                    <option value="" disabled selected>Pilih Kabupaten...</option>
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label text-muted fw-medium" style="font-size: 0.85rem;">Kecamatan</label>
                <select id="kecamatan" class="form-select border-light-subtle rounded-3 bg-light px-3 py-2 custom-input" onchange="loadDesa(this.value)" disabled>
                    <option value="" disabled selected>Pilih Kecamatan...</option>
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label text-muted fw-medium" style="font-size: 0.85rem;">Desa/Kelurahan</label>
                <select id="desa" class="form-select border-light-subtle rounded-3 bg-light px-3 py-2 custom-input" onchange="updateAlamat()" disabled>
                    <option value="" disabled selected>Pilih Desa...</option>
                </select>
            </div>
            
            <div class="col-md-6">
                <label class="form-label text-muted fw-medium" style="font-size: 0.85rem;">Dusun / Nama Jalan</label>
                <input type="text" id="dusun" class="form-control border-light-subtle rounded-3 bg-light px-3 py-2 custom-input" oninput="updateAlamat()" placeholder="Contoh: Dsn. Krajan / Jl. Mawar">
            </div>
            <div class="col-md-3">
                <label class="form-label text-muted fw-medium" style="font-size: 0.85rem;">RT</label>
                <input type="text" id="rt" class="form-control border-light-subtle rounded-3 bg-light px-3 py-2 custom-input" oninput="updateAlamat()" placeholder="Contoh: 001">
            </div>
            <div class="col-md-3">
                <label class="form-label text-muted fw-medium" style="font-size: 0.85rem;">RW</label>
                <input type="text" id="rw" class="form-control border-light-subtle rounded-3 bg-light px-3 py-2 custom-input" oninput="updateAlamat()" placeholder="Contoh: 002">
            </div>
            
            <div class="col-12 mt-2">
                <label class="form-label text-muted fw-medium" style="font-size: 0.85rem;">Alamat Lengkap (Pratinjau Hasil Gabungan)</label>
                <textarea id="alamat_lengkap" class="form-control border-light-subtle rounded-3 bg-light px-3 py-3 custom-input" name="alamat" rows="2" placeholder="Otomatis terisi dari pilihan form di atas, bisa Anda edit manual jika perlu..." readonly style="background-color: #f9fafb;">{{ data.alamat if data else '' }}</textarea>
            </div>
        </div>
        
        <!-- BAGIAN 3: BERKAS & DOKUMEN -->
        <div class="d-flex align-items-center mb-4 mt-5">
            <div class="rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px; background-color: rgba(245, 158, 11, 0.1); color: #d97706;">
                <i class="fas fa-file-alt"></i>
            </div>
            <h6 class="fw-bold mb-0" style="color: #1f2937; font-size: 1.1rem;">IV. Berkas & Dokumen Pendukung</h6>
        </div>

        <div class="row g-4 mb-5 ms-1 ms-md-4">
            <div class="col-md-6">
                <label class="form-label text-muted fw-medium" style="font-size: 0.85rem;">Pasfoto Santri</label>
                <input type="file" class="form-control border-light-subtle rounded-3 bg-light px-3 py-2 custom-input" name="foto_url" accept="image/png, image/jpeg, image/jpg" onchange="previewFile(this, 'preview-foto')">
                <div id="preview-foto" class="mt-2 d-none"></div>
                <div class="d-flex justify-content-between align-items-center mt-1">
                    <small class="text-muted" style="font-size: 0.75rem;">Format: JPG, PNG</small>
                    {% if data and data.foto_url %}
                    <a href="/{{ data.foto_url }}" target="_blank" class="badge bg-success text-decoration-none"><i class="fas fa-check-circle me-1"></i>Lihat File Saat Ini</a>
                    {% endif %}
                </div>
            </div>
            <div class="col-md-6">
                <label class="form-label text-muted fw-medium" style="font-size: 0.85rem;">Kartu Keluarga (KK)</label>
                <input type="file" class="form-control border-light-subtle rounded-3 bg-light px-3 py-2 custom-input" name="link_kk" accept=".pdf, image/png, image/jpeg, image/jpg" onchange="previewFile(this, 'preview-kk')">
                <div id="preview-kk" class="mt-2 d-none"></div>
                <div class="d-flex justify-content-between align-items-center mt-1">
                    <small class="text-muted" style="font-size: 0.75rem;">Format: PDF, JPG, PNG</small>
                    {% if data and data.link_kk %}
                    <a href="/{{ data.link_kk }}" target="_blank" class="badge bg-success text-decoration-none"><i class="fas fa-check-circle me-1"></i>Lihat File Saat Ini</a>
                    {% endif %}
                </div>
            </div>
            <div class="col-md-6">
                <label class="form-label text-muted fw-medium" style="font-size: 0.85rem;">Akte Kelahiran</label>
                <input type="file" class="form-control border-light-subtle rounded-3 bg-light px-3 py-2 custom-input" name="link_akte" accept=".pdf, image/png, image/jpeg, image/jpg" onchange="previewFile(this, 'preview-akte')">
                <div id="preview-akte" class="mt-2 d-none"></div>
                <div class="d-flex justify-content-between align-items-center mt-1">
                    <small class="text-muted" style="font-size: 0.75rem;">Format: PDF, JPG, PNG</small>
                    {% if data and data.link_akte %}
                    <a href="/{{ data.link_akte }}" target="_blank" class="badge bg-success text-decoration-none"><i class="fas fa-check-circle me-1"></i>Lihat File Saat Ini</a>
                    {% endif %}
                </div>
            </div>
            <div class="col-md-6">
                <label class="form-label text-muted fw-medium" style="font-size: 0.85rem;">Ijazah Terakhir</label>
                <input type="file" class="form-control border-light-subtle rounded-3 bg-light px-3 py-2 custom-input" name="link_ijazah" accept=".pdf, image/png, image/jpeg, image/jpg" onchange="previewFile(this, 'preview-ijazah')">
                <div id="preview-ijazah" class="mt-2 d-none"></div>
                <div class="d-flex justify-content-between align-items-center mt-1">
                    <small class="text-muted" style="font-size: 0.75rem;">Format: PDF, JPG, PNG</small>
                    {% if data and data.link_ijazah %}
                    <a href="/{{ data.link_ijazah }}" target="_blank" class="badge bg-success text-decoration-none"><i class="fas fa-check-circle me-1"></i>Lihat File Saat Ini</a>
                    {% endif %}
                </div>
            </div>
            <div class="col-md-6">
                <label class="form-label text-muted fw-medium" style="font-size: 0.85rem;">KTP Orang Tua</label>
                <input type="file" class="form-control border-light-subtle rounded-3 bg-light px-3 py-2 custom-input" name="link_ktportu" accept=".pdf, image/png, image/jpeg, image/jpg" onchange="previewFile(this, 'preview-ktportu')">
                <div id="preview-ktportu" class="mt-2 d-none"></div>
                <div class="d-flex justify-content-between align-items-center mt-1">
                    <small class="text-muted" style="font-size: 0.75rem;">Format: PDF, JPG, PNG</small>
                    {% if data and data.link_ktportu %}
                    <a href="/{{ data.link_ktportu }}" target="_blank" class="badge bg-success text-decoration-none"><i class="fas fa-check-circle me-1"></i>Lihat File Saat Ini</a>
                    {% endif %}
                </div>
            </div>
        </div>
        
        <!-- Action Buttons Bottom -->
        <div class="d-flex justify-content-end align-items-center gap-3 mt-5 pt-4 border-top border-light-subtle">
            <a href="/admin_database/santri" class="btn btn-light text-secondary border-light-subtle px-4 py-2 rounded-3" style="font-weight: 500; font-size: 0.95rem;">Batalkan</a>
            <button type="submit" class="btn text-white px-5 py-2 rounded-3" style="background-color: #00685f; font-weight: 600; font-size: 0.95rem; box-shadow: 0 4px 6px -1px rgba(0, 104, 95, 0.2);">
                <i class="fas fa-save me-2"></i> {{ 'Simpan Pembaruan Data' if data else 'Tambahkan Data Santri' }}
            </button>
        </div>

    </form>
</div>
{% endblock %}

{% block extra_scripts %}
<style>
    /* Styling Custom Input */
    .custom-input {
        transition: all 0.2s ease-in-out;
        font-size: 0.9rem;
        color: #374151;
    }
    .custom-input::placeholder {
        color: #9ca3af;
        font-size: 0.85rem;
    }
    /* Efek elegan ketika form diklik (fokus) */
    .form-control:focus, .form-select:focus {
        background-color: #ffffff !important;
        border-color: #00685f;
        box-shadow: 0 0 0 2px rgba(0, 104, 95, 0.25) !important;
        outline: none;
    }

    /* Efek redup untuk form yang belum aktif (disabled) */
    .custom-input:disabled {
        background-color: #e5e7eb !important;
        color: #9ca3af !important;
        opacity: 0.55;
        cursor: not-allowed;
        border-color: #e5e7eb !important;
    }
    
    /* Input Group WA Border Focus fix */
    .input-group:focus-within .input-group-text,
    .input-group:focus-within .form-control {
        background-color: #ffffff !important;
        border-color: #00685f;
    }
</style>

<script>
    const apiWilayah = 'https://ibnux.github.io/data-indonesia/';

    // Load Provinsi langsung saat script dijalankan (tanpa menunggu event)
    fetch(`${apiWilayah}provinsi.json`)
        .then(response => response.json())
        .then(provinces => {
            let options = '<option value="" disabled selected>Pilih Provinsi...</option>';
            provinces.forEach(prov => {
                options += `<option value="${prov.id}" data-name="${prov.nama}">${prov.nama}</option>`;
            });
            let provElement = document.getElementById('provinsi');
            if(provElement) provElement.innerHTML = options;
        })
        .catch(error => {
            console.error("Gagal memuat provinsi:", error);
            let provElement = document.getElementById('provinsi');
            if(provElement) provElement.innerHTML = '<option value="" disabled selected>Gagal memuat API</option>';
        });

    function loadKabupaten(idProvinsi) {
        let kab = document.getElementById('kabupaten');
        let kec = document.getElementById('kecamatan');
        let desa = document.getElementById('desa');

        kab.innerHTML = '<option value="" disabled selected>Memuat data...</option>';
        kec.innerHTML = '<option value="" disabled selected>Pilih Kecamatan...</option>';
        desa.innerHTML = '<option value="" disabled selected>Pilih Desa...</option>';
        kab.disabled = true; kec.disabled = true; desa.disabled = true;

        fetch(`${apiWilayah}kabupaten/${idProvinsi}.json`)
            .then(response => response.json())
            .then(regencies => {
                let options = '<option value="" disabled selected>Pilih Kabupaten...</option>';
                regencies.forEach(reg => {
                    options += `<option value="${reg.id}" data-name="${reg.nama}">${reg.nama}</option>`;
                });
                kab.innerHTML = options;
                kab.disabled = false;
            });
            
        updateAlamat();
    }

    function loadKecamatan(idKabupaten) {
        let kec = document.getElementById('kecamatan');
        let desa = document.getElementById('desa');

        kec.innerHTML = '<option value="" disabled selected>Memuat data...</option>';
        desa.innerHTML = '<option value="" disabled selected>Pilih Desa...</option>';
        kec.disabled = true; desa.disabled = true;

        fetch(`${apiWilayah}kecamatan/${idKabupaten}.json`)
            .then(response => response.json())
            .then(districts => {
                let options = '<option value="" disabled selected>Pilih Kecamatan...</option>';
                districts.forEach(dist => {
                    options += `<option value="${dist.id}" data-name="${dist.nama}">${dist.nama}</option>`;
                });
                kec.innerHTML = options;
                kec.disabled = false;
            });
            
        updateAlamat();
    }

    function loadDesa(idKecamatan) {
        let desa = document.getElementById('desa');
        desa.innerHTML = '<option value="" disabled selected>Memuat data...</option>';
        desa.disabled = true;

        fetch(`${apiWilayah}kelurahan/${idKecamatan}.json`)
            .then(response => response.json())
            .then(villages => {
                let options = '<option value="" disabled selected>Pilih Desa...</option>';
                villages.forEach(v => {
                    options += `<option value="${v.id}" data-name="${v.nama}">${v.nama}</option>`;
                });
                desa.innerHTML = options;
                desa.disabled = false;
            });
            
        updateAlamat();
    }
    
    function updateAlamat() {
        let provName = document.getElementById('provinsi')?.options[document.getElementById('provinsi').selectedIndex]?.dataset.name || "";
        let kabName = document.getElementById('kabupaten')?.options[document.getElementById('kabupaten').selectedIndex]?.dataset.name || "";
        let kecName = document.getElementById('kecamatan')?.options[document.getElementById('kecamatan').selectedIndex]?.dataset.name || "";
        let desaName = document.getElementById('desa')?.options[document.getElementById('desa').selectedIndex]?.dataset.name || "";
        
        let dusunVal = document.getElementById('dusun')?.value.trim() || "";
        let rtVal = document.getElementById('rt')?.value.trim() || "";
        let rwVal = document.getElementById('rw')?.value.trim() || "";
        
        let parts = [];
        
        // Gabungkan Dusun, RT, RW jika ada
        if(dusunVal) parts.push(dusunVal);
        if(rtVal || rwVal) {
            let rtrw = "RT " + (rtVal || "-") + " / RW " + (rwVal || "-");
            parts.push(rtrw);
        }
        
        // Gabungkan wilayah
        if(desaName) parts.push("Desa " + desaName);
        if(kecName) parts.push("Kec. " + kecName);
        if(kabName) parts.push(kabName);
        if(provName) parts.push("Prov. " + provName);
        
        let result = parts.join(", ");
        
        // Selalu update textarea agar mencerminkan input terbaru
        document.getElementById('alamat_lengkap').value = result;
    }

    function previewFile(input, previewId) {
        const previewContainer = document.getElementById(previewId);
        
        if (input.files && input.files[0]) {
            const file = input.files[0];
            const reader = new FileReader();
            
            // Hapus preview sebelumnya
            previewContainer.innerHTML = '';
            previewContainer.classList.remove('d-none');
            
            if (file.type.match('image.*')) {
                reader.onload = function(e) {
                    previewContainer.innerHTML = `<img src="${e.target.result}" class="img-thumbnail rounded-3" style="max-height: 150px; object-fit: contain;">`;
                }
                reader.readAsDataURL(file);
            } else if (file.type === 'application/pdf') {
                previewContainer.innerHTML = `
                    <div class="d-flex align-items-center p-3 border rounded-3 bg-white" style="border-color: #e5e7eb;">
                        <i class="fas fa-file-pdf fa-2x text-danger me-3"></i>
                        <div>
                            <span class="d-block fw-medium text-dark" style="font-size: 0.85rem;">${file.name}</span>
                            <span class="text-muted" style="font-size: 0.75rem;">Tinjauan PDF hanya akan tersedia setelah disimpan</span>
                        </div>
                    </div>`;
            } else {
                previewContainer.innerHTML = `
                    <div class="p-2 border rounded-3 bg-white">
                        <i class="fas fa-file me-2 text-muted"></i> <span style="font-size: 0.85rem;">${file.name}</span>
                    </div>`;
            }
        } else {
            previewContainer.classList.add('d-none');
            previewContainer.innerHTML = '';
        }
    }
</script>
{% endblock %}