@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">
            <div class="col-md-12">
                <div class="row mx-1">
                    <div class="card">
                        {{-- Header Card --}}
                        <div class="row">
                            <div class="card-header col-md-auto">
                                <h5 class="mb-0">List {{ $title_menu }}</h5>
                            </div>
                            <div class="col">
                                @include('components.alert')
                            </div>
                        </div>
                        <hr class="horizontal dark mt-0">

                        {{-- Tombol Tambah --}}
                        <div class="row px-4 py-2">
                            <div class="col-lg">
                                <div class="nav-wrapper">
                                    @if ($authorize->add == '1')
                                        <button class="btn btn-primary mb-0"
                                            onclick="window.location='{{ URL::to($url_menu . '/add') }}'">
                                            <i class="fas fa-plus me-1"></i>
                                            <span class="font-weight-bold">Tambah</span>
                                        </button>
                                    @endif
                                </div>
                            </div>
                        </div>

                        {{-- Tabel Data --}}
                        <div class="row px-4 py-2">
                            <div class="table-responsive">
                                <table class="table display" id="list_{{ $dmenu }}">
                                    <thead class="thead-light" style="background-color: #daecff;">
                                        <tr>
                                            {{-- MODIFIKASI 1: Kolom Checkbox --}}
                                            <th width="10" class="text-center">
                                                <input type="checkbox" id="checkAll" style="cursor: pointer;">
                                            </th>

                                            <th width="110">Action</th>
                                            <th>No</th>
                                            @foreach ($table_header as $header)
                                                @continue($header->field === 'buffer_stok')
                                                <th>{{ $header->alias }}</th>
                                            @endforeach
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($table_detail as $detail)
                                            @php
                                                $primary = '';
                                                foreach ($table_primary as $p) {
                                                    $primary == ''
                                                        ? ($primary = $detail->{$p->field})
                                                        : ($primary = $primary . ':' . $detail->{$p->field});
                                                }
                                            @endphp
                                            <tr
                                                {{ $detail->isactive == '0' ? 'class=not style=background-color:#ffe9ed;' : '' }}>

                                                {{-- 1. Checkbox --}}
                                                <td class="text-center">
                                                    <input type="checkbox" class="cb-print"
                                                        value="{{ $detail->kode_baru }}">
                                                </td>

                                                {{-- 2. Action Buttons --}}
                                                <td class="text-sm font-weight-normal">
                                                    <div class="btn-group">
                                                        {{-- TOMBOL VIEW --}}
                                                        <a href="{{ url('msbrng/show/' . encrypt($primary)) }}"
                                                            class="btn btn-primary btn-sm mb-0 px-3">
                                                            <i class="fas fa-eye"></i> View
                                                        </a>

                                                        <button type="button"
                                                            class="btn btn-sm btn-primary mb-0 px-3 dropdown-toggle dropdown-toggle-split"
                                                            data-bs-toggle="dropdown"></button>

                                                        <ul class="dropdown-menu">
                                                            {{-- TOMBOL EDIT --}}
                                                            @if ($authorize->edit == '1')
                                                                <li>
                                                                    <a href="{{ url('msbrng/edit/' . encrypt($primary)) }}"
                                                                        data-edit-url="{{ url('msbrng/edit/' . encrypt($primary)) }}"
                                                                        class="btn btn-sm btn-warning mx-2 mb-0 w-90">
                                                                        <i class="fas fa-edit"></i> Edit
                                                                    </a>
                                                                </li>
                                                            @endif


                                                            @if ($authorize->delete == '1')
                                                                @php
                                                                    $confirmText =
                                                                        $detail->isactive == '1'
                                                                            ? 'Non Aktifkan'
                                                                            : 'Aktifkan';
                                                                @endphp
                                                                <li>
                                                                    <hr class="dropdown-divider">
                                                                    <form
                                                                        action="{{ route('msbrng.toggle-status', encrypt(!empty($detail->id) ? $detail->id : $detail->kode_baru)) }}"
                                                                        method="POST" style="display: inline">
                                                                        @csrf
                                                                        <button type="button"
                                                                            class="btn btn-sm {{ $detail->isactive == '1' ? 'btn-danger' : 'btn-success' }} mx-2 mb-0 w-90"
                                                                            onclick="confirmToggleStatus(this, '{{ addslashes($detail->nama) }}','{{ $confirmText }}')">
                                                                            <i class="fas fa-random"></i>
                                                                            {{ $confirmText }}
                                                                        </button>
                                                                    </form>
                                                                </li>
                                                            @endif
                                                        </ul>
                                                    </div>
                                                </td>

                                                {{-- 3. Nomor Urut --}}
                                                <td>{{ $loop->iteration }}</td>

                                                {{-- 4. Kolom Dinamis (Kode, Nama, dll) --}}
                                                @foreach ($table_header as $field)
                                                    @php $string = $field->field; @endphp
                                                    @continue($string === 'buffer_stok')
                                                    <td class="text-sm">
                                                        @if ($field->type == 'join')
                                                            @if ($field->query != '')
                                                                @php
                                                                    $query =
                                                                        $field->query . "'" . $detail->$string . "'";
                                                                    $data_query = DB::select($query);
                                                                @endphp
                                                                @foreach ($data_query as $q)
                                                                    <br />
