@extends('layouts.adminlte')

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

@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') }}" />
    <style>
        #ruleDetailsModal .modal-dialog {
            width: min(96vw, 1480px);
            max-width: min(96vw, 1480px);
        }

        #ruleDetailsModal .modal-content {
            height: min(92vh, 920px);
            overflow: hidden;
            border: 0;
            border-radius: 14px;
            box-shadow: 0 24px 70px rgba(15, 23, 42, .28);
        }

        #ruleDetailsModal .modal-header {
            padding: 1rem 1.25rem;
            background: linear-gradient(135deg, #123b72, #1769aa);
            color: #fff;
            border: 0;
        }

        #ruleDetailsModal .modal-header .btn-close {
            filter: invert(1) grayscale(100%) brightness(200%);
        }

        #ruleDetailsModal .modal-body {
            display: flex;
            flex-direction: column;
            min-height: 0;
            padding: 0;
            background: #f4f7fb;
            overflow: hidden;
        }

        .rule-modal-subtitle {
            color: rgba(255, 255, 255, .78);
        }

        .rule-modal-tabs {
            flex: 0 0 auto;
            gap: .4rem;
            padding: .75rem 1.25rem 0;
            background: #fff;
            border-bottom: 1px solid #dbe3ec;
        }

        .rule-modal-tabs .nav-link {
            padding: .65rem 1rem;
            color: #526171;
            font-weight: 700;
            border: 0;
            border-bottom: 3px solid transparent;
        }

        .rule-modal-tabs .nav-link.active {
            color: #0d5ea6;
            background: transparent;
            border-bottom-color: #0d6efd;
        }

        .rule-tab-content {
            min-height: 0;
            flex: 1 1 auto;
            overflow: hidden;
        }

        .rule-tab-pane {
            height: 100%;
            padding: 1rem 1.25rem 1.25rem;
            overflow: auto;
        }

        .rule-panel {
            padding: 1rem;
            background: #fff;
            border: 1px solid #dce5ee;
            border-radius: 10px;
            box-shadow: 0 2px 8px rgba(15, 23, 42, .04);
        }

        .rule-panel-title {
            margin: 0;
            color: #17324d;
            font-size: .95rem;
            font-weight: 800;
        }

        .rule-panel-subtitle {
            margin-top: .2rem;
            color: #708090;
            font-size: .78rem;
        }

        .rule-metadata-grid .form-label {
            margin-bottom: .3rem;
            color: #607080;
            font-size: .72rem;
            font-weight: 800;
            letter-spacing: .04em;
            text-transform: uppercase;
        }

        .rule-metadata-grid .form-control:disabled,
        #ruleDetailsModal .table .form-control:disabled,
        #ruleDetailsModal .table .form-select:disabled {
            color: #203040;
            background: #f5f8fb;
            border-color: #e0e7ef;
            opacity: 1;
        }

        .rule-stat {
            height: 100%;
            padding: .9rem 1rem;
            background: #fff;
            border: 1px solid #dce5ee;
            border-left: 4px solid #0d6efd;
            border-radius: 9px;
        }

        .rule-stat-label {
            color: #718096;
            font-size: .7rem;
            font-weight: 800;
            letter-spacing: .05em;
            text-transform: uppercase;
        }

        .rule-stat-value {
            margin-top: .25rem;
            color: #17324d;
            font-size: 1.35rem;
            font-weight: 800;
        }

        #ruleDetailsModal .table {
            --bs-table-striped-bg: #f7f9fc;
            margin-bottom: 0;
        }

        #ruleDetailsModal .table thead th {
            padding: .7rem .65rem;
            color: #33465a;
            background: #edf3f8;
            border-bottom: 1px solid #ccd8e4;
            font-size: .72rem;
            font-weight: 800;
            letter-spacing: .035em;
            text-transform: uppercase;
            white-space: nowrap;
        }

        #ruleDetailsModal .table tbody td {
            padding: .45rem .65rem;
            vertical-align: middle;
        }

        .rule-table-scroll {
            max-height: calc(92vh - 260px);
            overflow: auto;
            border: 1px solid #dce5ee;
            border-radius: 9px;
            background: #fff;
        }

        .rule-table-scroll thead {
            position: sticky;
            top: 0;
            z-index: 2;
        }

        .rule-category-badge {
            display: inline-flex;
            min-width: 30px;
            justify-content: center;
            padding: .25rem .45rem;
            color: #075985;
            background: #e0f2fe;
            border-radius: 999px;
            font-size: .75rem;
            font-weight: 800;
        }

        .rule-frequency-badge {
            display: inline-flex;
            padding: .25rem .5rem;
            color: #475569;
            background: #eef2f6;
            border-radius: 999px;
            font-size: .72rem;
            font-weight: 700;
            text-transform: capitalize;
        }

        #ruleDetailsModal .rupiah-input {
            min-width: 150px;
            color: #17324d;
            font-variant-numeric: tabular-nums;
            font-weight: 700;
            text-align: right;
        }

        @media (max-width: 991.98px) {
            #ruleDetailsModal .modal-dialog {
                width: 100%;
                max-width: 100%;
                height: 100%;
                margin: 0;
            }

            #ruleDetailsModal .modal-content {
                height: 100%;
                border-radius: 0;
            }

            .rule-table-scroll {
                max-height: calc(100vh - 250px);
            }
        }
    </style>
