@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="history.back()">
                            <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
                        {{-- 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>
            </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">
                                    <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>
                                    <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)
                                    <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">
                                    <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>
                                    <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)
                                    <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">
                                    <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>
                                    <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)
                                    <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)
                            <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">
                        <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
                    </ul>
                    <div class="tab-content" id="docTabsContent">
                        <div class="tab-pane fade show active" id="sc" role="tabpanel">
                            {{-- Zoom Controls --}}
                            <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 class="vr mx-2"></div>
                                <button class="btn btn-sm btn-outline-secondary" onclick="zoomDocument('sc', 'out')">
                                    <i class="fas fa-search-minus"></i>
                                </button>
                                <button class="btn btn-sm btn-outline-secondary" onclick="zoomDocument('sc', 'reset')">
                                    <i class="fas fa-expand"></i> <span id="sc-zoom-level">100%</span>
                                </button>
                                <button class="btn btn-sm btn-outline-secondary" onclick="zoomDocument('sc', 'in')">
                                    <i class="fas fa-search-plus"></i>
                                </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; transform-origin: top left; transition: transform 0.2s; display: inline-block; min-width: 100%;">
                                    @php
                                        // get use_different_template from backend
                                        $useElseTemplate = isset($use_different_template) ? $use_different_template : false;
                                    @endphp
                                    @if($useElseTemplate)
                                    @include('pages.documents.sales_contract_else')
                                    @else
                                    @include('pages.documents.sales_contract')
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade d-none" id="io" role="tabpanel" style="display: none;">
                            {{-- Zoom Controls --}}
                            <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 class="vr mx-2"></div>
                                <button class="btn btn-sm btn-outline-secondary" onclick="zoomDocument('io', 'out')">
                                    <i class="fas fa-search-minus"></i>
                                </button>
                                <button class="btn btn-sm btn-outline-secondary" onclick="zoomDocument('io', 'reset')">
                                    <i class="fas fa-expand"></i> <span id="io-zoom-level">100%</span>
                                </button>
                                <button class="btn btn-sm btn-outline-secondary" onclick="zoomDocument('io', 'in')">
                                    <i class="fas fa-search-plus"></i>
                                </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; transform-origin: top left; transition: transform 0.2s; display: inline-block; min-width: 100%;">
                                    @php
                                        // get use_different_template from backend
                                        $useElseTemplate = isset($use_different_template) ? $use_different_template : false;
                                    @endphp
                                    @if($useElseTemplate)
                                    @include('pages.documents.internal_order_else')
                                    @else
                                    @include('pages.documents.internal_order')
                                    @endif
                                </div>
                            </div>
                        </div>
                        @if(isset($is_pi) && $is_pi)
                        <div class="tab-pane fade d-none" id="pi" role="tabpanel" style="display: none;">
                            {{-- Zoom Controls --}}
                            <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 class="vr mx-2"></div>
                                <button class="btn btn-sm btn-outline-secondary" onclick="zoomDocument('pi', 'out')">
                                    <i class="fas fa-search-minus"></i>
                                </button>
                                <button class="btn btn-sm btn-outline-secondary" onclick="zoomDocument('pi', 'reset')">
                                    <i class="fas fa-expand"></i> <span id="pi-zoom-level">100%</span>
                                </button>
                                <button class="btn btn-sm btn-outline-secondary" onclick="zoomDocument('pi', 'in')">
                                    <i class="fas fa-search-plus"></i>
                                </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; transform-origin: top left; transition: transform 0.2s; display: inline-block; min-width: 100%;">
                                    @php
                                        // get use_different_template from backend
                                        $useElseTemplate = isset($use_different_template) ? $use_different_template : false;
                                    @endphp
                                    @if($useElseTemplate)
                                    @include('pages.documents.proforma_invoice_else')
                                    @else
                                    @include('pages.documents.proforma_invoice')
                                    @endif
                                </div>
                            </div>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- 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)
                            @php
                                // Use attachments passed from controller, or fallback to legacy if not set
                                if (!isset($attachments)) {
                                    $attachments = collect([]);
                                    if (isset($list->attachment_path) && $list->attachment_path) {
                                        $attachments->push((object)[
                                            'id' => 0,
                                            'file_path' => $list->attachment_path,
                                            'original_name' => $list->attachment_original_name
                                        ]);
                                    }
                                }
                            @endphp
                            @if($attachments->count() > 0)
                                <span class="badge bg-info ms-2">{{ $attachments->count() }} file</span>
                            @endif
                        </h6>
                        <div class="d-flex gap-2">
                            @php
                                // Update/Delete disabled for specific modules unless backend supports it
                                $canUpdate = false; 
                                $hasAttachment = $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>
                                        @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);
                            }
                        }
                    </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) return;
                            e.preventDefault();
                            
                            const deltaX = e.clientX - dragStartX;
                            const deltaY = e.clientY - dragStartY;
                            
                            translateX = lastTranslateX + deltaX;
                            translateY = lastTranslateY + deltaY;
                            
                            updateFsImageTransform();
                        }
                        
                        function stopDrag() {
                            isDragging = false;
                            lastTranslateX = translateX;
                            lastTranslateY = translateY;
                            
                            const img = document.getElementById('fsImage');
                            if (img) img.style.cursor = 'grab';
                        }
                        
                        function resetFsZoom() {
                            fsZoom = 1;
                            translateX = 0;
                            translateY = 0;
                            lastTranslateX = 0;
                            lastTranslateY = 0;
                            updateFsImageTransform();
                            const indicator = document.getElementById('fsZoomIndicator');
                            if (indicator) indicator.textContent = '100%';
                        }
                        
                        function closeFullscreen() {
                            if (fullscreenOverlay) {
                                document.body.removeChild(fullscreenOverlay);
                                fullscreenOverlay = null;
                            }
                            document.body.style.overflow = '';
                            document.removeEventListener('keydown', handleFsKeydown);
                        }
                        
                        function handleFsKeydown(e) {
                            if (e.key === 'Escape') closeFullscreen();
                        }
                    </script>
                    
                @else
                    <div class="alert alert-light text-center">
                        <i class="fas fa-info-circle me-2"></i> Belum ada dokumen PO yang diupload.
                    </div>
                @endif
                </div>
            </div>
        </div>
    </div>
