@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
@include('layouts.navbars.auth.topnav', ['title' => ''])
@include('components.alert')

<div class="card shadow-lg mx-4">
    <div class="card-body p-3">
        <div class="row gx-4">
            <div class="col-12">
                <div
                    class="nav-wrapper d-flex flex-column flex-md-row justify-content-between align-items-stretch align-items-md-center gap-2">
                    <div class="d-flex flex-wrap gap-2">
                        {{-- button back --}}
                        <button class="btn btn-secondary mb-0 btn-sm" onclick="goBack()">
                            <i class="fas fa-circle-left me-1"></i>
                            <span class="d-none d-sm-inline font-weight-bold">Kembali</span>
                            <span class="d-inline d-sm-none font-weight-bold">Back</span>
                        </button>
                        {{-- button sync ulang --}}
                        @if (isset($is_admin) && $is_admin)
                        <button class="btn btn-info mb-0 btn-sm"
                            onclick="showResyncModal('{{ encrypt($list->{$table_primary->field}) }}', '{{ $list->{$table_primary->field} }}')">
                            <i class="fas fa-sync me-1"></i>
                            <span class="font-weight-bold">Sync Ulang SAP</span>
                        </button>
                        @endif
                        {{-- button send approval --}}
                        @if (isset($is_admin_division) && $is_admin_division && $list->sent_approval != 1)
                        <button class="btn btn-info mb-0 btn-sm"
                            onclick="showSendModal('{{ encrypt($list->{$table_primary->field}) }}', '{{ $list->{$table_primary->field} }}')">
                            <i class="fas fa-paper-plane me-1"></i>
                            <span class="font-weight-bold">Send Approval</span>
                        </button>
                        @endif
                        {{-- button resend approval --}}
                        @if (request()->get('from_report') == '1' && isset($is_admin_division) && $is_admin_division)
                        <button class="btn btn-success mb-0 btn-sm"
                            onclick="showResendApprovalModal('{{ encrypt($list->{$table_primary->field}) }}', '{{ $list->{$table_primary->field} }}')">
                            <i class="fas fa-paper-plane me-1"></i>
                            <span class="font-weight-bold">Resend Approval</span>
                        </button>
                        @endif
                        {{-- check authorize edit --}}
                        @if ($authorize->edit == '1')
                        {{-- check status active --}}
                        @if ($list->isactive == 1)
                        {{-- button save --}}
                        <button class="btn btn-primary mb-0 btn-sm" style="display: none;" id="{{ $dmenu }}-save"
                            onclick="event.preventDefault(); document.getElementById('{{ $dmenu }}-form').submit();">
                            <i class="fas fa-floppy-disk me-1"></i>
                            <span class="font-weight-bold">Simpan</span>
                        </button>
                        {{-- button edit --}}
                        <button class="btn btn-warning mb-0 btn-sm" id="{{ $dmenu }}-edit">
                            <i class="fas fa-edit me-1"></i>
                            <span class="font-weight-bold">Edit</span>
                        </button>
                        @endif
                        @endif
                    </div>
                    <div class="d-flex flex-wrap gap-2">
                        {{-- check authorize approval --}}
                        @if ($authorize->approval == '1' && $list->isactive == 1)
                        @php
                        $showApproval = false;

                        // For SPV/Head
                        if ($is_spv_head && $list->sent_approval == 1 &&
                        $list->temp_status != 'approved' &&
                        $list->temp_status != 'rejected' &&
                        $list->temp_status != 'unreviewed') {
                        $showApproval = true;
                        }

                        // For Manager
                        if (!$is_spv_head && 
                            (($list->temp_status == 'approved' || $list->temp_status == 'unreviewed') || 
                             ($list->temp_status == 'pending' && $list->temp_status_by == $current_user_id)) &&
                            $list->final_status != 'approved' &&
                            $list->final_status != 'rejected') {
                            $showApproval = true;
                        }
                        @endphp

                        @if ($showApproval)
                        {{-- button approve --}}
                        <button class="btn btn-success mb-0 btn-sm"
                            onclick="showApproveModal('{{ encrypt($list->{$table_primary->field}) }}', '{{ $list->{$table_primary->field} }}')">
                            <i class="fas fa-check me-1"></i>
                            <span class="font-weight-bold">Approve</span>
                        </button>
                        {{-- button reject --}}
                        <button class="btn btn-danger mb-0 btn-sm"
                            onclick="showRejectModal('{{ encrypt($list->{$table_primary->field}) }}', '{{ $list->{$table_primary->field} }}')">
                            <i class="fas fa-times me-1"></i>
                            <span class="font-weight-bold">Reject</span>
                        </button>
                        @endif
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container-fluid py-4">
    {{-- Document Preview Tabs --}}
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header pb-0">
                    <div
                        class="d-flex flex-column flex-md-row align-items-start align-items-md-center justify-content-between gap-2">
                        <h6 class="mb-2 mb-md-0">Document Preview</h6>
                        @if(isset($is_pi) && $is_pi)
                        @php
                            $piBankInfo = '';
                            if(isset($ET_HEADER) && count($ET_HEADER) > 0 && !empty($ET_HEADER[0]->account_info_PI)) {
                                $piBankInfo = addslashes($ET_HEADER[0]->account_info_PI);
                            }
                        @endphp
                        @endif
                        <div class="d-flex flex-wrap gap-2">
                            {{-- View Dropdown --}}
                            <div class="dropdown">
                                <button class="btn btn-info btn-sm dropdown-toggle" type="button" id="viewDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                                    <i class="fas fa-eye me-1"></i> View
                                </button>
                                <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="viewDropdown">
                                    @if(!(isset($is_admppc) && $is_admppc))
                                    <li><a class="dropdown-item" href="javascript:void(0)" onclick="viewDocumentInBrowser('sc')"><i class="fas fa-file-contract me-2 text-info"></i>Sales Contract</a></li>
                                    @endif
                                    <li><a class="dropdown-item" href="javascript:void(0)" onclick="viewDocumentInBrowser('io')"><i class="fas fa-file-alt me-2 text-info"></i>Internal Order</a></li>
                                    @if(isset($is_pi) && $is_pi && !(isset($is_admppc) && $is_admppc))
                                    <li><hr class="dropdown-divider"></li>
                                    <li><a class="dropdown-item" href="javascript:void(0)" onclick="viewDocumentInBrowser('pi')"><i class="fas fa-file-invoice me-2 text-info"></i>Proforma Invoice</a></li>
                                    @endif
                                </ul>
                            </div>
                            {{-- Download Dropdown --}}
                            <div class="dropdown">
                                <button class="btn btn-success btn-sm dropdown-toggle" type="button" id="downloadDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                                    <i class="fas fa-download me-1"></i> Download
                                </button>
                                <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="downloadDropdown">
                                    @if(!(isset($is_admppc) && $is_admppc))
                                    <li><a class="dropdown-item" href="javascript:void(0)" onclick="downloadDocumentAsPDF('sc')"><i class="fas fa-file-contract me-2 text-success"></i>Sales Contract</a></li>
                                    @endif
                                    <li><a class="dropdown-item" href="javascript:void(0)" onclick="downloadDocumentAsPDF('io')"><i class="fas fa-file-alt me-2 text-success"></i>Internal Order</a></li>
                                    @if(isset($is_pi) && $is_pi && !(isset($is_admppc) && $is_admppc))
                                    <li><hr class="dropdown-divider"></li>
                                    <li><a class="dropdown-item" href="javascript:void(0)" onclick="downloadDocumentAsPDF('pi')"><i class="fas fa-file-invoice me-2 text-success"></i>Proforma Invoice</a></li>
                                    @endif
                                </ul>
                            </div>
                            {{-- Print Dropdown --}}
                            <div class="dropdown">
                                <button class="btn btn-primary btn-sm dropdown-toggle" type="button" id="printDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                                    <i class="fas fa-print me-1"></i> Print
                                </button>
                                <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="printDropdown">
                                    @if(!(isset($is_admppc) && $is_admppc))
                                    <li><a class="dropdown-item" href="javascript:void(0)" onclick="printDocumentAsPDF('sc')"><i class="fas fa-file-contract me-2 text-primary"></i>Sales Contract</a></li>
                                    @endif
                                    <li><a class="dropdown-item" href="javascript:void(0)" onclick="printDocumentAsPDF('io')"><i class="fas fa-file-alt me-2 text-primary"></i>Internal Order</a></li>
                                    @if(isset($is_pi) && $is_pi && !(isset($is_admppc) && $is_admppc))
                                    <li><hr class="dropdown-divider"></li>
                                    <li><a class="dropdown-item" href="javascript:void(0)" onclick="printDocumentAsPDF('pi')"><i class="fas fa-file-invoice me-2 text-primary"></i>Proforma Invoice</a></li>
                                    @endif
                                </ul>
                            </div>
                            {{-- Edit PI Info Button --}}
                            @if(isset($is_pi) && $is_pi && !(isset($is_admppc) && $is_admppc))
                            <button class="btn btn-warning btn-sm" onclick="showBankInfoModal('{{ encrypt($list->id) }}', '{{ $piBankInfo }}')">
                                <i class="fas fa-edit me-1"></i>
                                <span class="d-none d-sm-inline">Edit PI Info</span>
                                <span class="d-inline d-sm-none">Edit Bank</span>
                            </button>
                            @endif
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <ul class="nav nav-tabs" id="docTabs" role="tablist">
                        @if(isset($is_admppc) && $is_admppc)
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="io-tab" data-target="#io" type="button" role="tab">
                                    Internal Order
                                </button>
                            </li>
                        @else
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="sc-tab" data-target="#sc" type="button" role="tab">
                                    Sales Contract
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="io-tab" data-target="#io" type="button" role="tab">
                                    Internal Order
                                </button>
                            </li>
                            @if(isset($is_pi) && $is_pi)
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="pi-tab" data-target="#pi" type="button" role="tab">
                                    Proforma Invoice
                                </button>
                            </li>
                            @endif
                        @endif
                    </ul>
                    <div class="tab-content" id="docTabsContent">
                        @if(isset($is_admppc) && $is_admppc)
                            <div class="tab-pane show active" id="io" role="tabpanel">
                                {{-- Zoom Controls --}}
                                {{-- Fullscreen Control --}}
                                <div class="d-flex gap-2 flex-wrap mb-2 p-2 bg-light border-bottom">
                                    <button class="btn btn-sm btn-primary" onclick="openDocumentFullscreen('io')">
                                        <i class="fas fa-expand me-1"></i> Fullscreen View
                                    </button>
                                </div>
                                <div class="document-container" id="io-container" style="overflow: auto; max-height: 600px; background-color: #f0f0f0; position: relative;">
                                    <div id="io-content" class="document-preview" style="padding: 20px;">
                                        @php
                                            // get use_different_template from backend
                                            $useElseTemplate = isset($use_different_template) ? $use_different_template : false;
                                        @endphp
                                        @php
                                        $viewName = $useElseTemplate ? 'pages.documents.internal_order_else' : 'pages.documents.internal_order';
                                        $content = view($viewName, get_defined_vars())->render();
                                        $content = preg_replace('/<!DOCTYPE html>|<html.*?>|<\/html>|<head.*?>|<\/head>|<body.*?>|<\/body>/is', '', $content);
                                        @endphp
                                        {!! $content !!}
                                    </div>
                                </div>
                            </div>
                        @else
                            <div class="tab-pane show active" id="sc" role="tabpanel">
                            {{-- Zoom Controls --}}
                            {{-- Fullscreen Control --}}
                            <div class="d-flex gap-2 flex-wrap mb-2 p-2 bg-light border-bottom">
                                <button class="btn btn-sm btn-primary" onclick="openDocumentFullscreen('sc')">
                                    <i class="fas fa-expand me-1"></i> Fullscreen View
                                </button>
                            </div>
                            <div class="document-container" id="sc-container"
                                style="overflow: auto; max-height: 600px; background-color: #f0f0f0; position: relative;">
                                <div id="sc-content" class="document-preview"
                                    style="padding: 20px;">
                                    @php
                                        // get use_different_template from backend
                                        $useElseTemplate = isset($use_different_template) ? $use_different_template : false;
                                    @endphp
                                    @php
                                    $viewName = $useElseTemplate ? 'pages.documents.sales_contract_else' : 'pages.documents.sales_contract';
                                    $content = view($viewName, get_defined_vars())->render();
                                    $content = preg_replace('/<!DOCTYPE html>|<html.*?>|<\/html>|<head.*?>|<\/head>|<body.*?>|<\/body>/is', '', $content);
                                    @endphp
                                    {!! $content !!}
                                </div>
                            </div>
                        </div>
                        @if(!(isset($is_admppc) && $is_admppc))
                        <div class="tab-pane" id="io" role="tabpanel" style="display: none;">
                            {{-- Zoom Controls --}}
                            {{-- Fullscreen Control --}}
                            <div class="d-flex gap-2 flex-wrap mb-2 p-2 bg-light border-bottom">
                                <button class="btn btn-sm btn-primary" onclick="openDocumentFullscreen('io')">
                                    <i class="fas fa-expand me-1"></i> Fullscreen View
                                </button>
                            </div>
                            <div class="document-container" id="io-container"
                                style="overflow: auto; max-height: 600px; background-color: #f0f0f0; position: relative;">
                                <div id="io-content" class="document-preview"
                                    style="padding: 20px;">
                                    @php
                                        // get use_different_template from backend
                                        $useElseTemplate = isset($use_different_template) ? $use_different_template : false;
                                    @endphp
                                    @php
                                    $viewName = $useElseTemplate ? 'pages.documents.internal_order_else' : 'pages.documents.internal_order';
                                    $content = view($viewName, get_defined_vars())->render();
                                    $content = preg_replace('/<!DOCTYPE html>|<html.*?>|<\/html>|<head.*?>|<\/head>|<body.*?>|<\/body>/is', '', $content);
                                    @endphp
                                    {!! $content !!}
                                </div>
                            </div>
                        </div>
                        @if(isset($is_pi) && $is_pi)
                        <div class="tab-pane" id="pi" role="tabpanel" style="display: none;">
                            {{-- Zoom Controls --}}
                            {{-- Fullscreen Control --}}
                            <div class="d-flex gap-2 flex-wrap mb-2 p-2 bg-light border-bottom">
                                <button class="btn btn-sm btn-primary" onclick="openDocumentFullscreen('pi')">
                                    <i class="fas fa-expand me-1"></i> Fullscreen View
                                </button>
                            </div>
                            <div class="document-container" id="pi-container"
                                style="overflow: auto; max-height: 600px; background-color: #f0f0f0; position: relative;">
                                <div id="pi-content" class="document-preview"
                                    style="padding: 20px;">
                                    @php
                                        // get use_different_template from backend
                                        $useElseTemplate = isset($use_different_template) ? $use_different_template : false;
                                    @endphp
                                    @php
                                    $viewName = $useElseTemplate ? 'pages.documents.proforma_invoice_else' : 'pages.documents.proforma_invoice';
                                    $content = view($viewName, get_defined_vars())->render();
                                    $content = preg_replace('/<!DOCTYPE html>|<html.*?>|<\/html>|<head.*?>|<\/head>|<body.*?>|<\/body>/is', '', $content);
                                    @endphp
                                    {!! $content !!}
                                </div>
                            </div>
                        </div>
                        @endif
                        @endif
                    </div>
                    <script>
                        document.addEventListener('DOMContentLoaded', function() {
                            // Define known tab IDs explicitly to avoid selector ambiguity
                            const tabIds = ['sc', 'io', 'pi'];

                            function activateTab(targetId) {
                                // Strip '#' if present
                                const cleanTargetId = targetId.replace('#', '');

                                tabIds.forEach(id => {
                                    const el = document.getElementById(id);
                                    if (el) {
                                        if (id === cleanTargetId) {
                                            // Show this one
                                            el.style.setProperty('display', 'block', 'important');
                                            el.classList.add('active', 'show');
                                            el.classList.remove('d-none');
                                        } else {
                                            // Hide others
                                            el.style.setProperty('display', 'none', 'important');
                                            el.classList.remove('active', 'show');
                                            el.classList.add('d-none');
                                        }
                                    }
                                });
                            }

                            // Bind events
                            const tabButtons = document.querySelectorAll('#docTabs button[role="tab"]');
                            tabButtons.forEach(btn => {
                                btn.addEventListener('click', function(e) {
                                    e.preventDefault();
                                    
                                    // Button Active State
                                    tabButtons.forEach(b => b.classList.remove('active'));
                                    this.classList.add('active');

                                    // Content Visibility
                                    const targetSelector = this.getAttribute('data-target'); // e.g., #sc
                                    activateTab(targetSelector);
                                });
                            });

                            // Initial State
                            const activeLink = document.querySelector('#docTabs .nav-link.active');
                            if (activeLink) {
                                activateTab(activeLink.getAttribute('data-target'));
                            } else {
                                // Fallback
                                activateTab('sc');
                            }
                        });
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>

