@extends('layouts.adminlte')

@section('title', 'MASTER KOMPONEN POTONGAN')
@section('page_title', 'MASTER KOMPONEN POTONGAN')

@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>
        .bpjs-sim-toolbar {
            border: 1px solid #e9ecef;
            border-radius: .9rem;
            background: linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
            padding: .9rem 1rem;
            margin-bottom: 1rem;
        }
        .bpjs-rate-chip {
            display: inline-flex;
            align-items: center;
            gap: .3rem;
            padding: .18rem .55rem;
            border-radius: 999px;
            font-size: .72rem;
            font-weight: 700;
            line-height: 1.1;
            border: 1px solid transparent;
        }
        .bpjs-rate-chip.is-live {
            background: rgba(25, 135, 84, .12);
            border-color: rgba(25, 135, 84, .2);
            color: #146c43;
        }
        .bpjs-rate-chip.is-date {
            background: rgba(13, 110, 253, .1);
            border-color: rgba(13, 110, 253, .18);
            color: #0a58ca;
        }
        .bpjs-history-active {
            background: rgba(13, 110, 253, .06);
        }
    </style>
@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 Komponen Potongan</h3>
                <small class="text-muted">Komponen BPJS di halaman ini hanya mengikat ke master BPJS. Perubahan tarif tahunan dibaca dari histori rate/plafon BPJS.</small>
            </div>
            <button class="btn btn-primary btn-sm" id="btnAddKomponen"><i class="fas fa-plus me-1"></i>Tambah</button>
        </div>
        <div class="card-body">
            <div class="bpjs-sim-toolbar">
                <div class="row g-3 align-items-end">
                    <div class="col-lg-6">
                        <div class="fw-semibold mb-1">Simulasi Tarif BPJS</div>
                        <div class="small text-muted">
                            Angka `Emp % | Co %` di tabel adalah <strong>rate aktif per tanggal simulasi</strong>, bukan angka tetap selamanya.
                            Jika tahun depan regulasi berubah, cukup tambah histori baru di Master BPJS.
                        </div>
                    </div>
                    <div class="col-sm-4 col-lg-3">
                        <label class="form-label">Tanggal Simulasi</label>
                        <input type="date" class="form-control" id="bpjsAsOfDate" />
                    </div>
                    <div class="col-sm-8 col-lg-3">
                        <div class="d-flex gap-2">
                            <button class="btn btn-outline-primary w-100" id="btnApplyBpjsAsOfDate" type="button">Muat Simulasi</button>
                            <button class="btn btn-outline-secondary" id="btnResetBpjsAsOfDate" type="button">Hari Ini</button>
                        </div>
                    </div>
                </div>
                <div class="mt-3 small" id="bpjsSimulationInfo"></div>
            </div>
            <div class="table-responsive">
                <table id="komponenTable" class="table table-striped table-hover align-middle w-100">
                    <thead>
                        <tr>
                            <th>No.</th>
                            <th>Kode</th>
                            <th>Nama Komponen</th>
                            <th>Tipe</th>
                            <th>Referensi BPJS</th>
                            <th>Wajib</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="modal fade" id="komponenModal" 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="komponenModalTitle">Tambah Komponen Potongan</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="komponenForm">
                    <div class="modal-body">
                        <input type="hidden" id="komponenId" />
                        <div class="mb-3">
                            <label class="form-label">Kode</label>
                            <input type="text" class="form-control" id="komponenCode" maxlength="40" required />
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Nama Komponen</label>
                            <input type="text" class="form-control" id="komponenName" maxlength="180" required />
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Tipe</label>
                            <select class="form-select" id="komponenType" required>
                                <option value="tetap">Tetap</option>
                                <option value="tidak_tetap">Tidak Tetap</option>
                                <option value="pajak">Pajak</option>
                                <option value="bpjs">BPJS</option>
                                <option value="pinjaman">Pinjaman</option>
                                <option value="denda">Denda</option>
                                <option value="lainnya">Lainnya</option>
                            </select>
                        </div>
                        <div class="mb-3 d-none" id="komponenBpjsWrapper">
                            <label class="form-label">Referensi Master BPJS</label>
                            <select class="form-select" id="komponenBpjsId">
                                <option value="">- Pilih BPJS -</option>
                            </select>
                            <div class="form-text" id="komponenBpjsInfo">Pilih BPJS agar tarif employee/company mengikuti histori tarif aktif.</div>
                        </div>
                        <div class="form-check form-switch mb-2">
                            <input class="form-check-input" type="checkbox" role="switch" id="komponenMandatory" />
                            <label class="form-check-label" for="komponenMandatory">Potongan Wajib</label>
                        </div>
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" role="switch" id="komponenActive" checked />
                            <label class="form-check-label" for="komponenActive">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>

    <div class="modal fade" id="bpjsHistoryModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="bpjsHistoryModalTitle">Riwayat BPJS Referensi</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-info py-2">
                        <div id="bpjsHistorySummary">Memuat ringkasan BPJS...</div>
                    </div>
                    <div class="row g-3">
                        <div class="col-lg-7">
                            <div class="card border h-100">
                                <div class="card-header py-2 fw-semibold">Histori Tarif</div>
                                <div class="card-body p-0">
                                    <div class="table-responsive">
                                        <table class="table table-sm table-hover align-middle mb-0" id="bpjsHistoryRateTable">
                                            <thead>
                                                <tr>
                                                    <th>Mulai</th>
                                                    <th>Sampai</th>
                                                    <th>Emp (%)</th>
                                                    <th>Co (%)</th>
                                                    <th>Status</th>
                                                    <th>Catatan</th>
                                                </tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-5">
                            <div class="card border h-100">
                                <div class="card-header py-2 fw-semibold">Histori Plafon</div>
                                <div class="card-body p-0">
                                    <div class="table-responsive">
                                        <table class="table table-sm table-hover align-middle mb-0" id="bpjsHistoryCeilingTable">
                                            <thead>
                                                <tr>
                                                    <th>Mulai</th>
                                                    <th>Sampai</th>
                                                    <th>Plafon</th>
                                                    <th>Status</th>
                                                    <th>Catatan</th>
                                                </tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <a href="{{ route('master_bpjs.index') }}" target="_blank" class="btn btn-outline-primary">Buka Master BPJS</a>
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                </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('komponenModal'));
            const bpjsHistoryModal = new bootstrap.Modal(document.getElementById('bpjsHistoryModal'));
            let bpjsOptions = [];
            let simulationDate = new Date().toISOString().slice(0, 10);
            const table = $('#komponenTable').DataTable({
                responsive: true,
                data: [],
                columns: [
                    { data: null, render: (d, t, r, m) => m.row + 1, orderable: false, searchable: false },
                    { data: 'code' },
                    { data: 'name' },
                    { data: 'component_type', render: (v) => (v || '-').toString().replace('_', ' ') },
                    { data: null, render: (d, t, r) => {
                        if (!r.bpjs_label) return '<span class="text-muted">-</span>';
                        const period = r.bpjs_rate_effective_start
                            ? `${r.bpjs_rate_effective_start} s/d ${r.bpjs_rate_effective_end || 'seterusnya'}`
                            : 'fallback master';
                        const ceiling = Number(r.bpjs_ceiling_nominal || 0) > 0
                            ? `<br><small class="text-muted">Plafon: Rp ${Number(r.bpjs_ceiling_nominal || 0).toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</small>`
                            : '';
                        return `
                            <div class="d-flex flex-column gap-1">
                                <div class="fw-semibold">${r.bpjs_label}</div>
                                <div>
                                    <span class="bpjs-rate-chip is-date">Aktif per ${r.as_of_date || simulationDate}</span>
                                    <span class="bpjs-rate-chip is-live">Emp ${Number(r.bpjs_rate_employee_percent || 0).toLocaleString('id-ID')}% | Co ${Number(r.bpjs_rate_company_percent || 0).toLocaleString('id-ID')}%</span>
                                </div>
                                <small class="text-muted">Periode rate: ${period}</small>
                                ${ceiling}
                            </div>
                        `;
                    }},
                    { data: 'is_mandatory', render: (v) => v ? '<span class="badge text-bg-success">Ya</span>' : '<span class="badge text-bg-secondary">Tidak</span>' },
                    {
                        data: null,
                        orderable: false,
                        render: (d, t, r) => `
                            ${r.bpjs_id ? `<button class="btn btn-sm btn-outline-info btn-bpjs-history" data-id="${r.id}">BPJS</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 formatDateId = (value) => {
                const raw = (value || '').toString().trim();
                if (!raw) return '-';
                const dt = new Date(raw + 'T00:00:00');
                if (Number.isNaN(dt.getTime())) return raw;
                return dt.toLocaleDateString('id-ID', { day: '2-digit', month: 'long', year: 'numeric' });
            };
            const refreshSimulationInfo = () => {
                const isToday = simulationDate === new Date().toISOString().slice(0, 10);
                $('#bpjsSimulationInfo').html(
                    isToday
                        ? `<span class="bpjs-rate-chip is-live">Rate aktif per hari ini</span> <span class="text-muted">Semua angka referensi BPJS di tabel dibaca berdasarkan tanggal ${formatDateId(simulationDate)}.</span>`
                        : `<span class="bpjs-rate-chip is-date">Rate simulasi</span> <span class="text-muted">Semua angka referensi BPJS di tabel dibaca berdasarkan tanggal ${formatDateId(simulationDate)} untuk simulasi perubahan tahun/periode.</span>`
                );
            };
            const renderBpjsOptions = () => {
                const select = $('#komponenBpjsId');
                const current = select.val();
                select.html('<option value="">- Pilih BPJS -</option>');
                bpjsOptions.forEach((item) => {
                    select.append(`<option value="${item.id}">${item.code} - ${item.name}</option>`);
                });
                if (current) select.val(current);
            };

            const toggleBpjsSection = () => {
                const isBpjs = $('#komponenType').val() === 'bpjs';
                $('#komponenBpjsWrapper').toggleClass('d-none', !isBpjs);
                if (!isBpjs) {
                    $('#komponenBpjsId').val('');
                    $('#komponenBpjsInfo').text('Pilih BPJS agar tarif employee/company mengikuti histori tarif aktif.');
                    return;
                }
                const selected = bpjsOptions.find((item) => Number(item.id) === Number($('#komponenBpjsId').val()));
                $('#komponenBpjsInfo').text(selected
                    ? `Tarif aktif per ${simulationDate}: Karyawan ${Number(selected.rate_employee_percent || 0).toLocaleString('id-ID')}% | Perusahaan ${Number(selected.rate_company_percent || 0).toLocaleString('id-ID')}%`
                    : 'Pilih BPJS agar tarif employee/company mengikuti histori tarif aktif.');
            };

            const loadBpjsOptions = () => {
                $.getJSON('{{ route('master_komponen_potongan.bpjs_options') }}', { as_of_date: simulationDate })
                    .done((resp) => {
                        bpjsOptions = resp.data || [];
                        renderBpjsOptions();
                        toggleBpjsSection();
                    });
            };

            const loadData = () => {
                $.getJSON('{{ route('master_komponen_potongan.data') }}', { as_of_date: simulationDate })
                    .done((resp) => {
                        rowsCache = resp.data || [];
                        table.clear().rows.add(rowsCache).draw();
                        if (resp?.meta?.as_of_date) {
                            simulationDate = resp.meta.as_of_date;
                            $('#bpjsAsOfDate').val(simulationDate);
                        }
                        refreshSimulationInfo();
                    })
                    .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Failed load data', 'error'));
            };

            const renderBpjsHistoryModal = (row) => {
                const title = row.bpjs_label || 'Referensi BPJS';
                $('#bpjsHistoryModalTitle').text(`Riwayat BPJS Referensi - ${title}`);

                const activeRatePeriod = row.bpjs_rate_effective_start
                    ? `${row.bpjs_rate_effective_start} s/d ${row.bpjs_rate_effective_end || 'seterusnya'}`
                    : 'Fallback master';
                const activeCeilingText = Number(row.bpjs_ceiling_nominal || 0) > 0
                    ? `Rp ${Number(row.bpjs_ceiling_nominal || 0).toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`
                    : 'Tidak ada plafon aktif';

                $('#bpjsHistorySummary').html(`
                    <div><strong>Komponen Potongan:</strong> ${row.code || '-'} - ${row.name || '-'}</div>
                    <div><strong>Referensi BPJS:</strong> ${row.bpjs_label || '-'}</div>
                    <div><strong>Tanggal Simulasi:</strong> ${formatDateId(simulationDate)}</div>
                    <div><strong>Rate Aktif:</strong> Emp ${Number(row.bpjs_rate_employee_percent || 0).toLocaleString('id-ID')}% | Co ${Number(row.bpjs_rate_company_percent || 0).toLocaleString('id-ID')}% | <span class="text-muted">${activeRatePeriod}</span></div>
                    <div><strong>Plafon Aktif:</strong> ${activeCeilingText}</div>
                `);

                const rateRows = Array.isArray(row.bpjs_rate_histories) ? row.bpjs_rate_histories : [];
                $('#bpjsHistoryRateTable tbody').html(
                    rateRows.length
                        ? rateRows.map((item) => `
                            <tr class="${item.is_effective_for_as_of ? 'bpjs-history-active' : ''}">
                                <td>${item.effective_start || '-'}</td>
                                <td>${item.effective_end || 'seterusnya'}</td>
                                <td>${Number(item.rate_employee_percent || 0).toLocaleString('id-ID')}%</td>
                                <td>${Number(item.rate_company_percent || 0).toLocaleString('id-ID')}%</td>
                                <td>${item.is_effective_for_as_of ? '<span class="badge text-bg-primary">Dipakai</span>' : (item.is_active ? '<span class="badge text-bg-success">Aktif</span>' : '<span class="badge text-bg-secondary">Nonaktif</span>')}</td>
                                <td>${item.notes || '-'}</td>
                            </tr>
                        `).join('')
                        : '<tr><td colspan="6" class="text-center text-muted">Belum ada histori tarif.</td></tr>'
                );

                const ceilingRows = Array.isArray(row.bpjs_ceiling_histories) ? row.bpjs_ceiling_histories : [];
                $('#bpjsHistoryCeilingTable tbody').html(
                    ceilingRows.length
                        ? ceilingRows.map((item) => `
                            <tr class="${item.is_effective_for_as_of ? 'bpjs-history-active' : ''}">
                                <td>${item.effective_start || '-'}</td>
                                <td>${item.effective_end || 'seterusnya'}</td>
                                <td>Rp ${Number(item.ceiling_nominal || 0).toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</td>
                                <td>${item.is_effective_for_as_of ? '<span class="badge text-bg-primary">Dipakai</span>' : (item.is_active ? '<span class="badge text-bg-success">Aktif</span>' : '<span class="badge text-bg-secondary">Nonaktif</span>')}</td>
                                <td>${item.notes || '-'}</td>
                            </tr>
                        `).join('')
                        : '<tr><td colspan="5" class="text-center text-muted">Tidak ada histori plafon atau BPJS ini tidak memakai plafon.</td></tr>'
                );
            };

            $('#btnAddKomponen').on('click', function () {
                $('#komponenModalTitle').text('Tambah Komponen Potongan');
                $('#komponenId').val('');
                $('#komponenCode').val('');
                $('#komponenName').val('');
                $('#komponenType').val('tetap');
                $('#komponenBpjsId').val('');
                $('#komponenMandatory').prop('checked', false);
                $('#komponenActive').prop('checked', true);
                toggleBpjsSection();
                modal.show();
            });

            $('#btnApplyBpjsAsOfDate').on('click', function () {
                simulationDate = ($('#bpjsAsOfDate').val() || '').toString().trim() || new Date().toISOString().slice(0, 10);
                loadBpjsOptions();
                loadData();
            });

            $('#btnResetBpjsAsOfDate').on('click', function () {
                simulationDate = new Date().toISOString().slice(0, 10);
                $('#bpjsAsOfDate').val(simulationDate);
                loadBpjsOptions();
                loadData();
            });

            $('#bpjsAsOfDate').on('change', function () {
                simulationDate = ($(this).val() || '').toString().trim() || new Date().toISOString().slice(0, 10);
            });

            $('#komponenTable').on('click', '.btn-bpjs-history', function () {
                const id = Number($(this).data('id'));
                const row = rowsCache.find((x) => Number(x.id) === id);
                if (!row || !row.bpjs_id) return;
                renderBpjsHistoryModal(row);
                bpjsHistoryModal.show();
            });

            $('#komponenTable').on('click', '.btn-edit', function () {
                const id = Number($(this).data('id'));
                const row = rowsCache.find((x) => Number(x.id) === id);
                if (!row) return;
                $('#komponenModalTitle').text('Edit Komponen Potongan');
                $('#komponenId').val(row.id);
                $('#komponenCode').val(row.code || '');
                $('#komponenName').val(row.name || '');
                $('#komponenType').val(row.component_type || 'tetap');
                $('#komponenBpjsId').val(row.bpjs_id || '');
                $('#komponenMandatory').prop('checked', !!row.is_mandatory);
                $('#komponenActive').prop('checked', !!row.is_active);
                toggleBpjsSection();
                modal.show();
            });

            $('#komponenType, #komponenBpjsId').on('change', toggleBpjsSection);

            $('#komponenForm').on('submit', function (e) {
                e.preventDefault();
                const id = $('#komponenId').val();
                const payload = {
                    code: ($('#komponenCode').val() || '').toString().trim(),
                    name: ($('#komponenName').val() || '').toString().trim(),
                    component_type: $('#komponenType').val(),
                    bpjs_id: $('#komponenBpjsId').val(),
                    is_mandatory: $('#komponenMandatory').is(':checked') ? 1 : 0,
                    is_active: $('#komponenActive').is(':checked') ? 1 : 0
                };
                if (!payload.code || !payload.name || !payload.component_type) {
                    Swal.fire('Warning', 'Kode, Nama, dan Tipe wajib diisi', 'warning');
                    return;
                }
                $.ajax({
                    url: id ? `{{ url('/master-komponen-potongan') }}/${id}` : '{{ route('master_komponen_potongan.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'));
            });

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

            $('#bpjsAsOfDate').val(simulationDate);
            refreshSimulationInfo();
            loadBpjsOptions();
            loadData();
        });
    </script>
@endpush