Bdtjtk

<form method="post" action="">



    <!-- VISITOR FIRST NAME -->

    <div class="form-group">

      <input type="text" class="form-control" name="visitor_first_name" id="visitor_first_name" placeholder="First Name" required>

    </div>



    <!-- VISITOR LAST NAME -->

    <div class="form-group">

      <input type="text" class="form-control" name="visitor_last_name" id="visitor_last_name" placeholder="Last Name" required>

    </div>



    <!-- VISITOR COMPANY NAME -->

    <div class="form-group">

      <input type="text" class="form-control" name="visitor_company_name" id="visitor_company_name" placeholder="Company Name" required>

    </div>



    <!-- VISITING PURPOSE -->

    <div class="form-group">

      <select class="custom-select form-control" name="visitor_visiting_purpose" id="visitor_visiting_purpose" style="width:100%;" required="required">

        <option value="" selected>Visiting Purpose</option>

        <option value="Visiting">Visiting</option>

        <option value="Cleaning">Cleaning</option>

        <option value="Delivery">Delivery</option>

        <option value="Maintanance">Maintanance</option>

      </select>

    </div>



    <!-- APARTMENT NUMBER -->

    <div class="form-group">

      <input type="text" class="form-control" name="visitor_visiting_apartment_number" id="visitor_visiting_apartment_number" placeholder="Apartment Number" required>

    </div>



    <!-- FORM SUBMIT FOR NEW REGISTRATION -->

    <div class="submitBtnContainer">

      <button type="button" data-toggle="modal" data-target="#digitalSignatureModal" class="btn my-2 my-sm-0 submitTakePhoto"><i class="fa fa-pencil" aria-hidden="true"></i>Signature</button>

      <button type="submit" name="sign_visitor_in" class="btn btn-success my-2 my-sm-0 signoutVisitorFormOption1"><i class="fa fa-sign-in" aria-hidden="true"></i> Sign In</button>

    </div>





    <!-- #### MODAL TO APPLY DIGITAL SIGNATURE #### -->

    <div class="modal fade" id="digitalSignatureModal" tabindex="-1" role="dialog">

      <div class="modal-dialog">

        <div class="modal-content">



          <!-- MODAL BODY LOGO -->

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

            <div id="signinSuccessModalLogo">

              <img src="img/Excellent-visitor-signin-small.png" alt="">

            </div>

          </div>



          <!-- MODAL BODY CONTENT -->

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

            <div class="modal-body" id="signinSuccessModalContent">



              <!-- DISPLAY IMAGE AFTER SIGNED -->

              <div id="signaturePad" data-role="content"></div>



              <!-- DIGITAL SIGNATURE SECTION -->

              <div  id="divPopUpSignContract">

                <div class="ui-content popUpHeight">

                  <div id="div_signcontract">



                    <!-- CANVAS TO DRAW SIGNATURE -->

                    <canvas id="canvas">Canvas is not supported</canvas>



                    <!-- SUBMIT SIGNATURE OR CLEAR -->

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

                      <!-- <input id="btnSubmitSign" type="button" class="btn btn-success" data-dismiss="modal" data-inline="true" data-mini="true" data-theme="b" value="Submit Signature" onclick="fun_submit()" style="border-radius: 5px; padding: 15px;" /> -->

                      <input id="btnSubmitSign" type="button" class="btn btn-success" data-inline="true" data-mini="true" data-theme="b" value="Submit Signature" onclick="fun_submit()" style="border-radius: 5px; padding: 15px;" />

                      <input id="btnClearSign" type="button" class="btn btn-warning commentbtn" data-inline="true" data-mini="true" data-theme="b" value="Clear" onclick="init_Sign_Canvas()" style="border-radius: 5px; padding: 15px;" />

                    </div>



                  </div>

                </div>

              </div>



            </div>

          </div>

          <!-- /MODAL BODY CONTENT -->



        </div>

      </div>

    </div>

    <!-- #### MODAL TO APPLY DIGITAL SIGNATURE #### -->



</form>

