{if $drawsignature eq 'on'}



    <script src="https://cdn.jsdelivr.net/npm/jsignature@2.1.2/libs/jSignature.min.js"></script>



    <script>



        $(document).ready(function(e){

            

            

             $("#btnContinue").hide();

             $("#savesignatureoptions").hide();

             $("#signature-content").show();

             

             var $sigdiv = $("#signature");

            

             {if $template eq "flare" || $template eq "croster"}

            

			 $sigdiv.jSignature({ "width": '100%', "height": 250 }); 

              

             {else}



 			 $sigdiv.jSignature({ "width": 650, "height": 250 }); 



             

             {/if}

            

              $("#btnReset").click(function(e){



                  e.preventDefault();

                  $("#savesignatureoptions").hide();

                  $("#signature-content").show();

                  $("#btnContinue").hide();

                  $("#displayarea").empty();

                  // after some doodling...

                  $sigdiv.jSignature("reset") // clears the canvas and rerenders the decor on it.



              });



              $("#btnSave").click(function(e){



                  e.preventDefault();

                  // Getting signature as SVG and rendering the SVG within the browser. 

                  // (!!! inline SVG rendering from IMG element does not work in all browsers !!!)

                  // this export plugin returns an array of [mimetype, base64-encoded string of SVG of the signature strokes]

                  var datapair = $sigdiv.jSignature("getData", "image");



                  $("#displayarea").empty();



                  var i = new Image();

                  i.src = "data:" + datapair[0] + "," + datapair[1];

                  $(i).appendTo($("#displayarea"));



                  $("#input-signature").val(datapair);



                  $("#btnContinue").show();

                  //console.log(datapair);

                  $("#signature-content").hide();

                  $("#btnSave").hide();



              });

             

              var canvas = $sigdiv.find("canvas")[0];

                

              if (canvas) {

                

                  $("#signature canvas").css("border", "1px solid #ccc");

                  

                  var isDrawing = false;



                  $(canvas).on("mousedown touchstart", function(e) {

                      isDrawing = true;

                      //console.log("Start drawing", e.type);

                  });



                  $(canvas).on("mousemove touchmove", function(e) {

                      if (isDrawing) {

                          //console.log("Drawing...", e.type);

                          // You can extract position here if needed

                      }

                  });



                  $(canvas).on("mouseup touchend", function(e) {

                      if (isDrawing) {

                          isDrawing = false;

                         /// console.log("Drawing finished", e.type);

                          $("#savesignatureoptions").show();

                          $("#btnSave").show();

                      }

                  });



              } else {

                  console.error("Canvas not found inside #signature.");

              }

        

              /*$("#btnContinue").on("click" , function(e){

                

                

                

              });*/

              

              

                         

            

            

        });



        function agreeContinueOrder() {

            

            if (document.getElementById('agreeterms').checked) {

                

                {if $contactnoaccess}

                    return false;

                {/if}

             

                document.forms["agreetermssuccess"].submit();



            } else {

                

                document.getElementById('ermsg').style.display = "block";

                

            }

        }



        

        function emptyShoppingCart() {

            if (confirm('{$ATLANG.surewantemptycart}'))

                window.location.href = 'cart.php?a=empty';

        }

            

        function PrintElem(elem) {

            

            var divToPrint = document.getElementById(elem);

            newWin = window.open("");

            newWin.document.write(divToPrint.outerHTML);

            newWin.print();

            newWin.close();

        }

            

        function sendemail() {

            $.ajax({

                type: 'POST', url: 'index.php?m=agreeterms', data: {

                    sendemail: -1,

                    agree_optional: {$agree_optional},

                }

                , success: function (data) {

                    alert(data);

                }

            });

        }    

            

    </script>





{else}

{literal}

    <script>

        function agreeContinueOrder() {

            if (document.getElementById('agreeterms').checked) {

    {/literal}{if $contactnoaccess}return false;{/if}{literal}

                document.forms["agreetermssuccess"].submit();



            } else {

                document.getElementById('ermsg').style.display = "block";

            }

        }



        function emptyShoppingCart() {

            if (confirm('{/literal}{$ATLANG.surewantemptycart}{literal}'))

                window.location.href = 'cart.php?a=empty';

        }

        function PrintElem(elem)

        {

            var divToPrint = document.getElementById(elem);

            newWin = window.open("");

            newWin.document.write(divToPrint.outerHTML);

            newWin.print();

            newWin.close();

        }

        function sendemail() {

            $.ajax({

                type: 'POST', url: 'index.php?m=agreeterms', data: {

                    sendemail: {/literal}-1{literal},

                    agree_optional: {/literal}{$agree_optional}{literal},

                }

                , success: function (data) {

                    alert(data);

                }

            }

            );

        }

    </script>

