@extends('layouts.adminlte')

@section('title', 'MASTER BPJS')
@section('page_title', 'MASTER BPJS')

@push('styles')
    <link rel="stylesheet" href="{{ asset('vendor/datatables/css/dataTables.bootstrap5.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('vendor/datatables/css/responsive.bootstrap5.min.css') }}" />
@endpush

@section('content')
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <div>
                <h3 class="card-title m-0">Master BPJS</h3>
                <small class="text-muted">Kelola komponen, basis hitung, histori tarif, dan plafon regulasi BPJS.</small>
            </div>
            <button class="btn btn-primary btn-sm" id="btnAddBpjs"><i class="fas fa-plus me-1"></i>Tambah</button>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table id="bpjsTable" class="table table-striped table-hover align-middle w-100">
                    <thead>
                        <tr>
                            <th>No.</th>
                            <th>Kode</th>
                            <th>Komponen</th>
                            <th>Nama BPJS</th>
                            <th>Tipe</th>
                            <th>Basis</th>
                            <th>Default</th>
                            <th>Tarif Aktif</th>
                            <th>Plafon Aktif</th>
                            <th>Perusahaan (%)</th>
                            <th>Karyawan (%)</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="modal fade" id="bpjsModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="bpjsModalTitle">Tambah BPJS</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="bpjsForm">
                    <div class="modal-body">
                        <input type="hidden" id="bpjsId" />
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label class="form-label">Kode</label>
                                <input type="text" class="form-control" id="bpjsCode" maxlength="40" required />
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Komponen</label>
                                <select class="form-select" id="bpjsComponentCode" required>
                                    <option value="JKK">JKK</option>
                                    <option value="JKM">JKM</option>
                                    <option value="JHT">JHT</option>
                                    <option value="JP">JP</option>
                                    <option value="JPK">JPK</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Tipe</label>
                                <select class="form-select" id="bpjsType" required>
                                    <option value="KESEHATAN">KESEHATAN</option>
                                    <option value="KETENAGAKERJAAN">KETENAGAKERJAAN</option>
                                    <option value="LAINNYA">LAINNYA</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Nama BPJS</label>
                                <input type="text" class="form-control" id="bpjsName" maxlength="180" required />
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Basis</label>
                                <select class="form-select" id="bpjsBasisType" required>
                                    <option value="general">Basis Umum</option>
                                    <option value="jp">Basis JP</option>
                                    <option value="health">Basis Kesehatan</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Mode Default</label>
                                <select class="form-select" id="bpjsDefaultEnrollmentMode" required>
                                    <option value="always">Selalu Aktif</option>
                                    <option value="permanent">Default Tetap</option>
                                    <option value="manual">Manual / Opsional</option>
                                </select>
                            </div>
                        </div>

                        <div class="alert alert-info small py-2 mt-3 mb-3">
                            Tarif BPJS dikelola per periode. Komponen yang memakai plafon regulasi bisa dikelola dari tombol <strong>Plafon</strong>.
                        </div>

                        <div class="row g-3 mb-3">
                            <div class="col-md-4">
                                <label class="form-label">Urutan Tampil</label>
                                <input type="number" class="form-control" id="bpjsDisplayOrder" min="0" max="999" value="0" />
                            </div>
                            <div class="col-md-4 d-flex align-items-end">
                                <div class="form-check form-switch mb-2">
                                    <input class="form-check-input" type="checkbox" role="switch" id="bpjsUsesCeiling" />
                                    <label class="form-check-label" for="bpjsUsesCeiling">Pakai plafon regulasi</label>
                                </div>
                            </div>
                            <div class="col-md-4 d-flex align-items-end">
                                <div class="form-check form-switch mb-2">
                                    <input class="form-check-input" type="checkbox" role="switch" id="bpjsActive" checked />
                                    <label class="form-check-label" for="bpjsActive">Active</label>
                                </div>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Deskripsi</label>
                            <textarea class="form-control" id="bpjsDescription" rows="2"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="bpjsRateModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="bpjsRateModalTitle">Histori Tarif BPJS</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="bpjsRateParentId" />
                    <input type="hidden" id="bpjsRateHistoryId" />
                    <div class="card border mb-3">
                        <div class="card-body">
                            <div class="row g-2">
                                <div class="col-md-3">
                                    <label class="form-label">Efektif Mulai</label>
                                    <input type="date" class="form-control" id="bpjsRateEffectiveStart">
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label">Efektif Sampai</label>
                                    <input type="date" class="form-control" id="bpjsRateEffectiveEnd">
                                </div>
                                <div class="col-md-2">
                                    <label class="form-label">Perusahaan (%)</label>
                                    <input type="number" class="form-control" id="bpjsRateCompany" min="0" max="100" step="0.0001">
                                </div>
                                <div class="col-md-2">
                                    <label class="form-label">Karyawan (%)</label>
                                    <input type="number" class="form-control" id="bpjsRateEmployee" min="0" max="100" step="0.0001">
                                </div>
                                <div class="col-md-2 d-flex align-items-end">
                                    <div class="form-check form-switch mb-2">
                                        <input class="form-check-input" type="checkbox" role="switch" id="bpjsRateActive" checked />
                                        <label class="form-check-label" for="bpjsRateActive">Active</label>
                                    </div>
                                </div>
                                <div class="col-md-9">
                                    <label class="form-label">Catatan</label>
                                    <input type="text" class="form-control" id="bpjsRateNotes" maxlength="255">
                                </div>
                                <div class="col-md-3 d-flex align-items-end gap-2">
                                    <button type="button" class="btn btn-primary w-100" id="btnSaveBpjsRate">Simpan Rate</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-sm table-bordered align-middle mb-0" id="bpjsRateHistoryTable">
                            <thead>
                                <tr>
                                    <th>Mulai</th>
                                    <th>Sampai</th>
                                    <th>Perusahaan (%)</th>
                                    <th>Karyawan (%)</th>
                                    <th>Catatan</th>
                                    <th>Status</th>
                                    <th>Aksi</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="bpjsCeilingModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="bpjsCeilingModalTitle">Histori Plafon BPJS</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="bpjsCeilingParentId" />
                    <input type="hidden" id="bpjsCeilingHistoryId" />
                    <div class="card border mb-3">
                        <div class="card-body">
                            <div class="row g-2">
                                <div class="col-md-2">
                                    <label class="form-label">Efektif Mulai</label>
                                    <input type="date" class="form-control" id="bpjsCeilingEffectiveStart">
                                </div>
                                <div class="col-md-2">
                                    <label class="form-label">Efektif Sampai</label>
                                    <input type="date" class="form-control" id="bpjsCeilingEffectiveEnd">
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label">Plafon Minimum</label>
                                    <input type="number" class="form-control" id="bpjsCeilingMinNominal" min="0" step="0.01" placeholder="Opsional">
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label">Plafon Maksimum</label>
                                    <input type="number" class="form-control" id="bpjsCeilingMaxNominal" min="0" step="0.01" placeholder="Opsional">
                                </div>
                                <div class="col-md-2 d-flex align-items-end">
                                    <div class="form-check form-switch mb-2">
                                        <input class="form-check-input" type="checkbox" role="switch" id="bpjsCeilingActive" checked />
                                        <label class="form-check-label" for="bpjsCeilingActive">Active</label>
                                    </div>
                                </div>
                                <div class="col-md-9">
                                    <label class="form-label">Catatan</label>
                                    <input type="text" class="form-control" id="bpjsCeilingNotes" maxlength="255">
                                </div>
                                <div class="col-md-3 d-flex align-items-end gap-2">
                                    <button type="button" class="btn btn-primary w-100" id="btnSaveBpjsCeiling">Simpan Plafon</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-sm table-bordered align-middle mb-0" id="bpjsCeilingHistoryTable">
                            <thead>
                                <tr>
                                    <th>Mulai</th>
                                    <th>Sampai</th>
                                    <th>Minimum</th>
                                    <th>Maksimum</th>
                                    <th>Catatan</th>
                                    <th>Status</th>
                                    <th>Aksi</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('vendor/datatables/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/js/dataTables.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/js/responsive.bootstrap5.min.js') }}"></script>
    <script>
        $(function () {
            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
            if (csrfToken) $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': csrfToken } });

            const modal = new bootstrap.Modal(document.getElementById('bpjsModal'));
            const rateModal = new bootstrap.Modal(document.getElementById('bpjsRateModal'));
            const ceilingModal = new bootstrap.Modal(document.getElementById('bpjsCeilingModal'));
            const basisLabelMap = { general: 'Basis Umum', jp: 'Basis JP', health: 'Basis Kesehatan' };
            const defaultModeLabelMap = { always: 'Selalu aktif', permanent: 'Default tetap', manual: 'Manual' };
            const formatMoney = (value) => `Rp ${Number(value || 0).toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
            const hasNumber = (value) => Number(value || 0) > 0;
            const formatCeilingRange = (row) => {
                if (!row?.uses_ceiling) return '<span class="text-muted">Tidak pakai</span>';
                const min = Number(row.ceiling_min_nominal || 0);
                const max = Number(row.ceiling_max_nominal || row.ceiling_nominal || 0);
                if (!min && !max) return '<span class="text-warning">Belum diisi</span>';
                const lines = [];
                if (min) lines.push(`<div><span class="badge text-bg-light border">Min</span> ${formatMoney(min)}</div>`);
                if (max) lines.push(`<div><span class="badge text-bg-light border">Max</span> ${formatMoney(max)}</div>`);
                return lines.join('');
            };
            const table = $('#bpjsTable').DataTable({
                responsive: true,
                data: [],
                columns: [
                    { data: null, render: (d, t, r, m) => m.row + 1, orderable: false, searchable: false },
                    { data: 'code' },
                    { data: 'component_code' },
                    { data: 'name' },
                    { data: 'bpjs_type' },
                    { data: 'basis_type', render: (v) => basisLabelMap[v] || '-' },
                    { data: 'default_enrollment_mode', render: (v) => defaultModeLabelMap[v] || '-' },
                    { data: null, render: (d, t, r) => {
                        const active = (r.rate_histories || []).find(x => x.is_active);
                        if (!active) return '<span class="text-muted">Belum ada</span>';
                        return `${active.effective_start || '-'} s/d ${active.effective_end || 'seterusnya'}`;
                    }},
                    { data: null, render: (d, t, r) => formatCeilingRange(r) },
                    { data: 'rate_company_percent', render: (v) => `${Number(v || 0).toLocaleString('id-ID')}%` },
                    { data: 'rate_employee_percent', render: (v) => `${Number(v || 0).toLocaleString('id-ID')}%` },
                    {
                        data: null,
                        orderable: false,
                        render: (d, t, r) => `
                            <button class="btn btn-sm btn-outline-warning btn-rate" data-id="${r.id}">Rate</button>
                            <button class="btn btn-sm btn-outline-info btn-ceiling" data-id="${r.id}">Plafon</button>
                            <button class="btn btn-sm btn-outline-primary btn-edit" data-id="${r.id}">Edit</button>
                            <button class="btn btn-sm btn-outline-danger btn-delete" data-id="${r.id}">Delete</button>
                        `
                    }
                ]
            });

            let rowsCache = [];
            const findRow = (id) => rowsCache.find((x) => Number(x.id) === Number(id));

            const loadData = () => {
                $.getJSON('{{ route('master_bpjs.data') }}')
                    .done((resp) => {
                        rowsCache = resp.data || [];
                        table.clear().rows.add(rowsCache).draw();
                    })
                    .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Failed load data', 'error'));
            };

            const resetMainForm = () => {
                $('#bpjsId').val('');
                $('#bpjsCode').val('');
                $('#bpjsComponentCode').val('JKK');
                $('#bpjsName').val('');
                $('#bpjsType').val('KESEHATAN');
                $('#bpjsBasisType').val('general');
                $('#bpjsDefaultEnrollmentMode').val('always');
                $('#bpjsDisplayOrder').val('0');
                $('#bpjsUsesCeiling').prop('checked', false);
                $('#bpjsDescription').val('');
                $('#bpjsActive').prop('checked', true);
            };

            const resetRateForm = () => {
                $('#bpjsRateHistoryId').val('');
                $('#bpjsRateEffectiveStart').val('');
                $('#bpjsRateEffectiveEnd').val('');
                $('#bpjsRateCompany').val('0');
                $('#bpjsRateEmployee').val('0');
                $('#bpjsRateNotes').val('');
                $('#bpjsRateActive').prop('checked', true);
            };

            const resetCeilingForm = () => {
                $('#bpjsCeilingHistoryId').val('');
                $('#bpjsCeilingEffectiveStart').val('');
                $('#bpjsCeilingEffectiveEnd').val('');
                $('#bpjsCeilingMinNominal').val('');
                $('#bpjsCeilingMaxNominal').val('');
                $('#bpjsCeilingNotes').val('');
                $('#bpjsCeilingActive').prop('checked', true);
            };

            const renderRateHistoryTable = (row) => {
                const tbody = $('#bpjsRateHistoryTable tbody');
                tbody.empty();
                const histories = row?.rate_histories || [];
                if (!histories.length) {
                    tbody.append('<tr><td colspan="7" class="text-center text-muted">Belum ada histori tarif.</td></tr>');
                    return;
                }
                histories.forEach((item) => {
                    tbody.append(`
                        <tr>
                            <td>${item.effective_start || '-'}</td>
                            <td>${item.effective_end || 'seterusnya'}</td>
                            <td>${Number(item.rate_company_percent || 0).toLocaleString('id-ID')}%</td>
                            <td>${Number(item.rate_employee_percent || 0).toLocaleString('id-ID')}%</td>
                            <td>${item.notes || '-'}</td>
                            <td>${item.is_active ? '<span class="badge text-bg-success">Active</span>' : '<span class="badge text-bg-secondary">Nonaktif</span>'}</td>
                            <td>
                                <button class="btn btn-sm btn-outline-primary btn-edit-rate" data-id="${item.id}">Edit</button>
                                <button class="btn btn-sm btn-outline-danger btn-delete-rate" data-id="${item.id}">Delete</button>
                            </td>
                        </tr>
                    `);
                });
            };

            const renderCeilingHistoryTable = (row) => {
                const tbody = $('#bpjsCeilingHistoryTable tbody');
                tbody.empty();
                const histories = row?.ceiling_histories || [];
                if (!histories.length) {
                    tbody.append('<tr><td colspan="7" class="text-center text-muted">Belum ada histori plafon.</td></tr>');
                    return;
                }
                histories.forEach((item) => {
                    const min = hasNumber(item.ceiling_min_nominal) ? formatMoney(item.ceiling_min_nominal) : '<span class="text-muted">-</span>';
                    const maxValue = item.ceiling_max_nominal || item.ceiling_nominal;
                    const max = hasNumber(maxValue) ? formatMoney(maxValue) : '<span class="text-muted">-</span>';
                    tbody.append(`
                        <tr>
                            <td>${item.effective_start || '-'}</td>
                            <td>${item.effective_end || 'seterusnya'}</td>
                            <td>${min}</td>
                            <td>${max}</td>
                            <td>${item.notes || '-'}</td>
                            <td>${item.is_active ? '<span class="badge text-bg-success">Active</span>' : '<span class="badge text-bg-secondary">Nonaktif</span>'}</td>
                            <td>
                                <button class="btn btn-sm btn-outline-primary btn-edit-ceiling" data-id="${item.id}">Edit</button>
                                <button class="btn btn-sm btn-outline-danger btn-delete-ceiling" data-id="${item.id}">Delete</button>
                            </td>
                        </tr>
                    `);
                });
            };

            $('#btnAddBpjs').on('click', function () {
                $('#bpjsModalTitle').text('Tambah BPJS');
                resetMainForm();
                modal.show();
            });

            $('#bpjsTable').on('click', '.btn-edit', function () {
                const row = findRow($(this).data('id'));
                if (!row) return;
                $('#bpjsModalTitle').text('Edit BPJS');
                $('#bpjsId').val(row.id);
                $('#bpjsCode').val(row.code || '');
                $('#bpjsComponentCode').val(row.component_code || 'JKK');
                $('#bpjsName').val(row.name || '');
                $('#bpjsType').val(row.bpjs_type || 'KESEHATAN');
                $('#bpjsBasisType').val(row.basis_type || 'general');
                $('#bpjsDefaultEnrollmentMode').val(row.default_enrollment_mode || 'manual');
                $('#bpjsDisplayOrder').val(Number(row.display_order || 0));
                $('#bpjsUsesCeiling').prop('checked', !!row.uses_ceiling);
                $('#bpjsDescription').val(row.description || '');
                $('#bpjsActive').prop('checked', !!row.is_active);
                modal.show();
            });

            $('#bpjsForm').on('submit', function (e) {
                e.preventDefault();
                const id = $('#bpjsId').val();
                const payload = {
                    code: ($('#bpjsCode').val() || '').toString().trim(),
                    component_code: ($('#bpjsComponentCode').val() || '').toString().trim(),
                    name: ($('#bpjsName').val() || '').toString().trim(),
                    bpjs_type: $('#bpjsType').val(),
                    basis_type: $('#bpjsBasisType').val(),
                    default_enrollment_mode: $('#bpjsDefaultEnrollmentMode').val(),
                    display_order: $('#bpjsDisplayOrder').val(),
                    uses_ceiling: $('#bpjsUsesCeiling').is(':checked') ? 1 : 0,
                    description: ($('#bpjsDescription').val() || '').toString(),
                    is_active: $('#bpjsActive').is(':checked') ? 1 : 0
                };
                if (!payload.code || !payload.component_code || !payload.name || !payload.bpjs_type) {
                    Swal.fire('Warning', 'Kode, Komponen, Nama, dan Tipe BPJS wajib diisi', 'warning');
                    return;
                }
                $.ajax({
                    url: id ? `{{ url('/master-bpjs') }}/${id}` : '{{ route('master_bpjs.store') }}',
                    type: id ? 'PUT' : 'POST',
                    data: payload
                }).done((resp) => {
                    modal.hide();
                    loadData();
                    Swal.fire('Success', resp?.message || 'Saved', 'success');
                }).fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Save failed', 'error'));
            });

            $('#bpjsTable').on('click', '.btn-rate', function () {
                const row = findRow($(this).data('id'));
                if (!row) return;
                $('#bpjsRateModalTitle').text(`Histori Tarif - ${row.code} ${row.name}`);
                $('#bpjsRateParentId').val(row.id);
                resetRateForm();
                renderRateHistoryTable(row);
                rateModal.show();
            });

            $('#btnSaveBpjsRate').on('click', function () {
                const bpjsId = $('#bpjsRateParentId').val();
                const historyId = $('#bpjsRateHistoryId').val();
                const payload = {
                    effective_start: $('#bpjsRateEffectiveStart').val(),
                    effective_end: $('#bpjsRateEffectiveEnd').val(),
                    rate_company_percent: $('#bpjsRateCompany').val(),
                    rate_employee_percent: $('#bpjsRateEmployee').val(),
                    notes: $('#bpjsRateNotes').val(),
                    is_active: $('#bpjsRateActive').is(':checked') ? 1 : 0,
                };
                $.ajax({
                    url: historyId ? `{{ url('/master-bpjs/rate-histories') }}/${historyId}` : `{{ url('/master-bpjs') }}/${bpjsId}/rate-histories`,
                    type: historyId ? 'PUT' : 'POST',
                    data: payload
                }).done((resp) => {
                    loadData();
                    resetRateForm();
                    Swal.fire('Success', resp?.message || 'Saved', 'success');
                    setTimeout(() => renderRateHistoryTable(findRow(bpjsId)), 300);
                }).fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Save failed', 'error'));
            });

            $('#bpjsRateHistoryTable').on('click', '.btn-edit-rate', function () {
                const row = findRow($('#bpjsRateParentId').val());
                const item = (row?.rate_histories || []).find((x) => Number(x.id) === Number($(this).data('id')));
                if (!item) return;
                $('#bpjsRateHistoryId').val(item.id);
                $('#bpjsRateEffectiveStart').val(item.effective_start || '');
                $('#bpjsRateEffectiveEnd').val(item.effective_end || '');
                $('#bpjsRateCompany').val(Number(item.rate_company_percent || 0));
                $('#bpjsRateEmployee').val(Number(item.rate_employee_percent || 0));
                $('#bpjsRateNotes').val(item.notes || '');
                $('#bpjsRateActive').prop('checked', !!item.is_active);
            });

            $('#bpjsRateHistoryTable').on('click', '.btn-delete-rate', function () {
                const historyId = Number($(this).data('id'));
                const bpjsId = Number($('#bpjsRateParentId').val());
                $.ajax({
                    url: `{{ url('/master-bpjs/rate-histories') }}/${historyId}`,
                    type: 'DELETE'
                }).done((resp) => {
                    loadData();
                    resetRateForm();
                    Swal.fire('Deleted', resp?.message || 'Deleted', 'success');
                    setTimeout(() => renderRateHistoryTable(findRow(bpjsId)), 300);
                }).fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Delete failed', 'error'));
            });

            $('#bpjsTable').on('click', '.btn-ceiling', function () {
                const row = findRow($(this).data('id'));
                if (!row) return;
                $('#bpjsCeilingModalTitle').text(`Histori Plafon - ${row.code} ${row.name}`);
                $('#bpjsCeilingParentId').val(row.id);
                resetCeilingForm();
                renderCeilingHistoryTable(row);
                ceilingModal.show();
            });

            $('#btnSaveBpjsCeiling').on('click', function () {
                const bpjsId = $('#bpjsCeilingParentId').val();
                const historyId = $('#bpjsCeilingHistoryId').val();
                const payload = {
                    effective_start: $('#bpjsCeilingEffectiveStart').val(),
                    effective_end: $('#bpjsCeilingEffectiveEnd').val(),
                    ceiling_min_nominal: $('#bpjsCeilingMinNominal').val(),
                    ceiling_max_nominal: $('#bpjsCeilingMaxNominal').val(),
                    ceiling_nominal: $('#bpjsCeilingMaxNominal').val(),
                    notes: $('#bpjsCeilingNotes').val(),
                    is_active: $('#bpjsCeilingActive').is(':checked') ? 1 : 0,
                };
                $.ajax({
                    url: historyId ? `{{ url('/master-bpjs/ceiling-histories') }}/${historyId}` : `{{ url('/master-bpjs') }}/${bpjsId}/ceiling-histories`,
                    type: historyId ? 'PUT' : 'POST',
                    data: payload
                }).done((resp) => {
                    loadData();
                    resetCeilingForm();
                    Swal.fire('Success', resp?.message || 'Saved', 'success');
                    setTimeout(() => renderCeilingHistoryTable(findRow(bpjsId)), 300);
                }).fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Save failed', 'error'));
            });

            $('#bpjsCeilingHistoryTable').on('click', '.btn-edit-ceiling', function () {
                const row = findRow($('#bpjsCeilingParentId').val());
                const item = (row?.ceiling_histories || []).find((x) => Number(x.id) === Number($(this).data('id')));
                if (!item) return;
                $('#bpjsCeilingHistoryId').val(item.id);
                $('#bpjsCeilingEffectiveStart').val(item.effective_start || '');
                $('#bpjsCeilingEffectiveEnd').val(item.effective_end || '');
                $('#bpjsCeilingMinNominal').val(item.ceiling_min_nominal ? Number(item.ceiling_min_nominal || 0) : '');
                $('#bpjsCeilingMaxNominal').val(item.ceiling_max_nominal || item.ceiling_nominal ? Number(item.ceiling_max_nominal || item.ceiling_nominal || 0) : '');
                $('#bpjsCeilingNotes').val(item.notes || '');
                $('#bpjsCeilingActive').prop('checked', !!item.is_active);
            });

            $('#bpjsCeilingHistoryTable').on('click', '.btn-delete-ceiling', function () {
                const historyId = Number($(this).data('id'));
                const bpjsId = Number($('#bpjsCeilingParentId').val());
                $.ajax({
                    url: `{{ url('/master-bpjs/ceiling-histories') }}/${historyId}`,
                    type: 'DELETE'
                }).done((resp) => {
                    loadData();
                    resetCeilingForm();
                    Swal.fire('Deleted', resp?.message || 'Deleted', 'success');
                    setTimeout(() => renderCeilingHistoryTable(findRow(bpjsId)), 300);
                }).fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Delete failed', 'error'));
            });

            $('#bpjsTable').on('click', '.btn-delete', function () {
                const id = Number($(this).data('id'));
                Swal.fire({
                    title: 'Delete BPJS?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, delete'
                }).then((res) => {
                    if (!res.isConfirmed) return;
                    $.ajax({
                        url: `{{ url('/master-bpjs') }}/${id}`,
                        type: 'DELETE'
                    }).done((resp) => {
                        loadData();
                        Swal.fire('Deleted', resp?.message || 'Deleted', 'success');
                    }).fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Delete failed', 'error'));
                });
            });

            loadData();
        });
    </script>
@endpush