@extends('front.frontLayout')
@section('title','Appointment Booking')
@section('pagelevelcss')
@stop
@section('content')
@php
$service = $name_url;
$name = Session::get('name');
$appointment_time = (Session::get('appointment_time')) ? Session::get('appointment_time') : "";
$appointment_date = (Session::get('appointment_date')) ? Session::get('appointment_date') : "";
if(Session::get('name')){
   $user_name = Session::get('name');
   $user_email = Session::get('email');
   $user_phone = Session::get('phone');
} else if(Auth::user() && Auth::user()->name){
   $user_name = Auth::user()->name;
   $user_email = Auth::user()->email;
   $user_phone = Auth::user()->phone;
} else {
   $user_name = old('name');
   $user_email = old('email');
   $user_phone = old('phone');
}
@endphp
<section class="test-appointment section-padding" id="test-appointment-sec">
   <div class="container">
      <form name="appointment_booking_form" id="appointment_booking_form" method="post" action="{{route('appointment.booking')}}" enctype="multipart/form-data">
         {{ csrf_field() }}
         <div class="row  test-appointment">
            <div class="col-lg-6 col-md-12 app-img">
              
            </div>
            <div class="col-lg-6 col-md-12">
               <div class="appointment-form" id="appointment-reg">
                  <h1 class="h3 mb-5 font-weight-normal main-title" style="text-align: center">Personal information</h1>
                           @foreach($packages as $value)
                              @if(Session::get('name_url') == $value->name_url)
                                 <p><span class="mr-2">Service:</span>{{ $value->name }} ${{ $value->price }}</p>
                              @elseif($service == $value->name_url)
                                 <p><span class="mr-2">Service:</span>{{ $value->name }} ${{ $value->price }}</p>
                              @endif
                           @endforeach
                        <select name="package_id" id="package_id" class="filter form-control valid" value="{{old('package_id')}}" style="display: none;">
                           <option value="">Select Service*</option>
                           @foreach($packages as $value)
                              <option value="{{ $value->id }}" {{ ($service == $value->name_url || Session::get('name_url') == $value->name_url) ? 'selected' : ''}}>{{ $value->name }} ${{ $value->price }}</option>
                           @endforeach
                        </select>
                        <div class="h-44">
                     <input type="text" name="appointment_date" id="appointment_date" class="form-control datepicker" value="{{ ($appointment_date) ? $appointment_date : old('appointment_date') }}" placeholder="Select appointment date*" readonly>
                     <select class="form-control" name="appointment_time" id="appointment_time">
                        <option value="">Select appointment time</option>
                     </select> 
                     <!-- <input type="text" name="appointment_time" id="appointment_time" class="form-control appointment-timepicker" value="{{old('appointment_time')}}" placeholder="Select appointment time*"> -->
                  </div>
                  <input type="hidden" id="name_url" name="name_url" class="form-control" value="{{ $service }}" maxlength="255">
                  <input type="text" id="name" name="name" class="form-control" placeholder="Name*" value="{{ $user_name }}" maxlength="255">
                  <input type="text" id="email" name="email" class="form-control" placeholder="Email*" value="{{ $user_email }}" maxlength="255">
                  <input type="text" id="phone" name="phone" class="form-control" placeholder="Phone*" value="{{ $user_phone }}" maxlength="12">
                  <textarea name="description" id="inputdetail" class="form-control" name="w3review" rows="4" cols="50" placeholder="Discription*" style="display: none;">{{ (Session::get('description')) ? Session::get('description') : (old('description')) ? old('description') : ""}}</textarea>
                  <div class="custom-file my-1" style="display: none;">
                     <input type="file" class="custom-file-input form-control" id="customFile" name="document">
                     <label class="custom-file-label form-control" for="customFile">Choose file*</label>
                     <span class="document-error" style="color: red;"></span>
                  </div>
                  <div class="text-center mt-5">
                     <button class="btn custom-btn " id="appointment-submit" type="submit">Submit</button>
                     <button class="btn custom-btn order-btn" onclick="reloadPage();" type="submit">Clear</button>
                  </div>
               </div>
            </div>
         </div>
      </form>
   </div>
</section>
<input type="hidden" id="appointment_data" value="{{ $date_desabeled }}">
@endsection
@section('pageleveljs')
<script src="{{asset('frontend/js/jquery.validate.min.js')}}?v=1.0"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script type="text/javascript">
function reloadPage(){
  location.reload(true);
}
$(".custom-file-input").on("change", function() {
  var fileName = $(this).val().split("\\").pop();
  $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});
