{{-- PDF Preview Card with Inline Annotation --}}
@php
    // Calculate permissions first
    $isCreator = auth()->id() === $surat->created_by;
    $canApprove = $surat->canApprove(auth()->user());
    $canSign = $surat->canSign(auth()->user());
    $canForwardPaurmin = $surat->canForwardAsPaurmin(auth()->user());
    $canForwardKasmin = $surat->canForwardAsKasmin(auth()->user());
    $canApproveAsWapang = $surat->canApproveAsWapang(auth()->user());
    $canSignPangwapang = $surat->canSignAsPangwapang(auth()->user());
    $canAnnotate = $canApprove || $canSign || $canForwardPaurmin || $canForwardKasmin || $canApproveAsWapang || $canSignPangwapang;
    // Untuk penandatangan: hanya boleh pena hitam tipis (untuk tanda tangan)
    $isSignerMode = ($canSign || $canSignPangwapang) && !$canApprove && !$canForwardPaurmin && !$canForwardKasmin && !$canApproveAsWapang;

    // Determine which PDF to show (priority: numbered > annotated > current):
    // - If file_numbered exists (after TU numbering), show numbered version
    // - If file_annotated exists, show annotated version
    // - Otherwise show file_current
    if ($surat->file_numbered) {
        $pdfToShow = 'numbered';
        $pdfVersionLabel = 'Versi Final (dengan Nomor Surat)';
        $annotatedTabLabel = 'Ditandatangani';
    } elseif ($surat->file_annotated) {
        $pdfToShow = 'annotated';
        // Label berbeda: untuk signer = "Tanda Tangan", untuk lainnya = "Anotasi/Koreksi"
        if ($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';
    }

    // Siapa yang bisa annotate di file annotated:
    // - PAURMIN/KASMIN (untuk koreksi)
    // - Pangwapang signer (untuk TTD)
    // - Regular signer (untuk TTD) - PENTING: signer harus bisa TTD di file yang sudah ada anotasi counter paraf
    // Approver (counter paraf) hanya bisa annotate di file current
    $canAnnotateOnCurrentPdf = ($canForwardPaurmin || $canForwardKasmin || $canSignPangwapang || $canSign)
        ? ($pdfToShow === 'current' || $pdfToShow === 'annotated')
        : ($pdfToShow === 'current');

    // Cache-bust untuk preview PDF (hindari Blade inline di JS yang bisa cause SyntaxError)
    $pdfViewUrl = route('surat-keluar-workflow.view-pdf', ['surat' => $surat]);
    $cacheBustTs = $surat->updated_at ? $surat->updated_at->timestamp : now()->timestamp;
@endphp

@push('styles')
<style>
    /* PDF container - constrained height with internal scrolling */
    #pdf-container {
        min-height: 500px;
        height: calc(100vh - 250px);
        overflow-y: auto;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 15px;
    }
    #pdf-pages-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        width: 100%;
    }
    .pdf-page-wrapper {
        position: relative;
        display: inline-block;
        margin: 0 auto;
    }
    .pdf-page-canvas {
        display: block;
        box-shadow: 0 0 10px rgba(0,0,0,0.5);
    }
    .annotation-canvas-overlay {
        position: absolute;
        top: 0;
        left: 0;
        touch-action: none;
    }
    .annotation-canvas-overlay.allow-scroll {
        touch-action: pan-x pan-y;
        pointer-events: none;
    }
    #pdf-loading[style*="display: none"] {
        display: none !important;
    }
    /* Page navigation - outside container, 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 {
            min-height: 350px;
            height: 60vh;
            max-height: none; /* Remove max-height limit */
        }
    }
    @media (max-width: 767.98px) {
        #pdf-container {
            min-height: 450px;
            height: 70vh;
            max-height: 600px;
            padding: 10px;
        }
    }
    /* Mobile landscape */
    @media (max-width: 767.98px) and (orientation: landscape) {
        #pdf-container {
            min-height: 250px;
            height: 55vh;
            max-height: none;
        }
    }
    @media (max-width: 575.98px) {
        #pdf-container {
            min-height: 400px;
            height: 65vh;
            max-height: 500px;
        }
    }
    /* Small mobile landscape */
    @media (max-width: 575.98px) and (orientation: landscape) {
        #pdf-container {
            min-height: 200px;
            height: 50vh;
            max-height: none;
        }
    }

    /* Tablet landscape - move annotation toolbar to bottom + full height PDF */
    @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;
        }
        /* Constrained height for PDF */
        #pdf-container {
            min-height: 500px;
            height: calc(100vh - 250px);
        }
    }

    /* Portrait tablet and mobile - move annotation toolbar to bottom + full height PDF */
    @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;
        }
        /* Constrained height for PDF */
        #pdf-container {
            min-height: 500px;
            height: 70vh;
        }
    }