@endpush

@section('content')
    <div class="card border-success">
        <div class="card-header d-flex justify-content-between align-items-center">
            <div>
                <h3 class="card-title m-0"><i class="fas fa-check-circle text-success me-1"></i>PPh21 Payroll - Rule Manager</h3>
                <small class="text-muted">Sumber utama perhitungan PPh21 payroll. Sistem memilih versi aktif berdasarkan tanggal periode penggajian.</small>
            </div>
            <span class="badge bg-success">DIPAKAI PAYROLL</span>
        </div>
        <div class="card-body">
            <div class="alert alert-success py-2 mb-2">
                <strong>Aturan yang digunakan:</strong> versi berstatus <span class="badge bg-success">active</span> pada tanggal periode payroll.
                Saat ini menggunakan <strong id="activePph21RuleName">memuat aturan aktif...</strong>. Aturan aktif dikunci; gunakan <strong>Salin Draft</strong> untuk perubahan berikutnya.
            </div>
            <div id="pph21ReadinessAlert" class="alert alert-warning py-2 d-none"></div>
            <div class="table-responsive">
                <table id="taxRuleTable" class="table table-sm table-striped align-middle w-100">
                    <thead>
                        <tr>
                            <th>Kode</th>
                            <th>Nama</th>
                            <th>Berlaku</th>
                            <th>Status</th>
                            <th>Referensi</th>
                            <th>Isi Aturan</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="card border-secondary">
        <div class="card-header d-flex justify-content-between align-items-center">
            <div>
                <h3 class="card-title m-0"><i class="fas fa-archive text-secondary me-1"></i>Master Pajak Umum / Data Referensi</h3>
                <small class="text-muted">Tabel ini belum terhubung ke kalkulasi payroll. Baris PPh21 5% di bawah tidak digunakan oleh PPh21 Rule Manager.</small>
            </div>
            <div class="d-flex align-items-center gap-2">
                <span class="badge bg-secondary">TIDAK DIPAKAI PPH21 PAYROLL</span>
                <button class="btn btn-outline-secondary btn-sm" id="btnAddPajak"><i class="fas fa-plus me-1"></i>Tambah Referensi</button>
            </div>
        </div>
        <div class="card-body">
            <div class="alert alert-secondary py-2">
                <strong>Catatan:</strong> fallback sementara untuk karyawan tanpa Status PTKP memakai tarif internal
                <strong>5% jika memiliki NPWP</strong> atau <strong>6% jika tidak memiliki NPWP</strong>, bukan tarif dari tabel referensi ini.
            </div>
            <div class="table-responsive">
                <table id="pajakTable" class="table table-striped table-hover align-middle w-100">
                    <thead>
                        <tr>
                            <th>No.</th>
                            <th>Kode</th>
                            <th>Nama Pajak</th>
                            <th>Tarif (%)</th>
                            <th>Pemakaian Sistem</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="modal fade" id="copyRuleModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Salin Aturan Menjadi Draft</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form id="copyRuleForm">
                    <div class="modal-body">
                        <input type="hidden" id="copyRuleSourceId">
                        <div class="mb-3">
                            <label class="form-label">Kode Versi Baru</label>
                            <input class="form-control" id="copyRuleCode" required maxlength="60">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Nama Aturan</label>
                            <input class="form-control" id="copyRuleName" required maxlength="180">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Mulai Berlaku</label>
                            <input type="date" class="form-control" id="copyRuleEffectiveFrom" required>
                        </div>
                        <div>
                            <label class="form-label">Referensi Regulasi</label>
                            <input class="form-control" id="copyRuleReference" maxlength="255">
                        </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-primary">Buat Draft</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="ruleDetailsModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="d-flex align-items-center gap-3">
                        <div>
                            <h5 class="modal-title fw-bold mb-1" id="ruleDetailsTitle">Detail Aturan PPh21</h5>
                            <small class="rule-modal-subtitle" id="ruleDetailsSubtitle"></small>
                        </div>
                        <span class="badge rounded-pill d-none" id="ruleDetailsStatus"></span>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <ul class="nav rule-modal-tabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#ruleOverviewPane" type="button">
                                <i class="fas fa-chart-pie me-1"></i>Ringkasan
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#rulePtkpPane" type="button">
                                <i class="fas fa-users me-1"></i>Mapping PTKP <span class="badge bg-secondary ms-1" id="rulePtkpCount">0</span>
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#ruleTerPane" type="button">
                                <i class="fas fa-layer-group me-1"></i>Lapisan TER <span class="badge bg-secondary ms-1" id="ruleTerCount">0</span>
                            </button>
                        </li>
                    </ul>

                    <div class="tab-content rule-tab-content">
                        <div class="tab-pane fade show active rule-tab-pane" id="ruleOverviewPane">
                            <form id="ruleMetadataForm" class="rule-panel mb-3">
                                <input type="hidden" id="ruleDetailId">
                                <div class="d-flex justify-content-between align-items-start gap-3 mb-3">
                                    <div>
                                        <h6 class="rule-panel-title">Identitas Versi Aturan</h6>
                                        <div class="rule-panel-subtitle">Aturan aktif hanya dapat dilihat. Salin menjadi draft untuk melakukan perubahan.</div>
                                    </div>
                                    <button class="btn btn-primary btn-sm rule-draft-action" type="submit">
                                        <i class="fas fa-save me-1"></i>Simpan Draft
                                    </button>
                                </div>
                                <div class="row g-3 rule-metadata-grid">
                                    <div class="col-lg-3"><label class="form-label">Kode Versi</label><input class="form-control rule-draft-field" id="ruleDetailCode" required></div>
                                    <div class="col-lg-3"><label class="form-label">Nama Aturan</label><input class="form-control rule-draft-field" id="ruleDetailName" required></div>
                                    <div class="col-lg-2"><label class="form-label">Mulai Berlaku</label><input type="date" class="form-control rule-draft-field" id="ruleDetailEffectiveFrom" required></div>
                                    <div class="col-lg-4"><label class="form-label">Referensi Regulasi</label><input class="form-control rule-draft-field" id="ruleDetailReference"></div>
                                </div>
                            </form>

                            <div class="row g-3 mb-3">
                                <div class="col-sm-6 col-xl-3"><div class="rule-stat"><div class="rule-stat-label">Mapping PTKP</div><div class="rule-stat-value" id="ruleStatPtkp">0</div></div></div>
                                <div class="col-sm-6 col-xl-3"><div class="rule-stat"><div class="rule-stat-label">Lapisan TER</div><div class="rule-stat-value" id="ruleStatTer">0</div></div></div>
                                <div class="col-sm-6 col-xl-3"><div class="rule-stat"><div class="rule-stat-label">Kategori Bulanan</div><div class="rule-stat-value" id="ruleStatCategories">0</div></div></div>
                                <div class="col-sm-6 col-xl-3"><div class="rule-stat"><div class="rule-stat-label">Tarif Tertinggi</div><div class="rule-stat-value" id="ruleStatMaxRate">0%</div></div></div>
                            </div>

                            <div class="rule-panel">
                                <div class="mb-3">
                                    <h6 class="rule-panel-title">Ringkasan Lapisan TER</h6>
                                    <div class="rule-panel-subtitle">Jumlah bracket dan rentang tarif per frekuensi serta kategori.</div>
                                </div>
                                <div class="table-responsive">
                                    <table class="table table-sm table-striped align-middle">
                                        <thead><tr><th>Frekuensi</th><th>Kategori</th><th>Jumlah Lapisan</th><th>Tarif Min</th><th>Tarif Maks</th></tr></thead>
                                        <tbody id="ruleTerSummaryRows"></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <div class="tab-pane fade rule-tab-pane" id="rulePtkpPane">
                            <div class="rule-panel">
                                <div class="d-flex justify-content-between align-items-start gap-3 mb-3">
                                    <div>
                                        <h6 class="rule-panel-title">Mapping Status PTKP</h6>
                                        <div class="rule-panel-subtitle">Menentukan kategori TER dan nilai PTKP tahunan untuk setiap status keluarga.</div>
                                    </div>
                                    <span class="badge bg-info text-dark">A / B / C</span>
                                </div>
                                <div class="table-responsive">
                                    <table class="table table-sm table-striped align-middle">
                                        <thead><tr><th style="width: 20%">Status PTKP</th><th style="width: 20%">Kategori TER</th><th>Nilai PTKP Tahunan</th><th style="width: 110px">Aksi</th></tr></thead>
                                        <tbody id="rulePtkpRows"></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <div class="tab-pane fade rule-tab-pane" id="ruleTerPane">
                            <div class="rule-panel p-0 overflow-hidden">
                                <div class="d-flex justify-content-between align-items-start gap-3 p-3 border-bottom">
                                    <div>
                                        <h6 class="rule-panel-title">Detail Lapisan TER</h6>
                                        <div class="rule-panel-subtitle">Lapisan harus berurutan dan tidak boleh memiliki celah sebelum versi draft diaktifkan.</div>
                                    </div>
                                    <span class="badge bg-warning text-dark rule-active-note">Versi aktif dikunci</span>
                                </div>
                                <div class="rule-table-scroll border-0 rounded-0">
                                    <table class="table table-sm table-striped align-middle">
                                        <thead><tr><th style="width: 130px">Frekuensi</th><th style="width: 100px">Kategori</th><th>Bruto Minimum</th><th>Bruto Maksimum</th><th style="width: 190px">Tarif</th><th style="width: 110px">Aksi</th></tr></thead>
                                        <tbody id="ruleTerRows"></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="pajakModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="pajakModalTitle">Tambah Pajak</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="pajakForm">
                    <div class="modal-body">
                        <input type="hidden" id="pajakId" />
                        <div class="mb-3">
                            <label class="form-label">Kode</label>
                            <input type="text" class="form-control" id="pajakCode" maxlength="40" required />
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Nama Pajak</label>
                            <input type="text" class="form-control" id="pajakName" maxlength="180" required />
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Tarif (%)</label>
                            <input type="number" class="form-control" id="pajakRate" min="0" max="100" step="0.0001" required />
                        </div>
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" role="switch" id="pajakActive" checked />
                            <label class="form-check-label" for="pajakActive">Active</label>
                        </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>
