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

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

<div class="bpjs-page">
    <div class="bpjs-toolbar">
        <h2 class="bpjs-title">Setup BPJS Ketenagakerjaan &amp; Kesehatan</h2>
        <form method="get" class="d-flex flex-wrap gap-2 align-items-center">
            <input type="text" name="search" value="{{ search }}" class="form-control bpjs-search"
                   placeholder="Cari tanggal, batas upah, atau tarif..." aria-label="Cari data BPJS">
            <button type="submit" class="btn btn-secondary">Cari</button>
            {% if search %}<a class="btn btn-outline-secondary" href="{% url 'payroll:bpjs' %}">Reset</a>{% endif %}
        </form>
        <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#bpjsModal" onclick="resetBpjsForm()">
            <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="bpjs-table-wrap">
        <table class="table table-striped table-hover bpjs-table align-middle">
            <thead>
                <tr>
                    <th>No.</th>
                    <th>Tgl Efektif</th>
                    <th class="text-end">Batas Upah (DUP)</th>
                    <th class="text-end">JPP (%)</th>
                    <th class="text-end">JPK (%)</th>
                    <th class="text-end">Kecelakaan 1 (%)</th>
                    <th class="text-end">Kecelakaan 2 (%)</th>
                    <th class="text-end">Kematian 1 (%)</th>
                    <th class="text-end">Kematian 2 (%)</th>
                    <th class="text-end">Hari Tua 1 (%)</th>
                    <th class="text-end">Hari Tua 2 (%)</th>
                    <th class="text-end">Kesehatan 1 (%)</th>
                    <th class="text-end">Kesehatan 2 (%)</th>
                    <th class="text-end">Dasar Perhitungan</th>
                    <th>BPJS Tanggungan</th>
                    <th>Aksi</th>
                </tr>
            </thead>
            <tbody>
                {% for item in bpjs_list %}
                <tr>
                    <td>{{ forloop.counter }}</td>
                    <td>{{ item.tgl }}</td>
                    <td class="bpjs-num currency-idr" data-value="{{ item.dup }}">{{ item.dup|floatformat:0 }}</td>
                    <td class="bpjs-num">{{ item.jpp|floatformat:2 }}%</td>
                    <td class="bpjs-num">{{ item.jpk|floatformat:2 }}%</td>
                    <td class="bpjs-num">{{ item.jkcelakaan|floatformat:2 }}%</td>
                    <td class="bpjs-num">{{ item.jkcelakaan2|floatformat:2 }}%</td>
                    <td class="bpjs-num">{{ item.jkematian1|floatformat:2 }}%</td>
                    <td class="bpjs-num">{{ item.jkematian2|floatformat:2 }}%</td>
                    <td class="bpjs-num">{{ item.jharitua1|floatformat:2 }}%</td>
                    <td class="bpjs-num">{{ item.jharitua2|floatformat:2 }}%</td>
                    <td class="bpjs-num">{{ item.jkesehatan1|floatformat:2 }}%</td>
                    <td class="bpjs-num">{{ item.jkeshatan2|floatformat:2 }}%</td>
                    <td class="bpjs-num currency-idr" data-value="{{ item.basic_calculation }}">{{ item.basic_calculation|floatformat:0 }}</td>
                    <td>{{ item.bpjstgg|default:"-" }}</td>
                    <td>
                        <div class="bpjs-actions">
                            <button type="button" class="btn btn-sm btn-secondary" title="Edit"
                                onclick="editBpjs(
                                    '{{ item.id }}', '{{ item.dup }}', '{{ item.jpp }}', '{{ item.jpk }}',
                                    '{{ item.tgl }}', '{{ item.jkcelakaan }}', '{{ item.jkcelakaan2 }}',
                                    '{{ item.jkematian1 }}', '{{ item.jkematian2 }}', '{{ item.jharitua1 }}',
                                    '{{ item.jharitua2 }}', '{{ item.jkesehatan1 }}', '{{ item.jkeshatan2 }}',
                                    '{{ item.basic_calculation }}', '{{ item.bpjstgg|default_if_none:""|escapejs }}'
                                )">
                                <i class="bi bi-pencil-square"></i>
                            </button>
                            <form method="post" action="{% url 'payroll:delete_bpjs' item.id %}" onsubmit="return confirm('Hapus data BPJS 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="16" class="text-center text-muted py-4">Belum ada data BPJS.</td></tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    <div class="text-muted small">Total data: {{ bpjs_list|length }}</div>
</div>