<b>Warning</b>:  Undefined variable $q in <b>/opt/lampp/htdocs/tsiinventory/resources/views/master/msbrng/list.blade.php</b> on line <b>143</b><br />
                                                                    {{ $sAsArray[0] != '' ? $sAsArray[0] : '' }}
                                                                @endforeach
                                                            @endif
                                                        @elseif ($field->type == 'image')
                                                            @if ($detail->$string)
                                                                @php
                                                                    $galleryImages = [];
                                                                    if (!empty($detail->gambar_json)) {
                                                                        $decodedGallery = json_decode(
                                                                            $detail->gambar_json,
                                                                            true,
                                                                        );
                                                                        if (is_array($decodedGallery)) {
                                                                            foreach ($decodedGallery as $galleryItem) {
                                                                                if (!empty($galleryItem)) {
                                                                                    $galleryImages[] = (string) $galleryItem;
                                                                                }
                                                                            }
                                                                        }
                                                                    }
                                                                    if (!empty($detail->gambar)) {
                                                                        $galleryImages[] = (string) $detail->gambar;
                                                                    }
                                                                    if (!empty($detail->gambar2)) {
                                                                        $galleryImages[] = (string) $detail->gambar2;
                                                                    }
                                                                    if (!empty($detail->$string)) {
                                                                        $galleryImages[] = (string) $detail->$string;
                                                                    }
                                                                    $galleryImages = array_values(
                                                                        array_unique(array_filter($galleryImages)),
                                                                    );
                                                                @endphp
                                                                <img src="{{ asset('storage/' . $detail->$string . 'tumb.png') }}"
                                                                    alt="Thumbnail"
                                                                    style="max-height: 35px; cursor: pointer;"
                                                                    onerror="this.src='{{ asset('storage/noimage.png') }}'"
                                                                    data-gallery='@json($galleryImages)'
                                                                    onclick="openImagePreviewFromElement(this)">
                                                            @else
                                                                <span class="text-muted">No Image</span>
                                                            @endif
                                                        @elseif (in_array(strtolower($string), ['stok', 'qty', 'aktual_stok', 'min_stok', 'max_stok', 'selisih']))
                                                            {{ (float) $detail->$string }}
                                                        @else
                                                            {{ $detail->$string }}
                                                        @endif
                                                    </td>
                                                @endforeach
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- MODIFIKASI 3: MODAL PRINT LABEL --}}
    <div class="modal fade" id="modalPrintLabel" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Cetak Label Stecker</h5>
                    <button type="button" class="btn-close text-dark" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form action="{{ url('msbrng/print-label') }}" method="POST" target="_blank">
                    @csrf
                    <div class="modal-body">
                        <input type="hidden" name="selected_ids" id="selected_ids_input">
                        <div class="form-group">
                            <label>Pilih Ukuran Label</label>
                            <select name="label_size" class="form-control" required>
                                <option value="blue_big">1. Joly Box Besar (11.7 x 4 cm)</option>
                                <option value="blue_medium">2. Joly Box Medium (8.6 x 3.1 cm)</option>
                                <option value="blue_small">3. Joly Box Kecil (5.5 x 1.3 cm)</option>
                                <option value="white_wide">4. Laci Lebar (7.5 x 2.2 cm)</option>
                                <option value="white_mini">5. Laci Mini (3.7 x 1.9 cm)</option>
                                <option value="10x15">6. Rail Mini (10 x 1.5 cm)</option>
                                <option value="10x35">7. Rail (10 x 3.5 cm)</option>
                                <option value="a5">8. A5 (21 x 14.8 cm)</option>
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-primary">Cetak PDF</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- MODAL PREVIEW GAMBAR --}}
    <div class="modal fade" id="modalImagePreview" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Preview Gambar</h5>
                    <button type="button" class="btn-close text-dark" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div id="imagePreviewCarousel" class="carousel slide" data-bs-interval="false">
                        <div class="carousel-inner" id="imagePreviewCarouselInner"></div>
                        <button class="carousel-control-prev" type="button" data-bs-target="#imagePreviewCarousel"
                            data-bs-slide="prev" id="imagePreviewPrevBtn">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="visually-hidden">Previous</span>
                        </button>
                        <button class="carousel-control-next" type="button" data-bs-target="#imagePreviewCarousel"
                            data-bs-slide="next" id="imagePreviewNextBtn">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="visually-hidden">Next</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('css')
    <style>
        div.dt-button-collection.accurate-export-menu {
            width: 270px;
            max-width: calc(100vw - 32px);
            padding: 8px 0;
            background: #fff;
            border: 1px solid #e9ecef;
            border-radius: 6px;
        }

        .accurate-export-menu .accurate-export-option {
            display: block;
            white-space: normal;
        }

        .accurate-export-menu .accurate-export-option + .accurate-export-option {
            margin-top: 8px;
        }
    </style>
    <style>
        .dataTables_wrapper .msbrng-right-tools {
            row-gap: 0;
            column-gap: 0.5rem;
            min-width: 0;
            flex-wrap: nowrap;
        }

        .dataTables_wrapper .msbrng-right-tools #custom-filter-wrapper,
        .dataTables_wrapper .msbrng-right-tools .dataTables_filter,
        .dataTables_wrapper .msbrng-right-tools #form-custom-filter {
            min-width: 0;
        }

        .dataTables_wrapper .msbrng-right-tools #custom-filter-wrapper {
            margin-right: 0.4rem;
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
            white-space: nowrap;
        }

        .dataTables_wrapper .msbrng-right-tools #form-custom-filter {
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
            margin: 0;
            flex-wrap: nowrap;
        }

        .dataTables_wrapper .msbrng-right-tools .msbrng-filter-label {
            font-weight: 600;
            margin-bottom: 0;
        }


        .dataTables_wrapper .msbrng-right-tools #status_filter,
        .dataTables_wrapper .msbrng-right-tools #tipe_filter {
            width: clamp(80px, 7vw, 110px);
            min-width: 80px;
            max-width: 110px;
        }

        .dataTables_wrapper .msbrng-right-tools .dataTables_filter label {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 0;
            white-space: nowrap;
        }

        .dataTables_wrapper .msbrng-right-tools .dataTables_filter input {
            width: clamp(100px, 9vw, 130px);
            min-width: 100px;
            max-width: 130px;
        }

        .dataTables_wrapper .msbrng-right-tools.msbrng-break {
            flex-wrap: wrap;
            row-gap: 0.5rem;
            column-gap: 0;
        }

        .dataTables_wrapper .msbrng-right-tools.msbrng-break #custom-filter-wrapper,
        .dataTables_wrapper .msbrng-right-tools.msbrng-break .dataTables_filter {
            flex: 1 1 100%;
            margin-left: 0 !important;
            margin-right: 0 !important;
            display: flex;
            justify-content: flex-end;
            white-space: normal !important;
        }

        .dataTables_wrapper .msbrng-right-tools.msbrng-break #form-custom-filter {
            width: 100%;
            justify-content: flex-end;
            flex-wrap: wrap !important;
            column-gap: 0.75rem;
            row-gap: 0.5rem;
        }


        .dataTables_wrapper .msbrng-right-tools.msbrng-break #status_filter,
        .dataTables_wrapper .msbrng-right-tools.msbrng-break #tipe_filter {
            width: clamp(100px, 30%, 150px);
            min-width: 100px !important;
            max-width: 150px !important;
        }

        .dataTables_wrapper .msbrng-right-tools.msbrng-break .dataTables_filter label {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 0;
            justify-content: flex-end;
            width: 100%;
            white-space: normal;
        }

        .dataTables_wrapper .msbrng-right-tools.msbrng-break .dataTables_filter input {
            width: clamp(120px, 40%, 180px);
            min-width: 120px !important;
            max-width: 180px !important;
        }

        @media (max-width: 991.98px) {
            .dataTables_wrapper .msbrng-right-tools {
                flex-wrap: wrap;
                justify-content: flex-start !important;
            }

            .dataTables_wrapper .msbrng-right-tools #custom-filter-wrapper,
            .dataTables_wrapper .msbrng-right-tools .dataTables_filter {
                flex: 1 1 100%;
                margin-left: 0 !important;
                margin-right: 0 !important;
                justify-content: flex-start;
            }

            .dataTables_wrapper .msbrng-right-tools #form-custom-filter {
                width: 100%;
                justify-content: flex-start;
            }
        }

        @media (max-width: 767.98px) {
            .dataTables_wrapper .msbrng-right-tools {
                flex-wrap: wrap;
                justify-content: flex-start !important;
                row-gap: 0.5rem;
            }

            .dataTables_wrapper .msbrng-right-tools #custom-filter-wrapper,
            .dataTables_wrapper .msbrng-right-tools .dataTables_filter {
                flex: 1 1 100%;
                margin-left: 0 !important;
                margin-right: 0 !important;
                justify-content: flex-start;
            }

            .dataTables_wrapper .msbrng-right-tools #form-custom-filter {
                width: 100%;
                flex-wrap: wrap !important;
                justify-content: flex-start;
                column-gap: 0.5rem;
                row-gap: 0.5rem;
            }


            .dataTables_wrapper .msbrng-right-tools #status_filter,
            .dataTables_wrapper .msbrng-right-tools #tipe_filter,
            .dataTables_wrapper .msbrng-right-tools .dataTables_filter input,
            .dataTables_wrapper .msbrng-right-tools .dataTables_filter label {
                width: 100%;
                min-width: 0 !important;
                max-width: 100%;
            }

            .dataTables_wrapper .msbrng-right-tools .dataTables_filter label {
                justify-content: flex-start;
            }
        }

        #modalImagePreview .carousel-item img {
            max-height: 70vh;
            width: 100%;
            object-fit: contain;
            background: #f8f9fa;
            border-radius: 0.5rem;
        }

        #modalImagePreview .carousel-control-prev-icon,
        #modalImagePreview .carousel-control-next-icon {
            background-color: rgba(0, 0, 0, 0.45);
            border-radius: 50%;
            padding: 1rem;
        }
    </style>
