document.addEventListener('DOMContentLoaded', function () {

    const form = document.querySelector('form');

    const signatureWrappers = document.querySelectorAll('.signature-field-wrapper');



    if (!form || signatureWrappers.length === 0) {

        return;

    }



    signatureWrappers.forEach(wrapper => {

        const canvas = wrapper.querySelector('canvas.signature-canvas');

        const clearButton = wrapper.querySelector('.clear-button');

        const finishButton = wrapper.querySelector('.finish-button');

        const reactivarCanvasButton = wrapper.querySelector('.reactivar-canvas-button');

        const hiddenInput = wrapper.querySelector('input[type="hidden"]');



        if (!canvas || !clearButton || !finishButton || !hiddenInput) return;



        const ctx = canvas.getContext('2d');

        let drawing = false;



        // Mouse

        function getMousePos(evt) {

            const rect = canvas.getBoundingClientRect();

            return {

                x: evt.clientX - rect.left,

                y: evt.clientY - rect.top

            };

        }



        canvas.addEventListener('mousedown', (e) => {

            drawing = true;

            const pos = getMousePos(e);

            ctx.beginPath();

            ctx.moveTo(pos.x, pos.y);

        });



        canvas.addEventListener('mousemove', (e) => {

            if (!drawing) return;

            const pos = getMousePos(e);

            ctx.lineTo(pos.x, pos.y);

            ctx.stroke();

            finishButton.disabled = false;

            clearButton.disabled = false;

        });



        canvas.addEventListener('mouseup', () => drawing = false);

        canvas.addEventListener('mouseleave', () => drawing = false);



        // Touch

        function getTouchPos(touchEvent) {

            const rect = canvas.getBoundingClientRect();

            const touch = touchEvent.touches[0];

            return {

                x: touch.clientX - rect.left,

                y: touch.clientY - rect.top

            };

        }



        canvas.addEventListener('touchstart', (e) => {

            e.preventDefault();

            drawing = true;

            const pos = getTouchPos(e);

            ctx.beginPath();

            ctx.moveTo(pos.x, pos.y);

        }, { passive: false });



        canvas.addEventListener('touchmove', (e) => {

            if (!drawing) return;

            e.preventDefault();

            const pos = getTouchPos(e);

            ctx.lineTo(pos.x, pos.y);

            ctx.stroke();

            finishButton.disabled = false;

            clearButton.disabled = false;

            finishButton.classList.add('btn-primary');

            clearButton.classList.add('btn-warning');

        }, { passive: false });



        canvas.addEventListener('touchend', () => drawing = false);

        canvas.addEventListener('touchcancel', () => drawing = false);



        // Clear and Finish

        clearButton.addEventListener('click', () => {



            clearButton.blur();

            document.activeElement.blur();

            ctx.clearRect(0, 0, canvas.width, canvas.height);

            hiddenInput.value = '';

            canvas.style.pointerEvents = "auto";

            finishButton.disabled = true;

            clearButton.disabled = true;



            finishButton.classList.remove('btn-primary');

            clearButton.classList.remove('btn-warning');

            //ocultamos los botones de limpiar y terminar

            clearButton.style.display = "inline-block";

            finishButton.style.display = "inline-block";

            reactivarCanvasButton.style.display = "none";

        });



        finishButton.addEventListener('click', () => {



            finishButton.blur();

            document.activeElement.blur();

            finishButton.disabled = true;

            finishButton.classList.remove('btn-primary');

            clearButton.classList.add('btn-warning');

            canvas.style.pointerEvents = "none";

            const dataURL = canvas.toDataURL();

            hiddenInput.value = dataURL;



            //ocultamos los botones de limpiar y terminar

            clearButton.style.display = "none";

            finishButton.style.display = "none";

            reactivarCanvasButton.style.display = "block";

        });



        reactivarCanvasButton.addEventListener('click', () => {



            reactivarCanvasButton.blur();

            document.activeElement.blur();

            canvas.style.pointerEvents = "auto";

            finishButton.disabled = false;

            clearButton.disabled = false;



            finishButton.classList.add('btn-primary');

            clearButton.classList.add('btn-warning');

            //ocultamos los botones de limpiar y terminar

            reactivarCanvasButton.style.display = "none";

            clearButton.style.display = "inline-block";

            finishButton.style.display = "inline-block";

        });

    });

});

