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

<style>
    .pdfsign-wrap{max-width:860px;}
    .pdfsign-card{background:#fff;border:1px solid #ddd;border-radius:10px;padding:16px;}
    .pdfsign-muted{color:#64748b;font-size:13px;}
    .pdfsign-row{display:flex;gap:24px;flex-wrap:wrap;align-items:stretch;}
    .pdfsign-col{flex:1;min-width:300px;display:flex;}
    .pdfsign-or{min-width:36px;display:flex;align-items:center;justify-content:center;color:#94a3b8;font-weight:700;}
    @media (max-width: 820px){
        .pdfsign-col{min-width:100%;}
        .pdfsign-or{width:100%;min-width:0;}
    }
    .pdfsign-input{width:100%;border:1px solid #e2e8f0;border-radius:6px;padding:8px 10px;}

    /* Signature font (local asset; no external CDN) */
    @font-face{
        font-family:'PdfSignSignatureFont';
        src:url('/themes/frontend/default/views/profile/photoeditor/assets/fonts/pack2/Dancing-Script.woff') format('woff');
        font-weight:400;
        font-style:normal;
        font-display:swap;
    }

    .sig-panel{flex:1;display:flex;flex-direction:column;border:1px solid #e5e7eb;border-radius:10px;padding:12px;background:#fff;}
    .sig-dropzone{border:2px dashed #cbd5e1;background:#f8fafc;border-radius:10px;padding:18px;cursor:pointer;transition:all .15s ease;max-width:260px;}
    .sig-dropzone:hover{border-color:#2563eb;background:#f1f5ff;}
    .sig-dropzone.is-dragover{border-color:#2563eb;background:#eef2ff;}
    .sig-preview{margin-top:12px;display:flex;align-items:center;justify-content:center;border:1px solid #e5e7eb;border-radius:10px;background:#fff;height:170px;max-width:260px;}
    .sig-preview img{max-height:140px;max-width:100%;display:block;}
    .sig-preview.is-typed img{max-height:155px;}
    .btn-sig{display:inline-block;padding:8px 18px;border-radius:6px;border:1px solid #e2e8f0;background:#f8fafc;cursor:pointer;}
    .btn-sig.save{background:#e11d48;border-color:#e11d48;color:#fff;min-width:120px;}
    .btn-sig.save:hover{background:#be123c;border-color:#be123c;}
    .sig-legal{margin-top:0;font-size:12px;color:#0f172a;}
    .sig-error{background:#ffecec;border:1px solid #f5aca6;padding:10px;margin:10px 0;border-radius:8px;}
    .sig-success{background:#e7f8ed;border:1px solid #a7e2b9;padding:10px;margin:10px 0;border-radius:8px;}
    .sig-confirm-row{margin-top:16px;padding-top:12px;border-top:1px solid #eef2f7;}
    .sig-confirm-row .sig-legal{display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:8px;}
    .sig-confirm-row .btn-sig.save{opacity:1;}
    .sig-confirm-row .btn-sig.save[disabled]{opacity:.55;cursor:not-allowed;}
	 .box.community-history{
 	display:none;
 }
</style>

<div style="padding:15px;">
    <div class="pdfsign-wrap">
        @if ($errors->any())
            <div class="sig-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="sig-success">{{ session('status') }}</div>
        @endif

        <div class="pdfsign-card">
            <form id="sigForm" method="POST" action="{{ $saveUrl }}" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="signature_data_url" id="sigDataUrl" value="">

				<div style="text-align:left; margin-bottom:5px;">Upload or enter only the correct signature</div>
                
                <div class="pdfsign-row">
                    <div class="pdfsign-col">
                        <div class="sig-panel">
                            <div style="font-weight:700;margin-bottom:8px;">Upload Signature</div>

                            <div id="sigDropzone" class="sig-dropzone" role="button" tabindex="0" aria-label="Drag and drop signature image here or click to choose">
                                <div style="display:block;gap:10px;align-items:flex-start; text-align:center;">
                                    <div style="font-size:18px;line-height:1;margin-top:2px;color:#2563eb; margin-bottom:6px;"><i class="fa fa-picture-o" aria-hidden="true"></i></div>
                                    <div>
                                        <div>Drag & drop your signature image here, or click to choose the signature.</div>
                                       
                                    </div>
                                </div>
                            </div>

                            <input type="file" name="signature_file" id="sigFile" accept="image/png,image/jpeg" style="position:absolute;left:-9999px;width:1px;height:1px;" />

                            @php
                                $saved = isset($signature->signature_data_url) ? (string) $signature->signature_data_url : '';
                                $savedSignerName = isset($signature->signer_name) ? trim((string) $signature->signer_name) : '';
                                $savedIsTyped = $saved !== '' && ($savedSignerName !== '' || stripos($saved, 'data:image/svg+xml') === 0);
                                $savedTyped = $savedIsTyped ? $saved : '';
                                $savedUpload = ($saved !== '' && !$savedIsTyped) ? $saved : '';
                                $savedUploadSrc = $savedUpload;
                                if ($savedUploadSrc !== '' && strpos($savedUploadSrc, 'uploads/') === 0) {
                                    $savedUploadSrc = getDocumentUrl($savedUploadSrc);
                                }
                            @endphp

                            <div class="sig-preview">
                                <img id="sigUploadPreview" alt="Uploaded signature preview" src="{{ $savedUploadSrc }}" style="{{ $savedUpload ? '' : 'display:none;' }}">
                                <div id="sigUploadEmpty" class="pdfsign-muted" style="{{ $savedUpload ? 'display:none;' : '' }}">No image selected</div>
                            </div>
                        </div>
                    </div>

                    <div class="pdfsign-or">or</div>

                    <div class="pdfsign-col">
                        <div class="sig-panel">
                            <div style="font-weight:700;margin-bottom:8px;">Write Signature</div>

                            <input type="text" class="pdfsign-input" name="signer_name" id="signerName" placeholder="Type your signature" value="{{ isset($signature->signer_name) ? $signature->signer_name : '' }}" style="max-width:260px;">

                            <div class="sig-preview is-typed">
                                <img id="sigWritePreview" alt="Typed signature preview" src="{{ $savedTyped }}" style="{{ $savedTyped ? '' : 'display:none;' }}">
                                <div id="sigWriteEmpty" class="pdfsign-muted" style="{{ $savedTyped ? 'display:none;' : '' }}">Nothing written</div>
                            </div>

                            <div style="flex:1;"></div>
                        </div>
                    </div>
                </div>               
                

                <div class="sig-confirm-row">
                    <div class="sig-legal">
                        <button style="font-size: 17px;
  padding: 4px 8px;" type="submit" class="btn-sig save" id="sigSave" disabled>Save</button>
                        <div class="pdfsign-muted">
                            Note: By saving this signature, you confirm it for legal use.
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script>
(function(){
    var dropzone = document.getElementById('sigDropzone');
    var sigFile = document.getElementById('sigFile');
    var uploadPreview = document.getElementById('sigUploadPreview');
    var uploadEmpty = document.getElementById('sigUploadEmpty');
    var writePreview = document.getElementById('sigWritePreview');
    var writeEmpty = document.getElementById('sigWriteEmpty');
    var sigData = document.getElementById('sigDataUrl');
    var sigForm = document.getElementById('sigForm');
    var signerName = document.getElementById('signerName');
    var sigSave = document.getElementById('sigSave');

    function hasTypedSignature(){
        var v = (sigData && sigData.value) ? String(sigData.value) : '';
        return v !== '' && v.indexOf('data:image/') === 0;
    }

    function hasUploadedSignature(){
        if (sigFile && sigFile.files && sigFile.files.length) return true;
        // Also treat already-saved signatures as present
        if (uploadPreview && uploadPreview.style.display !== 'none' && uploadPreview.src) return true;
        return false;
    }

    function updateSaveEnabled(){
        if (!sigSave) return;
        var ok = hasUploadedSignature() || hasTypedSignature() || (writePreview && writePreview.style.display !== 'none' && writePreview.src);
        sigSave.disabled = !ok;
    }

    function setUploadPreview(src){
        if (src) {
            if (uploadPreview) { uploadPreview.src = src; uploadPreview.style.display = 'block'; }
            if (uploadEmpty) uploadEmpty.style.display = 'none';
        } else {
            if (uploadPreview) { uploadPreview.src = ''; uploadPreview.style.display = 'none'; }
            if (uploadEmpty) uploadEmpty.style.display = 'block';
        }
        updateSaveEnabled();
    }

    function setWritePreview(src){
        if (src) {
            if (writePreview) { writePreview.src = src; writePreview.style.display = 'block'; }
            if (writeEmpty) writeEmpty.style.display = 'none';
        } else {
            if (writePreview) { writePreview.src = ''; writePreview.style.display = 'none'; }
            if (writeEmpty) writeEmpty.style.display = 'block';
        }
        updateSaveEnabled();
    }

    function ensureSignatureFontLoaded(){
        try {
            if (document.fonts && document.fonts.load) {
                return document.fonts.load('72px PdfSignSignatureFont');
            }
        } catch (e) {
        }
        return Promise.resolve();
    }

    function pngDataUrlFromText(text){
        text = String(text || '').trim();
        if (!text) return '';

        var canvas = document.createElement('canvas');
        canvas.width = 800;
        canvas.height = 220;
        var ctx = canvas.getContext('2d');
        if (!ctx) return '';

        ctx.fillStyle = '#ffffff';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        var fontStack = '"PdfSignSignatureFont", "Segoe Script", "Brush Script MT", cursive';
        var size = 72;
        var maxWidth = 740;

        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillStyle = '#0f172a';

        // Fit-to-width (shrink if needed)
        for (var i = 0; i < 14; i++) {
            ctx.font = '600 ' + size + 'px ' + fontStack;
            if (ctx.measureText(text).width <= maxWidth || size <= 44) break;
            size -= 2;
        }

        ctx.font = '600 ' + size + 'px ' + fontStack;
        ctx.fillText(text, canvas.width / 2, 120);

        try {
            return canvas.toDataURL('image/png');
        } catch (e) {
            return '';
        }
    }

    function updateTypedPreview(){
        if (!signerName) return;
        // If user starts typing: clear selected image (either-or).
        if (sigFile && sigFile.value) {
            sigFile.value = '';
            setUploadPreview('');
        }

        ensureSignatureFontLoaded().then(function(){
            var dataUrl = pngDataUrlFromText(signerName.value);
            if (dataUrl) {
                setWritePreview(dataUrl);
                if (sigData) sigData.value = dataUrl;
            } else {
                if (sigData) sigData.value = '';
                setWritePreview('');
            }
        });
    }

    function acceptImageFile(file){
        if (!file) return;

        // If image selected: clear typed entry and typed preview (either-or).
        if (signerName) signerName.value = '';
        setWritePreview('');
        if (sigData) sigData.value = '';

        try {
            var reader = new FileReader();
            reader.onload = function(){
                var dataUrl = String(reader.result || '');
                setUploadPreview(dataUrl);
                // Important: for drag & drop, browsers often block assigning to input.files.
                // Store the image as a data URL so the backend can still save/upload it.
                if (sigData) sigData.value = dataUrl;
            };
            reader.readAsDataURL(file);
        } catch (e) {
        }
    }

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

        ;['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 { sigFile.files = dt.files; } catch (err) {}
            acceptImageFile(dt.files[0]);
        });
    }

    if (sigFile) sigFile.addEventListener('change', function(){
        var f = sigFile.files && sigFile.files.length ? sigFile.files[0] : null;
        if (!f) return;
        acceptImageFile(f);
    });

    if (signerName) signerName.addEventListener('input', function(){
        updateTypedPreview();
    });

    // If a typed signature was already saved, seed hidden value so "Save" enables.
    try {
        if (sigData && (!sigData.value || String(sigData.value).trim() === '') && writePreview && writePreview.style.display !== 'none' && writePreview.src && String(writePreview.src).indexOf('data:image/') === 0) {
            sigData.value = String(writePreview.src);
        }
    } catch (e) {
    }

    // Enable Save on initial load if already saved
    updateSaveEnabled();

    if (sigForm) sigForm.addEventListener('submit', function(e){
        var hasFile = sigFile && sigFile.files && sigFile.files.length;
        if (!hasFile) {
            e.preventDefault();

            ensureSignatureFontLoaded().then(function(){
                var dataUrl = pngDataUrlFromText(signerName ? signerName.value : '');
                if (sigData) sigData.value = dataUrl;
                if (!dataUrl) {
                    alert('Please upload a signature image or type your name to write a signature.');
                    return;
                }
                setWritePreview(dataUrl);
                updateSaveEnabled();
                sigForm.submit();
            });
        }
    });
})();
</script>