</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="btn-group btn-group-sm">
            @if($surat->file_current || $surat->file_annotated || $surat->file_numbered)
                <a href="{{ route('surat-keluar-workflow.download-pdf', $surat) }}"
                   class="btn btn-light"
                   title="Download">
                    <i class="bi bi-download"></i> Download
                </a>
            @endif
        </div>
    </div>

    {{-- Toggle between versions (if multiple exist) --}}
    @if(($surat->file_annotated && $surat->file_current) || $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($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($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 && !$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($surat->file_current || $surat->file_annotated || $surat->file_numbered)
            {{-- Pages are rendered dynamically by JS (one canvas per page for scrollable view) --}}
            <div id="pdf-pages-container" 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 info bar - shows total page count --}}
    @if($surat->file_current || $surat->file_annotated || $surat->file_numbered)
    <div id="pdf-nav" style="display: none;">
        <div class="d-flex justify-content-center align-items-center gap-3">
            <span class="text-white small" id="pdf-page-info"></span>
        </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', function() {
    @if($surat->file_current || $surat->file_annotated || $surat->file_numbered)
    // PDF.js config
    pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';

    // URL for all versions - cache-bust dengan updated_at agar preview final bernomor selalu fresh setelah edit
    const pdfBaseUrl = {!! json_encode($pdfViewUrl) !!};
    const cacheBust = '&_t=' + {{ $cacheBustTs }};
    const pdfUrlOriginal = pdfBaseUrl + '?version=current' + cacheBust;
    const pdfUrlAnnotated = @if($surat->file_annotated) pdfBaseUrl + '?version=annotated' + cacheBust @else null @endif;
    const pdfUrlNumbered = @if($surat->file_numbered) pdfBaseUrl + '?version=numbered' + cacheBust @else null @endif;

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

    // Per-page canvas storage
    const pageCanvasMap = {};   // { pageNum: HTMLCanvasElement } — PDF render canvas
    const annotCanvasMap = {};  // { pageNum: HTMLCanvasElement } — annotation overlay canvas

    // Currently active annotation targets (updated when user interacts with a page's annotation canvas)
    @if($canAnnotate && $canAnnotateOnCurrentPdf)
    let annotationCanvas = null;
    let annotationCtx = null;
    @endif

    let pdfDoc = null;
    let pageNum = 1;

    // Fixed scale - dihitung sekali berdasarkan lebar container
    let scale = 1.5;
    let scaleCalculated = false;

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

    // Annotation state
    // Default to select tool for all modes
    let currentTool = 'select';
    let isDrawing = false;
    let lastX = 0, lastY = 0;
    window.annotations = {}; // Per page annotations - exposed to window for testing
    let annotations = window.annotations; // Local reference
    let currentStroke = null;
    let textPosition = null;

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

    // Render a single page onto a specific canvas element
    function renderPageOnCanvas(num, pageCanvas, annotCanvas) {
        pdfDoc.getPage(num).then(page => {
            calculateFixedScale(page);
            const viewport = page.getViewport({ scale: scale });
            pageCanvas.width = viewport.width;
            pageCanvas.height = viewport.height;
            pageCanvasMap[num] = pageCanvas;

            @if($canAnnotate && $canAnnotateOnCurrentPdf)
            if (annotCanvas) {
                annotCanvas.width = viewport.width;
                annotCanvas.height = viewport.height;
                annotCanvasMap[num] = annotCanvas;
            }
            @endif

            page.render({ canvasContext: pageCanvas.getContext('2d'), viewport }).promise.then(() => {
                if (num === 1) {
                    // First page done — reveal the container
                    const loadingEl = document.getElementById('pdf-loading');
                    const pagesEl = document.getElementById('pdf-pages-container');
                    const navEl = document.getElementById('pdf-nav');
                    if (loadingEl) { loadingEl.style.display = 'none'; loadingEl.style.visibility = 'hidden'; }
                    if (pagesEl) pagesEl.style.display = 'flex';
                    if (navEl) navEl.style.display = 'block';
                }

                @if($canAnnotate && $canAnnotateOnCurrentPdf)
                if (annotCanvas) {
                    // Set active canvas to page 1 initially so existing code (undo/clear/text) works
                    if (num === 1 && !annotationCanvas) {
                        annotationCanvas = annotCanvas;
                        annotationCtx = annotCanvas.getContext('2d');
                        pageNum = 1;
                    }
                    setupAnnotationCanvas(annotCanvas, num);
                    // Redraw any existing annotations on this page (e.g. after version switch)
                    const savedCtx = annotationCtx, savedCanvas = annotationCanvas, savedPage = pageNum;
                    annotationCanvas = annotCanvas; annotationCtx = annotCanvas.getContext('2d'); pageNum = num;
                    redrawAnnotations();
                    annotationCanvas = savedCtx !== null ? savedCanvas : annotCanvas;
                    annotationCtx = savedCtx !== null ? savedCtx : annotCanvas.getContext('2d');
                    pageNum = savedPage;
                }
                @endif
            });
        });
    }

    // Render all pages as stacked canvases (scrollable view)
    function renderAllPages() {
        const container = document.getElementById('pdf-pages-container');
        container.innerHTML = '';
        // Clear page canvas maps
        Object.keys(pageCanvasMap).forEach(k => delete pageCanvasMap[k]);
        @if($canAnnotate && $canAnnotateOnCurrentPdf)
        Object.keys(annotCanvasMap).forEach(k => delete annotCanvasMap[k]);
        annotationCanvas = null;
        annotationCtx = null;
        @endif

        const numPages = pdfDoc.numPages;
        document.getElementById('pdf-page-info').textContent = numPages + ' halaman';

        @if($canAnnotate && $canAnnotateOnCurrentPdf)
        initAnnotations(numPages);
        @endif

        for (let num = 1; num <= numPages; num++) {
            const wrapper = document.createElement('div');
            wrapper.className = 'pdf-page-wrapper';
            wrapper.dataset.page = num;

            const pageCanvas = document.createElement('canvas');
            pageCanvas.className = 'pdf-page-canvas';
            wrapper.appendChild(pageCanvas);

            @if($canAnnotate && $canAnnotateOnCurrentPdf)
            const annotCanvas = document.createElement('canvas');
            annotCanvas.className = 'annotation-canvas-overlay';
            const initCursor = currentTool === 'select' ? 'default' : (currentTool === 'text' ? 'text' : 'crosshair');
            annotCanvas.style.cursor = initCursor;
            if (currentTool === 'select') annotCanvas.classList.add('allow-scroll');
            wrapper.appendChild(annotCanvas);
            @endif

            container.appendChild(wrapper);

            @if($canAnnotate && $canAnnotateOnCurrentPdf)
            renderPageOnCanvas(num, pageCanvas, annotCanvas);
            @else
            renderPageOnCanvas(num, pageCanvas, null);
            @endif
        }
    }

    // Load PDF function
    function loadPdf(url) {
        document.getElementById('pdf-loading').style.display = 'flex';
        document.getElementById('pdf-loading').style.visibility = 'visible';
        document.getElementById('pdf-pages-container').style.display = 'none';
        document.getElementById('pdf-nav').style.display = 'none';
        scaleCalculated = false; // Reset scale for new PDF

        pdfjsLib.getDocument(url).promise.then(doc => {
            pdfDoc = doc;
            pageNum = 1;
            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)
    // Redraw all annotations for current page
    function redrawAnnotations() {
        if (!annotationCtx || !annotationCanvas) return;
        annotationCtx.clearRect(0, 0, annotationCanvas.width, annotationCanvas.height);
        const pageAnnotations = annotations[pageNum] || [];

        pageAnnotations.forEach(annotation => {
            drawAnnotation(annotation);
        });
    }

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

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

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

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

        annotationCtx.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
    function getPos(e) {
        const rect = annotationCanvas.getBoundingClientRect();
        const scaleX = annotationCanvas.width / rect.width;
        const scaleY = annotationCanvas.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');
        // Check which one is visible
        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');
        // Check which one is visible
        if (window.innerWidth < 768 && mobileSize) {
            return parseInt(mobileSize.value);
        }
        return desktopSize ? parseInt(desktopSize.value) : 4;
    }

    // Setup annotation events for a specific page's canvas (called once per page after render)
    function setupAnnotationCanvas(canvas, num) {
        function activate() {
            annotationCanvas = canvas;
            annotationCtx = canvas.getContext('2d');
            pageNum = num;
        }

        canvas.addEventListener('mousedown', function(e) {
            activate();
            if (currentTool === 'select') return;

            if (currentTool === 'text') {
                textPosition = getPos(e);
                const textModal = new bootstrap.Modal(document.getElementById('textInputModal'));
                textModal.show();
                return;
            }

            isDrawing = true;
            const pos = getPos(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 }]
            };
        }
        });

        canvas.addEventListener('mousemove', function(e) {
            if (!isDrawing || currentTool === 'select' || currentTool === 'text') return;
            const pos = getPos(e);
            if (currentTool === 'arrow') {
                currentStroke.endX = pos.x; currentStroke.endY = pos.y;
                redrawAnnotations();
                drawArrow(annotationCtx, currentStroke.startX, currentStroke.startY, pos.x, pos.y, currentStroke.color, currentStroke.size);
            } else {
                annotationCtx.beginPath();
                annotationCtx.strokeStyle = currentStroke.color;
                annotationCtx.lineWidth = currentStroke.size;
                annotationCtx.lineCap = 'round';
                if (currentTool === 'highlight') { annotationCtx.globalAlpha = 0.08; annotationCtx.lineWidth = currentStroke.size * 5; }
                annotationCtx.moveTo(lastX, lastY); annotationCtx.lineTo(pos.x, pos.y); annotationCtx.stroke();
                annotationCtx.globalAlpha = 1;
                currentStroke.points.push({ x: pos.x, y: pos.y });
                lastX = pos.x; lastY = pos.y;
            }
        });

        canvas.addEventListener('mouseup', function() {
            if (isDrawing && currentStroke) {
                if (!annotations[pageNum]) annotations[pageNum] = [];
                annotations[pageNum].push(currentStroke); currentStroke = null;
            }
            isDrawing = false;
        });

        canvas.addEventListener('mouseout', function() {
            if (isDrawing && currentStroke) {
                if (!annotations[pageNum]) annotations[pageNum] = [];
                annotations[pageNum].push(currentStroke); currentStroke = null;
            }
            isDrawing = false;
        });

        canvas.addEventListener('touchstart', function(e) {
            e.preventDefault();
            activate();
            if (currentTool === 'select') return;
            if (currentTool === 'text') {
                textPosition = getPos(e);
                new bootstrap.Modal(document.getElementById('textInputModal')).show();
                return;
            }
            isDrawing = true; const pos = getPos(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 }] };
            }
        }, { passive: false });

        canvas.addEventListener('touchmove', function(e) {
            e.preventDefault();
            if (!isDrawing || currentTool === 'select' || currentTool === 'text') return;
            const pos = getPos(e);
            if (currentTool === 'arrow') {
                currentStroke.endX = pos.x; currentStroke.endY = pos.y;
                redrawAnnotations();
                drawArrow(annotationCtx, currentStroke.startX, currentStroke.startY, pos.x, pos.y, currentStroke.color, currentStroke.size);
            } else {
                annotationCtx.beginPath(); annotationCtx.strokeStyle = currentStroke.color; annotationCtx.lineWidth = currentStroke.size; annotationCtx.lineCap = 'round';
                if (currentTool === 'highlight') { annotationCtx.globalAlpha = 0.08; annotationCtx.lineWidth = currentStroke.size * 5; }
                annotationCtx.moveTo(lastX, lastY); annotationCtx.lineTo(pos.x, pos.y); annotationCtx.stroke();
                annotationCtx.globalAlpha = 1;
                currentStroke.points.push({ x: pos.x, y: pos.y }); lastX = pos.x; lastY = pos.y;
            }
        }, { passive: false });

        canvas.addEventListener('touchend', function(e) {
            e.preventDefault();
            if (isDrawing && currentStroke) { if (!annotations[pageNum]) annotations[pageNum] = []; annotations[pageNum].push(currentStroke); currentStroke = null; }
            isDrawing = false;
        }, { passive: false });

        canvas.addEventListener('touchcancel', function() {
            if (isDrawing && currentStroke) { if (!annotations[pageNum]) annotations[pageNum] = []; annotations[pageNum].push(currentStroke); currentStroke = null; }
            isDrawing = false;
        });
    } // end setupAnnotationCanvas

    // 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 toolCursor = currentTool === 'select' ? 'default' : (currentTool === 'text' ? 'text' : 'crosshair');
            // Update cursor on all annotation canvases
            document.querySelectorAll('.annotation-canvas-overlay').forEach(c => {
                c.style.cursor = toolCursor;
                if (currentTool === 'select') { c.classList.add('allow-scroll'); }
                else { c.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) {
            if (!annotations[pageNum]) annotations[pageNum] = [];
            annotations[pageNum].push({
                type: 'text',
                x: textPosition.x,
                y: textPosition.y,
                text: text,
                color: getAnnotationColor(),
                size: getAnnotationSize()
            });
            redrawAnnotations();
        }
        document.getElementById('text-input-content').value = '';
        textPosition = null;
        bootstrap.Modal.getInstance(document.getElementById('textInputModal')).hide();
    });

    // Undo (desktop and mobile)
    function handleUndo() {
        if (annotations[pageNum] && annotations[pageNum].length > 0) {
            annotations[pageNum].pop();
            redrawAnnotations();
        }
    }
    document.getElementById('annotation-undo')?.addEventListener('click', handleUndo);
    document.getElementById('annotation-undo-mobile')?.addEventListener('click', handleUndo);

    // Clear (desktop and mobile)
    function handleClear() {
        Swal.fire({
            title: 'Hapus Semua Anotasi?',
            text: 'Semua anotasi pada halaman ini akan dihapus.',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#dc3545',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Ya, Hapus!',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if (result.isConfirmed) {
                annotations[pageNum] = [];
                redrawAnnotations();
                Swal.fire({
                    icon: 'success',
                    title: 'Terhapus!',
                    text: 'Semua anotasi pada halaman ini 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)
    let isSavingAnnotations = false;
    async function handleSave(btn) {
        // Pengaman: Prevent double save
        if (isSavingAnnotations) return;
        if (!pdfDoc) {
            Swal.fire({ icon: 'warning', title: 'PDF Belum Siap', text: 'Tunggu PDF selesai dimuat.', confirmButtonColor: '#198754' });
            return;
        }
        isSavingAnnotations = true;
        btn.disabled = true;
        const originalHtml = btn.innerHTML;
        btn.innerHTML = '<span class="spinner-border spinner-border-sm"></span> Menyimpan...';

        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) {
                isSavingAnnotations = false;
                btn.disabled = false;
                btn.innerHTML = originalHtml;
                Swal.fire({
                    icon: 'warning',
                    title: 'Tidak Ada Anotasi',
                    text: 'Silakan gambar anotasi terlebih dahulu.',
                    confirmButtonColor: '#198754'
                });
                return;
            }

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

            // Fetch the correct PDF for annotation base
            // PAURMIN/KASMIN/Pangwapang should use annotated file if exists (contains previous signatures)
            // Regular approvers/signers use original file
            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);

            // Get canvas dimensions for scale calculation (use page 1 as reference)
            const refCanvas = pageCanvasMap[1] || Object.values(pageCanvasMap)[0];
            const canvasWidth = refCanvas ? refCanvas.width : 800;
            const canvasHeight = refCanvas ? refCanvas.height : 1131;

            console.log('Canvas dimensions:', canvasWidth, 'x', canvasHeight);
            console.log('Annotations to save:', annotations);

            // Draw annotations on each page
            for (let pageIdx = 0; pageIdx < pages.length; pageIdx++) {
                const page = pages[pageIdx];
                const pageAnnotations = annotations[pageIdx + 1] || [];
                const { width: pdfWidth, height: pdfHeight } = page.getSize();

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

                // Scale factor from canvas to PDF coordinates
                // Canvas coordinates are at scale 1.5, so we need to convert
                const scaleX = pdfWidth / canvasWidth;
                const scaleY = pdfHeight / canvasHeight;

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

                    if (annotation.type === 'stroke' && annotation.points && annotation.points.length > 1) {
                        // Draw strokes as lines
                        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];

                            // Convert canvas coordinates to PDF coordinates
                            // PDF origin is bottom-left, canvas origin is top-left
                            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);

                        // Draw arrow line
                        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)
                        });

                        // Draw arrow head
                        const headLength = thickness * 5;
                        const angle = Math.atan2(y1 - y2, x1 - x2); // Reversed because PDF Y is inverted

                        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 suratId = '{{ $surat->id }}'; 

            // Sesuaikan URL ini dengan URL dan port API Node.js Anda
            const nodeApiUrl = `http://localhost:8182/api/surat-keluar/${suratId}/save-annotated-pdf`;

            const response = await fetch(nodeApiUrl, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                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 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 {
            isSavingAnnotations = false;
            btn.disabled = false;
            btn.innerHTML = originalHtml;
        }
    }

    // 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);

    // No prev/next navigation — scrollable view shows all pages at once
    @endif
});
</script>
@endpush