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

<style type="text/css">
 .box.community-history{
 	display:none;
 }

 .pdfsign-upload-wrap{max-width:100%;}
 .pdfsign-card{background:#fff;border:1px solid #ddd;border-radius:10px;padding:16px;}
 .pdfsign-label{display:block;margin-bottom:6px;font-weight:600;}
 .pdfsign-input{width:100%;border:1px solid #e2e8f0;border-radius:8px;padding:10px 12px;outline:none;}
 .pdfsign-input:focus{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.12);}
 .pdfsign-dropzone{border:2px dashed #cbd5e1;background:#f8fafc;border-radius:10px;padding:18px;cursor:pointer;transition:all .15s ease;}
 .pdfsign-dropzone:hover{border-color:#2563eb;background:#f1f5ff;}
 .pdfsign-dropzone.is-dragover{border-color:#2563eb;background:#eef2ff;}
 .pdfsign-muted{color:#64748b;font-size:13px;}
 .pdfsign-row{display:flex;gap:16px;flex-wrap:wrap;}
 .pdfsign-col{flex:1;min-width:200px;}
 .pdfsign-filepill{display:flex;align-items:center;gap:8px;background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46;border-radius:999px;padding:6px 10px;font-size:13px;max-width:92%;min-width:0;overflow:hidden;}
 .pdfsign-filepill .name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
 .pdfsign-error{background:#ffecec;border:1px solid #f5aca6;padding:10px;margin:10px 0;border-radius:8px;}
 .pdfsign-success{background:#e7f8ed;border:1px solid #a7e2b9;padding:10px;margin:10px 0;border-radius:8px;}
 .pdfsign-btn{padding:10px 14px;background:#2563eb;color:#fff;border:0;border-radius:8px;cursor:pointer;}
 .pdfsign-btn:disabled{opacity:.6;cursor:not-allowed;}
 .pdfsign-linkbtn{display:inline-block;padding:10px 14px;background:#f1f5f9;color:#0f172a;border:1px solid #e2e8f0;border-radius:8px;text-decoration:none;}

 /* Save button (match screenshot: red, bottom-right) */
 #pdfsignSubmit{background:#e11d48;border-radius:6px;padding:9px 18px;box-shadow:0 1px 0 rgba(0,0,0,.08);}
 #pdfsignSubmit:hover{background:#be123c;}
 #pdfsignSubmit:disabled{background:#fda4af;}

 .pdfsign-preview-wrap{width:100%;margin-top:14px;display:none;}
 .pdfsign-preview-head{display:flex;gap:12px;align-items:center;justify-content:space-between;margin:0 0 8px 0;}
 .pdfsign-preview-title{font-weight:700;color:#0f172a;}
 .pdfsign-toolbar{display:flex;gap:6px;flex-wrap:wrap;align-items:center;justify-content:center;padding:8px 10px;border:1px solid #e5e7eb;border-radius:10px;background:#fff;}
 .pdfsign-toolbtn{border:1px solid #e2e8f0;background:#f8fafc;color:#0f172a;border-radius:8px;padding:6px 10px;cursor:pointer;font-size:13px;}
 .pdfsign-toolbtn:disabled{opacity:.5;cursor:not-allowed;}
 .pdfsign-toolsep{width:1px;height:24px;background:#e5e7eb;margin:0 4px;}
 .pdfsign-preview-stage{position:relative;border:1px solid #e5e7eb;border-radius:10px;background:#f8fafc;overflow:auto;}
 .pdfsign-preview-canvas{display:block;margin:0 auto;background:#fff;}
 .pdfsign-preview-status{position:absolute;top:10px;left:10px;background:rgba(15,23,42,.72);color:#fff;padding:6px 10px;border-radius:999px;font-size:12px;}
</style>

<div style="padding:15px;">
    <span class="resize-editor-screen-btn resize-editor-screen-btn-open"><i class="fa fa-arrows-alt" aria-hidden="true"></i></span>
    
    <!--<h2 style="margin-bottom: 15px; margin-top: 0px; font-size: 20px;">Documents</h2>-->

    @if ($errors->any())
        <div class="pdfsign-error">
            <ul style="margin:0;padding-left:18px;">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    @if (session('status'))
        <div class="pdfsign-success">
            {{ session('status') }}
        </div>
    @endif

    <div class="pdfsign-upload-wrap">
        <div class="pdfsign-card">
			<form id="pdfsignUploadForm" method="POST" action="{{ $uploadUrl }}" enctype="multipart/form-data">
				@csrf

				<label class="pdfsign-label" style="font-size:17px">Upload your document</label>

				<div style="margin-bottom:12px; margin-top:15px;">
					<label class="pdfsign-label" style="font-weight:normal;">Document Title</label>
                    <input class="pdfsign-input" type="text" name="title" id="pdfsignTitle" placeholder="Type the name of the document" autocomplete="off" required>
				</div>

				<div class="pdfsign-row">
					<div class="pdfsign-col" style="max-width:200px">
						<div id="pdfsignDropzone" class="pdfsign-dropzone" role="button" tabindex="0" aria-label="Drag and drop PDF here or click to choose">
							<div style="display:flex;gap:12px;align-items:flex-start; display:block; text-align:center;">
								<div style="font-size:18px;line-height:1;margin-top:2px;color:#2563eb; margin-bottom: 7px;"><i class="fa fa-file-pdf-o" aria-hidden="true"></i></div>
								<div>
									<div>Drag & drop your document here or</div>
									<div>click to choose a file.</div>
									<div id="pdfsignPicked" style="margin-top:10px;display:none;max-width:100%;min-width:0;"></div>
									<div id="pdfsignClientError" class="pdfsign-muted" style="margin-top:10px;color:#b91c1c;display:none;"></div>
								</div>
							</div>
						</div>

						<input id="pdfsignFile" type="file" name="pdf" accept="application/pdf" required style="position:absolute;left:-9999px;width:1px;height:1px;" />

					</div>

					<div class="pdfsign-col">
						<div style="font-weight:600;margin-bottom:8px;">Instructions:</div>
						<ul style="margin:0;padding-left:18px;color:#475569;font-size:13px;line-height:1.6;">
							<li>Upload and preview the document and provide the document title and click Save.</li>
							<li>Click Invite, allocate the signature areas by dragging the signature controls above the  the respective participant's name.</li>
							<li>Provide the participants email address to invite them to sign the document.</li>
							<li>Click status button to track the signature status of the document.</li>
						</ul>
					</div>
				</div>

                <div id="pdfsignPreviewWrap" class="pdfsign-preview-wrap">
                    <div class="pdfsign-preview-head">
                        <div class="pdfsign-preview-title" style="font-weight:normal;">Document Preview</div>
                    </div>

                    <div class="pdfsign-toolbar" role="toolbar" aria-label="PDF preview toolbar">
                        <button type="button" class="pdfsign-toolbtn" id="pvPrev">Prev</button>
                        <button type="button" class="pdfsign-toolbtn" id="pvNext">Next</button>
                        <span class="pdfsign-toolsep" aria-hidden="true"></span>
                        <button type="button" class="pdfsign-toolbtn" id="pvZoomOut">-</button>
                        <button type="button" class="pdfsign-toolbtn" id="pvZoomIn">+</button>
                        <span class="pdfsign-toolsep" aria-hidden="true"></span>
                        <span class="pdfsign-muted"><span id="pvPage">0</span> / <span id="pvPages">0</span></span>
                    </div>

                    <div id="pvStage" class="pdfsign-preview-stage" style="margin-top:10px;">
                        <div id="pvStatus" class="pdfsign-preview-status" style="display:none;">Loading…</div>
                        <canvas id="pvCanvas" class="pdfsign-preview-canvas"></canvas>
                    </div>
                </div>

                <div id="pdfsignActions" style="margin-top:14px;display:none;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end;">
                    <button id="pdfsignSubmit" type="submit" class="pdfsign-btn" disabled style="min-width:120px; font-size: 17px;
  padding: 4px 8px;">Save</button>
                    <!--<a href="{{ route('community.pdf-sign.history', ['slug' => request()->route('slug') ?: (\Request::segment(2) ?: '')]) }}" class="pdfsign-linkbtn">View History</a>-->
                    <!--<span class="pdfsign-muted">Next step: invite one or more signers.</span>-->
                </div>
			</form>
        </div>
    </div>
</div>

<script src="/themes/frontend/default/js/pdfsign/pdf.min.js"></script>

<script>
(function(){
    var dropzone = document.getElementById('pdfsignDropzone');
    var fileInput = document.getElementById('pdfsignFile');
    var picked = document.getElementById('pdfsignPicked');
    var clientError = document.getElementById('pdfsignClientError');
    var submitBtn = document.getElementById('pdfsignSubmit');
    var actions = document.getElementById('pdfsignActions');
    var titleInput = document.getElementById('pdfsignTitle');

    var previewWrap = document.getElementById('pdfsignPreviewWrap');
    var pvCanvas = document.getElementById('pvCanvas');
    var pvCtx = pvCanvas ? pvCanvas.getContext('2d') : null;
    var pvStatus = document.getElementById('pvStatus');
    var pvStage = document.getElementById('pvStage');
    var pvPrev = document.getElementById('pvPrev');
    var pvNext = document.getElementById('pvNext');
    var pvZoomIn = document.getElementById('pvZoomIn');
    var pvZoomOut = document.getElementById('pvZoomOut');
    var pvPage = document.getElementById('pvPage');
    var pvPages = document.getElementById('pvPages');

    var pvDoc = null;
    var pvPageNum = 1;
    var pvRenderTask = null;
    var pvLastFile = null;
    var pvTriedDisableWorker = false;
    var pvZoom = 1.0;

    if (!dropzone || !fileInput) return;

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

    function formatBytes(bytes){
        if (!bytes && bytes !== 0) return '';
        var units = ['B','KB','MB','GB'];
        var i = 0;
        var n = bytes;
        while (n >= 1024 && i < units.length - 1){
            n = n / 1024;
            i++;
        }
        return (Math.round(n * 10) / 10) + ' ' + units[i];
    }

    function setClientError(msg){
        if (msg){
            clientError.textContent = msg;
            clientError.style.display = 'block';
        } else {
            clientError.textContent = '';
            clientError.style.display = 'none';
        }
    }

    function showPickedFile(file){
        if (!file){
            picked.style.display = 'none';
            picked.innerHTML = '';
            submitBtn.disabled = true;
            if (actions) actions.style.display = 'none';
            return;
        }

        var pill = '<span class="pdfsign-filepill">'
            + '<i class="fa fa-check" aria-hidden="true"></i>'
            + '<span class="name" title="' + String(file.name).replace(/"/g,'&quot;') + '">' + file.name + '</span>'
            + '<span style="opacity:.8;">(' + formatBytes(file.size) + ')</span>'
            + '</span>';

        picked.innerHTML = pill;
        picked.style.display = 'block';

        // Only show Save button after a valid file is selected.
        if (actions) actions.style.display = 'flex';

        // Title is required; keep disabled until a non-empty title exists.
        var titleOk = titleInput ? String(titleInput.value || '').trim().length > 0 : true;
        submitBtn.disabled = !titleOk;
    }

    function updateSubmitEnabled(){
        if (!submitBtn) return;
        if (actions && actions.style.display === 'none') {
            submitBtn.disabled = true;
            return;
        }
        var titleOk = titleInput ? String(titleInput.value || '').trim().length > 0 : true;
        submitBtn.disabled = !titleOk;
    }

    function validateFile(file){
        if (!file) return { ok:false, msg:'Please choose a PDF file.' };

        var maxBytes = 20 * 1024 * 1024;
        var nameOk = (String(file.name || '').toLowerCase().indexOf('.pdf') !== -1);
        var typeOk = (String(file.type || '') === 'application/pdf') || nameOk;

        if (!typeOk) return { ok:false, msg:'Please choose a valid PDF file.' };
        if (file.size > maxBytes) return { ok:false, msg:'File is too large. Max 20MB.' };

        return { ok:true, msg:'' };
    }

    function acceptFiles(files){
        var file = files && files.length ? files[0] : null;
        var v = validateFile(file);
        if (!v.ok){
            setClientError(v.msg);
            showPickedFile(null);
            hidePreview();
            return;
        }
        setClientError('');
        showPickedFile(file);
        loadPreview(file);
        updateSubmitEnabled();
    }

    function setPvStatus(msg){
        if (!pvStatus) return;
        if (msg){
            pvStatus.textContent = msg;
            pvStatus.style.display = 'inline-block';
        } else {
            pvStatus.textContent = '';
            pvStatus.style.display = 'none';
        }
    }

    function hidePreview(){
        if (previewWrap) previewWrap.style.display = 'none';
        setPvStatus('');
        pvDoc = null;
        pvPageNum = 1;
        pvZoom = 1.0;
        if (pvRenderTask && pvRenderTask.cancel) {
            try { pvRenderTask.cancel(); } catch (_) {}
        }
        pvRenderTask = null;
        pvLastFile = null;
        pvTriedDisableWorker = false;
        if (pvPage) pvPage.textContent = '0';
        if (pvPages) pvPages.textContent = '0';
    }

    function updatePreviewControls(){
        if (!pvDoc) {
            if (pvPrev) pvPrev.disabled = true;
            if (pvNext) pvNext.disabled = true;
            if (pvZoomIn) pvZoomIn.disabled = true;
            if (pvZoomOut) pvZoomOut.disabled = true;
            return;
        }
        if (pvPrev) pvPrev.disabled = (pvPageNum <= 1);
        if (pvNext) pvNext.disabled = (pvPageNum >= pvDoc.numPages);
        if (pvZoomIn) pvZoomIn.disabled = false;
        if (pvZoomOut) pvZoomOut.disabled = (pvZoom <= 0.5);
        if (pvPage) pvPage.textContent = String(pvPageNum);
        if (pvPages) pvPages.textContent = String(pvDoc.numPages);
    }

    function clamp(n, min, max){
        return Math.max(min, Math.min(max, n));
    }

    function renderPreviewPage(){
        if (!pvDoc || !pvCanvas || !pvCtx) return;

        updatePreviewControls();
        setPvStatus('Rendering…');

        // Cancel any in-flight render
        if (pvRenderTask && pvRenderTask.cancel) {
            try { pvRenderTask.cancel(); } catch (_) {}
        }
        pvRenderTask = null;

        pvDoc.getPage(pvPageNum).then(function(page){
            // Fit-to-container width so it never clips on the right.
            var baseViewport = page.getViewport({ scale: 1 });
            var stageW = pvStage ? pvStage.clientWidth : 0;
            var fitScale = 1;
            if (stageW && baseViewport && baseViewport.width) {
                fitScale = (stageW - 2) / baseViewport.width;
            }
            fitScale = clamp(fitScale, 0.25, 3);
            var viewport = page.getViewport({ scale: fitScale * pvZoom });
            pvCanvas.width = Math.floor(viewport.width);
            pvCanvas.height = Math.floor(viewport.height);

            var renderContext = { canvasContext: pvCtx, viewport: viewport };
            pvRenderTask = page.render(renderContext);
            return pvRenderTask.promise;
        }).then(function(){
            setPvStatus('');
        }).catch(function(err){
            // Ignore render cancel
            var name = (err && err.name) ? String(err.name) : '';
            var msg = (err && err.message) ? String(err.message) : '';
            var isCancel = name === 'RenderingCancelledException' || msg.toLowerCase().indexOf('rendering cancelled') !== -1;
            if (isCancel) return;
            setPvStatus('Preview failed to render');
            console.error('PDF preview render failed', err);
        });
    }

    function shouldRetryDisableWorker(err){
        if (pvTriedDisableWorker) return false;
        var msg = (err && err.message) ? String(err.message).toLowerCase() : '';
        return msg.indexOf('worker') !== -1 || msg.indexOf('fake worker') !== -1;
    }

    function loadPreview(file){
        if (!window.pdfjsLib || !previewWrap) return;
        if (!file) return;
        pvLastFile = file;

        previewWrap.style.display = 'block';
        setPvStatus('Loading…');

        var reader = new FileReader();
        reader.onerror = function(){
            setPvStatus('Preview failed to load');
        };
        reader.onload = function(){
            try {
                var data = new Uint8Array(reader.result);
                pdfjsLib.getDocument({ data: data, disableRange: true, disableStream: true }).promise.then(function(doc){
                    pvDoc = doc;
                    pvPageNum = 1;
                    pvZoom = 1.0;
                    updatePreviewControls();
                    renderPreviewPage();
                }).catch(function(err){
                    if (shouldRetryDisableWorker(err) && window.pdfjsLib) {
                        pvTriedDisableWorker = true;
                        try { pdfjsLib.disableWorker = true; } catch (_) {}
                        loadPreview(pvLastFile);
                        return;
                    }
                    setPvStatus('Preview failed to load');
                    console.error('PDF preview load failed', err);
                });
            } catch (e) {
                setPvStatus('Preview failed to load');
                console.error('PDF preview load failed', e);
            }
        };
        reader.readAsArrayBuffer(file);
    }

    dropzone.addEventListener('click', function(){
        fileInput.click();
    });

    dropzone.addEventListener('keydown', function(e){
        if (e.key === 'Enter' || e.key === ' '){
            e.preventDefault();
            fileInput.click();
        }
    });

    fileInput.addEventListener('change', function(){
        acceptFiles(fileInput.files);
    });

    ;['dragenter','dragover'].forEach(function(evt){
        dropzone.addEventListener(evt, function(e){
            e.preventDefault();
            e.stopPropagation();
            dropzone.classList.add('is-dragover');
        });
    });

    ;['dragleave','dragend'].forEach(function(evt){
        dropzone.addEventListener(evt, function(e){
            e.preventDefault();
            e.stopPropagation();
            dropzone.classList.remove('is-dragover');
        });
    });

    dropzone.addEventListener('drop', function(e){
        e.preventDefault();
        e.stopPropagation();
        dropzone.classList.remove('is-dragover');

        var dt = e.dataTransfer;
        if (!dt || !dt.files || !dt.files.length) return;

        // Try to assign dropped file to the input for normal form submit.
        try {
            fileInput.files = dt.files;
        } catch (err) {
            // Some browsers block programmatic assignment; user can still click to pick.
        }

        acceptFiles(dt.files);
    });

    if (titleInput) {
        titleInput.addEventListener('input', function(){
            updateSubmitEnabled();
        });
    }

    // Extra safety: prevent submitting without a title.
    var form = document.getElementById('pdfsignUploadForm');
    if (form) {
        form.addEventListener('submit', function(e){
            var titleOk = titleInput ? String(titleInput.value || '').trim().length > 0 : true;
            if (!titleOk) {
                e.preventDefault();
                setClientError('Please enter a document title.');
            }
        });
    }

    if (pvPrev) pvPrev.addEventListener('click', function(){
        if (!pvDoc || pvPageNum <= 1) return;
        pvPageNum -= 1;
        renderPreviewPage();
    });
    if (pvNext) pvNext.addEventListener('click', function(){
        if (!pvDoc || pvPageNum >= pvDoc.numPages) return;
        pvPageNum += 1;
        renderPreviewPage();
    });
    if (pvZoomIn) pvZoomIn.addEventListener('click', function(){
        if (!pvDoc) return;
        pvZoom = Math.min(2.0, pvZoom + 0.1);
        renderPreviewPage();
    });
    if (pvZoomOut) pvZoomOut.addEventListener('click', function(){
        if (!pvDoc) return;
        pvZoom = Math.max(0.5, pvZoom - 0.1);
        renderPreviewPage();
    });

    window.addEventListener('resize', function(){
        if (pvDoc && previewWrap && previewWrap.style.display !== 'none') {
            renderPreviewPage();
        }
    });
})();
</script>