@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    <div class="container-fluid">
        <div class="row">
            {{-- DAFTAR PERIODE --}}
            <div class="col-md-4">
                <div class="row mb-2 mx-1">
                    <div class="card" style="min-height: 650px;">
                        <div class="card-header">
                            <h5 class="mb-0">List {{ $title_menu }}</h5>
                        </div>

                        <hr class="horizontal dark mt-0">

                        <div class="px-4 py-2 d-flex flex-column h-100">
                            <div class="table-responsive flex-grow-1" style="overflow-y: auto;">
                                <table class="table display" id="list_header">
                                    <thead class="thead-light" style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th>No</th>
                                            <th>Periode Tagihan</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($table_detail_h as $detail_h)
                                            <tr class="{{ $detail_h->isactive == '1' ? 'aktif' : 'tdk_aktif' }}"
                                                style="{{ $detail_h->isactive == '1'
                                                    ? 'background-color:#d4edda;border-left:4px solid #28a745;'
                                                    : 'background-color:#f8d7da;border-left:4px solid #dc3545;' }}">
                                                <td class="text-sm font-weight-bold text-dark">
                                                    {{ $loop->iteration }}
                                                </td>
                                                <td class="text-sm font-weight-normal">
                                                    {{ $detail_h->desc_date }}
                                                </td>
                                                <td class="text-sm font-weight-normal">
                                                    <button type="button" class="btn btn-primary mb-0 py-1 px-2"
                                                        onclick="detail(
                                                            '{{ $detail_h->periode_id_enc }}',
                                                            '{{ $gmenuid }}',
                                                            '{{ $dmenu }}'
                                                        )">
                                                        <i class="fas fa-info-circle"></i> Detail
                                                    </button>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>

                            <div class="mt-auto pt-2 note-footer">
                                <code style="background: transparent;">
                                    Note:
                                    <i class="fas fa-circle" style="color: #e89aa4;"></i> Not Active,
                                    <i class="fas fa-circle" style="color: #86d4c9;"></i> Active
                                </code>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- DETAIL TAGIHAN --}}
            <div class="col-md-8">
                <div class="row mx-1">
                    <div class="card" style="min-height: 650px;">
                        <div class="card-header">
                            <h5 class="mb-0" id="label_detail">Periode Tagihan</h5>
                        </div>

                        <hr class="horizontal dark mt-0">

                        @include('components.alert')

                        <div class="row px-4 py-2">
                            <div class="col-12">

                                <ul class="nav nav-tabs mb-3" id="phoneBillTabs" role="tablist">
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link active" id="user-tab" data-bs-toggle="tab"
                                            data-bs-target="#user-content" type="button" role="tab">
                                            <i class="fas fa-user me-1"></i>
                                            User
                                            <span class="badge bg-primary ms-1" id="userCount">0</span>
                                        </button>
                                    </li>

                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link" id="operasional-tab" data-bs-toggle="tab"
                                            data-bs-target="#operasional-content" type="button" role="tab">
                                            <i class="fas fa-tools me-1"></i>
                                            Operasional
                                            <span class="badge bg-info text-dark ms-1" id="operasionalCount">0</span>
                                        </button>
                                    </li>
                                </ul>

                                <div class="tab-content" id="phoneBillTabsContent">

                                    {{-- USER --}}
                                    <div class="tab-pane fade show active" id="user-content" role="tabpanel">
                                        <div class="table-responsive">
                                            <table class="table display nowrap w-100" id="list_detail_user">
                                                <thead class="thead-light" style="background-color:#00b7bd4f;">
                                                    <tr>
                                                        <th>Action</th>
                                                        <th>Transaction ID</th>
                                                        <th>Status</th>
                                                        <th>App. SPV</th>
                                                        <th>App. Head HRD</th>
                                                        <th>Nama / Pengguna</th>
                                                        <th>Departemen</th>
                                                        <th>Kartu Halo</th>
                                                        <th>Abodemen</th>
                                                        <th>Lain-lain</th>
                                                        <th>PPN 11%</th>
                                                        <th>Total Tagihan</th>
                                                        <th>Created At</th>
                                                    </tr>
                                                </thead>
                                                <tbody></tbody>
                                            </table>
                                        </div>
                                    </div>

                                    {{-- OPERASIONAL --}}
                                    <div class="tab-pane fade" id="operasional-content" role="tabpanel">
                                        <div class="table-responsive">
                                            <table class="table display nowrap w-100" id="list_detail_operasional">
                                                <thead class="thead-light" style="background-color:#00b7bd4f;">
                                                    <tr>
                                                        <th>Action</th>
                                                        <th>Transaction ID</th>
                                                        <th>Status</th>
                                                        <th>App. SPV</th>
                                                        <th>App. Head HRD</th>
                                                        <th>Pengguna</th>
                                                        <th>Departemen</th>
                                                        <th>Kartu Halo</th>
                                                        <th>Abodemen</th>
                                                        <th>Lain-lain</th>
                                                        <th>PPN 11%</th>
                                                        <th>Total Tagihan</th>
                                                        <th>Created At</th>
                                                    </tr>
                                                </thead>
                                                <tbody></tbody>
                                            </table>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @if ($jsmenu == '1')
        @if (view()->exists("js.{$dmenu}"))
            @push('addjs')
                @include('js.' . $dmenu)
            @endpush
        @else
            @push('addjs')
                <script>
                    Swal.fire({
                        title: 'JS Not Found!',
                        text: 'Please Create File JS',
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                </script>
            @endpush
        @endif
    @endif
@endsection

@push('js')
    @if (Session::has('message'))
        <script>
            Swal.fire({
                icon: @json(Session::get('class')),
                title: 'Informasi',
                text: @json(Session::get('message')),
                confirmButtonColor: '#198754'
            });
        </script>
    @endif

    <script>
        let detailTableUser = null;
        let detailTableOperasional = null;
        let currentEncryptedPeriod = '';
        let currentGmenu = '';
        let currentDmenu = '';

        const canAdd = @json(($authorize->add ?? '0') === '1');
        const canEdit = @json(($authorize->edit ?? '0') === '1');
        const canDelete = @json(($authorize->delete ?? '0') === '1');
        const canExcel = @json(($authorize->excel ?? '0') === '1');
        const canPdf = @json(($authorize->pdf ?? '0') === '1');
        const canPrint = @json(($authorize->print ?? '0') === '1');

        $(document).ready(function() {
            const urlParams = new URLSearchParams(window.location.search);
            const tabParam = urlParams.get('tab');
            const filterParam = urlParams.get('filter');

            if (tabParam === 'operasional') {
                let triggerEl = document.querySelector('#operasional-tab');

                if (triggerEl) {
                    let tab = new bootstrap.Tab(triggerEl);
                    tab.show();
                }
            }
            $('#list_header').DataTable({
                language: {
                    search: 'Cari:',
                    lengthMenu: 'Tampilkan _MENU_ baris',
                    zeroRecords: 'Maaf - Data tidak ada',
                    info: 'Data _START_ - _END_ dari _TOTAL_',
                    infoEmpty: 'Tidak ada data',
                    infoFiltered: '(pencarian dari _MAX_ data)'
                },
                responsive: true,
                dom: 'frtip',
                order: [
                    [0, 'asc']
                ]
            });

            const params = new URLSearchParams(window.location.search);

            if (params.get('autoLoad') === 'true') {
                const activePeriod = @json($periodeAktif->periode_id_enc ?? '');

                if (activePeriod.trim() !== '') {
                    detail(activePeriod, @json($gmenuid), @json($dmenu), filterParam);
                }

                const cleanUrl = window.location.origin + window.location.pathname;
                window.history.replaceState({}, document.title, cleanUrl);
            }

            $('button[data-bs-toggle="tab"]').on('shown.bs.tab', function() {
                if (detailTableUser) {
                    detailTableUser.columns.adjust();
                }

                if (detailTableOperasional) {
                    detailTableOperasional.columns.adjust();
                }
            });
        });

        function escapeHtml(value) {
            return $('<div>').text(value ?? '').html();
        }

        function formatRupiah(value) {
            const number = Number(value ?? 0);

            if (!Number.isFinite(number)) {
                return '0';
            }

            return Math.round(number)
                .toString()
                .replace(/\B(?=(\d{3})+(?!\d))/g, '.');
        }

        function renderApprovalStatus(value) {
            if (value === 'approved') {
                return '<span class="badge bg-success"><i class="fas fa-check-circle"></i> Approved</span>';
            }

            if (value === 'pending') {
                return '<span class="badge text-dark" style="background-color:yellow;"><i class="fas fa-hourglass-half"></i> Pending</span>';
            }

            if (value === 'rejected') {
                return '<span class="badge bg-danger"><i class="fas fa-times-circle"></i> Rejected</span>';
            }

            return '<span class="badge bg-secondary">-</span>';
        }

        function renderBillStatus(value) {
            if (value === 'posted') {
                return '<span class="badge bg-success"><i class="fas fa-check-circle"></i> Posted</span>';
            }

            if (value === 'draft') {
                return '<span class="badge text-dark" style="background-color:yellow;"><i class="fas fa-hourglass-half"></i> Draft</span>';
            }

            if (value === 'rejected') {
                return '<span class="badge bg-danger"><i class="fas fa-times-circle"></i> Rejected</span>';
            }

            return '<span class="badge bg-secondary">-</span>';
        }

        function getAddButton() {
            return $('.btn-add-custom');
        }

        function enableAddButton() {
            const $buttons = getAddButton();

            $buttons.each(function() {
                const $button = $(this);

                $button
                    .prop('disabled', false)
                    .removeAttr('disabled')
                    .removeClass(
                        'btn-secondary disabled'
                    )
                    .addClass('btn-primary')
                    .css({
                        opacity: '1',
                        cursor: 'pointer',
                        pointerEvents: 'auto'
                    });
            });
        }

        function disableAddButton() {
            const $buttons = getAddButton();

            $buttons.each(function() {
                const $button = $(this);

                $button
                    .prop('disabled', true)
                    .attr('disabled', 'disabled')
                    .removeClass('btn-primary')
                    .addClass(
                        'btn-secondary disabled'
                    )
                    .css({
                        opacity: '0.5',
                        cursor: 'not-allowed',
                        pointerEvents: 'none'
                    });
            });
        }

        function destroyCategoryTables() {
            if ($.fn.DataTable.isDataTable('#list_detail_user')) {
                $('#list_detail_user').DataTable().destroy();
            }

            if ($.fn.DataTable.isDataTable('#list_detail_operasional')) {
                $('#list_detail_operasional').DataTable().destroy();
            }

            $('#list_detail_user tbody').empty();
            $('#list_detail_operasional tbody').empty();

            $('#userCount').text('0');
            $('#operasionalCount').text('0');

            detailTableUser = null;
            detailTableOperasional = null;
        }

        function detail(encryptedPeriod, gmenu, dmenu, filterParam = null) {
            currentEncryptedPeriod = encryptedPeriod;
            currentGmenu = gmenu;
            currentDmenu = dmenu;

            Swal.fire({
                title: 'Memuat Data',
                allowOutsideClick: false,
                allowEscapeKey: false,
                showConfirmButton: false,
                didOpen: () => Swal.showLoading()
            });

            $.ajax({
                url: @json(url($url_menu) . '/ajax'),
                type: 'GET',
                dataType: 'json',
                data: {
                    id: encryptedPeriod,
                    gmenu: gmenu,
                    dmenu: dmenu
                },
                success: function(response) {
                    Swal.close();

                    if (response.success === false) {
                        Swal.fire({
                            title: 'Gagal!',
                            text: response.message || 'Data tagihan gagal dimuat.',
                            icon: 'error'
                        });
                        return;
                    }

                    $('#label_detail').text(
                        'Periode Tagihan -> ' + (response.desc_date || '-')
                    );

                    destroyCategoryTables();

                    const rows = response.table_detail_d_ajax || [];
                    const encryptedIds = response.encrypt_primary || [];

                    /*
                    |--------------------------------------------------------------------------
                    | Normalisasi kategori
                    |--------------------------------------------------------------------------
                    */
                    function resolveCategoryCode(item) {
                        const categoryValue = String(
                            item.kategori_value ?? ''
                        ).trim();

                        /*
                         * Gunakan kategori dari backend jika tersedia.
                         */
                        if (
                            categoryValue === '1' ||
                            categoryValue === '2'
                        ) {
                            return categoryValue;
                        }

                        /*
                         * Fallback berdasarkan nama kategori.
                         */
                        const categoryName = String(
                                item.jenis_kartu ?? ''
                            )
                            .trim()
                            .toLowerCase();

                        if (categoryName === 'user') {
                            return '1';
                        }

                        if (categoryName === 'operasional') {
                            return '2';
                        }

                        /*
                         * Fallback berdasarkan departemen.
                         */
                        const departmentName = String(
                                item.nama_departemen ?? ''
                            )
                            .trim()
                            .toLowerCase();

                        if (departmentName === 'operasional') {
                            return '2';
                        }

                        /*
                         * Data lama yang memiliki nama karyawan/departemen
                         * dianggap sebagai User.
                         */
                        return '1';
                    }

                    const mappedRows = rows.map(function(item, index) {
                        const categoryCode = resolveCategoryCode(item);

                        /*
                         * Pastikan nilai kategori pada item juga diperbarui.
                         */
                        item.kategori_value = categoryCode;

                        item.jenis_kartu = categoryCode === '1' ?
                            'User' :
                            'Operasional';

                        return {
                            item: item,
                            categoryCode: categoryCode,
                            encryptedPrimary: encryptedIds[index] || ''
                        };
                    });

                    const userRows = mappedRows.filter(function(row) {
                        return row.categoryCode === '1';
                    });

                    const operationalRows = mappedRows.filter(function(row) {
                        return row.categoryCode === '2';
                    });

                    // console.log('Jumlah response:', rows.length);
                    // console.log('Jumlah User:', userRows.length);
                    // console.log(
                    //     'Jumlah Operasional:',
                    //     operationalRows.length
                    // );

                    $('#userCount').text(userRows.length);
                    $('#operasionalCount').text(operationalRows.length);

                    renderCategoryRows('#list_detail_user tbody', userRows, '1');
                    renderCategoryRows('#list_detail_operasional tbody', operationalRows, '2');

                    detailTableUser = initializeCategoryTable(
                        '#list_detail_user',
                        response,
                        '1',
                        'User'
                    );

                    detailTableOperasional = initializeCategoryTable(
                        '#list_detail_operasional',
                        response,
                        '2',
                        'Operasional'
                    );

                    updatePostingButton(
                        '#list_detail_user',
                        '.btn-post-user',
                        response.periode_id
                    );

                    updatePostingButton(
                        '#list_detail_operasional',
                        '.btn-post-operasional',
                        response.periode_id
                    );

                    updateTambahButtonAjax(
                        response.periode_id,
                        '1',
                        '.btn-add-user'
                    );

                    updateTambahButtonAjax(
                        response.periode_id,
                        '2',
                        '.btn-add-operasional'
                    );

                    if (filterParam) {
                        detailTableUser.search(filterParam).draw();
                        detailTableOperasional.search(filterParam).draw();
                    }
                },
                error: function(xhr) {
                    Swal.close();

                    Swal.fire({
                        title: 'Maaf!',
                        text: xhr.responseJSON?.message || 'Gagal mengambil data detail.',
                        icon: 'error'
                    });
                }
            });
        }

        function renderCategoryRows(tbodySelector, rows, categoryCode) {
            $(tbodySelector).empty();

            rows.forEach(function(row) {
                const item = row.item;
                const encryptedPrimary = encodeURIComponent(row.encryptedPrimary || '');

                const transactionIdRaw = String(item.transaction_id || '');
                const employeeNameRaw = String(item.nama_karyawan || '-');
                const departmentNameRaw = String(item.nama_departemen || '-');
                const phoneNumberRaw = String(item.phone_number || '-');
                const createdAtRaw = String(item.created_at || '-');

                const transactionId = escapeHtml(transactionIdRaw);
                const employeeName = escapeHtml(employeeNameRaw);
                const departmentName = escapeHtml(departmentNameRaw);
                const phoneNumber = escapeHtml(phoneNumberRaw);
                const createdAt = escapeHtml(createdAtRaw);

                const formId = 'delete-form-' + categoryCode + '-' + item.phone_bill_id;

                let editButton = '';
                let deleteButton = '';

                if (canEdit) {
                    if (item.input_bill_status !== 'posted') {
                        editButton = `
                            <button type="button"
                                class="btn btn-warning mb-0 py-1 px-2"
                                onclick="window.location='{{ url($url_menu . '/edit') }}/${encryptedPrimary}'">
                                <i class="fas fa-edit"></i>
                            </button>
                        `;
                    } else {
                        editButton = `
                            <button type="button"
                                class="btn btn-secondary mb-0 py-1 px-2"
                                disabled>
                                <i class="fas fa-edit"></i>
                            </button>
                        `;
                    }
                }

                if (canDelete) {
                    if (item.input_bill_status !== 'posted') {
                        deleteButton = `
                            <form id="${formId}"
                                action="{{ url($url_menu) }}/${encryptedPrimary}"
                                method="POST"
                                style="display:inline">
                                @csrf
                                @method('DELETE')

                                <button type="button"
                                    class="btn btn-danger mb-0 py-1 px-2 btn-delete-bill"
                                    data-form-id="${formId}"
                                    data-transaction-id="${transactionId}"
                                    data-name="${employeeName}"
                                    data-phone="${phoneNumber}"
                                    data-total="${formatRupiah(item.total_bill)}">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </form>
                        `;
                    } else {
                        deleteButton = `
                            <button type="button"
                                class="btn btn-secondary mb-0 py-1 px-2"
                                disabled>
                                <i class="fas fa-trash"></i>
                            </button>
                        `;
                    }
                }

                $(tbodySelector).append(`
                    <tr
                        data-transaction_id="${transactionId}"
                        data-input_bill_status="${escapeHtml(item.input_bill_status)}"
                        data-periode_id="${escapeHtml(item.periode_id)}"
                        data-kategori="${categoryCode}">

                        <td class="text-sm font-weight-normal text-nowrap">
                            <button type="button"
                                class="btn btn-primary mb-0 py-1 px-2"
                                onclick="window.location='{{ url($url_menu . '/show') }}/${encryptedPrimary}'">
                                <i class="fas fa-eye"></i>
                            </button>
                            ${editButton}
                            ${deleteButton}
                        </td>

                        <td class="text-sm font-weight-bold text-dark">${transactionId}</td>
                        <td>${renderBillStatus(item.input_bill_status)}</td>
                        <td>${renderApprovalStatus(item.approve_spv)}</td>
                        <td>${renderApprovalStatus(item.approve_head_hrd)}</td>
                        <td>${employeeName}</td>
                        <td>${departmentName}</td>
                        <td>${phoneNumber}</td>
                        <td class="text-end">${formatRupiah(item.abodemen)}</td>
                        <td class="text-end">${formatRupiah(item.other_bill)}</td>
                        <td class="text-end">${formatRupiah(item.tax)}</td>
                        <td class="text-end">${formatRupiah(item.total_bill)}</td>
                        <td>${createdAt}</td>
                    </tr>
                `);
            });
        }

        function initializeCategoryTable(selector, response, categoryValue, categoryName) {
            const buttons = [];

            if (canAdd) {
                const addButtonClass = categoryValue === '1' ?
                    'btn-add-user' :
                    'btn-add-operasional';

                buttons.push({
                    text: '<i class="fas fa-plus me-1"></i>' +
                        '<span class="font-weight-bold">' +
                        'Tambah ' + categoryName +
                        '</span>',

                    className: addButtonClass +
                        ' btn btn-primary',

                    action: function(event, datatable, node) {
                        if ($(node).prop('disabled')) {
                            return;
                        }

                        window.location =
                            @json(URL::to($url_menu . '/add')) +
                            '?kategori=' +
                            encodeURIComponent(categoryValue);
                    }
                });
            }

            if (canEdit) {
                const postClass = categoryValue === '1' ?
                    'btn-post-user' :
                    'btn-post-operasional';

                buttons.push({
                    text: '<i class="fas fa-upload me-1"></i><span class="font-weight-bold">Posting All ' +
                        categoryName + '</span>',
                    className: postClass + ' btn btn-primary',
                    action: function() {
                        postAllDraftByCategory(
                            response,
                            selector,
                            categoryValue,
                            categoryName
                        );
                    }
                });
            }

            if (canExcel) {
                buttons.push({
                    extend: 'excelHtml5',
                    text: '<i class="fas fa-file-excel me-1 text-success"></i><span class="font-weight-bold">Excel ' +
                        categoryName + '</span>',
                    title: 'Tagihan Telepon - ' + categoryName,
                    autoFilter: true,
                    sheetName: categoryName,
                    exportOptions: {
                        columns: ':visible:not(:first-child)'
                    }
                });
            }

            if (canPdf) {
                buttons.push({
                    extend: 'pdfHtml5',
                    text: '<i class="fas fa-file-pdf me-1 text-danger"></i><span class="font-weight-bold">PDF ' +
                        categoryName + '</span>',
                    title: 'Tagihan Telepon - ' + categoryName,
                    orientation: 'landscape',
                    pageSize: 'A3',
                    exportOptions: {
                        columns: ':visible:not(:first-child)'
                    }
                });
            }

            if (canPrint) {
                buttons.push({
                    extend: 'print',
                    text: '<i class="fas fa-print me-1 text-info"></i><span class="font-weight-bold">Print ' +
                        categoryName + '</span>',
                    title: 'Tagihan Telepon - ' + categoryName,
                    exportOptions: {
                        columns: ':visible:not(:first-child)'
                    }
                });
            }

            const table = $(selector).DataTable({
                language: {
                    search: 'Cari:',
                    lengthMenu: 'Tampilkan _MENU_ baris',
                    zeroRecords: 'Maaf - Data tidak ada',
                    info: 'Data _START_ - _END_ dari _TOTAL_',
                    infoEmpty: 'Tidak ada data',
                    infoFiltered: '(pencarian dari _MAX_ data)'
                },
                paging: false,
                info: false,
                order: [
                    [1, 'asc']
                ],
                responsive: false,
                scrollX: true,
                scrollCollapse: true,
                dom: 'Bfrtip',
                buttons: buttons,
                columnDefs: [{
                    targets: 0,
                    orderable: false,
                    searchable: false
                }]
            });

            const $wrapper = $(selector).closest('.dataTables_wrapper');

            $wrapper.find('.dt-button')
                .addClass('btn btn-secondary')
                .removeClass('dt-button');

            return table;
        }

        function postAllDraftByCategory(response, tableSelector, categoryValue, categoryName) {
            const draftIds = [];

            $(tableSelector + ' tbody tr').each(function() {
                const periodId = String($(this).data('periode_id'));
                const currentPeriodId = String(response.periode_id);
                const status = String($(this).data('input_bill_status'));
                const rowCategory = String($(this).data('kategori'));

                if (
                    periodId === currentPeriodId &&
                    status === 'draft' &&
                    rowCategory === categoryValue
                ) {
                    draftIds.push(String($(this).data('transaction_id')));
                }
            });

            if (!draftIds.length) {
                Swal.fire({
                    title: 'Info!',
                    text: 'Tidak ada data draft kategori ' + categoryName + ' untuk diposting.',
                    icon: 'info'
                });
                return;
            }

            Swal.fire({
                title: 'Konfirmasi Posting All ' + categoryName,
                html: 'Posting <strong>' + draftIds.length + '</strong> data kategori <strong>' + categoryName +
                    '</strong>?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Ya, Posting!',
                cancelButtonText: 'Batal'
            }).then(function(result) {
                if (!result.isConfirmed) {
                    return;
                }

                Swal.fire({
                    title: 'Memproses Data',
                    html: '<p class="mt-2 mb-0">Sedang memposting kategori ' + categoryName +
                        ' dan mengirim email ke Supervisor...</p>',
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                    showConfirmButton: false,
                    didOpen: () => Swal.showLoading()
                });

                $.ajax({
                    url: @json(URL::to('trsbil/postingAll')),
                    type: 'POST',
                    dataType: 'json',
                    data: {
                        _token: @json(csrf_token()),
                        ids: draftIds,
                        kategori: categoryValue
                    },
                    success: function(result) {
                        Swal.close();

                        Swal.fire({
                            title: 'Berhasil!',
                            text: result.message || ('Tagihan ' + categoryName +
                                ' berhasil diposting.'),
                            icon: result.email_failed ? 'warning' : 'success'
                        });

                        detail(
                            currentEncryptedPeriod,
                            currentGmenu,
                            currentDmenu
                        );
                    },
                    error: function(xhr) {
                        Swal.close();

                        Swal.fire({
                            title: 'Gagal!',
                            text: xhr.responseJSON?.message || 'Gagal melakukan posting data.',
                            icon: 'error'
                        });
                    }
                });
            });
        }

        function updatePostingButton(tableSelector, buttonSelector, currentPeriodId) {
            let hasDraft = false;

            $(tableSelector + ' tbody tr').each(function() {
                if (
                    String($(this).data('periode_id')) === String(currentPeriodId) &&
                    String($(this).data('input_bill_status')) === 'draft'
                ) {
                    hasDraft = true;
                }
            });

            $(buttonSelector)
                .prop('disabled', !hasDraft)
                .toggleClass('btn-primary', hasDraft)
                .toggleClass('btn-secondary disabled', !hasDraft)
                .css({
                    opacity: hasDraft ? '1' : '0.5',
                    cursor: hasDraft ? 'pointer' : 'not-allowed'
                });
        }

        function normalizeBoolean(value) {
            return (
                value === true ||
                value === 1 ||
                value === '1' ||
                value === 'true'
            );
        }

        function setAddButtonState(buttonSelector, enabled) {
            const $button = $(buttonSelector);

            if (enabled) {
                $button
                    .prop('disabled', false)
                    .removeAttr('disabled')
                    .removeClass('btn-secondary disabled')
                    .addClass('btn-primary')
                    .css({
                        opacity: '1',
                        cursor: 'pointer',
                        pointerEvents: 'auto'
                    });

                return;
            }

            $button
                .prop('disabled', true)
                .attr('disabled', 'disabled')
                .removeClass('btn-primary')
                .addClass('btn-secondary disabled')
                .css({
                    opacity: '0.5',
                    cursor: 'not-allowed',
                    pointerEvents: 'none'
                });
        }

        function normalizeBoolean(value) {
            return (
                value === true ||
                value === 1 ||
                value === '1' ||
                value === 'true'
            );
        }

        function updateTambahButtonAjax(
            periodId,
            categoryValue,
            buttonSelector
        ) {
            if (!canAdd) {
                setAddButtonState(buttonSelector, false);
                return;
            }

            setAddButtonState(buttonSelector, false);

            $.ajax({
                url: @json(url('trsbil/toggleTambah')),
                type: 'GET',
                dataType: 'json',

                data: {
                    periode_id: periodId,
                    kategori: categoryValue
                },

                success: function(response) {
                    const periodActive = normalizeBoolean(
                        response.isPeriodeActive ??
                        response.periodeActive ??
                        response.is_periode_active ??
                        false
                    );

                    const canAddCategory = normalizeBoolean(
                        response.canAdd ?? false
                    );

                    const success =
                        response.success !== false;

                    setAddButtonState(
                        buttonSelector,
                        success &&
                        periodActive &&
                        canAddCategory
                    );

                    console.log(
                        'Status tombol tambah kategori ' +
                        categoryValue,
                        response
                    );
                },

                error: function(xhr) {
                    setAddButtonState(
                        buttonSelector,
                        false
                    );

                    console.error(
                        'toggleTambah error:',
                        xhr.responseJSON ??
                        xhr.responseText
                    );
                }
            });
        }

        $(document).on('click', '.btn-delete-bill', function() {
            confirmDelete(
                $(this).data('form-id'),
                $(this).data('transaction-id'),
                $(this).data('name'),
                $(this).data('phone'),
                $(this).data('total')
            );
        });

        function confirmDelete(formId, id, name, phone, total) {
            Swal.fire({
                title: 'Yakin ingin menghapus data ini?',
                html: `
                    <div style="text-align:left;">
                        <p><b>ID Transaksi:</b> ${escapeHtml(id)}</p>
                        <p><b>Nama:</b> ${escapeHtml(name)}</p>
                        <p><b>No. HP:</b> ${escapeHtml(phone)}</p>
                        <p><b>Total Tagihan:</b> Rp ${escapeHtml(total)}</p>
                        <hr>
                        <small style="color:#dc3545;">
                            Data yang sudah dihapus tidak akan diproses.
                        </small>
                    </div>
                `,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#e3342f',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Ya, hapus sekarang!',
                cancelButtonText: 'Batal',
                reverseButtons: true,
                focusCancel: true
            }).then(function(result) {
                if (result.isConfirmed) {
                    document.getElementById(formId)?.submit();
                }
            });
        }

        document.addEventListener('input', function(event) {
            if (!event.target.classList.contains('rupiah')) {
                return;
            }

            const numericValue = event.target.value.replace(/\D/g, '');
            event.target.value = numericValue ? formatRupiah(numericValue) : '';
        });
    </script>
@endpush