<?php
include 'header.php';

include 'navbar2.php';

  
?>

<?php $today = date('d-M-Y'); ?>

<?php
if(!empty($_POST['submit'])){

      appointment_booking();
   }
 if(!empty($_GET['app']))
    {
    ?>
      <script>
        alert('Your Appointment Booked');
         window.location.href="appointment.php";
       </script>
     <?php } ?>

<section class="appointment-area bg-image ptb-100">
<div class="container">
<div class="appointment-form">
<h4><i class="flaticon-calendar"></i> Make An Appointment</h4>
<form method="post"  onsubmit = "return modal_validation()">
<div class="form-group">
<input type="text" name="name" id="name" class="form-control" placeholder="Name">
</div>
<div class="form-group">
<input type="text" name="email" id="appointment_email" class="form-control" placeholder="Email">
</div>
<div class="form-group">
<input type="text" maxlength="10" nospace onkeypress="return isNumber(event)" name="phone" id="phone" class="form-control" placeholder="Phone">
</div>
<div class="form-group">
 <select name="services" id="services">
                 <option value="">Select Services</option>
                 <option value="rootcanal">Root canal</option>
                 <option value="Orthodontics">Orthodontics</option>
                 <option value="toothfixation">Tooth Fixation</option>
                 <option value="flapsurgery">Flap Surgery</option>
                 <option value="bonefracturetreatment">Bone Fracture Treatment</option>
                 <option value="tumortreatment">Tumor Treatment</option>
                 <option value="dentalcrowns">Dental crowns</option>
                 <option value="sealantsforchildren">Sealants for children</option>
                 <option value="dentures">Dentures</option>
                 <option value="cavitytreatment">Cavity Treatment</option>
             </select>
</div>
<div class="form-group">
 <select name="slots" id="timeslot">
                 <option value="">Select Slots</option>
                 <option value="morning">Morning</option>
                 <option value="afternoon">AfterNoon</option>
                 <option value="evening">Evening</option>
             </select>
</div>
<div class="form-group">
<input type="datepicker" class="form-control" placeholder="Date" id="datepicker" readonly  name="app_date" required value="<?php echo $today ?>">
 </div>
<input type="submit" name="submit" value="Book Appointment"  class="default-btn"> 
</form>
</div>
</div>
</section>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

  <script>
        (function ($) {
            $("#datepicker").datepicker({ minDate :0 });
             
        })(jQuery);

 
    </script>

<?php
include 'footer.php';
?>




  <script>
    function modal_validation(){
        var ph = $('#phone').val();
        var phlen = ph.length;
         var  email_id = $('#appointment_email').val();
        var filter_id = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        if ($('#name').val() == '') {

           alert('Please Enter Your Name');
            return false;
        } 
        else if ($('#app_date').val() == '') {
            
            alert('Choose Appointment Date');
            return false;
        } 
      
        else if ($('#services').val() == '') {
            
            alert('Please Select Services');
            return false;
        } 

        else if ($('#timeslot').val() == '') {
            
            alert('Please Select Time slot');
            return false;
        } 

        else if ($('#phone').val() == '') {
            
            alert('Please Enter Phone Number');
            return false;
        } 
        else if (phlen < 10) {
          alert("Enter 10 Digits Mobile Number");
            
            return false;
        } 
       else if ($('#appointment_email').val() == '') {
            
            alert('Please Enter Email');
            return false;
        } 

         else if(!email_id.match(filter_id))
        {
            alert("Enter Valid Email Id");
            
            return false;
        }
       
        else
        {
           return true;
        }
    }


</script>
<script>
    $('.noSpace').keyup(function() {
 this.value = this.value.replace(/\s/g,'');
});
      function isNumber(evt,ref,len)
        {
        evt = (evt) ? evt : window.event;
        var charCode = (evt.which) ? evt.which : evt.keyCode;
        if(charCode == 8 || charCode == 9 ){
        return true;
        }
        var ctrlDown = evt.ctrlKey||evt.metaKey // Mac support

        if (charCode > 31 && (charCode < 48 || charCode > 57) && charCode != 46 || charCode == 8 || charCode == 37 || charCode == 39 || ( ctrlDown && charCode==86)) {
        return false;
        }
        else if(ref.val().length >= len){
        return false;
            }
        return true;
             }
  </script>