@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="container-fluid">
        @include('components.alert')
        <div class="row">
            <div class="col-md-12">
                <div class="row mx-1">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0">Result {{ $title_menu }}</h5>
                        </div>
                        <hr class="horizontal dark mt-0">
                        <div class="row px-4 py-2">
                            <div class="col-lg">
                                <div class="nav-wrapper row">
                                    <div class="col">
                                        {{-- button back --}}
                                        <button class="btn btn-secondary mb-0" onclick="history.back()"><i
                                                class="fas fa-circle-left me-1"> </i><span
                                                class="font-weight-bold">Kembali</button>
                                    </div>
                                    <div class="col">
                                        {{-- set value filter --}}
                                        @foreach ($filter as $key => $value)
                                            <input type="hidden" name="f{{ $key }}" value="{{ $value }}" />
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row px-4 py-2">
                            <div class="table-responsive">
                                <table class="table display" id="list_{{ $dmenu }}">
                                    {{-- check result data --}}
                                    @if ($table_result)
                                        <thead class="thead-light" style="background-color: #00b7bd4f;">
                                            <tr>
                                                <th>No</th>
                                                {{-- set table header --}}
                                                @foreach ($table_result as $result)
                                                    @php
                                                        $sAsArray = array_keys((array) $result);
                                                        $i = 0;
                                                    @endphp
                                                @endforeach
                                                @foreach ($sAsArray as $header)
                                                    @if (substr($header, 0, 4) == 'HDN_')
                                                        {{-- Hidden column: tidak tampilkan sebagai header --}}
                                                    @elseif (substr($header, 0, 3) == 'IMG')
                                                        <th>{{ substr($header, 4) }}</th>
                                                    @elseif (substr($header, 0, 3) == 'CDT')
                                                        <th>{{ substr($header, 6) . '-' . substr($header, 3, 2) }}</th>
                                                    @elseif (substr($header, 0, 3) == 'CST')
                                                        <th>{{ substr($header, 4) }}</th>
                                                    @else
                                                        <th>{{ $header }}</th>
                                                    @endif
                                                    @php
                                                        $i++;
                                                    @endphp
                                                @endforeach
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {{-- retrieve table result --}}
                                            @foreach ($table_result as $detail)
                                                @php
                                                    // Collect HDN_ values to set as data-attributes on tr
                                                    $hdnValues = [];
                                                    foreach ((array) $detail as $k => $v) {
                                                        if (substr($k, 0, 4) === 'HDN_') {
                                                            $hdnValues[strtolower(substr($k, 4))] = $v;
                                                        }
                                                    }
                                                    $hdnAttrStr = '';
                                                    foreach ($hdnValues as $hk => $hv) {
                                                        $hdnAttrStr .= ' data-' . e($hk) . '="' . e($hv) . '"';
                                                    }
                                                @endphp
                                                <tr
                                                    {{ @$detail->isactive == '0' || @$detail->ISACTIVE == '0' ? 'class=not style=background-color:#ffe9ed;' : '' }}
                                                    {!! $hdnAttrStr !!}>
                                                    <td>{{ $loop->iteration }}</td>
                                                    @foreach ($table_result as $result)
                                                        @php
                                                            $field = array_keys((array) $result);
                                                            $i = 0;
                                                        @endphp
                                                    @endforeach
                                                    @foreach ($field as $header)
                                                        @php
                                                            $string = $header;
                                                            $img_id = '';
                                                            $characters =
                                                                'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUFGHIJKLMNOPQRSTUVWXYZ';
                                                            for ($i = 0; $i < 10; $i++) {
                                                                $img_id .=
                                                                    $characters[mt_rand(0, strlen($characters) - 1)];
                                                            }
                                                        @endphp
                                                        @if (substr($string, 0, 4) == 'HDN_')
                                                            {{-- Hidden column: tidak render sebagai <td>, data sudah di data-attribute <tr> --}}
                                                        @elseif (substr($string, 0, 3) == 'IMG')
                                                            <td class="text-sm font-weight-normal">
                                                                @php
                                                                    $rawImages = trim((string) ($detail->$string ?? ''));
                                                                    $imageItems = [];

                                                                    if ($rawImages !== '') {
                                                                        $decodedImages = null;
                                                                        if (str_starts_with($rawImages, '[')) {
                                                                            $decodedImages = json_decode($rawImages, true);
                                                                        }

                                                                        if (is_array($decodedImages)) {
                                                                            $imageItems = $decodedImages;
                                                                        } else {
                                                                            $imagePaths = preg_split('/\s*(?:\|\||\||,)\s*/', $rawImages, -1, PREG_SPLIT_NO_EMPTY);
                                                                            foreach ($imagePaths as $imagePath) {
                                                                                $parts = explode('@@', (string) $imagePath, 2);
                                                                                $imageItems[] = [
                                                                                    'date' => $parts[0] !== $imagePath ? trim($parts[0]) : '',
                                                                                    'path' => trim($parts[1] ?? $parts[0]),
                                                                                ];
                                                                            }
                                                                        }
                                                                    }

                                                                    $imageItems = array_values(array_filter(array_map(function ($item) {
                                                                        if (is_array($item)) {
                                                                            return [
                                                                                'date' => trim((string) ($item['date'] ?? '')),
                                                                                'path' => trim((string) ($item['path'] ?? '')),
                                                                            ];
                                                                        }

                                                                        $rawItem = trim((string) $item);
                                                                        if ($rawItem === '') {
                                                                            return null;
                                                                        }

                                                                        $parts = explode('@@', $rawItem, 2);
                                                                        return [
                                                                            'date' => trim($parts[0] ?? ''),
                                                                            'path' => trim($parts[1] ?? $parts[0]),
                                                                        ];
                                                                    }, $imageItems)));

                                                                    $uniqueImageItems = [];
                                                                    $seenImagePaths = [];
                                                                    foreach ($imageItems as $imageItem) {
                                                                        $pathKey = $imageItem['path'] ?? '';
                                                                        // skip empty, '0', 'null', or paths that are purely numeric (invalid)
                                                                        if (
                                                                            $pathKey === ''
                                                                            || $pathKey === '0'
                                                                            || strtolower($pathKey) === 'null'
                                                                            || (is_numeric($pathKey) && strpos($pathKey, '/') === false)
                                                                            || in_array($pathKey, $seenImagePaths, true)
                                                                        ) {
                                                                            continue;
                                                                        }
                                                                        $seenImagePaths[] = $pathKey;
                                                                        $uniqueImageItems[] = $imageItem;
                                                                    }
                                                                    $imageItems = $uniqueImageItems;

                                                                    $getImageUrl = function ($path) {
                                                                        $normalizedPath = str_replace('\\', '/', trim((string) $path));

                                                                        if ($normalizedPath === '') {
                                                                            return '';
                                                                        }

                                                                        if (preg_match('/^https?:\/\//i', $normalizedPath)) {
                                                                            return $normalizedPath;
                                                                        }

                                                                        $normalizedPath = preg_replace('#^/?public/#', '', $normalizedPath);
                                                                        $normalizedPath = preg_replace('#^/?storage/#', '', $normalizedPath);
                                                                        return route('attachment.show', ['path' => ltrim($normalizedPath, '/')]);
                                                                    };

                                                                    $galleryId = 'gallery_' . $img_id;
                                                                    $carouselId = 'carousel_' . $img_id;
                                                                @endphp

                                                                @if (count($imageItems) > 0)
                                                                    <div class="d-flex align-items-center flex-wrap gap-1">
                                                                        @foreach ($imageItems as $imageIndex => $imageItem)
                                                                            @php
                                                                                $imageUrl = $getImageUrl($imageItem['path']);
                                                                                $isPdf = strtolower(pathinfo($imageItem['path'], PATHINFO_EXTENSION)) === 'pdf';
                                                                            @endphp
                                                                            @if ($isPdf)
                                                                                <a href="{{ $imageUrl }}" target="_blank" rel="noopener noreferrer"
                                                                                    class="d-inline-flex align-items-center justify-content-center rounded border bg-danger text-white px-2 py-1 text-xs"
                                                                                    style="height: 30px; text-decoration: none;"
                                                                                    title="Buka PDF">
                                                                                    <i class="fas fa-file-pdf me-1"></i> PDF
                                                                                </a>
                                                                            @else
                                                                                <img src="{{ $imageUrl }}" alt="image"
                                                                                    style="height: 40px; width: 40px; object-fit: cover; cursor: pointer;"
                                                                                    class="rounded border"
                                                                                    data-bs-toggle="modal"
                                                                                    data-bs-target="#{{ $galleryId }}"
                                                                                    onclick="showReportImage('{{ $carouselId }}', {{ $imageIndex }})">
                                                                            @endif
                                                                        @endforeach
                                                                    </div>

                                                                    <div class="modal fade" id="{{ $galleryId }}" tabindex="-1" role="dialog" aria-hidden="true">
                                                                        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                                                                            <div class="modal-content">
                                                                                <div class="modal-header">
                                                                                    <h5 class="modal-title">Preview Lampiran</h5>
                                                                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                                                </div>
                                                                                <div class="modal-body">
                                                                                    <div id="{{ $carouselId }}" class="carousel slide" data-bs-ride="false">
                                                                                        <div class="carousel-inner">
                                                                                            @foreach ($imageItems as $imageIndex => $imageItem)
                                                                                                @php
                                                                                                    $imageUrl = $getImageUrl($imageItem['path']);
                                                                                                    $isPdf = strtolower(pathinfo($imageItem['path'], PATHINFO_EXTENSION)) === 'pdf';
                                                                                                @endphp
                                                                                                <div class="carousel-item {{ $imageIndex === 0 ? 'active' : '' }}">
                                                                                                    <div class="text-center mb-2 text-xs text-secondary">
                                                                                                        {{ $imageItem['date'] !== '' ? 'Tanggal Realisasi: ' . $imageItem['date'] : '' }}
                                                                                                    </div>
                                                                                                    @if ($isPdf)
                                                                                                        <div class="d-flex flex-column align-items-center justify-content-center p-5 bg-light rounded shadow-sm" style="min-height: 250px;">
                                                                                                            <i class="fas fa-file-pdf fa-5x text-danger mb-3"></i>
                                                                                                            <p class="font-weight-bold text-dark mb-2" style="word-break: break-all;">{{ basename($imageItem['path']) }}</p>
                                                                                                            <a href="{{ $imageUrl }}" target="_blank" rel="noopener noreferrer" class="btn btn-danger btn-sm">
                                                                                                                <i class="fas fa-external-link-alt me-1"></i> Buka PDF di Tab Baru
                                                                                                            </a>
                                                                                                        </div>
                                                                                                    @else
                                                                                                        <img src="{{ $imageUrl }}" alt="image {{ $imageIndex + 1 }}"
                                                                                                            class="w-100 border-radius-lg shadow-sm"
                                                                                                            style="max-height: 70vh; object-fit: contain; background-color: #f8f9fa;">
                                                                                                    @endif
                                                                                                </div>
                                                                                            @endforeach
                                                                                        </div>
                                                                                        @if (count($imageItems) > 1)
                                                                                                <button class="carousel-control-prev" type="button" data-bs-target="#{{ $carouselId }}" data-bs-slide="prev"
                                                                                                    style="width: 42px; height: 42px; top: 50%; transform: translateY(-50%); left: 10px; background: rgba(31, 59, 92, 0.9); border-radius: 999px; opacity: 1; border: 2px solid rgba(255,255,255,0.7); box-shadow: 0 2px 8px rgba(0,0,0,0.2);">
                                                                                                    <span class="carousel-control-prev-icon" aria-hidden="true" style="filter: brightness(0) invert(1);"></span>
                                                                                                <span class="visually-hidden">Previous</span>
                                                                                            </button>
                                                                                                <button class="carousel-control-next" type="button" data-bs-target="#{{ $carouselId }}" data-bs-slide="next"
                                                                                                    style="width: 42px; height: 42px; top: 50%; transform: translateY(-50%); right: 10px; background: rgba(31, 59, 92, 0.9); border-radius: 999px; opacity: 1; border: 2px solid rgba(255,255,255,0.7); box-shadow: 0 2px 8px rgba(0,0,0,0.2);">
                                                                                                    <span class="carousel-control-next-icon" aria-hidden="true" style="filter: brightness(0) invert(1);"></span>
                                                                                                <span class="visually-hidden">Next</span>
                                                                                            </button>
                                                                                        @endif
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                @else
                                                                    @php
                                                                        $rpnphdNpId = $detail->HDN_non_periodic_id ?? null;
                                                                        $hasPengerjaan = !empty($detail->HDN_has_pengerjaan) && (int) $detail->HDN_has_pengerjaan === 1;
                                                                    @endphp
                                                                    @if ($dmenu === 'rpnphd' && $rpnphdNpId && $hasPengerjaan)
                                                                        <div class="d-flex flex-column align-items-center gap-1">
                                                                            <span class="badge bg-secondary text-xs">Kosong</span>
                                                                            <button type="button" class="btn btn-warning btn-sm mb-0 px-2"
                                                                                data-bs-toggle="modal" data-bs-target="#updateDocModal"
                                                                                data-np-id="{{ $rpnphdNpId }}"
                                                                                data-redirect-url="{{ url()->current() . '?' . http_build_query(request()->query()) }}"
                                                                                title="Upload dokumentasi yang belum tersimpan">
                                                                                <i class="fas fa-upload me-1"></i>Update Dok
                                                                            </button>
                                                                        </div>
                                                                    @else
                                                                        <span>-</span>
                                                                    @endif
                                                                @endif
                                                            </td>
                                                        @elseif (substr($string, 0, 3) == 'CDT'))
                                                            <td class="text-sm font-weight-normal {{ $detail->$string }}">
                                                                {{ $detail->$string }}
                                                            </td>
                                                            <script>
                                                                var inputDate = new Date('{{ $detail->$string }}');
                                                                var currentDate = new Date();
                                                                var futureDate = new Date(currentDate.setDate(currentDate.getDate() + parseInt('{{ substr($string, 3, 2) }}')));

                                                                if (inputDate <= futureDate) {
                                                                    $('.{{ $detail->$string }}').parents('tr').addClass('exp');
                                                                    $('.{{ $detail->$string }}').parents('tr').css('background-color', '#ffe768');
                                                                }
                                                            </script>
                                                        @elseif (substr($string, 0, 3) == 'CST')
                                                            <td class="text-sm font-weight-normal {{ $detail->$string }}">
                                                                {{ $detail->$string }}
                                                            </td>
                                                            <script>
                                                                if ('{{ $detail->$string }}' == 'FALSE') {
                                                                    $('.FALSE').parents('tr').addClass('stock');
                                                                    $('.FALSE').parents('tr').css('background-color', '#f93c3c');
                                                                    $('.FALSE').parents('tr').css('color', '#000');
                                                                }
                                                            </script>
                                                        @else
                                                            <td class="text-sm font-weight-normal">
                                                                {{ $detail->$string }}</td>
                                                        @endif
                                                        @php
                                                            $i++;
                                                        @endphp
                                                    @endforeach
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    @endif
                                </table>
                            </div>
                        </div>
                        @if ($dmenu === 'rpnphd')
                        {{-- Modal Upload Dokumentasi dari halaman report --}}
                        <div class="modal fade" id="updateDocModal" tabindex="-1" aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered">
                                <div class="modal-content">
                                    <form method="POST" action="{{ route('non-periodic.update-documentation') }}" enctype="multipart/form-data" id="updateDocForm">
                                        @csrf
                                        <div class="modal-header">
                                            <h5 class="modal-title"><i class="fas fa-upload me-2"></i>Upload Dokumentasi Pekerjaan</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                        </div>
                                        <div class="modal-body">
                                            <input type="hidden" name="non_periodic_id" id="updateDocNpId">
                                            <input type="hidden" name="redirect_back_url" id="updateDocRedirectUrl">
                                            <div class="mb-3">
                                                <label class="form-label">File Dokumentasi <span class="text-danger">*</span></label>
                                                <input class="form-control" type="file" name="documentation[]" id="updateDocFiles"
                                                    accept=".jpg,.jpeg,.png,.webp,.jfif,.heic,.heif,.pdf" multiple required>
                                                <small class="text-muted">Format: JPG, PNG, WEBP, HEIC, PDF (maks 5MB/file). Bisa pilih lebih dari 1 file.</small>
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label">Keterangan (opsional)</label>
                                                <textarea class="form-control" name="description" placeholder="Keterangan dokumentasi" rows="3" maxlength="500"></textarea>
                                            </div>
                                            <div class="alert alert-warning mb-0">
                                                <small><i class="fas fa-info-circle me-1"></i>File yang diupload akan <strong>ditambahkan</strong> sebagai dokumentasi pekerjaan ini.</small>
                                            </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" id="updateDocSubmit">
                                                <i class="fas fa-save me-1"></i>Simpan Dokumentasi
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        @push('js')
                        <script>
                            (function() {
                                const updateDocModal = document.getElementById('updateDocModal');
                                if (updateDocModal) {
                                    updateDocModal.addEventListener('show.bs.modal', function(event) {
                                        const btn = event.relatedTarget;
                                        const npId = btn ? btn.getAttribute('data-np-id') : '';
                                        const redirectUrl = btn ? btn.getAttribute('data-redirect-url') : '';
                                        const npIdInput = document.getElementById('updateDocNpId');
                                        const redirectInput = document.getElementById('updateDocRedirectUrl');
                                        const filesInput = document.getElementById('updateDocFiles');
                                        if (npIdInput) npIdInput.value = npId || '';
                                        if (redirectInput) redirectInput.value = redirectUrl || '';
                                        if (filesInput) filesInput.value = '';
                                    });
                                }
                                const updateDocForm = document.getElementById('updateDocForm');
                                if (updateDocForm) {
                                    updateDocForm.addEventListener('submit', function(e) {
                                        const filesInput = document.getElementById('updateDocFiles');
                                        if (!filesInput || !filesInput.files || filesInput.files.length === 0) {
                                            e.preventDefault();
                                            Swal.fire({ icon: 'warning', title: 'File Kosong', text: 'Pilih minimal 1 file untuk diupload.' });
                                            return;
                                        }
                                        const submitBtn = document.getElementById('updateDocSubmit');
                                        if (submitBtn) {
                                            submitBtn.disabled = true;
                                            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Menyimpan...';
                                        }
                                    });
                                }
                            })();
                        </script>
                        @endpush
                        @endif
                        <div class="row px-4 py-2">
                            <div class="col-lg">
                                @if ($table_result)
                                    <div class="nav-wrapper" id="noted"><code>Note : <i aria-hidden="true"
                                                style="color: #ffc2cd;" class="fas fa-circle"></i> Data not active</code>
                                    </div>
                                @else
                                    <div class="nav-wrapper"><code> Data not found!</code></div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- check flag js on dmenu --}}
    @if ($jsmenu == '1')
        @if (view()->exists("js.{$dmenu}"))
            @push('addjs')
                {{-- file js in folder (resources/views/js) --}}
                @include('js.' . $dmenu);
            @endpush
        @else
            @push('addjs')
                <script>
                    Swal.fire({
                        title: 'JS Not Found!!',
                        text: 'Please Create File JS',
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                </script>
            @endpush
        @endif
    @endif
@endsection
@push('js')
    <script>
        let columnAbjad = '';
        const exportPreviewImages = {};
        const reportTitleMenu = @json($title_menu);

        function getFilterInputValue(name, fallbackValue = '') {
            const input = document.querySelector('input[name="' + name + '"]');
            return input ? (input.value || fallbackValue) : fallbackValue;
        }

        function parseFilterDate(dateString) {
            if (!dateString) {
                return null;
            }

            const parts = String(dateString).split('-');
            if (parts.length !== 3) {
                return null;
            }

            const year = parseInt(parts[0], 10);
            const month = parseInt(parts[1], 10);
            const day = parseInt(parts[2], 10);
            if (!year || !month || !day) {
                return null;
            }

            const date = new Date(year, month - 1, day);
            return Number.isNaN(date.getTime()) ? null : date;
        }

        function formatMonthYearIndo(date) {
            const monthNames = [
                'Januari',
                'Februari',
                'Maret',
                'April',
                'Mei',
                'Juni',
                'Juli',
                'Agustus',
                'September',
                'Oktober',
                'November',
                'Desember'
            ];

            return monthNames[date.getMonth()] + ' ' + date.getFullYear();
        }

        function buildExportReportTitle() {
            const fromDate = parseFilterDate(getFilterInputValue('ffrdate', ''));
            const toDate = parseFilterDate(getFilterInputValue('ftodate', ''));
            const lowerTitle = String(reportTitleMenu || '').toLowerCase();
            let reportBaseTitle = 'Laporan Dokumentasi Lapangan';
            if (lowerTitle.includes('periodic') || lowerTitle.includes('pemeliharaan')) {
                reportBaseTitle = 'Laporan Periodic';
            } else if (lowerTitle.includes('daily')) {
                reportBaseTitle = 'Laporan Daily';
            }

            if (!fromDate || !toDate) {
                return reportBaseTitle;
            }

            const sameMonthYear = fromDate.getMonth() === toDate.getMonth() && fromDate.getFullYear() === toDate.getFullYear();
            if (sameMonthYear) {
                return reportBaseTitle + ' ' + formatMonthYearIndo(toDate);
            }

            return reportBaseTitle + ' ' + formatMonthYearIndo(fromDate) + ' - ' + formatMonthYearIndo(toDate);
        }

        function buildDisplayTitle() {
            return 'Trias Spunindo Industri | ' + buildExportReportTitle();
        }

        function escapeHtml(value) {
            return String(value ?? '')
                .replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/"/g, '&quot;')
                .replace(/'/g, '&#039;');
        }

        function buildPrintableTableHtml(dataTable) {
            const visibleColumns = dataTable.columns(':visible').indexes().toArray();
            const headerHtml = visibleColumns.map((colIndex) => {
                const headerText = dataTable.column(colIndex).header().textContent || '';
                return '<th>' + escapeHtml(headerText.trim()) + '</th>';
            }).join('');

            const rowHtml = dataTable.rows({
                search: 'applied',
                order: 'applied'
            }).indexes().toArray().map((rowIndex) => {
                const cellHtml = visibleColumns.map((colIndex) => {
                    const node = dataTable.cell(rowIndex, colIndex).node();
                    const data = dataTable.cell(rowIndex, colIndex).data();
                    const value = exportBodyFormatter(data, node, 'print');
                    return '<td>' + (value || '-') + '</td>';
                }).join('');

                return '<tr>' + cellHtml + '</tr>';
            }).join('');

            return '<table><thead><tr>' + headerHtml + '</tr></thead><tbody>' + rowHtml + '</tbody></table>';
        }

        function printWithoutNewTab(dataTable, reportTitle) {
            const iframe = document.createElement('iframe');
            iframe.style.position = 'fixed';
            iframe.style.right = '0';
            iframe.style.bottom = '0';
            iframe.style.width = '0';
            iframe.style.height = '0';
            iframe.style.border = '0';
            document.body.appendChild(iframe);

            const printDocument = iframe.contentWindow.document;
            const printableTableHtml = buildPrintableTableHtml(dataTable);

            printDocument.open();
            printDocument.write(`
                <html>
                <head>
                    <title></title>
                    <style>
                        html, body { width: 100%; }
                        body { font-family: Arial, sans-serif; margin: 16px; color: #111827; }
                        .print-header { text-align: center; margin-bottom: 12px; }
                        .print-header h2 { margin: 0; font-size: 22px; font-weight: 700; }
                        table { border-collapse: collapse; width: 100%; table-layout: auto; font-size: 12px; }
                        th, td { border: 1px solid #cbd5e1; padding: 6px 6px; vertical-align: top; word-break: break-word; }
                        th { background: #1f3b5c !important; color: #ffffff !important; text-align: center; font-weight: 700; }
                        th:first-child, td:first-child { width: 34px; text-align: center; }
                        th:nth-child(3), td:nth-child(3) { white-space: nowrap; width: 1%; }
                        th:nth-child(5), td:nth-child(5), th:nth-child(6), td:nth-child(6) { white-space: nowrap; width: 1%; }
                        tbody tr:nth-child(even) { background: #f8fafc; }
                        td img { height: 44px; width: 44px; object-fit: cover; margin-right: 3px; border: 1px solid #e5e7eb; border-radius: 3px; }
                        @page { size: landscape; margin: 10mm; }
                        * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
                    </style>
                </head>
                <body>
                    <div class="print-header">
                        <h2>${escapeHtml(reportTitle)}</h2>
                    </div>
                    ${printableTableHtml}
                </body>
                </html>
            `);
            printDocument.close();

            iframe.onload = function() {
                iframe.contentWindow.focus();
                iframe.contentWindow.print();
                setTimeout(() => {
                    if (iframe.parentNode) {
                        iframe.parentNode.removeChild(iframe);
                    }
                }, 1000);
            };
        }

        let preloadPromise = null;

        function preloadAllImages() {
            if (preloadPromise) {
                return preloadPromise;
            }

            preloadPromise = new Promise((resolve) => {
                const table = $('#list_{{ $dmenu }}').DataTable();
                const urls = new Set();

                // 1. Collect all image URLs from all pages/cells of the DataTable
                table.cells().every(function() {
                    const cellData = this.data();
                    if (typeof cellData === 'string' && cellData.includes('<img')) {
                        const tempDiv = document.createElement('div');
                        tempDiv.innerHTML = cellData;
                        const imgs = tempDiv.querySelectorAll('img');
                        imgs.forEach((img) => {
                            const src = img.getAttribute('src') || '';
                            if (src && !src.startsWith('data:')) {
                                urls.add(src);
                            }
                        });
                    }
                });

                const urlList = Array.from(urls);
                if (urlList.length === 0) {
                    resolve();
                    return;
                }

                let loadedCount = 0;

                function checkCompletion() {
                    loadedCount++;
                    if (loadedCount === urlList.length) {
                        resolve();
                    }
                }

                // 2. Load each image and convert to data URL
                urlList.forEach((url) => {
                    if (exportPreviewImages[url]) {
                        checkCompletion();
                        return;
                    }

                    const img = new Image();
                    img.crossOrigin = 'anonymous';
                    img.onload = function() {
                        try {
                            const canvas = document.createElement('canvas');
                            const width = img.naturalWidth || 120;
                            const height = img.naturalHeight || 120;
                            canvas.width = width;
                            canvas.height = height;

                            const ctx = canvas.getContext('2d');
                            if (ctx) {
                                ctx.drawImage(img, 0, 0, width, height);
                                exportPreviewImages[url] = canvas.toDataURL('image/jpeg', 0.72);
                            } else {
                                exportPreviewImages[url] = '';
                            }
                        } catch (error) {
                            console.error('Canvas error for ' + url + ':', error);
                            exportPreviewImages[url] = '';
                        }
                        checkCompletion();
                    };
                    img.onerror = function() {
                        console.warn('Failed to load image for PDF export: ' + url);
                        exportPreviewImages[url] = '';
                        checkCompletion();
                    };
                    img.src = url;
                });
            });

            return preloadPromise;
        }

        function extractAttachments(nodeOrHtml) {
            if (!nodeOrHtml) {
                return [];
            }

            let tempDiv;
            if (typeof nodeOrHtml === 'string') {
                tempDiv = document.createElement('div');
                tempDiv.innerHTML = nodeOrHtml;
            } else {
                tempDiv = nodeOrHtml;
            }

            const attachments = [];
            
            // Extract images (ignoring modal templates)
            const images = Array.from(tempDiv.querySelectorAll('img')).filter((img) => !img.closest('.modal'));
            images.forEach((img) => {
                const src = img.getAttribute('src');
                if (src) {
                    attachments.push({ type: 'image', src: src });
                }
            });

            // Extract PDF links (ignoring modal templates)
            const pdfs = Array.from(tempDiv.querySelectorAll('a')).filter((a) => {
                const href = a.getAttribute('href') || '';
                return !a.closest('.modal') && href.toLowerCase().includes('.pdf');
            });
            pdfs.forEach((a) => {
                const href = a.getAttribute('href');
                if (href) {
                    attachments.push({ type: 'pdf', src: href });
                }
            });

            // De-duplicate by src
            const seen = new Set();
            return attachments.filter(item => {
                if (seen.has(item.src)) {
                    return false;
                }
                seen.add(item.src);
                return true;
            });
        }

        function exportBodyFormatter(data, node, mode) {
            const source = node || data;
            const attachments = extractAttachments(source);
            
            if (attachments.length > 0) {
                if (mode === 'print') {
                    return attachments
                        .map((att) => {
                            if (att.type === 'pdf') {
                                return '<a href="' + att.src + '" target="_blank" style="margin-right:8px;text-decoration:underline;color:#d9534f;font-weight:bold;"><i class="fas fa-file-pdf"></i> PDF</a>';
                            } else {
                                return '<img src="' + att.src + '" style="height:45px;width:45px;object-fit:cover;margin-right:4px;border:1px solid #ddd;border-radius:4px;">';
                            }
                        })
                        .join('');
                }

                if (mode === 'pdf') {
                    return '__ATTACHMENTS__' + attachments.map(att => att.type + '::' + att.src).join('||');
                }

                return attachments.map(att => {
                    if (att.type === 'pdf') {
                        return '[PDF Link] ' + att.src;
                    }
                    return att.src;
                }).join('\n');
            }

            if (node) {
                return node.textContent ? node.textContent.trim() : data;
            } else if (typeof data === 'string') {
                const tempDiv = document.createElement('div');
                tempDiv.innerHTML = data;
                return tempDiv.textContent ? tempDiv.textContent.trim() : data;
            }

            return data !== null && data !== undefined ? String(data).trim() : '';
        }

        $(document).ready(function() {
            preloadAllImages();

            let table = $('#list_{{ $dmenu }}').DataTable();
            let indexStatus = 0;
            let numColumns = $('#list_{{ $dmenu }}').DataTable().columns().count();
            let columnNames = '';
            let filter = '{{ @$table_class->alias }}'.toLowerCase();
            for (let index = 0; index < numColumns; index++) {
                columnNames = $('#list_{{ $dmenu }}').DataTable().columns(index).header()[0].textContent;
                filtercolom = columnNames.toLowerCase();
                if (columnNames == 'Status' || columnNames == 'status' || columnNames == 'STATUS') {
                    columnAbjad = String.fromCharCode(65 + index);
                }
                if (filtercolom == filter) {
                    indexStatus = index;
                }
            }
            //redraw table where filter
            $('#{{ @$table_class->field }}').change(function() {
                table.column(indexStatus).search($(this).val()).draw();
            })
            //check note
            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> Data Expired )</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> Stock < Min Stock )</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> Data Expired ), ( <i aria-hidden="true"
                style="color: #f93c3c;" class="fas fa-circle"></i> Stock < Min Stock )</code>`)
            }
        });
        //set table into datatables
        const exportReportTitle = buildExportReportTitle();
        const displayExportTitle = buildDisplayTitle();
        $('#list_{{ $dmenu }}').DataTable({
            "language": {
                "search": "Cari :",
                "lengthMenu": "Tampilkan _MENU_ baris",
                "zeroRecords": "Maaf - Data tidak ada",
                "info": "Data _START_ - _END_ dari _TOTAL_",
                "infoEmpty": "Tidak ada data",
                "infoFiltered": "(pencarian dari _MAX_ data)"
            },
            responsive: true,
            dom: 'Bfrtip',
            buttons: [{
                    @if ($dmenu == 'rpnphd' || $dmenu == 'rpmelh' || $dmenu == 'rpdhrd')
                    text: '<i class="fas fa-file-excel me-1 text-lg text-success"> </i><span class="font-weight-bold"> Excel',
                    className: 'buttons-excel',
                    action: function() {
                        const params = new URLSearchParams();
                        document.querySelectorAll('input[name^="f"]').forEach((input) => {
                            params.set(input.name, input.value || '');
                        });

                        const exportUrl = '{{ URL::to('/report/' . $dmenu . '/excel-images') }}';

                        Swal.fire({
                            title: 'Memproses Excel',
                            text: 'Sedang memproses foto dokumentasi, mohon tunggu...',
                            allowOutsideClick: false,
                            didOpen: () => {
                                Swal.showLoading();
                            }
                        });

                        fetch(exportUrl + '?' + params.toString())
                            .then(response => {
                                if (!response.ok) {
                                    return response.text().then(text => {
                                        try {
                                            const json = JSON.parse(text);
                                            throw new Error(json.message || 'Gagal mengekspor data Excel.');
                                        } catch (e) {
                                            throw new Error('Terjadi kesalahan pada server saat mengekspor Excel.');
                                        }
                                    });
                                }
                                
                                let filename = 'Report_Excel.xlsx';
                                const disposition = response.headers.get('Content-Disposition');
                                if (disposition && disposition.indexOf('attachment') !== -1) {
                                    const filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
                                    const matches = filenameRegex.exec(disposition);
                                    if (matches != null && matches[1]) { 
                                        filename = matches[1].replace(/['"]/g, '');
                                    }
                                }
                                return response.blob().then(blob => ({ blob, filename }));
                            })
                            .then(({ blob, filename }) => {
                                Swal.close();
                                const url = window.URL.createObjectURL(blob);
                                const a = document.createElement('a');
                                a.href = url;
                                a.download = filename;
                                document.body.appendChild(a);
                                a.click();
                                a.remove();
                                window.URL.revokeObjectURL(url);
                            })
                            .catch(error => {
                                Swal.close();
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Ekspor Gagal',
                                    text: error.message || 'Koneksi ke server terputus.'
                                });
                            });
                    }
                    @else
                    extend: 'excelHtml5',
                    text: '<i class="fas fa-file-excel me-1 text-lg text-success"> </i><span class="font-weight-bold"> Excel',
                    autoFilter: true,
                    filename: function() {
                        return exportReportTitle;
                    },
                    title: exportReportTitle,
                    sheetName: 'Exported data',
                    // title: 'Nama File Excel',
                    customize: function(xlsx) {
                        var sheet = xlsx.xl.worksheets['sheet1.xml'];
                        // Loop over the cells in column
                        sheet.querySelectorAll('row c[r^="' + columnAbjad + '"]').forEach((row) => {
                            // Get the value
                            let cell = row.querySelector('is t');
                            if (cell && cell.textContent === 'Not Active') {
                                row.setAttribute('s', '10'); //red background
                            }
                        });

                        // Convert IMAGE formulas from inline string text to actual Excel formulas.
                        sheet.querySelectorAll('row c').forEach((cellNode) => {
                            let textNode = cellNode.querySelector('is t');
                            if (!textNode) {
                                return;
                            }

                            let rawCellText = (textNode.textContent || '').trim();
                            if (!/^=IMAGE\(".*"\)$/i.test(rawCellText)) {
                                return;
                            }

                            let formulaNode = sheet.createElement('f');
                            formulaNode.textContent = rawCellText.substring(1);

                            let valueNode = sheet.createElement('v');
                            valueNode.textContent = '0';

                            let inlineStringNode = cellNode.querySelector('is');
                            if (inlineStringNode) {
                                inlineStringNode.remove();
                            }

                            cellNode.removeAttribute('t');
                            cellNode.appendChild(formulaNode);
                            cellNode.appendChild(valueNode);
                        });
                    },
                    customizeData: function(data) {
                        const documentationIndex = data.header.findIndex((header) =>
                            String(header).toLowerCase().includes('dokumentasi')
                        );

                        if (documentationIndex === -1) {
                            return;
                        }

                        data.body.forEach((row) => {
                            const rawValue = String(row[documentationIndex] || '');
                            const urls = rawValue.split(/\n+/).map((value) => value.trim()).filter((value) => value !== '');
                            const imageUrl = urls.find((url) => /^https?:\/\//i.test(url));

                            if (!imageUrl) {
                                row[documentationIndex] = '-';
                                return;
                            }

                            // Excel IMAGE supports one image per formula; use the first documentation image.
                            row[documentationIndex] = '=IMAGE("' + imageUrl.replace(/"/g, '""') + '")';
                        });
                    },
                    exportOptions: {
                        columns: ':visible',
                        format: {
                            body: function(data, row, column, node) {
                                return exportBodyFormatter(data, node, 'excel');
                            }
                        }
                    },
                    @endif
                },
                {
                    extend: 'pdfHtml5',
                    text: '<i class="fas fa-file-pdf me-1 text-lg text-danger"> </i><span class="font-weight-bold"> PDF',
                    orientation: 'landscape',
                    pageSize: 'A4',
                    action: function(e, dt, button, config) {
                        Swal.fire({
                            title: 'Memproses PDF',
                            text: 'Sedang memproses foto dokumentasi, mohon tunggu...',
                            allowOutsideClick: false,
                            didOpen: () => {
                                Swal.showLoading();
                            }
                        });

                        preloadAllImages().then(() => {
                            Swal.close();
                            $.fn.dataTable.ext.buttons.pdfHtml5.action.call(this, e, dt, button, config);
                        });
                    },
                    customize: function(doc) {
                        const isPeriodicReport = '{{ $dmenu }}' === 'rpmelh';

                        doc.pageMargins = isPeriodicReport ? [12, 24, 12, 18] : [20, 28, 20, 24];
                        doc.defaultStyle = {
                            fontSize: isPeriodicReport ? 7.5 : 9,
                            color: '#1f2937'
                        };

                        if (doc.content && doc.content[0]) {
                            doc.content[0] = {
                                stack: [{
                                        text: displayExportTitle,
                                        fontSize: isPeriodicReport ? 13 : 15,
                                        bold: true,
                                        alignment: 'center'
                                    },
                                ],
                                margin: [0, 0, 0, 10]
                            };
                        }

                        const tableBlock = doc.content.find((item) => item.table);
                        if (!tableBlock || !tableBlock.table || !tableBlock.table.body) {
                            return;
                        }

                        const body = tableBlock.table.body;
                        const colCount = body[0] ? body[0].length : 0;

                        if (colCount > 0) {
                            body[0] = body[0].map((headerCell) => ({
                                text: typeof headerCell === 'string' ? headerCell : (headerCell && headerCell.text ? headerCell.text : ''),
                                alignment: 'center',
                                bold: true,
                                color: '#ffffff',
                                fillColor: '#1f3b5c',
                                margin: isPeriodicReport ? [0, 4, 0, 4] : [0, 5, 0, 5]
                            }));

                            const widths = Array(colCount).fill('*');
                            widths[0] = 22;

                            const normalizedHeaders = body[0].map((cell) => {
                                const text = typeof cell === 'string' ? cell : (cell && cell.text ? cell.text : '');
                                return String(text).trim().toLowerCase();
                            });

                            const indexTanggalPengajuan = normalizedHeaders.findIndex((h) => h === 'tanggal pengajuan');
                            const indexWaktuPengadaan = normalizedHeaders.findIndex((h) => h === 'waktu pengadaan');
                            const indexWaktuPengerjaan = normalizedHeaders.findIndex((h) => h === 'waktu pengerjaan');
                            const indexArea = normalizedHeaders.findIndex((h) => h === 'area');
                            const indexPekerjaan = normalizedHeaders.findIndex((h) => h === 'pekerjaan');
                            const indexPetugas = normalizedHeaders.findIndex((h) => h === 'petugas');
                            const indexPeriodik = normalizedHeaders.findIndex((h) => h === 'periodik');
                            const indexBulan = normalizedHeaders.findIndex((h) => h === 'bulan');
                            const indexWeek = normalizedHeaders.findIndex((h) => h === 'week');
                            const indexRencana = normalizedHeaders.findIndex((h) => h === 'rencana');
                            const indexRealisasi = normalizedHeaders.findIndex((h) => h === 'realisasi');
                            const indexDokumentasi = normalizedHeaders.findIndex((h) => h === 'dokumentasi');

                            if (indexTanggalPengajuan >= 0) {
                                widths[indexTanggalPengajuan] = 'auto';
                            }

                            if (indexArea >= 0) {
                                widths[indexArea] = 'auto';
                            }

                            if (indexWaktuPengadaan >= 0) {
                                widths[indexWaktuPengadaan] = 'auto';
                            }
                            if (indexWaktuPengerjaan >= 0) {
                                widths[indexWaktuPengerjaan] = 'auto';
                            }

                            if (isPeriodicReport) {
                                if (indexArea >= 0) widths[indexArea] = 55;
                                if (indexPekerjaan >= 0) widths[indexPekerjaan] = 170;
                                if (indexPeriodik >= 0) widths[indexPeriodik] = 70;
                                if (indexBulan >= 0) widths[indexBulan] = 70;
                                if (indexWeek >= 0) widths[indexWeek] = 50;
                                if (indexRencana >= 0) widths[indexRencana] = 60;
                                if (indexRealisasi >= 0) widths[indexRealisasi] = 60;
                                if (indexDokumentasi >= 0) widths[indexDokumentasi] = 95;
                                if (indexPetugas >= 0) widths[indexPetugas] = 64;
                            }

                            // Keep wide-text column flexible while others follow content.
                            if (indexPekerjaan >= 0 && !isPeriodicReport) {
                                widths[indexPekerjaan] = '*';
                            }

                            if (indexDokumentasi >= 0 && !isPeriodicReport) {
                                widths[indexDokumentasi] = 86;
                            }

                            if (indexPetugas >= 0 && !isPeriodicReport) {
                                widths[indexPetugas] = 'auto';
                            }

                            tableBlock.table.widths = widths;
                            if (isPeriodicReport) {
                                tableBlock.alignment = 'center';
                            }
                        }

                        tableBlock.layout = {
                            hLineColor: function() {
                                return '#d1d5db';
                            },
                            vLineColor: function() {
                                return '#d1d5db';
                            },
                            hLineWidth: function() {
                                return 0.6;
                            },
                            vLineWidth: function() {
                                return 0.6;
                            },
                            paddingLeft: function() {
                                return isPeriodicReport ? 3 : 4;
                            },
                            paddingRight: function() {
                                return isPeriodicReport ? 3 : 4;
                            },
                            paddingTop: function() {
                                return isPeriodicReport ? 2 : 3;
                            },
                            paddingBottom: function() {
                                return isPeriodicReport ? 2 : 3;
                            },
                            fillColor: function(rowIndex) {
                                if (rowIndex === 0) {
                                    return null;
                                }
                                return rowIndex % 2 === 0 ? '#f8fafc' : null;
                            }
                        };

                        for (let rowIndex = 1; rowIndex < body.length; rowIndex++) {
                            const row = body[rowIndex];
                            for (let colIndex = 0; colIndex < row.length; colIndex++) {
                                const cell = row[colIndex];
                                const cellText = typeof cell === 'string' ? cell : (cell && cell.text ? cell.text : '');

                                if (!String(cellText).startsWith('__ATTACHMENTS__')) {
                                    continue;
                                }

                                const items = String(cellText)
                                    .replace('__ATTACHMENTS__', '')
                                    .split('||')
                                    .map((value) => value.trim())
                                    .filter((value) => value !== '');

                                const parsedItems = items.map(item => {
                                    const parts = item.split('::');
                                    return {
                                        type: parts[0] || 'image',
                                        src: parts[1] || parts[0] || ''
                                    };
                                }).filter(item => item.src !== '');

                                const nodes = [];
                                parsedItems.forEach(item => {
                                    if (item.type === 'pdf') {
                                        nodes.push({
                                            text: 'PDF Link',
                                            link: item.src,
                                            color: '#d9534f',
                                            decoration: 'underline',
                                            fontSize: 8,
                                            margin: [0, 2, 0, 2]
                                        });
                                    } else {
                                        const dataUrl = exportPreviewImages[item.src];
                                        if (dataUrl) {
                                            nodes.push({
                                                image: dataUrl,
                                                fit: [44, 44],
                                                alignment: 'left',
                                                margin: [0, 0, 0, 0]
                                            });
                                        }
                                    }
                                });

                                if (nodes.length > 0) {
                                    const imageNodes = nodes.filter(n => n.image);
                                    const linkNodes = nodes.filter(n => n.link);
                                    const contentStack = [];

                                    if (imageNodes.length > 0) {
                                        const imageRows = [];
                                        for (let i = 0; i < imageNodes.length; i += 2) {
                                            imageRows.push([
                                                imageNodes[i],
                                                imageNodes[i + 1] || { text: '' }
                                            ]);
                                        }
                                        contentStack.push({
                                            table: {
                                                widths: [43, 43],
                                                body: imageRows
                                            },
                                            layout: 'noBorders',
                                            margin: [0, 0, 0, 0]
                                        });
                                    }

                                    if (linkNodes.length > 0) {
                                        contentStack.push({
                                            stack: linkNodes,
                                            margin: [0, 2, 0, 0]
                                        });
                                    }

                                    row[colIndex] = {
                                        stack: contentStack,
                                        margin: [0, 0, 0, 0]
                                    };
                                } else {
                                    row[colIndex] = '-';
                                }
                            }
                        }
                    },
                    exportOptions: {
                        columns: ':visible',
                        stripHtml: false,
                        format: {
                            body: function(data, row, column, node) {
                                return exportBodyFormatter(data, node, 'pdf');
                            }
                        }
                    },
                },
                {
                    extend: 'print',
                    text: '<i class="fas fa-print me-1 text-lg text-info"> </i><span class="font-weight-bold"> Print',
                    action: function(e, dt) {
                        printWithoutNewTab(dt, exportReportTitle);
                    },
                },
            ]
        });
        //set color button datatables
        $('.dt-button').addClass('btn btn-secondary');
        $('.dt-button').removeClass('dt-button');
        //check authorize button datatables
        <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/tsipu/resources/views/report/auto/result.blade.php</b> on line <b>1250</b><br />
<br />
<b>Warning</b>:  Attempt to read property "excel" on null in <b>/opt/lampp/htdocs/tsipu/resources/views/report/auto/result.blade.php</b> on line <b>1250</b><br />
        <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/tsipu/resources/views/report/auto/result.blade.php</b> on line <b>1251</b><br />
<br />
<b>Warning</b>:  Attempt to read property "pdf" on null in <b>/opt/lampp/htdocs/tsipu/resources/views/report/auto/result.blade.php</b> on line <b>1251</b><br />
        <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/tsipu/resources/views/report/auto/result.blade.php</b> on line <b>1252</b><br />
<br />
<b>Warning</b>:  Attempt to read property "print" on null in <b>/opt/lampp/htdocs/tsipu/resources/views/report/auto/result.blade.php</b> on line <b>1252</b><br />
        //function delete
        function deleteData(name, msg) {
            pesan = confirm('Apakah Anda Yakin ' + msg + ' Data ' + name + ' ini ?');
            if (pesan) return true
            else return false
        }

        function showReportImage(carouselId, index) {
            setTimeout(function() {
                const carouselEl = document.getElementById(carouselId);
                if (!carouselEl || typeof bootstrap === 'undefined' || !bootstrap.Carousel) {
                    return;
                }
                const carousel = bootstrap.Carousel.getOrCreateInstance(carouselEl, {
                    interval: false,
                    ride: false
                });
                carousel.to(index);
            }, 150);
        }
    </script>
@endpush