@extends('admin.layouts.contentLayoutMaster')

@section('title','Upcoming Appointment Edit')
@section('pagelevelcss')
@stop
@section('content')
<div class="section">
    <div class="card">
        <div class="card-content">
           <div class="row">
            <form class="col s12" action="{{route('upcoming.appointment.update', ['id' => \App\Helpers\Helper::encrypt($editdata->id)])}}" method="post" id="appointment_form">
                {{ csrf_field() }} 
              @php
              $app_date = '';
              @endphp
              @if(isset($editdata->app_date) && !empty($editdata->app_date))
              @php
              $app_date = date("m-d-Y", strtotime($editdata->app_date) );
              @endphp
              @endif              
              <div class="col-md-6">
                  <input type="text" class="appointment-datepicker" name="app_date" id="app_date" value="{{$editdata->app_date}}" placeholder="Date" />
              </div>
              <div class="col-md-6">
                  <input type="text" class="datetimepicker" name="app_time" id="app_time" value="{{$editdata->app_time}}" placeholder="Time" /> 
              </div>
              <button class="btn waves-effect waves-light" type="submit">Submit
                <!-- <i class="material-icons right">send</i> -->
              </button>
            </form>
          </div>
        </div>
    </div>
</div>
@endsection
@section('pageleveljs')
<script type="text/javascript">
  $(function(){
      $("#appointment_form").validate({
        ignore: '',
        rules: { 
           app_date:{
              required: true,
              checkappointmentdate: true
           },
           app_time:{
              required: true,
              checkappointmenttime: true
           }
        },
        messages:{
           app_date: {
              required: "Please select appointment date.",
           },
           app_time: {
              required: "Please select appointment time.",
           }
        },
        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 = $('#app_time').val();
          $.ajax({
              type: "POST",
              url: "{{ route('appointmentAlreadyRegistered') }}",
              dataType: "json",
              data: { _token: "{{ csrf_token() }}",app_time:app_time,app_date:value,type:2 },
              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 = $('#app_date').val();
          $.ajax({
              type: "POST",
              url: "{{ route('appointmentAlreadyRegistered') }}",
              dataType: "json",
              data: { _token: "{{ csrf_token() }}",app_time:value,app_date:app_date,type:2 },
              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");
        $('.datepicker-from-today').datepicker({
          format: 'mm-dd-yyyy',
          todayHighlight: true,
          startDate: new Date()
        });
        $('.datepicker-from-today1').datetimepicker({
              format: 'MM-DD-YYYY',
              minDate: 0
        });
        $('.timepicker').timepicker({
          format: 'hh:mm A',
          stepping: 15,
          hideOnSelect: false,
        });
        $('.datetimepicker').datetimepicker({
            format: 'hh:mm A',
            stepping: 15,
            disabledTimeIntervals: [
                [moment().hour(0).minutes(0), moment().hour(8).minutes(59)],
                [moment().hour(16).minutes(30), moment().hour(24).minutes(0)]
            ]
        });
        $('.appointment-datepicker').datepicker({
          format: 'mm-dd-yyyy',
          todayHighlight: true,
          startDate: new Date(),
          daysOfWeekDisabled: [0, 6]
        });
    });
</script>

@stop