@extends('layouts.instructor')
@section('content')

@php
$ADD_AVAILABILITY_ACCESS   = false;
$VIEW_AVAILABILITY_ACCESS   = false;

$ADD_AVAILABILITY_ACCESS    = Helper::instructor_can_access('Add Availability');
$VIEW_AVAILABILITY_ACCESS    = Helper::instructor_can_access('View Availability');
@endphp 
<link rel="stylesheet" href="{{ asset('admin/css/date-style.css') }}">

<div class="main-content-wrap sidenav-open d-flex flex-column">
   <!-- ============ Body content start ============= -->
   <div class="main-content">
      <div class="row">
         <!-- ============Breadcrumb Pagination ============= -->
         <div class="col-sm-11">
            <ul class="breadcrumb">
               <li> <a href="javascript:;">Instructor</a></li>
               <li>Availability</li>
            </ul>
         </div>
         <!-- ============Back Button ============= -->
         <div class="col-sm-1 back-arrow">
            <div class="text-center">
               <a href="javascript:history.back()"> <i class="fas fa-arrow-circle-left fa-2x"></i> </a>
            </div>
         </div>
      </div>
      <!-- ========================= -->
      <div class="row">
         <div class="card text-left">
            <div class="card-body">
               <div class="row">
                  <div class="col-md-3">
                     <h3 class="mb-3" style="font-weight:700"> {{ ucwords($user->first_name.' '.$user->last_name)}} @if($user->status=='1')<span class="badge badge-success status-css user-status-css">{{"Active"}}</span>@elseif($user->status=='0')<span class="badge badge-danger status-css user-status-css">{{"Inactive"}}</span>@else<span class="badge badge-warning status-css">{{"Pending"}}</span>@endif<br>
                        <small style="font-size: 66%;">Learner ID: {{$user->id}}</small>
                     </h3>
                  </div>
               </div>
               <div class="row">
                  <div class="col-md-12" style="background-color:#1a68b3;">
                     @include('instructor.profile.submenu')
                  </div>
               </div>
               <div class="row justify-content-center">
                  <div class="col-md-12">
          
                        <div class="tab-content" id="myTabContent">
                              <div class="col-md-12 text-center pb-3">
                            <h3 class="text-blue fw-700">Availability</h3>
                         </div>
                        <div class="tab-pane fade active show" id="home" role="tabpanel" aria-labelledby="home-tab">
                           <!--<div class="my-3 text-center ">
                              <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalCenter"> Unavailability</button>
                              <button class="btn btn-primary" id="removeunvaibility">Remove Unavailability</button>
                           </div> -->
                           @if ($VIEW_AVAILABILITY_ACCESS) 
                           <div class="row justify-content-center mt-4">
                              <div class="col-md-8">
                                 <h3>Set your weekly hours</h3>
                                  <form action="{{ route('instructor.availability.update') }}" method="post" id="createAvailabilityForm">
                                    @csrf    
                                    <input type="hidden" name="user_id" value="{{ Request::segment(5) }}">                               
                                    <div class="weeklist d-block d-md-flex justify-content-between">
                                       <div class="fw-bold">Sunday</div>
                                       @if(count($times1)==0)
                                        <div class="text-danger un-lable">Unavailable</div>
                                        @endif
                                        <div class="input-date-box">
                                            <div class="appendboxDate" data-id="1">
                                                @if(count($times1)>0)
                                                    @foreach($times1 as $day)
                                                        <div class="slot-item d-flex align-items-center justify-content-between mb-3">
                                                            <input type="text" placeholder="From :" class="form-control timepicker f-basis-45" name="f1[]" value="{{$day->time_from}}" />
                                                            <label class="m-0">-</label>
                                                            <input type="text"  placeholder="To :" class="form-control timepicker f-basis-45" name="t1[]" value="{{$day->time_to}}" />
                                                            <i class="fa-solid fa fa-trash removeMon"></i>
                                                        </div>
                                                    @endforeach
                                                @endif
                                            </div>
                                        </div>
                                        <div class=" d-flex ">
                                            <div class="pe-2"><i class="fa-solid addItembtn fa fa-plus" data-f="f1[]" data-t="t1[]"></i></div>
                                            <div class="pe-2 filterbtn"><i class="fa-solid fa-rotate"></i></div>
                                            <div class="filter-menu" data-id="1">
                                                <div class="form-check">
                                                    <label class="form-check-label">
                                                        Monday
                                                        <input class="form-check-input" type="checkbox" value="2">
                                                    </label>
                                                </div>
                                                <div class="form-check">
                                                    <label class="form-check-label">
                                                        Tuesday
                                                        <input class="form-check-input" type="checkbox" value="3">
                                                    </label>
                                                </div>
                                                <div class="form-check">
                                                    <label class="form-check-label">
                                                        Wednesday
                                                        <input class="form-check-input" type="checkbox" value="4">
                                                    </label>
                                                </div>
                                                <div class="form-check">
                                                    <label class="form-check-label">
                                                        Thursday
                                                        <input class="form-check-input" type="checkbox" value="5">
                                                    </label>
                                                </div>
                                                <div class="form-check">
                                                    <label class="form-check-label">
                                                        Friday
                                                        <input class="form-check-input" type="checkbox" value="6">
                                                    </label>
                                                </div>
                                                <div class="form-check">
                                                    <label class="form-check-label">
                                                        Saturday
                                                        <input class="form-check-input" type="checkbox" value="7">
                                                    </label>
                                                </div>
                                                <button type="button" class="btn btn-primary btn-filled ap-btn">Apply</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="weeklist d-block d-md-flex justify-content-between">
                                        <div class="fw-bold">Monday</div>
                                        @if(count($times2)==0)
                                        <div class="text-danger un-lable">Unavailable</div>
                                        @endif

                                        <div class="input-date-box">
                                            <div class="appendboxDate" data-id="2">
                                                @if(count($times2)>0)
                                                    @foreach($times2 as $day)
                                                        <div class="slot-item d-flex align-items-center justify-content-between mb-3">
                                                            <input type="text" placeholder="From :" class="form-control timepicker f-basis-45" name="f2[]" value="{{$day->time_from}}" />
                                                            <label class="m-0">-</label>
                                                            <input type="text"  placeholder="To :" class="form-control timepicker f-basis-45" name="t2[]" value="{{$day->time_to}}" />
                                                            <i class="fa-solid fa fa-trash removeMon"></i>
                                                        </div>
                                                    @endforeach
                                                @endif
                                            </div>
                                        </div>

                                        <div class=" d-flex ">
                                            <div class="pe-2"><i class="fa-solid addItembtn fa fa-plus" data-f="f2[]" data-t="t2[]"></i></div>
                                            <div class="pe-2 filterbtn"><i class="fa-solid fa-rotate"></i></div>
                                            <div class="filter-menu" data-id="2">
                                                <div class="form-check">
                                                    <label class="form-check-label">
                                                        Sunday
                                                        <input class="form-check-input" type="checkbox" value="1">
                                                    </label>
                                                </div>
                                                <div class="form-check">
                                                    <label class="form-check-label">
                                                        Tuesday
                                                        <input class="form-check-input" type="checkbox" value="3">
                                                    </label>
                                                </div>
                                                <div class="form-check">
                                                    <label class="form-check-label">
                                                        Wednesday
                                                        <input class="form-check-input" type="checkbox" value="4">
                                                    </label>
                                                </div>
                                                <div class="form-check">
                                                    <label class="form-check-label">
                                                        Thursday
                                                        <input class="form-check-input" type="checkbox" value="5">
                                                    </label>
                                                </div>
                                                <div class="form-check">
                                                    <label class="form-check-label">
                                                        Friday
                                                        <input class="form-check-input" type="checkbox" value="6">
                                                    </label>
                                                </div>
                                                <div class="form-check">
                                                    <label class="form-check-label">
                                                        Saturday
                                                        <input class="form-check-input" type="checkbox" value="7">
                                                    </label>
                                                </div>
                                                <button type="button" class="btn btn-primary btn-filled ap-btn">Apply</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="weeklist d-block d-md-flex justify-content-between  ">
                                        <div class="fw-bold">Tuesday</div>
                                        @if(count($times3)==0)
                                        <div class="text-danger un-lable">Unavailable</div>
                                        @endif

                                        <div class="input-date-box">
                                            <div class="appendboxDate" data-id="3">
                                                @if(count($times3)>0)
                                                    @foreach($times3 as $day)
                                                        <div class="slot-item d-flex align-items-center justify-content-between mb-3">
                                                            <input type="text" placeholder="From :" class="form-control timepicker f-basis-45" name="f3[]" value="{{$day->time_from}}" />
                                                            <label class="m-0">-</label>
                                                            <input type="text"  placeholder="To :" class="form-control timepicker f-basis-45" name="t3[]" value="{{$day->time_to}}" />
                                                            <i class="fa-solid fa fa-trash removeMon"></i>
                                                        </div>
                                                    @endforeach
                                                @endif
                                            </div>
                                        </div>

                                        <div class=" d-flex ">
                                            <div class="pe-2"><i class="fa-solid addItembtn fa fa-plus" data-f="f3[]" data-t="t3[]"></i></div>
                                            <div class="pe-2 filterbtn"><i class="fa-solid fa-rotate"></i></div>
                                            <div class="filter-menu" data-id="3">
                                                <div class="form-check">
                                                    <label class="form-check-label">
                                                        Sunday
                                                        <input class="form-check-input" type="checkbox" value="1">
                                                    </label>
                                                </div>
                                                <div class="form-check">
                                                    <label class="form-check-label">
                                                        Monday
                                                        <input class="form-check-input" type="checkbox" value="2">
                                                    </label>
                                                </div>
                                                <div class="form-check">
                                                    <label class="form-check-label">
                                                        Wednesday
                                                        <input class="form-check-input" type="checkbox" value="4">
                                                    </label>
                                                </div>
                                                <div class="form-check">
                                                    <label class="form-check-label">
                                                        Thursday
                                                        <input class="form-check-input" type="checkbox" value="5">
                                                    </label>
                                                </div>
                                                <div class="form-check">
                                                    <label class="form-check-label">
                                                        Friday
                                                        <input class="form-check-input" type="checkbox" value="6">
                                                    </label>
                                                </div>
                                                <div class="form-check">
                                                    <label class="form-check-label">
                                                        Saturday
                                                        <input class="form-check-input" type="checkbox" value="7">
                                                    </label>
                                                </div>
                                                <button type="button" class="btn btn-primary btn-filled ap-btn">Apply</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="weeklist d-block d-md-flex justify-content-between  ">
                                        <div class="fw-bold">Wednesday</div>
                                        @if(count($times4)==0)
                                        <div class="text-danger un-lable">Unavailable</div>
                                        @endif

                                        <div class="input-date-box">
                                            <div class="appendboxDate" data-id="4">
                                                @if(count($times4)>0)
                                                    @foreach($times4 as $day)
                                                        <div class="slot-item d-flex align-items-center justify-content-between mb-3">
                                                            <input type="text" placeholder="From :" class="form-control timepicker f-basis-45" name="f4[]" value="{{$day->time_from}}" />
                                                            <label class="m-0">-</label>
                                                            <input type="text"  placeholder="To :" class="form-control timepicker f-basis-45" name="t4[]" value="{{$day->time_to}}" />
                                                            <i class="fa-solid fa fa-trash removeMon"></i>
                                                        </div>
                                                    @endforeach
                                                @endif
                                            </div>
                                        </div>

                                        <div class=" d-flex ">
                                            <div class="pe-2"><i class="fa-solid addItembtn fa fa-plus" data-f="f4[]" data-t="t4[]"></i></div>
                                            <div class="pe-2 filterbtn"><i class="fa-solid fa-rotate"></i></div>
                                            <div class="filter-menu"  data-id="4">
                                                <div class="form-check">
                                                    <label class="form-check-label">
                                                        Sunday
                                                        <input class="form-check-input" type="checkbox" value="1">
                                                    </label>
                                                </div>
                                                <div class="form-check">
                                                    <label class="form-check-label">
                                                        Monday
                                                        <input class="form-check-input" type="checkbox" value="2">
                                                    </label>
                                                </div>
                                                <div class="form-check">
                                                    <label class="form-check-label">
                                                        Tuesday
                                                        <input class="form-check-input" type="checkbox" value="3">
                                                    </label>
                                                </div>
                                                <div class="form-check">
                                                    <label class="form-check-label">
                                                        Thursday
                                                        <input class="form-check-input" type="checkbox" value="5">
                                                    </label>
                                                </div>
                                                <div class="form-check">
                                                    <label class="form-check-label">
                                                        Friday
                                                        <input class="form-check-input" type="checkbox" value="6">
                                                    </label>
                                                </div>
                                                <div class="form-check">
                                                    <label class="form-check-label">
                                                        Saturday
                                                        <input class="form-check-input" type="checkbox" value="7">
                                                    </label>
                                                </div>
                                                <button type="button" class="btn btn-primary btn-filled ap-btn">Apply</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="weeklist d-block d-md-flex justify-content-between  ">
                                        <div class="fw-bold">Thursday</div>
                                        @if(count($times5)==0)
                                        <div class="text-danger un-lable">Unavailable</div>
                                        @endif

                                        <div class="input-date-box">
                                            <div class="appendboxDate" data-id="5">
                                                @if(count($times5)>0)
                                                    @foreach($times5 as $day)
                                                        <div class="slot-item d-flex align-items-center justify-content-between mb-3">
                                                            <input type="text" placeholder="From :" class="form-control timepicker f-basis-45" name="f5[]" value="{{$day->time_from}}" />
                                                            <label class="m-0">-</label>
                                                            <input type="text"  placeholder="To :" class="form-control timepicker f-basis-45" name="t5[]" value="{{$day->time_to}}" />
                                                            <i class="fa-solid fa fa-trash removeMon"></i>
                                                        </div>
                                                    @endforeach
                                                @endif
                                            </div>
                                        </div>

                                        <div class=" d-flex ">
                                            <div class="pe-2"><i class="fa-solid addItembtn fa fa-plus" data-f="f5[]" data-t="t5[]"></i></div>
                                            <div class="pe-2 filterbtn"><i class="fa-solid fa-rotate"></i></div>
                                            <div class="filter-menu" data-id="5">
                                                <div class="form-check">
                                                    <label class="form-check-label">
                                                        Sunday
                                                        <input class="form-check-input" type="checkbox" value="1">
                                                    </label>
                                                </div>
                                                <div class="form-check">
                                                    <label class="form-check-label">
                                                        Monday
                                                        <input class="form-check-input" type="checkbox" value="2">
                                                    </label>
                                                </div>
                                                <div class="form-check">
                                                    <label class="form-check-label">
                                                        Tuesday
                                                        <input class="form-check-input" type="checkbox" value="3">
                                                    </label>
                                                </div>
                                                <div class="form-check">
                                                    <label class="form-check-label">
                                                        Wednesday
                                                        <input class="form-check-input" type="checkbox" value="4">
                                                    </label>
                                                </div>
                                                <div class="form-check">
                                                    <label class="form-check-label">
                                                        Friday
                                                        <input class="form-check-input" type="checkbox" value="6">
                                                    </label>
                                                </div>
                                                <div class="form-check">
                                                    <label class="form-check-label">
                                                        Saturday
                                                        <input class="form-check-input" type="checkbox" value="7">
                                                    </label>
                                                </div>
                                                <button type="button" class="btn btn-primary btn-filled ap-btn">Apply</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="weeklist d-block d-md-flex justify-content-between  ">
                                        <div class="fw-bold">Friday</div>
                                        @if(count($times6)==0)
                                        <div class="text-danger un-lable">Unavailable</div>
                                        @endif

                                        <div class="input-date-box">
                                            <div class="appendboxDate" data-id="6">
                                                @if(count($times6)>0)
                                                    @foreach($times6 as $day)
                                                        <div class="slot-item d-flex align-items-center justify-content-between mb-3">
                                                            <input type="text" placeholder="From :" class="form-control timepicker f-basis-45" name="f6[]" value="{{$day->time_from}}" />
                                                            <label class="m-0">-</label>
                                                            <input type="text"  placeholder="To :" class="form-control timepicker f-basis-45" name="t6[]" value="{{$day->time_to}}" />
                                                            <i class="fa-solid fa fa-trash removeMon"></i>
                                                        </div>
                                                    @endforeach
                                                @endif
                                            </div>
                                        </div>

                                        <div class=" d-flex ">
                                            <div class="pe-2"><i class="fa-solid addItembtn fa fa-plus" data-f="f6[]" data-t="t6[]"></i></div>
                                            <div class="pe-2 filterbtn"><i class="fa-solid fa-rotate"></i></div>
                                            <div class="filter-menu" data-id="6">
                                                <div class="form-check">
                                                    <label class="form-check-label">
                                                        Sunday
                                                        <input class="form-check-input" type="checkbox" value="1">
                                                    </label>
                                                </div>
                                                <div class="form-check">
                                                    <label class="form-check-label">
                                                        Monday
                                                        <input class="form-check-input" type="checkbox" value="2">
                                                    </label>
                                                </div>
                                                <div class="form-check">
                                                    <label class="form-check-label">
                                                        Tuesday
                                                        <input class="form-check-input" type="checkbox" value="3">
                                                    </label>
                                                </div>
                                                <div class="form-check">
                                                    <label class="form-check-label">
                                                        Wednesday
                                                        <input class="form-check-input" type="checkbox" value="4">
                                                    </label>
                                                </div>
                                                <div class="form-check">
                                                    <label class="form-check-label">
                                                        Thursday
                                                        <input class="form-check-input" type="checkbox" value="5">
                                                    </label>
                                                </div>
                                                <div class="form-check">
                                                    <label class="form-check-label">
                                                        Saturday
                                                        <input class="form-check-input" type="checkbox" value="7">
                                                    </label>
                                                </div>
                                                <button type="button" class="btn btn-primary btn-filled ap-btn">Apply</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="weeklist d-block d-md-flex justify-content-between  ">
                                        <div class="fw-bold">Saturday</div>
                                        @if(count($times7)==0)
                                        <div class="text-danger un-lable">Unavailable</div>
                                        @endif

                                        <div class="input-date-box">
                                            <div class="appendboxDate" data-id="7">
                                                @if(count($times7)>0)
                                                    @foreach($times7 as $day)
                                                        <div class="slot-item d-flex align-items-center justify-content-between mb-3">
                                                            <input type="text" placeholder="From :" class="form-control timepicker f-basis-45" name="f7[]" value="{{$day->time_from}}" />
                                                            <label class="m-0">-</label>
                                                            <input type="text" placeholder="To :" class="form-control timepicker f-basis-45" name="t7[]" value="{{$day->time_to}}" />
                                                            <i class="fa-solid fa fa-trash removeMon"></i>
                                                        </div>
                                                    @endforeach
                                                @endif
                                            </div>
                                        </div>

                                        <div class=" d-flex ">
                                            <div class="pe-2"><i class="fa-solid addItembtn fa fa-plus" data-f="f7[]" data-t="t7[]"></i></div>
                                            <div class="pe-2 filterbtn"><i class="fa-solid fa-rotate"></i></div>
                                            <div class="filter-menu" data-id="7">
                                                <div class="form-check">
                                                    <label class="form-check-label">
                                                        Sunday
                                                        <input class="form-check-input" type="checkbox" value="1">
                                                    </label>
                                                </div>
                                                <div class="form-check">
                                                    <label class="form-check-label">
                                                        Monday
                                                        <input class="form-check-input" type="checkbox" value="2">
                                                    </label>
                                                </div>
                                                <div class="form-check">
                                                    <label class="form-check-label">
                                                        Tuesday
                                                        <input class="form-check-input" type="checkbox" value="3">
                                                    </label>
                                                </div>
                                                <div class="form-check">
                                                    <label class="form-check-label">
                                                        Wednesday
                                                        <input class="form-check-input" type="checkbox" value="4">
                                                    </label>
                                                </div>
                                                <div class="form-check">
                                                    <label class="form-check-label">
                                                        Thursday
                                                        <input class="form-check-input" type="checkbox" value="5">
                                                    </label>
                                                </div>
                                                <div class="form-check">
                                                    <label class="form-check-label">
                                                        Friday
                                                        <input class="form-check-input" type="checkbox" value="6">
                                                    </label>
                                                </div>
                                                <button type="button" class="btn btn-primary btn-filled ap-btn">Apply</button>
                                            </div>
                                        </div>
                                    </div>
                                    @if ($ADD_AVAILABILITY_ACCESS) 
                                    <div class="weeklist d-block d-md-flex justify-content-between  ">
                                       <button type="submit" class="btn btn-primary w-100 submitBtn">Submit</button>
                                    </div>
                                    @endif
                                 </form>
                                </div>
                           </div>
                           @endif
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

