{!! Theme::section('pdfsign.menu') !!}

<style type="text/css">
 .box.community-history{display:none;}
 .pdfsign-wrap{max-width:980px;margin:0 auto;}
 .pdfsign-card{background:#fff;/*border:1px solid #ddd;*/ border-radius:10px;padding:2px;}
 .pdfsign-muted{color:#64748b;font-size:13px;}
 .pdfsign-kv{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:6px;font-size:13px;color:#0f172a;}
 .pdfsign-kv .k{color:#64748b;min-width:140px;}
 .pdfsign-viewer{border:1px solid #e2e8f0;border-radius:10px;overflow:hidden;background:#fff;}
 .pdfsign-stage{position:relative;}
 .pdfsign-pages{max-height:72vh;min-height:520px;overflow:auto;background:#f8fafc;padding:10px;}
 .pdfsign-page{position:relative;margin:0 auto 12px auto;display:block;width:max-content;max-width:100%;}
 .pdfsign-page canvas{display:block;background:#fff;border:1px solid #cbd5e1;}
 .pdfsign-boxLayer{position:absolute;inset:0;pointer-events:auto;}
 .pdfsign-box{position:absolute;border:2px solid rgba(156,163,175,.55);background:rgba(156,163,175,.12);box-sizing:border-box;pointer-events:auto;cursor:pointer;}
 .pdfsign-box.assigned{border-color:rgba(245,158,11,.95);background:rgba(245,158,11,.15);cursor:pointer;}
 .pdfsign-box.assigned:hover{box-shadow:0 0 0 3px rgba(245,158,11,.18);}
 .pdfsign-box.selected{border-color:#16a34a;background:rgba(22,163,74,.15);}
 .pdfsign-box.jump-target{border-color:#ff0000;box-shadow:0 0 0 4px rgba(255,0,0,.18);}
 .pdfsign-box.locked{border:0;background:transparent;cursor:not-allowed;opacity:1;}
 .pdfsign-boxBtn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:none;pointer-events:auto;background:#ff0000;color:#fff;border:0;border-radius:6px;padding:6px 10px;font-size:12px;font-weight:700;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.18);z-index:3;}
 .pdfsign-box:not(.locked):hover .pdfsign-boxBtn{display:block;}
 .pdfsign-box.selected .pdfsign-boxBtn{background:#16a34a;}
 .pdfsign-box.locked::after{content:attr(data-tooltip);position:absolute;left:50%;top:-30px;transform:translateX(-50%);background:rgba(15,23,42,.92);color:#fff;padding:4px 8px;border-radius:6px;font-size:12px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s ease;}
 .pdfsign-box.locked:hover::after{opacity:1;}
 .pdfsign-sigPreview{position:absolute;inset:0;background-repeat:no-repeat;background-position:center;background-size:contain;pointer-events:none;z-index:2;}
 .pdfsign-viewer-wrap{position:relative;}
 .pdfsign-viewer-wrap:hover .pdfsign-viewer{border-color:#94a3b8;box-shadow:0 0 0 3px rgba(148,163,184,.25);}
 .pdfsign-hoverHint{
     position:absolute;
     left:50%;
     top:45%;
     transform:translate(-50%,-50%);
     z-index:5;
     display:block;
     text-align:center;
     color:#ff0000;
     font-size:16px;
     font-weight:600;
     line-height:1.25;
     padding:18px 22px;
     background:rgba(229, 231, 235, 0.98);
     border:1px solid #9ca3af;
     border-radius:0;
     box-shadow:0 10px 24px rgba(0,0,0,.18);
     max-width:560px;
     width:calc(100% - 48px);
 }
 .pdfsign-hoverHint a{color:#ff0000;text-decoration:underline;}
 .pdfsign-btn{padding:10px 14px;border-radius:8px;border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;}
 .pdfsign-btn.primary{background:#16a34a;color:#fff;}
 .pdfsign-btn.primary[disabled]{opacity:.55;cursor:not-allowed;}
 .pdfsign-btn.link{background:#f1f5f9;color:#0f172a;border:1px solid #e2e8f0;text-decoration:none;}
 .pdfsign-note{color:#e11d48;font-weight:600;text-align:center;margin:14px 0 6px 0;}
 .pdfsign-note a{color:#e11d48;text-decoration:underline;}
 .pdfsign-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:12px;}
 .pdfsign-center{display:flex;justify-content:center;align-items:center;text-align:center;}
 .pdfsign-bigbtn{width:100%;padding:14px 16px;border-radius:10px;border:0;font-weight:700;font-size:16px;cursor:pointer;}
 .pdfsign-bigbtn.gray{background:#e5e7eb;color:#111827;}
 .pdfsign-bigbtn.red{background:#ff0000;color:#fff;}
 .pdfsign-bigbtn[disabled]{opacity:.6;cursor:not-allowed;}

 .pdfsign-headerRow{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;flex-wrap:wrap;}
 .pdfsign-headerLeft{flex:1;min-width:280px;}
 .pdfsign-headerRight{min-width:320px;max-width:520px;flex:0 1 520px;}

 .pdfsign-topSignBar{display:flex;justify-content:flex-end;gap:26px;flex-wrap:wrap;align-items:flex-start;margin-top:10px;}
 .pdfsign-topSignLeft{text-align:right;}
 .pdfsign-topSignBtn{background:#f97316;color:#fff;border:0;border-radius:4px;padding:10px 18px;font-weight:700;font-size:14px;cursor:pointer;min-width:170px;}
 .pdfsign-topSignBtn[disabled]{opacity:.6;cursor:not-allowed;}
 .pdfsign-topSignPages{margin-top:6px;color:#111827;font-weight:600;text-decoration:none;}
 .pdfsign-topPageNo{margin-top:6px;color:#111827;font-weight:600;}
 .pdfsign-topPageNo .k{color:#111827;font-weight:600;}
</style>

<div style="padding:15px;">
    <div class="pdfsign-wrap">
        @if (session('status'))
            <div style="background:#e7f8ed;border:1px solid #a7e2b9;padding:10px;margin:10px 0;border-radius:8px;">
                {{ session('status') }}
                @if(!empty($downloadUrl) && !empty($hasSignedPdf))
                    <div style="margin-top:10px;">
                        <a class="pdfsign-btn link" href="{{ $downloadUrl }}">Download Signed PDF</a>
                    </div>
                @endif
            </div>
        @endif

        @if ($errors->any())
            <div style="background:#ffecec;border:1px solid #f5aca6;padding:10px;margin:10px 0;border-radius:8px;">
                <ul style="margin:0;padding-left:18px;">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="pdfsign-card">
            @php
                $canSign = !empty($hasSavedSignature) && !empty($hasSignatureArea) && empty($hasSignedPdf);
                $sigAll = !empty($applySignatureAllPages);
                $sigPages = $sigAll ? '' : trim((string)($signatureRequiredPages ?? ''));
            @endphp

            <div class="pdfsign-headerRow">
                <div class="pdfsign-headerLeft">
                    <div style="font-size:14px;color:#0f172a;margin-bottom:10px;">
                        @if(!empty($senderName))
                            <strong>{{ $senderName }}</strong> has sent the following document for your signature
                        @else
                            A document has been sent to you for signature
                        @endif
                    </div>

                    <div class="pdfsign-kv"><div class="k">Document Token ID:</div><div><strong>{{ $token }}</strong></div></div>
                    <div class="pdfsign-kv"><div class="k">Document Title:</div><div><strong>{{ $documentTitle ?: '-' }}</strong></div></div>
                    <div class="pdfsign-kv"><div class="k">Document prepared by:</div><div><strong>{{ !empty($preparedByName) ? $preparedByName : '-' }}</strong></div></div>
                </div>

                <div class="pdfsign-headerRight">
                    @if(empty($hasSignedPdf))
                        <div class="pdfsign-topSignBar" style="margin-top:0;">
                            <div class="pdfsign-topSignLeft">
                                <button type="button" class="pdfsign-topSignBtn" id="jumpToFirstBox" {{ $canSign ? '' : 'disabled' }}>Click here to sign</button>
                                @php
                                    $pageDisplay = $sigAll ? 'All pages' : ($sigPages !== '' ? $sigPages : '-');
                                @endphp
                                @if($sigAll || $sigPages !== '')
                                    <div class="pdfsign-topSignPages"><span style="color:#FF0000">Page No:</span> <strong>{{ $pageDisplay }}</strong></div>
                                @endif
                            </div>
                        </div>
                    @endif
                </div>
            </div>

            <div class="pdfsign-viewer-wrap" style="margin-top:12px;">
                <div class="pdfsign-viewer pdfsign-stage">
                    <div id="pdfPages" class="pdfsign-pages" aria-label="Document preview"></div>
                </div>

                @if(empty($hasSavedSignature) && empty($hasSignedPdf))
                    <div id="sigHoverHint" class="pdfsign-hoverHint" aria-live="polite">
                        Upload or Check Your Signature by Clicking<br>
                        <a href="{{ $mySignatureUrl }}" target="_blank" rel="noopener">My Signature</a>, or <a href="#" id="ignoreHint">Click to Ignore</a>
                    </div>
                @endif
            </div>
            <div class="pdfsign-actions">
                @if(!empty($originalDownloadUrl))
                    <a class="pdfsign-btn link" href="{{ $originalDownloadUrl }}">Download Document</a>
                @endif

                @if(!empty($downloadUrl) && !empty($hasSignedPdf))
                    <a class="pdfsign-btn link" href="{{ $downloadUrl }}">Download Signed PDF</a>
                @endif

                <form method="POST" action="{{ $applyUrl }}" style="margin:0;" id="applyForm">
                    @csrf
                    <input type="hidden" name="placements_json" id="placements_json" value="">
                </form>
            </div>

            @if(empty($hasSignedPdf))
                <div class="pdfsign-note" style="margin-top:14px;">
                    Note: Preview the document, identify the signature area, and click on the highlighted box to sign.
                </div>
            @endif

            <div id="clientMsg" class="pdfsign-muted" style="margin-top:8px;color:#b91c1c;display:none;text-align:center;"></div>

            @if(empty($hasSignedPdf))
                <div class="pdfsign-center" style="margin-top:10px;">
                    <div>
                        <div style="font-size:16px;color:#111827;">Signature Required: <strong>{{ (int)($signTimes ?? 1) }}</strong> times – <strong><span id="signedCount">0</span>/{{ (int)($signTimes ?? 1) }}</strong>.</div>
                        <!--<div class="pdfsign-muted" style="margin-top:6px;">
                            <a href="{{ $originalDownloadUrl ?: ($sourceUrl ?? '#') }}" style="color:#64748b;text-decoration:underline;">Download or preview to verify the document again</a>
                        </div>-->
                    </div>
                </div>
            @endif

            @if(empty($hasSignedPdf))
                <div style="margin-top:14px;">
                    <button type="button" class="pdfsign-bigbtn gray" id="insertHint" {{ $canSign ? '' : 'disabled' }}>Scroll and Click to insert you Signature</button>
                </div>
                <div style="margin-top:12px;">
                    <button type="button" class="pdfsign-bigbtn red" id="saveUpdate" disabled>Save and Update</button>
                </div>
            @endif

            @if(empty($hasSignatureArea))
                <div class="pdfsign-muted" style="margin-top:8px; color:#b91c1c;">
                    Signature area is not defined yet. Please contact the sender.
                </div>
            @elseif(empty($hasSavedSignature))
                <div class="pdfsign-muted" style="margin-top:8px; color:#b91c1c;">
                    You have no saved signature. Please set it in <a href="{{ $mySignatureUrl }}" target="_blank" rel="noopener">My Signature</a>.
                </div>
            @elseif(!empty($hasSignedPdf))
                <div class="pdfsign-muted" style="margin-top:8px;">
                    You already signed this document.
                </div>
            @else
                <div class="pdfsign-muted" style="margin-top:8px;">
                    Signing as: <strong>{{ $signingAs }}</strong>
                </div>
            @endif
        </div>
    </div>
</div>

<script src="/themes/frontend/default/js/pdfsign/pdf.min.js"></script>
<script>
(function(){
    var hint = document.getElementById('sigHoverHint');
    var ignore = document.getElementById('ignoreHint');
    var KEY = 'pdfsign_ignore_signature_hint';

    try {
        if (hint && window.localStorage && localStorage.getItem(KEY) === '1') {
            hint.style.display = 'none';
        }
    } catch (e) {}

    if (hint && ignore) {
        ignore.addEventListener('click', function(e){
            e.preventDefault();
            try { if (window.localStorage) localStorage.setItem(KEY, '1'); } catch (e) {}
            hint.style.display = 'none';
        });
    }
})();
</script>

<script>
(function(){
    // Always load preview from the invite source endpoint so signed/marked logic works.
    const originalPdfUrl = @json($sourceUrl ?? $originalDownloadUrl);
    const allPlacements = @json($allPlacements ?? []);
    const assignedPlacements = @json($assignedPlacements ?? []);
    const lockedPlacementKeys = @json($lockedPlacementKeys ?? []);
    const signatureDataUrl = @json($signatureDataUrl ?? '');
    const requiredSigns = @json((int)($signTimes ?? 1));
    const canSign = @json(!empty($hasSavedSignature) && !empty($hasSignatureArea) && empty($hasSignedPdf));
    const alreadySigned = @json(!empty($hasSignedPdf));

    const pagesEl = document.getElementById('pdfPages');
    const jumpBtn = document.getElementById('jumpToFirstBox');
    const insertHintBtn = document.getElementById('insertHint');
    const saveUpdateBtn = document.getElementById('saveUpdate');
    const countEl = document.getElementById('signedCount');
    const form = document.getElementById('applyForm');
    const placementsInput = document.getElementById('placements_json');

    if (!pagesEl) return;

    const keyOf = (p) => [p.page, p.x, p.y, p.w, p.h, p.canvasW, p.canvasH].join(':');
    const allowedPlacements = (Array.isArray(allPlacements) && allPlacements.length) ? allPlacements : assignedPlacements;
    const allowedSet = new Set((allowedPlacements || []).map(keyOf));
    const lockedSet = new Set((lockedPlacementKeys || []));
    const needed = Math.max(1, Number(requiredSigns || 1));

    let insertMode = false;
    let selected = new Map(); // key -> placement
    let pendingJump = false;

    function showClientMsg(msg) {
        const el = document.getElementById('clientMsg');
        if (!el) return;
        el.textContent = String(msg || '');
        el.style.display = (msg && String(msg).trim() !== '') ? 'block' : 'none';
    }

    function toggleSelectionForBox(boxEl, placement, key) {
        if (!canSign) {
            showClientMsg('You cannot sign right now. Please ensure signature area is defined and you have a saved signature in My Signature.');
            return;
        }
        if (!(typeof signatureDataUrl === 'string' && signatureDataUrl.trim() !== '')) {
            showClientMsg('Please set your signature first in My Signature.');
            return;
        }
        showClientMsg('');
        if (!insertMode) insertMode = true;
        if (selected.size >= needed && !selected.has(key)) return;

        if (selected.has(key)) {
            selected.delete(key);
            boxEl.classList.remove('selected');
            const prev = boxEl.querySelector('.pdfsign-sigPreview');
            if (prev) prev.remove();
            const btn = boxEl.querySelector('.pdfsign-boxBtn');
            if (btn) btn.textContent = 'Add Signature';
        } else {
            selected.set(key, placement);
            boxEl.classList.add('selected');
            const prev = document.createElement('div');
            prev.className = 'pdfsign-sigPreview';
            prev.style.backgroundImage = 'url(' + JSON.stringify(signatureDataUrl) + ')';
            boxEl.appendChild(prev);
            const btn = boxEl.querySelector('.pdfsign-boxBtn');
            if (btn) btn.textContent = 'Remove';
        }

        updateCounter();
    }

    function updateCounter() {
        if (countEl) countEl.textContent = String(selected.size);
        const allSelected = selected.size === needed;

        // Top button: jumps to the first available signature box.
        if (jumpBtn) {
            jumpBtn.disabled = (!canSign) || allSelected;
            jumpBtn.textContent = 'Click here to sign';
        }

        // Grey button: enabled until all required boxes are selected.
        if (insertHintBtn) {
            insertHintBtn.disabled = (!canSign) || allSelected;
            insertHintBtn.textContent = insertMode
                ? (allSelected ? 'All required signature box(es) selected' : 'Click highlighted box(es) to insert your Signature')
                : 'Scroll and Click to insert you Signature';
        }

        // Red button: enabled only when all required boxes are selected.
        if (saveUpdateBtn) saveUpdateBtn.disabled = !(canSign && allSelected);
    }

    function setInsertMode(on) {
        insertMode = !!on;
        updateCounter();
    }

    if (insertHintBtn) {
        insertHintBtn.addEventListener('click', function(){
            if (!canSign) return;
            setInsertMode(true);
            try { pagesEl.scrollIntoView({ behavior: 'smooth', block: 'start' }); } catch(e) {}
        });
    }

    if (jumpBtn) {
        jumpBtn.addEventListener('click', function(){
            if (!canSign) return;
            setInsertMode(true);
            if (!jumpToFirstAvailableBox()) {
                pendingJump = true;
                try { pagesEl.scrollIntoView({ behavior: 'smooth', block: 'start' }); } catch(e) {}
            }
        });
    }

    function jumpToFirstAvailableBox() {
        if (!pagesEl) return false;
        const box = pagesEl.querySelector('.pdfsign-box.assigned:not(.locked)');
        if (!box) return false;

        try {
            const pageWrap = box.closest('.pdfsign-page');
            if (pageWrap && pageWrap.scrollIntoView) {
                pageWrap.scrollIntoView({ behavior: 'smooth', block: 'center' });
            }
        } catch (e) {}

        try {
            box.classList.add('jump-target');
            box.scrollIntoView({ behavior: 'smooth', block: 'center' });
            setTimeout(function(){
                try { box.classList.remove('jump-target'); } catch (e) {}
            }, 2000);
        } catch (e) {}

        return true;
    }

    if (saveUpdateBtn) {
        saveUpdateBtn.addEventListener('click', function(){
            if (!canSign) return;
            if (selected.size !== needed) return;
            const payload = Array.from(selected.values());
            if (placementsInput) placementsInput.value = JSON.stringify(payload);
            if (form) form.submit();
        });
    }

    function renderBoxesForPage(pageWrap, renderW, renderH, pageNo) {
        if (alreadySigned) {
            return;
        }
        const layer = document.createElement('div');
        layer.className = 'pdfsign-boxLayer';
        pageWrap.appendChild(layer);

        const placementsThisPage = (allowedPlacements || []).filter(p => Number(p.page) === Number(pageNo));
        placementsThisPage.forEach((pl) => {
            const canvasW = Number(pl.canvasW || 0);
            const canvasH = Number(pl.canvasH || 0);
            if (!canvasW || !canvasH) return;
            const sx = renderW / canvasW;
            const sy = renderH / canvasH;

            const box = document.createElement('div');
            box.className = 'pdfsign-box';
            const k = keyOf(pl);
            const isAllowed = allowedSet.has(k);
            if (isAllowed) box.classList.add('assigned');
            const isLocked = lockedSet.has(k);
            if (isLocked) {
                box.classList.add('locked');
                box.setAttribute('title', 'Already signed');
                box.setAttribute('data-tooltip', 'Already signed');
            }

            // Hover action button for inserting/removing signature (only when selectable)
            if (isAllowed && !isLocked) {
                const btn = document.createElement('button');
                btn.type = 'button';
                btn.className = 'pdfsign-boxBtn';
                btn.textContent = 'Add Signature';
                const enabled = canSign && (typeof signatureDataUrl === 'string' && signatureDataUrl.trim() !== '');
                if (!enabled) {
                    btn.disabled = true;
                    btn.style.opacity = '0.75';
                    btn.style.cursor = 'not-allowed';
                }
                btn.addEventListener('click', function(e){
                    e.preventDefault();
                    e.stopPropagation();
                    toggleSelectionForBox(box, pl, k);
                });
                box.appendChild(btn);

                // Optional: allow clicking the box itself to toggle as well.
                box.addEventListener('click', function(){
                    toggleSelectionForBox(box, pl, k);
                });
            }

            const left = Math.round(Number(pl.x) * sx);
            const top = Math.round(Number(pl.y) * sy);
            const w = Math.round(Number(pl.w) * sx);
            const h = Math.round(Number(pl.h) * sy);

            box.style.left = left + 'px';
            box.style.top = top + 'px';
            box.style.width = Math.max(6, w) + 'px';
            box.style.height = Math.max(6, h) + 'px';

            layer.appendChild(box);
        });
    }

    function clearPages() {
        while (pagesEl.firstChild) pagesEl.removeChild(pagesEl.firstChild);
    }

    function loadPdf() {
        if (!window.pdfjsLib) return;
        window.pdfjsLib.GlobalWorkerOptions.workerSrc = '/themes/frontend/default/js/pdfsign/pdf.worker.min.js';

        clearPages();

        const loadingTask = window.pdfjsLib.getDocument({ url: originalPdfUrl, withCredentials: true });
        loadingTask.promise.then(async function(pdf){
            const desiredWidth = Math.min(900, pagesEl.clientWidth ? (pagesEl.clientWidth - 30) : 900);

            for (let pageNo = 1; pageNo <= pdf.numPages; pageNo++) {
                const page = await pdf.getPage(pageNo);
                const unscaled = page.getViewport({ scale: 1 });
                const scale = desiredWidth / unscaled.width;
                const viewport = page.getViewport({ scale: scale });

                const pageWrap = document.createElement('div');
                pageWrap.className = 'pdfsign-page';
                pageWrap.style.width = Math.round(viewport.width) + 'px';

                const canvas = document.createElement('canvas');
                canvas.width = Math.round(viewport.width);
                canvas.height = Math.round(viewport.height);
                pageWrap.appendChild(canvas);

                pagesEl.appendChild(pageWrap);

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

                renderBoxesForPage(pageWrap, canvas.width, canvas.height, pageNo);
            }

            setInsertMode(false);
            if (pendingJump) {
                pendingJump = false;
                setTimeout(function(){ jumpToFirstAvailableBox(); }, 60);
            }
        }).catch(function(err){
            console && console.warn && console.warn('Failed to load PDF', err);
            pagesEl.innerHTML = '<div style="padding:12px;color:#b91c1c;">Failed to load preview.</div>';
        });
    }

    loadPdf();
})();
</script>