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

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

{% block page_header %}
<div class="d-flex align-items-center gap-3">
    <a href="/admin_database/guru" 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 Guru' if data else 'Tambah Data Guru' }}</h5>
        <small class="text-muted" style="font-size: 0.85rem;">Formulir pengisian biodata staf pengajar / guru secara manual.</small>
    </div>
</div>
{% endblock %}

{% block content %}

<!-- Menampilkan pesan flash -->
{% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
        {% for category, message in messages %}
            <div class="alert alert-{{ 'success' if category == 'success' else 'danger' }} alert-dismissible fade show" role="alert">
                <i class="fas {{ 'fa-check-circle' if category == 'success' else 'fa-exclamation-triangle' }} me-2"></i> {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        {% endfor %}
    {% endif %}
{% endwith %}

<div class="bg-white p-4 p-md-5 rounded-3 shadow-sm border border-light-subtle">
    <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-chalkboard-teacher"></i>
            </div>
            <h6 class="fw-bold mb-0" style="color: #1f2937; font-size: 1.1rem;">I. Identitas Guru & Staf</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 Guru <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_guru" value="{{ data.id_guru if data else auto_id_guru }}" required placeholder="Contoh: GR-001" {% if data %}readonly{% endif %}>
                {% if not data %}
                <small class="text-muted mt-1" style="font-size: 0.75rem;">Terisi otomatis, bisa diubah manual jika perlu.</small>
                {% endif %}
            </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="Contoh: Ust. Ahmad Fauzi, S.Pd">
            </div>
            <div class="col-md-4">
                <label class="form-label text-muted fw-medium" style="font-size: 0.85rem;">Jenis Kelamin <span class="text-danger">*</span></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 == 'Laki-laki' %}selected{% endif %}>Laki-laki (Putra)</option>
                    <option value="Perempuan" {% if data and data.jenis_kelamin == 'Perempuan' %}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 KTP</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 '' }}" placeholder="16 Digit NIK KTP (Opsional)" maxlength="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;">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-4">
                <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: KONTAK & JABATAN -->
        <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-id-badge"></i>
            </div>
            <h6 class="fw-bold mb-0" style="color: #1f2937; font-size: 1.1rem;">II. Kontak, Jabatan & Status</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;">Nomor HP / WhatsApp Aktif</label>
                <div class="input-group">
                    <span class="input-group-text bg-light border-light-subtle text-muted px-3" style="font-size: 0.85rem;">+62</span>
                    <input type="text" class="form-control border-light-subtle bg-light custom-input" name="nomor_hp" value="{{ data.nomor_hp if data else '' }}" placeholder="Contoh: 8123456789" oninput="this.value = this.value.replace(/[^0-9]/g, ''); if(this.value.startsWith('0')) this.value = this.value.substring(1);">
                </div>
            </div>
            <div class="col-md-6">
                <label class="form-label text-muted fw-medium" style="font-size: 0.85rem;">Jabatan / Posisi</label>
                <input type="text" class="form-control border-light-subtle rounded-3 bg-light px-3 py-2 custom-input" name="jabatan" value="{{ data.jabatan if data else '' }}" placeholder="Contoh: Guru Fiqih, Staf TU">
            </div>
            
            <div class="col-md-3">
                <label class="form-label text-muted fw-medium" style="font-size: 0.85rem;">Provinsi</label>
                <input type="hidden" name="nama_provinsi" id="nama_provinsi" value="{{ data.provinsi if data else '' }}">
                {% if data and data.provinsi %}
                <div class="mb-1 text-muted" style="font-size: 0.75rem;">Saat ini: <strong>{{ data.provinsi }}</strong></div>
                {% endif %}
                <select id="provinsi" name="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>
                <input type="hidden" name="nama_kabupaten" id="nama_kabupaten" value="{{ data.kabupaten if data else '' }}">
                {% if data and data.kabupaten %}
                <div class="mb-1 text-muted" style="font-size: 0.75rem;">Saat ini: <strong>{{ data.kabupaten }}</strong></div>
                {% endif %}
                <select id="kabupaten" name="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>
                <input type="hidden" name="nama_kecamatan" id="nama_kecamatan" value="{{ data.kecamatan if data else '' }}">
                {% if data and data.kecamatan %}
                <div class="mb-1 text-muted" style="font-size: 0.75rem;">Saat ini: <strong>{{ data.kecamatan }}</strong></div>
                {% endif %}
                <select id="kecamatan" name="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>
                <input type="hidden" name="nama_desa" id="nama_desa" value="{{ data.desa if data else '' }}">
                {% if data and data.desa %}
                <div class="mb-1 text-muted" style="font-size: 0.75rem;">Saat ini: <strong>{{ data.desa }}</strong></div>
                {% endif %}
                <select id="desa" name="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" name="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" value="{{ data.dusun if data else '' }}">
            </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" name="rt" class="form-control border-light-subtle rounded-3 bg-light px-3 py-2 custom-input" oninput="updateAlamat()" placeholder="Contoh: 001" value="{{ data.rt if data else '' }}">
            </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" name="rw" class="form-control border-light-subtle rounded-3 bg-light px-3 py-2 custom-input" oninput="updateAlamat()" placeholder="Contoh: 002" value="{{ data.rw if data else '' }}">
            </div>
            
            <div class="col-md-12">
                <label class="form-label text-muted fw-medium" style="font-size: 0.85rem;">Alamat Lengkap Domisili</label>
                <textarea id="alamat_lengkap" class="form-control border-light-subtle rounded-3 bg-light px-3 py-2 custom-input" name="alamat" rows="2" placeholder="Otomatis terisi dari pilihan form di atas, bisa Anda edit manual jika perlu...">{{ data.alamat if data else '' }}</textarea>
            </div>
            
            <div class="col-md-4">
                <label class="form-label text-muted fw-medium" style="font-size: 0.85rem;">Status Keaktifan <span class="text-danger">*</span></label>
                <select class="form-select border-light-subtle rounded-3 bg-light px-3 py-2 custom-input" name="status" required>
                    <option value="Aktif" {% if data and data.status == 'Aktif' %}selected{% endif %}>🟢 Aktif Mengajar</option>
                    <option value="Tidak Aktif" {% if data and data.status == 'Tidak Aktif' %}selected{% endif %}>🔴 Tidak Aktif / Berhenti</option>
                </select>
            </div>
            
            <div class="col-md-8">
                <label class="form-label text-muted fw-medium" style="font-size: 0.85rem;">Catatan Keterangan (Opsional)</label>
                <input type="text" class="form-control border-light-subtle rounded-3 bg-light px-3 py-2 custom-input" name="keterangan" value="{{ data.keterangan if data else '' }}" placeholder="Catatan khusus tentang guru ini...">
            </div>
        </div>
        
        <hr class="border-light-subtle mb-5">

        <!-- BAGIAN 3: BERKAS & DOKUMEN -->
        <div class="d-flex align-items-center mb-4 mt-2">
            <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;">III. 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 Guru</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;">KTP Guru</label>
                <input type="file" class="form-control border-light-subtle rounded-3 bg-light px-3 py-2 custom-input" name="link_ktp" accept=".pdf, image/png, image/jpeg, image/jpg" onchange="previewFile(this, 'preview-ktp')">
                <div id="preview-ktp" 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_ktp %}
                    <a href="/{{ data.link_ktp }}" 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;">Surat Keputusan (SK)</label>
                <input type="file" class="form-control border-light-subtle rounded-3 bg-light px-3 py-2 custom-input" name="link_sk" accept=".pdf, image/png, image/jpeg, image/jpg" onchange="previewFile(this, 'preview-sk')">
                <div id="preview-sk" 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_sk %}
                    <a href="/{{ data.link_sk }}" 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>
        
        <hr class="border-light-subtle mb-4">
        
        <div class="d-flex justify-content-between align-items-center bg-light p-4 rounded-3 border border-light-subtle">
            <div>
                <p class="text-muted mb-0" style="font-size: 0.85rem;"><i class="fas fa-info-circle me-1"></i> Pastikan semua data wajib (<span class="text-danger">*</span>) telah terisi.</p>
            </div>
            <div class="d-flex gap-2">
                <a href="/admin_database/guru" class="btn btn-white border-light-subtle text-muted px-4" style="border-radius: 0.5rem;">Batal</a>
                <button type="submit" class="btn btn-primary px-4 d-flex align-items-center gap-2" style="background-color: #00685f; border-color: #00685f; border-radius: 0.5rem; transition: all 0.2s;">
                    <i class="fas fa-save"></i> 
                    <span>{{ 'Simpan Perubahan' if data else 'Simpan Data Guru' }}</span>
                </button>
            </div>
        </div>
    </form>
