<div class="container position-relative p-0 mt-90" style="max-width: 700px;">
    <h3 class="bg-theme-colored1 p-15 mb-0 text-white">Đặt lịch hẹn</h3>
    <div class="section-content bg-white p-30">
      <div class="row">
        <div class="col-md-12">
          <!-- Reservation Form Start-->
                <!-- Contact Form -->
                 <div class="form1">
                <form method="GET" > 
                    
                  <div class="form-row">
                    <div class="col-sm-6">
                      <div class="form-group">
                        <input name="datlich_name" class="form-control" type="text" placeholder="Enter Name">
                      </div>
                    </div>
                    <div class="col-sm-6">
                      <div class="form-group">
                       <input name="datlich_phone" class="form-control" type="text" placeholder="Enter Phone">
                      </div>
                    </div>
                  </div>
                  <div class="form-group">
                    <textarea name="datlich_notes" class="form-control required" rows="5" placeholder="Enter Message"></textarea>
                  </div>
                  <div class="form-group">
        
                    <button type="submit" class="btn btn-flat btn-theme-colored2 text-uppercase mb-sm-30 border-left-theme-color-2-4px" data-loading-text="Please wait...">Gởi</button>
                    <button type="reset" class="btn btn-flat btn-theme-colored3 text-uppercase mb-sm-30 border-left-theme-color-2-4px">Reset</button>
                  </div>
                </form>
                </div>
          <!-- Reservation Form End-->

          <!-- Reservation Form Validation Start-->
          <script>
            (function($) {
              $("#appointment_form_popup").validate({
                submitHandler: function(form) {
                  var form_btn = $(form).find('button[type="submit"]');
                  var form_result_div = '#form-result';
                  $(form_result_div).remove();
                  form_btn.before('<div id="form-result" class="alert alert-success" role="alert" style="display: none;"></div>');
                  var form_btn_old_msg = form_btn.html();
                  form_btn.html(form_btn.prop('disabled', true).data("loading-text"));
                  $(form).ajaxSubmit({
                    dataType:  'json',
                    success: function(data) {
                      if( data.status == 'true' ) {
                        $(form).find('.form-control').val('');
                      }
                      form_btn.prop('disabled', false).html(form_btn_old_msg);
                      $(form_result_div).html(data.message).fadeIn('slow');
                      setTimeout(function(){ $(form_result_div).fadeOut('slow') }, 6000);
                    }
                  });
                }
              });
            })(jQuery);
          </script>
          <!-- Reservation Form Validation Start -->
        </div>
      </div>
    </div>
    <button title="Close (Esc)" type="button" class="mfp-close mt-10">×</button>
  </div>
</section>

<!-- Footer Scripts -->
<script>
<script type="text/javascript">


    $(document).ready(function() {
        $("form1").click(function(e){
            e.preventDefault();

            var _token = $("input[name='_token']").val();
            var datlich_name = $("input[name='datlich_name']").val();
            var datlich_phone = $("input[name='datlich_name']").val();
            var datlich_notes = $("textarea[name='datlich_name']").val();


            $.ajax({
                url: "/confirm-datlich",
                type:'POST',
                data: {_token:_token,datlich_name:datlich_name,datlich_phone:datlich_phone,datlich_notes:datlich_notes},
                success: function(data) {
                    if($.isEmptyObject(data.error)){
                        alert(data.success);
                    }else{
                        printErrorMsg(data.error);
                    }
                }
            });


        }); 


        function printErrorMsg (msg) {
            $(".print-error-msg").find("ul").html('');
            $(".print-error-msg").css('display','block');
            $.each( msg, function( key, value ) {
                $(".print-error-msg").find("ul").append('<li>'+value+'</li>');
            });
        }
    });

</script>



  //reload date and time picker
  THEMEMASCOT.initialize.TM_datePicker();
</script>