// ### SUBMIT SIGNIN FORM FOR NEW VISITOR REGISTRATION ###

if(isset($_POST['sign_visitor_in'])) {



  date_default_timezone_set('Asia/Dubai');

  $currentTime = date("H:i:s");



  // *** RETREIVE SUBMITTED INFORMATION ON SUBMIT FOR NEW VISITOR REGISTRATION ***

  $visitor_first_name                   = $_POST['visitor_first_name'];

  $visitor_last_name                    = $_POST['visitor_last_name'];

  $visitor_company_name                 = $_POST['visitor_company_name'];

  $visitor_visiting_purpose             = $_POST['visitor_visiting_purpose'];

  $visitor_visiting_apartment_number    = $_POST['visitor_visiting_apartment_number'];

  //$visitor_visit_status               = $_POST['visitor_visit_status'];

  $visitor_signin_date                  = date("Y-m-d");

  $visitor_signin_time                  = date("H:i:s");

  $visitor_signout_date                 = date("H:i:s");

  $visitor_signout_time                 = date("H:i:s");



  $visitor_signature                    = $_FILES['visitor_signature']['name'];

  $visitor_signature_tmp                = $_FILES['visitor_signature']['tmp_name'];



  move_uploaded_file($visitor_signature_tmp, "img/sign-in-signatures/$visitor_signature");



  exit();

  // *** I added exit() for testing purpose and once it works I remove it.



  // *** ADD NEW VISITOR SIGNIN RECORD TO DATABASE ***

  $query = "INSERT INTO visitors(visitor_first_name, visitor_last_name, visitor_company_name, visitor_visiting_purpose,

    visitor_visiting_apartment_number, visitor_visit_status, visitor_signin_date, visitor_signin_time, visitor_signout_date, visitor_signout_time, visitor_signature)";



  $query .= "VALUES('{$visitor_first_name}', '{$visitor_last_name}', '{$visitor_company_name}',

  '{$visitor_visiting_purpose}', '{$visitor_visiting_apartment_number}', 'Signed In', '{$visitor_signin_date}', '{$visitor_signin_time}', '', '', '{$visitor_signature}')";



  $result = mysqli_query($connection, $query);



  // *** GENERAL CONFIM QUERY ***

  if(!$result) {

    die("QUERY FAILED. " . mysqli_error($connection));

  }

}

function fun_submit() {

  if(isSign) {

    var canvas = $("#canvas").get(0);

    var imgData = canvas.toDataURL();

    jQuery('#signaturePad').find('p').remove();

    jQuery('#signaturePad').find('img').remove();

    jQuery('#signaturePad').append(jQuery('<p>Your Signature:</p>'));

    jQuery('#signaturePad').append($('<img/ name="visitor_signature">').attr('src',imgData));





    // I BELIEVE THIS IS WHERE THE PROCESS HAPPENS TO UPLOAD THE IMAGE TO THE FOLDER

    // I HAVE BEEN TRYING WITH DIFFERENT CODES IN THIS SECTION BUT NOT SUCCEEDING



    closePopUp();

  } else {

    alert('Please sign');

  }

}

    $visitor_signature                    = $_POST['visitor_signature'];



     // we receive something like : data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAvcAAADICAYAAABszM7qAAAZc0lEQVR4Xu3da4hVVRsH8GVeS

     // we remove the "data:image/png;base64,"



    $visitor_signature                    = preg_replace('#^data:image/w+;base64,#i', '', $visitor_signature);

    $visitor_signature                    = base64_decode($visitor_signature);



    file_put_contents("img/sign-in-signatures/" . $visitor_first_name . "_" . $visitor_last_name . "_signature_" . $visitor_company_name . ".png",$visitor_signature);



    $visitor_signature                    = base64_encode($visitor_signature);

// VISITOR SIGNATURE IMAGE

 echo "

 <td style='text-align:center;'>

    <img src='../img/sign-in-signatures/{$visitor_first_name}_{$visitor_last_name}_signature_{$visitor_company_name}.png' width='125px'>

 </td>";