@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- 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="row">
                            <div class="card-header col-md-auto">
                                <h5 class="mb-0">List {{ $title_menu }}</h5>
                            </div>
                            <div class="col">
                                {{-- alert --}}
                                @include('components.alert')
                            </div>
                        </div>
                        <hr class="horizontal dark mt-0">
                        <div class="row px-4 py-2">
                            <div class="col-lg">
                                <div class="nav-wrapper">
                                    {{-- check authorize add --}}
                                    @if ($authorize->add == '1')
                                        {{-- button add --}}
                                        <button class="btn btn-primary mb-0"
                                            onclick="window.location='{{ URL::to($url_menu . '/add') }}'"><i
                                                class="fas fa-plus me-1"> </i><span class="font-weight-bold">Tambah</button>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="row px-4 py-2">
                            <div class="table-responsive">
                                <table class="table display" id="list_{{ $dmenu }}">
                                    <thead class="thead-light" style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th>No</th>
                                            <th>Kode Inventaris</th>
                                            <th>Nomor</th>
                                            <th>Aspek Temuan</th>
                                            <th>Keterangan</th>
                                            <th>Pengecek</th>
                                            <th>Tgl Pengecekan</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {{-- retrieve table detail per aspek temuan --}}
                                        @foreach ($table_detail as $detail)
                                            @php
                                                // Build primary key for View/Edit (must match 4 sys_table primary fields: id_mst_inventaris x2, id_pengecek, tgl_pengecekan)
                                                $primary =
                                                    $detail->id_mst_inventaris .
                                                    '|' .
                                                    $detail->id_mst_inventaris .
                                                    '|' .
                                                    $detail->id_pengecek .
                                                    '|' .
                                                    $detail->tgl_pengecekan;
                                                $vcount = $loop->iteration;

                                                // Determine keterangan display
                                                $ket = $detail->keterangan;
                                                if (empty($ket) && $detail->jenis_jawaban === 'kelompok9') {
                                                    $ket = 'Exp Tidak Sesuai';
                                                }
                                            @endphp
                                            <tr
                                                {{ $detail->isactive == '0' ? 'class=not style=background-color:#ffe9ed;' : '' }}>
                                                <td>{{ $vcount }}</td>
                                                <td class="text-sm font-weight-bold text-dark">
                                                    {{ $detail->id_mst_inventaris }}</td>
                                                <td class="text-sm font-weight-bold text-dark">
                                                    {{ $detail->nomor }}</td>
                                                <td class="text-sm font-weight-bold text-dark">{{ $detail->aspek_temuan }}
                                                </td>
                                                <td class="text-sm font-weight-normal">{{ Str::limit($ket, 40) }}</td>
                                                <td class="text-sm font-weight-normal">{{ $detail->id_pengecek }}</td>
                                                <td class="text-sm font-weight-normal">{{ $detail->tgl_pengecekan }}</td>

                                                <td class="text-sm font-weight-normal">
                                                    {{-- button view --}}
                                                    <button type="button" class="btn btn-sm btn-primary mb-0"
                                                        title="View Data"
                                                        onclick="redirectToShow('{{ url($url_menu . '/show' . '/' . encrypt($primary)) }}')">
                                                        <i class="fas fa-eye"> </i><span class="font-weight-bold">
                                                            View</span>
                                                    </button>
                                                    {{-- check authorize Perbaikan --}}
                                                    @if ($authorize->approval == '1')
                                                        @if ($detail->isactive == 1)
                                                            {{-- button Perbaikan - opens modal --}}
                                                            @if ($detail->jenis_jawaban === 'kelompok9' || ($detail->aspek_temuan ?? '') === 'Tanggal Expired')
                                                                <button type="button" class="btn btn-sm btn-success mb-0"
                                                                    title="Perbaikan Data"
                                                                    onclick="openPerbaikanExpModal('{{ $detail->id_trs }}', '{{ $detail->aspek_temuan }}', '{{ addslashes($ket) }}', '{{ $detail->master_exp }}', '{{ $detail->value }}', '{{ addslashes($detail->foto ?? '') }}')">
                                                                    <i class="fas fa-wrench"></i><span
                                                                        class="font-weight-bold">
                                                                        Perbaikan</span>
                                                                </button>
                                                            @else
                                                                <button type="button" class="btn btn-sm btn-success mb-0"
                                                                    title="Perbaikan Data"
                                                                    onclick="openPerbaikanModal('{{ $detail->id_trs }}', '{{ $detail->aspek_temuan }}', '{{ addslashes($ket) }}', '{{ addslashes($detail->foto ?? '') }}')">
                                                                    <i class="fas fa-wrench"></i><span
                                                                        class="font-weight-bold">
                                                                        Perbaikan</span>
                                                                </button>
                                                            @endif
                                                        @endif
                                                    @endif

                                                    {{-- check authorize Edit --}}
                                                    @if ($authorize->edit == '1')
                                                        @if ($detail->isactive == 1)
                                                            @if (session('user')->idroles == 'satpam')
                                                                <button type="button" class="btn btn-sm btn-warning mb-0"
                                                                    title="Edit Data"
                                                                    onclick="openEditAspectModal('{{ $detail->id_trs }}')">
                                                                    <i class="fas fa-edit"></i><span
                                                                        class="font-weight-bold">
                                                                        Edit</span>
                                                                </button>
                                                            @else
                                                                <button type="button" class="btn btn-sm btn-warning mb-0"
                                                                    title="Edit Data"
                                                                    onclick="redirectToEdit('{{ url($url_menu . '/edit' . '/' . encrypt($primary)) }}')">
                                                                    <i class="fas fa-edit"></i><span
                                                                        class="font-weight-bold">
                                                                        Edit</span>
                                                                </button>
                                                            @endif
                                                        @endif
                                                    @endif
                                                    {{-- check authorize delete --}}
                                                    @if ($authorize->delete == '1' && $primary != 'msjit')
                                                        <form
                                                            action="{{ url($url_menu . '/' . encrypt($primary)) }}?page={{ request('page', 1) }}"
                                                            method="POST" style="display: inline">
                                                            @csrf
                                                            @method('DELETE')
                                                            <button type="submit"
                                                                class="btn btn-sm btn-{{ $detail->isactive == '0' ? 'success' : 'danger' }} mb-0"
                                                                title="Hapus Data"
                                                                onclick="return deleteData(event, '{{ $primary }}','{{ $detail->isactive == '0' ? 'Aktifkan' : 'Non Aktifkan' }}')">
                                                                <i class="fas fa-random"></i><span class="font-weight-bold">
                                                                    {{ $detail->isactive == '0' ? 'Aktifkan' : 'Non Aktifkan' }}</span>
                                                            </button>
                                                        </form>
                                                    @endif
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="row px-4 py-2">
                            <div class="col-lg">
                                <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>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ==================== MODAL PERBAIKAN BIASA ==================== --}}
    <div class="modal fade" id="modalPerbaikan" tabindex="-1" aria-labelledby="modalPerbaikanLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-primary">
                    <h5 class="modal-title text-white" id="modalPerbaikanLabel">
                        <i class="fas fa-wrench me-2"></i>Perbaikan Aspek
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="perbaikan_id_trs">
                    <div class="mb-3">
                        <label class="form-label fw-bold">Aspek Temuan:</label>
                        <p id="perbaikan_aspek" class="text-dark fs-6"></p>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">Keterangan:</label>
                        <p id="perbaikan_keterangan" class="text-muted"></p>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold d-block">Bukti Temuan:</label>
                        <div class="text-center">
                            <div id="perbaikan_bukti_img_wrapper"
                                style="
                                    width: 100%;
                                    max-width: 320px;
                                    height: 220px;
                                    margin: 0 auto;
                                    border: 1px solid #ddd;
                                    border-radius: 12px;
                                    overflow: hidden;
                                    background: #f8f9fa;
                                    display: none;
                                    align-items: center;
                                    justify-content: center;
                                    cursor: zoom-in;
                                ">
                                <img src="" id="perbaikan_bukti_img" alt="Bukti temuan"
                                    style="
                                        width: 100%;
                                        height: 100%;
                                        object-fit: cover;
                                        display: block;
                                    ">
                            </div>

                            <a href="#" id="perbaikan_bukti_pdf" target="_blank" rel="noopener noreferrer"
                                class="btn btn-sm btn-outline-primary mt-2" style="display:none;">
                                <i class="fas fa-file-pdf me-1"></i>Lihat Bukti
                            </a>

                            <p id="perbaikan_bukti_empty" class="text-muted mb-0" style="display:none;">
                                Bukti temuan tidak tersedia.
                            </p>
                        </div>
                    </div>
                    <hr>
                    <div class="text-center">
                        <p class="text-sm text-muted mb-3">Apakah aspek ini sudah diperbaiki?</p>
                    </div>
                </div>
                <div class="modal-footer justify-content-center">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="button" class="btn btn-success" onclick="submitPerbaikan('confirm')">
                        <i class="fas fa-check me-1"></i> Sudah Diperbaiki
                    </button>
                </div>
            </div>
        </div>
    </div>

    {{-- ==================== MODAL PERBAIKAN TANGGAL EXPIRED ==================== --}}
    <div class="modal fade" id="modalPerbaikanExp" tabindex="-1" aria-labelledby="modalPerbaikanExpLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-primary">
                    <h5 class="modal-title text-white" id="modalPerbaikanExpLabel">
                        <i class="fas fa-wrench me-2"></i>Perbaikan Tanggal Expired
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="perbaikan_exp_id_trs">
                    <div class="mb-3">
                        <label class="form-label fw-bold">Aspek Temuan:</label>
                        <p id="perbaikan_exp_aspek" class="text-dark fs-6"></p>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">Keterangan:</label>
                        <p id="perbaikan_exp_keterangan" class="text-muted"></p>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold d-block">Bukti Temuan:</label>
                        <div class="text-center">
                            <div id="perbaikan_exp_bukti_img_wrapper"
                                style="
                                    width: 100%;
                                    max-width: 320px;
                                    height: 220px;
                                    margin: 0 auto;
                                    border: 1px solid #ddd;
                                    border-radius: 12px;
                                    overflow: hidden;
                                    background: #f8f9fa;
                                    display: none;
                                    align-items: center;
                                    justify-content: center;
                                    cursor: zoom-in;
                                ">
                                <img src="" id="perbaikan_exp_bukti_img" alt="Bukti temuan"
                                    style="
                                        width: 100%;
                                        height: 100%;
                                        object-fit: cover;
                                        display: block;
                                    ">
                            </div>

                            <a href="#" id="perbaikan_exp_bukti_pdf" target="_blank" rel="noopener noreferrer"
                                class="btn btn-sm btn-outline-primary mt-2" style="display:none;">
                                <i class="fas fa-file-pdf me-1"></i>Lihat Bukti
                            </a>

                            <p id="perbaikan_exp_bukti_empty" class="text-muted mb-0" style="display:none;">
                                Bukti temuan tidak tersedia.
                            </p>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-6">
                            <label class="form-label fw-bold">Exp Master:</label>
                            <p id="perbaikan_exp_master" class="text-info fw-bold"></p>
                        </div>
                        <div class="col-6">
                            <label class="form-label fw-bold">Exp Pengecekan:</label>
                            <p id="perbaikan_exp_value" class="text-danger fw-bold"></p>
                        </div>
                    </div>
                    <hr>
                    {{-- Input exp baru (hidden by default) --}}
                    <div id="input_new_exp_container" style="display: none;">
                        <div class="mb-3">
                            <label class="form-label fw-bold">Tanggal Expired Baru:</label>
                            <input type="date" class="form-control" id="new_exp_date">
                            <small class="text-muted">Masukkan tanggal expired yang benar untuk update di master
                                inventaris</small>
                        </div>
                    </div>
                    <div class="text-center" id="exp_action_info">
                        <p class="text-sm text-muted mb-0">Pilih aksi perbaikan:</p>
                    </div>
                </div>
                <div class="modal-footer justify-content-center">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="button" class="btn btn-success" id="btnExpConfirm"
                        onclick="submitPerbaikanExp('confirm')" title="Exp Master Sudah Sesuai">
                        <i class="fas fa-check me-1"></i> Exp Sudah Sesuai
                    </button>
                    <button type="button" class="btn btn-info" id="btnExpEdit" onclick="showExpEditForm()"
                        title="Exp Master Salah, Input Exp Baru">
                        <i class="fas fa-pen me-1"></i> Update Exp
                    </button>
                    <button type="button" class="btn btn-primary" id="btnExpSave"
                        onclick="submitPerbaikanExp('update_exp')" style="display: none;">
                        <i class="fas fa-save me-1"></i> Simpan Exp Baru
                    </button>
                </div>
            </div>
        </div>
    </div>
    {{-- ==================== ZOOM MODAL PERBAIKAN ==================== --}}
    <div class="modal fade" id="imageZoomModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl">
            <div class="modal-content border-0 shadow-none bg-transparent">
                <div class="modal-body text-center p-0 position-relative">
                    <button type="button" class="btn btn-light rounded-circle position-absolute top-0 end-0 m-3"
                        data-bs-dismiss="modal" style="z-index: 2001; width: 42px; height: 42px; padding: 0;">
                        <i class="fas fa-times"></i>
                    </button>

                    <img id="zoomed_image" src="" alt="Zoomed Preview"
                        style="
                            max-width: 95%;
                            max-height: 90vh;
                            border-radius: 14px;
                            background: #fff;
                            box-shadow: 0 8px 30px rgba(0,0,0,0.35);
                        ">
                </div>
            </div>
        </div>
    </div>

    {{-- ==================== MODAL EDIT ASPEK ==================== --}}
    <div class="modal fade" id="modalEditAspect" tabindex="-1" aria-labelledby="modalEditAspectLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form id="formEditAspect" enctype="multipart/form-data">
                    <div class="modal-header bg-primary">
                        <h5 class="modal-title text-white" id="modalEditAspectLabel">
                            <i class="fas fa-edit me-2"></i>Edit Aspek Pengecekan
                        </h5>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" id="edit_id_trs" name="id_trs">

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-bold">ID Inventaris:</label>
                                <input type="text" class="form-control" id="edit_id_inventaris" readonly>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-bold">Tanggal Pengecekan:</label>
                                <input type="text" class="form-control" id="edit_tgl_pengecekan" readonly>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-bold" id="label_aspek_temuan">Aspek Temuan:</label>
                            <div id="edit_input_container">
                                {{-- Will be filled by JS --}}
                            </div>
                        </div>

                        {{-- Input Bukti & Keterangan --}}
                        <div id="edit_bukti_container" style="display: none;">
                            <div class="mb-3">
                                <label class="form-label fw-bold d-block">Bukti Foto</label>

                                <div class="image-container" style="position: relative; display: inline-block;">
                                    <div id="edit_preview_wrapper"
                                        style="
                                            width: 220px;
                                            height: 160px;
                                            border: 1px solid #ddd;
                                            border-radius: 12px;
                                            overflow: hidden;
                                            background: #f8f9fa;
                                            display: flex;
                                            align-items: center;
                                            justify-content: center;
                                        ">
                                        <img src="" id="edit_foto_preview" alt="image"
                                            style="
                                                width: 100%;
                                                height: 100%;
                                                object-fit: cover;
                                                display: block;
                                                cursor: zoom-in;
                                            ">
                                    </div>

                                    <label for="edit_foto_file" class="btn btn-icon-only bg-gradient-primary"
                                        style="position: absolute; bottom: -15px; left: -10px; z-index: 10;">
                                        <i class="fa fa-pen"></i>
                                    </label>
                                </div>

                                <input class="form-control d-none" type="file" id="edit_foto_file" name="file"
                                    accept="image/png, image/jpeg, image/jpg, application/pdf">

                                <p class="text-primary text-xs pt-3 mb-0">Max Size: <b>10 MB</b></p>
                                <p class="text-primary text-xs pt-1">Format: <b>PNG, JPG, JPEG, PDF</b></p>
                            </div>

                            <div class="mb-3">
                                <label class="form-label fw-bold">Keterangan:</label>
                                <textarea class="form-control" id="edit_keterangan" name="notes" rows="2"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer justify-content-center">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-warning" id="btnSaveEditAspect">
                            <i class="fas fa-save me-1"></i> Simpan Perubahan
                        </button>
                    </div>
                </form>
            </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')
    <style>
        .warna-naktif td {
            background-color: #ffe9ed !important;
        }

        .warna-exp td {
            background-color: #E9967A;
        }

        .warna-remind td {
            background-color: #ffc421;
        }

        .warna-hijau td {
            background-color: #BFEEB7;
        }

        .pdf-btn {
            background-color: #8392ab !important;
            color: white !important;
            font-weight: bold;
            border: none;
            border-radius: 5px !important;
            padding: 8px 15px;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
        }

        .pdf-btn:hover {
            transform: scale(1.05);
        }

        .pdf-btn i {
            font-size: 1.4em;
            margin-right: 10px;
        }

        .print-btn {
            background-color: #8392ab !important;
            color: white !important;
            font-weight: bold;
            border: none;
            border-radius: 5px !important;
            padding: 8px 15px;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
        }

        .print-btn:hover {
            transform: scale(1.05);
        }

        .print-btn i {
            font-size: 1.4em;
            margin-right: 10px;
        }

        .excel-btn {
            background-color: #8392ab !important;
            color: white !important;
            font-weight: bold;
            border: none;
            border-radius: 5px !important;
            padding: 8px 15px;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
        }

        .excel-btn:hover {
            transform: scale(1.05);
        }

        .excel-btn i {
            font-size: 1.4em;
            margin-right: 10px;
        }

        #imageZoomModal {
            z-index: 99999 !important;
        }

        #imageZoomModal .modal-dialog {
            z-index: 100000 !important;
            position: relative;
        }

        .modal-backdrop.zoom-backdrop {
            z-index: 99998 !important;
        }
    </style>
    <script>
        function showZoomImage(src) {
            if (!src || src.trim() === '' || src.includes('noimage.png')) return;

            $('#zoomed_image').attr('src', src);

            const modalEl = document.getElementById('imageZoomModal');
            const zoomModal = bootstrap.Modal.getOrCreateInstance(modalEl);
            zoomModal.show();

            setTimeout(() => {
                $('.modal-backdrop').last().addClass('zoom-backdrop');
            }, 10);
        }

        document.getElementById('imageZoomModal').addEventListener('hidden.bs.modal', function() {
            $('.modal-backdrop').removeClass('zoom-backdrop');
        });
        $(document).ready(function() {
            const zoomModal = document.getElementById('imageZoomModal');
            if (zoomModal) {
                document.body.appendChild(zoomModal);
            }
        });
        $(document).on('click', '#perbaikan_bukti_img_wrapper, #perbaikan_exp_bukti_img_wrapper', function() {
            const src = $(this).find('img').attr('src');
            showZoomImage(src);
        });

        $(document).on('click', '#edit_foto_preview', function() {
            showZoomImage($(this).attr('src'));
        });
        // ======================== REDIRECT FUNCTIONS ========================
        function redirectToEdit(baseUrl) {
            const table = $('#list_{{ $dmenu }}').DataTable();
            const currentPage = table.page() + 1;
            const finalUrl = baseUrl + '?page=' + currentPage;
            window.location.href = finalUrl;
        }

        function redirectToShow(baseUrl) {
            const table = $('#list_{{ $dmenu }}').DataTable();
            const currentPage = table.page() + 1;
            const finalUrl = baseUrl + '?page=' + currentPage;
            window.location.href = finalUrl;
        }

        function renderPerbaikanBukti(prefix, foto) {
            const $wrapper = $('#' + prefix + '_bukti_img_wrapper');
            const $img = $('#' + prefix + '_bukti_img');
            const $pdf = $('#' + prefix + '_bukti_pdf');
            const $empty = $('#' + prefix + '_bukti_empty');

            // reset semua
            $wrapper.hide();
            $img.attr('src', '');
            $pdf.hide().attr('href', '#');
            $empty.hide();

            const cleanFoto = (foto || '').trim();

            if (!cleanFoto || cleanFoto === 'noimage.png') {
                $empty.show();
                return;
            }

            const fileUrl = '{{ url('storage') }}/' + cleanFoto;
            const lowerFoto = cleanFoto.toLowerCase();

            if (lowerFoto.endsWith('.pdf')) {
                $pdf.attr('href', fileUrl).show();
            } else {
                $img.attr('src', fileUrl);
                $wrapper.css('display', 'flex');
            }
        }

        function formatTanggalView(value) {
            if (!value) return '-';
            const text = String(value);
            return text.length >= 10 ? text.substring(0, 10) : text;
        }

        function loadSavedAspectData(idTrs, onDone) {
            $.ajax({
                url: '{{ url('/trspen/get-aspect') }}/' + encodeURIComponent(idTrs),
                method: 'GET',
                success: function(response) {
                    if (response && response.success && response.data) {
                        onDone(response.data);
                    } else {
                        onDone(null);
                    }
                },
                error: function() {
                    onDone(null);
                }
            });
        }

        // ======================== MODAL PERBAIKAN BIASA ========================
        function openPerbaikanModal(idTrs, aspek, keterangan, foto) {
            $('#perbaikan_id_trs').val(idTrs);
            $('#perbaikan_aspek').text(aspek);
            $('#perbaikan_keterangan').text('Memuat data tersimpan...');
            renderPerbaikanBukti('perbaikan', '');
            new bootstrap.Modal(document.getElementById('modalPerbaikan')).show();

            loadSavedAspectData(idTrs, function(saved) {
                const finalKet = (saved && saved.keterangan) ? saved.keterangan : (keterangan || '-');
                const finalFoto = (saved && saved.foto) ? saved.foto : foto;

                $('#perbaikan_keterangan').text(finalKet || '-');
                renderPerbaikanBukti('perbaikan', finalFoto);
            });
        }

        function submitPerbaikan(action) {
            const idTrs = $('#perbaikan_id_trs').val();

            Swal.fire({
                title: 'Konfirmasi Perbaikan',
                text: 'Apakah Anda yakin aspek ini sudah diperbaiki?',
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Ya, Sudah Diperbaiki',
                cancelButtonText: 'Batal',
                confirmButtonColor: '#2dce89'
            }).then((result) => {
                if (result.isConfirmed) {
                    doSubmitPerbaikan(idTrs, action);
                }
            });
        }

        // ======================== MODAL PERBAIKAN EXP ========================
        function openPerbaikanExpModal(idTrs, aspek, keterangan, masterExp, expValue, foto) {
            $('#perbaikan_exp_id_trs').val(idTrs);
            $('#perbaikan_exp_aspek').text(aspek);
            $('#perbaikan_exp_keterangan').text('Memuat data tersimpan...');
            $('#perbaikan_exp_master').text(formatTanggalView(masterExp));
            $('#perbaikan_exp_value').text(formatTanggalView(expValue));
            renderPerbaikanBukti('perbaikan_exp', '');
            // Reset state
            $('#input_new_exp_container').hide();
            $('#btnExpConfirm').show();
            $('#btnExpEdit').show();
            $('#btnExpSave').hide();
            $('#exp_action_info').show();
            $('#new_exp_date').val('');
            new bootstrap.Modal(document.getElementById('modalPerbaikanExp')).show();

            loadSavedAspectData(idTrs, function(saved) {
                const finalKet = (saved && saved.keterangan) ? saved.keterangan : (keterangan || '-');
                const finalFoto = (saved && saved.foto) ? saved.foto : foto;
                const finalMasterExp = (saved && saved.master_exp) ? saved.master_exp : masterExp;
                const finalExpValue = (saved && saved.value) ? saved.value : expValue;

                $('#perbaikan_exp_keterangan').text(finalKet || '-');
                $('#perbaikan_exp_master').text(formatTanggalView(finalMasterExp));
                $('#perbaikan_exp_value').text(formatTanggalView(finalExpValue));
                renderPerbaikanBukti('perbaikan_exp', finalFoto);
            });
        }

        function showExpEditForm() {
            $('#input_new_exp_container').slideDown();
            $('#btnExpConfirm').hide();
            $('#btnExpEdit').hide();
            $('#btnExpSave').show();
            $('#exp_action_info').hide();
        }

        function submitPerbaikanExp(action) {
            const idTrs = $('#perbaikan_exp_id_trs').val();
            let newExp = null;

            if (action === 'update_exp') {
                newExp = $('#new_exp_date').val();
                if (!newExp) {
                    Swal.fire({
                        title: 'Perhatian',
                        text: 'Tanggal expired baru harus diisi!',
                        icon: 'warning',
                        confirmButtonColor: '#028284'
                    });
                    return;
                }
            }

            const confirmText = action === 'confirm' ?
                'Exp master sudah sesuai, tandai sebagai sudah diperbaiki?' :
                'Exp master akan diupdate ke ' + newExp + ', lanjutkan?';

            Swal.fire({
                title: 'Konfirmasi Perbaikan',
                text: confirmText,
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Ya, Lanjutkan',
                cancelButtonText: 'Batal',
                confirmButtonColor: '#2dce89'
            }).then((result) => {
                if (result.isConfirmed) {
                    doSubmitPerbaikan(idTrs, action, newExp);
                }
            });
        }

        // ======================== AJAX SUBMIT ========================
        function doSubmitPerbaikan(idTrs, action, newExp = null) {
            const data = {
                _token: '{{ csrf_token() }}',
                id_trs: idTrs,
                action: action
            };
            if (newExp) {
                data.new_exp = newExp;
            }

            $.ajax({
                url: '{{ route('trspen.perbaikan') }}',
                method: 'POST',
                data: data,
                success: function(response) {
                    // Close any open modals
                    $('.modal').modal('hide');

                    Swal.fire({
                        title: 'Berhasil!',
                        text: response.message || 'Perbaikan berhasil disimpan',
                        icon: 'success',
                        confirmButtonColor: '#028284'
                    }).then(() => {
                        location.reload();
                    });
                },
                error: function(xhr) {
                    const msg = xhr.responseJSON?.message || 'Terjadi kesalahan saat menyimpan perbaikan';
                    Swal.fire({
                        title: 'Gagal!',
                        text: msg,
                        icon: 'error',
                        confirmButtonColor: '#d33'
                    });
                }
            });
        }

        // ======================== MODAL EDIT ASPEK ========================
        function openEditAspectModal(idTrs) {
            Swal.fire({
                title: 'Memuat data...',
                allowOutsideClick: false,
                didOpen: () => {
                    Swal.showLoading()
                }
            });

            $.ajax({
                url: '{{ url('/trspen/get-aspect') }}/' + idTrs,
                method: 'GET',
                success: function(response) {
                    Swal.close();
                    if (response.success) {
                        const data = response.data;
                        const options = (Array.isArray(response.options) ? response.options : []).filter(
                            opt => {
                                if (!opt || opt.value === null || opt.value === undefined) return false;
                                return String(opt.value).trim() !== '';
                            });

                        const normalizedAspek = (data.aspek_temuan || '').toString().trim().toLowerCase();
                        const normalizedDeskripsi = (data.deskripsi || '').toString().trim().toLowerCase();
                        const isTanggalExpired = data.jawaban === 'kelompok9' ||
                            data.jenis_jawaban === 'kelompok9' ||
                            normalizedDeskripsi === 'tanggal expired' ||
                            normalizedAspek === 'tanggal expired';

                        $('#edit_id_trs').val(data.id);
                        $('#edit_id_inventaris').val(data.id_mst_inventaris);
                        $('#edit_tgl_pengecekan').val(data.tgl_pengecekan);
                        $('#label_aspek_temuan').text(isTanggalExpired ? 'Tanggal Expired Baru:' : (data
                            .aspek_temuan || 'Aspek Temuan') + ':');

                        let inputHtml = '';
                        let isBermasalah = false;

                        // Check if Date or Select
                        if (isTanggalExpired) {
                            const valDate = data.value ? data.value.substring(0, 10) : '';
                            const masterExp = data.master_exp ? data.master_exp.substring(0, 10) : '';
                            inputHtml =
                                `<input type="date" class="form-control" id="edit_value" name="value" value="${valDate}" data-master-exp="${masterExp}" required>`;

                            if (valDate !== masterExp) isBermasalah = true;
                        } else {
                            inputHtml =
                                `<select class="form-select dynamic-select" id="edit_value" name="value" required>`;

                            const hasCurrentValue = options.some(opt => String(opt.value) === String(data
                                .value));

                            options.forEach((opt, index) => {
                                const selected = hasCurrentValue ? ((opt.value == data.value) ?
                                    'selected' : '') : (index === 0 ? 'selected' : '');
                                inputHtml +=
                                    `<option value="${opt.value}" ${selected} data-name="${opt.name}">${opt.name}</option>`;
                                if (opt.value == data.value && opt.name.includes('(Bermasalah)')) {
                                    isBermasalah = true;
                                }
                            });
                            inputHtml += `</select>`;
                        }

                        $('#edit_input_container').html(inputHtml);

                        // Setup dependencies
                        setupEditDependencies(data, isBermasalah);

                        new bootstrap.Modal(document.getElementById('modalEditAspect')).show();
                    } else {
                        Swal.fire('Gagal', response.message, 'error');
                    }
                },
                error: function() {
                    Swal.fire('Gagal', 'Terjadi kesalahan jaringan', 'error');
                }
            });
        }

        function setupEditDependencies(data, isInitBermasalah) {
            $('#edit_keterangan').val(data.keterangan || '');

            let fotoPath = '{{ asset('storage/noimage.png') }}';
            if (data.foto && data.foto !== 'noimage.png') {
                fotoPath = '{{ url('storage') }}/' + data.foto;
            }
            $('#edit_foto_preview').attr('src', fotoPath);
            $('#edit_foto_file').val('');

            if (isInitBermasalah) {
                $('#edit_bukti_container').show();
            } else {
                $('#edit_bukti_container').hide();
            }

            // Bind change events
            $('#edit_value').off('change').on('change', function() {
                let showBukti = false;
                if ($(this).is('select')) {
                    const selectedName = $(this).find('option:selected').data('name') || '';
                    if (selectedName.includes('(Bermasalah)')) showBukti = true;
                } else if ($(this).is('input[type="date"]')) {
                    const masterExp = $(this).data('master-exp');
                    if ($(this).val() !== masterExp) showBukti = true;
                }

                if (showBukti) {
                    $('#edit_bukti_container').slideDown();
                } else {
                    $('#edit_bukti_container').slideUp();
                }
            });
        }

        // Handle Image Edit Change
        $('#edit_foto_file').on('change', function() {
            const file = this.files[0];
            if (file) {
                if (file.size > 10 * 1024 * 1024) {
                    Swal.fire("File Terlalu Besar!", "Ukuran maksimal 10MB.", "warning");
                    this.value = "";
                    return;
                }
                const reader = new FileReader();
                reader.onload = function(e) {
                    $('#edit_foto_preview').attr('src', e.target.result);
                };
                reader.readAsDataURL(file);
            }
        });

        // Form Submit
        $('#formEditAspect').on('submit', function(e) {
            e.preventDefault();

            const value = $('#edit_value').val();
            if (value === null || String(value).trim() === '') {
                Swal.fire('Perhatian', 'Nilai aspek wajib diisi.', 'warning');
                return;
            }

            const formData = new FormData(this);
            formData.append('_token', '{{ csrf_token() }}');

            $('#btnSaveEditAspect').prop('disabled', true).html(
                '<i class="fas fa-spinner fa-spin me-1"></i> Menyimpan...');

            $.ajax({
                url: '{{ route('trspen.update.aspect') }}',
                method: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    if (response.success) {
                        $('#modalEditAspect').modal('hide');
                        Swal.fire('Berhasil!', response.message, 'success').then(() => {
                            location.reload();
                        });
                    }
                },
                error: function(xhr) {
                    const msg = xhr.responseJSON?.message || 'Terjadi kesalahan';
                    Swal.fire('Gagal!', msg, 'error');
                    $('#btnSaveEditAspect').prop('disabled', false).html(
                        '<i class="fas fa-save me-1"></i> Simpan Perubahan');
                }
            });
        });

        // ======================== DATATABLE INIT ========================
        let columnAbjad = '';
        let table;
        $(document).ready(function() {
            const tableId = '#list_{{ $dmenu }}';

            let pageFromUrl = new URLSearchParams(window.location.search).get("page");
            let rowsPerPage = 10;
            let displayStart = 0;

            if (pageFromUrl && !isNaN(pageFromUrl)) {
                displayStart = (parseInt(pageFromUrl) - 1) * rowsPerPage;
            }

            if ($.fn.DataTable.isDataTable(tableId)) {
                $(tableId).DataTable().destroy();
            }

            table = $(tableId).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)",
                    paginate: {
                        previous: "<i class='fas fa-chevron-left'></i> Sebelumnya",
                        next: "Selanjutnya <i class='fas fa-chevron-right'></i>"
                    }
                },
                destroy: true,
                displayStart: displayStart,
                pageLength: rowsPerPage,
                responsive: true,
                dom: 'Bfrtip',
                buttons: [{
                        extend: 'excelHtml5',
                        text: '<i class="fas fa-file-excel me-1 text-lg text-success"> </i><span class="font-weight-bold"> Excel',
                        autoFilter: true,
                        sheetName: 'Exported data',
                        exportOptions: {
                            columns: ':visible:not(:last-child)'
                        },
                        className: 'btn btn-sm excel-btn'
                    },
                    {
                        extend: 'pdfHtml5',
                        text: '<i class="fas fa-file-pdf me-2 text-lg text-danger"></i><span class="font-weight-bold"> PDF</span>',
                        exportOptions: {
                            columns: ':visible:not(:last-child)'
                        },
                        className: 'btn btn-sm pdf-btn'
                    },
                    {
                        extend: 'print',
                        text: '<i class="fas fa-print me-1 text-lg text-info"> </i><span class="font-weight-bold"> Print</span>',
                        exportOptions: {
                            columns: ':visible:not(:last-child)'
                        },
                        className: 'btn btn-sm print-btn'
                    },
                ],
            });

            // Update URL browser saat pindah halaman
            table.on('page', function() {
                const pageNumber = table.page() + 1;
                const newUrl = `{{ url($url_menu) }}?page=${pageNumber}`;
                window.history.pushState({
                    page: pageNumber
                }, `Page ${pageNumber}`, newUrl);
            });
        });

        //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/msjpatrol/resources/views/transc/trspen/list.blade.php</b> on line <b>1077</b><br />
