@extends('layouts.app')

@section('title')
    Dashboard
@endsection

@section('admin-content')
    <script src="https://cdn.jsdelivr.net/npm/autonumeric@4.6.0/dist/autoNumeric.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>Lihat Expense Up Country</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ route('dashboard.index') }}">Dashboard</a></li>
                    </ol>
                </div>
            </div>
        </div>
    </section>
    
    <section class="content">
        <div class="container-fluid">
            <div class="card card-primary card-outline">
                <div class="card-body">
                    <div>
                        @include('backend.layouts.partials.messages')
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="mb-3">
                                    <label class="form-label">No Expense</label>
                                    <input type="text" class="form-control" name="expense_number" value="{{ $form->expense_number }}" readonly>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Pilih Rayon</label>
                                    <select class="form-control form-control-md" name="rayon_id" disabled>
                                        <option value="">Pilih Rayon</option>
                                        @foreach ($rayons as $rayon)
                                            <option value="{{ $rayon->id }}" {{ $form->rayon_id == $rayon->id ? 'selected' : '' }}>{{ $rayon->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Tanggal Penggunaan</label>
                                    <input type="text" class="form-control" name="tanggal" 
                                           value="{{ $form->tanggal ? \Carbon\Carbon::parse($form->tanggal)->locale('id')->translatedFormat('d F Y') : '-' }}" readonly>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Tujuan</label>
                                    <input type="text" class="form-control" name="tujuan" value="{{ $form->tujuan }}" readonly>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Jarak (km)</label>
                                    <input type="number" class="form-control" name="jarak" value="{{ $form->jarak }}" readonly>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Allowance</label>
                                    <input type="text" class="form-control" name="allowance" id="allowance" value="{{ $form->allowance }}" readonly>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Transport Dalam Kota</label>
                                    <input type="text" class="form-control" name="transport_dalkot" id="transport_dalkot" value="{{ $form->transport_dalkot }}" readonly>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Transport Antar Kota</label>
                                    <input type="text" class="form-control" name="transport_ankot" id="transport_ankot" value="{{ $form->transport_ankot }}" readonly>
                                </div>  
                            </div>

                            <div class="col-lg-6">
                                <div class="mb-3">
                                    <label class="form-label">Hotel</label>
                                    <input type="text" class="form-control" name="hotel" id="hotel" value="{{ $form->hotel }}" readonly>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Total</label>
                                    <input type="text" class="form-control" name="total" id="total" value="{{ $form->total }}" readonly>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Status</label>
                                    <input type="text" class="form-control" name="status" value="{{ $form->status }}" readonly>
                                </div>  
                                <div class="mb-3">
                                    <label class="form-label">UC Plan</label><br>
                                    @if($form->uc_plan)
                                        <a href="{{ $form->uc_plan }}" target="_blank" class="btn btn-sm btn-outline-info px-3"><i class="fas fa-file-alt mr-1"></i> Lihat Dokumen Plan</a>
                                    @else
                                        <span class="text-muted small font-italic">- Tidak ada plan diunggah -</span>
                                    @endif
                                </div>
                            </div>

                            <div class="col-12">
                                <div class="mb-4">
                                    <label class="form-label">Lampiran Bukti Transaksi</label>
                                    <div class="table-responsive">
                                        <table class="table table-bordered align-middle">
                                            <thead class="table-light">
                                                <tr>
                                                    <th style="width: 30%">Kategori</th>
                                                    <th style="width: 40%">Nama File</th>
                                                    <th style="width: 15%" class="text-center">Preview</th>
                                                    <th style="width: 15%" class="text-center">Download</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @forelse ($attachments as $attachment)
                                                    @php
                                                        $categoryValue = $attachment['file_category'] ?? null;
                                                        $categoryLabel = $categoryValue ? ucwords(str_replace('_', ' ', $categoryValue)) : '-';
                                                    @endphp
                                                    <tr>
                                                        <td>{{ $categoryLabel }}</td>
                                                        <td>{{ $attachment['filename'] ?? basename($attachment['file_path']) }}</td>
                                                        <td class="text-center">
                                                            <button type="button"
                                                                    class="btn btn-sm btn-outline-secondary preview-attachment"
                                                                    data-preview-url="{{ $attachment['preview_url'] }}"
                                                                    data-download-url="{{ $attachment['download_url'] }}"
                                                                    data-preview-type="{{ $attachment['preview_type'] }}"
                                                                    data-category="{{ $categoryLabel }}">
                                                                Preview
                                                            </button>
                                                        </td>
                                                        <td class="text-center">
                                                            <a href="{{ $attachment['download_url'] }}"
                                                               target="_blank"
                                                               class="btn btn-sm btn-outline-primary">
                                                                Download
                                                            </a>
                                                        </td>
                                                    </tr>
                                                @empty
                                                    <tr class="text-center text-muted">
                                                        <td colspan="4">Tidak ada lampiran bukti tersedia.</td>
                                                    </tr>
                                                @endforelse
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-12">
                                <a href="{{ route('forms.up-country') }}" class="btn btn-secondary">Kembali</a>
                                @if (auth()->user()->can('approval.approve') && $form->status == 'On Progress')
                                    <button type="button" class="btn btn-success final-approve-modal" data-id="{{ route('forms.up-country.approve', $form->id) }}">Approve 1</button>
                                    <button type="button" class="btn btn-danger open-reject-modal" data-action="{{ route('forms.up-country.reject', $form->id) }}">Reject</button>
                                @elseif(auth()->user()->can('approval2.approve') && $form->status == 'Approved 1')
                                    <button type="button" class="btn btn-success open-approve-modal" data-id="{{ route('forms.up-country.approve2', $form->id) }}">Approve 2</button>
                                    <button type="button" class="btn btn-danger open-reject-modal" data-action="{{ route('forms.up-country.reject', $form->id) }}">Reject</button>
                                @elseif(auth()->user()->can('final_approval.approve') && $form->status == 'Approved 2')
                                    <button type="button" class="btn btn-primary open-approve-modal" data-id="{{ route('forms.up-country.final-approve', $form->id) }}">Final Approve</button>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- MODAL PREVIEW DAN APPROVAL SYSTEM --}}
    <section>
        @include('backend.components.attachment-preview-modal', [
            'modalId' => 'viewAttachmentPreviewModal',
            'title' => 'Attachment Preview',
        ])

        {{-- MODAL APPROVE 2 --}}
        <div class="modal fade" id="approveModal" tabindex="-1" role="dialog" aria-labelledby="approveModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content" style="border-radius: 12px; overflow: hidden;">
                    <form id="approveForm" method="POST" action="">
                        @csrf
                        @method('PUT')
                        <div class="modal-header bg-primary text-white">
                            <h5 class="modal-title fw-bold" id="approveModalLabel"><i class="fas fa-check-heading mr-2"></i>Review & Approve Pengajuan</h5>
                            <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body bg-light">
                            <div id="loadingSpinner" class="d-flex justify-content-center align-items-center" style="height: 250px;">
                                <div class="text-center">
                                    <div class="spinner-border text-primary" role="status"></div>
                                    <p class="text-muted small mt-2">Memuat dokumen detail...</p>
                                </div>
                            </div>

                            <div id="modalContent" class="d-none">
                                <div id="approve1_log_box" class="alert alert-success border-0 mb-3 d-none shadow-sm" style="border-radius: 8px;">
                                    <div class="d-flex align-items-center">
                                        <i class="fas fa-check-circle fa-lg mr-2"></i>
                                        <div>
                                            <span class="d-block fw-bold" style="font-size: 13px;">Telah Disetujui pada Approve 1</span>
                                            <small class="d-block" style="font-size: 11px; opacity: 0.9;">
                                                <strong>Oleh:</strong> <span id="appr1_by"></span> | <strong>Waktu:</strong> <span id="appr1_at"></span> WIB
                                            </small>
                                        </div>
                                    </div>
                                </div>

                                <h6 class="text-muted fw-bold mb-3 small text-uppercase tracking-wider"><i class="fas fa-info-circle mr-1"></i> Detail Informasi Biaya</h6>
                                <ul class="list-group shadow-sm mb-3" style="border-radius: 8px; overflow: hidden;">
                                    <li class="list-group-item d-flex justify-content-between"><strong>Expense Number:</strong> <span id="view_expense_number" class="fw-bold text-primary"></span></li>
                                    <li class="list-group-item d-flex justify-content-between"><strong>User Pengaju:</strong> <span id="view_user" class="fw-bold"></span></li>
                                    <li class="list-group-item d-flex justify-content-between"><strong>Rayon / Cabang:</strong> <span id="view_rayon"></span></li>
                                    <li class="list-group-item d-flex justify-content-between"><strong>Tanggal Penggunaan:</strong> <span id="view_tanggal"></span></li>
                                    <li class="list-group-item d-flex justify-content-between"><strong>Tujuan Lokasi:</strong> <span id="view_tujuan"></span></li>
                                    <li class="list-group-item d-flex justify-content-between"><strong>Jarak Tempuh:</strong> <span id="view_jarak" class="badge badge-secondary p-2"></span></li>
                                </ul>

                                <h6 class="text-muted fw-bold mb-3 small text-uppercase tracking-wider"><i class="fas fa-money-bill-wave mr-1"></i> Rincian Finansial & Bukti Dokumen</h6>
                                <div class="table-responsive shadow-sm bg-white border rounded" style="border-radius: 8px;">
                                    <table class="table table-sm table-hover mb-0">
                                        <thead class="thead-light">
                                            <tr>
                                                <th>Komponen Biaya</th>
                                                <th>Nominal Pengajuan</th>
                                                <th class="text-center">Link File Bukti</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td><strong>Allowance:</strong></td>
                                                <td><span id="allowance_value" class="text-dark"></span></td>
                                                <td class="text-center" id="bukti_allowance"></td>
                                            </tr>
                                            <tr>
                                                <td><strong>Transport Dalam Kota (Dalkot):</strong></td>
                                                <td><span id="transport_dalkot_value" class="text-dark"></span></td>
                                                <td class="text-center" id="bukti_transport_dalkot"></td>
                                            </tr>
                                            <tr>
                                                <td><strong>Transport Antar Kota (Ankot):</strong></td>
                                                <td><span id="transport_ankot_value" class="text-dark"></span></td>
                                                <td class="text-center" id="bukti_transport_ankot"></td>
                                            </tr>
                                            <tr>
                                                <td><strong>Hotel:</strong></td>
                                                <td><span id="hotel_value" class="text-dark"></span></td>
                                                <td class="text-center" id="bukti_hotel"></td>
                                            </tr>
                                            <tr class="bg-light font-weight-bold">
                                                <td><strong>UC Plan Dokumen:</strong></td>
                                                <td>-</td>
                                                <td class="text-center" id="uc_plan"></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer bg-white border-top">
                            <button type="button" class="btn btn-secondary px-4 rounded-pill" data-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-primary px-4 rounded-pill"><i class="fas fa-check mr-1"></i> Konfirmasi Approve</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <section>
        {{-- MODAL CHECKLIST UNTUK FINAL APPROVE --}}
        <div class="modal fade" id="finalApproveModal" tabindex="-1" role="dialog" aria-labelledby="finalApproveModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content" style="border-radius: 12px; overflow: hidden;">
                    <form id="finalApproveForm" method="POST" action="">
                        @csrf
                        @method('PUT')
                        <div class="modal-header bg-dark text-white">
                            <h5 class="modal-title fw-bold" id="finalApproveModalLabel"><i class="fas fa-clipboard-check mr-2"></i>Final Closing Checklist Budget</h5>
                            <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body bg-light">
                            <div id="finalLoadingSpinner" class="d-flex justify-content-center align-items-center" style="height: 200px;">
                                <div class="spinner-border text-primary" role="status"></div>
                            </div>

                            <div id="finalModalContent" class="d-none">
                                <p class="small text-muted mb-3">Tinjau kembali berkas pengaju biaya dinas bawah sebelum melakukan pelepasan dana cabang:</p>
                                <ul class="list-group shadow-sm mb-3">
                                    <li class="list-group-item d-flex justify-content-between"><strong>Expense Number:</strong> <span id="final_expense_number" class="fw-bold text-dark"></span></li>
                                    <li class="list-group-item d-flex justify-content-between"><strong>User Pengaju:</strong> <span id="final_user"></span></li>
                                    <li class="list-group-item d-flex justify-content-between"><strong>Rayon:</strong> <span id="final_rayon"></span></li>
                                    <li class="list-group-item d-flex justify-content-between"><strong>Tanggal Dinas:</strong> <span id="final_tanggal"></span></li>
                                    <li class="list-group-item d-flex justify-content-between"><strong>Tujuan:</strong> <span id="final_tujuan"></span></li>
                                    <li class="list-group-item d-flex justify-content-between"><strong>Jarak Tempuh:</strong> <span id="final_jarak"></span></li>
                                    <li class="list-group-item d-flex justify-content-between"><strong>File Bukti Allowance:</strong> <span id="final_bukti_allowance"></span></li>
                                    <li class="list-group-item d-flex justify-content-between"><strong>File Bukti Transport Dalkot:</strong> <span id="final_bukti_transport_dalkot"></span></li>
                                    <li class="list-group-item d-flex justify-content-between"><strong>File Bukti Transport Ankot:</strong> <span id="final_bukti_transport_ankot"></span></li>
                                    <li class="list-group-item d-flex justify-content-between"><strong>File Bukti Hotel:</strong> <span id="final_bukti_hotel"></span></li>
                                    <li class="list-group-item d-flex justify-content-between"><strong>UC Plan:</strong> <span id="final_uc_plan"></span></li>
                                </ul>
                                
                                <p class="mt-3 fw-bold text-dark small text-uppercase"><i class="fas fa-tasks mr-1"></i> Pilih Item Komponen Yang Di-approve :</p>
                                <ul class="list-group shadow-sm bg-white p-3 border rounded">
                                    <li>
                                        <div class="form-group mb-2">
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input" id="final_allowance" name="allowance">
                                                <label class="custom-control-label" for="final_allowance">Allowance (<span id="final_allowance_value"></span>)</label>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="form-group mb-2">
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input" id="final_transport_dalkot" name="transport_dalkot">
                                                <label class="custom-control-label" for="final_transport_dalkot">Transport Dalkot (<span id="final_transport_dalkot_value"></span>)</label>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="form-group mb-2">
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input" id="final_transport_ankot" name="transport_ankot">
                                                <label class="custom-control-label" for="final_transport_ankot">Transport Ankot (<span id="final_transport_ankot_value"></span>)</label>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="form-group mb-2">
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input" id="final_hotel" name="hotel">
                                                <label class="custom-control-label" for="final_hotel">Hotel (<span id="final_hotel_value"></span>)</label>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="form-group mt-3 mb-0">
                                            <label class="fw-bold text-muted">Total Approved Budget</label>
                                            <input type="text" class="form-control bg-white font-weight-bold text-success" id="total2" name="total" value="0" readonly>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="modal-footer bg-white border-top">
                            <button type="button" class="btn btn-secondary px-4 rounded-pill" data-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-primary px-4 rounded-pill">Approve</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <section>
        <div class="modal fade" id="rejectModal" tabindex="-1" role="dialog" aria-labelledby="rejectModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <form id="rejectForm" method="POST" action="">
                        @csrf
                        @method('PUT')
                        <div class="modal-header">
                            <h5 class="modal-title" id="rejectModalLabel">Reject Expense</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="form-group">
                                <label for="rejectRemarks">Remarks <span class="text-danger">*</span></label>
                                <textarea class="form-control" name="remarks" id="rejectRemarks" rows="3" required></textarea>
                            </div>
                            <p class="mb-0 text-muted small">Pengajuan akan ditolak setelah Anda mengirimkan catatan ini.</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-danger">Reject</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            // Inisialisasi AutoNumeric Readonly Masking
            const configReadonly = {
                digitGroupSeparator: '.',
                decimalCharacter: ',',
                currencySymbol: 'Rp. ',
                decimalPlaces: 0,
                readOnly: true
            };

            new AutoNumeric('#allowance', configReadonly);
            new AutoNumeric('#transport_dalkot', configReadonly);
            new AutoNumeric('#transport_ankot', configReadonly);
            new AutoNumeric('#hotel', configReadonly);
            new AutoNumeric('#total', configReadonly);

            // Logika Klik Preview Attachment Gallery
            $(document).on('click', '.preview-attachment', function () {
                const button = $(this);
                const previewType = button.data('preview-type');
                const previewUrl = button.data('preview-url');
                const downloadUrl = button.data('download-url');
                const category = button.data('category') || 'Attachment';

                if (!previewUrl) {
                    if (downloadUrl) {
                        window.open(downloadUrl, '_blank');
                    }
                    return;
                }
                openAttachmentModal('#viewAttachmentPreviewModal', category, previewType, previewUrl);
            });

            // Logika Pembukaan Modal Reject
            $(document).on('click', '.open-reject-modal', function () {
                const rejectUrl = $(this).data('action');
                $('#rejectForm').attr('action', rejectUrl);
                $('#rejectRemarks').val('');
                $('#rejectModal').modal('show');
            });

            $('#rejectModal').on('shown.bs.modal', function () {
                $('#rejectRemarks').trigger('focus');
            });

            $('#rejectModal').on('hidden.bs.modal', function () {
                $('#rejectForm').attr('action', '');
                $('#rejectRemarks').val('');
            });

            // ==========================================
            // FIX PREVIEW LOADING: MODAL APPROVE 2 (AM / MIS)
            // ==========================================
            $(document).on('click', '.open-approve-modal', function() {
                const approveUrl = $(this).data('id');

                // Hidupkan spinner, sembunyikan kotak data kontent
                $('#loadingSpinner').removeClass('d-none').addClass('d-flex').show();
                $('#modalContent').addClass('d-none');
                $('#approve1_log_box').addClass('d-none'); // Reset log box
                
                $('#approveForm').attr('action', approveUrl); 
                $('#approveModal').modal('show');

                // Mengambil data detail JSON via API route backend
                $.get(approveUrl.replace(/approve2|final-approve/g, 'detail'), function (data) {
                    const formatter = new Intl.NumberFormat('id-ID', {
                        style: 'currency', currency: 'IDR', minimumFractionDigits: 0
                    });

                    // Isi Rincian Finansial Biaya
                    $('#allowance_value').text(formatter.format(data.allowance));
                    $('#transport_dalkot_value').text(formatter.format(data.transport_dalkot));
                    $('#transport_ankot_value').text(formatter.format(data.transport_ankot));
                    $('#hotel_value').text(formatter.format(data.hotel));

                    // Isi Detail Data Atas (SINKRON DENGAN ID HTML BARU)
                    $('#view_user').text(data.user ? data.user.name : '-');
                    $('#view_expense_number').text(data.expense_number);
                    $('#view_rayon').text(data.rayon ? data.rayon.name : '-');
                    
                    if (data.tanggal) {
                        $('#view_tanggal').text(new Date(data.tanggal).toLocaleDateString('id-ID', {
                            year: 'numeric', month: 'long', day: 'numeric'
                        }));
                    } else {
                        $('#view_tanggal').text('-');
                    }
                    
                    $('#view_tujuan').text(data.tujuan ? data.tujuan : '-');
                    $('#view_jarak').text(data.jarak ? data.jarak + ' km' : '0 km');

                    // Suntik Element Link Download Bukti Transaksi Dokumen Fisik
                    $('#bukti_allowance').html(data.bukti_allowance ? '<a href="' + data.bukti_allowance + '" target="_blank" class="btn btn-xs btn-primary"><i class="fas fa-download"></i> Buka File</a>' : '<span class="text-muted">-</span>');
                    $('#bukti_transport_dalkot').html(data.bukti_transport_dalkot ? '<a href="' + data.bukti_transport_dalkot + '" target="_blank" class="btn btn-xs btn-primary"><i class="fas fa-download"></i> Buka File</a>' : '<span class="text-muted">-</span>');
                    $('#bukti_transport_ankot').html(data.bukti_transport_ankot ? '<a href="' + data.bukti_transport_ankot + '" target="_blank" class="btn btn-xs btn-primary"><i class="fas fa-download"></i> Buka File</a>' : '<span class="text-muted">-</span>');
                    $('#bukti_hotel').html(data.bukti_hotel ? '<a href="' + data.bukti_hotel + '" target="_blank" class="btn btn-xs btn-primary"><i class="fas fa-download"></i> Buka File</a>' : '<span class="text-muted">-</span>');
                    $('#uc_plan').html(data.uc_plan ? '<a href="' + data.uc_plan + '" target="_blank" class="btn btn-xs btn-info"><i class="fas fa-file-pdf"></i> Open Plan</a>' : '<span class="text-muted">-</span>');

                    // SUNTIK LOG AUDIT TRAIL DATA APPROVE 1
                    if(data.approved_at && data.status !== 'On Progress') {
                        $('#appr1_by').text(data.approved_by_user ? data.approved_by_user.name : 'Regional Admin');
                        
                        // Format Tanggal Jam Approve 1
                        let dateObj = new Date(data.approved_at);
                        let formattedAppr1Date = dateObj.toLocaleDateString('id-ID', { day: 'numeric', month: 'short', year: 'numeric' }) + ' ' + 
                                                 String(dateObj.getHours()).padStart(2, '0') + ':' + 
                                                 String(dateObj.getMinutes()).padStart(2, '0');
                        
                        $('#appr1_at').text(formattedAppr1Date);
                        $('#approve1_log_box').removeClass('d-none'); // Tampilkan box log hijau
                    }

                    // Hilangkan Loading Spinner, Tampilkan Kotak Konten Review Utama
                    $('#loadingSpinner').hide().removeClass('d-flex').addClass('d-none');
                    $('#modalContent').removeClass('d-none');
                }).fail(function() {
                    Swal.fire('Error', 'Gagal memuat detail data kueri kuesioner biaya dari server.', 'error');
                });
            });

            // Logika Pembukaan Modal Final Approve Checklist Dinamis
            $(document).on('click', '.final-approve-modal', function() {
                const approveUrl = $(this).data('id');

                $('#finalLoadingSpinner').addClass('d-flex').show();
                $('#finalModalContent').addClass('d-none');
                $('#finalApproveForm').attr('action', approveUrl); 
                $('#finalApproveModal').modal('show');

                $.get(approveUrl.replace('approve', 'detail'), function (data) {
                    const formatter = new Intl.NumberFormat('id-ID', {
                        style: 'currency', currency: 'IDR', minimumFractionDigits: 0
                    });

                    $('#final_allowance_value').text(formatter.format(data.allowance));
                    $('#final_transport_dalkot_value').text(formatter.format(data.transport_dalkot));
                    $('#final_transport_ankot_value').text(formatter.format(data.transport_ankot));
                    $('#final_hotel_value').text(formatter.format(data.hotel));

                    $('#final_allowance').data('value', data.allowance);
                    $('#final_transport_dalkot').data('value', data.transport_dalkot);
                    $('#final_transport_ankot').data('value', data.transport_ankot);
                    $('#final_hotel').data('value', data.hotel);

                    $('#final_user').text(data.user ? data.user.name : '-');
                    $('#final_expense_number').text(data.expense_number);
                    $('#final_rayon').text(data.rayon ? data.rayon.name : '-');
                    $('#final_tanggal').text(new Date(data.tanggal).toLocaleDateString('id-ID', {
                        year: 'numeric', month: 'long', day: 'numeric'
                    }));
                    $('#final_tujuan').text(data.tujuan);
                    $('#final_jarak').text(data.jarak + ' km');

                    // Set default ceklis aktif saat pertama kali dibuka
                    $('.custom-control-input').prop('checked', true);

                    $('#finalLoadingSpinner').hide().removeClass('d-flex').addClass('d-none');
                    $('#finalModalContent').removeClass('d-none');
                    
                    // Hitung akumulasi awal
                    calculateShowPageApprovedTotal();
                });
            });

            function calculateShowPageApprovedTotal() {
                let totalApproved = 0;
                $('.custom-control-input:checked').each(function () {
                    totalApproved += parseFloat($(this).data('value') || 0);
                });

                const formatter = new Intl.NumberFormat('id-ID', {
                    style: 'currency', currency: 'IDR', minimumFractionDigits: 0,
                });
                
                // Menampilkan ke field id #total2 milik view detail Anda
                $('#total2').val(formatter.format(totalApproved));
                
                // Suntik input hidden ke form finalApproveForm agar terbaca request backend
                if($('#hidden_view_approved_total').length === 0) {
                    $('#finalApproveForm').append(`<input type="hidden" id="hidden_view_approved_total" name="approved_total" value="${totalApproved}">`);
                } else {
                    $('#hidden_view_approved_total').val(totalApproved);
                }
            }

            // Bind perubahan checklist
            $(document).on('change', '.custom-control-input', function () {
                calculateShowPageApprovedTotal();
            });

            $('#finalApproveModal').on('hidden.bs.modal', function () {
                $('.custom-control-input').prop('checked', false); 
                $('#total2').val('0'); 
                $('#hidden_view_approved_total').remove();
            });
        }); // <--- PENUTUP SEKAT READY FUNCTION JQUERY YANG HILANG SEBELUMNYA

        // Handler Render Gallery Modal Core Engine (Sekarang Terbaca Sempurna Sebagai Fungsi Global)
        function openAttachmentModal(modalSelector, title, type, source) {
            const $modal = $(modalSelector);
            const $image = $modal.find('.attachment-preview-image');
            const $object = $modal.find('.attachment-preview-object');
            const $placeholder = $modal.find('.attachment-preview-placeholder');

            $modal.find('.attachment-preview-modal-title').text(title || 'Attachment');
            $image.addClass('d-none').attr('src', '');
            $object.addClass('d-none').attr('data', '').attr('src', '');
            $placeholder.removeClass('d-none');

            if (type === 'image' && source) {
                $image.attr('src', source).removeClass('d-none');
                $placeholder.addClass('d-none');
            } else if (type === 'pdf' && source) {
                $object.attr('data', source).attr('src', source).removeClass('d-none');
                $placeholder.addClass('d-none');
            }

            if (window.bootstrap && bootstrap.Modal && typeof bootstrap.Modal.getOrCreateInstance === 'function') {
                bootstrap.Modal.getOrCreateInstance($modal[0]).show();
            } else {
                $modal.modal('show');
            }
        }
    </script>
@endsection