<!-- Wappler include head-page="layouts/main" fontawesome_5="cdn" bootstrap5="local" is="dmx-app" id="signature" appConnect="local" components="{dmxBootstrap5Modal:{},dmxBootbox5:{}}" -->
<meta name="ac:route" content="/signature">

<div class="container">
    <div class="row">
        <h1 class="text-center">Request Signature</h1>
    </div>
</div>
<div class="container">
    <div class="row">

        <div class="col text-center align-self-center">
            <h1>Signature</h1>
        </div>
        <div class="col text-center align-self-center">
            <button id="btn2" class="btn text-center btn-primary" dmx-on:click="run({'bootbox.confirm':{name:'signatureClear',message:'Are you sure',title:'Clear signature',buttons:{confirm:{label:'Yes',className:'btn-success'},cancel:{label:'Abort',className:'btn-danger'}},then:{steps:{runJS:{name:'CLRSigPanel',outputType:'text',function:'clearCanvas'}}}}})">Clear Signature Pad</button>
        </div>
        <div class="col"></div>
    </div>
</div>
<div class="container text-center">

    <canvas id="signatureCanvas" width="700" height="200" style="border:1px solid #000;" class="text-center" onmousedown="startDrawing(event)" onmouseup="endDrawing()" onmousemove="draw(event)"></canvas>
</div>
<div class="container">
    <div class="row">
        <div class="col align-self-center text-center"><button id="btn1" class="btn text-bg-primary" data-bs-target="undefined">Button</button></div>
        <div class="col"></div>
    </div>
</div>
<button id="btn3" class="btn">Button</button>
<!--
<script src="/PDF/pdfLibSignature.js"></script>
-->

<!--
<script>
    const canvas = document.getElementById('signatureCanvas');
    const ctx = canvas.getContext('2d');
    let drawing = false;

    // Get the canvas element


// Function to get the canvas offset
function getCanvasOffset() {
    const rect = canvas.getBoundingClientRect();
   // console.log("offsetX:",rect.left, " OffsetY:",rect.top)
    return {
        offsetX: rect.left,
        offsetY: rect.top
    };
}

    
    function clearCanvas() {
        console.log("Clear Signature area")
        ctx.clearRect(0, 0, canvas.width, canvas.height);
    }

    function startDrawing(e) {
        console.log("Start Signature Capture")
        //console.log(e)
        drawing = true;
        draw(e);
    }

    function endDrawing() {
        console.log("Stopped Signature Capture")
        drawing = false;
        ctx.beginPath();
    }

    function draw(e) {
        //console.log(e)
        if (!drawing) return;
        ctx.lineWidth = 2;
        ctx.lineCap = 'round';
        ctx.strokeStyle = '#000';
        
        const { offsetX, offsetY } = getCanvasOffset();
        let x = e.clientX - offsetX //canvas.offsetLeft;
        let y = e.clientY - offsetY //canvas.offsetTop;
        //console.log("X:",x," Y:",y)

        //let x = e.clientX - canvas.offsetLeft;
        //let y = e.clientY - canvas.offsetTop;
        //console.log("X:", x, " Y:", y)
        ctx.lineTo(x, y);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(x, y);
    }

    //canvas.addEventListener('mousedown', startDrawing);
    //canvas.addEventListener('mouseup', endDrawing);
    //canvas.addEventListener('mousemove', draw);

    canvas.addEventListener('touchstart', (e) => startDrawing(e.touches[0]));
    canvas.addEventListener('touchend', endDrawing);
    canvas.addEventListener('touchmove', (e) => draw(e.touches[0]));

</script>
-->

<script src="/bootstrap/5/js/bootstrap.bundle.min.js"></script>