<script src="{{ asset('admin/js/date-script.js') }}"></script>
<script type="text/javascript">
 $(document).ready(function(){
    $('.timepicker').mdtimepicker();
 });
//    
$(document).on('click','.addItembtn', function(){
    // $(".monday-div .slot-item").clone().appendTo("#monclonedata");
    let fname = $(this).data('f');
    let tname = $(this).data('t');
    var Sprnt = $(this).parent().parent().parent().find('.appendboxDate');
    var unLab = $(this).parent().parent().parent().find('.un-lable');
    var adhtml = `<div class="slot-item d-flex align-items-center justify-content-between mb-3">
                    <input type="text" placeholder="From :" class="form-control timepicker f-basis-45" name="`+fname+`" />
                    <label class="m-0">-</label>
                    <input type="text"  placeholder="To :" class="form-control timepicker f-basis-45" name="`+tname+`" />
                    <i class="fa-solid fa fa-trash removeMon"></i>
                </div>`;
    Sprnt.append(adhtml);
    unLab.remove();
    $('.timepicker').mdtimepicker();
});
$(document).on('click','.removeMon',function() {
    let clsName = $(this).parent().parent().parent();
    $(this).parent().remove();

    if(clsName.find('.slot-item').length <= 0)
    {
        $('<div class="text-danger un-lable">Unavailable</div>').insertBefore(clsName);
    }
});