$(function(){

   var appointment_date = '{{$appointment_date}}';
   if(appointment_date != ""){
      $.ajax({
         type: "get",
         url: "{{ route('covid.appointment.time') }}",
         dataType: "json",
         data: {app_date:$(this).val()},
         async: false,
         success: function (response)
         {
            if (response.success == true) {
               $('#appointment_time').html(response.html);
               $("#appointment_time [value='{{$appointment_time}}']").attr('selected', 'selected');
            }
         }
      });
   }

   $.validator.addMethod('filesize', function (value, element, param) {
         return this.optional(element) || (element.files[0].size <= param)
   }, 'Maximum file size to upload is 2MB.');
   let today = new Date();
   var dd = String(today.getDate()).padStart(2, '0');
   var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
   var yyyy = today.getFullYear();
   today = dd + '/' + mm + '/' + yyyy;

   $("#appointment_booking_form").validate({
      ignore: '',
      rules: {   
         //package_id:"required",
         name:"required",
         email:{
            required: true,
            email: true,
         },
         phone:{
            required: true,
            // phoneUS: true,
            maxlength:12
         },
         // description:{
         //    required: true,
         // },
         appointment_date:{
            required: true,
            // checkappointmentdate: true
         },
         appointment_time:{
            required: true,
            checkappointmenttime: true
         },
         // document:{
         //    required: true,
         //    extension: "jpg,jpeg,png,pdf,doc,docm,docx",
         //    filesize: 2097152,
         // },
      },
      messages:{
         // package_id: {
         //    required: "Please select service.",
         // },
         name: {
            required: "Please enter name.",
         },
         email: {
            required: "Please enter email.",
            email: "Please enter valid email.",
         },
         phone: {
            required: "Please enter phone.",
            // phoneUS: "Please enter a valid phone.",
         },
         // description: {
         //    required: "Please enter description.",
         // },
         appointment_date: {
            required: "Please select appointment date.",
            // min: "Please enter a value greater than or equal to today date",
            //min: "Please enter a value greater than or equal to "+today,
         },
         appointment_time: {
            required: "Please select appointment time.",
         },
         // document: {
         //    required: "Please upload document.",
         //    extension: "Only document type jpg/png/jpeg/pdf/doc/docm/docx is allowed.",
         //    filesize: "Maximum file size to upload is 2MB.",
         // },
      },
      errorPlacement: function(error, element) {
        if (element.attr("name") == "document" ) {
            $(".document-error").text(error[0].innerText);
        } else {
            error.insertAfter(element);
        }
      },
      errorElement: 'span',
   });
   // $.validator.addMethod("checkappointmentdate", function (value, element) {
   //      var isFound = false;
   //      var app_time = $('#appointment_time').val();
   //      $.ajax({
   //          type: "POST",
   //          url: "{{ ('appointmentAlreadyRegistered') }}",
   //          dataType: "json",
   //          data: { _token: "{{ csrf_token() }}",app_time:app_time,app_date:value,type:1 },
   //          async: false,
   //          success: function (response)
   //          {
   //              // if the email address does not exists, it returns a string "true"
   //              if (response.msg == true) {
   //                  isFound = false;
   //              } else {
   //                  isFound = true;
   //              }
   //          }
   //      })
   //      return isFound;
   //  }, "Appointment is Already Taken");
   // $.validator.addMethod("checkappointmenttime", function (value, element) {
   //      var isFound = false;
   //      var app_date = $('#appointment_date').val();
   //      $.ajax({
   //          type: "POST",
   //          url: "{{ ('appointmentAlreadyRegistered') }}",
   //          dataType: "json",
   //          data: { _token: "{{ csrf_token() }}",app_time:value,app_date:app_date,type:1 },
   //          async: false,
   //          success: function (response)
   //          {
   //              // if the email address does not exists, it returns a string "true"
   //              if (response.msg == true) {
   //                  isFound = false;
   //              } else {
   //                  isFound = true;
   //              }
   //          }
   //      })
   //      return isFound;
   //  }, "Appointment is Already Taken");
   var appointment_data = $('#appointment_data').val();
   if (appointment_data != "[]" && appointment_data.length > 0) {
      $('.datepicker').datepicker({
          format: 'mm-dd-yyyy',
          autoclose: true,
          // setDate, new Date(),
          startDate: "today",
          // startDate: '-0m',
          todayHighlight: true,
          daysOfWeekDisabled: [0, 6],
          datesDisabled: appointment_data,
      }).on('changeDate', function(ev){
         var id = $(this).attr('id');
         const myArray = id.split("-");
         $.ajax({
            type: "get",
            url: "{{ route('covid.appointment.time') }}",
            dataType: "json",
            data: {app_date:$(this).val()},
            async: false,
            success: function (response)
            {
               if (response.success == true) {
                  $('#appointment_time').html(response.html);
               }
            }
         });
      });
   } else {
      $('.datepicker').datepicker({
          format: 'mm-dd-yyyy',
          autoclose: true,
          startDate: "today",
          // startDate: '-0m',
          todayHighlight: true,
          daysOfWeekDisabled: [0, 6],
          datesDisabled: '',
      }).on('changeDate', function(ev){
         var id = $(this).attr('id');
         const myArray = id.split("-");
         $.ajax({
            type: "get",
            url: "{{ route('covid.appointment.time') }}",
            dataType: "json",
            data: {app_date:$(this).val()},
            async: false,
            success: function (response)
            {
               if (response.success == true) {
                  $('#appointment_time').html(response.html);
               }
            }
         });
      });
   }
     // $('.timepicker').timepicker({
     //   format: 'hh:mm A',
     //   step:15,
     //   hideOnSelect: false,
     // });
});
</script>
@stop