</div>

<style>
    /* Styling agar seragam dengan form_santri */
    .custom-input {
        transition: all 0.2s ease-in-out;
        font-size: 0.9rem;
    }
    .custom-input:focus {
        background-color: #ffffff !important;
        border-color: #0d9488 !important;
        box-shadow: 0 0 0 0.25rem rgba(13, 148, 136, 0.15) !important;
    }
    .btn-primary:hover {
        background-color: #004d46 !important;
        border-color: #004d46 !important;
        transform: translateY(-1px);
        box-shadow: 0 4px 6px -1px rgba(0, 104, 95, 0.2) !important;
    }
</style>

<script>
    // Form validation - scroll ke field bermasalah jika ada
    (function () {
        'use strict'
        var forms = document.querySelectorAll('.needs-validation')
        Array.prototype.slice.call(forms)
            .forEach(function (form) {
                form.addEventListener('submit', function (event) {
                    if (!form.checkValidity()) {
                        event.preventDefault()
                        event.stopPropagation()
                        form.classList.add('was-validated')
                        // Scroll ke field pertama yang bermasalah
                        var firstInvalid = form.querySelector(':invalid');
                        if (firstInvalid) {
                            firstInvalid.scrollIntoView({ behavior: 'smooth', block: 'center' });
                            firstInvalid.focus();
                        }
                    }
                }, false)
            })
    })()

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

    // Load Provinsi langsung saat script dijalankan
    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);
        });

    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 = [];
        
        if(dusunVal) parts.push(dusunVal);
        if(rtVal || rwVal) {
            let rtrw = "RT " + (rtVal || "-") + " / RW " + (rwVal || "-");
            parts.push(rtrw);
        }
        
        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(", ");
        
        if (provName) document.getElementById('nama_provinsi').value = provName;
        if (kabName) document.getElementById('nama_kabupaten').value = kabName;
        if (kecName) document.getElementById('nama_kecamatan').value = kecName;
        if (desaName) document.getElementById('nama_desa').value = desaName;
        
        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 %}