@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('pajakModal'));
            const copyRuleModal = new bootstrap.Modal(document.getElementById('copyRuleModal'));
            const ruleDetailsModal = new bootstrap.Modal(document.getElementById('ruleDetailsModal'));
            let ruleRowsCache = [];
            let currentRuleDetail = null;
            const money = (value) => Number(value || 0).toLocaleString('id-ID', { maximumFractionDigits: 0 });
            const rupiah = (value) => value === null || value === '' ? '' : `Rp ${money(value)}`;
            const rawRupiah = (value) => {
                const digits = String(value ?? '').replace(/[^\d]/g, '');
                return digits === '' ? '' : Number(digits);
            };
            const percent = (value) => `${(Number(value || 0) * 100).toLocaleString('id-ID', { minimumFractionDigits: 0, maximumFractionDigits: 4 })}%`;
            const frequencyLabel = (value) => value === 'monthly' ? 'Bulanan' : (value === 'daily' ? 'Harian' : value);
            const ruleTable = $('#taxRuleTable').DataTable({
                responsive: true,
                searching: false,
                paging: false,
                info: false,
                order: [],
                columns: [
                    { data: 'code' },
                    { data: 'name' },
                    { data: null, render: (d, t, r) => `${r.effective_from || '-'} s/d ${r.effective_to || 'seterusnya'}` },
                    { data: 'status', render: (v) => `<span class="badge ${v === 'active' ? 'bg-success' : 'bg-warning text-dark'}">${v}</span>` },
                    { data: 'regulation_reference', render: (v) => v || '-' },
                    { data: null, render: (d, t, r) => `${r.ptkp_count} PTKP / ${r.ter_bracket_count} lapisan TER` },
                    { data: null, orderable: false, render: (d, t, r) => `
                        <button class="btn btn-sm btn-outline-primary btn-rule-details" data-id="${r.id}">Detail</button>
                        <button class="btn btn-sm btn-outline-secondary btn-rule-copy" data-id="${r.id}">Salin Draft</button>
                        ${r.status === 'draft' ? `<button class="btn btn-sm btn-success btn-rule-activate" data-id="${r.id}">Aktifkan</button>` : ''}
                    ` }
                ]
            });
            const table = $('#pajakTable').DataTable({
                responsive: true,
                data: [],
                columns: [
                    { data: null, render: (d, t, r, m) => m.row + 1, orderable: false, searchable: false },
                    { data: 'code' },
                    { data: 'name' },
                    { data: 'rate_percent', render: (v) => `${Number(v || 0).toLocaleString('id-ID')}%` },
                    {
                        data: 'code',
                        render: (v) => String(v || '').toUpperCase() === 'PPH21'
                            ? '<span class="badge bg-secondary">Referensi saja</span><div class="small text-muted mt-1">Tidak dibaca payroll</div>'
                            : '<span class="badge bg-light text-dark border">Belum terhubung</span>'
                    },
                    {
                        data: null,
                        orderable: false,
                        render: (d, t, r) => `
                            <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 loadData = () => {
                $.getJSON('{{ route('master_pajak.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 loadRuleData = () => {
                $.getJSON('{{ route('master_pajak.rules.data') }}').done((resp) => {
                    ruleRowsCache = resp.data || [];
                    ruleTable.clear().rows.add(ruleRowsCache).draw();
                    const activeRule = ruleRowsCache.find((row) => row.status === 'active');
                    $('#activePph21RuleName').text(activeRule
                        ? `${activeRule.name} (${activeRule.code})`
                        : 'belum ada aturan aktif');
                    const readiness = resp.meta?.employee_ptkp_readiness || {};
                    const missing = Number(readiness.missing_or_invalid || 0);
                    $('#pph21ReadinessAlert')
                        .toggleClass('d-none', missing <= 0)
                        .html(missing > 0
                            ? `<strong>${missing.toLocaleString('id-ID')} karyawan belum siap TER.</strong> Isi Status PTKP pada Master Karyawan. Selama belum valid, payroll memakai fallback internal 5% jika memiliki NPWP atau 6% jika tidak memiliki NPWP. Tabel referensi di bawah tidak digunakan.`
                            : '');
                }).fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Gagal memuat versi aturan', 'error'));
            };

            $('#taxRuleTable').on('click', '.btn-rule-copy', function () {
                const row = ruleRowsCache.find((item) => Number(item.id) === Number($(this).data('id')));
                if (!row) return;
                $('#copyRuleSourceId').val(row.id);
                $('#copyRuleCode').val(`${row.code}-NEXT`);
                $('#copyRuleName').val(`${row.name} - Perubahan`);
                $('#copyRuleEffectiveFrom').val('');
                $('#copyRuleReference').val(row.regulation_reference || '');
                copyRuleModal.show();
            });

            $('#copyRuleForm').on('submit', function (event) {
                event.preventDefault();
                const sourceId = $('#copyRuleSourceId').val();
                $.post(`{{ url('/master-pajak/rules') }}/${sourceId}/copy`, {
                    code: $('#copyRuleCode').val(),
                    name: $('#copyRuleName').val(),
                    effective_from: $('#copyRuleEffectiveFrom').val(),
                    regulation_reference: $('#copyRuleReference').val()
                }).done((resp) => {
                    copyRuleModal.hide();
                    loadRuleData();
                    Swal.fire('Berhasil', resp.message, 'success');
                }).fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Gagal membuat draft', 'error'));
            });

            $('#taxRuleTable').on('click', '.btn-rule-activate', function () {
                const id = Number($(this).data('id'));
                Swal.fire({
                    title: 'Aktifkan aturan ini?',
                    text: 'Aturan aktif sebelumnya akan ditutup sehari sebelum tanggal mulai versi baru.',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Aktifkan'
                }).then((result) => {
                    if (!result.isConfirmed) return;
                    $.post(`{{ url('/master-pajak/rules') }}/${id}/activate`).done((resp) => {
                        loadRuleData();
                        Swal.fire('Berhasil', resp.message, 'success');
                    }).fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Gagal mengaktifkan aturan', 'error'));
                });
            });

            $('#taxRuleTable').on('click', '.btn-rule-details', function () {
                const id = Number($(this).data('id'));
                $.getJSON(`{{ url('/master-pajak/rules') }}/${id}/details`).done((resp) => {
                    currentRuleDetail = resp;
                    const isDraft = resp.rule?.status === 'draft';
                    const ptkpRows = resp.ptkp || [];
                    const terRows = resp.ter || [];
                    const activeOverviewTab = document.querySelector('[data-bs-target="#ruleOverviewPane"]');
                    if (activeOverviewTab) bootstrap.Tab.getOrCreateInstance(activeOverviewTab).show();
                    $('#ruleDetailsTitle').text(resp.rule?.name || 'Detail Aturan PPh21');
                    $('#ruleDetailsSubtitle').text(`${resp.rule?.code || ''} • berlaku mulai ${(resp.rule?.effective_from || '-').toString().substring(0, 10)}`);
                    $('#ruleDetailsStatus')
                        .removeClass('d-none bg-success bg-warning text-dark')
                        .addClass(isDraft ? 'bg-warning text-dark' : 'bg-success')
                        .text(isDraft ? 'DRAFT • DAPAT DIEDIT' : 'AKTIF • TERKUNCI');
                    $('#ruleDetailId').val(resp.rule?.id || '');
                    $('#ruleDetailCode').val(resp.rule?.code || '');
                    $('#ruleDetailName').val(resp.rule?.name || '');
                    $('#ruleDetailEffectiveFrom').val((resp.rule?.effective_from || '').toString().substring(0, 10));
                    $('#ruleDetailReference').val(resp.rule?.regulation_reference || '');
                    $('.rule-draft-field').prop('disabled', !isDraft);
                    $('.rule-draft-action').toggle(isDraft);
                    $('.rule-active-note')
                        .toggleClass('bg-warning text-dark', !isDraft)
                        .toggleClass('bg-success text-white', isDraft)
                        .text(isDraft ? 'Draft dapat diedit' : 'Versi aktif dikunci');
                    $('#rulePtkpCount, #ruleStatPtkp').text(ptkpRows.length.toLocaleString('id-ID'));
                    $('#ruleTerCount, #ruleStatTer').text(terRows.length.toLocaleString('id-ID'));
                    $('#ruleStatCategories').text(new Set(terRows.filter((row) => row.frequency === 'monthly').map((row) => row.ter_category).filter(Boolean)).size);
                    $('#ruleStatMaxRate').text(percent(Math.max(0, ...terRows.map((row) => Number(row.rate || 0)))));
                    $('#rulePtkpRows').html(ptkpRows.map((row) => `<tr data-id="${row.id}">
                        <td><input class="form-control form-control-sm ptkp-code" value="${row.ptkp_code}" ${isDraft ? '' : 'disabled'}></td>
                        <td><select class="form-select form-select-sm ptkp-category" ${isDraft ? '' : 'disabled'}>${['A','B','C'].map((v) => `<option ${v === row.ter_category ? 'selected' : ''}>${v}</option>`).join('')}</select></td>
                        <td>
                            <div class="input-group input-group-sm">
                                <input type="text" inputmode="numeric" class="form-control rupiah-input ptkp-amount" value="${rupiah(row.annual_ptkp_amount)}" ${isDraft ? '' : 'disabled'}>
                            </div>
                        </td>
                        <td>${isDraft ? '<button class="btn btn-sm btn-primary btn-save-ptkp"><i class="fas fa-save me-1"></i>Simpan</button>' : '<span class="text-muted small"><i class="fas fa-lock me-1"></i>Terkunci</span>'}</td>
                    </tr>`).join(''));
                    const groups = {};
                    terRows.forEach((row) => {
                        const key = `${row.frequency}|${row.ter_category || '-'}`;
                        groups[key] ||= { frequency: row.frequency, category: row.ter_category || '-', count: 0, min: 1, max: 0 };
                        groups[key].count++;
                        groups[key].min = Math.min(groups[key].min, Number(row.rate || 0));
                        groups[key].max = Math.max(groups[key].max, Number(row.rate || 0));
                    });
                    $('#ruleTerSummaryRows').html(Object.values(groups).map((row) => `<tr>
                        <td><span class="rule-frequency-badge">${frequencyLabel(row.frequency)}</span></td>
                        <td>${row.category === '-' ? '<span class="text-muted">Tidak berkategori</span>' : `<span class="rule-category-badge">${row.category}</span>`}</td>
                        <td><strong>${row.count.toLocaleString('id-ID')}</strong> lapisan</td>
                        <td>${percent(row.min)}</td>
                        <td><strong>${percent(row.max)}</strong></td>
                    </tr>`).join(''));
                    $('#ruleTerRows').html(terRows.map((row) => `<tr data-id="${row.id}">
                        <td><span class="rule-frequency-badge">${frequencyLabel(row.frequency)}</span></td>
                        <td>${row.ter_category ? `<span class="rule-category-badge">${row.ter_category}</span>` : '<span class="text-muted">-</span>'}</td>
                        <td><input type="text" inputmode="numeric" class="form-control form-control-sm rupiah-input ter-min" value="${rupiah(row.gross_min)}" ${isDraft ? '' : 'disabled'}></td>
                        <td><input type="text" inputmode="numeric" class="form-control form-control-sm rupiah-input ter-max" value="${rupiah(row.gross_max)}" placeholder="Tanpa batas" ${isDraft ? '' : 'disabled'}></td>
                        <td><div class="input-group input-group-sm"><input type="number" step="0.0001" class="form-control ter-rate" value="${Number(row.rate || 0) * 100}" ${isDraft ? '' : 'disabled'}><span class="input-group-text">%</span></div></td>
                        <td>${isDraft ? '<button class="btn btn-sm btn-primary btn-save-ter"><i class="fas fa-save me-1"></i>Simpan</button>' : '<span class="text-muted small"><i class="fas fa-lock me-1"></i>Terkunci</span>'}</td>
                    </tr>`).join(''));
                    ruleDetailsModal.show();
                }).fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Gagal memuat detail aturan', 'error'));
            });

            $('#ruleMetadataForm').on('submit', function (event) {
                event.preventDefault();
                const id = $('#ruleDetailId').val();
                $.ajax({
                    url: `{{ url('/master-pajak/rules') }}/${id}`,
                    method: 'PUT',
                    data: {
                        code: $('#ruleDetailCode').val(),
                        name: $('#ruleDetailName').val(),
                        effective_from: $('#ruleDetailEffectiveFrom').val(),
                        regulation_reference: $('#ruleDetailReference').val()
                    }
                }).done((resp) => {
                    loadRuleData();
                    Swal.fire('Berhasil', resp.message, 'success');
                }).fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Gagal menyimpan draft', 'error'));
            });

            $('#rulePtkpRows').on('click', '.btn-save-ptkp', function () {
                const row = $(this).closest('tr');
                const ruleId = $('#ruleDetailId').val();
                $.ajax({
                    url: `{{ url('/master-pajak/rules') }}/${ruleId}/ptkp/${row.data('id')}`,
                    method: 'PUT',
                    data: {
                        ptkp_code: row.find('.ptkp-code').val(),
                        ter_category: row.find('.ptkp-category').val(),
                        annual_ptkp_amount: rawRupiah(row.find('.ptkp-amount').val())
                    }
                }).done((resp) => Swal.fire('Berhasil', resp.message, 'success'))
                    .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Gagal menyimpan PTKP', 'error'));
            });

            $('#ruleTerRows').on('click', '.btn-save-ter', function () {
                const row = $(this).closest('tr');
                const ruleId = $('#ruleDetailId').val();
                $.ajax({
                    url: `{{ url('/master-pajak/rules') }}/${ruleId}/ter/${row.data('id')}`,
                    method: 'PUT',
                    data: {
                        gross_min: rawRupiah(row.find('.ter-min').val()),
                        gross_max: rawRupiah(row.find('.ter-max').val()),
                        rate: Number(row.find('.ter-rate').val() || 0) / 100
                    }
                }).done((resp) => Swal.fire('Berhasil', resp.message, 'success'))
                    .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Gagal menyimpan lapisan TER', 'error'));
            });

            $('#ruleDetailsModal').on('input', '.rupiah-input', function () {
                const raw = rawRupiah(this.value);
                this.value = raw === '' ? '' : rupiah(raw);
            });

            $('#btnAddPajak').on('click', function () {
                $('#pajakModalTitle').text('Tambah Pajak');
                $('#pajakId').val('');
                $('#pajakCode').val('');
                $('#pajakName').val('');
                $('#pajakRate').val('0');
                $('#pajakActive').prop('checked', true);
                modal.show();
            });

            $('#pajakTable').on('click', '.btn-edit', function () {
                const id = Number($(this).data('id'));
                const row = rowsCache.find((x) => Number(x.id) === id);
                if (!row) return;
                $('#pajakModalTitle').text('Edit Pajak');
                $('#pajakId').val(row.id);
                $('#pajakCode').val(row.code || '');
                $('#pajakName').val(row.name || '');
                $('#pajakRate').val(Number(row.rate_percent || 0));
                $('#pajakActive').prop('checked', !!row.is_active);
                modal.show();
            });

            $('#pajakForm').on('submit', function (e) {
                e.preventDefault();
                const id = $('#pajakId').val();
                const payload = {
                    code: ($('#pajakCode').val() || '').toString().trim(),
                    name: ($('#pajakName').val() || '').toString().trim(),
                    rate_percent: ($('#pajakRate').val() || '0').toString(),
                    is_active: $('#pajakActive').is(':checked') ? 1 : 0
                };
                if (!payload.code || !payload.name) {
                    Swal.fire('Warning', 'Kode dan Nama pajak wajib diisi', 'warning');
                    return;
                }
                $.ajax({
                    url: id ? `{{ url('/master-pajak') }}/${id}` : '{{ route('master_pajak.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'));
            });

            $('#pajakTable').on('click', '.btn-delete', function () {
                const id = Number($(this).data('id'));
                Swal.fire({
                    title: 'Delete pajak?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, delete'
                }).then((res) => {
                    if (!res.isConfirmed) return;
                    $.ajax({
                        url: `{{ url('/master-pajak') }}/${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();
            loadRuleData();
        });
    </script>
@endpush