<br />
<b>Warning</b>:  Attempt to read property "excel" on null in <b>/opt/lampp/htdocs/msjpatrol/resources/views/transc/trspen/list.blade.php</b> on line <b>1077</b><br />
        <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjpatrol/resources/views/transc/trspen/list.blade.php</b> on line <b>1078</b><br />
<br />
<b>Warning</b>:  Attempt to read property "pdf" on null in <b>/opt/lampp/htdocs/msjpatrol/resources/views/transc/trspen/list.blade.php</b> on line <b>1078</b><br />
        <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjpatrol/resources/views/transc/trspen/list.blade.php</b> on line <b>1079</b><br />
<br />
<b>Warning</b>:  Attempt to read property "print" on null in <b>/opt/lampp/htdocs/msjpatrol/resources/views/transc/trspen/list.blade.php</b> on line <b>1079</b><br />
        //function delete
        function deleteData(event, name, msg) {
            event.preventDefault();
            Swal.fire({
                title: 'Konfirmasi',
                text: `Apakah Anda Yakin ${msg} Data ${name} ini?`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: `Ya, ${msg}`,
                cancelButtonText: 'Batal',
                confirmButtonColor: '#028284'
            }).then((result) => {
                if (result.isConfirmed) {
                    event.target.closest('form').submit();
                }
            });
        }
    </script>
@endpush