//
$(document).on('click','.ap-btn',function() {
    var checkArr= [];
    var Sprnt   = $(this).parent().parent().parent().find('.appendboxDate');
    $(this).parent().find("input[type=checkbox]:checked").each(function(){
        checkArr.push($(this).val());
        $(this).prop('checked',false);
    });


    $('.appendboxDate').each(function(){

        var temp    = $(this).data('id');
        // var unLab   =
        if($.inArray(temp.toString(),checkArr) >=0)
        {
            let fname = "f"+$(this).data('id')+"[]";
            let tname = "t"+$(this).data('id')+"[]";

            $(this).parent().parent().find('.un-lable').remove();
            $(this).html(Sprnt.html());

            $(this).find('input[type=text]').each(function(idx, el){
                let num = idx+1;
                if (num % 2 == 0)
                {
                    $(this).attr('name',tname);
                }
                else{
                    $(this).attr('name',fname);
                }
            });
        }
    });
    $('.timepicker').mdtimepicker();
    $('.filter-menu').hide();

});
</script>

<script>
   $(function(){

     //
     $('.submitBtn').on('click', function() {
       var $this = $(this);
       var loadingText = '<i class="fa fa-circle-o-notch fa-spin"></i> loading...';
       if ($(this).html() !== loadingText) {
         $this.data('original-text', $(this).html());
         $this.html(loadingText);
       }
    });

function validateTimeRange() {
  var isValid = true;

  $('.appendboxDate').each(function () {
    var $this = $(this);
    var timeInputs = $this.find('input[type="text"]');
    var startTime = timeInputs.eq(0).val();
    var endTime = timeInputs.eq(1).val();

    if (startTime && endTime) {
      var startTimeObj = parseTime(startTime);
      var endTimeObj = parseTime(endTime);

      if (!startTimeObj || !endTimeObj) {
        alert('Invalid time format. Please use the format HH:mm AM/PM (e.g., 01:30 PM).');
        isValid = false;
        return false;
      }

      if (startTimeObj >= endTimeObj) {
        alert('Start time cannot be greater than or equal to the end time.');
        isValid = false;
        return false;
      }
    } else if (startTime && !endTime) {
      alert('End time is required.');
      isValid = false;
      return false;
    } else if (!startTime && endTime) {
      alert('Start time is required.');
      isValid = false;
      return false;
    }
  });

  return isValid;
}

function parseTime(time) {
  var timeFormat = /^\d{1,2}:\d{2} (AM|PM)$/i;
  if (time.match(timeFormat)) {
    var timeParts = time.split(' ');
    var timeNumbers = timeParts[0].split(':');
    var hours = parseInt(timeNumbers[0]);
    var minutes = parseInt(timeNumbers[1]);
    if (hours < 12 && timeParts[1].toUpperCase() === 'PM') {
      hours += 12;
    }
    return new Date(0, 0, 0, hours, minutes);
  } else {
    return null;
  }
}


   //
    $(document).on('submit', 'form#createAvailabilityForm', function (event) {
    event.preventDefault();
    // Additional form validation before AJAX submission
    if (!validateTimeRange()) {
        return false;
    }

    //clearing the error msg
    $('p.error_container').html("");
    $('.error-control').removeClass('border-danger');
    $('.submitBtn').attr('disabled',true);

    var form = $(this);
    var data = new FormData($(this)[0]);
    var url = form.attr("action");

     $.ajax({
         type: form.attr('method'),
         url: url,
         data: data,
         cache: false,
         contentType: false,
         processData: false,
         success: function (response) {

             console.log(response);
             if(response.success==true  ) {

                var user_id = response.user_id;

                 //notify
                toastr.success("Availability has been created successfully");
                 // redirect to google after 5 seconds
                 window.setTimeout(function() {
                     window.location.reload();
                 }, 2000);

             }
             //show the form validates error
             if(response.success==false ) {
               $('.submitBtn').attr('disabled',false);
                 var loadingText = 'Submit';
                 $('.submitBtn').html(loadingText);
                 for (control in response.errors) {
                     $('#error-' + control).html(response.errors[control]);
                 }

                if( response.error_type == 'something_wrong' )
                {
                    toastr.error("Sorry, something went wrong. Please try again later.");
                     window.setTimeout(function() {
                    window.location.reload();
                    $("#createInstructorForm").trigger('reset');
                    }, 4000);
                }
             }
         },
         error: function (xhr, textStatus, errorThrown) {
             alert("Error: " + errorThrown);
         }
     });
     return false;
    });
   });

</script>
@endsection