<script src="<?php echo base_url();?>assets/plugins/jSignature/jSignature.min.js" ></script>

<div class="wrapper">
    <div class="container">
        <div class="row">
            <div class="col-sm-12"></div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="card-box">
                    <div id="container" >
                        <div id="signature"></div>
                    </div>
                    <div >
                        <button onclick="clearsig();" class="btn btn-sm btn-success">Clear</button>
                        <button onclick="getsvg();" class="btn btn-sm btn-success">SVG</button>
                        <button onclick="savesvg();" class="btn btn-sm btn-danger">Save</button>
                        <button onclick="getsvg();" class="btn btn-sm btn-warning">Get</button>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card-box">
                    <div id="container" >
                        <div id="svg"></div>
                    </div>
                </div>
            </div>

    </div>

    <script>



	    $(document).ready(function() {
	       // $("#signature").jSignature();
           var $sigdiv = $("#signature");
                $sigdiv.jSignature(); // inits the jSignature widget.
                // after some doodling...
                $sigdiv.jSignature("reset") ;// clears the canvas and rerenders the decor on it.
	    });

        function clearsig(){
            $("#signature").jSignature('clear');
        }

        function getsvg(){
            var $sigdiv = $("#signature");
            var datapair = $sigdiv.jSignature("getData", "svgbase64") ;
            $("#svg").html(datapair);
            var i = new Image();
            i.src = "data:" + datapair[0] + "," + datapair[1] 
            $(i).appendTo($("#svg"));
        }

        function savesvg(){

            var $sigdiv = $("#signature");
            var datapair = $sigdiv.jSignature("getData", "svgbase64") ;

            $.ajax({                
                type: 'POST',                
                url: '<?php echo base_url("concent_controller/savesig"); ?>',
                data: {sig_type: datapair[0], sig_data: datapair[1], customer_signature: datapair[0]+','+datapair[1]},
                dataType: "text",                
                success: function(data) {
                    alert(data);
                }
            });

        }

        function getsvg(){
            $.ajax({                
                type: 'GET',                
                url: '<?php echo base_url("concent_controller/getsig"); ?>',
                data: {param:'none'},
                dataType: "json",                
                success: function(data) {
                    console.log(data);
                        var i = new Image();
                        i.src = "data:" + data.sig_data 
                        $(i).appendTo($("#svg"));
                    
                }

            });
        }

	</script>
