@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
@php $filter_raw = $filter_raw ?? []; @endphp
{{-- section content --}}
@section('content')
@include('layouts.navbars.auth.topnav', ['title' => ''])
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="row mx-1">
                <div class="card">
                    <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 d-flex justify-content-between align-items-center">
                                <div class="d-flex gap-2">
                                    {{-- 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>
                                    {{-- button toggle filter --}}
                                    <button class="btn btn-info mb-0" type="button" id="filter-toggle-btn"
                                        data-bs-toggle="collapse" data-bs-target="#filter-panel"
                                        aria-expanded="false" aria-controls="filter-panel">
                                        <i class="fas fa-filter me-1"></i><span class="font-weight-bold">Filter</span>
                                    </button>
                                </div>
                                <div style="width: 400px;">
                                    {{-- search input --}}
                                    {{-- <div class="input-group">
                                        <input type="text" id="search-input" class="form-control"
                                            placeholder="Cari sales document, customer PO, buyer..."
                                            value="{{ request('search') }}">
                                        <button class="btn btn-primary mb-0" id="search-btn" type="button">
                                            <i class="fas fa-search"></i> Cari
                                        </button>
                                        @if(request('search'))
                                        <button class="btn btn-danger mb-0" id="clear-search-btn" type="button">
                                            <i class="fas fa-times"></i>
                                        </button>
                                        @endif
                                    </div> --}}
                                </div>
                            </div>
                        </div>
                    </div>
                    {{-- Collapsible Filter Panel --}}
                    <div class="collapse" id="filter-panel">
                        <div class="row px-4 pb-3">
                            <div class="col-12">
                                <div class="card border shadow-sm">
                                    <div class="card-body p-3">
                                        <p class="text-uppercase text-sm font-weight-bold mb-2">
                                            <i class="fas fa-sliders-h me-1"></i> Filter Data
                                        </p>
                                        <hr class="horizontal dark mt-0 mb-3">
                                        <form id="filter-visible-form">
                                            <div class="row">
                                                @foreach ($table_filter as $filter_field)
                                                @if ($filter_field->type != 'hidden')
                                                <div class="col-md-3 mb-2">
                                                    <div class="form-group mb-0">
                                                        <label class="form-control-label text-xs">{{ $filter_field->alias }}</label>
                                                        {{-- char / string --}}
                                                        @if ($filter_field->type == 'char' || $filter_field->type == 'string')
                                                        <input class="form-control form-control-sm {{ $filter_field->class }}" type="text"
                                                            name="{{ $filter_field->field }}"
                                                            maxlength="{{ $filter_field->length }}"
                                                            value="{{ $filter_raw[$filter_field->field] ?? '' }}">
                                                        {{-- email --}}
                                                        @elseif ($filter_field->type == 'email')
                                                        <input class="form-control form-control-sm {{ $filter_field->class }}" type="email"
                                                            name="{{ $filter_field->field }}"
                                                            maxlength="{{ $filter_field->length }}"
                                                            value="{{ $filter_raw[$filter_field->field] ?? '' }}">
                                                        {{-- date --}}
                                                        @elseif ($filter_field->type == 'date')
                                                        <input class="form-control form-control-sm {{ $filter_field->class }}" type="date"
                                                            name="{{ $filter_field->field }}"
                                                            value="{{ $filter_raw[$filter_field->field] ?? '' }}">
                                                        {{-- date2 (range) --}}
                                                        @elseif ($filter_field->type == 'date2')
                                                        <div class="row gx-1">
                                                            <div class="col-6">
                                                                <input class="form-control form-control-sm {{ $filter_field->class }}" type="date"
                                                                    name="fr{{ $filter_field->field }}"
                                                                    placeholder="Dari"
                                                                    value="{{ $filter_raw['fr' . $filter_field->field] ?? '' }}">
                                                            </div>
                                                            <div class="col-6">
                                                                <input class="form-control form-control-sm {{ $filter_field->class }}" type="date"
                                                                    name="to{{ $filter_field->field }}"
                                                                    placeholder="Sampai"
                                                                    value="{{ $filter_raw['to' . $filter_field->field] ?? '' }}">
                                                            </div>
                                                        </div>
                                                        {{-- text (textarea) --}}
                                                        @elseif ($filter_field->type == 'text')
                                                        <textarea class="form-control form-control-sm {{ $filter_field->class }}"
                                                            name="{{ $filter_field->field }}"
                                                            maxlength="{{ $filter_field->length }}"
                                                            rows="2">{{ $filter_raw[$filter_field->field] ?? '' }}</textarea>
                                                        {{-- number --}}
                                                        @elseif ($filter_field->type == 'number')
                                                        <input class="form-control form-control-sm {{ $filter_field->class }}" type="number"
                                                            name="{{ $filter_field->field }}"
                                                            max="{{ $filter_field->length }}"
                                                            value="{{ $filter_raw[$filter_field->field] ?? '' }}">
                                                        {{-- enum (select) --}}
                                                        @elseif ($filter_field->type == 'enum')
                                                        @php $enum_query = $filter_field->query != '' ? DB::select($filter_field->query) : []; @endphp
                                                        <select class="form-select form-select-sm {{ $filter_field->class }}"
                                                            name="{{ $filter_field->field }}">
                                                            <option value="">-- Semua --</option>
                                                            @foreach ($enum_query as $eq)
                                                            @php $eqArr = array_values((array) $eq); @endphp
                                                            <option value="{{ $eqArr[0] }}"
                                                                {{ ($filter_raw[$filter_field->field] ?? '') == $eqArr[0] ? 'selected' : '' }}>
                                                                {{ $eqArr[0] }} - {{ $eqArr[1] }}
                                                            </option>
                                                            @endforeach
                                                        </select>
                                                        {{-- search (text + modal) --}}
                                                        @elseif ($filter_field->type == 'search')
                                                        <div class="input-group input-group-sm">
                                                            <input type="text" name="{{ $filter_field->field }}"
                                                                class="form-control form-control-sm {{ $filter_field->class }}"
                                                                value="{{ $filter_raw[$filter_field->field] ?? ($filter_field->default ?? '') }}">
                                                            <span class="input-group-text bg-primary text-light"
                                                                data-bs-toggle="modal"
                                                                data-bs-target="#resultFilterModal{{ $filter_field->field }}"
                                                                style="cursor: pointer;">
                                                                <i class="fas fa-search"></i>
                                                            </span>
                                                        </div>
                                                        <!-- Modal -->
                                                        <div class="modal fade" id="resultFilterModal{{ $filter_field->field }}" 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">List Data</h5>
                                                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                                    </div>
                                                            <div class="modal-body">
                                                                <div class="mb-3 input-group input-group-sm">
                                                                    <input type="text" class="form-control form-control-sm"
                                                                        id="searchInput_{{ $dmenu }}_{{ $filter_field->field }}"
                                                                        placeholder="Search..."
                                                                        onkeydown="if(event.key === 'Enter') { event.preventDefault(); searchModal{{ $filter_field->field }}(); }">
                                                                    <span class="input-group-text bg-primary text-light" style="cursor: pointer;" onclick="searchModal{{ $filter_field->field }}()">
                                                                        <i class="fas fa-search"></i>
                                                                    </span>
                                                                </div>
                                                                <div class="table-responsive">
                                                                    <table class="table table-sm table-hover" id="resultFilterTable_{{ $filter_field->field }}">
                                                                        <thead class="thead-light" style="background-color: #00b7bd4f;">
                                                                            <tr>
                                                                                <th width="20px">Pilih</th>
                                                                            </tr>
                                                                        </thead>
                                                                        <tbody></tbody>
                                                                    </table>
                                                                </div>
                                                                <div class="d-flex justify-content-between align-items-center mt-3">
                                                                    <span id="paginationInfo_{{ $dmenu }}_{{ $filter_field->field }}"></span>
                                                                    <div id="paginationControls_{{ $dmenu }}_{{ $filter_field->field }}"></div>
                                                                </div>
                                                            </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <script>
                                                            var currentPage_{{ $dmenu }}_{{ $filter_field->field }} = 1;
                                                            var currentSearch_{{ $dmenu }}_{{ $filter_field->field }} = '';

                                                            function loadModalData{{ $filter_field->field }}(page = 1) {
                                                                currentPage_{{ $dmenu }}_{{ $filter_field->field }} = page;
                                                                var table = $('#resultFilterTable_{{ $filter_field->field }}');
                                                                var columns = table.find('thead tr th').length;
                                                                var skeletonRows = '';
                                                                for (var i = 0; i < 5; i++) {
                                                                    skeletonRows += '<tr class="skeleton-row">';
                                                                    for (var j = 0; j < columns; j++) {
                                                                        skeletonRows += '<td><span class="skeleton-loader"></span></td>';
                                                                    }
                                                                    skeletonRows += '</tr>';
                                                                }
                                                                table.find('tbody').html(skeletonRows);
                                                                $.ajax({
                                                                    url: '{{ route('search.modal') }}',
                                                                    method: 'POST',
                                                                    data: {
                                                                        dmenu: '{{ $dmenu }}',
                                                                        field: '{{ $filter_field->field }}',
                                                                        page: page,
                                                                        per_page: 10,
                                                                        search: currentSearch_{{ $dmenu }}_{{ $filter_field->field }},
                                                                        _token: '{{ csrf_token() }}'
                                                                    },
                                                                    success: function(response) {
                                                                        if (!response.success) {
                                                                            console.error(response.message);
                                                                            return;
                                                                        }
                                                                        var columns = response.columns;
                                                                        if (columns.length > 0) {
                                                                            var headerHtml = '<tr><th width="20px">Pilih</th>';
                                                                            columns.forEach(function(col) {
                                                                                headerHtml += '<th>' + col + '</th>';
                                                                            });
                                                                            headerHtml += '</tr>';
                                                                            table.find('thead').html(headerHtml);
                                                                        }
                                                                        var bodyHtml = '';
                                                                        if (response.data.length > 0) {
                                                                            response.data.forEach(function(row) {
                                                                                var keys = Object.keys(row);
                                                                                bodyHtml += '<tr><td><button type="button" class="btn btn-xs btn-primary py-1 px-2" onclick="selectResultFilter_{{ $filter_field->field }}(\'' + row[keys[0]] + '\')">Pilih</button></td>';
                                                                                keys.forEach(function(key) {
                                                                                    bodyHtml += '<td>' + (row[key] !== null ? row[key] : '') + '</td>';
                                                                                });
                                                                                bodyHtml += '</tr>';
                                                                            });
                                                                        } else {
                                                                            bodyHtml = '<tr><td colspan="' + (columns.length + 1) + '" class="text-center">No data found</td></tr>';
                                                                        }
                                                                        table.find('tbody').html(bodyHtml);
                                                                        var paginationHtml = '';
                                                                        if (response.last_page > 1) {
                                                                            paginationHtml += '<nav aria-label="Page navigation"><ul class="pagination pagination-sm mb-0">';
                                                                            paginationHtml += '<li class="page-item ' + (page <= 1 ? 'disabled' : '') + '"><a class="page-link" href="javascript:void(0)" onclick="loadModalData{{ $filter_field->field }}(' + (page - 1) + ')">&lsaquo;</a></li>';
                                                                            for (var p = 1; p <= response.last_page; p++) {
                                                                                if (p === 1 || p === response.last_page || (p >= page - 2 && p <= page + 2)) {
                                                                                    paginationHtml += '<li class="page-item ' + (p === page ? 'active' : '') + '"><a class="page-link" href="javascript:void(0)" onclick="loadModalData{{ $filter_field->field }}(' + p + ')">' + p + '</a></li>';
                                                                                } else if (p === page - 3 || p === page + 3) {
                                                                                    paginationHtml += '<li class="page-item disabled"><span class="page-link">...</span></li>';
                                                                                }
                                                                            }
                                                                            paginationHtml += '<li class="page-item ' + (page >= response.last_page ? 'disabled' : '') + '"><a class="page-link" href="javascript:void(0)" onclick="loadModalData{{ $filter_field->field }}(' + (page + 1) + ')">&rsaquo;</a></li>';
                                                                            paginationHtml += '</ul></nav>';
                                                                        }
                                                                        $('#paginationControls_{{ $dmenu }}_{{ $filter_field->field }}').html(paginationHtml);
                                                                        $('#paginationInfo_{{ $dmenu }}_{{ $filter_field->field }}').html('Total: ' + response.total + ' records');
                                                                    },
                                                                    error: function(xhr) {
                                                                        console.error('AJAX error:', xhr);
                                                                    }
                                                                });
                                                            }

                                                            function searchModal{{ $filter_field->field }}() {
                                                                currentSearch_{{ $dmenu }}_{{ $filter_field->field }} = $('#searchInput_{{ $dmenu }}_{{ $filter_field->field }}').val();
                                                                loadModalData{{ $filter_field->field }}(1);
                                                            }

                                                            $('#resultFilterModal{{ $filter_field->field }}').on('shown.bs.modal', function() {
                                                                loadModalData{{ $filter_field->field }}(1);
                                                            });

                                                            function selectResultFilter_{{ $filter_field->field }}(id) {
                                                                $('input[name="{{ $filter_field->field }}"]').val(id);
                                                                $('#resultFilterModal{{ $filter_field->field }}').modal('hide');
                                                            }
                                                        </script>
                                                        @endif
                                                        @if ($filter_field->note != '')
                                                        <p class='text-secondary text-xs pt-1 px-1'>{{ '*) ' . $filter_field->note }}</p>
                                                        @endif
                                                    </div>
                                                </div>
                                                @endif
                                                @endforeach
                                            </div>
                                            <div class="d-flex gap-2 mt-3">
                                                <button type="button" class="btn btn-primary btn-sm mb-0" onclick="applyFilter()">
                                                    <i class="fas fa-check me-1"></i> Terapkan Filter
                                                </button>
                                                <button type="button" class="btn btn-secondary btn-sm mb-0" onclick="resetFilter()">
                                                    <i class="fas fa-redo me-1"></i> Reset Filter
                                                </button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div id="table-container">
                        @include('report.rptso1.partials.table')
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Hidden form for pagination --}}
<form id="pagination-form" method="POST" action="{{ URL::to($url_menu) }}" style="display: none;">
    @csrf
    @foreach ($filter as $key => $value)
    <input type="hidden" name="{{ $key }}" value="{{ $value }}" />
    @endforeach
    <input type="hidden" name="page" id="page-input" value="{{ $pagination['current_page'] ?? 1 }}" />
    <input type="hidden" name="search" id="search-input-hidden" value="{{ request('search') }}" />
