<script src="//cdn.jsdelivr.net/npm/signature_pad@4.0.0/dist/signature_pad.umd.min.js"></script>
<script>
    var signaturePad = new SignaturePad(document.getElementById('signature-pad'), {
        backgroundColor: 'rgba(255, 255, 255, 0)',
        penColor: 'rgb(0, 0, 0)'
    });

    var signatureData = document.getElementById('signature').value;
    if (signatureData) {
        signaturePad.fromDataURL(signatureData);
    }

    var cancelButton = document.getElementById('clear');
    cancelButton.addEventListener('click', function(event) {
        signaturePad.clear();
        document.getElementById('signature').value = '';
    });

    document.getElementById('undo').addEventListener('click', function() {
        var data = signaturePad.toData();
        if (data) {
            data.pop();
            signaturePad.fromData(data);
        }
    });

    document.getElementById('btnSubmit').addEventListener('click', function() {
        if (signaturePad.isEmpty()) {
            return Swal.fire(
                'Opps!',
                'Please provide a signature first.',
                'error'
            );
        }

        var data = signaturePad.toDataURL('image/png');
        document.getElementById('signature').value = data;

        $('#form').submit();
    });
</script>