@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    @if ($authorize->add == '1')
                        {{-- button execute --}}
                        <button class="btn btn-primary mb-0" id="trbigr-execute">
                            <i class="fas fa-bolt me-1"></i>
                            <span class="font-weight-bold">Execute</span>
                        </button>
                    @endif
                    @if ($gr != null)
                        <button class="btn btn-info mb-0" id="trbigr-view">
                            <i class="fas fa-eye"></i>
                            <span class="font-weight-bold">View</span>
                        </button>
                    @endif
                </div>
            </div>
        </div>
    </div>

    {{-- filter execute --}}
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <form role="form" method="POST" id="{{ $dmenu }}-form">
                        @csrf
                        <div class="card-body">
                            <p class="text-uppercase text-sm">Get Data {{ $title_menu }}</p>
                            <hr class="horizontal dark mt-0">

                            <div class="col-lg-4">
                                <div class="row mb-3">
                                    <div class="col-lg-4">
                                        <label for="inputdate" class="form-label">Date</label>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="input-group">
                                            <input type="date" class="form-control" id="fromdate" name="fromdate"
                                                placeholder="Date From">
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="input-group">
                                            <input type="date" class="form-control" id="todate" name="todate"
                                                placeholder="Date To">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {{-- Belum ber label --}}
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <div class="card overflow-auto">

                    <div class="card-body">
                        <p class="text-uppercase text-sm">List Detail {{ $title_menu }}</p>
                        <hr class="horizontal dark mt-0">
                        <div class="row">
                            <!-- Trigger -->

                            @if ($gr != null)
                                <div class="table-responsive">

                                    <button type="button" class="btn btn-primary mb-0" id="btnOpenLabelModal"><i
                                            class="fa fa-paper-plane"></i>
                                        Set Labels
                                    </button>
                                    <p></p>
                                    <table class="table table-hover" id="tabel-gr">
                                        <thead style="background-color: #00b7bd4f;">
                                            <tr>
                                                <th style="text-align: center;">
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox" id="checkboxesMain">
                                                    </div>
                                                </th>
                                                <th scope="col">No. PR</th>
                                                <th scope="col">Posting Date</th>
                                                <th scope="col">Nama Barang</th>
                                                <th scope="col">Kategori</th>
                                                <th scope="col">Sub Kategori</th>
                                                <th scope="col">Nama Vendor</th>
                                                <th scope="col">Amount</th>


                                            </tr>
                                        </thead>

                                        <tbody>
                                            @php
                                                $totalCurrency = 0;
                                                $i = 1;
                                            @endphp
                                            @foreach ($gr as $g)
                                                @php $totalCurrency += $g->currency_column_ksl; @endphp
                                                <tr>
                                                    @if ($g->labels == '' || $g->labels == null)
                                                        <td style="text-align: center;">
                                                            <div class="form-check">
                                                                <input class="checkbox form-check-input" type="checkbox"
                                                                    data-id="{{ $g->id }}" autocomplete="off">
                                                            </div>
                                                        </td>
                                                    @else
                                                        <td>
                                                            <i class="fa fa-tag text-primary"
                                                                id="labelIcon{{ $g->id }}" data-bs-toggle="tooltip"
                                                                data-bs-placement="top" title="{{ $g->labels_name }}">
                                                            </i>
                                                        </td>
                                                    @endif
                                                    <td>{{ $g->purchase_req }}</td>
                                                    <td>{{ $g->posting_date }}</td>
                                                    <td>{{ $g->text }}</td>
                                                    <td>{{ $g->long_text }}</td>
                                                    <td>{{ $g->sub_kategori }}</td>
                                                    <td>{{ $g->name }}</td>
                                                    <td style="text-align: right">
                                                        {{ number_format($g->currency_column_ksl, 2) }}
                                                    </td>

                                                </tr>
                                            @endforeach

                                        </tbody>

                                    </table>
                                </div>
                            @else
                                <div>

                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>


    {{-- Sudah berlabel --}}
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-8">
                <div class="card overflow-auto">

                    <div class="card-body">
                        <p class="text-uppercase text-sm">List Detail {{ $title_menu }} Sudah Berlabel</p>
                        <hr class="horizontal dark mt-0">
                        <div class="row">
                            <!-- Trigger -->
                            <div class="table-responsive" style="height:650px; overflow-y:auto;">

                                <button type="button" class="btn btn-warning mb-0" id="btnOpenLabelModalEdit"><i
                                        class="fa fa-pencil"></i>
                                    Edit Labels
                                </button>
                                <p></p>
                                <table class="table table-hover" id="tblgrl">
                                    <thead style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th style="text-align: center;">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" id="checkboxesEdit">
                                                </div>
                                            </th>
                                            {{-- <th scope="col">Edit</th> --}}
                                            <th scope="col">Label</th>
                                            <th scope="col">No. PR</th>
                                            <th scope="col">Posting Date</th>
                                            <th scope="col">Nama Barang</th>
                                            <th scope="col">Kategori</th>
                                            <th scope="col">Sub Kategori</th>
                                            <th scope="col">Nama Vendor</th>

                                        </tr>
                                    </thead>

                                    <tbody>
                                        @php
                                            $totalCurrency = 0;
                                            $i = 1;
                                        @endphp
                                        @foreach ($grlabel as $gl)
                                            @php $totalCurrency += $gl->currency_column_ksl; @endphp
                                            <tr data-id="{{ $gl->id }}" data-label="{{ $gl->labels ?? '' }}">
                                                {{-- @if ($gl->labels == '' || $gl->labels == null) --}}
                                                <td style="text-align: center;">
                                                    <div class="form-check">
                                                        <input class="checkboxE form-check-input" type="checkbox"
                                                            data-id="{{ $gl->id }}"
                                                            data-label="{{ $gl->labels }}" autocomplete="off">
                                                    </div>

                                                </td>
                                                {{-- <td>
                                                    <button type="button"
                                                        class="btn btn-sm btn-outline-secondary btn-edit-row">
                                                        <i class="fa fa-pencil"></i>
                                                    </button>
                                                </td> --}}


                                                <td><span> {{ $gl->labels_name }}</span>
                                                </td>
                                                {{-- @endif --}}
                                                <td>{{ $gl->purchase_req }}</td>
                                                <td>{{ $gl->posting_date }}</td>
                                                <td>{{ $gl->text }}</td>
                                                <td>{{ $gl->long_text }}</td>
                                                <td>{{ $gl->sub_kategori }}</td>
                                                <td>{{ $gl->name }}</td>
                                            </tr>
                                        @endforeach

                                    </tbody>

                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card overflow-auto">
                    <div class="card-body">
                        <p class="text-uppercase text-sm">Per Label</p>
                        <hr class="horizontal dark mt-0">
                        <div class="row">
                            <div class="table-responsive">
                                <button class="btn btn-info mb-0" id="trbigr-view-label">
                                    <i class="fas fa-eye"></i>
                                    <span class="font-weight-bold">View</span>
                                </button>

                                <p></p>
                                <div style="height:600px; overflow-y:auto;">
                                    <table class="table table-hover" id="detail-label">
                                        <thead style="background-color: #00b7bd4f;">
                                            <tr>
                                                <th scope="col">Labels</th>
                                                <th scope="col">Total Amount</th>
                                            </tr>
                                        </thead>

                                        <tbody id="label-summary">
                                            @foreach ($labelssumm as $lab)
                                                <tr class="row-label {{ empty($lab->label_name) ? 'table-danger' : '' }}"
                                                    data-id="{{ $lab->labels }}"
                                                    data-label="{{ $lab->label_name ?? '' }}" style="cursor:pointer">
                                                    <td>{{ $lab->label_name ?? 'Undefined' }}</td>
                                                    <td class="text-end">{{ number_format($lab->total_currency, 2) }}</td>
                                                </tr>
                                            @endforeach
                                        </tbody>

                                        <tfoot>
                                            <tr>
                                                <th colspan="1">Total Keseluruhan :</th>
                                                <th style="text-align: right">{{ number_format($totalSumLabel, 2) }}</th>
                                            </tr>
                                        </tfoot>
                                    </table>
                                </div>
                            </div>
                        </div>

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

        </div>
    </div>


    <!-- Modal -->
    <div class="modal fade" id="labelModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header py-2">
                    <h6 class="modal-title">Set Labels</h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body p-0">

                    {{-- Sticky search bar --}}
                    <div class="p-2 border-bottom bg-white position-sticky top-0" style="z-index:1;">
                        <input id="labelSearch" type="text" class="form-control form-control-sm"
                            placeholder="Cari label… (ketik untuk filter)">
                        <div class="d-flex justify-content-between mt-2 small">
                            {{-- <div>
                                <a href="#" id="selectVisible" class="me-2">Pilih yang tampil</a>
                                <a href="#" id="clearVisible">Bersihkan yang tampil</a>
                            </div> --}}
                            <span id="selectedCount" class="text-muted">0 dipilih</span>
                        </div>
                    </div>

                    {{-- Scrollable checklist --}}
                    <div id="labelList" class="p-2 row row-cols-2" style="max-height: 360px; overflow:auto;">
                        @php
                            $selected = $selectedLabels ?? null; // sekarang hanya satu value
                        @endphp

                        @foreach ($labels as $label)
                            <div class="col mb-1">
                                <div class="form-check" data-name="{{ Str::lower($label->name) }}">
                                    <input class="form-check-input mail-label" type="radio" name="label_radio"
                                        id="lbl{{ $label->value }}" value="{{ $label->value }}"
                                        @checked($label->value == $selected)>
                                    <label class="form-check-label" for="lbl{{ $label->value }}">
                                        {{ $label->name }}
                                    </label>
                                </div>
                            </div>
                        @endforeach

                        {{-- Placeholder "create new" (muncul hanya saat tidak ada hasil) --}}
                        <div id="createNewWrap" class="d-none col-12">
                            <hr class="my-2">
                            <button id="createNewBtn" type="button" class="btn btn-outline-primary btn-sm">
                                Buat label "<span id="createNewText"></span>"
                            </button>
                            <small class="text-muted ms-2">Label baru akan langsung dipilih.</small>
                        </div>

                    </div>

                </div>
                <div id="labelError" class="text-danger small mb-2 d-none">
                    Pilih minimal 1 label!
                </div>

                <div class="modal-footer py-2">
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Tutup</button>
                    <button type="button" class="btn btn-primary btn-sm" id="applyLabels">Terapkan</button>
                </div>
            </div>
        </div>
    </div>



    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
            tooltipTriggerList.map(function(tooltipTriggerEl) {
                return new bootstrap.Tooltip(tooltipTriggerEl)
            })
        })
        // kumpulkan id baris terpilih
        function getSelectedRowIds() {
            return $('.checkbox:checked').map(function() {
                return $(this).data('id');
            }).get();
        }

        // kumpulkan id baris terpilih
        function getSelectedRowIdsE() {
            return $('.checkboxE:checked').map(function() {
                return {
                    id: $(this).data('id'),
                    label: $(this).data('label'),
                };
            }).get();
        }

        // Helper: preselect radio di modal
        function modalSelectRadio(val) {
            const $list = $('#labelList');
            $list.find('.mail-label').prop('checked', false);
            if (val) $list.find(`.mail-label[value="${val}"]`).prop('checked', true);

            // update counter (radio → 0/1)
            const n = $list.find('.mail-label:checked').length;
            $('#selectedCount').text((n ? 1 : 0) + ' dipilih');
        }

        const ROUTES = {
            create: "{{ url('/trbigr/save_labels') }}",
            edit: "{{ url('/trbigr/update_labels') }}" // <-- bikin endpoint edit ini di backend
        };

        // buka modal hanya jika ada baris terpilih
        $('#btnOpenLabelModal').on('click', function() {
            const ids = getSelectedRowIds();
            $('#labelError').addClass('d-none');
            console.log('id', ids);

            if (ids.length === 0) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Tidak ada item yang dipilih',
                    text: 'Pilih minimal 1 item!',
                    confirmButtonText: 'OK'
                });
                return;
            }

            // reset semua centang di modal
            $('#labelList .mail-label').prop('checked', false);

            // set mode & getter di dataset modal
            const $m = $('#labelModal');
            $m.data('mode', 'create');
            $m.data('getter', 'getSelectedRowIds');

            $('#labelModal').modal('show');
        });


        // buka modal hanya jika ada baris terpilih dan sudah berlabel
        $('#btnOpenLabelModalEdit').on('click', function() {
            const ids = getSelectedRowIdsE();
            $('#labelError').addClass('d-none');
            console.log('id', ids);

            if (ids.length === 0) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Tidak ada item yang dipilih',
                    text: 'Pilih minimal 1 item!',
                    confirmButtonText: 'OK'
                });
                return;
            }

            // reset semua centang di modal
            $('#labelList .mail-label').prop('checked', false);

            // cari label unik dari items terpilih
            const unique = [...new Set(ids.map(x => String(x.label || '')))];

            console.log('uniq', unique);

            // kalau semua sama dan tidak kosong → preselect
            if (unique.length === 1 && unique[0] !== '') {
                $('#labelList .mail-label[value="' + unique[0] + '"]').prop('checked', true);
            }

            // set mode & getter
            const $m = $('#labelModal');
            $m.data('mode', 'edit');
            $m.data('getter', 'getSelectedRowIdsE');

            // tampilkan jumlah row terpilih (opsional)
            $('#selectedCount').text(ids.length + ' dipilih');

            $('#labelModal').modal('show');
        });

        $('#applyLabels').on('click', function(e) {
            const selected = $('#labelList .mail-label:checked').map(function() {
                return this.value
            }).get();
            // console.log('selected', selected);

            window.onApplyLabels(e, selected);
        });

        // Dipanggil saat klik "Terapkan" di modal
        window.onApplyLabels = function(e, selectedLabelValues) {
            e.preventDefault(); // cegah submit form default
            e.stopPropagation(); // cegah bubbling yang kadang memicu handler lain


            // const ids = getSelectedRowIdsE();

            const $m = $('#labelModal');
            const mode = $m.data('mode') || 'create'; // 'create' | 'edit'
            const getterName = $m.data('getter') || 'getSelectedRowIds';
            const url = ROUTES[mode];

            // panggil getter sesuai mode
            const selectedItems = (window[getterName] && typeof window[getterName] === 'function') ?
                window[getterName]() : [];

            // normalisasi ke array ID (boleh array of number/string, atau array of {id:...})
            // const ids = selectedItems.map(it => (typeof it === 'object' && it !== null) ? it.id : it);
            const ids = selectedItems.map(it => {
                const val = (typeof it === 'object' && it !== null) ? it.id : it;
                return parseInt(val, 10); // convert ke integer
            }).filter(Number.isFinite);



            if (ids.length === 0) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Tidak ada item yang dipilih',
                    text: 'Pilih minimal 1 item!',
                    confirmButtonText: 'OK'
                });
                return;
            }
            if (!selectedLabelValues || selectedLabelValues.length === 0) {
                $('#labelError').removeClass('d-none'); // tampilkan pesan merah
                return;
            } else {
                $('#labelError').addClass('d-none'); // sembunyikan kalau sudah ada label
            }


            console.log('id', ids);
            console.log('label', selectedLabelValues);


            $.ajax({
                url: '{{ URL::to('/') }}/trbigr/save_labels', // route backend
                // url: lur, // route backend
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    ids: ids, // [1,3]
                    labels: selectedLabelValues // ['1','2'] atau ['asset','project'] sesuai value di checkbox label
                },
                beforeSend: function() {
                    // Lock UI modal
                    const $m = $('#labelModal');
                    const $btnOK = $('#applyLabels');
                    const $btnX = $m.find('.btn-close'); // tombol X di header
                    const $btnCls = $m.find('button[data-bs-dismiss="modal"]'); // tombol "Tutup"

                    // simpan state (opsional)
                    $m.data('_btnclose-display', $btnX.css('display'));

                    $btnOK.prop('disabled', true).text('Menyimpan…');
                    $btnX.prop('disabled', true).addClass('disabled').css('display', 'none');
                    $btnCls.prop('disabled', true).addClass('disabled');

                    // pointer events off untuk isi modal (opsional)
                    $m.find('.modal-body :input').prop('disabled', true);
                },
                complete: function() {
                    $('#applyLabels').prop('disabled', false).text('Terapkan');
                },
                success: function(res) {

                    const el = document.getElementById('labelModal');
                    const modalInstance = bootstrap.Modal.getOrCreateInstance(el);
                    modalInstance.hide();
                    Swal.fire({
                        icon: 'success',
                        title: 'Labels berhasil diterapkan',
                        timer: 1300,
                        showConfirmButton: false
                    }).then(() => {

                        location.reload();


                    });

                },
                error: function(xhr) {
                    const $m = $('#labelModal');
                    const $btnOK = $('#applyLabels');
                    const $btnX = $m.find('.btn-close');
                    const $btnCls = $m.find('button[data-bs-dismiss="modal"]');

                    // Re-enable UI jika gagal
                    $btnOK.prop('disabled', false).text('Terapkan');
                    $btnX.prop('disabled', false).removeClass('disabled')
                        .css('display', $m.data('_btnclose-display') || '');
                    $btnCls.prop('disabled', false).removeClass('disabled');
                    $m.find('.modal-body :input').prop('disabled', false);

                    alert('Gagal menyimpan label: ' + (xhr.responseJSON?.message || 'Unknown error'));
                }
            });
        };

        // opsional: sembunyikan error kalau user mulai centang label
        $('#labelList').on('change', '.mail-label', function() {
            if ($('#labelList .mail-label:checked').length > 0) {
                $('#labelError').addClass('d-none');
            }
        });

        ///untuk modal labels
        (function() {
            const $modal = $('#labelModal');
            const $list = $('#labelList');
            const $search = $('#labelSearch');
            const $count = $('#selectedCount');
            const $createWrap = $('#createNewWrap');
            const $createText = $('#createNewText');
            const $createBtn = $('#createNewBtn');

            function updateCount() {
                const n = $list.find('.mail-label:checked').length;
                $count.text(n + ' dipilih');
            }

            function filterList(q) {
                const query = (q || '').trim().toLowerCase();
                let visible = 0;

                $list.find('.form-check').each(function() {
                    const name = $(this).data('name') + '';
                    const show = !query || name.indexOf(query) !== -1;
                    $(this).toggle(show);
                    if (show) visible++;
                });

                // tampilkan "create new" hanya jika ada query dan tidak ada hasil
                if (query && visible === 0) {
                    $createText.text(q.trim());
                    $createWrap.removeClass('d-none');
                } else {
                    $createWrap.addClass('d-none');
                }
            }

            // debounce sederhana
            let t = null;
            $search.on('input', function() {
                clearTimeout(t);
                const v = this.value;
                t = setTimeout(() => filterList(v), 120);
            });

            // pilih/bersihkan yang tampil
            $('#selectVisible').on('click', function(e) {
                e.preventDefault();
                $list.find('.form-check:visible .mail-label:not(:checked)').prop('checked', true);
                updateCount();
            });
            $('#clearVisible').on('click', function(e) {
                e.preventDefault();
                $list.find('.form-check:visible .mail-label:checked').prop('checked', false);
                updateCount();
            });

            // hitung saat centang berubah
            $list.on('change', '.mail-label', updateCount);

            // create new (AJAX), lalu tambahkan & centang
            $createBtn.on('click', function() {
                const name = $createText.text();
                if (!name) return;

                $.ajax({
                    url: '{{ URL::to('/') }}/trbigr/enum_label',
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: {
                        name: name
                    },
                    success: function(res) {
                        // res: {value: 'generated_value', name:'Nama'}
                        const id = 'lbl' + res.value;

                        const $row = $(`
                        <div class="col mb-1">
                            <div class="form-check" data-name="${(res.name || '').toLowerCase()}">
                                <input class="form-check-input mail-label" type="radio" name="label_radio" id="${id}" value="${res.value}" checked>
                                <label class="form-check-label" for="${id}">${res.name}</label>
                            </div>
                        </div>
                    `);
                        $list.prepend($row); // taruh paling atas
                        $createWrap.addClass('d-none');
                        $search.val(''); // reset filter
                        filterList('');
                        updateCount();
                    },
                    error: function(xhr) {
                        alert('Gagal membuat label: ' + (xhr.responseJSON?.message ||
                            'Unknown error'));
                    }
                });
            });

            // reset saat modal dibuka
            $modal.on('shown.bs.modal', function() {
                $search.val('').trigger('input').focus();
                updateCount();
            });

            // Apply → kirim balik yang terpilih (silakan sesuaikan)
            $('#applyLabels').on('click', function() {
                const selected = $list.find('.mail-label:checked').map(function() {
                    return this.value;
                }).get();
                // TODO: kirim ke server / gunakan sesuai kebutuhan
                // Contoh: panggil fungsi global
                if (typeof window.onApplyLabels === 'function') {
                    window.onApplyLabels(selected);
                }
                $modal.modal('hide');
            });
        })();

        $(document).ready(function() {


            //checkbox all checked ((( Belum Berlabel)))
            $('#checkboxesMain').on('click', function(e) {
                // Check or uncheck all checkboxes based on the main checkbox state
                $(".checkbox").each(function() {
                    if (!$(this).is(':disabled')) { // Only operate on non-disabled checkboxes
                        $(this).prop('checked', $('#checkboxesMain').prop('checked'));
                    }
                });
            });

            $('.checkbox').on('click', function() {
                // Update the main checkbox state based on individual checkboxes
                var allChecked = $('.checkbox:checked').length === $('.checkbox:not(:disabled)').length;
                $('#checkboxesMain').prop('checked', allChecked);
                console.log('checked', allChecked);
            });

            ///////////////////////////////////////////////////////////////////////////////////////////////////////

            //checkbox all checked ((( Berlabel)))
            $('#checkboxesEdit').on('click', function(e) {
                // Check or uncheck all checkboxes based on the main checkbox state
                $(".checkboxE").each(function() {
                    if (!$(this).is(':disabled')) { // Only operate on non-disabled checkboxes
                        $(this).prop('checked', $('#checkboxesEdit').prop('checked'));
                    }
                });
            });

            $('.checkboxE').on('click', function() {
                // Update the main checkbox state based on individual checkboxes
                var editChecked = $('.checkboxE:checked').length === $('.checkboxE:not(:disabled)').length;
                $('#checkboxesEdit').prop('checked', editChecked);
                console.log('editchecked', editChecked);
            });


            $('#trbigr-execute').click(function(e) {
                e.preventDefault(); // cegah submit default

                const $btn = $(this);

                // tampilkan spinner dan disable tombol
                $btn.append(
                        '<span class="spinner-border spinner-border-sm icon-load" role="status"></span>')
                    .attr('disabled', true);

                // ambil form & serialize datanya
                let $form = $('#trbigr-form');
                let formData = $form.serialize();

                $.ajax({
                    url: $form.attr(
                        'action'),
                    type: 'POST',
                    data: formData,
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Data berhasil diperbarui',
                            timer: 1200,
                            showConfirmButton: false
                        }).then(() => {
                            // refresh halaman saja
                            location.reload();
                        });
                    },
                    error: function(jqXHR) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Oops...',
                            text: jqXHR.responseJSON?.message ||
                                'Something went wrong!',
                            confirmButtonColor: '#d33'
                        });
                    },
                    complete: function() {
                        $btn.find('.icon-load').remove();
                        $btn.attr('disabled', false);
                    }
                });
            });


            $('#trbigr-view').click(function(e) {
                e.preventDefault(); // Mencegah pengiriman default tombol

                // Tampilkan spinner dan nonaktifkan tombol
                $(this).append(
                    '<span class="spinner-border spinner-border-sm icon-load" role="status"></span>'
                ).attr('disabled', true);

                window.location.href = "{{ url('/trbigr/show') }}";
            });

            $('#trbigr-view-label').click(function(e) {
                e.preventDefault(); // Mencegah pengiriman default tombol

                // Tampilkan spinner dan nonaktifkan tombol
                $(this).append(
                    '<span class="spinner-border spinner-border-sm icon-load" role="status"></span>'
                ).attr('disabled', true);

                window.location.href = "{{ url('/trbigr/show_label') }}";
            });

            $('#tabel-gr').DataTable({
                "language": {
                    "search": "Cari :",
                    "lengthMenu": "Tampilkan _MENU_ baris",
                    "zeroRecords": "Maaf - Data tidak ada",
                    "info": "Halaman _PAGE_ dari _PAGES_",
                    "infoEmpty": "Tidak ada data",
                    "infoFiltered": "(pencarian dari _MAX_ data)"
                },
                "destroy": true,
                ordering: true,
                paging: true,
                info: true,
                responsive: true,
            });

            $('#tabel-grlabel').DataTable({
                "language": {
                    "search": "Cari :",
                    "lengthMenu": "Tampilkan _MENU_ baris",
                    "zeroRecords": "Maaf - Data tidak ada",
                    "info": "Halaman _PAGE_ dari _PAGES_",
                    "infoEmpty": "Tidak ada data",
                    "infoFiltered": "(pencarian dari _MAX_ data)"
                },
                "destroy": true,
                ordering: true,
                responsive: true,
            });

            $('#detail-label').DataTable({
                "language": {
                    "search": "Cari :",
                    "lengthMenu": "Tampilkan _MENU_ baris",
                    "zeroRecords": "Maaf - Data tidak ada",
                    "info": "Halaman _PAGE_ dari _PAGES_",
                    "infoEmpty": "Tidak ada data",
                    "infoFiltered": "(pencarian dari _MAX_ data)"
                },
                "destroy": true,
                ordering: false,
                responsive: true,
            });

            $('#tblgrl').DataTable({
                "language": {
                    "search": "Cari :",
                    "lengthMenu": "Tampilkan _MENU_ baris",
                    "zeroRecords": "Maaf - Data tidak ada",
                    "info": "Halaman _PAGE_ dari _PAGES_",
                    "infoEmpty": "Tidak ada data",
                    "infoFiltered": "(pencarian dari _MAX_ data)"
                },
                "destroy": true,
                info: true,
                ordering: true,
                responsive: true,
            });
        });

        document.addEventListener('DOMContentLoaded', function() {
            const $tbody = $('#label-summary');
            $tbody.on('click', 'tr.row-label', function() {
                const $tr = $(this);
                const id = $tr.data('id'); // kirim ID labels ke controller
                const name = $tr.data('label'); // hanya untuk display

                // toggle: kalau sudah terbuka → tutup
                if ($tr.next().hasClass('detail-row')) {
                    $tr.next().remove();
                    return;
                }
                $('tr.detail-row').remove(); // tutup detail lain

                $.ajax({
                    url: "{{ url('/trbigr/detail_label') }}",
                    method: "POST",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: {
                        id
                    },
                    dataType: "json",
                    cache: false,
                    timeout: 15000,

                    beforeSend: function() {
                        // tampilkan placeholder loading tepat di bawah row
                        $tr.after(`
                            <tr class="detail-row" data-loading="1">
                            <td colspan="2">
                                <div class="p-2 border rounded bg-light text-muted">
                                Loading detail "${name}"...
                                </div>
                            </td>
                            </tr>
                        `);
                    },

                    success: function(resp) {
                        const fmt = (n) => Number(n ?? 0)
                            .toLocaleString(undefined, {
                                minimumFractionDigits: 2,
                                maximumFractionDigits: 2
                            });

                        const rowsHtml = (resp.rows ?? []).map((r, i) => `
                        <tr>
                        <td>${i + 1}</td>
                        <td>${r.text ?? ''}</td>
                        <td class="text-end">${fmt(r.currency_column_ksl)}</td>
                        </tr>
                    `).join('') || `<tr><td colspan="5" class="text-center text-muted">Tidak ada data</td></tr>`;

                        const detailHtml = `
                        <tr class="detail-row">
                        <td colspan="2">
                            <div class="p-2 border rounded bg-light">
                            <div class="fw-bold mb-2">Detail Label:</div>
                            <table class="table table-sm mb-2">
                                <thead>
                                <tr>
                                    <th style="width:60px">No</th>
                                    <th>Nama Barang</th>
                                
                                    <th class="text-end">Amount</th>
                                </tr>
                                </thead>
                                <tbody>${rowsHtml}</tbody>
                                <tfoot>
                                <tr>
                                    <th colspan="2" class="text-end">Subtotal</th>
                                    <th class="text-end">${fmt(resp.total)}</th>
                                </tr>
                                </tfoot>
                            </table>
                            </div>
                        </td>
                        </tr>
                    `;

                        // ganti placeholder loading
                        $tr.next('[data-loading="1"]').remove();
                        $tr.after(detailHtml);
                    },

                    error: function(xhr, status) {
                        const msg = (xhr.responseJSON && xhr.responseJSON.message) ?
                            xhr.responseJSON.message :
                            `Gagal load detail (${status})`;
                        $tr.next('[data-loading="1"]').remove();
                        $tr.after(`
                            <tr class="detail-row">
                            <td colspan="2">
                                <div class="p-2 border rounded bg-light text-danger">
                                ${msg}
                                </div>
                            </td>
                            </tr>
                        `);
                    }
                });
            });

        });
    </script>
@endsection