@endpush

@push('js')
    @php
        $selectedTipe = request('tipe_filter', 'sparepart');
        $selectedStatus = request('status_filter', '1');
    @endphp
    <script>
        let columnAbjad = '';

        $(document).ready(function() {
            // ------------------------------------------------------------------
            // 1. LOGIC CHECKBOX SELECT ALL (MODIFIKASI BARU)
            // ------------------------------------------------------------------
            $(document).on('change', '#checkAll', function() {

                var isChecked = $(this).is(':checked');
                // Terapkan ke semua checkbox baris (.cb-print)
                $('.cb-print').prop('checked', isChecked);
            });

            // Optional: Jika satu checkbox baris di-uncheck, header ikut uncheck
            $(document).on('change', '.cb-print', function() {
                if ($(this).is(':checked') == false) {
                    $("#checkAll").prop('checked', false);
                }
                if ($('.cb-print:checked').length == $('.cb-print').length) {
                    $("#checkAll").prop('checked', true);
                }
            });
            // ------------------------------------------------------------------

            // Logic Column Name (Kode Asli)
            let numColumns = $('#list_{{ $dmenu }}').DataTable().columns().count();
            let columnNames = '';
            for (let index = 0; index < numColumns; index++) {
                columnNames = $('#list_{{ $dmenu }}').DataTable().columns(index).header()[0].textContent;

            }

            // Logic Color Note (Kode Asli)
            if ($('*').hasClass('exp')) {
                $('#noted').html(
                    `<code>Note :( <i aria-hidden="true" style="color: #ffc2cd;" class="fas fa-circle"></i> Data not active ), ( <i aria-hidden="true" style="color: #ffe768;" class="fas fa-circle"></i> ` +
                    $('#datenote').text() + ` )</code>`)
            }
            if ($('*').hasClass('stock')) {
                $('#noted').html(
                    `<code>Note :( <i aria-hidden="true" style="color: #ffc2cd;" class="fas fa-circle"></i> Data not active ), ( <i aria-hidden="true" style="color: #f93c3c;" class="fas fa-circle"></i> ` +
                    $('#stocknote').text() + ` )</code>`)
            }
            if ($('*').hasClass('exp') && $('*').hasClass('stock')) {
                $('#noted').html(
                    `<code>Note :( <i aria-hidden="true" style="color: #ffc2cd;" class="fas fa-circle"></i> Data not active ), ( <i aria-hidden="true" style="color: #ffe768;" class="fas fa-circle"></i> ` +
                    $('#datenote').text() +
                    ` ), ( <i aria-hidden="true" style="color: #f93c3c;" class="fas fa-circle"></i> ` + $(
                        '#stocknote').text() + ` )</code>`)
            }

            if ($.fn.DataTable.isDataTable('#list_{{ $dmenu }}')) {
                $('#list_{{ $dmenu }}').DataTable().destroy();
            }
            // ------------------------------------------------------------------
            // 2. DATATABLES CONFIGURATION
            // ------------------------------------------------------------------

            var table = $('#list_{{ $dmenu }}').DataTable({
                paging: true,
                pageLength: 10,
                stateSave: true,
                stateDuration: 60 * 60 * 8,
                lengthMenu: [
                    [10, 25, 50, 100, -1],
                    [10, 25, 50, 100, "All"]
                ],
                info: true,
                searching: true,
                responsive: true,
                language: {
                    search: "Search:",
                    lengthMenu: "Show _MENU_ entries",
                    zeroRecords: "No matching records found",
                    info: "Showing _START_ to _END_ of _TOTAL_ entries",
                    infoEmpty: "Showing 0 to 0 of 0 entries",
                    infoFiltered: "(filtered from _MAX_ total entries)",
                    paginate: {
                        first: "First",
                        last: "Last",
                        next: "Next",
                        previous: "Previous"
                    }
                },
                // Layout DOM: l=lengthMenu, B=Buttons, f=search, r=processing, t=table, i=info, p=pagination
                // Buttons dekat show entries, filter dekat search
                dom: '<"row mb-3"<"col-12 col-lg-5 d-flex align-items-center"lB><"col-12 col-lg-7 d-flex justify-content-end align-items-center msbrng-right-tools"f>>' +
                    'rt' +
                    '<"row mt-3"<"col-sm-12 col-md-5"i><"col-sm-12 col-md-7 d-flex justify-content-end"p>>',
                buttons: [{
                        text: '<i class="fas fa-file-excel me-1 text-lg text-success"></i><span class="font-weight-bold"> Excel</span>',
                        action: function() {
                            var params = new URLSearchParams(window.location.search);
                            params.set('export', 'excel');
                            window.location.href = "{{ url($url_menu) }}?" + params.toString();
                        }
                    },
                    {
                        extend: 'pdfHtml5',
                        text: '<i class="fas fa-file-pdf me-1 text-lg text-danger"></i><span class="font-weight-bold"> PDF</span>',
                        action: function() {
                            var params = new URLSearchParams(window.location.search);
                            params.set('export', 'pdf');
                            window.location.href = "{{ url($url_menu) }}?" + params.toString();
                        }
                    },
                    {
                        text: '<i class="fas fa-print me-1 text-lg text-warning"></i><span class="font-weight-bold"> Label</span>',
                        action: function(e, dt, node, config) {
                            openPrintModal(); // Panggil fungsi modal
                        }
                    },
                    {
                        extend: 'collection',
                        text: '<i class="fas fa-arrow-down me-1 text-lg text-danger"></i><span class="font-weight-bold"> Excel Accurate</span>',
                        autoClose: true,
                        background: false,
                        collectionLayout: 'accurate-export-menu',
                        fade: 150,
                        buttons: [
                            {
                                text: '<i class="fas fa-file-excel me-1" aria-hidden="true"></i><span class="font-weight-bold">Upload Master Barang</span>',
                                className: 'btn btn-sm btn-secondary mx-2 mb-0 w-90 accurate-export-option',
                                action: function(e, dt, node, config) {
                                    var exportUrl = new URL("{{ url($url_menu) }}", window.location.origin);
                                    exportUrl.searchParams.set('export', 'excel_accurate_master');
                                    exportUrl.searchParams.set('tipe_filter', $('#tipe_filter').val() || 'sparepart');
                                    window.location.href = exportUrl.toString();
                                }
                            },
                            {
                                text: '<i class="fas fa-file-excel me-1" aria-hidden="true"></i><span class="font-weight-bold">Penyesuaian Persediaan</span>',
                                className: 'btn btn-sm btn-secondary mx-2 mb-0 w-90 accurate-export-option',
                                action: function(e, dt, node, config) {
                                    var exportUrl = new URL("{{ url($url_menu) }}", window.location.origin);
                                    exportUrl.searchParams.set('export', 'excel_accurate');
                                    exportUrl.searchParams.set('tipe_filter', $('#tipe_filter').val() || 'sparepart');
                                    window.location.href = exportUrl.toString();
                                }
                            },
                        ]
                    },
                ],
                initComplete: function() {
                    var api = this.api();
                    var $wrapper = $(api.table().container());
                    var $rightTools = $wrapper.find('.msbrng-right-tools').first();

                    // Tambahkan margin kiri pada buttons untuk jarak dari show entries
                    var $dtButtons = $wrapper.find('.dt-buttons');
                    $dtButtons.addClass('ms-3').css({
                        'display': 'flex',
                        'align-items': 'center',
                        'gap': '0.5rem',
                        'flex-wrap': 'wrap'
                    });


                    var filterHtml = `
                        <div id="custom-filter-wrapper">
                            <form method="GET" action="{{ url($url_menu) }}" id="form-custom-filter">
                                <span class="msbrng-filter-label ms-2">Status:</span>
                                <select name="status_filter" id="status_filter" class="form-control">
                                    <option value="1" {{ ($selectedStatus == '1' || $selectedStatus == 'aktif') ? 'selected' : '' }}>Aktif</option>
                                    <option value="0" {{ ($selectedStatus == '0' || $selectedStatus == 'tidak_aktif' || $selectedStatus == 'nonaktif') ? 'selected' : '' }}>Tidak Aktif</option>
                                    <option value="semua" {{ $selectedStatus == 'semua' ? 'selected' : '' }}>Semua</option>
                                </select>
                                <span class="msbrng-filter-label ms-2">Tipe:</span>
                                <select name="tipe_filter" id="tipe_filter" class="form-control">
                                    <option value="semua" {{ $selectedTipe == 'semua' ? 'selected' : '' }}>Semua</option>
                                    @foreach ($tipe_options as $tipe)
                                        <option value="{{ $tipe->value }}" {{ $selectedTipe == $tipe->value ? 'selected' : '' }}>
                                            {{ $tipe->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </form>
                        </div>
                    `;
                    // Tambahkan filter sebelum search
                    if ($wrapper.find('#custom-filter-wrapper').length === 0) {
                        $wrapper.find('.dataTables_filter').before(filterHtml);
                    }

                    // Copy exact styles dari DataTables filter
                    var $dtFilter = $wrapper.find('.dataTables_filter');
                    var $dtLabel = $dtFilter.find('label');
                    var $dtInput = $dtFilter.find('input');
                    var $customWrapper = $wrapper.find('#custom-filter-wrapper');
                    var $customForm = $wrapper.find('#form-custom-filter');

                    var $statusFilter = $wrapper.find('#status_filter');
                    var $tipeFilter = $wrapper.find('#tipe_filter');
                    var $customLabels = $customForm.find('.msbrng-filter-label');

                    $statusFilter.off('change.msbrngFilter').on('change.msbrngFilter',
                        function() {
                            $wrapper.find('#form-custom-filter').submit();
                        });
                    $tipeFilter.off('change.msbrngFilter').on('change.msbrngFilter',
                        function() {
                            $wrapper.find('#form-custom-filter').submit();
                        });

                    // Apply styles ke wrapper
                    $customWrapper.css({
                        'margin-bottom': $dtFilter.css('margin-bottom')
                    });

                    // Samakan tampilan form custom dengan area search DataTables
                    $customForm.css({
                        'font-size': $dtLabel.css('font-size'),
                        'color': $dtLabel.css('color'),
                        'line-height': $dtLabel.css('line-height')
                    });

                    // Apply exact styles ke select dari input
                    [$statusFilter, $tipeFilter].forEach(function($el) {
                        if ($el.length) {
                            $el.css({
                                'height': $dtInput.outerHeight() + 'px',
                                'padding': $dtInput.css('padding'),
                                'font-size': $dtInput.css('font-size'),
                                'line-height': $dtInput.css('line-height'),
                                'border': $dtInput.css('border'),
                                'border-radius': $dtInput.css('border-radius'),
                                'border-color': $dtInput.css('border-color'),
                                'background-color': $dtInput.css('background-color'),
                                'vertical-align': $dtInput.css('vertical-align')
                            });
                        }
                    });

                    var applyRightToolbarMode = function() {
                        if (!$rightTools.length) {
                            return;
                        }

                        var availableWidth = $rightTools.innerWidth() || 0;
                        var isCompact = window.innerWidth < 992 || (availableWidth > 0 &&
                            availableWidth < 540);

                        if (isCompact) {
                            $rightTools.addClass('msbrng-break');
                            $customWrapper.css({
                                'margin-right': '0',
                                'width': '100%',
                                'display': 'flex',
                                'justify-content': 'flex-start',
                                'white-space': 'normal'
                            });
                            $customForm.css({
                                'display': 'flex',
                                'width': '100%',
                                'flex-wrap': 'wrap',
                                'justify-content': 'flex-start',
                                'column-gap': '0.5rem',
                                'row-gap': '0.5rem'
                            });
                            $customLabels.css({
                                'display': 'inline-flex',
                                'width': '100%',
                                'margin': '0'
                            });
                            $tipeFilter.css({
                                'width': '100%',
                                'min-width': '0',
                                'max-width': '100%'
                            });
                            $dtFilter.css({
                                'margin-left': '0',
                                'width': '100%',
                                'white-space': 'normal'
                            });
                            $dtLabel.css({
                                'display': 'flex',
                                'width': '100%',
                                'justify-content': 'flex-start',
                                'white-space': 'normal'
                            });
                            $dtInput.css({
                                'width': '100%',
                                'min-width': '0',
                                'max-width': '100%'
                            });
                        } else {
                            $rightTools.removeClass('msbrng-break');
                            $customWrapper.css({
                                'margin-right': '0.4rem',
                                'width': 'auto',
                                'display': 'inline-flex',
                                'justify-content': 'flex-end',
                                'white-space': 'nowrap'
                            });
                            $customForm.css({
                                'display': 'inline-flex',
                                'width': 'auto',
                                'flex-wrap': 'nowrap',
                                'justify-content': 'flex-end',
                                'column-gap': '0.25rem',
                                'row-gap': '0'
                            });
                            $customLabels.css({
                                'display': 'inline-flex',
                                'width': 'auto',
                                'margin': '0'
                            });

                            $dtFilter.css({
                                'margin-left': '0.4rem',
                                'width': 'auto',
                                'white-space': 'nowrap'
                            });
                            $dtLabel.css({
                                'display': 'inline-flex',
                                'width': 'auto',
                                'justify-content': 'flex-end',
                                'white-space': 'nowrap'
                            });
                            $dtInput.css({
                                'width': '130px',
                                'min-width': '100px',
                                'max-width': '130px'
                            });
                        }
                    };

                    applyRightToolbarMode();
                    setTimeout(function() {
                        applyRightToolbarMode();
                    }, 0);

                    $(window).off('resize.msbrngRightTools').on('resize.msbrngRightTools', function() {
                        applyRightToolbarMode();
                    });

                    if (window.ResizeObserver) {
                        if (window.msbrngRightToolsObserver) {
                            window.msbrngRightToolsObserver.disconnect();
                        }
                        window.msbrngRightToolsObserver = new ResizeObserver(function() {
                            applyRightToolbarMode();
                        });
                        window.msbrngRightToolsObserver.observe($rightTools[0]);
                    }

                    var sidebarObserver = new MutationObserver(function() {
                        applyRightToolbarMode();
                    });

                    sidebarObserver.observe(document.body, {
                        attributes: true,
                        attributeFilter: ['class']
                    });
                }
            });

            const listParams = new URLSearchParams(window.location.search);
            const requestedPage = parseInt(listParams.get('dt_page'), 10);
            if (!Number.isNaN(requestedPage) && requestedPage > 0) {
                const pageInfo = table.page.info();
                const maxPage = pageInfo.pages > 0 ? pageInfo.pages - 1 : 0;
                const targetPage = Math.min(requestedPage - 1, maxPage);
                table.page(targetPage).draw('page');
            }

            const syncEditLinksWithCurrentPage = function() {
                const pageInfo = table.page.info();
                const currentPage = pageInfo ? pageInfo.page + 1 : 1;
                $('a[data-edit-url]').each(function() {
                    const editUrl = new URL($(this).data('edit-url'), window.location.origin);

                    editUrl.searchParams.set('dt_page', currentPage);

                    ['status_filter', 'tipe_filter', 'search'].forEach(function(param) {
                        const value = listParams.get(param);
                        if (value !== null && value !== '') {
                            editUrl.searchParams.set(param, value);
                        }
                    });

                    $(this).attr('href', editUrl.toString());
                });
            };

            syncEditLinksWithCurrentPage();
            table.on('draw', syncEditLinksWithCurrentPage);

            // Set Style Button
            $('.dt-button').addClass('btn btn-secondary');
            $('.dt-button').removeClass('dt-button');

            // Auto submit form when tipe_filter or status_filter changes
            $(document).on('change', 'select[name="tipe_filter"], select[name="status_filter"]', function() {
                $(this).closest('form').submit();
            });

            // Authorize Check
            <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/tsiinventory/resources/views/master/msbrng/list.blade.php</b> on line <b>875</b><br />
<br />
<b>Warning</b>:  Attempt to read property "excel" on null in <b>/opt/lampp/htdocs/tsiinventory/resources/views/master/msbrng/list.blade.php</b> on line <b>875</b><br />
            <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/tsiinventory/resources/views/master/msbrng/list.blade.php</b> on line <b>876</b><br />
<br />
<b>Warning</b>:  Attempt to read property "pdf" on null in <b>/opt/lampp/htdocs/tsiinventory/resources/views/master/msbrng/list.blade.php</b> on line <b>876</b><br />
            <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/tsiinventory/resources/views/master/msbrng/list.blade.php</b> on line <b>877</b><br />
<br />
<b>Warning</b>:  Attempt to read property "print" on null in <b>/opt/lampp/htdocs/tsiinventory/resources/views/master/msbrng/list.blade.php</b> on line <b>877</b><br />
        });

        // ------------------------------------------------------------------
        // 3. FUNGSI PENDUKUNG (MODAL & DELETE)
        // ------------------------------------------------------------------

        // Function Buka Modal Print
        function openPrintModal() {
            var selected = [];
            $('.cb-print:checked').each(function() {
                selected.push($(this).val());
            });

            if (selected.length === 0) {
                Swal.fire('Peringatan', 'Pilih minimal satu barang untuk dicetak label!', 'warning');
                return;
            }

            $('#selected_ids_input').val(JSON.stringify(selected));
            $('#modalPrintLabel').modal('show');
        }

        // Function Delete Data (Kode Asli)
        function deleteData(event, name, msg) {
            event.preventDefault();
            Swal.fire({
                title: 'Konfirmasi',
                text: `Apakah Anda Yakin ${msg} Data ${name} ini?`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: `Ya, ${msg}`,
                cancelButtonText: 'Batal',
                confirmButtonColor: '#028284'
            }).then((result) => {
                if (result.isConfirmed) {
                    event.target.closest('form').submit();
                }
            });
        }

        function confirmToggleStatus(buttonEl, name, msg) {
            Swal.fire({
                title: 'Konfirmasi',
                text: `Apakah Anda yakin ingin ${msg} data ${name} ini?`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: `Ya, ${msg}!`,
                cancelButtonText: 'Batal',
                confirmButtonColor: '#028284'
            }).then((result) => {
                if (result.isConfirmed) {
                    buttonEl.closest('form').submit();
                }
            });
        }

        function openImagePreviewFromElement(el) {
            const galleryRaw = el.getAttribute('data-gallery') || '[]';
            let gallery = [];

            try {
                gallery = JSON.parse(galleryRaw);
            } catch (e) {
                gallery = [];
            }

            gallery = (Array.isArray(gallery) ? gallery : []).filter(Boolean);
            if (!gallery.length) {
                Swal.fire('Info', 'Gambar tidak tersedia.', 'info');
                return;
            }

            const carouselInner = document.getElementById('imagePreviewCarouselInner');
            const prevBtn = document.getElementById('imagePreviewPrevBtn');
            const nextBtn = document.getElementById('imagePreviewNextBtn');

            carouselInner.innerHTML = gallery.map((path, index) => `
                <div class="carousel-item ${index === 0 ? 'active' : ''}">
                    <img src="{{ asset('storage') }}/${path}" class="d-block" alt="Preview ${index + 1}"
                        onerror="this.src='{{ asset('storage/noimage.png') }}'">
                </div>
            `).join('');

            const showNav = gallery.length > 1;
            prevBtn.style.display = showNav ? '' : 'none';
            nextBtn.style.display = showNav ? '' : 'none';

            const modalEl = document.getElementById('modalImagePreview');
            const modal = bootstrap.Modal.getOrCreateInstance(modalEl);
            modal.show();
        }
    </script>
    @if (Session::has('message') && Session::get('class') == 'danger')
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                Swal.fire({
                    title: 'Perhatian!',
                    text: {!! json_encode(Session::get('message')) !!},
                    icon: 'warning',
                    confirmButtonColor: '#028284'
                });
            });
        </script>
    @endif
@endpush