@if(!(isset($is_admppc) && $is_admppc))
{{-- Attachment Preview Section --}}
<div class="container-fluid py-4">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header pb-0">
                    <div
                        class="d-flex flex-column flex-md-row align-items-start align-items-md-center justify-content-between gap-2">
                        <h6 class="mb-2 mb-md-0">
                            <i class="fas fa-paperclip me-2"></i>Dokumen PO (Purchase Order)
                            @if(isset($attachments) && $attachments->count() > 0)
                                <span class="badge bg-info ms-2">{{ $attachments->count() }} file</span>
                            @endif
                        </h6>
                        <div class="d-flex gap-2">
                            @php
                                $currentUser = \App\Models\User::where('username', session('username'))->first();
                                $userRoles = explode(',', $currentUser->idroles);
                                $canUpdate = !empty(array_intersect(['admind', 'admhm1'], $userRoles));
                                $hasAttachment = isset($attachments) && $attachments->count() > 0;
                            @endphp
                            
                            @if($canUpdate)
                            <button class="btn btn-warning btn-sm" 
                                onclick="showUpdateAttachmentModal('{{ encrypt($list->id) }}', '{{ $hasAttachment ? 'Existing files' : '' }}', {{ $hasAttachment ? 'true' : 'false' }})">
                                <i class="fas {{ $hasAttachment ? 'fa-plus' : 'fa-upload' }} me-1"></i> 
                                {{ $hasAttachment ? 'Tambah Dokumen' : 'Upload Dokumen' }}
                            </button>
                            @endif
                        </div>
                    </div>
                </div>
                <div class="card-body">
                @if($hasAttachment)
                    @php
                        $attachmentsForJs = $attachments->map(function($att) {
                            return [
                                'id' => $att->id ?? 0,
                                'path' => asset('storage/' . $att->file_path),
                                'name' => $att->original_name,
                                'extension' => strtolower(pathinfo($att->file_path, PATHINFO_EXTENSION))
                            ];
                        })->values();
                    @endphp

                    {{-- All Documents Stacked Vertically --}}
                    <div class="po-documents-container">
                        @foreach($attachments as $index => $attachment)
                            @php
                                $extension = strtolower(pathinfo($attachment->file_path, PATHINFO_EXTENSION));
                                $isImage = in_array($extension, ['jpg', 'jpeg', 'png', 'gif', 'webp']);
                                $isPdf = $extension === 'pdf';
                                $attPath = asset('storage/' . $attachment->file_path);
                            @endphp
                            
                            <div class="po-document-item mb-3 border rounded shadow-sm" data-index="{{ $index }}">
                                {{-- Header with controls --}}
                                <div class="d-flex gap-2 flex-wrap p-2 bg-light border-bottom justify-content-between align-items-center">
                                    <div class="d-flex gap-2 align-items-center">
                                        <span class="badge bg-dark">{{ $index + 1 }}</span>
                                        <span class="text-sm fw-bold text-truncate" style="max-width: 250px;">{{ $attachment->original_name }}</span>
                                    </div>
                                <div class="d-flex gap-2 flex-wrap">
                                    @if($isImage || $isPdf)
                                    <button class="btn btn-sm btn-primary" onclick="openPOFullscreenByIndex({{ $index }})">
                                        <i class="fas fa-expand me-1"></i> Fullscreen
                                    </button>
                                    <button class="btn btn-sm btn-secondary" onclick="printPOAttachment('{{ $attPath }}', '{{ $extension }}')">
                                        <i class="fas fa-print me-1"></i> Print
                                    </button>
                                    @endif
                                    <a href="{{ $attPath }}" class="btn btn-sm btn-success" download="{{ $attachment->original_name }}">
                                        <i class="fas fa-download me-1"></i> Download
                                    </a>
                                    @if($canUpdate && isset($attachment->id) && $attachment->id > 0)
                                        <button class="btn btn-sm btn-warning" onclick="showReplaceModal({{ $attachment->id }}, '{{ $attachment->original_name }}')">
                                            <i class="fas fa-exchange-alt me-1"></i> Update Dokumen
                                        </button>
                                        <button class="btn btn-sm btn-danger" onclick="confirmDeleteAttachment({{ $attachment->id }}, '{{ $attachment->original_name }}')">
                                            <i class="fas fa-trash me-1"></i> Hapus
                                        </button>
                                        @endif
                                    </div>
                                </div>
                                
                                {{-- Document Preview --}}
                                <div class="po-preview-content" style="background-color: #525659; padding: 15px;">
                                    @if($isImage)
                                        <div style="text-align: center;">
                                            <img src="{{ $attPath }}" alt="{{ $attachment->original_name }}" 
                                                 style="max-width: 100%; max-height: 500px; object-fit: contain; background: white; box-shadow: 0 0 15px rgba(0,0,0,0.3);">
                                        </div>
                                    @elseif($isPdf)
                                        <iframe src="{{ $attPath }}" 
                                                style="width: 100%; height: 500px; border: none; background: white;"
                                                type="application/pdf"></iframe>
                                    @else
                                        <div class="text-center text-white py-5">
                                            <i class="fas fa-file fa-4x mb-3"></i>
                                            <p>Preview tidak tersedia untuk tipe file ini.</p>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                    </div>
                    
                    <script>
                        const poAttachments = @json($attachmentsForJs);
                        
                        function openPOFullscreenByIndex(index) {
                            const att = poAttachments[index];
                            const isImage = ['jpg', 'jpeg', 'png', 'gif', 'webp'].includes(att.extension);
                            const isPdf = att.extension === 'pdf';
                            
                            if (isImage) {
                                openImageFullscreen(att);
                            } else if (isPdf) {
                                openPdfFullscreen(att);
                            }
                        }
                        
                        function printPOAttachment(url, extension) {
                            if (extension === 'pdf') {
                                const iframe = document.createElement('iframe');
                                iframe.style.cssText = 'position:fixed;right:0;bottom:0;width:0;height:0;border:0;';
                                iframe.src = url;
                                document.body.appendChild(iframe);
                                iframe.onload = function() {
                                    setTimeout(() => {
                                        try {
                                            iframe.contentWindow.focus();
                                            iframe.contentWindow.print();
                                        } catch(e) {
                                            window.open(url, '_blank');
                                        }
                                    }, 500);
                                };
                                setTimeout(() => {
                                    if (document.body.contains(iframe)) {
                                        document.body.removeChild(iframe);
                                    }
                                }, 60000);
                            } else {
                                const printWindow = window.open('', '_blank');
                                printWindow.document.write(`
                                    <html>
                                        <head><title>Print PO</title></head>
                                        <body style="margin:0;padding:0;display:flex;align-items:center;justify-content:center;min-height:100vh;background:#fff;">
                                            <img src="${url}" style="max-width:100%;height:auto;">
                                        </body>
                                    </html>
                                `);
                                printWindow.document.close();
                                printWindow.focus();
                                setTimeout(() => {
                                    printWindow.print();
                                }, 250);
                            }
                        }
                    </script>
                    <script>
                        // Fullscreen preview with pan/drag using translate
                        let fullscreenOverlay = null;
                        let fsZoom = 1;
                        let isDragging = false;
                        let dragStartX, dragStartY;
                        let translateX = 0, translateY = 0;
                        let lastTranslateX = 0, lastTranslateY = 0;
                        const minZoom = 0.5;
                        const maxZoom = 5;
                        const zoomStep = 0.15;
                        
                        // PDF Fullscreen with iframe
                        function openPdfFullscreen(att) {
                            fullscreenOverlay = document.createElement('div');
                            fullscreenOverlay.id = 'fullscreenOverlay';
                            fullscreenOverlay.style.cssText = `
                                position: fixed;
                                top: 0;
                                left: 0;
                                width: 100vw;
                                height: 100vh;
                                background-color: rgba(0, 0, 0, 0.97);
                                z-index: 99999;
                                display: flex;
                                flex-direction: column;
                            `;
                            
                            fullscreenOverlay.innerHTML = `
                                <div style="display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; background: rgba(0,0,0,0.9); border-bottom: 1px solid #333;">
                                    <div style="color: white;">
                                        <i class="fas fa-file-pdf text-danger me-2"></i>
                                        <span class="fw-bold">${att.name}</span>
                                    </div>
                                    <div>
                                        <a href="${att.path}" class="btn btn-sm btn-outline-info me-2" download="${att.name}">
                                            <i class="fas fa-download"></i> Download
                                        </a>
                                        <button class="btn btn-sm btn-light" onclick="closeFullscreen()">
                                            <i class="fas fa-times"></i> Tutup
                                        </button>
                                    </div>
                                </div>
                                <div style="flex: 1; overflow: hidden;">
                                    <iframe src="${att.path}" style="width: 100%; height: 100%; border: none;"></iframe>
                                </div>
                            `;
                            
                            document.body.appendChild(fullscreenOverlay);
                            document.body.style.overflow = 'hidden';
                            
                            // ESC to close
                            document.addEventListener('keydown', handleFsKeydown);
                        }
                        
                        // Image Fullscreen with zoom/drag
                        function openImageFullscreen(att) {
                            
                            fsZoom = 1;
                            translateX = 0;
                            translateY = 0;
                            lastTranslateX = 0;
                            lastTranslateY = 0;
                            
                            // Create fullscreen overlay
                            fullscreenOverlay = document.createElement('div');
                            fullscreenOverlay.id = 'fullscreenOverlay';
                            fullscreenOverlay.style.cssText = `
                                position: fixed;
                                top: 0;
                                left: 0;
                                width: 100vw;
                                height: 100vh;
                                background-color: rgba(0, 0, 0, 0.97);
                                z-index: 99999;
                                display: flex;
                                flex-direction: column;
                            `;
                            
                            fullscreenOverlay.innerHTML = `
                                <div style="display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; background: rgba(0,0,0,0.9); border-bottom: 1px solid #333;">
                                    <div style="color: white;">
                                        <span class="fw-bold">${att.name}</span>
                                        <span id="fsZoomIndicator" class="badge bg-info ms-2">${Math.round(fsZoom * 100)}%</span>
                                    </div>
                                    <div>
                                        <button class="btn btn-sm btn-outline-light me-2" onclick="resetFsZoom()">
                                            <i class="fas fa-compress-arrows-alt"></i> Reset
                                        </button>
                                        <button class="btn btn-sm btn-light" onclick="closeFullscreen()">
                                            <i class="fas fa-times"></i> Tutup
                                        </button>
                                    </div>
                                </div>
                                <div id="fsImageContainer" style="flex: 1; overflow: hidden; display: flex; align-items: center; justify-content: center; position: relative;">
                                    <img id="fsImage" src="${att.path}" alt="${att.name}" 
                                         style="max-width: 95vw; max-height: 85vh; transform: scale(1) translate(0px, 0px); transform-origin: center center; transition: none; user-select: none; -webkit-user-drag: none;">
                                </div>
                                <div style="position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); color: white; text-align: center; font-size: 13px; background: rgba(0,0,0,0.7); padding: 8px 16px; border-radius: 20px;">
                                    <i class="fas fa-mouse me-1"></i> Scroll = Zoom &nbsp;|&nbsp; Drag = Geser &nbsp;|&nbsp; Esc = Keluar
                                </div>
                            `;
                            
                            document.body.appendChild(fullscreenOverlay);
                            document.body.style.overflow = 'hidden';
                            
                            // Setup event listeners
                            const container = document.getElementById('fsImageContainer');
                            const img = document.getElementById('fsImage');
                            
                            // Zoom with scroll
                            container.addEventListener('wheel', handleFsZoom, { passive: false });
                            
                            // Drag/Pan functionality
                            img.addEventListener('mousedown', startDrag);
                            document.addEventListener('mousemove', doDrag);
                            document.addEventListener('mouseup', stopDrag);
                            
                            // ESC to close
                            document.addEventListener('keydown', handleFsKeydown);
                        }
                        
                        function handleFsZoom(e) {
                            e.preventDefault();
                            const img = document.getElementById('fsImage');
                            const indicator = document.getElementById('fsZoomIndicator');
                            
                            if (!img) return;
                            
                            const prevZoom = fsZoom;
                            
                            if (e.deltaY < 0) {
                                fsZoom = Math.min(maxZoom, fsZoom + zoomStep);
                            } else {
                                fsZoom = Math.max(minZoom, fsZoom - zoomStep);
                            }
                            
                            // If zooming out, reduce translate proportionally
                            if (fsZoom < prevZoom) {
                                const ratio = fsZoom / prevZoom;
                                translateX *= ratio;
                                translateY *= ratio;
                                lastTranslateX = translateX;
                                lastTranslateY = translateY;
                            }
                            
                            // Reset position if zoom is 1 or less
                            if (fsZoom <= 1) {
                                translateX = 0;
                                translateY = 0;
                                lastTranslateX = 0;
                                lastTranslateY = 0;
                            }
                            
                            updateFsImageTransform();
                            
                            if (indicator) {
                                indicator.textContent = `${Math.round(fsZoom * 100)}%`;
                            }
                            
                            // Update cursor
                            img.style.cursor = fsZoom > 1 ? 'grab' : 'default';
                        }
                        
                        function updateFsImageTransform() {
                            const img = document.getElementById('fsImage');
                            if (img) {
                                img.style.transform = `scale(${fsZoom}) translate(${translateX}px, ${translateY}px)`;
                            }
                        }
                        
                        function startDrag(e) {
                            if (fsZoom <= 1) return;
                            e.preventDefault();
                            isDragging = true;
                            dragStartX = e.clientX;
                            dragStartY = e.clientY;
                            
                            const img = document.getElementById('fsImage');
                            if (img) img.style.cursor = 'grabbing';
                        }
                        
                        function doDrag(e) {
                            if (!isDragging || fsZoom <= 1) return;
                            e.preventDefault();
                            
                            const dx = (e.clientX - dragStartX) / fsZoom;
                            const dy = (e.clientY - dragStartY) / fsZoom;
                            
                            translateX = lastTranslateX + dx;
                            translateY = lastTranslateY + dy;
                            
                            updateFsImageTransform();
                        }
                        
                        function stopDrag() {
                            if (!isDragging) return;
                            isDragging = false;
                            lastTranslateX = translateX;
                            lastTranslateY = translateY;
                            
                            const img = document.getElementById('fsImage');
                            if (img && fsZoom > 1) {
                                img.style.cursor = 'grab';
                            }
                        }
                        
                        function resetFsZoom() {
                            fsZoom = 1;
                            translateX = 0;
                            translateY = 0;
                            lastTranslateX = 0;
                            lastTranslateY = 0;
                            
                            const img = document.getElementById('fsImage');
                            const indicator = document.getElementById('fsZoomIndicator');
                            
                            if (img) {
                                img.style.transform = 'scale(1) translate(0px, 0px)';
                                img.style.cursor = 'default';
                            }
                            if (indicator) indicator.textContent = '100%';
                        }
                        
                        function handleFsKeydown(e) {
                            if (e.key === 'Escape') {
                                closeFullscreen();
                            }
                        }
                        
                        function closeFullscreen() {
                            if (fullscreenOverlay) {
                                document.body.removeChild(fullscreenOverlay);
                                fullscreenOverlay = null;
                            }
                            document.body.style.overflow = '';
                            document.removeEventListener('keydown', handleFsKeydown);
                            document.removeEventListener('mousemove', doDrag);
                            document.removeEventListener('mouseup', stopDrag);
                            isDragging = false;
                        }
                        
                        // Delete attachment confirmation
                        function confirmDeleteAttachment(attachmentId, fileName) {
                            Swal.fire({
                                title: 'Hapus Attachment?',
                                html: `<p>File <strong>${fileName}</strong> akan dihapus permanen.</p><p class="text-danger small">Tindakan ini tidak dapat dibatalkan!</p>`,
                                icon: 'warning',
                                showCancelButton: true,
                                confirmButtonText: '<i class="fas fa-trash"></i> Ya, Hapus',
                                cancelButtonText: '<i class="fas fa-times"></i> Batal',
                                confirmButtonColor: '#dc3545',
                                cancelButtonColor: '#6c757d'
                            }).then((result) => {
                                if (result.isConfirmed) {
                                    deleteAttachment(attachmentId);
                                }
                            });
                        }
                        
                        function deleteAttachment(attachmentId) {
                            Swal.fire({
                                title: 'Menghapus...',
                                html: '<i class="fas fa-spinner fa-spin fa-2x"></i>',
                                allowOutsideClick: false,
                                showConfirmButton: false
                            });
                            
                            fetch(`{{ url('/trsapv/delete-attachment') }}/${attachmentId}`, {
                                method: 'DELETE',
                                headers: {
                                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                                    'Accept': 'application/json'
                                }
                            })
                            .then(response => response.json())
                            .then(data => {
                                if (data.success) {
                                    Swal.fire({
                                        icon: 'success',
                                        title: 'Berhasil!',
                                        text: data.message,
                                        confirmButtonColor: '#028284'
                                    }).then(() => window.location.reload());
                                } else {
                                    Swal.fire({
                                        icon: 'error',
                                        title: 'Gagal',
                                        text: data.message,
                                        confirmButtonColor: '#028284'
                                    });
                                }
                            })
                            .catch(error => {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Error',
                                    text: 'Terjadi kesalahan saat menghapus',
                                    confirmButtonColor: '#028284'
                                });
                            });
                        }
                        
                        // Replace attachment modal
                        function showReplaceModal(attachmentId, fileName) {
                            Swal.fire({
                                title: 'Ganti File',
                                html: `
                                    <div class="text-start">
                                        <p class="mb-3">File saat ini: <strong>${fileName}</strong></p>
                                        <p class="text-warning small mb-3"><i class="fas fa-exclamation-triangle me-1"></i> File lama akan dihapus dan diganti dengan file baru</p>
                                        <div class="mb-3">
                                            <label class="form-label">Upload File Pengganti</label>
                                            <input type="file" class="form-control" id="replaceFileInput" accept=".pdf,.jpg,.jpeg,.png">
                                            <div class="form-text">Format: PDF, JPG, PNG (Max: 10MB)</div>
                                        </div>
                                    </div>
                                `,
                                icon: 'warning',
                                showCancelButton: true,
                                confirmButtonText: '<i class="fas fa-exchange-alt"></i> Ganti File',
                                cancelButtonText: '<i class="fas fa-times"></i> Batal',
                                confirmButtonColor: '#ffc107',
                                cancelButtonColor: '#6c757d',
                                preConfirm: () => {
                                    const fileInput = document.getElementById('replaceFileInput');
                                    if (!fileInput.files.length) {
                                        Swal.showValidationMessage('Pilih file pengganti');
                                        return false;
                                    }
                                    const file = fileInput.files[0];
                                    if (file.size > 10 * 1024 * 1024) {
                                        Swal.showValidationMessage('Ukuran file maksimal 10MB');
                                        return false;
                                    }
                                    return file;
                                }
                            }).then((result) => {
                                if (result.isConfirmed) {
                                    replaceAttachment(attachmentId, result.value);
                                }
                            });
                        }
                        
                        function replaceAttachment(attachmentId, file) {
                            Swal.fire({
                                title: 'Mengganti file...',
                                html: '<i class="fas fa-spinner fa-spin fa-2x"></i>',
                                allowOutsideClick: false,
                                showConfirmButton: false
                            });
                            
                            const formData = new FormData();
                            formData.append('_token', '{{ csrf_token() }}');
                            formData.append('attachment', file);
                            
                            fetch(`{{ url('/trsapv/replace-attachment') }}/${attachmentId}`, {
                                method: 'POST',
                                body: formData
                            })
                            .then(response => response.json())
                            .then(data => {
                                if (data.success) {
                                    Swal.fire({
                                        icon: 'success',
                                        title: 'Berhasil!',
                                        text: data.message,
                                        confirmButtonColor: '#028284'
                                    }).then(() => window.location.reload());
                                } else {
                                    Swal.fire({
                                        icon: 'error',
                                        title: 'Gagal',
                                        text: data.message,
                                        confirmButtonColor: '#028284'
                                    });
                                }
                            })
                            .catch(error => {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Error',
                                    text: 'Terjadi kesalahan saat mengganti file',
                                    confirmButtonColor: '#028284'
                                });
                            });
                        }
                    </script>
                @else
                    {{-- No attachment yet --}}
                    <div class="text-center py-5 text-muted">
                        <i class="fas fa-folder-open fa-4x mb-3 text-secondary"></i>
                        <p class="mb-0">Tidak ada dokumen PO yang diunggah.</p>
                        @if($canUpdate)
                        <button class="btn btn-primary mt-3" 
                            onclick="showUpdateAttachmentModal('{{ encrypt($list->id) }}', '', false)">
                            <i class="fas fa-upload me-1"></i> Upload Dokumen Sekarang
                        </button>
                        @endif
                    </div>
                @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endif

