{{-- PDF Preview Card with Inline Annotation (SCROLL MODE - semua halaman ditumpuk & bisa di-scroll) --}}
@php
$nodeStorageUrl = config('services.node_api.storage_url', env('NODE_STORAGE_URL'));

$pdfUrls = [
'original' => !empty($surat['file_current']) ? $nodeStorageUrl . '/' . $surat['file_current'] : null,
'annotated' => !empty($surat['file_annotated']) ? $nodeStorageUrl . '/' . $surat['file_annotated'] : null,
'numbered' => !empty($surat['file_numbered']) ? $nodeStorageUrl . '/' . $surat['file_numbered'] : null,
];

$userId = auth()->id();
$status = $surat['status'] ?? '';

// Sebelum — Eloquent method, Sesudah — cek array + status
$isCreator = $userId === ($surat['created_by'] ?? null);

$canApprove = $status === 'pending_approval'
&& collect($surat['approvals'] ?? [])
->where('approver_id', $userId)
->where('status', 'pending')
->isNotEmpty();

$canSign = $status === 'pending_signature'
&& ($surat['final_signer_id'] ?? null) == $userId;

$canForwardPaurmin = $status === 'pending_paurmin_forward';
$canForwardKasmin = $status === 'pending_kasmin_forward';
$canApproveAsWapang = $status === 'pending_wapang_approval';

$canSignPangwapang = $status === 'pending_pangwapang_signature'
&& ($surat['final_signer_id'] ?? null) == $userId;

$canAnnotate = $canApprove || $canSign || $canForwardPaurmin
|| $canForwardKasmin || $canApproveAsWapang || $canSignPangwapang;

$isSignerMode = ($canSign || $canSignPangwapang)
&& !$canApprove && !$canForwardPaurmin
&& !$canForwardKasmin && !$canApproveAsWapang;

// Tentukan PDF yang ditampilkan
if (!empty($surat['file_numbered'])) {
$pdfToShow = 'numbered';
$pdfVersionLabel = 'Versi Final (dengan Nomor Surat)';
$annotatedTabLabel = 'Ditandatangani';
} elseif (!empty($surat['file_annotated'])) {
$pdfToShow = 'annotated';
if (!empty($surat['signed_at'])) {
$pdfVersionLabel = 'Versi Ditandatangani';
$annotatedTabLabel = 'Ditandatangani';
} elseif ($isSignerMode) {
$pdfVersionLabel = 'Tanda Tangan';
$annotatedTabLabel = 'Tanda Tangan';
} else {
$pdfVersionLabel = 'Anotasi/Koreksi';
$annotatedTabLabel = 'Anotasi/Koreksi';
}
} else {
$pdfToShow = 'current';
$pdfVersionLabel = 'Versi Asli';
$annotatedTabLabel = 'Anotasi/Koreksi';
}

$canAnnotateOnCurrentPdf = ($canForwardPaurmin || $canForwardKasmin || $canSignPangwapang || $canSign)
? ($pdfToShow === 'current' || $pdfToShow === 'annotated')
: ($pdfToShow === 'current');
@endphp

@push('styles')
<style>
    /* PDF container - scroll mode, semua halaman ditumpuk vertikal */
    #pdf-container {
        min-height: auto;
        height: auto;
        max-height: 80vh;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        padding: 15px;
        display: block;
    }

    #pdf-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .pdf-page-wrapper {
        position: relative;
        margin: 0 auto;
    }

    .pdf-page-canvas {
        display: block;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }

    .pdf-page-annotation-canvas {
        position: absolute;
        top: 0;
        left: 0;
        touch-action: none;
    }

    .pdf-page-annotation-canvas.allow-scroll {
        touch-action: pan-x pan-y;
        pointer-events: none;
    }

    .pdf-page-number-badge {
        position: absolute;
        top: 8px;
        right: 8px;
        background: rgba(0, 0, 0, 0.6);
        color: #fff;
        font-size: 11px;
        padding: 2px 8px;
        border-radius: 10px;
        z-index: 5;
        pointer-events: none;
    }

    #pdf-loading[style*="display: none"] {
        display: none !important;
    }

    /* Page navigation - fixed at bottom of card */
    #pdf-nav {
        background: #343a40;
        padding: 10px;
        border-top: 1px solid #495057;
    }

    /* Tablet landscape mode */
    @media (min-width: 768px) and (max-height: 600px) and (orientation: landscape) {
        #pdf-container {
            max-height: 60vh;
        }
    }

    @media (max-width: 767.98px) {
        #pdf-container {
            max-height: 70vh;
            padding: 10px;
        }
    }

    /* Mobile landscape */
    @media (max-width: 767.98px) and (orientation: landscape) {
        #pdf-container {
            max-height: 55vh;
        }
    }

    @media (max-width: 575.98px) {
        #pdf-container {
            max-height: 65vh;
        }
    }

    /* Small mobile landscape */
    @media (max-width: 575.98px) and (orientation: landscape) {
        #pdf-container {
            max-height: 50vh;
        }
    }

    /* Tablet landscape - move annotation toolbar to bottom */
    @media (min-width: 992px) and (max-width: 1399px) and (orientation: landscape) {
        .pdf-preview-reorderable {
            display: flex;
            flex-direction: column;
        }

        .pdf-preview-reorderable #annotation-toolbar {
            order: 10;
            border-top: 1px solid #dee2e6;
            border-bottom: none;
        }

        .pdf-preview-reorderable .creator-info-banner {
            order: 1;
        }

        .pdf-preview-reorderable #pdf-container {
            order: 2;
        }

        .pdf-preview-reorderable #pdf-nav {
            order: 3;
        }
    }

    /* Portrait tablet and mobile - move annotation toolbar to bottom */
    @media (max-width: 991.98px) {
        .pdf-preview-reorderable {
            display: flex;
            flex-direction: column;
        }

        .pdf-preview-reorderable #annotation-toolbar {
            order: 10;
            border-top: 1px solid #dee2e6;
            border-bottom: none;
        }

        .pdf-preview-reorderable .creator-info-banner {
            order: 1;
        }

        .pdf-preview-reorderable #pdf-container {
            order: 2;
        }

        .pdf-preview-reorderable #pdf-nav {
            order: 3;
        }
    }
</style>
@endpush