</div>

{{-- check flag js on dmenu --}}
@if ($jsmenu == '1')
@if (view()->exists("js.{$dmenu}"))
@push('addjs')
{{-- file js in folder (resources/views/js) --}}
@include('js.' . $dmenu);
@endpush
@else
@push('addjs')
<script>
    Swal.fire({
        title: 'JS Not Found!!',
        text: 'Please Create File JS',
        icon: 'error',
        confirmButtonColor: '#028284'
    });
</script>
@endpush
@endif
@endif
@endsection

@push('js')
<script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/ckeditor.js"></script>
<style>
    /* 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;
    }

    /* 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;
    }

    /* 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({
                title: 'Error!',
                text: 'Failed to download documents',
                icon: 'error',
                confirmButtonColor: '#028284'
            });
            return false;
        }
    }

    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
            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 {
             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 + '%';
             }
        }
    }

    // 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
            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'; 
        
        // 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();
        }
    }

    document.addEventListener('DOMContentLoaded', function() {
        // Define known tab IDs explicitly
        const tabIds = ['sc', 'io', 'pi'];

        function activateTab(targetId) {
            const cleanTargetId = targetId.replace('#', '');

            tabIds.forEach(id => {
                const el = document.getElementById(id);
                if (el) {
                    if (id === cleanTargetId) {
                        el.style.setProperty('display', 'block', 'important');
                        el.classList.add('active', 'show');
                        el.classList.remove('d-none');
                    } else {
                        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();
                tabButtons.forEach(b => b.classList.remove('active'));
                this.classList.add('active');
                const targetSelector = this.getAttribute('data-target');
                activateTab(targetSelector);
            });
        });

        // Initial State
        const activeLink = document.querySelector('#docTabs .nav-link.active');
        if (activeLink) {
            activateTab(activeLink.getAttribute('data-target'));
        } else {
            activateTab('sc');
        }
    });
    
    // Zoom function for attachment image
    function zoomAttachment(action) {
        const image = document.getElementById('attachment-image');
        const zoomLevelDisplay = document.getElementById('attachment-zoom-level');
        
        if (!image) return;
        
        if (action === 'in') {
            attachmentZoom = Math.min(attachmentZoom + 0.1, 3.0);
        } else if (action === 'out') {
            attachmentZoom = Math.max(attachmentZoom - 0.1, 0.5);
        } else if (action === 'reset') {
            attachmentZoom = 1.0;
        }
        
        const zoomPercent = Math.round(attachmentZoom * 100);
        image.style.transform = `scale(${attachmentZoom})`;
        zoomLevelDisplay.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;
        
        if (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 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 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