</form>

{{-- 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>
    $(document).ready(function() {
        // Initialize tooltips
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl);
        });

        // Auto-open filter panel: detect if any filter other than defaults is active
        @php
            $hasActiveFilter = false;
            foreach (($filter_raw ?? []) as $k => $v) {
                if ($v !== '' && $v !== null) { $hasActiveFilter = true; break; }
            }
        @endphp
        @if ($hasActiveFilter)
        var filterPanel = new bootstrap.Collapse(document.getElementById('filter-panel'), { toggle: false });
        filterPanel.show();
        @endif

        // Update filter toggle button icon when panel opens/closes
        $('#filter-panel').on('show.bs.collapse', function () {
            $('#filter-toggle-btn').html('<i class="fas fa-filter me-1"></i><span class="font-weight-bold">Filter <i class="fas fa-chevron-up ms-1"></i></span>');
        });
        $('#filter-panel').on('hide.bs.collapse', function () {
            $('#filter-toggle-btn').html('<i class="fas fa-filter me-1"></i><span class="font-weight-bold">Filter</span>');
        });

        // Handle pagination click
        $(document).on('click', '.pagination .page-link', function(e) {
            e.preventDefault();
            
            if ($(this).parent().hasClass('disabled')) {
                return;
            }

            var page = $(this).data('page');
            if (page) {
                loadPage(page);
            }
        });

        // Handle search button click
        $('#search-btn').on('click', function() {
            performSearch();
        });

        // Handle enter key in search input
        $('#search-input').on('keypress', function(e) {
            if (e.which === 13) {
                e.preventDefault();
                performSearch();
            }
        });

        // Handle clear search button
        $('#clear-search-btn').on('click', function() {
            $('#search-input').val('');
            $('#search-input-hidden').val('');
            loadPage(1);
        });
    });

    function performSearch() {
        var searchValue = $('#search-input').val();
        $('#search-input-hidden').val(searchValue);
        
        // Update clear button visibility
        if (searchValue) {
            if ($('#clear-search-btn').length === 0) {
                $('#search-btn').after('<button class="btn btn-danger mb-0" id="clear-search-btn" type="button"><i class="fas fa-times"></i></button>');
                $('#clear-search-btn').on('click', function() {
                    $('#search-input').val('');
                    $('#search-input-hidden').val('');
                    loadPage(1);
                });
            }
        }
        
        loadPage(1);
    }

    function applyFilter() {
        // Collect values from visible filter form
        var filterInputs = {};
        $('#filter-visible-form').serializeArray().forEach(function(item) {
            filterInputs[item.name] = item.value;
        });

        // Update or create hidden inputs in pagination-form
        $.each(filterInputs, function(key, val) {
            var existing = $('#pagination-form input[name="' + key + '"]');
            if (existing.length) {
                existing.val(val);
            } else {
                $('<input>').attr({ type: 'hidden', name: key, value: val })
                    .appendTo('#pagination-form');
            }
        });

        loadPage(1);
    }

    function resetFilter() {
        // Reset all form fields
        $('#filter-visible-form')[0].reset();
        $('#filter-visible-form input[type="date"]').val('');
        $('#filter-visible-form select').val('');
        $('#filter-visible-form input[type="text"]').val('');
        $('#filter-visible-form input[type="number"]').val('');
        $('#filter-visible-form textarea').val('');

        applyFilter();
    }

    function loadPage(page) {
        // Show loading
        $('#table-container').html('<div class="text-center py-5"><i class="fas fa-spinner fa-spin fa-3x text-muted"></i><p class="text-muted mt-3">Loading...</p></div>');

        // Get form data
        var formData = $('#pagination-form').serializeArray();
        
        // Add page number
        var pageExists = false;
        var searchExists = false;
        formData = formData.map(function(item) {
            if (item.name === 'page') {
                pageExists = true;
                item.value = page;
            }
            if (item.name === 'search') {
                searchExists = true;
                item.value = $('#search-input-hidden').val();
            }
            return item;
        });
        
        if (!pageExists) {
            formData.push({name: 'page', value: page});
        }
        if (!searchExists) {
            formData.push({name: 'search', value: $('#search-input-hidden').val()});
        }

        // AJAX request
        $.ajax({
            url: $('#pagination-form').attr('action'),
            method: 'POST',
            data: formData,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                'X-Requested-With': 'XMLHttpRequest'
            },
            success: function(response) {
                if (response.success) {
                    $('#table-container').html(response.html);
                    
                    // Update pagination info
                    if (response.pagination) {
                        $('#pagination-info').text(
                            'Menampilkan ' + response.pagination.from + ' - ' + 
                            response.pagination.to + ' dari ' + 
                            response.pagination.total + ' data'
                        );
                        
                        // Update page input
                        $('#page-input').val(response.pagination.current_page);
                    }
                    
                    // Reinitialize tooltips
                    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
                    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
                        return new bootstrap.Tooltip(tooltipTriggerEl);
                    });

                    // Scroll to top of table
                    $('html, body').animate({
                        scrollTop: $("#table-container").offset().top - 100
                    }, 500);
                }
            },
            error: function(xhr, status, error) {
                console.error('Error:', error);
                $('#table-container').html(
                    '<div class="alert alert-danger text-center">' +
                    '<i class="fas fa-exclamation-triangle fa-2x mb-2"></i>' +
                    '<p>Terjadi kesalahan saat memuat data. Silakan coba lagi.</p>' +
                    '</div>'
                );
            }
        });
    }

    // Keep old function for backward compatibility
    function goToPage(page) {
        loadPage(page);
    }

    // Function for SweetAlert delete confirmation
    function deleteData(event, name, msg) {
        event.preventDefault(); // Prevent default form submission
        Swal.fire({
            title: 'Konfirmasi Hapus Data',
            html: `<div class="text-start">
                    <p class="mb-3">Data: <strong>${name}</strong></p>
                    <p class="text-danger"><i class="fas fa-exclamation-triangle"></i> Data akan dihapus secara <strong>PERMANEN</strong>!</p>
                    <p class="text-muted">Tindakan ini tidak dapat dibatalkan. Apakah Anda yakin?</p>
                </div>`,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: '<i class="fas fa-trash"></i> Ya, Hapus Data',
            cancelButtonText: '<i class="fas fa-times"></i> Tidak',
            confirmButtonColor: '#dc3545',
            cancelButtonColor: '#6c757d'
        }).then((result) => {
            if (result.isConfirmed) {
                let button = event.target.closest('button');
                if (button) {
                    button.closest('form').submit();
                }
            }
        });
    }

    function showNoteDetail(contentId, id) {
        const contentDiv = document.getElementById(contentId);
        if (!contentDiv) return;

        // Parse HTML to separate text and images
        const tempDiv = document.createElement('div');
        tempDiv.innerHTML = contentDiv.innerHTML;

        const images = tempDiv.querySelectorAll('img');
        const imageUrls = Array.from(images).map(img => img.src);
        
        // Clone and strip images for text view
        const textClone = tempDiv.cloneNode(true);
        textClone.querySelectorAll('img').forEach(img => img.remove());
        
        // Clean tags as requested by user ("hilangkan tag nya")
        // We use innerText to get the text without tags
        let cleanText = textClone.innerText || textClone.textContent;
        
        let imageHtml = '';
        if (imageUrls.length > 0) {
            imageHtml = '<div class="row mt-3 bg-light p-2 rounded">';
            imageUrls.forEach((url, index) => {
                imageHtml += `
                    <div class="col-md-12 mb-3 text-center">
                        <div class="position-relative overflow-hidden border rounded shadow-sm bg-white p-2">
                            <img src="${url}" class="img-fluid" style="max-height: 250px; cursor: pointer;" onclick="openFullscreen('${url}')">
                            <div class="mt-2 d-grid gap-2">
                                <button class="btn btn-sm btn-dark mb-0" onclick="openFullscreen('${url}')">
                                    <i class="fas fa-expand me-2"></i> Lihat Full Screen
                                </button>
                            </div>
                        </div>
                    </div>
                `;
            });
            imageHtml += '</div>';
        }

        Swal.fire({
            title: '<strong>Detail Catatan</strong>',
            html: `
                <div class="text-start">
                    <div class="mb-3 p-3 border rounded bg-white">
                        <h6 class="text-uppercase text-body text-xs font-weight-bolder">Catatan</h6>
                        <div class="text-sm font-weight-normal text-dark" style="white-space: pre-wrap;">${cleanText.trim()}</div>
                    </div>
                    ${imageUrls.length > 0 ? `
                        <div class="mb-3">
                            <h6 class="text-uppercase text-body text-xs font-weight-bolder">Lampiran (${imageUrls.length} Gambar)</h6>
                            <p class="text-xs text-muted">Klik tombol di bawah gambar untuk tampilan penuh.</p>
                            ${imageHtml}
                        </div>
                    ` : ''}
                </div>
            `,
            width: '800px',
            showCloseButton: true,
            showConfirmButton: false,
            focusConfirm: false,
            customClass: {
                popup: 'card shadow-lg',
                content: 'p-0'
            }
        });
    }

    // Full Screen Overlay Helper with Zoom & Pan
    window.openFullscreen = function(url) {
        // Create overlay
        const overlay = document.createElement('div');
        overlay.id = 'fs-overlay';
        overlay.style.position = 'fixed';
        overlay.style.top = '0';
        overlay.style.left = '0';
        overlay.style.width = '100vw';
        overlay.style.height = '100vh';
        overlay.style.backgroundColor = 'rgba(0,0,0,0.95)';
        overlay.style.zIndex = '99999';
        overlay.style.overflow = 'hidden';
        overlay.className = 'animate__animated animate__fadeIn';
        
        // Image Container for centering
        const imgContainer = document.createElement('div');
        imgContainer.style.width = '100%';
        imgContainer.style.height = '100%';
        imgContainer.style.display = 'flex';
        imgContainer.style.alignItems = 'center';
        imgContainer.style.justifyContent = 'center';
        
        const img = document.createElement('img');
        img.src = url;
        img.style.maxWidth = '90%';
        img.style.maxHeight = '90%';
        img.style.transformOrigin = 'center center';
        img.style.transition = 'transform 0.1s ease-out';
        img.style.cursor = 'grab';
        img.className = 'animate__animated animate__zoomIn';
        
        // State
        let scale = 1;
        let panning = false;
        let pointX = 0;
        let pointY = 0;
        let startX = 0;
        let startY = 0;

        const updateTransform = () => {
            img.style.transform = `translate(${pointX}px, ${pointY}px) scale(${scale})`;
        };

        // Close button
        const closeBtn = document.createElement('button');
        closeBtn.innerHTML = '<i class="fas fa-times"></i> Tutup';
        closeBtn.className = 'btn btn-light position-absolute top-0 end-0 m-4 shadow';
        closeBtn.style.zIndex = '100000';
        
        // Append elements
        imgContainer.appendChild(img);
        overlay.appendChild(imgContainer);
        overlay.appendChild(closeBtn);
        document.body.appendChild(overlay);

        // Event Listeners
        overlay.addEventListener('wheel', (e) => {
            e.preventDefault();
            const delta = e.deltaY > 0 ? -0.1 : 0.1;
            scale = Math.min(Math.max(0.5, scale + delta), 5);
            updateTransform();
        });

        img.addEventListener('mousedown', (e) => {
            e.preventDefault();
            panning = true;
            startX = e.clientX - pointX;
            startY = e.clientY - pointY;
            img.style.cursor = 'grabbing';
            img.style.transition = 'none';
        });

        window.addEventListener('mousemove', (e) => {
            if (!panning) return;
            e.preventDefault();
            pointX = e.clientX - startX;
            pointY = e.clientY - startY;
            img.style.transform = `translate(${pointX}px, ${pointY}px) scale(${scale})`;
        });

        window.addEventListener('mouseup', () => {
            panning = false;
            img.style.cursor = 'grab';
            img.style.transition = 'transform 0.1s ease-out';
        });

        const closeAction = () => {
             overlay.classList.replace('animate__fadeIn', 'animate__fadeOut');
             img.classList.replace('animate__zoomIn', 'animate__zoomOut');
             setTimeout(() => overlay.remove(), 300);
        };

        closeBtn.onclick = closeAction;
        
        overlay.onclick = (e) => {
            if (e.target === imgContainer || e.target === overlay) {
               closeAction();
            }
        };
    };
</script>
@endpush