<div class="card shadow-sm mb-4">
    <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center py-2">
        <h5 class="mb-0">
            <i class="bi bi-file-earmark-pdf"></i> Dokumen Surat
            @if($pdfToShow === 'numbered')
            <span class="badge bg-success ms-2">
                <i class="bi bi-check-circle"></i> {{ $pdfVersionLabel }}
            </span>
            @elseif($pdfToShow === 'annotated')
            <span class="badge bg-warning text-dark ms-2">
                <i class="bi bi-{{ $isSignerMode ? 'pen-fill' : 'pencil-square' }}"></i> {{ $pdfVersionLabel }}
            </span>
            @endif
        </h5>
        <div class="d-flex align-items-center">
            <div class="btn-group btn-group-sm">
                <button type="button" class="btn" id="pdf-zoom-out" title="Zoom Out"><i class="bi bi-zoom-out"></i></button>
                <button type="button" class="btn" id="pdf-zoom-level">100%</button>
                <button type="button" class="btn" id="pdf-zoom-in" title="Zoom In"><i class="bi bi-zoom-in"></i></button>
            </div>
            <div class="btn-group btn-group-sm">
                @if(!empty($surat['file_current']) || !empty($surat['file_annotated']) || !empty($surat['file_numbered']))
                <a href="{{ route('surat-keluar-workflow.download-pdf', ['surat' => $surat['id'], 'version' => $pdfToShow]) }}"
                    class="btn" target="_blank">
                    <i class="bi bi-download"></i> Download
                </a>
                @endif
            </div>
        </div>
    </div>

    {{-- Toggle between versions (if multiple exist) --}}
    @if((!empty($surat['file_annotated']) && !empty($surat['file_current'])) || !empty($surat['file_numbered']))
    <div class="card-header bg-light py-2 border-bottom">
        <div class="btn-group btn-group-sm w-100" role="group">
            @if(!empty($surat['file_numbered']))
            <input type="radio" class="btn-check" name="pdfVersion" id="showNumbered" value="numbered" {{ $pdfToShow === 'numbered' ? 'checked' : '' }}>
            <label class="btn btn-outline-success" for="showNumbered">
                <i class="bi bi-check-circle"></i> Final (Bernomor)
            </label>
            @endif
            @if(!empty($surat['file_annotated']))
            <input type="radio" class="btn-check" name="pdfVersion" id="showAnnotated" value="annotated" {{ $pdfToShow === 'annotated' ? 'checked' : '' }}>
            <label class="btn btn-outline-warning" for="showAnnotated">
                <i class="bi bi-{{ $isSignerMode && empty($surat['signed_at']) ? 'pen-fill' : 'pencil-square' }}"></i> {{ $annotatedTabLabel }}
            </label>
            @endif
            <input type="radio" class="btn-check" name="pdfVersion" id="showOriginal" value="current" {{ $pdfToShow === 'current' ? 'checked' : '' }}>
            <label class="btn btn-outline-secondary" for="showOriginal">
                <i class="bi bi-file-earmark"></i> File Asli
            </label>
        </div>
    </div>
    @endif

    {{-- Reorderable wrapper for tablet - toolbar moves to bottom --}}
    <div class="pdf-preview-reorderable">
        {{-- Annotation Toolbar (for approvers/signers/PAURMIN/KASMIN) --}}
        @if($canAnnotate && $canAnnotateOnCurrentPdf)
        <div class="card-header bg-light py-2 border-bottom" id="annotation-toolbar">
            @if($isSignerMode)
            {{-- SIGNER MODE: Simplified toolbar - only pen with black color, thin stroke --}}
            {{-- Mobile --}}
            <div class="d-block d-md-none">
                <div class="d-flex justify-content-center align-items-center gap-2 flex-wrap">
                    <div class="btn-group btn-group-sm">
                        <button type="button" class="btn btn-outline-secondary active" id="tool-select-mobile" data-tool="select" title="Pilih">
                            <i class="bi bi-cursor"></i>
                        </button>
                        <button type="button" class="btn btn-outline-primary" id="tool-pen-mobile" data-tool="pen" title="Pena">
                            <i class="bi bi-pen"></i>
                        </button>
                    </div>
                    {{-- Hidden inputs with fixed values --}}
                    <input type="hidden" id="annotation-color-mobile" value="#000000">
                    <select id="annotation-size-mobile" class="form-select form-select-sm" style="width: 75px;">
                        <option value="1">Sangat Tipis</option>
                        <option value="2" selected>Tipis</option>
                        <option value="3">Sedang</option>
                    </select>
                    <div class="btn-group btn-group-sm">
                        <button type="button" class="btn btn-outline-secondary" id="annotation-undo-mobile" title="Undo">
                            <i class="bi bi-arrow-counterclockwise"></i>
                        </button>
                        <button type="button" class="btn btn-outline-danger" id="annotation-clear-mobile" title="Hapus">
                            <i class="bi bi-eraser"></i>
                        </button>
                        <button type="button" class="btn btn-primary" id="annotation-save-mobile" title="Simpan">
                            <i class="bi bi-save"></i> Simpan
                        </button>
                    </div>
                </div>
            </div>
            {{-- Desktop --}}
            <div class="d-none d-md-flex justify-content-between align-items-center flex-wrap gap-2">
                <div class="btn-group btn-group-sm">
                    <button type="button" class="btn btn-outline-secondary active" id="tool-select" data-tool="select" title="Pilih">
                        <i class="bi bi-cursor"></i>
                    </button>
                    <button type="button" class="btn btn-outline-primary" id="tool-pen" data-tool="pen" title="Pena Tanda Tangan">
                        <i class="bi bi-pen"></i>
                    </button>
                </div>
                {{-- Hidden input with fixed black color --}}
                <input type="hidden" id="annotation-color" value="#000000">
                <div class="d-flex align-items-center gap-2">
                    <select id="annotation-size" class="form-select form-select-sm" style="width: 90px;">
                        <option value="1">Sangat Tipis</option>
                        <option value="2" selected>Tipis</option>
                        <option value="3">Sedang</option>
                    </select>
                </div>
                <div class="btn-group btn-group-sm">
                    <button type="button" class="btn btn-outline-secondary" id="annotation-undo" title="Undo">
                        <i class="bi bi-arrow-counterclockwise"></i>
                    </button>
                    <button type="button" class="btn btn-outline-danger" id="annotation-clear" title="Hapus Semua">
                        <i class="bi bi-eraser"></i>
                    </button>
                    <button type="button" class="btn btn-primary" id="annotation-save" title="Simpan Tanda Tangan">
                        <i class="bi bi-save"></i> Simpan
                    </button>
                </div>
            </div>
            @else
            {{-- APPROVER MODE: Full toolbar with all tools --}}
            {{-- Mobile: 2 rows layout --}}
            <div class="d-block d-md-none">
                {{-- Row 1: Drawing Tools --}}
                <div class="d-flex justify-content-center mb-2">
                    <div class="btn-group btn-group-sm">
                        <button type="button" class="btn btn-outline-secondary active" id="tool-select-mobile" data-tool="select" title="Pilih">
                            <i class="bi bi-cursor"></i>
                        </button>
                        <button type="button" class="btn btn-outline-primary" id="tool-pen-mobile" data-tool="pen" title="Pena">
                            <i class="bi bi-pen"></i>
                        </button>
                        <button type="button" class="btn btn-outline-warning" id="tool-highlight-mobile" data-tool="highlight" title="Highlight">
                            <i class="bi bi-highlighter"></i>
                        </button>
                        <button type="button" class="btn btn-outline-danger" id="tool-underline-mobile" data-tool="underline" title="Coret">
                            <i class="bi bi-slash-lg"></i>
                        </button>
                        <button type="button" class="btn btn-outline-success" id="tool-text-mobile" data-tool="text" title="Teks">
                            <i class="bi bi-fonts"></i>
                        </button>
                        <button type="button" class="btn btn-outline-info" id="tool-arrow-mobile" data-tool="arrow" title="Panah">
                            <i class="bi bi-arrow-up-right"></i>
                        </button>
                    </div>
                </div>
                {{-- Row 2: Color, Size, Actions --}}
                <div class="d-flex justify-content-center align-items-center gap-2 flex-wrap">
                    <input type="color" id="annotation-color-mobile" value="#ff0000" class="form-control form-control-color p-0" style="width: 32px; height: 32px;" title="Warna">
                    <select id="annotation-size-mobile" class="form-select form-select-sm" style="width: 75px;">
                        <option value="2">Tipis</option>
                        <option value="4" selected>Sedang</option>
                        <option value="8">Tebal</option>
                    </select>
                    <div class="btn-group btn-group-sm">
                        <button type="button" class="btn btn-outline-secondary" id="annotation-undo-mobile" title="Undo">
                            <i class="bi bi-arrow-counterclockwise"></i>
                        </button>
                        <button type="button" class="btn btn-outline-danger" id="annotation-clear-mobile" title="Hapus">
                            <i class="bi bi-eraser"></i>
                        </button>
                        <button type="button" class="btn btn-primary" id="annotation-save-mobile" title="Simpan">
                            <i class="bi bi-save"></i>
                        </button>
                    </div>
                </div>
            </div>

            {{-- Desktop: Single row layout --}}
            <div class="d-none d-md-flex justify-content-between align-items-center flex-wrap gap-2">
                {{-- Drawing Tools --}}
                <div class="btn-group btn-group-sm">
                    <button type="button" class="btn btn-outline-secondary active" id="tool-select" data-tool="select" title="Pilih">
                        <i class="bi bi-cursor"></i>
                    </button>
                    <button type="button" class="btn btn-outline-primary" id="tool-pen" data-tool="pen" title="Pena">
                        <i class="bi bi-pen"></i>
                    </button>
                    <button type="button" class="btn btn-outline-warning" id="tool-highlight" data-tool="highlight" title="Highlight">
                        <i class="bi bi-highlighter"></i>
                    </button>
                    <button type="button" class="btn btn-outline-danger" id="tool-underline" data-tool="underline" title="Coret">
                        <i class="bi bi-slash-lg"></i>
                    </button>
                    <button type="button" class="btn btn-outline-success" id="tool-text" data-tool="text" title="Teks">
                        <i class="bi bi-fonts"></i>
                    </button>
                    <button type="button" class="btn btn-outline-info" id="tool-arrow" data-tool="arrow" title="Panah">
                        <i class="bi bi-arrow-up-right"></i>
                    </button>
                </div>

                {{-- Color & Size --}}
                <div class="d-flex align-items-center gap-2">
                    <input type="color" id="annotation-color" value="#ff0000" class="form-control form-control-color p-0" style="width: 28px; height: 28px;" title="Warna">
                    <select id="annotation-size" class="form-select form-select-sm" style="width: 70px;">
                        <option value="2">Tipis</option>
                        <option value="4" selected>Sedang</option>
                        <option value="8">Tebal</option>
                    </select>
                </div>

                {{-- Actions --}}
                <div class="btn-group btn-group-sm">
                    <button type="button" class="btn btn-outline-secondary" id="annotation-undo" title="Undo">
                        <i class="bi bi-arrow-counterclockwise"></i>
                    </button>
                    <button type="button" class="btn btn-outline-danger" id="annotation-clear" title="Hapus Semua">
                        <i class="bi bi-eraser"></i>
                    </button>
                    <button type="button" class="btn btn-primary" id="annotation-save" title="Simpan Anotasi">
                        <i class="bi bi-save"></i> Simpan
                    </button>
                </div>
            </div>
            @endif
        </div>
        @endif

        {{-- Info banner for creator when there's annotation --}}
        @if($isCreator && ($pdfToShow !== 'current'))
        <div class="alert alert-warning mb-0 rounded-0 py-2 creator-info-banner">
            <i class="bi bi-info-circle me-2"></i>
            <strong>Dokumen ini telah diberikan koreksi/anotasi oleh atasan.</strong>
            Silakan periksa anotasi dan upload revisi jika diperlukan.
        </div>
        @endif

        <div class="card-body p-0" style="background-color: #525659; text-align: center; position: relative;" id="pdf-container">
            @if(!empty($surat['file_current']) || !empty($surat['file_annotated']))
            {{-- PDF halaman akan digenerate di sini oleh JS (multi-canvas, ditumpuk & di-scroll) --}}
            <div id="pdf-wrapper" style="display: none;"></div>

            {{-- Loading --}}
            <div id="pdf-loading" class="d-flex align-items-center justify-content-center" style="height: 300px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #525659; z-index: 10;">
                <div>
                    <div class="spinner-border text-light" role="status"></div>
                    <p class="mt-2 text-white-50">Memuat PDF...</p>
                </div>
            </div>
            @else
            <div class="text-center d-flex align-items-center justify-content-center h-100">
                <div class="text-white-50">
                    <i class="bi bi-file-earmark-x" style="font-size: 4rem;"></i>
                    <p class="mt-3">Tidak ada file yang tersedia</p>
                </div>
            </div>
            @endif
        </div>

        {{-- Page Indicator - Outside container at bottom (sekarang scroll-based) --}}
        @if(!empty($surat['file_current']) || !empty($surat['file_annotated']))
        <div id="pdf-nav" style="display: none;">

            <div class="d-flex justify-content-center align-items-center gap-3">
                <button type="button" class="btn btn-sm btn-light" id="pdf-prev-page">
                    <i class="bi bi-chevron-left"></i>
                </button>
                <span class="text-white" id="pdf-page-info">Page 1 / 1</span>
                <button type="button" class="btn btn-sm btn-light" id="pdf-next-page">
                    <i class="bi bi-chevron-right"></i>
                </button>
            </div>
        </div>
        @endif
    </div>{{-- End of pdf-preview-reorderable wrapper --}}
</div>

{{-- Text Input Modal for Annotation --}}
<div class="modal fade" id="textInputModal" tabindex="-1">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header py-2">
                <h6 class="modal-title">Tambah Teks</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <textarea id="text-input-content" class="form-control" rows="3" placeholder="Ketik teks anotasi..."></textarea>
            </div>
            <div class="modal-footer py-2">
                <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-sm btn-primary" id="text-input-save">Tambahkan</button>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf-lib/1.17.1/pdf-lib.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', async function() {
        @if(!empty($surat['file_current']) || !empty($surat['file_annotated']))
        // PDF.js config
        pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';

        const nodeApiUrl = '{{ env("NODE_API_URL", "http://localhost:8182") }}';
        const token = '{{ session("jwt_access_token") }}';

        // Fetch presigned URL
        async function fetchPresignedUrl(fileKey) {
            if (!fileKey) return null;
            try {
                const res = await fetch(`${nodeApiUrl}/api/surat-keluar/file-url/${fileKey}`, {
                    headers: {
                        'Authorization': `Bearer ${token}`
                    }
                });
                const result = await res.json();
                return result.data?.url ?? null;
            } catch (err) {
                console.error('Gagal fetch presigned URL:', err);
                return null;
            }
        }

        const [pdfUrlOriginal, pdfUrlAnnotated, pdfUrlNumbered] = await Promise.all([
            fetchPresignedUrl('{{ $surat["file_current"]  ?? "" }}'),
            fetchPresignedUrl('{{ $surat["file_annotated"] ?? "" }}'),
            fetchPresignedUrl('{{ $surat["file_numbered"]  ?? "" }}'),
        ]);

        // Determine initial PDF to load
        let currentPdfVersion = '{{ $pdfToShow }}';
        let pdfUrl;
        if (currentPdfVersion === 'numbered' && pdfUrlNumbered) {
            pdfUrl = pdfUrlNumbered;
        } else if (currentPdfVersion === 'annotated' && pdfUrlAnnotated) {
            pdfUrl = pdfUrlAnnotated;
        } else {
            pdfUrl = pdfUrlOriginal;
        }

        // ============================================================
        // STATE (multi-halaman, scroll mode)
        // ============================================================
        let pdfDoc = null;
        let currentVisiblePage = 1;
        let scale = 1.5;
        let scaleCalculated = false;
        let scrollObserver = null;
        let mainPdfZoomScale = 1.0;

        const pageCanvases = {};           // { pageNum: canvasEl }  -> canvas PDF
        const pageAnnotationCanvases = {}; // { pageNum: canvasEl }  -> canvas anotasi
        const pageWrappers = {};           // { pageNum: wrapperDivEl }

        window.annotations = {}; // Per page annotations - exposed to window for testing
        let annotations = window.annotations;

        // Default to select tool for all modes
        let currentTool = 'select';
        let isDrawing = false;
        let lastX = 0, lastY = 0;
        let currentStroke = null;
        let textPosition = null;
        let activeDrawPage = null; // halaman yang sedang aktif digambar / diberi teks

        // Initialize annotations for all pages
        function initAnnotations(numPages) {
            for (let i = 1; i <= numPages; i++) {
                if (!annotations[i]) annotations[i] = [];
            }
        }

        function calculateFixedScale(page) {
            if (scaleCalculated) return scale;
            const container = document.getElementById('pdf-container');
            const containerWidth = container.clientWidth - 30; // padding
            const defaultViewport = page.getViewport({ scale: 1 });
            const fitScale = containerWidth / defaultViewport.width;
            // Cap between 0.8 and 1.8 for readability
            scale = Math.min(Math.max(fitScale, 0.8), 1.8);
            scaleCalculated = true;
            return scale;
        }

        // ============================================================
        // RENDER SEMUA HALAMAN SEKALIGUS (ditumpuk vertikal, bisa di-scroll)
        // ============================================================
        async function renderAllPages() {
            const wrapper = document.getElementById('pdf-wrapper');
            wrapper.innerHTML = '';
            // reset state per-load
            for (const k in pageCanvases) delete pageCanvases[k];
            for (const k in pageAnnotationCanvases) delete pageAnnotationCanvases[k];
            for (const k in pageWrappers) delete pageWrappers[k];

            for (let num = 1; num <= pdfDoc.numPages; num++) {
                const page = await pdfDoc.getPage(num);
                calculateFixedScale(page);
                const viewport = page.getViewport({ scale });

                const pageWrapper = document.createElement('div');
                pageWrapper.className = 'pdf-page-wrapper';
                pageWrapper.dataset.page = num;

                const canvas = document.createElement('canvas');
                canvas.className = 'pdf-page-canvas';
                canvas.width = viewport.width;
                canvas.height = viewport.height;
                pageWrapper.appendChild(canvas);

                @if($canAnnotate && $canAnnotateOnCurrentPdf)
                const annotCanvas = document.createElement('canvas');
                annotCanvas.className = 'pdf-page-annotation-canvas';
                annotCanvas.style.cursor = '{{ $isSignerMode ? "crosshair" : "default" }}';
                annotCanvas.width = viewport.width;
                annotCanvas.height = viewport.height;
                if (currentTool === 'select') {
                    annotCanvas.classList.add('allow-scroll');
                }
                pageWrapper.appendChild(annotCanvas);
                pageAnnotationCanvases[num] = annotCanvas;
                attachAnnotationEvents(annotCanvas, num);
                @endif

                const badge = document.createElement('div');
                badge.className = 'pdf-page-number-badge';
                badge.textContent = `${num} / ${pdfDoc.numPages}`;
                pageWrapper.appendChild(badge);

                // Set wrapper size based on initial canvas resolution and zoom scale
                pageWrapper.style.width = `${viewport.width * mainPdfZoomScale}px`;
                pageWrapper.style.height = `${viewport.height * mainPdfZoomScale}px`;
                canvas.style.width = '100%';
                canvas.style.height = '100%';
                if (typeof annotCanvas !== 'undefined') {
                    annotCanvas.style.width = '100%';
                    annotCanvas.style.height = '100%';
                }

                wrapper.appendChild(pageWrapper);
                pageCanvases[num] = canvas;
                pageWrappers[num] = pageWrapper;

                const ctx = canvas.getContext('2d');
                await page.render({ canvasContext: ctx, viewport: viewport }).promise;

                @if($canAnnotate && $canAnnotateOnCurrentPdf)
                redrawAnnotations(num);
                @endif
            }

            const loadingEl = document.getElementById('pdf-loading');
            const wrapperEl = document.getElementById('pdf-wrapper');
            const navEl = document.getElementById('pdf-nav');

            if (loadingEl) {
                loadingEl.style.display = 'none';
                loadingEl.style.visibility = 'hidden';
            }
            if (wrapperEl) wrapperEl.style.display = 'flex';
            if (navEl) navEl.style.display = 'block';

            currentVisiblePage = 1;
            document.getElementById('pdf-page-info').textContent = `Page 1 / ${pdfDoc.numPages}`;

            setupScrollObserver();
        }

        // Update indikator "Page X / Y" berdasarkan halaman yang sedang terlihat saat scroll
        function setupScrollObserver() {
            const container = document.getElementById('pdf-container');

            if (scrollObserver) {
                scrollObserver.disconnect();
            }

            scrollObserver = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting && entry.intersectionRatio > 0.5) {
                        currentVisiblePage = parseInt(entry.target.dataset.page);
                        document.getElementById('pdf-page-info').textContent =
                            `Page ${currentVisiblePage} / ${pdfDoc.numPages}`;
                    }
                });
            }, {
                root: container,
                threshold: [0.5]
            });

            Object.values(pageWrappers).forEach(el => scrollObserver.observe(el));
        }

        // Load PDF function
        function loadPdf(url) {
            document.getElementById('pdf-loading').style.display = 'flex';
            document.getElementById('pdf-loading').style.visibility = 'visible';
            document.getElementById('pdf-wrapper').style.display = 'none';
            document.getElementById('pdf-nav').style.display = 'none';
            scaleCalculated = false; // recalculate scale untuk file/versi baru
            mainPdfZoomScale = 1.0;
            const zoomLevelText = document.getElementById('pdf-zoom-level');
            if (zoomLevelText) zoomLevelText.textContent = '100%';

            pdfjsLib.getDocument(url).promise.then(doc => {
                pdfDoc = doc;
                @if($canAnnotate && $canAnnotateOnCurrentPdf)
                initAnnotations(doc.numPages);
                @endif
                renderAllPages();
            }).catch(err => {
                console.error('Error loading PDF:', err);
                document.getElementById('pdf-loading').innerHTML = `
                <div class="text-center">
                    <i class="bi bi-exclamation-triangle text-warning" style="font-size: 3rem;"></i>
                    <p class="mt-2 text-white-50">Gagal memuat PDF</p>
                    <a href="${url}" target="_blank" class="btn btn-sm btn-light mt-2">
                        <i class="bi bi-box-arrow-up-right"></i> Buka di Tab Baru
                    </a>
                </div>
            `;
            });
        }

        // Toggle between versions (numbered, annotated, current)
        document.querySelectorAll('input[name="pdfVersion"]').forEach(radio => {
            radio.addEventListener('change', function() {
                if (this.value === 'numbered' && pdfUrlNumbered) {
                    pdfUrl = pdfUrlNumbered;
                    currentPdfVersion = 'numbered';
                } else if (this.value === 'annotated' && pdfUrlAnnotated) {
                    pdfUrl = pdfUrlAnnotated;
                    currentPdfVersion = 'annotated';
                } else {
                    pdfUrl = pdfUrlOriginal;
                    currentPdfVersion = 'current';
                }
                loadPdf(pdfUrl);
            });
        });

        @if($canAnnotate && $canAnnotateOnCurrentPdf)
        // ============================================================
        // ANOTASI (per-halaman)
        // ============================================================

        // Redraw all annotations untuk satu halaman tertentu
        function redrawAnnotations(pageNum) {
            const canvas = pageAnnotationCanvases[pageNum];
            if (!canvas) return;
            const ctx = canvas.getContext('2d');
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            (annotations[pageNum] || []).forEach(a => drawAnnotation(ctx, a));
        }

        // Draw single annotation
        function drawAnnotation(ctx, annotation) {
            ctx.save();

            if (annotation.type === 'stroke') {
                ctx.beginPath();
                ctx.strokeStyle = annotation.color;
                ctx.lineWidth = annotation.size;
                ctx.lineCap = 'round';
                ctx.lineJoin = 'round';

                if (annotation.tool === 'highlight') {
                    ctx.globalAlpha = 0.08;
                    ctx.lineWidth = annotation.size * 5;
                }

                annotation.points.forEach((point, i) => {
                    if (i === 0) ctx.moveTo(point.x, point.y);
                    else ctx.lineTo(point.x, point.y);
                });
                ctx.stroke();
            } else if (annotation.type === 'text') {
                ctx.font = `bold ${annotation.size * 4}px Arial`;
                ctx.fillStyle = annotation.color;
                ctx.fillText(annotation.text, annotation.x, annotation.y);
            } else if (annotation.type === 'arrow') {
                drawArrow(ctx, annotation.startX, annotation.startY, annotation.endX, annotation.endY, annotation.color, annotation.size);
            }

            ctx.restore();
        }

        // Draw arrow
        function drawArrow(ctx, fromX, fromY, toX, toY, color, size) {
            const headLength = size * 5;
            const angle = Math.atan2(toY - fromY, toX - fromX);

            ctx.beginPath();
            ctx.strokeStyle = color;
            ctx.lineWidth = size;
            ctx.moveTo(fromX, fromY);
            ctx.lineTo(toX, toY);
            ctx.stroke();

            // Arrow head
            ctx.beginPath();
            ctx.fillStyle = color;
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - headLength * Math.cos(angle - Math.PI / 6), toY - headLength * Math.sin(angle - Math.PI / 6));
            ctx.lineTo(toX - headLength * Math.cos(angle + Math.PI / 6), toY - headLength * Math.sin(angle + Math.PI / 6));
            ctx.closePath();
            ctx.fill();
        }

        // Get mouse/touch position relatif terhadap canvas tertentu
        function getPos(canvas, e) {
            const rect = canvas.getBoundingClientRect();
            const scaleX = canvas.width / rect.width;
            const scaleY = canvas.height / rect.height;

            if (e.touches) {
                return {
                    x: (e.touches[0].clientX - rect.left) * scaleX,
                    y: (e.touches[0].clientY - rect.top) * scaleY
                };
            }
            return {
                x: (e.clientX - rect.left) * scaleX,
                y: (e.clientY - rect.top) * scaleY
            };
        }

        // Helper: Get annotation color (supports both mobile and desktop)
        function getAnnotationColor() {
            const desktopColor = document.getElementById('annotation-color');
            const mobileColor = document.getElementById('annotation-color-mobile');
            if (window.innerWidth < 768 && mobileColor) {
                return mobileColor.value;
            }
            return desktopColor ? desktopColor.value : '#ff0000';
        }

        // Helper: Get annotation size (supports both mobile and desktop)
        function getAnnotationSize() {
            const desktopSize = document.getElementById('annotation-size');
            const mobileSize = document.getElementById('annotation-size-mobile');
            if (window.innerWidth < 768 && mobileSize) {
                return parseInt(mobileSize.value);
            }
            return desktopSize ? parseInt(desktopSize.value) : 4;
        }

        // Pasang event mouse/touch untuk satu canvas anotasi milik halaman tertentu
        function attachAnnotationEvents(canvas, pageNum) {
            const ctx = canvas.getContext('2d');

            function startDraw(e) {
                if (currentTool === 'select') return;

                if (currentTool === 'text') {
                    textPosition = getPos(canvas, e);
                    activeDrawPage = pageNum;
                    const textModal = bootstrap.Modal.getOrCreateInstance(document.getElementById('textInputModal'));
                    textModal.show();
                    return;
                }

                isDrawing = true;
                activeDrawPage = pageNum;
                const pos = getPos(canvas, e);
                lastX = pos.x;
                lastY = pos.y;

                if (currentTool === 'arrow') {
                    currentStroke = {
                        type: 'arrow',
                        startX: pos.x,
                        startY: pos.y,
                        endX: pos.x,
                        endY: pos.y,
                        color: getAnnotationColor(),
                        size: getAnnotationSize()
                    };
                } else {
                    currentStroke = {
                        type: 'stroke',
                        tool: currentTool,
                        color: getAnnotationColor(),
                        size: getAnnotationSize(),
                        points: [{
                            x: pos.x,
                            y: pos.y
                        }]
                    };
                }
            }

            function moveDraw(e) {
                if (!isDrawing || activeDrawPage !== pageNum || currentTool === 'select' || currentTool === 'text') return;

                const pos = getPos(canvas, e);

                if (currentTool === 'arrow') {
                    currentStroke.endX = pos.x;
                    currentStroke.endY = pos.y;
                    redrawAnnotations(pageNum);
                    drawArrow(ctx, currentStroke.startX, currentStroke.startY, pos.x, pos.y, currentStroke.color, currentStroke.size);
                } else {
                    ctx.beginPath();
                    ctx.strokeStyle = currentStroke.color;
                    ctx.lineWidth = currentStroke.size;
                    ctx.lineCap = 'round';

                    if (currentTool === 'highlight') {
                        ctx.globalAlpha = 0.08;
                        ctx.lineWidth = currentStroke.size * 5;
                    }

                    ctx.moveTo(lastX, lastY);
                    ctx.lineTo(pos.x, pos.y);
                    ctx.stroke();
                    ctx.globalAlpha = 1;

                    currentStroke.points.push({
                        x: pos.x,
                        y: pos.y
                    });
                    lastX = pos.x;
                    lastY = pos.y;
                }
            }

            function endDraw() {
                if (isDrawing && currentStroke && activeDrawPage === pageNum) {
                    if (!annotations[pageNum]) annotations[pageNum] = [];
                    annotations[pageNum].push(currentStroke);
                    currentStroke = null;
                }
                isDrawing = false;
                activeDrawPage = null;
            }

            canvas.addEventListener('mousedown', startDraw);
            canvas.addEventListener('mousemove', moveDraw);
            canvas.addEventListener('mouseup', endDraw);
            canvas.addEventListener('mouseout', endDraw);

            canvas.addEventListener('touchstart', function(e) {
                e.preventDefault();
                startDraw(e);
            }, { passive: false });

            canvas.addEventListener('touchmove', function(e) {
                e.preventDefault();
                moveDraw(e);
            }, { passive: false });

            canvas.addEventListener('touchend', function(e) {
                e.preventDefault();
                endDraw();
            }, { passive: false });

            canvas.addEventListener('touchcancel', endDraw);
        }

        // Sync color/size between mobile and desktop
        function syncColorAndSize() {
            const desktopColor = document.getElementById('annotation-color');
            const mobileColor = document.getElementById('annotation-color-mobile');
            const desktopSize = document.getElementById('annotation-size');
            const mobileSize = document.getElementById('annotation-size-mobile');

            desktopColor?.addEventListener('change', function() {
                if (mobileColor) mobileColor.value = this.value;
            });
            mobileColor?.addEventListener('change', function() {
                if (desktopColor) desktopColor.value = this.value;
            });
            desktopSize?.addEventListener('change', function() {
                if (mobileSize) mobileSize.value = this.value;
            });
            mobileSize?.addEventListener('change', function() {
                if (desktopSize) desktopSize.value = this.value;
            });
        }
        syncColorAndSize();

        // Tool selection (handles both mobile and desktop)
        document.querySelectorAll('[data-tool]').forEach(btn => {
            btn.addEventListener('click', function() {
                document.querySelectorAll('[data-tool]').forEach(b => b.classList.remove('active'));
                this.classList.add('active');
                // Also activate the corresponding tool on the other view
                const tool = this.dataset.tool;
                document.querySelectorAll(`[data-tool="${tool}"]`).forEach(b => b.classList.add('active'));
                currentTool = tool;

                const cursorStyle = currentTool === 'select' ? 'default' : (currentTool === 'text' ? 'text' : 'crosshair');

                // Terapkan ke SEMUA canvas anotasi (semua halaman)
                Object.values(pageAnnotationCanvases).forEach(canvas => {
                    canvas.style.cursor = cursorStyle;
                    if (currentTool === 'select') {
                        canvas.classList.add('allow-scroll');
                    } else {
                        canvas.classList.remove('allow-scroll');
                    }
                });
            });
        });

        // Text input save
        document.getElementById('text-input-save')?.addEventListener('click', function() {
            const text = document.getElementById('text-input-content').value.trim();
            if (text && textPosition && activeDrawPage) {
                const pageNum = activeDrawPage;
                if (!annotations[pageNum]) annotations[pageNum] = [];
                annotations[pageNum].push({
                    type: 'text',
                    x: textPosition.x,
                    y: textPosition.y,
                    text: text,
                    color: getAnnotationColor(),
                    size: getAnnotationSize()
                });
                redrawAnnotations(pageNum);
            }
            document.getElementById('text-input-content').value = '';
            textPosition = null;
            activeDrawPage = null;
            bootstrap.Modal.getOrCreateInstance(document.getElementById('textInputModal')).hide();
        });

        // Undo (desktop and mobile) - berlaku untuk halaman yang sedang terlihat
        function handleUndo() {
            const pageNum = currentVisiblePage;
            if (annotations[pageNum] && annotations[pageNum].length > 0) {
                annotations[pageNum].pop();
                redrawAnnotations(pageNum);
            }
        }
        document.getElementById('annotation-undo')?.addEventListener('click', handleUndo);
        document.getElementById('annotation-undo-mobile')?.addEventListener('click', handleUndo);

        // Clear (desktop and mobile) - berlaku untuk halaman yang sedang terlihat
        function handleClear() {
            const pageNum = currentVisiblePage;
            Swal.fire({
                title: 'Hapus Semua Anotasi?',
                text: `Semua anotasi pada halaman ${pageNum} akan dihapus.`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#dc3545',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Ya, Hapus!',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    annotations[pageNum] = [];
                    redrawAnnotations(pageNum);
                    Swal.fire({
                        icon: 'success',
                        title: 'Terhapus!',
                        text: `Semua anotasi pada halaman ${pageNum} telah dihapus.`,
                        timer: 1500,
                        showConfirmButton: false
                    });
                }
            });
        }
        document.getElementById('annotation-clear')?.addEventListener('click', handleClear);
        document.getElementById('annotation-clear-mobile')?.addEventListener('click', handleClear);

        // Save annotations as new PDF file (desktop and mobile)
        async function handleSave(btn) {
            btn.disabled = true;
            btn.innerHTML = '<span class="spinner-border spinner-border-sm"></span>';

            try {
                // Check if there are any annotations
                let hasAnnotations = false;
                for (let p in annotations) {
                    if (annotations[p] && annotations[p].length > 0) {
                        hasAnnotations = true;
                        break;
                    }
                }

                if (!hasAnnotations) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Tidak Ada Anotasi',
                        text: 'Silakan gambar anotasi terlebih dahulu.',
                        confirmButtonColor: '#198754'
                    });
                    btn.disabled = false;
                    btn.innerHTML = '<i class="bi bi-save"></i>';
                    return;
                }

                // Create a new PDF with annotations burned in
                const {
                    PDFDocument,
                    rgb,
                    StandardFonts
                } = PDFLib;

                // Fetch the correct PDF for annotation base
                const pdfUrlForAnnotation = @if($canForwardPaurmin || $canForwardKasmin || $canSignPangwapang)(pdfUrlAnnotated || pdfUrlOriginal) @else pdfUrlOriginal @endif;
                const existingPdfBytes = await fetch(pdfUrlForAnnotation).then(res => res.arrayBuffer());
                const pdfDocLib = await PDFDocument.load(existingPdfBytes);
                const pages = pdfDocLib.getPages();

                // Embed font for text annotations
                const font = await pdfDocLib.embedFont(StandardFonts.Helvetica);

                console.log('Annotations to save:', annotations);

                // Draw annotations on each page (pakai dimensi canvas MASING-MASING halaman)
                for (let pageIdx = 0; pageIdx < pages.length; pageIdx++) {
                    const page = pages[pageIdx];
                    const pageNum = pageIdx + 1;
                    const pageAnnotations = annotations[pageNum] || [];
                    const canvasForPage = pageCanvases[pageNum];

                    if (!canvasForPage || pageAnnotations.length === 0) continue;

                    const canvasWidth = canvasForPage.width;
                    const canvasHeight = canvasForPage.height;

                    const {
                        width: pdfWidth,
                        height: pdfHeight
                    } = page.getSize();

                    console.log(`Page ${pageNum} - PDF size: ${pdfWidth} x ${pdfHeight}, Annotations: ${pageAnnotations.length}`);

                    // Scale factor from canvas to PDF coordinates
                    const scaleX = pdfWidth / canvasWidth;
                    const scaleY = pdfHeight / canvasHeight;

                    pageAnnotations.forEach((annotation, idx) => {
                        console.log(`Drawing annotation ${idx} on page ${pageNum}:`, annotation);
                        const color = hexToRgb(annotation.color || '#ff0000');

                        if (annotation.type === 'stroke' && annotation.points && annotation.points.length > 1) {
                            const thickness = (annotation.size || 2) * Math.min(scaleX, scaleY);
                            const lineThickness = annotation.tool === 'highlight' ? thickness * 5 : thickness;
                            const lineOpacity = annotation.tool === 'highlight' ? 0.3 : 1;

                            for (let i = 1; i < annotation.points.length; i++) {
                                const p1 = annotation.points[i - 1];
                                const p2 = annotation.points[i];

                                const x1 = p1.x * scaleX;
                                const y1 = pdfHeight - (p1.y * scaleY);
                                const x2 = p2.x * scaleX;
                                const y2 = pdfHeight - (p2.y * scaleY);

                                page.drawLine({
                                    start: { x: x1, y: y1 },
                                    end: { x: x2, y: y2 },
                                    thickness: lineThickness,
                                    color: rgb(color.r / 255, color.g / 255, color.b / 255),
                                    opacity: lineOpacity
                                });
                            }
                        } else if (annotation.type === 'text' && annotation.text) {
                            const fontSize = (annotation.size || 4) * 4 * Math.min(scaleX, scaleY);
                            const x = annotation.x * scaleX;
                            const y = pdfHeight - (annotation.y * scaleY);

                            page.drawText(annotation.text, {
                                x: x,
                                y: y,
                                size: Math.max(8, fontSize),
                                font: font,
                                color: rgb(color.r / 255, color.g / 255, color.b / 255)
                            });
                        } else if (annotation.type === 'arrow') {
                            const thickness = (annotation.size || 2) * Math.min(scaleX, scaleY);
                            const x1 = annotation.startX * scaleX;
                            const y1 = pdfHeight - (annotation.startY * scaleY);
                            const x2 = annotation.endX * scaleX;
                            const y2 = pdfHeight - (annotation.endY * scaleY);

                            page.drawLine({
                                start: { x: x1, y: y1 },
                                end: { x: x2, y: y2 },
                                thickness: thickness,
                                color: rgb(color.r / 255, color.g / 255, color.b / 255)
                            });

                            const headLength = thickness * 5;
                            const angle = Math.atan2(y1 - y2, x1 - x2);

                            const headX1 = x2 + headLength * Math.cos(angle - Math.PI / 6);
                            const headY1 = y2 + headLength * Math.sin(angle - Math.PI / 6);
                            const headX2 = x2 + headLength * Math.cos(angle + Math.PI / 6);
                            const headY2 = y2 + headLength * Math.sin(angle + Math.PI / 6);

                            page.drawLine({
                                start: { x: x2, y: y2 },
                                end: { x: headX1, y: headY1 },
                                thickness: thickness,
                                color: rgb(color.r / 255, color.g / 255, color.b / 255)
                            });
                            page.drawLine({
                                start: { x: x2, y: y2 },
                                end: { x: headX2, y: headY2 },
                                thickness: thickness,
                                color: rgb(color.r / 255, color.g / 255, color.b / 255)
                            });
                        }
                    });
                }

                // Save modified PDF
                const modifiedPdfBytes = await pdfDocLib.save();

                // Convert Uint8Array to base64 safely (handles large files)
                function uint8ArrayToBase64(bytes) {
                    let binary = '';
                    const chunkSize = 8192;
                    for (let i = 0; i < bytes.length; i += chunkSize) {
                        const chunk = bytes.subarray(i, i + chunkSize);
                        binary += String.fromCharCode.apply(null, chunk);
                    }
                    return btoa(binary);
                }

                const base64Pdf = uint8ArrayToBase64(modifiedPdfBytes);
                console.log('PDF base64 length:', base64Pdf.length);

                const response = await fetch('{{ route("surat-keluar-workflow.save-annotated-pdf", $surat["id"]) }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({
                        pdf_data: base64Pdf,
                        annotations: JSON.stringify(annotations)
                    })
                });

                const result = await response.json();

                if (result.success) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Berhasil!',
                        text: 'Anotasi berhasil disimpan sebagai file PDF baru.',
                        confirmButtonColor: '#198754'
                    }).then(() => {
                        window.location.reload();
                    });
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Gagal Menyimpan pdf-preview',
                        text: result.message || 'Terjadi kesalahan yang tidak diketahui.',
                        confirmButtonColor: '#198754'
                    });
                }
            } catch (error) {
                console.error('Error saving annotation:', error);
                Swal.fire({
                    icon: 'error',
                    title: 'Terjadi Kesalahan',
                    text: 'Gagal menyimpan anotasi: ' + error.message,
                    confirmButtonColor: '#198754'
                });
            } finally {
                btn.disabled = false;
                btn.innerHTML = '<i class="bi bi-save"></i>';
            }
        }

        // Event listeners for save buttons (desktop and mobile)
        document.getElementById('annotation-save')?.addEventListener('click', function() {
            handleSave(this);
        });
        document.getElementById('annotation-save-mobile')?.addEventListener('click', function() {
            handleSave(this);
        });

        // Helper: hex to RGB
        function hexToRgb(hex) {
            const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
            return result ? {
                r: parseInt(result[1], 16),
                g: parseInt(result[2], 16),
                b: parseInt(result[3], 16)
            } : {
                r: 255,
                g: 0,
                b: 0
            };
        }
        @endif

        // Initial load
        loadPdf(pdfUrl);

        // Page navigation - sekarang "scroll ke halaman terkait", bukan render ulang
        document.getElementById('pdf-prev-page')?.addEventListener('click', function() {
            const target = Math.max(1, currentVisiblePage - 1);
            pageWrappers[target]?.scrollIntoView({ behavior: 'smooth', block: 'start' });
        });

        document.getElementById('pdf-next-page')?.addEventListener('click', function() {
            if (!pdfDoc) return;
            const target = Math.min(pdfDoc.numPages, currentVisiblePage + 1);
            pageWrappers[target]?.scrollIntoView({ behavior: 'smooth', block: 'start' });
        });

        // Scale tetap fixed per-load, tidak berubah saat resize
        // Ini memastikan anotasi tidak bergeser

        // ============================================================
        // ZOOM AND PANNING
        // ============================================================
        const containerEl = document.getElementById('pdf-container');
        
        function updateMainPdfZoom() {
            if (mainPdfZoomScale > 3.0) mainPdfZoomScale = 3.0;
            if (mainPdfZoomScale < 0.25) mainPdfZoomScale = 0.25;
            
            const zoomLevelText = document.getElementById('pdf-zoom-level');
            if (zoomLevelText) zoomLevelText.textContent = Math.round(mainPdfZoomScale * 100) + '%';
            
            Object.values(pageWrappers).forEach(wrap => {
                const canvas = wrap.querySelector('.pdf-page-canvas');
                const annotCanvas = wrap.querySelector('.pdf-page-annotation-canvas');
                if (canvas) {
                    wrap.style.width = `${canvas.width * mainPdfZoomScale}px`;
                    wrap.style.height = `${canvas.height * mainPdfZoomScale}px`;
                    canvas.style.width = '100%';
                    canvas.style.height = '100%';
                    if (annotCanvas) {
                        annotCanvas.style.width = '100%';
                        annotCanvas.style.height = '100%';
                    }
                }
            });
            
            if (mainPdfZoomScale > 1.0) {
                containerEl.style.cursor = 'grab';
            } else {
                containerEl.style.cursor = 'auto';
            }
        }

        document.getElementById('pdf-zoom-in')?.addEventListener('click', function() {
            if (mainPdfZoomScale < 3.0) {
                mainPdfZoomScale += 0.25;
                updateMainPdfZoom();
            }
        });

        document.getElementById('pdf-zoom-out')?.addEventListener('click', function() {
            if (mainPdfZoomScale > 0.25) {
                mainPdfZoomScale -= 0.25;
                updateMainPdfZoom();
            }
        });

        // Panning (Drag to Scroll)
        let isMainPanning = false;
        let startMainX, startMainY, scrollMainLeft, scrollMainTop;

        containerEl.addEventListener('mousedown', (e) => {
            // Prevent panning if we are drawing annotations
            if (currentTool !== 'select' && '{{ $canAnnotate && $canAnnotateOnCurrentPdf }}' === '1') {
                return;
            }
            if (mainPdfZoomScale > 1.0) {
                isMainPanning = true;
                containerEl.style.cursor = 'grabbing';
                startMainX = e.pageX - containerEl.offsetLeft;
                startMainY = e.pageY - containerEl.offsetTop;
                scrollMainLeft = containerEl.scrollLeft;
                scrollMainTop = containerEl.scrollTop;
            }
        });

        containerEl.addEventListener('mouseleave', () => {
            isMainPanning = false;
            if (mainPdfZoomScale > 1.0) containerEl.style.cursor = 'grab';
        });

        containerEl.addEventListener('mouseup', () => {
            isMainPanning = false;
            if (mainPdfZoomScale > 1.0) containerEl.style.cursor = 'grab';
        });

        containerEl.addEventListener('mousemove', (e) => {
            if (!isMainPanning) return;
            e.preventDefault();
            const x = e.pageX - containerEl.offsetLeft;
            const y = e.pageY - containerEl.offsetTop;
            const walkX = (x - startMainX) * 1.5;
            const walkY = (y - startMainY) * 1.5;
            containerEl.scrollLeft = scrollMainLeft - walkX;
            containerEl.scrollTop = scrollMainTop - walkY;
        });

        @endif
    });
</script>
@endpush