{% extends "payroll/base.html" %}

{% block content %}
<style>
    .setup-pajak-page { padding: 1rem; }
    .setup-pajak-toolbar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
    .setup-pajak-title { font-size: 2rem; font-weight: 500; margin: 0; }
    .setup-pajak-search { width: min(100%, 360px); }
    .setup-pajak-table-wrap { overflow-x: auto; }
    .setup-pajak-table thead th { background: #505a61 !important; color: #fff; white-space: nowrap; }
    .setup-pajak-actions { display: flex; gap: .4rem; align-items: center; }
    .setup-pajak-num { text-align: right; white-space: nowrap; }
    .setup-pajak-required { color: #b02a37; }
    .setup-pajak-rule { min-width: 260px; max-width: 520px; white-space: normal; }
</style>

<div class="setup-pajak-page">
    <div class="setup-pajak-toolbar">
        <h2 class="setup-pajak-title">Setup Biaya Jabatan dan UMP</h2>
        <form method="get" class="d-flex flex-wrap gap-2 align-items-center">
            <input type="text" name="search" value="{{ search }}" class="form-control setup-pajak-search"
                   placeholder="Cari UMP, peraturan, atau nilai..." aria-label="Cari Setup Pajak">
            <button type="submit" class="btn btn-secondary">Cari</button>
            {% if search %}<a class="btn btn-outline-secondary" href="{% url 'payroll:setuppajak' %}">Reset</a>{% endif %}
        </form>
        <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#setupPajakModal" onclick="resetSetupPajakForm()">
            <i class="bi bi-plus-lg"></i> Tambah Data
        </button>
    </div>

    {% if messages %}
        {% for message in messages %}
            <div class="alert alert-{% if message.tags == 'error' %}danger{% else %}{{ message.tags|default:'info' }}{% endif %} alert-dismissible fade show" role="alert">
                {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        {% endfor %}
    {% endif %}

    <div class="setup-pajak-table-wrap">
        <table class="table table-striped table-hover setup-pajak-table align-middle">
            <thead>
                <tr>
                    <th style="width: 60px;">No.</th>
                    <th class="text-end" style="width: 150px;">UMP</th>
                    <th>Peraturan UMP</th>
                    <th class="text-end" style="width: 170px;">Biaya Jabatan/Bulan</th>
                    <th class="text-end" style="width: 170px;">Biaya Jabatan/Tahun</th>
                    <th class="text-end" style="width: 130px;">Tgl Efektif (angka)</th>
                    <th style="width: 120px;">Aksi</th>
                </tr>
            </thead>
            <tbody>
                {% for item in setuppajak_list %}
                <tr>
                    <td>{{ forloop.counter }}</td>
                    <td class="setup-pajak-num">{{ item.ump|floatformat:2 }}</td>
                    <td class="setup-pajak-rule">{{ item.ppump }}</td>
                    <td class="setup-pajak-num">{{ item.byjbtbln|floatformat:2 }}</td>
                    <td class="setup-pajak-num">{{ item.byjbtthn|floatformat:2 }}</td>
                    <td class="setup-pajak-num">{{ item.tglefektif|floatformat:2 }}</td>
                    <td>
                        <div class="setup-pajak-actions">
                            <button type="button" class="btn btn-sm btn-secondary" title="Edit"
                                onclick="editSetupPajak('{{ item.id }}', '{{ item.ump }}', '{{ item.ppump|escapejs }}', '{{ item.byjbtbln }}', '{{ item.byjbtthn }}', '{{ item.tglefektif }}')">
                                <i class="bi bi-pencil-square"></i>
                            </button>
                            <form method="post" action="{% url 'payroll:delete_setuppajak' item.id %}" onsubmit="return confirm('Hapus data Setup Biaya Jabatan dan UMP ini?');">
                                {% csrf_token %}
                                <button type="submit" class="btn btn-sm btn-danger" title="Hapus"><i class="bi bi-trash"></i></button>
                            </form>
                        </div>
                    </td>
                </tr>
                {% empty %}
                <tr><td colspan="7" class="text-center text-muted py-4">Belum ada data Setup Biaya Jabatan dan UMP.</td></tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    <div class="text-muted small">Total data: {{ setuppajak_list|length }}</div>
</div>

<div class="modal fade" id="setupPajakModal" tabindex="-1" aria-labelledby="setupPajakModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <form method="post" action="{% url 'payroll:save_setuppajak' %}" id="setupPajakForm">
                {% csrf_token %}
                <input type="hidden" name="id" id="setupPajakId">
                <div class="modal-header">
                    <h5 class="modal-title" id="setupPajakModalLabel">Tambah Setup Biaya Jabatan dan UMP</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="card">
                        <div class="card-header">Informasi Biaya Jabatan dan UMP</div>
                        <div class="card-body">
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label for="setupUmp" class="form-label">UMP <span class="setup-pajak-required">*</span></label>
                                    <input type="number" class="form-control" name="ump" id="setupUmp" min="0" step="0.01" required>
                                </div>
                                <div class="col-md-6">
                                    <label for="setupTglefektif" class="form-label">Tgl Efektif (angka sesuai database) <span class="setup-pajak-required">*</span></label>
                                    <input type="number" class="form-control" name="tglefektif" id="setupTglefektif" min="0" step="0.01" required>
                                    <div class="form-text">Kolom database bertipe numeric; contoh data lama: 5.00.</div>
                                </div>
                                <div class="col-12">
                                    <label for="setupPpump" class="form-label">Peraturan UMP <span class="setup-pajak-required">*</span></label>
                                    <input type="text" class="form-control" name="ppump" id="setupPpump" maxlength="70" required>
                                    <div class="form-text">Maksimal 70 karakter.</div>
                                </div>
                                <div class="col-md-6">
                                    <label for="setupByjbtbln" class="form-label">Biaya Jabatan per Bulan <span class="setup-pajak-required">*</span></label>
                                    <input type="number" class="form-control" name="byjbtbln" id="setupByjbtbln" min="0" step="0.01" required>
                                </div>
                                <div class="col-md-6">
                                    <label for="setupByjbtthn" class="form-label">Biaya Jabatan per Tahun <span class="setup-pajak-required">*</span></label>
                                    <input type="number" class="form-control" name="byjbtthn" id="setupByjbtthn" min="0" step="0.01" required>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-text mt-2"><span class="setup-pajak-required">*</span> Semua field wajib diisi.</div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-secondary"><i class="bi bi-check-lg"></i> Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
function resetSetupPajakForm() {
    document.getElementById('setupPajakForm').reset();
    document.getElementById('setupPajakId').value = '';
    document.getElementById('setupPajakModalLabel').textContent = 'Tambah Setup Biaya Jabatan dan UMP';
}
function editSetupPajak(id, ump, ppump, byjbtbln, byjbtthn, tglefektif) {
    document.getElementById('setupPajakForm').reset();
    document.getElementById('setupPajakId').value = id;
    document.getElementById('setupUmp').value = ump;
    document.getElementById('setupPpump').value = ppump;
    document.getElementById('setupByjbtbln').value = byjbtbln;
    document.getElementById('setupByjbtthn').value = byjbtthn;
    document.getElementById('setupTglefektif').value = tglefektif;
    document.getElementById('setupPajakModalLabel').textContent = 'Edit Setup Biaya Jabatan dan UMP';
    bootstrap.Modal.getOrCreateInstance(document.getElementById('setupPajakModal')).show();
}
</script>
{% endblock %}