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

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

    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        <button class="btn btn-secondary mb-0" onclick="window.location='{{ route('trsinm.index') }}'"><i
                                class="fas fa-circle-left me-1"></i><span class="font-weight-bold">Kembali</span></button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @php
        $formatBerat = function ($value) {
            if ($value === null || $value === '') {
                return '-';
            }

            $formatted = number_format((float) $value, 3, ',', '.');

            return rtrim(rtrim($formatted, '0'), ',');
        };
    @endphp

    <div class="container-fluid py-4">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <div>
                <h4 class="font-weight-bolder mb-0">{{ $title ?? 'Detail Penerimaan' }}</h4>
                <p class="text-s text-muted mb-0">Informasi lengkap batch dan progress penerimaan.</p>
            </div>
            <div class="d-flex gap-2">
                @if (in_array($batch->status, ['PLANNED', 'IN_PROGRESS']))
                    <a href="{{ route('trsinm.receive', $batch->batch_id) }}" class="btn btn-success btn-sm mb-0">
                        <i class="fas fa-truck-loading me-1"></i> Proses Receiving
                    </a>
                @endif

                @if ($batch->status === 'PLANNED')
                    <a href="{{ route('trsinm.edit', $batch->batch_id) }}" class="btn btn-warning btn-sm mb-0">
                        <i class="fas fa-edit me-1"></i> Edit
                    </a>
                @endif

                @if ($bags->count() > 0)
                    <a href="{{ route('trsinm.print', $batch->batch_id) }}" class="btn btn-primary btn-sm mb-0"
                        target="_blank">
                        <i class="fas fa-print me-1"></i> Cetak Label
                    </a>
                @endif

                @if ($bags->count() > 0)
                    <a href="{{ route('trsinm.print-document', $batch->batch_id) }}" class="btn btn-info btn-sm mb-0"
                        target="_blank">
                        <i class="fas fa-file-invoice me-1"></i> Cetak Dokumen
                    </a>
                @endif
            </div>
        </div>

        {{-- Summary Cards --}}
        <div class="card shadow-sm mb-4">
            <div class="card-body p-4">
                <div class="row align-items-center mb-4 pb-3 border-bottom">
                    <div class="col-md-2 border-end text-center text-md-start">
                        <label class="text-s font-weight-bolder text-uppercase text-muted d-block mb-1">Status</label>
                        @php
                            $statusColors = [
                                'PLANNED' => 'bg-info',
                                'IN_PROGRESS' => 'bg-warning',
                                'RECEIVED' => 'bg-success',
                                'CANCELLED' => 'bg-danger',
                            ];
                            $statusColor = $statusColors[$batch->status] ?? 'bg-secondary';
                        @endphp
                        <span class="badge {{ $statusColor }} py-2 px-3" style="font-size: 0.8rem;">
                            {{ $batch->status }}
                        </span>
                    </div>
                    <div class="col-md-2 border-end text-center text-md-start">
                        <label class="text-s font-weight-bolder text-uppercase text-muted d-block mb-1">Progress</label>
                        <h4 class="font-weight-bolder mb-0 text-primary">
                            {{ $progress['percentage'] }}%
                        </h4>
                        <small class="text-muted">{{ $progress['total_received'] }}/{{ $progress['total_planned'] }}
                            bag</small>
                    </div>
                    <div class="col-md-2 border-end text-center text-md-start">
                        <label class="text-s font-weight-bolder text-uppercase text-muted d-block mb-1">Total
                            Bag</label>
                        <h4 class="font-weight-bolder mb-0 text-dark">{{ $summary['total_bags'] }}</h4>
                    </div>
                    <div class="col-md-2 border-end text-center text-md-start">
                        <label class="text-s font-weight-bolder text-uppercase text-muted d-block mb-1">Total
                            Berat</label>
                        <h4 class="font-weight-bolder mb-0 text-dark">{{ number_format($summary['total_berat']) }}
                            <small class="text-s">kg</small>
                        </h4>
                    </div>
                    <div class="col-md-2 border-end text-center text-md-start">
                        <label class="text-s font-weight-bolder text-uppercase text-muted d-block mb-1">Status
                            Cetak</label>
                        <div class="d-flex align-items-center justify-content-center justify-content-md-start">
                            <span class="text-s font-weight-bold text-success me-2" title="Sudah"><i
                                    class="fas fa-check-circle"></i> {{ $summary['printed'] }}</span>
                            <span class="text-s font-weight-bold text-secondary" title="Belum"><i class="fas fa-clock"></i>
                                {{ $summary['not_printed'] }}</span>
                        </div>
                    </div>
                    <div class="col-md-2 text-center text-md-start">
                        <label class="text-s font-weight-bolder text-uppercase text-muted d-block mb-1">Mode</label>
                        @if ($batch->receive_mode == 'GENERATE')
                            <span class="badge bg-success py-2 px-3">
                                <i class="fas fa-qrcode me-1"></i>
                                GENERATE
                            </span>
                        @else
                            <span class="badge bg-success py-2 px-3">
                                <i class="fas fa-barcode me-1"></i>
                                USE VENDOR ID
                            </span>
                        @endif
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-7 border-end">
                        <h6 class="text-s font-weight-bold mb-3">Informasi Batch</h6>
                        <div class="row">
                            <div class="col-sm-6">
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item border-0 px-0 text-s">
                                        <span class="text-muted">Batch ID:</span>
                                        <span class="font-weight-bold ms-2">{{ $batch->batch_id }}</span>
                                    </li>
                                    <li class="list-group-item border-0 px-0 text-s">
                                        <span class="text-muted">Tgl Rencana:</span>
                                        <span class="ms-2">
                                            {{ $batch->planned_date ? \Carbon\Carbon::parse($batch->planned_date)->format('d M Y') : '-' }}
                                        </span>
                                    </li>
                                    <li class="list-group-item border-0 px-0 text-s">
                                        <span class="text-muted">Tgl Diterima:</span>
                                        <span class="ms-2">
                                            {{ $batch->received_date ? \Carbon\Carbon::parse($batch->received_date)->format('d M Y') : '-' }}
                                        </span>
                                    </li>
                                    <li class="list-group-item border-0 px-0 text-s">
                                        <span class="text-muted">Tipe Penerimaan:</span>
                                        <span class="ms-2 font-weight-bold">{{ $batch->in_type_name ?? '-' }}</span>
                                    </li>
                                    <li class="list-group-item border-0 px-0 text-s">
                                        <span class="text-muted">PIC Pengirim:</span>
                                        <span class="ms-2">{{ $batch->pic_pengirim_name ?? '-' }}</span>
                                    </li>
                                </ul>
                            </div>
                            <div class="col-sm-6">
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item border-0 px-0 text-s">
                                        <span class="text-muted">PIC Penerima:</span>
                                        <span class="ms-2">{{ $batch->pic_penerima_name ?? '-' }}</span>
                                    </li>
                                    <li class="list-group-item border-0 px-0 text-s">
                                        <span class="text-muted">Dibuat oleh:</span>
                                        <span
                                            class="ms-2">{{ $batch->planned_by_name ?? ($batch->user_create ?? '-') }}</span>
                                    </li>
                                    <li class="list-group-item border-0 px-0 text-s">
                                        <span class="text-muted">Diterima oleh:</span>
                                        <span class="ms-2">{{ $batch->received_by_name ?? '-' }}</span>
                                    </li>
                                    <li class="list-group-item border-0 px-0 text-s cursor-pointer" data-bs-toggle="modal"
                                        data-bs-target="#modalRemarks" title="Klik untuk lihat detail">
                                        <span class="text-muted">Catatan:</span>
                                        <span
                                            class="ms-2 text-dark font-weight-bold text-truncate d-inline-block align-middle"
                                            style="max-width: 150px;">
                                            {{ $batch->remarks ?? '-' }}
                                        </span>
                                        @if ($batch->remarks)
                                            <i class="fas fa-external-link-alt ms-1 text-s text-primary"></i>
                                        @endif
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-5 ps-lg-4 mt-3 mt-lg-0">
                        @php
                            $vendorDetails = $vendorDetails ?? collect();
                            $vendorCount = $vendorDetails->count();
                        @endphp
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h6 class="text-s font-weight-bold mb-0">Vendor Detail</h6>
                            @if ($vendorCount > 1)
                                <div class="d-flex align-items-center gap-2 vendor-detail-nav">
                                    <button type="button" class="btn btn-outline-secondary btn-sm mb-0 vendor-nav-btn"
                                        id="vendorPrevBtn" title="Vendor sebelumnya" aria-label="Vendor sebelumnya">
                                        <i class="fas fa-chevron-left"></i>
                                    </button>
                                    <span class="text-s text-muted" id="vendorDetailCounter">1/{{ $vendorCount }}</span>
                                    <button type="button" class="btn btn-outline-secondary btn-sm mb-0 vendor-nav-btn"
                                        id="vendorNextBtn" title="Vendor berikutnya" aria-label="Vendor berikutnya">
                                        <i class="fas fa-chevron-right"></i>
                                    </button>
                                </div>
                            @endif
                        </div>

                        @forelse ($vendorDetails as $index => $vendorDetail)
                            <div class="vendor-detail-panel {{ $index === 0 ? '' : 'd-none' }}"
                                data-vendor-index="{{ $index }}">
                                <p class="text-s mb-1 font-weight-bold text-dark">{{ $vendorDetail->vendor_name ?? '-' }}
                                </p>
                                <p class="text-s text-muted mb-1"><i class="fas fa-map-marker-alt me-1"></i>
                                    {{ $vendorDetail->vendor_address ?? '-' }}</p>
                                <p class="text-s text-muted mb-2"><i class="fas fa-phone me-1"></i>
                                    {{ $vendorDetail->vendor_phone ?? '-' }}</p>

                                <small class="text-s fw-bold">Material:</small>
                                <ul class="vendor-material-list mb-0 mt-1 ps-3">
                                    @foreach ($vendorDetail->materials as $material)
                                        <li class="text-s text-dark">{{ $material }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @empty
                            <p class="text-s mb-1 font-weight-bold text-dark">{{ $batch->vendor_name ?? '-' }}</p>
                            <p class="text-s text-muted mb-1"><i class="fas fa-map-marker-alt me-1"></i>
                                {{ $batch->vendor_address ?? '-' }}</p>
                            <p class="text-s text-muted mb-0"><i class="fas fa-phone me-1"></i>
                                {{ $batch->vendor_phone ?? '-' }}</p>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>

        {{-- Plan Items Progress --}}
        <div class="card shadow-sm mb-4">
            <div class="card-header bg-white border-bottom pb-3">
                <h6 class="mb-0"><i class="fas fa-tasks me-2"></i>Progress Penerimaan per Material</h6>
            </div>
            <div class="card-body">
                @foreach ($planItems as $item)
                    @php
                        $remaining = $item->qty_planned - $item->qty_received;
                        $pct = $item->qty_planned > 0 ? round(($item->qty_received / $item->qty_planned) * 100) : 0;
                        $progressColor = $pct >= 100 ? 'success' : ($pct > 0 ? 'info' : 'secondary');
                        $isOver = $item->qty_received > $item->qty_planned;
                    @endphp
                    <div class="mb-3 pb-3 {{ !$loop->last ? 'border-bottom' : '' }}">
                        <div class="d-flex justify-content-between align-items-center mb-1">
                            <div>
                                <span class="text-s font-weight-bold">{{ $item->sku_code }}</span>
                                <span class="text-s text-muted ms-2">{{ $item->nama_material }}
                                    @if ($item->color_name)
                                        ({{ $item->color_name }})
                                    @endif
                                </span>
                                @if ($item->berat_per_bag)
                                    <span class="text-s text-muted ms-2">
                                        <i class="fas fa-weight me-1"></i>{{ $formatBerat($item->berat_per_bag) }}
                                        kg/bag
                                    </span>
                                @endif
                            </div>
                            <div class="text-end">
                                <span class="text-s font-weight-bold">
                                    {{ $item->qty_received }} / {{ $item->qty_planned }}
                                </span>
                                <span class="text-s text-muted ms-1">bag</span>
                                @if ($remaining > 0)
                                    <span class="badge bg-warning text-white ms-1">sisa {{ $remaining }}</span>
                                @elseif ($isOver)
                                    <span class="badge bg-danger ms-1">over +{{ abs($remaining) }}</span>
                                @else
                                    <span class="badge bg-success ms-1">selesai</span>
                                @endif
                            </div>
                        </div>
                        <div class="progress" style="height: 8px;">
                            <div class="progress-bar bg-{{ $progressColor }}" role="progressbar"
                                style="width: {{ min($pct, 100) }}%">
                            </div>
                        </div>
                        @if ($item->notes)
                            <small class="text-muted mt-1 d-block"><i class="fas fa-sticky-note me-1"></i>
                                {{ $item->notes }}</small>
                        @endif
                    </div>
                @endforeach

                @if ($planItems->isEmpty())
                    <div class="text-center text-muted py-3">
                        <i class="fas fa-clipboard-list fa-2x mb-2"></i>
                        <p class="mb-0">Belum ada rencana material</p>
                    </div>
                @endif
            </div>
        </div>

        {{-- Bag List --}}
        <div class="card shadow-sm mb-4">
            <div class="card-header pb-0">
                <div class="d-flex justify-content-between align-items-center">
                    <h6 class="mb-0">
                        <i class="fas fa-box me-2"></i>Daftar Bag yang Sudah Diterima
                    </h6>
                </div>
            </div>

            <div class="card-body">
                <div class="table-responsive">
                    <table class="table align-items-center mb-0" id="tableReceivedBags">
                        <thead class="thead-light" style="background-color: #00b7bd4f;">
                            <tr>
                                <th class="ps-3">No</th>
                                <th>
                                    {{ $batch->receive_mode === 'USE_VENDOR_ID' ? 'QR/Barcode Vendor' : 'Bag ID' }}
                                </th>
                                <th>Material Info</th>
                                <th class="text-center">Berat Per Bag (kg)</th>
                                <th class="text-center">Status</th>
                                <th class="text-center">Layout/Lokasi</th>
                                <th class="text-center">Print</th>
                            </tr>
                        </thead>

                        <tbody>
                            @forelse ($bags as $index => $bag)
                                @php
                                    $isWaitingApproval = !empty($bag->pending_approval);
                                    $isPlaced = !empty($bag->placed_at) || $bag->status !== 'PENDING';

                                    $rowClass = '';
                                    $statusText = 'Belum Layouting';
                                    $statusClass = 'bg-light text-secondary';

                                    if ($isWaitingApproval) {
                                        $rowClass = 'bag-row-waiting';
                                        $statusText = 'Menunggu Approval Layout';
                                        $statusClass = 'badge-soft-warning';
                                    } elseif ($isPlaced) {
                                        $rowClass = 'bag-row-placed';
                                        $statusText = 'Sudah Layouting';
                                        $statusClass = 'badge-soft-success';
                                    }

                                    $layoutInfo = $bag->nama_layout ?? ($bag->current_layout_id ?? '-');

                                    $displayBagCode = $bag->barcode_value ?: '-';
                                @endphp

                                <tr class="border-bottom {{ $rowClass }}">
                                    <td class="ps-3 text-sm">
                                        {{ $index + 1 }}
                                    </td>

                                    <td title="{{ $bag->bag_id }}">
                                        <div class="d-flex flex-column">
                                            <span class="text-sm font-weight-bold text-dark">
                                                {{ $displayBagCode }}
                                            </span>

                                            {{-- @if ($batch->receive_mode === 'USE_VENDOR_ID')
                                                <span class="text-xs text-muted">
                                                    Bag ID: {{ $bag->bag_id }}
                                                </span>
                                            @endif --}}
                                        </div>
                                    </td>

                                    <td>
                                        <div class="d-flex flex-column">
                                            <span class="text-sm font-weight-bold">
                                                {{ $bag->sku_code }}
                                            </span>
                                            <span class="text-sm text-muted">
                                                {{ $bag->nama_material }} ({{ $bag->color_name ?? '-' }})
                                            </span>
                                        </div>
                                    </td>

                                    <td class="text-center">
                                        <span class="text-sm font-weight-bold">
                                            {{ $formatBerat($bag->berat) }} </span>
                                        {{-- <span class="text-sm text-muted">
                                            {{ $bag->satuan_name }}
                                        </span> --}}
                                    </td>

                                    <td class="text-center">
                                        <div class="d-flex flex-column align-items-center gap-1">
                                            <span class="badge {{ $statusClass }}">
                                                {{ $statusText }}
                                            </span>
                                        </div>
                                    </td>

                                    <td class="text-center">
                                        <span class="text-sm font-weight-bold text-uppercase">
                                            {{ $layoutInfo }}
                                        </span>
                                    </td>

                                    <td class="text-center">
                                        @if ($bag->qr_printed)
                                            <i class="fas fa-check-circle text-success" title="Printed"></i>
                                        @else
                                            <i class="fas fa-minus-circle text-light" title="Not Printed"></i>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                            @endforelse
                        </tbody>
                    </table>
                </div>

                <div class="col-lg mt-2">
                    <div class="nav-wrapper" id="noted">
                        <code>
                            Note :
                            <i aria-hidden="true" style="color: #ffc107;" class="fas fa-circle"></i>
                            Menunggu Approval Layout

                            &nbsp;&nbsp;

                            <i aria-hidden="true" style="color: #8fd19e;" class="fas fa-circle"></i>
                            Sudah layouting / tidak bisa dihapus
                        </code>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal Remarks --}}
    <div class="modal fade" id="modalRemarks" tabindex="-1" role="dialog" aria-labelledby="modalRemarksLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header border-bottom">
                    <h6 class="modal-title font-weight-bold" id="modalRemarksLabel">Detail Catatan Batch</h6>
                </div>
                <div class="modal-body">
                    <div class="bg-light p-3 border-radius-lg">
                        <p class="text-s text-dark mb-0">{{ $batch->remarks ?? 'Tidak ada catatan.' }}</p>
                    </div>
                </div>
                <div class="modal-footer border-0">
                    <button type="button" class="btn btn-secondary btn-sm mb-0" data-bs-dismiss="modal">Tutup</button>
                </div>
            </div>
        </div>
    </div>

    <style>
        .card {
            border-radius: 12px;
        }

        .table thead th {
            border-bottom-width: 1px !important;
        }

        .btn {
            text-transform: none;
            font-weight: 600;
            border-radius: 8px;
        }

        .list-group-item {
            background: transparent;
        }

        .cursor-pointer {
            cursor: pointer;
            transition: all 0.2s;
        }

        .cursor-pointer:hover {
            background-color: #f8f9fa !important;
        }

        .modal-content {
            border-radius: 16px;
            border: none;
        }

        .vendor-detail-nav .vendor-nav-btn {
            width: 30px;
            height: 30px;
            padding: 0;
            border-radius: 8px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .vendor-material-list {
            max-height: 130px;
            overflow-y: auto;
        }

        .bag-row-waiting td {
            background-color: #fff7e6 !important;
        }

        .bag-row-placed td {
            background-color: #f0fff4 !important;
        }

        .badge-soft-warning {
            background-color: #fff3cd;
            color: #856404;
            border: 1px solid #ffeeba;
        }

        .badge-soft-success {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
    </style>
@endsection

@push('js')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            @if (session('success'))
                Swal.fire({
                    icon: 'success',
                    title: 'Berhasil',
                    text: '{{ session('success') }}',
                    confirmButtonColor: '#028284'
                });
            @endif
            @if ($errors->any())
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: '{{ $errors->first() }}',
                    confirmButtonColor: '#028284'
                });
            @endif

            const vendorPanels = Array.from(document.querySelectorAll('.vendor-detail-panel'));
            const prevBtn = document.getElementById('vendorPrevBtn');
            const nextBtn = document.getElementById('vendorNextBtn');
            const counter = document.getElementById('vendorDetailCounter');

            if (vendorPanels.length > 1 && prevBtn && nextBtn) {
                let currentIndex = 0;

                const renderVendorPanel = () => {
                    vendorPanels.forEach((panel, index) => {
                        panel.classList.toggle('d-none', index !== currentIndex);
                    });

                    if (counter) {
                        counter.textContent = `${currentIndex + 1}/${vendorPanels.length}`;
                    }
                };

                prevBtn.addEventListener('click', function() {
                    currentIndex = (currentIndex - 1 + vendorPanels.length) % vendorPanels.length;
                    renderVendorPanel();
                });

                nextBtn.addEventListener('click', function() {
                    currentIndex = (currentIndex + 1) % vendorPanels.length;
                    renderVendorPanel();
                });

                renderVendorPanel();
            }
        });
    </script>