{/literal}

{/if}

{if $template eq "dash"}

    <style>

        .checkbox{

            display: initial;        

        }

        #agreeterms{

            display: inline;        

        }    

    </style>

{/if}

{if $template eq "GigaTick"}

    <style>

        h1, h2, h3, h4, h5, h6 {

            color: #f5f5f5;

            font-weight: normal;

        }

    </style>

{/if}

{if $template eq "flare" || $template eq "croster"}

    <style>

        .panel-heading {

            padding: 10px 15px !important;

            background-color: #337ab7 !important;

        }

        .col-center-block {

            float: none !important;

            display: block !important;

            margin: 0 auto !important;

            /* margin-left: auto; margin-right: auto; */

        }

    </style>

{/if}

{if $template eq "GigaTick" || $template eq "BoxChat" || $template eq "HostHub2"}<section id="whmcscontentarea">

        <div class="container">

            <div class="row">

                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">

                    <div class="whmcscontentbox">

                        <div id="whmcsthemes">

                            <section id="main-body">

                            {/if}    

                            {if $template eq "flare" || $template eq "croster"}

                                <div class="col-md-12">

                                    <div class="col-md-9 col-center-block">

                                    {/if}    

                                    <div class="panel panel-primary">

                                        <div class="panel-heading" align="center">                                           

                                            <h4>{if $contactnoaccess}{$ATLANG.noaccess}{else}{$ATLANG.accepttermsconditions}{/if}</h4></div>

                                        <div class="panel-body pre-scrollable" id="termsarea">{$terms}</div>

                                        <div class="panel-footer" align="center">

                                            <form name="agreetermssuccess" id="agreetermssuccess" method="post" action="" class="text-center">

                                                <input type="hidden" name="agreeterms" value="true">

                                                <input type="hidden" name="productid" value="{$productid}">

                                                <input type="hidden" name="redirectto" value="{$redirectto}">

                                                <input type="hidden" name="enforcement" value="{$enforcement}">

                                                <input type="hidden" name="agree_optional" value="{$agree_optional}">

                                                <div>

                                                    <label for="agreeterms" class="checkbox">

                                                        <input {if $contactnoaccess}disabled="disabled"{/if} type="checkbox" name="agreeterms" id="agreeterms" value="1">

                                                       {$ATLANG.iagree}

                                                    </label>

                                                    <div id="ermsg" style="display:none;color:#FF0000;">{$ATLANG.accepttermsconditions}</div>

                                                    {if $drawsignature eq 'on'}

                                                        <input id="input-signature" type="hidden" name="signature" value="">

                                                        <p class="mt-3">Signed: </p>

                                                        <div id="displayarea"></div>





                                                        <!-- SIgnature Part -->

                                                        <div class="mt-3" id="signature-content">

                                                            <p class="mt-3">Please sign below:</p>    

                                                            <div id="signatureparent">

                                                                <div  id="signature"></div>

                                                            </div>

                                                        </div>

                                                        <!-- SIgnature Part -->





                                                        <p id="savesignatureoptions" class="mt-3">

                                                              <button onClick="javascript:void();" class="btn btn-info" id="btnReset">Reset</button>

                                                              <button onClick="javascript:void();" class="btn btn-success" id="btnSave">Save</button>

                                                        </p>

                                                    {/if}

                                                    

                                                </div>

                                                {if $printbutton}

                                                    <a class="btn btn-primary" {if $loggedin} target="_blank" href="modules/addons/agreeterms/PDFgen.php?global=true{if $agree_optional}&agree_optional=1{/if}" {else}  href="#" onclick="PrintElem('termsarea')"{/if}>{$ATLANG.print}</a>

                                                {/if}                                                      

                                                {if $loggedin}

                                                    {if $emailoption}

                                                        <input type="button" class="btn btn-warning" onclick="sendemail()"  value="{$ATLANG.email}">

                                                    {/if}

                                                {/if}                                                               

                                                <input type="button" {if $contactnoaccess}disabled="disabled"{/if} class="btn btn-success" id="btnContinue" onclick="agreeContinueOrder()" value="{$ATLANG.backhome}">

                                        </form>

                                    </div>

                                </div>

                                        

                                        

                                        

                                        

                                {if $template eq "GigaTick" || $template eq "BoxChat" || $template eq "HostHub2"}</section></div></div></div></div></div></section> {/if}    

        {if $template eq "flare" || $template eq "croster"}</div></div>{/if}    

