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

{% block page_title %}Pengaturan Sistem - Admin Database{% endblock %}

{% block page_header %}
<h5 class="mb-1 fw-bold" style="color: #1f2937; font-size: 1.25rem;">Pengaturan Sistem</h5>
<small class="text-muted" style="font-size: 0.85rem;">Konfigurasi utama portal database pondok pesantren.</small>
{% endblock %}

{% block content %}
<div class="row g-4 mt-2">
    <!-- Sidebar Pengaturan -->
    <div class="col-12 col-md-4 col-lg-3">
        <div class="bule-card rounded-2 shadow-sm border-0 bg-white">
            <div class="list-group list-group-flush rounded-2" id="list-tab" role="tablist">
                <a class="list-group-item list-group-item-action py-3 px-4 active fw-medium" id="list-profil-list" data-bs-toggle="list" href="#list-profil" role="tab">
                    <i class="fas fa-building me-2 text-muted" style="width:20px"></i> Profil Pondok
                </a>
                <a class="list-group-item list-group-item-action py-3 px-4 fw-medium" id="list-format-list" data-bs-toggle="list" href="#list-format" role="tab">
                    <i class="fas fa-barcode me-2 text-muted" style="width:20px"></i> Format ID
                </a>
                <a class="list-group-item list-group-item-action py-3 px-4 fw-medium" id="list-kartu-list" data-bs-toggle="list" href="#list-kartu" role="tab">
                    <i class="fas fa-id-card me-2 text-muted" style="width:20px"></i> Template Kartu
                </a>
                <a class="list-group-item list-group-item-action py-3 px-4 fw-medium" id="list-alasan-list" data-bs-toggle="list" href="#list-alasan" role="tab">
                    <i class="fas fa-sign-out-alt me-2 text-muted" style="width:20px"></i> Alasan Mutasi
                </a>
                <a class="list-group-item list-group-item-action py-3 px-4 fw-medium" id="list-backup-list" data-bs-toggle="list" href="#list-backup" role="tab">
                    <i class="fas fa-database me-2 text-muted" style="width:20px"></i> Backup Data
                </a>
                <a class="list-group-item list-group-item-action py-3 px-4 fw-medium" id="list-kalender-list" data-bs-toggle="list" href="#list-kalender" role="tab">
                    <i class="fas fa-calendar-alt me-2 text-muted" style="width:20px"></i> Kalender
                </a>
                <a class="list-group-item list-group-item-action py-3 px-4 fw-medium" id="list-akun-list" data-bs-toggle="list" href="#list-akun" role="tab">
                    <i class="fas fa-user-shield me-2 text-muted" style="width:20px"></i> Keamanan Akun
                </a>
            </div>
        </div>
    </div>

    <!-- Konten Pengaturan -->
    <div class="col-12 col-md-8 col-lg-9">
        
        <!-- Flash Messages -->
        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                {% for category, message in messages %}
                    <div class="alert alert-{{ category }} alert-dismissible fade show shadow-sm border-0 mb-4" role="alert">
                        <i class="fas {% if category == 'success' %}fa-check-circle{% else %}fa-exclamation-circle{% endif %} me-2"></i> {{ message }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                {% endfor %}
            {% endif %}
        {% endwith %}

        <div class="tab-content" id="nav-tabContent">
            
            <!-- 1. PROFIL PONDOK -->
            <div class="tab-pane fade show active" id="list-profil" role="tabpanel" aria-labelledby="list-profil-list">
                <div class="bule-card rounded-2 shadow-sm border-0 bg-white p-4">
                    <h6 class="fw-bold mb-4 pb-3 border-bottom"><i class="fas fa-building text-success me-2"></i> Profil Pondok & Madrasah</h6>
                    <form action="/admin_database/pengaturan/simpan" method="POST" enctype="multipart/form-data">
                        <input type="hidden" name="tab_aktif" value="profil">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label text-muted small fw-medium">Nama Pondok Pesantren</label>
                                    <input type="text" class="form-control" name="nama_pondok" value="{{ settings.get('nama_pondok', '') }}">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label text-muted small fw-medium">Nama Madrasah / Sekolah</label>
                                    <input type="text" class="form-control" name="nama_madrasah" value="{{ settings.get('nama_madrasah', '') }}">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label text-muted small fw-medium">Kepala Pondok / Pengasuh</label>
                                    <input type="text" class="form-control" name="kepala_pondok" value="{{ settings.get('kepala_pondok', '') }}">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label text-muted small fw-medium">Alamat Lengkap</label>
                                    <textarea class="form-control" name="alamat_pondok" rows="2">{{ settings.get('alamat_pondok', '') }}</textarea>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label text-muted small fw-medium">Nomor Telepon / WA Center</label>
                                    <input type="text" class="form-control" name="nomor_telepon" value="{{ settings.get('nomor_telepon', '') }}">
                                </div>
                                
                                <hr class="my-4">
                                <h6 class="fw-bold mb-3 text-secondary" style="font-size: 0.9rem;">Kop Surat (Untuk Cetak Laporan)</h6>
                                <p class="text-muted small mb-2">Kop Surat Pondok: {% if settings.get('kop_surat_pondok') %}<span class="text-success"><i class="fas fa-check"></i> Sudah ada</span>{% else %}<span class="text-danger">Belum ada</span>{% endif %}</p>
                                {% if settings.get('kop_surat_pondok') %}
                                <img src="/static/uploads/{{ settings.kop_surat_pondok }}" alt="Kop Surat Pondok" class="img-fluid mb-2" style="max-height: 80px;">
                                {% endif %}
                                <div class="mb-4">
                                    <input type="file" class="form-control" name="kop_surat_pondok" accept="image/*">
                                </div>

                                <p class="text-muted small mb-2">Kop Surat Madin: {% if settings.get('kop_surat_madin') %}<span class="text-success"><i class="fas fa-check"></i> Sudah ada</span>{% else %}<span class="text-danger">Belum ada</span>{% endif %}</p>
                                {% if settings.get('kop_surat_madin') %}
                                <img src="/static/uploads/{{ settings.kop_surat_madin }}" alt="Kop Surat Madin" class="img-fluid mb-2" style="max-height: 80px;">
                                {% endif %}
                                <div class="mb-3">
                                    <input type="file" class="form-control" name="kop_surat_madin" accept="image/*">
                                    <div class="form-text small">Upload gambar Kop Surat utuh (Maks 2MB). Disarankan berasio memanjang.</div>
                                </div>
                            </div>
                            <div class="col-md-3 text-center">
                                <label class="form-label text-muted small fw-medium d-block text-start">Logo Pondok</label>
                                <div class="border rounded-2 p-3 mb-3 bg-light d-flex justify-content-center align-items-center" style="height: 150px;">
                                    {% if settings.get('logo_pondok') %}
                                    <img src="/static/uploads/{{ settings.logo_pondok }}" alt="Logo Pondok" class="img-fluid" style="max-height: 120px;">
                                    {% else %}
                                    <i class="fas fa-image fa-3x text-secondary opacity-25"></i>
                                    {% endif %}
                                </div>
                                <input class="form-control form-control-sm" type="file" name="logo_pondok" accept="image/*">
                                <div class="form-text small">Format JPG/PNG (Maks 2MB)</div>
                            </div>
                            <div class="col-md-3 text-center">
                                <label class="form-label text-muted small fw-medium d-block text-start">Logo Madin</label>
                                <div class="border rounded-2 p-3 mb-3 bg-light d-flex justify-content-center align-items-center" style="height: 150px;">
                                    {% if settings.get('logo_madin') %}
                                    <img src="/static/uploads/{{ settings.logo_madin }}" alt="Logo Madin" class="img-fluid" style="max-height: 120px;">
                                    {% else %}
                                    <i class="fas fa-image fa-3x text-secondary opacity-25"></i>
                                    {% endif %}
                                </div>
                                <input class="form-control form-control-sm" type="file" name="logo_madin" accept="image/*">
                                <div class="form-text small">Format JPG/PNG (Maks 2MB)</div>
                            </div>
                        </div>
                        <div class="mt-4 text-end">
                            <button type="submit" class="btn text-white px-4 py-2 rounded-2" style="background-color: #00685f; font-weight: 500;">
                                <i class="fas fa-save me-2"></i> Simpan Profil
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- 2. FORMAT ID -->
            <div class="tab-pane fade" id="list-format" role="tabpanel" aria-labelledby="list-format-list">
                <div class="bule-card rounded-2 shadow-sm border-0 bg-white p-4">
                    <h6 class="fw-bold mb-4 pb-3 border-bottom"><i class="fas fa-barcode text-success me-2"></i> Kustomisasi Format ID</h6>
                    <form action="/admin_database/pengaturan/simpan" method="POST">
                        <input type="hidden" name="tab_aktif" value="format">
                        
                        <div class="alert alert-info border-0 rounded-2 small mb-4">
                            <i class="fas fa-info-circle me-2"></i> Format ID akan menentukan nomor unik yang di-generate otomatis saat menambahkan data baru. [TAHUN] akan diganti otomatis dengan Tahun Ajaran Aktif (misal: 1445).
                        </div>

                        <div class="row mb-4">
                            <div class="col-md-4">
                                <label class="form-label text-muted small fw-medium">Prefix ID Santri</label>
                                <input type="text" class="form-control" name="prefix_santri" value="{{ settings.get('prefix_santri', 'S') }}">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label text-muted small fw-medium">Format Pola</label>
                                <input type="text" class="form-control" name="format_santri" value="{{ settings.get('format_santri', '{PREFIX}-{TAHUN}-{NOMOR}') }}">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label text-muted small fw-medium">Digit Nomor (cth: 3 = 001)</label>
                                <input type="number" class="form-control" name="digit_santri" value="{{ settings.get('digit_santri', '3') }}" min="2" max="6">
                            </div>
                        </div>

                        <div class="row mb-4">
                            <div class="col-md-4">
                                <label class="form-label text-muted small fw-medium">Prefix ID Guru</label>
                                <input type="text" class="form-control" name="prefix_guru" value="{{ settings.get('prefix_guru', 'GR') }}">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label text-muted small fw-medium">Format Pola</label>
                                <input type="text" class="form-control" name="format_guru" value="{{ settings.get('format_guru', '{PREFIX}-{NOMOR}') }}">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label text-muted small fw-medium">Digit Nomor</label>
                                <input type="number" class="form-control" name="digit_guru" value="{{ settings.get('digit_guru', '3') }}" min="2" max="6">
                            </div>
                        </div>

                        <div class="mt-4 text-end">
                            <button type="submit" class="btn text-white px-4 py-2 rounded-2" style="background-color: #00685f; font-weight: 500;">
                                <i class="fas fa-save me-2"></i> Simpan Format
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- 3. TEMPLATE KARTU -->
            <div class="tab-pane fade" id="list-kartu" role="tabpanel" aria-labelledby="list-kartu-list">
                <div class="bule-card rounded-2 shadow-sm border-0 bg-white p-4">
                                                            <h6 class="fw-bold mb-4 pb-3 border-bottom"><i class="fas fa-id-card text-success me-2"></i> Template Kartu ID & Koordinat (Visual Editor)</h6>
                    
                    <form action="/admin_database/pengaturan/simpan" method="POST" enctype="multipart/form-data">
                        <input type="hidden" name="tab_aktif" value="kartu">
                        
                        <div class="alert alert-info border-0 rounded-2 small mb-4">
                            <i class="fas fa-info-circle me-2"></i> Unggah desain background kartu (ukuran standar CR80) dari Photoshop (format PNG/JPG).<br>
                            Klik tombol "Buka Visual Editor" untuk mengatur letak dan ukuran teks secara interaktif.
                        </div>

                        <!-- KARTU SANTRI -->
                        <div class="mb-4 border rounded-3 p-3 bg-light d-flex justify-content-between align-items-center flex-wrap gap-3">
                            <div>
                                <h6 class="fw-bold text-dark mb-1">1. Kartu Tanda Santri</h6>
                                <p class="text-muted small mb-2">Background: {% if settings.get('bg_kartu_santri') %}<span class="text-success"><i class="fas fa-check"></i> {{ settings.get('bg_kartu_santri') }}</span>{% else %}<span class="text-danger">Belum ada</span>{% endif %}</p>
                                <input type="file" class="form-control form-control-sm" name="bg_kartu_santri" accept="image/*" style="max-width: 300px;">
                            </div>
                            <a href="{{ url_for('admin_database_editor_kartu', jenis='santri') }}" class="btn btn-outline-success">
                                <i class="fas fa-external-link-alt me-2"></i> Buka Visual Editor
                            </a>
                        </div>

                        <!-- KARTU MADRASAH -->
                        <div class="mb-4 border rounded-3 p-3 bg-light d-flex justify-content-between align-items-center flex-wrap gap-3">
                            <div>
                                <h6 class="fw-bold text-dark mb-1">2. Kartu Tanda Siswa Madrasah</h6>
                                <p class="text-muted small mb-2">Background: {% if settings.get('bg_kartu_madrasah') %}<span class="text-success"><i class="fas fa-check"></i> {{ settings.get('bg_kartu_madrasah') }}</span>{% else %}<span class="text-danger">Belum ada</span>{% endif %}</p>
                                <input type="file" class="form-control form-control-sm" name="bg_kartu_madrasah" accept="image/*" style="max-width: 300px;">
                            </div>
                            <a href="{{ url_for('admin_database_editor_kartu', jenis='madrasah') }}" class="btn btn-outline-success">
                                <i class="fas fa-external-link-alt me-2"></i> Buka Visual Editor
                            </a>
                        </div>

                        <!-- KARTU GURU -->
                        <div class="mb-4 border rounded-3 p-3 bg-light d-flex justify-content-between align-items-center flex-wrap gap-3">
                            <div>
                                <h6 class="fw-bold text-dark mb-1">3. Kartu Guru</h6>
                                <p class="text-muted small mb-2">Background: {% if settings.get('bg_kartu_guru') %}<span class="text-success"><i class="fas fa-check"></i> {{ settings.get('bg_kartu_guru') }}</span>{% else %}<span class="text-danger">Belum ada</span>{% endif %}</p>
                                <input type="file" class="form-control form-control-sm" name="bg_kartu_guru" accept="image/*" style="max-width: 300px;">
                            </div>
                            <a href="{{ url_for('admin_database_editor_kartu', jenis='guru') }}" class="btn btn-outline-success">
                                <i class="fas fa-external-link-alt me-2"></i> Buka Visual Editor
                            </a>
                        </div>

                        <div class="mt-4 text-end">
                            <button type="submit" class="btn text-white px-4 py-2 rounded-2" style="background-color: #00685f; font-weight: 500;">
                                <i class="fas fa-save me-2"></i> Upload Background
                            </button>
                        </div>
                    </form>

                </div>
            </div>

            <!-- 4. ALASAN MUTASI -->
            <div class="tab-pane fade" id="list-alasan" role="tabpanel" aria-labelledby="list-alasan-list">
                <div class="bule-card rounded-2 shadow-sm border-0 bg-white p-4">
                    <h6 class="fw-bold mb-4 pb-3 border-bottom"><i class="fas fa-sign-out-alt text-success me-2"></i> Pilihan Alasan Keluar/Masuk</h6>
                    <div class="row">
                        <div class="col-md-6">
                            <label class="form-label text-muted fw-medium small mb-3">Daftar Alasan Keluar (Alumni / Drop Out)</label>
                            <form action="/admin_database/pengaturan/simpan" method="POST">
                                <input type="hidden" name="tab_aktif" value="alasan">
                                <textarea class="form-control mb-2" name="alasan_keluar" rows="6" placeholder="Pisahkan dengan baris baru (Enter)">{{ settings.get('alasan_keluar', 'Lulus / Tamat\nPindah Pesantren\nPermintaan Orang Tua\nDiberhentikan\nLain-lain') }}</textarea>
                                <div class="form-text small mb-3">Tuliskan tiap alasan di baris yang baru.</div>
                                <button type="submit" class="btn text-white px-3 py-2 w-100 rounded-2" style="background-color: #00685f; font-weight: 500;">
                                    <i class="fas fa-save me-1"></i> Simpan Alasan Keluar
                                </button>
                            </form>
                        </div>
                        <div class="col-md-6 mt-4 mt-md-0">
                            <label class="form-label text-muted fw-medium small mb-3">Daftar Alasan Masuk (Tambahan)</label>
                            <form action="/admin_database/pengaturan/simpan" method="POST">
                                <input type="hidden" name="tab_aktif" value="alasan">
                                <textarea class="form-control mb-2" name="alasan_masuk" rows="6" placeholder="Pisahkan dengan baris baru (Enter)">{{ settings.get('alasan_masuk', 'Santri Baru (PSB)\nPindahan Antar Pondok\nKembali Mondok') }}</textarea>
                                <div class="form-text small mb-3">Tuliskan tiap alasan di baris yang baru.</div>
                                <button type="submit" class="btn btn-outline-success px-3 py-2 w-100 rounded-2" style="font-weight: 500;">
                                    <i class="fas fa-save me-1"></i> Simpan Alasan Masuk
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 5. BACKUP DATA -->
            <div class="tab-pane fade" id="list-backup" role="tabpanel" aria-labelledby="list-backup-list">
                <div class="bule-card rounded-2 shadow-sm border-0 bg-white p-4 text-center">
                    <h6 class="fw-bold mb-4 pb-3 border-bottom text-start"><i class="fas fa-database text-success me-2"></i> Backup Keamanan Data</h6>
                    
                    <div class="py-4">
                        <i class="fas fa-cloud-download-alt fa-4x text-primary opacity-50 mb-4"></i>
                        <h5 class="fw-bold text-dark">Download Salinan Database</h5>
                        <p class="text-muted small w-75 mx-auto mb-4">Sebagai langkah antisipasi kehilangan data, sangat disarankan untuk melakukan backup (cadangan) database secara berkala. File akan diunduh dalam format SQL yang dapat direstore oleh teknisi sewaktu-waktu.</p>
                        
                        <div class="d-flex justify-content-center gap-3">
                            <a href="/admin_database/pengaturan/backup" class="btn btn-primary px-4 py-2 rounded-2 fw-medium shadow-sm">
                                <i class="fas fa-download me-2"></i> Download Backup (.sql)
                            </a>
                            <a href="/admin_database/pengaturan/backup_excel" class="btn btn-success px-4 py-2 rounded-2 fw-medium shadow-sm">
                                <i class="fas fa-file-excel me-2"></i> Download Backup (.xlsx)
                            </a>
                        </div>
                    </div>
                    
                    <div class="alert alert-danger border-0 rounded-2 small mt-4 text-start d-flex align-items-center">
                        <i class="fas fa-exclamation-triangle fa-2x me-3"></i>
                        <div>
                            <strong>Penting:</strong> Simpan file backup di tempat yang aman. Jangan berikan ke sembarang orang karena memuat seluruh data privasi santri.
                        </div>
                    </div>
                </div>
            </div>

            <!-- 6. KALENDER -->
            <div class="tab-pane fade" id="list-kalender" role="tabpanel" aria-labelledby="list-kalender-list">
                <div class="bule-card rounded-2 shadow-sm border-0 bg-white p-4">
                    <h6 class="fw-bold mb-4 pb-3 border-bottom"><i class="fas fa-calendar-alt text-success me-2"></i> Pengaturan Tampilan Waktu</h6>
                    <form action="/admin_database/pengaturan/simpan" method="POST">
                        <input type="hidden" name="tab_aktif" value="kalender">
                        
                        <div class="mb-4">
                            <label class="form-label text-muted small fw-medium">Zona Waktu Sistem</label>
                            <select class="form-select" name="zona_waktu">
                                <option value="Asia/Jakarta" {% if settings.get('zona_waktu') == 'Asia/Jakarta' %}selected{% endif %}>WIB (Asia/Jakarta)</option>
                                <option value="Asia/Makassar" {% if settings.get('zona_waktu') == 'Asia/Makassar' %}selected{% endif %}>WITA (Asia/Makassar)</option>
                                <option value="Asia/Jayapura" {% if settings.get('zona_waktu') == 'Asia/Jayapura' %}selected{% endif %}>WIT (Asia/Jayapura)</option>
                            </select>
                        </div>
                        
                        <div class="mb-4">
                            <label class="form-label text-muted small fw-medium">Sistem Penanggalan Utama Dokumen</label>
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="radio" name="kalender_utama" id="kal1" value="hijriyah" {% if settings.get('kalender_utama', 'hijriyah') == 'hijriyah' %}checked{% endif %}>
                                <label class="form-check-label" for="kal1">
                                    Hijriyah (Contoh: 8 Shafar 1445 H)
                                </label>
                            </div>
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="radio" name="kalender_utama" id="kal2" value="masehi" {% if settings.get('kalender_utama') == 'masehi' %}checked{% endif %}>
                                <label class="form-check-label" for="kal2">
                                    Masehi (Contoh: 25 Agustus 2023)
                                </label>
                            </div>
                        </div>

                        <div class="mt-4 text-end">
                            <button type="submit" class="btn text-white px-4 py-2 rounded-2" style="background-color: #00685f; font-weight: 500;">
                                <i class="fas fa-save me-2"></i> Simpan Kalender
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- 7. AKUN -->
            <div class="tab-pane fade" id="list-akun" role="tabpanel" aria-labelledby="list-akun-list">
                <div class="bule-card rounded-2 shadow-sm border-0 bg-white p-4">
                    <h6 class="fw-bold mb-4 pb-3 border-bottom"><i class="fas fa-user-shield text-success me-2"></i> Keamanan Akun Admin</h6>
                    
                    <form action="/admin_database/pengaturan/ganti_password" method="POST">
                        <div class="mb-3">
                            <label class="form-label text-muted small fw-medium">Password Lama</label>
                            <div class="input-group">
                                <span class="input-group-text bg-light border-end-0"><i class="fas fa-lock text-muted"></i></span>
                                <input type="password" class="form-control border-start-0" name="old_password" required placeholder="Masukkan password saat ini">
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label text-muted small fw-medium">Password Baru</label>
                            <div class="input-group">
                                <span class="input-group-text bg-light border-end-0"><i class="fas fa-key text-muted"></i></span>
                                <input type="password" class="form-control border-start-0" name="new_password" required placeholder="Buat password baru">
                            </div>
                        </div>
                        <div class="mb-4">
                            <label class="form-label text-muted small fw-medium">Konfirmasi Password Baru</label>
                            <div class="input-group">
                                <span class="input-group-text bg-light border-end-0"><i class="fas fa-check-circle text-muted"></i></span>
                                <input type="password" class="form-control border-start-0" name="confirm_password" required placeholder="Ketik ulang password baru">
                            </div>
                        </div>
                        <div class="mt-4 text-end">
                            <button type="submit" class="btn btn-danger px-4 py-2 rounded-2 fw-medium shadow-sm">
                                <i class="fas fa-sync-alt me-2"></i> Ganti Password
                            </button>
                        </div>
                    </form>
                </div>
            </div>

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

{% block extra_scripts %}
<script>
    // Mempertahankan tab yang aktif setelah refresh/submit form
    document.addEventListener("DOMContentLoaded", function() {
        const urlParams = new URLSearchParams(window.location.search);
        const tab = urlParams.get('tab');
        if (tab) {
            const triggerEl = document.querySelector('#list-' + tab + '-list');
            if (triggerEl) {
                var tabInstance = new bootstrap.Tab(triggerEl);
                tabInstance.show();
            }
        }
    });

    // Menambahkan tab aktif ke dalam action url setiap form agar saat redirect kembali ke tab tersebut
    const tabEls = document.querySelectorAll('a[data-bs-toggle="list"]');
    tabEls.forEach(function(el) {
        el.addEventListener('shown.bs.tab', function (event) {
            const activeId = event.target.id.replace('-list', '').replace('list-', '');
            // Update form inputs 'tab_aktif' 
            const tabInputs = document.querySelectorAll('input[name="tab_aktif"]');
            tabInputs.forEach(inp => inp.value = activeId);
            
            // Update URL secara visual
            const newUrl = window.location.pathname + '?tab=' + activeId;
            window.history.pushState({path:newUrl}, '', newUrl);
        });
    });
</script>
{% endblock %}