@endpush

@push('js')
    <script>
        $(document).ready(function() {
            if ($.fn.DataTable.isDataTable('#tableReceivedBags')) {
                $('#tableReceivedBags').DataTable().destroy();
            }

            $('#tableReceivedBags').DataTable({
                paging: true,
                info: true,
                searching: true,
                responsive: true,
                language: {
                    search: "Cari :",
                    lengthMenu: "Tampilkan _MENU_ baris",
                    zeroRecords: "Maaf - Data tidak ada",
                    info: "Data _START_ - _END_ dari _TOTAL_",
                    infoEmpty: "Tidak ada data",
                    infoFiltered: "(pencarian dari _MAX_ data)",
                    emptyTable: '{!! $bags->count() === 0
                        ? '<div class="text-muted"><p class="mb-2">Belum ada bag yang diterima</p>' .
                            (in_array($batch->status, ['PLANNED', 'IN_PROGRESS'])
                                ? '<a href="' .
                                    route('trsinm.receive', $batch->batch_id) .
                                    '" class="btn btn-success btn-sm mt-2">Mulai Penerimaan</a>'
                                : '') .
                            '</div>'
                        : '' !!}'
                },
                dom: '<"row d-flex justify-content-between align-items-center"<"col-lg-12 d-flex justify-content-between align-items-center"Bf>>rtip',
                order: [
                    [0, 'asc']
                ],
                buttons: [
                    @if (($authorize->excel ?? '0') == '1')
                        {
                            extend: 'excelHtml5',
                            text: '<i class="fas fa-file-excel me-1 text-lg text-success"></i><span class="font-weight-bold"> Excel</span>',
                            title: 'Penerimaan Barang - {{ $batch->batch_id }}',
                            exportOptions: {
                                columns: ':not(:last-child)'
                            }
                        },
                    @endif
                    @if (($authorize->pdf ?? '0') == '1')
                        {
                            extend: 'pdfHtml5',
                            text: '<i class="fas fa-file-pdf me-1 text-lg text-danger"></i><span class="font-weight-bold"> PDF</span>',
                            title: 'Penerimaan Barang - {{ $batch->batch_id }}',
                            orientation: 'landscape',
                            pageSize: 'A4',
                            exportOptions: {
                                columns: ':not(:last-child)'
                            },
                            customize: function(doc) {
                                doc.styles.tableHeader.fillColor = '#00b7bd';
                            }
                        },
                    @endif
                ],
                initComplete: function() {
                    var searchBarHtml = `
                        <div class="dataTables_filter d-flex justify-content-end">
                            <input type="text" class="form-control" placeholder="Search..." id="customSearchReceive">
                        </div>
                    `;
                    $('.dataTables_filter').remove();
                    $(searchBarHtml).insertAfter('.dt-buttons');
                    $('#customSearchReceive').on('keyup', function() {
                        $('#tableReceivedBags').DataTable().search(this.value).draw();
                    });
                }
            });

            $('.dt-button').addClass('btn btn-secondary');
            $('.dt-button').removeClass('dt-button');
        });
    </script>
@endpush