<div class="modal fade" id="bpjsModal" tabindex="-1" aria-labelledby="bpjsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <form method="post" action="{% url 'payroll:save_bpjs' %}" id="bpjsForm">
                {% csrf_token %}
                <input type="hidden" name="id" id="bpjsId">
                <div class="modal-header">
                    <h5 class="modal-title" id="bpjsModalLabel">Tambah Setup BPJS</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="card mb-3">
                        <div class="card-header">Informasi Umum</div>
                        <div class="card-body">
                            <div class="row g-3">
                                <div class="col-md-4">
                                    <label for="bpjsTgl" class="form-label bpjs-form-label">Tanggal Efektif <span class="bpjs-required">*</span></label>
                                    <input type="date" class="form-control" name="tgl" id="bpjsTgl" required>
                                </div>
                                <div class="col-md-4">
                                    <label for="bpjsDup" class="form-label bpjs-form-label">Batas Upah (DUP) <span class="bpjs-required">*</span></label>
                                    <input type="number" class="form-control" name="dup" id="bpjsDup" min="0" step="0.01" required>
                                </div>
                                <div class="col-md-4">
                                    <label for="bpjsBasic" class="form-label bpjs-form-label">Dasar Perhitungan <span class="bpjs-required">*</span></label>
                                    <input type="number" class="form-control" name="basic_calculation" id="bpjsBasic" min="0" step="0.01" required>
                                </div>
                                <div class="col-md-4">
                                    <label for="bpjsTgg" class="form-label bpjs-form-label">BPJS Tanggungan</label>
                                    <input type="text" class="form-control" name="bpjstgg" id="bpjsTgg" maxlength="100">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-header">Persentase Iuran (%)</div>
                        <div class="card-body">
                            <div class="row g-3">
                                <div class="col-md-3">
                                    <label for="bpjsJpp" class="form-label">JPP</label>
                                    <input type="number" class="form-control" name="jpp" id="bpjsJpp" min="0" step="0.01" required>
                                </div>
                                <div class="col-md-3">
                                    <label for="bpjsJpk" class="form-label">JPK</label>
                                    <input type="number" class="form-control" name="jpk" id="bpjsJpk" min="0" step="0.01" required>
                                </div>
                                <div class="col-md-3">
                                    <label for="bpjsKec1" class="form-label">Kecelakaan 1</label>
                                    <input type="number" class="form-control" name="jkcelakaan" id="bpjsKec1" min="0" step="0.0001" required>
                                </div>
                                <div class="col-md-3">
                                    <label for="bpjsKec2" class="form-label">Kecelakaan 2</label>
                                    <input type="number" class="form-control" name="jkcelakaan2" id="bpjsKec2" min="0" step="0.0001" required>
                                </div>
                                <div class="col-md-3">
                                    <label for="bpjsKem1" class="form-label">Kematian 1</label>
                                    <input type="number" class="form-control" name="jkematian1" id="bpjsKem1" min="0" step="0.0001" required>
                                </div>
                                <div class="col-md-3">
                                    <label for="bpjsKem2" class="form-label">Kematian 2</label>
                                    <input type="number" class="form-control" name="jkematian2" id="bpjsKem2" min="0" step="0.0001" required>
                                </div>
                                <div class="col-md-3">
                                    <label for="bpjsHari1" class="form-label">Hari Tua 1</label>
                                    <input type="number" class="form-control" name="jharitua1" id="bpjsHari1" min="0" step="0.0001" required>
                                </div>
                                <div class="col-md-3">
                                    <label for="bpjsHari2" class="form-label">Hari Tua 2</label>
                                    <input type="number" class="form-control" name="jharitua2" id="bpjsHari2" min="0" step="0.0001" required>
                                </div>
                                <div class="col-md-3">
                                    <label for="bpjsKes1" class="form-label">Kesehatan 1</label>
                                    <input type="number" class="form-control" name="jkesehatan1" id="bpjsKes1" min="0" step="0.0001" required>
                                </div>
                                <div class="col-md-3">
                                    <label for="bpjsKes2" class="form-label">Kesehatan 2</label>
                                    <input type="number" class="form-control" name="jkeshatan2" id="bpjsKes2" min="0" step="0.0001" required>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-text mt-2"><span class="bpjs-required">*</span> 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>
document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.currency-idr').forEach(function (cell) {
        const value = Number(cell.dataset.value);
        if (Number.isFinite(value)) {
            cell.textContent = new Intl.NumberFormat('id-ID', {
                maximumFractionDigits: 0,
                minimumFractionDigits: 0
            }).format(value);
        }
    });
});

function resetBpjsForm() {
    document.getElementById('bpjsForm').reset();
    document.getElementById('bpjsId').value = '';
    document.getElementById('bpjsModalLabel').textContent = 'Tambah Setup BPJS';
}

function editBpjs(id, dup, jpp, jpk, tgl, kec1, kec2, kem1, kem2, hari1, hari2, kes1, kes2, basic, tgg) {
    document.getElementById('bpjsForm').reset();
    document.getElementById('bpjsId').value = id;
    document.getElementById('bpjsDup').value = dup;
    document.getElementById('bpjsJpp').value = jpp;
    document.getElementById('bpjsJpk').value = jpk;
    document.getElementById('bpjsTgl').value = tgl;
    document.getElementById('bpjsKec1').value = kec1;
    document.getElementById('bpjsKec2').value = kec2;
    document.getElementById('bpjsKem1').value = kem1;
    document.getElementById('bpjsKem2').value = kem2;
    document.getElementById('bpjsHari1').value = hari1;
    document.getElementById('bpjsHari2').value = hari2;
    document.getElementById('bpjsKes1').value = kes1;
    document.getElementById('bpjsKes2').value = kes2;
    document.getElementById('bpjsBasic').value = basic;
    document.getElementById('bpjsTgg').value = tgg || '';
    document.getElementById('bpjsModalLabel').textContent = 'Edit Setup BPJS';
    bootstrap.Modal.getOrCreateInstance(document.getElementById('bpjsModal')).show();
}
</script>
{% endblock %}