{% extends "admin_master/base_admin_master.html" %}
{% block title %}Pengaturan Tarif - Admin Master{% endblock %}

{% block page_header %}
<h5 class="mb-1 fw-bold" style="color: #1f2937; font-size: 1.25rem;">Pengaturan Tarif Keuangan</h5>
<small class="text-muted" style="font-size: 0.85rem;">Kelola tarif syahriyah, pendaftaran, dan biaya lainnya.</small>
{% endblock %}

{% block content %}
{% if tarif.get('tarif_terakhir_diperbarui') %}
<div class="alert alert-light border d-flex align-items-center mb-4" style="font-size: 0.85rem;">
    <i class="fas fa-clock me-2 text-muted"></i>
    Terakhir diperbarui: <strong class="ms-1">{{ tarif.get('tarif_terakhir_diperbarui') }}</strong>
</div>
{% endif %}

<div class="db-card">
    <h6 class="fw-bold mb-3" style="font-size: 0.95rem;"><i class="fas fa-mosque me-2 text-success"></i>Syahriyah & SPP</h6>
    <div class="row g-3 mb-4">
        <div class="col-md-4">
            <label class="form-label" style="font-size: 0.8rem;">Syahriyah Pondok (Putra)</label>
            <div class="input-group">
                <span class="input-group-text" style="font-size: 0.85rem;">Rp</span>
                <input type="number" class="form-control tarif-input" data-key="tarif_syahriyah_pondok_putra" value="{{ tarif.get('tarif_syahriyah_pondok_putra', 0) }}">
            </div>
        </div>
        <div class="col-md-4">
            <label class="form-label" style="font-size: 0.8rem;">Syahriyah Pondok (Putri)</label>
            <div class="input-group">
                <span class="input-group-text" style="font-size: 0.85rem;">Rp</span>
                <input type="number" class="form-control tarif-input" data-key="tarif_syahriyah_pondok_putri" value="{{ tarif.get('tarif_syahriyah_pondok_putri', 0) }}">
            </div>
        </div>
        <div class="col-md-4">
            <label class="form-label" style="font-size: 0.8rem;">Syahriyah Madin</label>
            <div class="input-group">
                <span class="input-group-text" style="font-size: 0.85rem;">Rp</span>
                <input type="number" class="form-control tarif-input" data-key="tarif_syahriyah_madin" value="{{ tarif.get('tarif_syahriyah_madin', 0) }}">
            </div>
        </div>
    </div>

    <h6 class="fw-bold mb-3" style="font-size: 0.95rem;"><i class="fas fa-file-signature me-2 text-primary"></i>Pendaftaran & Daftar Ulang</h6>
    <div class="row g-3 mb-4">
        <div class="col-md-3">
            <label class="form-label" style="font-size: 0.8rem;">Pendaftaran Pondok</label>
            <div class="input-group">
                <span class="input-group-text" style="font-size: 0.85rem;">Rp</span>
                <input type="number" class="form-control tarif-input" data-key="tarif_pendaftaran_pondok" value="{{ tarif.get('tarif_pendaftaran_pondok', 0) }}">
            </div>
        </div>
        <div class="col-md-3">
            <label class="form-label" style="font-size: 0.8rem;">Pendaftaran Madin</label>
            <div class="input-group">
                <span class="input-group-text" style="font-size: 0.85rem;">Rp</span>
                <input type="number" class="form-control tarif-input" data-key="tarif_pendaftaran_madin" value="{{ tarif.get('tarif_pendaftaran_madin', 0) }}">
            </div>
        </div>
        <div class="col-md-3">
            <label class="form-label" style="font-size: 0.8rem;">Daftar Ulang Pondok</label>
            <div class="input-group">
                <span class="input-group-text" style="font-size: 0.85rem;">Rp</span>
                <input type="number" class="form-control tarif-input" data-key="tarif_daftar_ulang_pondok" value="{{ tarif.get('tarif_daftar_ulang_pondok', 0) }}">
            </div>
        </div>
        <div class="col-md-3">
            <label class="form-label" style="font-size: 0.8rem;">Daftar Ulang Madin</label>
            <div class="input-group">
                <span class="input-group-text" style="font-size: 0.85rem;">Rp</span>
                <input type="number" class="form-control tarif-input" data-key="tarif_daftar_ulang_madin" value="{{ tarif.get('tarif_daftar_ulang_madin', 0) }}">
            </div>
        </div>
    </div>

    <h6 class="fw-bold mb-3" style="font-size: 0.95rem;"><i class="fas fa-hand-holding-heart me-2 text-warning"></i>Jariyah & Lainnya</h6>
    <div class="row g-3 mb-4">
        <div class="col-md-3">
            <label class="form-label" style="font-size: 0.8rem;">Jariyah Pondok</label>
            <div class="input-group">
                <span class="input-group-text" style="font-size: 0.85rem;">Rp</span>
                <input type="number" class="form-control tarif-input" data-key="tarif_jariyah_pondok" value="{{ tarif.get('tarif_jariyah_pondok', 0) }}">
            </div>
        </div>
        <div class="col-md-3">
            <label class="form-label" style="font-size: 0.8rem;">Jariyah Madin</label>
            <div class="input-group">
                <span class="input-group-text" style="font-size: 0.85rem;">Rp</span>
                <input type="number" class="form-control tarif-input" data-key="tarif_jariyah_madin" value="{{ tarif.get('tarif_jariyah_madin', 0) }}">
            </div>
        </div>
        <div class="col-md-3">
            <label class="form-label" style="font-size: 0.8rem;">Kalender</label>
            <div class="input-group">
                <span class="input-group-text" style="font-size: 0.85rem;">Rp</span>
                <input type="number" class="form-control tarif-input" data-key="tarif_kalender" value="{{ tarif.get('tarif_kalender', 0) }}">
            </div>
        </div>
        <div class="col-md-3">
            <label class="form-label" style="font-size: 0.8rem;">Raport</label>
            <div class="input-group">
                <span class="input-group-text" style="font-size: 0.85rem;">Rp</span>
                <input type="number" class="form-control tarif-input" data-key="tarif_raport" value="{{ tarif.get('tarif_raport', 0) }}">
            </div>
        </div>
    </div>

    <div class="row g-3 mb-4">
        <div class="col-md-3">
            <label class="form-label" style="font-size: 0.8rem;">Semester Ganjil</label>
            <div class="input-group">
                <span class="input-group-text" style="font-size: 0.85rem;">Rp</span>
                <input type="number" class="form-control tarif-input" data-key="tarif_semester_ganjil" value="{{ tarif.get('tarif_semester_ganjil', 0) }}">
            </div>
        </div>
        <div class="col-md-3">
            <label class="form-label" style="font-size: 0.8rem;">Semester Genap</label>
            <div class="input-group">
                <span class="input-group-text" style="font-size: 0.85rem;">Rp</span>
                <input type="number" class="form-control tarif-input" data-key="tarif_semester_genap" value="{{ tarif.get('tarif_semester_genap', 0) }}">
            </div>
        </div>
        <div class="col-md-3">
            <label class="form-label" style="font-size: 0.8rem;">UAM</label>
            <div class="input-group">
                <span class="input-group-text" style="font-size: 0.85rem;">Rp</span>
                <input type="number" class="form-control tarif-input" data-key="tarif_uam" value="{{ tarif.get('tarif_uam', 0) }}">
            </div>
        </div>
    </div>

    <div class="text-end pt-3 border-top">
        <button class="btn btn-success px-4" onclick="simpanTarif()">
            <i class="fas fa-save me-1"></i> Simpan Tarif
        </button>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
function simpanTarif() {
    const data = {};
    document.querySelectorAll('.tarif-input').forEach(inp => {
        data[inp.dataset.key] = inp.value;
    });

    fetch('/admin_master/pengaturan/tarif', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(data)
    })
    .then(res => res.json())
    .then(res => {
        if (res.status === 'success') {
            Swal.fire({icon: 'success', title: 'Berhasil!', text: res.message, timer: 1500, showConfirmButton: false});
        } else {
            Swal.fire({icon: 'error', title: 'Gagal', text: res.message});
        }
    })
    .catch(err => Swal.fire({icon: 'error', title: 'Error', text: 'Gagal menyimpan tarif.'}));
}
</script>
{% endblock %}