{{-- 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>
@endif
@endpush
@endif
@endif
@endsection

@push('js')
<script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/ckeditor.js"></script>
<style>
    /* Responsive button styles */
    @media (max-width: 576px) {
        .btn {
            font-size: 0.875rem;
            padding: 0.5rem 0.75rem;
        }

        .card-header h6 {
            font-size: 1rem;
        }
    }

    /* Document container styles */
    .document-container {
        border: 1px solid #dee2e6;
        border-radius: 0.25rem;
    }

    /* Paksa gambar dan tabel agar tidak pernah melebihi container */
    .document-preview img,
    .document-preview table {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Hapus shadow/border saat print/pdf agar bersih */
    .document-preview {
        border: none !important;
        box-shadow: none !important;
    }

    /* CKEditor Custom Styles */
    .ck-editor__editable_inline {
        min-height: 200px;
        max-height: 400px;
        overflow-y: auto;
        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
        color: #000 !important;
    }
    /* Limit image preview size inside editor */
    .ck-content .image img {
        max-height: 200px;
        width: auto;
        margin: 0 auto;
        display: block;
    }

    /* FIX: Force hide inactive tabs to prevent stacking */
    .tab-content > .tab-pane:not(.active) {
        display: none !important;
    }
</style>

<script>
    // Helper function to check if UOM matches standard template patterns
    function isStandardUom(uom) {
        // Match ROL, RL1, RL2, etc. | PAL, PL1, PL2, etc. | KAR, KR1, KR2, etc.
        return /^(ROL|RL\d*|PAL|PL\d*|KAR|KR\d*)$/i.test(uom);
    }

    // Zoom levels for documents
    const zoomLevels = {
        'sc': 1.0,
        'io': 1.0,
        'pi': 1.0
    };
    
    // Zoom level for attachment image
    let attachmentZoom = 1.0;

    function downloadDocumentAsPDF(type) {
        // Show loading indicator
        Swal.fire({
            title: 'Generating PDF...',
            html: 'Please wait while we prepare your document',
            allowOutsideClick: false,
            allowEscapeKey: false,
            didOpen: () => {
                Swal.showLoading();
            }
        });

        // Call server-side PDF generation
        const documentId = '{{ $list->id }}';
        let url = '';
        
        if (type === 'sc') {
            url = `{{ url('/') }}/pdf/sales-contract/${documentId}`;
        } else if (type === 'io') {
            url = `{{ url('/') }}/pdf/internal-order/${documentId}`;
        } else if (type === 'pi') {
            url = `{{ url('/') }}/pdf/proforma-invoice/${documentId}`;
        }

        // Trigger download using window.location
        window.location.href = url;

        // Close loading after a short delay
        setTimeout(() => {
            Swal.close();
        }, 1500);
    }

    function printDocumentAsPDF(type) {
        // Show loading indicator
        Swal.fire({
            title: 'Preparing Print...',
            html: 'Please wait while we prepare the document for printing',
            allowOutsideClick: false,
            allowEscapeKey: false,
            didOpen: () => {
                Swal.showLoading();
            }
        });

        const documentId = '{{ $list->id }}';
        let url = '';
        
        if (type === 'sc') {
            url = `{{ url('/') }}/pdf/sales-contract/${documentId}/print`;
        } else if (type === 'io') {
            url = `{{ url('/') }}/pdf/internal-order/${documentId}/print`;
        } else if (type === 'pi') {
            url = `{{ url('/') }}/pdf/proforma-invoice/${documentId}/print`;
        }

        // Create hidden iframe for printing
        const iframe = document.createElement('iframe');
        iframe.style.position = 'fixed';
        iframe.style.right = '0';
        iframe.style.bottom = '0';
        iframe.style.width = '0';
        iframe.style.height = '0';
        iframe.style.border = '0';
        iframe.src = url;
        
        document.body.appendChild(iframe);
        
        // Wait for PDF to load then print
        iframe.onload = function() {
            Swal.close();
            setTimeout(() => {
                try {
                    iframe.contentWindow.focus();
                    iframe.contentWindow.print();
                } catch (e) {
                    console.error('Print error:', e);
                    // Fallback: open in new tab
                    Swal.fire({
                        icon: 'info',
                        title: 'Opening PDF',
                        text: 'PDF will open in a new tab. Please use browser print function (Ctrl+P)',
                        confirmButtonColor: '#028284'
                    });
                    window.open(url, '_blank');
                }
                
                // Remove iframe after print is done (using onafterprint) or after long timeout
                if (iframe.contentWindow) {
                   iframe.contentWindow.onafterprint = function() {
                        if (document.body.contains(iframe)) {
                             document.body.removeChild(iframe);
                        }
                   };
                }

                // Safety cleanup (e.g. 10 minutes) in case onafterprint doesn't fire
                setTimeout(() => {
                    if (document.body.contains(iframe)) {
                        document.body.removeChild(iframe);
                    }
                }, 600000); 

            }, 500);
        };
        
        // Fallback if onload doesn't fire
        setTimeout(() => {
            if (document.body.contains(iframe)) {
                Swal.close();
                try {
                    iframe.contentWindow.print();
                } catch (e) {
                    window.open(url, '_blank');
                }
            }
        }, 3000);
    }

    function viewDocumentInBrowser(type) {
        const documentId = '{{ $list->id }}';
        let url = '';
        
        if (type === 'sc') {
            url = `{{ url('/') }}/pdf/sales-contract/${documentId}/print`;
        } else if (type === 'io') {
            url = `{{ url('/') }}/pdf/internal-order/${documentId}/print`;
        } else if (type === 'pi') {
            url = `{{ url('/') }}/pdf/proforma-invoice/${documentId}/print`;
        }

        // Open PDF in new browser tab
        window.open(url, '_blank');
    }

    async function downloadBothDocuments() {
        try {
            // Show loading indicator
            Swal.fire({
                title: 'Preparing Documents...',
                html: 'Downloading Sales Contract...',
                allowOutsideClick: false,
                allowEscapeKey: false,
                didOpen: () => {
                    Swal.showLoading();
                }
            });

            const documentId = '{{ $list->id }}';
            const baseUrl = '{{ url('/') }}';

            // Download first document
            window.location.href = `${baseUrl}/pdf/sales-contract/${documentId}`;
            
            // Update message for second document
            Swal.update({
                html: 'Downloading Internal Order...'
            });
            
            // Wait a bit before downloading second document
            await new Promise(resolve => setTimeout(resolve, 2000));
            
            // Download second document
            window.location.href = `${baseUrl}/pdf/internal-order/${documentId}`;
            
            // Close loading
            await new Promise(resolve => setTimeout(resolve, 500));
            Swal.close();
            
            // Show success message
            Swal.fire({
                title: 'Success!',
                text: 'Both documents have been downloaded',
                icon: 'success',
                confirmButtonColor: '#028284'
            });
            
            return true;
        } catch (error) {
            console.error('Error downloading PDFs:', error);
            Swal.fire({
                icon: 'error',
                title: 'Download Failed',
                text: 'Failed to download documents. Please try again.',
                confirmButtonColor: '#028284'
            });
            return false;
        }
    }

    // Fullscreen Document Logic
    let fullscreenDocOverlay = null;
    let currentDocType = null;

    function openDocumentFullscreen(type) {
        currentDocType = type;
        const contentId = type + '-content';
        const sourceContent = document.getElementById(contentId);
        
        if (!sourceContent) return;

        // Create overlay if not exists
        if (!fullscreenDocOverlay) {
            fullscreenDocOverlay = document.createElement('div');
            fullscreenDocOverlay.id = 'fullscreenDocOverlay';
            fullscreenDocOverlay.style.cssText = `
                position: fixed;
                top: 0;
                left: 0;
                width: 100vw;
                height: 100vh;
                background-color: rgba(255, 255, 255, 1);
                z-index: 99999;
                display: flex;
                flex-direction: column;
            `;
            document.body.appendChild(fullscreenDocOverlay);
        }

        // Clone content
        const contentClone = sourceContent.cloneNode(true);
        contentClone.id = type + '-content-fullscreen';
        contentClone.style.transform = 'scale(1)'; // Reset scale
        contentClone.style.padding = '40px';
        contentClone.style.margin = '0 auto';
        contentClone.style.maxWidth = '1000px'; 
        contentClone.style.backgroundColor = 'white';
        contentClone.style.boxShadow = '0 0 20px rgba(0,0,0,0.1)';
        contentClone.classList.remove('document-preview'); 

        // Initialize Zoom for Fullscreen
        zoomLevels[type + '-fullscreen'] = 1.0;

        fullscreenDocOverlay.innerHTML = `
            <div style="display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; background: #f8f9fa; border-bottom: 1px solid #dee2e6; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
                <div class="fw-bold text-dark">
                    <i class="fas fa-file-alt me-2 text-primary"></i> Fullscreen View
                </div>
                <div class="d-flex gap-2 align-items-center">
                    <div class="btn-group">
                        <button class="btn btn-sm btn-outline-secondary" onclick="zoomDocument('${type}-fullscreen', 'out')"><i class="fas fa-search-minus"></i></button>
                        <button class="btn btn-sm btn-outline-secondary" onclick="zoomDocument('${type}-fullscreen', 'reset')"><span id="${type}-fullscreen-zoom-level">100%</span></button>
                        <button class="btn btn-sm btn-outline-secondary" onclick="zoomDocument('${type}-fullscreen', 'in')"><i class="fas fa-search-plus"></i></button>
                    </div>
                    <button class="btn btn-sm btn-danger ms-2" onclick="closeDocumentFullscreen()">
                        <i class="fas fa-times me-1"></i> Close
                    </button>
                </div>
            </div>
            <div style="flex: 1; overflow: auto; background-color: #525659; padding: 30px; display: flex; justify-content: center;">
                <div id="${type}-wrapper-fullscreen" style="transition: transform 0.2s; transform-origin: top center;">
                    <!-- Content injected here -->
                </div>
            </div>
        `;

        const wrapper = fullscreenDocOverlay.querySelector(`#${type}-wrapper-fullscreen`);
        if (wrapper) {
            wrapper.appendChild(contentClone);
            
             // Add Wheel listener to the parent container (scrolling area)
            const wrapperContainer = wrapper.parentElement;
            if (wrapperContainer) {
                wrapperContainer.addEventListener('wheel', function(e) {
                    if (e.ctrlKey) {
                        e.preventDefault();
                        handleDocFsWheel(e, type);
                    }
                }, { passive: false });
            }
        }

        document.body.style.overflow = 'hidden'; // Disable background scrolling
        
        // Add ESC listener
        document.addEventListener('keydown', handleDocFsKeydown);
    }

    function handleDocFsWheel(e, type) {
        const action = e.deltaY < 0 ? 'in' : 'out';
        zoomDocument(type + '-fullscreen', action);
    }

    function closeDocumentFullscreen() {
        if (fullscreenDocOverlay) {
            fullscreenDocOverlay.remove();
            fullscreenDocOverlay = null;
        }
        document.body.style.overflow = '';
        currentDocType = null;
        document.removeEventListener('keydown', handleDocFsKeydown);
    }

    function handleDocFsKeydown(e) {
        if (e.key === 'Escape') {
            closeDocumentFullscreen();
        }
    }

    function zoomDocument(type, action) {
        // Check if targeting fullscreen
        const isFullscreen = type.endsWith('-fullscreen');
        const zoomId = type; 

        if (!zoomLevels[zoomId]) zoomLevels[zoomId] = 1.0;

        if (action === 'in') {
            zoomLevels[zoomId] = Math.min(zoomLevels[zoomId] + 0.1, 2.5);
        } else if (action === 'out') {
            zoomLevels[zoomId] = Math.max(zoomLevels[zoomId] - 0.1, 0.5);
        } else if (action === 'reset') {
            zoomLevels[zoomId] = 1.0;
        }
        
        const zoomPercent = Math.round(zoomLevels[zoomId] * 100);
        
        if (isFullscreen) {
            // Fix ID targeting
            // type is like 'sc-fullscreen', we need 'sc' for the wrapper ID
            const baseType = type.replace('-fullscreen', ''); 
            const wrapperId = baseType + '-wrapper-fullscreen';
            const wrapper = document.getElementById(wrapperId);
            const display = document.getElementById(type + '-zoom-level');
            
            if (wrapper) {
                wrapper.style.transform = `scale(${zoomLevels[zoomId]})`;
            }
            if (display) {
                display.textContent = zoomPercent + '%';
            }

        } else {
             // Inline zoom (not used currently but good to keep if reverted)
             const content = document.getElementById(type + '-content');
             const display = document.getElementById(type + '-zoom-level');
             if (content) {
                 content.style.transform = `scale(${zoomLevels[zoomId]})`;
             }
             if (display) {
                 display.textContent = zoomPercent + '%';
             }
        }
    }

    // Keyboard shortcuts for zoom
    document.addEventListener('keydown', function(e) {
        const activeTab = document.querySelector('.tab-pane.active');
        if (!activeTab) return;
        
        const type = activeTab.id;
        
        // Only handle if fullscreen is NOT open (otherwise fullscreen logic handles it? No, we didn't add keyboard zoom to fs yet)
        if (!fullscreenDocOverlay && (e.ctrlKey || e.metaKey)) {
            if (e.key === '+' || e.key === '=') {
                e.preventDefault();
                zoomDocument(type, 'in');
            } else if (e.key === '-') {
                e.preventDefault();
                zoomDocument(type, 'out');
            } else if (e.key === '0') {
                e.preventDefault();
                zoomDocument(type, 'reset');
            }
        }
    });

    //function resend approval
    function showResendApprovalModal(encryptedId, dataName) {
        Swal.fire({
            title: 'Resend Approval',
            html: `
                <div class="text-start">
                    <p class="mb-3"><strong>Data: ${dataName}</strong></p>
                    <hr>
                    <div class="alert alert-warning mb-3" role="alert">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        <strong>Perhatian!</strong>
                    </div>
                    <p class="text-muted mb-2">Opsi ini <strong>hanya untuk revisi pada bagian PO/Dokumen</strong>, seperti:</p>
                    <ul class="text-muted" style="font-size: 0.9rem;">
                        <li>Perubahan nomor PO</li>
                        <li>Perubahan tanggal PO</li>
                        <li>Perubahan dokumen attachment lainnya</li>
                        <li>Kesalahan teknis lain di sistem MSJSO</li>
                    </ul>
                    <hr>
                    <p class="text-dark mb-2"><strong>Proses yang akan dilakukan:</strong></p>
                    <ol class="text-muted" style="font-size: 0.9rem; line-height: 1.6;">
                        <li class="mb-2">Semua status approval akan di-reset ke <strong>pending</strong></li>
                        <li class="mb-2">Approver tetap sama seperti sebelumnya</li>
                        <li class="mb-2">Data akan dikembalikan ke alur approval normal</li>
                        <li class="mb-2">Notifikasi approval akan dikirim ulang ke approver</li>
                    </ol>
                    <hr>
                    <p class="text-center text-danger mt-3 mb-0"><small><i class="fas fa-info-circle"></i> Pastikan Anda telah melakukan perubahan yang diperlukan sebelum melakukan Resend Approval</small></p>
                </div>
            `,
            icon: 'question',
            showCancelButton: true,
            confirmButtonText: '<i class="fas fa-paper-plane"></i> Ya, Kirim Ulang',
            cancelButtonText: '<i class="fas fa-times"></i> Batal',
            confirmButtonColor: '#28a745',
            cancelButtonColor: '#6c757d',
            width: '700px',
            customClass: {
                popup: 'text-start'
            }
        }).then((result) => {
            if (result.isConfirmed) {
                // Show loading
                Swal.fire({
                    title: 'Memproses...',
                    html: 'Mengirim ulang approval...',
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });

                // Create and submit form
                const form = document.createElement('form');
                form.method = 'POST';
                form.action = `{{ url('/trsapv/resend-approval') }}/${encryptedId}`;
                
                // CSRF Token
                const csrfInput = document.createElement('input');
                csrfInput.type = 'hidden';
                csrfInput.name = '_token';
                csrfInput.value = '{{ csrf_token() }}';
                form.appendChild(csrfInput);
                
                document.body.appendChild(form);
                form.submit();
            }
        });
    }

    //function resync SAP data
    function showResyncModal(encryptedId, dataName) {
        Swal.fire({
            title: 'Sync Ulang Data SAP',
            html: `
                <div class="text-start">
                    <p class="mb-3">Data: <strong>${dataName}</strong></p>
                    <div class="mb-3">
                        <p class="mb-2"><strong><i class="fas fa-exclamation-triangle text-warning me-2"></i>Catatan Penting:</strong></p>
                        <ul class="mb-0">
                            <li>Semua data pada <strong>trs_header_data</strong> dan <strong>trs_item_data</strong> akan dihapus dan diganti dengan data terbaru dari SAP</li>
                            <li>Proses ini tidak dapat dibatalkan</li>
                            <li>Pastikan koneksi SAP stabil sebelum melanjutkan</li>
                        </ul>
                    </div>
                    <p class="text-muted mb-0">Apakah Anda yakin ingin melakukan sync ulang data dari SAP?</p>
                </div>
            `,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: '<i class="fas fa-sync me-1"></i> Ya, Sync Ulang',
            cancelButtonText: '<i class="fas fa-times me-1"></i> Batal',
            confirmButtonColor: '#17a2b8',
            cancelButtonColor: '#6c757d',
            customClass: {
                confirmButton: 'btn btn-info me-2',
                cancelButton: 'btn btn-secondary'
            },
            buttonsStyling: false
        }).then((result) => {
            if (result.isConfirmed) {
                // Show loading
                Swal.fire({
                    title: 'Sedang Sync Data...',
                    html: 'Mohon tunggu, sedang mengambil data terbaru dari SAP',
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });

                // Create and submit form
                const form = document.createElement('form');
                form.method = 'POST';
                form.action = `{{ url('/trsapv/resync') }}/${encryptedId}`;
                
                // CSRF Token
                const csrfInput = document.createElement('input');
                csrfInput.type = 'hidden';
                csrfInput.name = '_token';
                csrfInput.value = '{{ csrf_token() }}';
                form.appendChild(csrfInput);
                
                document.body.appendChild(form);
                form.submit();
            }
        });
    }

    //function approve
    function showApproveModal(encryptedId, dataName) {
        Swal.fire({
            title: 'Approve Data',
            html: `
                <div class="text-start">
                    <p class="mb-3">Data: <strong>${dataName}</strong></p>
                    <p class="text-muted">Apakah Anda yakin ingin menyetujui data ini?</p>
                </div>
            `,
            icon: 'question',
            showCancelButton: true,
            confirmButtonText: '<i class="fas fa-check"></i> Ya, Approve',
            cancelButtonText: '<i class="fas fa-times"></i> Batal',
            confirmButtonColor: '#28a745',
            cancelButtonColor: '#6c757d'
        }).then((result) => {
            if (result.isConfirmed) {
                // Show loading state
                Swal.fire({
                    title: 'Memproses Approval...',
                    html: '<div class="text-center"><i class="fas fa-spinner fa-spin fa-3x text-success mb-3"></i><p>Mohon tunggu, sedang memproses approval...</p></div>',
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                    showConfirmButton: false
                });
                
                // Small delay for UX
                setTimeout(() => {
                    // Create and submit form
                    const form = document.createElement('form');
                    form.method = 'POST';
                    form.action = `{{ url('/trsapv/approval') }}/${encryptedId}`;
                    
                    // CSRF Token
                    const csrfInput = document.createElement('input');
                    csrfInput.type = 'hidden';
                    csrfInput.name = '_token';
                    csrfInput.value = '{{ csrf_token() }}';
                    form.appendChild(csrfInput);
                    
                    // Status
                    const statusInput = document.createElement('input');
                    statusInput.type = 'hidden';
                    statusInput.name = 'status';
                    statusInput.value = 'approved';
                    form.appendChild(statusInput);
                    
                    document.body.appendChild(form);
                    form.submit();
                }, 500);
            }
        });
    }

    //function reject
    //function reject
    function showRejectModal(encryptedId, dataName) {
        Swal.fire({
            title: '<h4 class="font-weight-bolder">Reject Data</h4>',
                html: `
                    <div class="text-start">
                        <p class="mb-3 text-sm">Data: <span class="badge bg-secondary">${dataName}</span></p>
                        <div class="row">
                            <!-- Text Editor Section -->
                            <div class="col-md-8">
                                <label class="form-label font-weight-bold">Catatan Penolakan <span class="text-danger">*</span></label>
                                <div class="editor-wrapper shadow-sm rounded">
                                    <div id="editor-container"></div>
                                </div>
                                <input type="text" id="focus-trap" style="opacity:0; width:0; height:0;">
                            </div>
                            
                            <!-- Image Attachments Section -->
                            <div class="col-md-4 border-start">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <label class="form-label font-weight-bold mb-0">Lampiran Gambar</label>
                                    <button class="btn btn-sm btn-outline-primary mb-0 px-2 py-1" onclick="document.getElementById('manual-image-upload').click()">
                                        <i class="fas fa-plus"></i> Add
                                    </button>
                                </div>
                                <p class="text-xs text-muted mb-2">Paste gambar atau klik Add</p>
                                
                                <div id="image-attachments" class="d-flex flex-column gap-2 p-2 bg-light rounded" style="max-height: 400px; overflow-y: auto; min-height: 100px;">
                                    <!-- Images will appear here -->
                                </div>
                                <input type="file" id="manual-image-upload" hidden multiple accept="image/*">
                            </div>
                        </div>
                        <textarea id="swal-note" style="display:none;"></textarea>
                    </div>
                `,
            icon: null, // Custom icon in html
            showCancelButton: true,
            confirmButtonText: '<i class="fas fa-times"></i> Ya, Reject',
            cancelButtonText: '<i class="fas fa-ban"></i> Batal',
            confirmButtonColor: '#dc3545',
            cancelButtonColor: '#8392ab',
            width: '900px',
            customClass: {
                popup: 'card shadow-lg',
                confirmButton: 'btn btn-danger',
                cancelButton: 'btn btn-secondary'
            },
            didOpen: () => {
                const imageContainer = document.getElementById('image-attachments');
                const fileInput = document.getElementById('manual-image-upload');
                window.pendingFiles = []; // Store {file, id}

                // Helper to preview and queue image
                const previewAndQueue = (file) => {
                    const id = Date.now() + Math.random().toString(36).substr(2, 9);
                    const previewUrl = URL.createObjectURL(file);
                    
                    window.pendingFiles.push({ file, id, previewUrl });

                    // Append preview
                    const prevHtml = `
                        <div class="position-relative mb-2 fade-in-image" id="img-${id}">
                            <img src="${previewUrl}" class="w-100 rounded shadow-sm border" style="cursor: pointer;" onclick="window.open('${previewUrl}', '_blank')">
                            <button class="btn btn-xs btn-danger position-absolute top-0 end-0 m-1" onclick="removePendingImage('${id}')">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>`;
                    imageContainer.insertAdjacentHTML('beforeend', prevHtml);
                };

                // Global function to remove image from array
                window.removePendingImage = (id) => {
                    window.pendingFiles = window.pendingFiles.filter(p => p.id !== id);
                    const el = document.getElementById(`img-${id}`);
                    if (el) el.remove();
                };

                // Initialize CKEditor
                if (typeof ClassicEditor !== 'undefined') {
                    ClassicEditor
                        .create(document.querySelector('#editor-container'), {
                            toolbar: {
                                items: [
                                    'heading',
                                    '|',
                                    'bold',
                                    'italic',
                                    'underline',
                                    '|',
                                    'bulletedList',
                                    'numberedList',
                                    '|',
                                    'blockQuote',
                                    'undo',
                                    'redo'
                                ],
                                shouldNotGroupWhenFull: true
                            },
                            placeholder: 'Ketik alasan penolakan di sini...',
                        })
                        .then(editor => {
                            window.editor = editor;
                            
                            // Style adjustments
                            editor.ui.view.editable.element.style.minHeight = '300px';
                            editor.ui.view.editable.element.style.padding = '1rem';

                            // Intercept Paste for Images
                            editor.editing.view.document.on('paste', (evt, data) => {
                                const dataTransfer = data.dataTransfer;
                                if (dataTransfer.files.length > 0) {
                                    evt.stop(); // Stop default paste
                                    for (const file of dataTransfer.files) {
                                        if (file.type.startsWith('image/')) {
                                            previewAndQueue(file);
                                        }
                                    }
                                }
                            });
                        })
                        .catch(error => {
                            console.error('CKEditor Error:', error);
                            document.getElementById('editor-container').innerHTML = `<div class="alert alert-danger">Error loading editor: ${error.message}</div>`;
                        });
                }

                // Handle Manual Upload
                fileInput.addEventListener('change', (e) => {
                    if (e.target.files.length > 0) {
                        for (const file of e.target.files) {
                            previewAndQueue(file);
                        }
                        fileInput.value = ''; // Reset
                    }
                });
            },
            preConfirm: async () => {
                // Get data from CKEditor
                let note = window.editor ? window.editor.getData() : '';
                
                if (!note.trim() && (!window.pendingFiles || window.pendingFiles.length === 0)) {
                    Swal.showValidationMessage('Catatan wajib diisi');
                    return false;
                }

                // Process Uploads
                if (window.pendingFiles && window.pendingFiles.length > 0) {
                    try {
                        const uploadPromises = window.pendingFiles.map(async (item) => {
                            const formData = new FormData();
                            formData.append('upload', item.file);

                            const response = await fetch('{{ route('trsapv.upload-image') }}', {
                                method: 'POST',
                                headers: {
                                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                                },
                                body: formData
                            });

                            if (!response.ok) throw new Error('Upload failed');
                            const data = await response.json();
                            return data.url;
                        });

                        const uploadedUrls = await Promise.all(uploadPromises);

                        // Append to note
                        uploadedUrls.forEach(url => {
                            note += `<img src="${url}" style="max-width: 100%; margin-bottom: 10px;"><br>`;
                        });

                    } catch (error) {
                        Swal.showValidationMessage('Gagal mengupload gambar: ' + error.message);
                        return false; 
                    }
                }

                return note;
            }
        }).then((result) => {
            if (result.isConfirmed) {
                const note = result.value;
                
                // Show loading state
                Swal.fire({
                    title: 'Memproses Rejection...',
                    html: '<div class="text-center"><i class="fas fa-spinner fa-spin fa-3x text-danger mb-3"></i><p>Mohon tunggu, sedang memproses rejection...</p></div>',
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                    showConfirmButton: false
                });
                
                // Small delay for UX
                setTimeout(() => {
                    // Create and submit form
                    const form = document.createElement('form');
                    form.method = 'POST';
                    form.action = `{{ url('/trsapv/approval') }}/${encryptedId}`;
                    
                    // CSRF Token
                    const csrfInput = document.createElement('input');
                    csrfInput.type = 'hidden';
                    csrfInput.name = '_token';
                    csrfInput.value = '{{ csrf_token() }}';
                    form.appendChild(csrfInput);
                    
                    // Status
                    const statusInput = document.createElement('input');
                    statusInput.type = 'hidden';
                    statusInput.name = 'status';
                    statusInput.value = 'rejected';
                    form.appendChild(statusInput);
                    
                    // Note
                    const noteInput = document.createElement('input');
                    noteInput.type = 'hidden';
                    noteInput.name = 'note';
                    noteInput.value = note;
                    form.appendChild(noteInput);
                    
                    document.body.appendChild(form);
                    form.submit();
                    
                    // Cleanup globals
                    delete window.editor;
                    delete window.pendingFiles;
                    delete window.removePendingImage;
                }, 500);
            }
        });
    }

    //function update/upload attachment - Multi-file support
    let updateSelectedFiles = [];
    
    function showUpdateAttachmentModal(encryptedId, dataName, hasAttachment) {
        // Reset selected files
        updateSelectedFiles = [];
        
        const isUpdate = hasAttachment;
        const title = isUpdate ? 'Tambah Dokumen PO' : 'Upload Dokumen PO';
        const confirmText = '<i class="fas fa-upload"></i> Upload';
        const confirmColor = '#28a745';
        
        Swal.fire({
            title: title,
            html: `
                <div class="text-start">
                    ${isUpdate ? '<p class="mb-3 text-info"><i class="fas fa-info-circle me-1"></i> File baru akan ditambahkan ke dokumen yang sudah ada</p>' : '<p class="mb-3 text-muted">Belum ada dokumen PO yang di-upload</p>'}
                    
                    <div class="row" id="update-modal-content">
                        <!-- Left Column - Dropzone -->
                        <div class="col-12" id="update-form-column">
                            <div class="mb-3">
                                <label class="form-label">Upload Dokumen PO</label>
                                <p class="text-muted small mb-2">Format: PDF, JPG, PNG, JPEG (Max: 10MB per file) - <strong>Bisa pilih multiple files</strong></p>
                                <div id="dropzone-update" class="border border-2 border-dashed rounded p-4 text-center" style="cursor: pointer; background-color: #f8f9fa; transition: all 0.3s;">
                                    <i class="fas fa-cloud-upload-alt fa-3x text-muted mb-2"></i>
                                    <p class="mb-1">Drag & drop file disini atau klik untuk upload</p>
                                    <p class="text-muted small mb-0" id="file-info-update">Tidak ada file dipilih</p>
                                </div>
                                <input type="file" id="file-upload-update" accept=".pdf,.jpg,.jpeg,.png" multiple style="display: none;">
                            </div>
                        </div>
                        
                        <!-- Right Column - Preview (Hidden initially) -->
                        <div class="col-5 d-none" id="update-preview-column">
                            <div class="border rounded h-100" style="background-color: #f8f9fa;">
                                <div class="d-flex justify-content-between align-items-center p-2 border-bottom bg-light">
                                    <span class="fw-bold text-sm"><i class="fas fa-eye me-1"></i> Preview</span>
                                    <span class="badge bg-info" id="update-file-count">0 files</span>
                                </div>
                                <div id="update-preview-container" class="p-2" style="max-height: 320px; overflow-y: auto;">
                                    <!-- File previews will appear here -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            `,
            icon: 'info',
            width: '700px',
            showCancelButton: true,
            confirmButtonText: confirmText,
            cancelButtonText: '<i class="fas fa-times"></i> Batal',
            confirmButtonColor: confirmColor,
            cancelButtonColor: '#6c757d',
            didOpen: () => {
                const dropzone = document.getElementById('dropzone-update');
                const fileUpload = document.getElementById('file-upload-update');
                const fileInfo = document.getElementById('file-info-update');
                const formColumn = document.getElementById('update-form-column');
                const previewColumn = document.getElementById('update-preview-column');
                const previewContainer = document.getElementById('update-preview-container');
                const fileCount = document.getElementById('update-file-count');
                
                // Function to update preview panel
                const updatePreviewPanel = () => {
                    if (updateSelectedFiles.length > 0) {
                        formColumn.classList.remove('col-12');
                        formColumn.classList.add('col-7');
                        previewColumn.classList.remove('d-none');
                        fileCount.textContent = `${updateSelectedFiles.length} file${updateSelectedFiles.length > 1 ? 's' : ''}`;
                        fileInfo.innerHTML = `<i class="fas fa-check-circle text-success"></i> ${updateSelectedFiles.length} file terpilih`;
                        fileInfo.classList.remove('text-muted');
                        fileInfo.classList.add('text-success');
                    } else {
                        formColumn.classList.remove('col-7');
                        formColumn.classList.add('col-12');
                        previewColumn.classList.add('d-none');
                        fileInfo.innerHTML = 'Tidak ada file dipilih';
                        fileInfo.classList.remove('text-success');
                        fileInfo.classList.add('text-muted');
                    }
                    
                    // Render previews
                    previewContainer.innerHTML = '';
                    updateSelectedFiles.forEach((fileObj, index) => {
                        const file = fileObj.file;
                        const isImage = file.type.startsWith('image/');
                        const fileSize = (file.size / 1024 / 1024).toFixed(2);
                        
                        let previewHtml = `
                            <div class="d-flex align-items-center p-2 mb-2 bg-white rounded shadow-sm border" id="update-preview-${fileObj.id}">
                                <div class="me-2" style="width: 50px; height: 50px; flex-shrink: 0;">
                                    ${isImage 
                                        ? `<img src="${fileObj.previewUrl}" class="img-fluid rounded" style="width: 50px; height: 50px; object-fit: cover;">` 
                                        : `<div class="d-flex align-items-center justify-content-center bg-danger text-white rounded" style="width: 50px; height: 50px;"><i class="fas fa-file-pdf fa-lg"></i></div>`
                                    }
                                </div>
                                <div class="flex-grow-1 overflow-hidden">
                                    <p class="mb-0 text-xs text-truncate fw-bold" title="${file.name}">${file.name}</p>
                                    <p class="mb-0 text-xs text-muted">${fileSize} MB</p>
                                </div>
                                <button type="button" class="btn btn-sm btn-outline-danger ms-2" onclick="removeUpdateFile('${fileObj.id}')">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                        `;
                        previewContainer.insertAdjacentHTML('beforeend', previewHtml);
                    });
                };
                
                // Global function to remove file
                window.removeUpdateFile = (id) => {
                    const fileObj = updateSelectedFiles.find(f => f.id === id);
                    if (fileObj && fileObj.previewUrl) {
                        URL.revokeObjectURL(fileObj.previewUrl);
                    }
                    updateSelectedFiles = updateSelectedFiles.filter(f => f.id !== id);
                    updatePreviewPanel();
                };
                
                // Handle file selection
                const handleFiles = (files) => {
                    const allowedTypes = ['application/pdf', 'image/jpeg', 'image/jpg', 'image/png'];
                    const maxSize = 10 * 1024 * 1024; // 10MB
                    
                    Array.from(files).forEach(file => {
                        // Validate type
                        if (!allowedTypes.includes(file.type)) {
                            Swal.showValidationMessage(`File "${file.name}" tidak didukung. Gunakan PDF, JPG, atau PNG`);
                            return;
                        }
                        
                        // Validate size
                        if (file.size > maxSize) {
                            Swal.showValidationMessage(`File "${file.name}" melebihi 10MB`);
                            return;
                        }
                        
                        // Add to array
                        const id = Date.now() + '_' + Math.random().toString(36).substr(2, 9);
                        updateSelectedFiles.push({
                            id: id,
                            file: file,
                            previewUrl: file.type.startsWith('image/') ? URL.createObjectURL(file) : null
                        });
                    });
                    
                    updatePreviewPanel();
                    fileUpload.value = ''; // Reset input
                };
                
                // Click to upload
                dropzone.addEventListener('click', () => {
                    fileUpload.click();
                });
                
                // Drag over
                dropzone.addEventListener('dragover', (e) => {
                    e.preventDefault();
                    dropzone.style.backgroundColor = '#e9ecef';
                    dropzone.style.borderColor = confirmColor;
                });
                
                // Drag leave
                dropzone.addEventListener('dragleave', (e) => {
                    e.preventDefault();
                    dropzone.style.backgroundColor = '#f8f9fa';
                    dropzone.style.borderColor = '#dee2e6';
                });
                
                // Drop
                dropzone.addEventListener('drop', (e) => {
                    e.preventDefault();
                    dropzone.style.backgroundColor = '#f8f9fa';
                    dropzone.style.borderColor = '#dee2e6';
                    handleFiles(e.dataTransfer.files);
                });
                
                // File input change
                fileUpload.addEventListener('change', (e) => {
                    handleFiles(e.target.files);
                });
            },
            preConfirm: () => {
                if (updateSelectedFiles.length === 0) {
                    Swal.showValidationMessage('Silakan pilih minimal satu file untuk di-upload');
                    return false;
                }
                return true;
            }
        }).then((result) => {
            if (result.isConfirmed) {
                // Create FormData with multiple files
                const formData = new FormData();
                formData.append('_token', '{{ csrf_token() }}');
                
                // Append all selected files
                updateSelectedFiles.forEach((fileObj) => {
                    formData.append('attachments[]', fileObj.file);
                });
                
                // Show loading
                Swal.fire({
                    title: 'Mengupload Dokumen...',
                    html: `<div class="text-center"><i class="fas fa-spinner fa-spin fa-3x text-info mb-3"></i><p>Mengupload ${updateSelectedFiles.length} file...</p></div>`,
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                    showConfirmButton: false
                });
                
                // Cleanup preview URLs
                updateSelectedFiles.forEach(fileObj => {
                    if (fileObj.previewUrl) URL.revokeObjectURL(fileObj.previewUrl);
                });
                
                // Submit using fetch API
                fetch(`{{ url('/trsapv/update-attachment') }}/${encryptedId}`, {
                    method: 'POST',
                    body: formData
                })
                .then(response => {
                    if (response.ok) {
                        window.location.reload();
                    } else {
                        throw new Error('Upload failed');
                    }
                })
                .catch(error => {
                    Swal.fire({
                        icon: 'error',
                        title: 'Gagal Upload',
                        text: 'Terjadi kesalahan saat mengupload dokumen',
                        confirmButtonColor: '#028284'
                    });
                });
            }
        });
    }

    //function send - Multi-file upload with preview
    let selectedFiles = []; // Array to store multiple files
    
    function showSendModal(encryptedId, dataName) {
        // Reset selected files
        selectedFiles = [];
        
        // Build options for supervisor/head selection
        let shOptions = '';
        @foreach($sh_users as $sh)
            shOptions += `<option value="{{ $sh->id }}">{{ $sh->firstname }}</option>`;
        @endforeach

        Swal.fire({
            title: 'Kirim Permohonan',
            html: `
                <div class="text-start">
                    <p class="mb-3">Data: <strong>${dataName}</strong></p>
                    <div class="row" id="send-modal-content">
                        <!-- Left Column - Form -->
                        <div class="col-12" id="form-column">
                            <!-- Skip to Manager Checkbox -->
                            <div class="mb-3 form-check">
                                <input type="checkbox" class="form-check-input" id="skip-to-manager">
                                <label class="form-check-label" for="skip-to-manager">
                                    <i class="fas fa-forward me-1"></i> Skip ke Manager
                                    <small class="text-muted d-block">Langsung kirim ke Manager tanpa melalui SPV/Head</small>
                                </label>
                            </div>
                            
                            <!-- SPV/Head Selection (will be hidden when skip is checked) -->
                            <div class="mb-3" id="spv-section">
                                <label for="swal-sh-user" class="form-label">Supervisor/Head <span class="text-danger">*</span></label>
                                <select class="form-select" id="swal-sh-user" required>
                                    <option value="">-- Pilih Supervisor/Head --</option>
                                    ${shOptions}
                                </select>
                            </div>
                            
                            <div class="mb-3">
                                <label class="form-label">Upload Dokumen PO</label>
                                <p class="text-muted small mb-2">Format: PDF, JPG, PNG, JPEG (Max: 10MB per file) - <strong>Bisa pilih multiple files</strong></p>
                                <div id="dropzone" class="border border-2 border-dashed rounded p-4 text-center" style="cursor: pointer; background-color: #f8f9fa; transition: all 0.3s;">
                                    <i class="fas fa-cloud-upload-alt fa-3x text-muted mb-2"></i>
                                    <p class="mb-1">Drag & drop file disini atau klik untuk upload</p>
                                    <p class="text-muted small mb-0" id="file-info">Tidak ada file dipilih</p>
                                </div>
                                <input type="file" id="file-upload" accept=".pdf,.jpg,.jpeg,.png" multiple style="display: none;">
                            </div>
                        </div>
                        
                        <!-- Right Column - Preview (Hidden initially) -->
                        <div class="col-5 d-none" id="preview-column">
                            <div class="border rounded h-100" style="background-color: #f8f9fa;">
                                <div class="d-flex justify-content-between align-items-center p-2 border-bottom bg-light">
                                    <span class="fw-bold text-sm"><i class="fas fa-eye me-1"></i> Preview</span>
                                    <span class="badge bg-info" id="file-count">0 files</span>
                                </div>
                                <div id="preview-container" class="p-2" style="max-height: 320px; overflow-y: auto;">
                                    <!-- File previews will appear here -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            `,
            icon: 'question',
            width: '700px',
            showCancelButton: true,
            confirmButtonText: '<i class="fas fa-paper-plane"></i> Kirim',
            cancelButtonText: '<i class="fas fa-times"></i> Batal',
            confirmButtonColor: '#17a2b8',
            cancelButtonColor: '#6c757d',
            didOpen: () => {
                const dropzone = document.getElementById('dropzone');
                const fileUpload = document.getElementById('file-upload');
                const fileInfo = document.getElementById('file-info');
                const formColumn = document.getElementById('form-column');
                const previewColumn = document.getElementById('preview-column');
                const previewContainer = document.getElementById('preview-container');
                const fileCount = document.getElementById('file-count');
                const skipCheckbox = document.getElementById('skip-to-manager');
                const spvSection = document.getElementById('spv-section');
                
                // Toggle SPV section visibility when skip checkbox is changed
                skipCheckbox.addEventListener('change', () => {
                    if (skipCheckbox.checked) {
                        spvSection.style.display = 'none';
                        document.getElementById('swal-sh-user').value = '';
                    } else {
                        spvSection.style.display = 'block';
                    }
                });
                
                // Function to update preview panel
                const updatePreviewPanel = () => {
                    if (selectedFiles.length > 0) {
                        formColumn.classList.remove('col-12');
                        formColumn.classList.add('col-7');
                        previewColumn.classList.remove('d-none');
                        fileCount.textContent = `${selectedFiles.length} file${selectedFiles.length > 1 ? 's' : ''}`;
                        fileInfo.innerHTML = `<i class="fas fa-check-circle text-success"></i> ${selectedFiles.length} file terpilih`;
                        fileInfo.classList.remove('text-muted');
                        fileInfo.classList.add('text-success');
                    } else {
                        formColumn.classList.remove('col-7');
                        formColumn.classList.add('col-12');
                        previewColumn.classList.add('d-none');
                        fileInfo.innerHTML = 'Tidak ada file dipilih';
                        fileInfo.classList.remove('text-success');
                        fileInfo.classList.add('text-muted');
                    }
                    
                    // Render previews
                    previewContainer.innerHTML = '';
                    selectedFiles.forEach((fileObj, index) => {
                        const file = fileObj.file;
                        const isImage = file.type.startsWith('image/');
                        const fileSize = (file.size / 1024 / 1024).toFixed(2);
                        
                        let previewHtml = `
                            <div class="d-flex align-items-center p-2 mb-2 bg-white rounded shadow-sm border" id="preview-${fileObj.id}">
                                <div class="me-2" style="width: 50px; height: 50px; flex-shrink: 0;">
                                    ${isImage 
                                        ? `<img src="${fileObj.previewUrl}" class="img-fluid rounded" style="width: 50px; height: 50px; object-fit: cover;">` 
                                        : `<div class="d-flex align-items-center justify-content-center bg-danger text-white rounded" style="width: 50px; height: 50px;"><i class="fas fa-file-pdf fa-lg"></i></div>`
                                    }
                                </div>
                                <div class="flex-grow-1 overflow-hidden">
                                    <p class="mb-0 text-xs text-truncate fw-bold" title="${file.name}">${file.name}</p>
                                    <p class="mb-0 text-xs text-muted">${fileSize} MB</p>
                                </div>
                                <button type="button" class="btn btn-sm btn-outline-danger ms-2" onclick="removeSelectedFile('${fileObj.id}')">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                        `;
                        previewContainer.insertAdjacentHTML('beforeend', previewHtml);
                    });
                };
                
                // Global function to remove file
                window.removeSelectedFile = (id) => {
                    const fileObj = selectedFiles.find(f => f.id === id);
                    if (fileObj && fileObj.previewUrl) {
                        URL.revokeObjectURL(fileObj.previewUrl);
                    }
                    selectedFiles = selectedFiles.filter(f => f.id !== id);
                    updatePreviewPanel();
                };
                
                // Handle file selection
                const handleFiles = (files) => {
                    const allowedTypes = ['application/pdf', 'image/jpeg', 'image/jpg', 'image/png'];
                    const maxSize = 10 * 1024 * 1024; // 10MB
                    
                    Array.from(files).forEach(file => {
                        // Validate type
                        if (!allowedTypes.includes(file.type)) {
                            Swal.showValidationMessage(`File "${file.name}" tidak didukung. Gunakan PDF, JPG, atau PNG`);
                            return;
                        }
                        
                        // Validate size
                        if (file.size > maxSize) {
                            Swal.showValidationMessage(`File "${file.name}" melebihi 10MB`);
                            return;
                        }
                        
                        // Add to array
                        const id = Date.now() + '_' + Math.random().toString(36).substr(2, 9);
                        selectedFiles.push({
                            id: id,
                            file: file,
                            previewUrl: file.type.startsWith('image/') ? URL.createObjectURL(file) : null
                        });
                    });
                    
                    updatePreviewPanel();
                    fileUpload.value = ''; // Reset input
                };
                
                // Click to upload
                dropzone.addEventListener('click', () => {
                    fileUpload.click();
                });
                
                // Drag over
                dropzone.addEventListener('dragover', (e) => {
                    e.preventDefault();
                    dropzone.style.backgroundColor = '#e9ecef';
                    dropzone.style.borderColor = '#17a2b8';
                });
                
                // Drag leave
                dropzone.addEventListener('dragleave', (e) => {
                    e.preventDefault();
                    dropzone.style.backgroundColor = '#f8f9fa';
                    dropzone.style.borderColor = '#dee2e6';
                });
                
                // Drop
                dropzone.addEventListener('drop', (e) => {
                    e.preventDefault();
                    dropzone.style.backgroundColor = '#f8f9fa';
                    dropzone.style.borderColor = '#dee2e6';
                    handleFiles(e.dataTransfer.files);
                });
                
                // File input change
                fileUpload.addEventListener('change', (e) => {
                    handleFiles(e.target.files);
                });
            },
            preConfirm: () => {
                const skipCheckbox = document.getElementById('skip-to-manager');
                const shUserId = document.getElementById('swal-sh-user').value;
                
                if (skipCheckbox.checked) {
                    // Skip to manager - no SPV needed
                    return { skipToManager: true, shUserId: null };
                } else {
                    // Normal flow - SPV required
                    if (!shUserId) {
                        Swal.showValidationMessage('Pilih Supervisor/Head terlebih dahulu');
                        return false;
                    }
                    return { skipToManager: false, shUserId: shUserId };
                }
            }
        }).then((result) => {
            if (result.isConfirmed && result.value) {
                const { skipToManager, shUserId } = result.value;
                
                // Function to actually send the data
                const sendData = () => {
                    // Create FormData with multiple files
                    const formData = new FormData();
                    formData.append('_token', '{{ csrf_token() }}');
                    
                    if (skipToManager) {
                        formData.append('skip_to_manager', '1');
                    } else {
                        formData.append('sh_user_id', shUserId);
                    }
                    
                    // Append all selected files
                    selectedFiles.forEach((fileObj, index) => {
                        formData.append('attachments[]', fileObj.file);
                    });
                    
                    // Show loading
                    Swal.fire({
                        title: 'Mengirim...',
                        html: `Mohon tunggu, sedang mengupload ${selectedFiles.length} file...`,
                        allowOutsideClick: false,
                        allowEscapeKey: false,
                        didOpen: () => {
                            Swal.showLoading();
                        }
                    });
                    
                    // Cleanup preview URLs
                    selectedFiles.forEach(fileObj => {
                        if (fileObj.previewUrl) URL.revokeObjectURL(fileObj.previewUrl);
                    });
                    
                    // Submit using fetch API
                    fetch(`{{ url('/trsapv/send') }}/${encryptedId}`, {
                        method: 'POST',
                        body: formData
                    })
                    .then(response => {
                        if (response.ok) {
                            window.location.reload();
                        } else {
                            throw new Error('Upload failed');
                        }
                    })
                    .catch(error => {
                        Swal.fire({
                            icon: 'error',
                            title: 'Gagal Mengirim',
                            text: 'Terjadi kesalahan saat mengirim data',
                            confirmButtonColor: '#028284'
                        });
                    });
                };
                
                // If skip to manager, show confirmation first
                if (skipToManager) {
                    Swal.fire({
                        title: 'Konfirmasi Skip ke Manager',
                        html: `<p>Dokumen ini akan <strong>langsung dikirim ke Manager</strong> tanpa melalui Supervisor/Head.</p>
                               <p class="text-warning small"><i class="fas fa-exclamation-triangle me-1"></i> Apakah Anda yakin ingin skip?</p>`,
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonText: '<i class="fas fa-check"></i> Lanjutkan',
                        cancelButtonText: '<i class="fas fa-times"></i> Batal',
                        confirmButtonColor: '#17a2b8',
                        cancelButtonColor: '#6c757d'
                    }).then((confirmResult) => {
                        if (confirmResult.isConfirmed) {
                            sendData();
                        }
                    });
                } else {
                    // Normal flow - send directly
                    sendData();
                }
            }
        });
    }

    //function go back
    function goBack() {
        const params = new URLSearchParams(window.location.search);

        if (params.get('from_report') === '1') {
            window.location.href = "{{ url('rptso1') }}";
        } else {
            history.back();
        }
    }

    function showBankInfoModal(encryptedId, existingDataRaw) {
        let initialData = '';


        if(existingDataRaw) {
            try {
                let parsed = JSON.parse(existingDataRaw);
                if (parsed.bank_name !== undefined) {
                    initialData = `
<p style="margin-bottom: 2px;">Starting from October 25, 2023, please use our new corporate bank account as follow :</p>
<table style="width: 60%; border: none; font-size: 12px; font-weight: normal;">
    <tbody>
        <tr><td style="width: 100px; padding: 1px 0;">Bank Name</td><td style="width: 10px; padding: 1px 0;">:</td><td style="padding: 1px 0;">${parsed.bank_name || ''}</td></tr>
        <tr><td style="padding: 1px 0;">Address</td><td style="padding: 1px 0;">:</td><td style="padding: 1px 0;">${parsed.address || ''}</td></tr>
        <tr><td style="padding: 1px 0;">In Favor Of</td><td style="padding: 1px 0;">:</td><td style="padding: 1px 0;">${parsed.in_favor_of || ''}</td></tr>
        <tr><td style="padding: 1px 0;">Account No</td><td style="padding: 1px 0;">:</td><td style="padding: 1px 0;">${parsed.account_no || ''}</td></tr>
        <tr><td style="padding: 1px 0;">Swift Code</td><td style="padding: 1px 0;">:</td><td style="padding: 1px 0;">${parsed.swift_code || ''}</td></tr>
    </tbody>
</table>
`;
                } else {
                    initialData = existingDataRaw;
                }
            } catch(e) {
                initialData = existingDataRaw;
            }
        }

        Swal.fire({
            title: 'Edit PI Info',
            html: `
                <form id="bankInfoForm" method="POST" action="{{ url('/trsapv/update-bank-info') }}/${encryptedId}">
                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
                    <div class="mb-3 text-start">
                        <label class="form-label font-weight-bold">Bank Information <span class="text-danger">*</span></label>
                        <div class="editor-wrapper shadow-sm rounded">
                            <div id="bank-info-editor-container"></div>
                        </div>
                        <textarea id="bank_info_text" name="bank_info_text" style="display:none;"></textarea>
                    </div>
                    <div class="mb-3 text-start">
                        <label class="form-label font-weight-bold">Font Style (Tampilan PDF)</label>
                        <select id="pdf_font_family" class="form-select form-control">
                            <option value="Arial, Helvetica, sans-serif">Arial / Helvetica (Default Dokumen)</option>
                            <option value="'Times New Roman', Times, serif">Times New Roman</option>
                            <option value="'Courier New', Courier, monospace">Courier New</option>
                            <option value="Tahoma, Geneva, sans-serif">Tahoma</option>
                            <option value="'Trebuchet MS', Helvetica, sans-serif">Trebuchet MS</option>
                        </select>
                        <small class="text-muted">Pilih jenis huruf yang akan digunakan saat dicetak ke PDF.</small>
                    </div>
                </form>
            `,
            showCancelButton: true,
            confirmButtonText: '<i class="fas fa-save"></i> Simpan',
            cancelButtonText: 'Batal',
            confirmButtonColor: '#28a745',
            cancelButtonColor: '#6c757d',
            width: '800px',
            didOpen: () => {
                if (typeof ClassicEditor !== 'undefined') {
                    ClassicEditor
                        .create(document.querySelector('#bank-info-editor-container'), {
                            placeholder: 'Ketik informasi bank di sini...',
                            toolbar: {
                                items: [
                                    'heading',
                                    '|',
                                    'bold',
                                    'italic',
                                    'underline',
                                    '|',
                                    'bulletedList',
                                    'numberedList',
                                    '|',
                                    'undo',
                                    'redo'
                                ],
                                shouldNotGroupWhenFull: true
                            }
                        })
                        .then(editor => {
                            window.bankInfoEditor = editor;
                            editor.setData(initialData);
                        })
                        .catch(error => {
                            console.error(error);
                            // Fallback if initialization fails
                            document.getElementById('bank-info-editor-container').innerHTML = '<textarea id="fallback_bank_info" class="form-control" rows="8"></textarea>';
                            document.getElementById('fallback_bank_info').value = initialData;
                        });
                } else {
                    // Fallback if CKEditor is not loaded
                    document.getElementById('bank-info-editor-container').innerHTML = '<textarea id="fallback_bank_info" class="form-control" rows="8"></textarea>';
                    document.getElementById('fallback_bank_info').value = initialData;
                }
            },
            preConfirm: () => {
                let content = '';
                if (window.bankInfoEditor) {
                    content = window.bankInfoEditor.getData();
                } else {
                    content = document.getElementById('fallback_bank_info').value;
                }
                
                // Wrap content with selected font family
                let selectedFont = document.getElementById('pdf_font_family').value;
                if (content.trim() !== '') {
                    content = `<div style="font-family: ${selectedFont};">${content}</div>`;
                }

                document.getElementById('bank_info_text').value = content;
                document.getElementById('bankInfoForm').submit();
                return false;
            }
        });
    }
</script>
@endpush