@extends('layouts.admin')
@section('content')
<link rel="stylesheet" href="{{ asset('admin/css/date-style.css') }}">
<style>
    #exampleModalCenter .modal-content{
        position: unset;
        width: auto;
    }
    .modal.show .modal-dialog{
        transform: none !important;
    }
    #employee-note .modal-content{
        margin-top: unset !important;
    }
</style>
<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="{{url('/admin/instructors')}}">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-1x">Back</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" >
                     @include('admin.instructors.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 type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter"> Unavailability</button>
                              <button class="btn btn-primary" id="removeunvaibility">Remove Unavailability</button>
                               <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#employee-note">Settings</button>
                           </div> 
                           <div class="row justify-content-center mt-4">
                              <div class="col-md-8">
                                 <h3>Set your weekly hours</h3>
                                  <form action="{{ route('admin.instructors/availability.update') }}" method="post" id="createAvailabilityForm">
                                    @csrf    
                                    <input type="hidden" id="instructorId" 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>
                                    <div class="weeklist d-block d-md-flex justify-content-between  ">
                                       <button type="submit" class="btn btn-primary w-100 submitBtn">Submit</button>
                                    </div>
                                 </form>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

<!-- open unavailability modal-->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog " role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="fw-bold">Set Unavailability<span class="credit1"></span></h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
            </div>
            <div class="modal-body flex-grow-0" >
                <form id="unavailability">
                    @csrf
                    <div class="container">
                        <label class="fw-bold" for="sd">Start Date</label>
                        <input type="date" class="form-control" id="sd" name="start_date">
                        <p style="margin-bottom: 2px;" class="text-danger error_container" id="error-start_date"></p>
                    </div>
                    <div class="container">
                        <label class="fw-bold" for="ed">End Date</label>
                        <input type="date" class="form-control" id="ed" name="end_date">
                        <p style="margin-bottom: 2px;" class="text-danger error_container" id="error-end_date"></p>
                    </div>
                    <div class="container">
                        <label class="fw-bold" for="tf">Time From</label>
                        <input type="time" class="form-control" id="tf" name="time_from">
                        <p style="margin-bottom: 2px;" class="text-danger error_container" id="error-time_from"></p>
                    </div>
                    &nbsp;&nbsp;&nbsp;
                    <div class="container">
                        <label class="fw-bold" for="tt">Time To</label>
                        <input type="time" class="form-control" id="tt" name="time_to">
                        <p style="margin-bottom: 2px;" class="text-danger error_container" id="error-time_to"></p>
                    </div>
                    &nbsp;&nbsp;&nbsp;
                    <div class="container text-center">
                        <button type="button" class="btn btn-primary set-un" >Set</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!--remove unavailability -->
<div class="modal fade" id="remove1" tabindex="-1" role="dialog" aria-labelledby="remove1Title" aria-hidden="true">
    <div class="modal-dialog " role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="fw-bold">Manage Unavailability<span class="credit1"></span></h4>
            </div>
            <div class="modal-body flex-grow-0" >
                <div class="col-12 table-responsive">
                <table id="table_id" class="table">
                    <thead style="background:#a0b8ed29;">
                    <tr>
                        <th> SNo.</th>
                        <th><b>Start Time</b></th>
                        <th><b>End Time</b></th>
                        <th><b>Action</b></th>
                    </tr>
                    </thead>
                    <tbody>
                    @forelse($unvalibility as $key => $unav)
                    <tr>
                        <td>{{++$key}}</td>
                        <td><span style="color:red; font-weight:bold; font-size:16px"></span>{{$unav->start_time}}</td>
                        <td>{{$unav->end_time}}</td>
                        <td><a class="btn btn-icon btn-flush-dark btn-rounded flush-soft-hover deleteUnvaibilityBtn"
                                data-bs-toggle="tooltip" data-placement="top" title=""
                                data-bs-original-title="Delete" href="javascript:void(0)" data-id="{{base64_encode($unav->id)}}">
                                <span class="icon">
                                    <span class="feather-icon">
                                    <i class="fas fa-trash text-danger"></i>
                                    </span>
                                </span>
                            </a></td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="4" style="text-align:center;">Empty!</td>
                    </tr>
                    @endforelse
                    </tbody>
                </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!--duration model  -->
<div class="modal fade" id="employee-note" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <form method="post" action="{{ route('admin.instructors/availability.saveSetting') }}" id="avaiSettingForm">
       @csrf
       <input type="hidden" name="user_id" value="{{ Request::segment(5) }}"> 
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Settings</h4>
      </div>
        <div class="modal-body h-model">
            <label class="fw-bold">Schedule Availability for <span class="text-danger">*</span></label>
            <select class="form-control" name="schedule_availability">
                <option value="">Select</option>
              @foreach (range(1, 30) as $item)
                  <option value="{{$item * 7}}" @if($ava_setting != null && $ava_setting->schedule_availability == $item * 7) selected @endif>{{$item}} @if($item == 1) week @else weeks @endif</option>
              @endforeach
              <option value="728" @if($ava_setting != null && $ava_setting->schedule_availability == '728') selected @endif>Permanent</option>
             </select>
            <p style="margin-bottom: 2px;" class="text-danger error_container" id="error-schedule_availability"></p>
        </div>
        <div class="modal-body h-model">
            <label class="fw-bold">Duration <span class="text-danger">*</span></label>
            <select class="form-control" name="duration">
                <option value="45" @if($ava_setting != null && $ava_setting->duration == '45') selected @endif>45 mins</option>
                <option value="60" @if($ava_setting != null && $ava_setting->duration == '60') selected @endif>60 mins</option>
                <option value="90" @if($ava_setting != null && $ava_setting->duration == '90') selected @endif>90 mins</option>
                <option value="120" @if($ava_setting != null && $ava_setting->duration == '120') selected @endif>120 mins</option>
            </select>
            <p style="margin-bottom: 2px;" class="text-danger error_container" id="error-duration"></p>
        </div>
        <div class="modal-body h-model">
            <label class="fw-bold">Set break between slots</label>
            <select class="form-control" name="break_between_slots">
                <option value="">No Break</option>
                <option value="15" @if($ava_setting != null && $ava_setting->break_between_slots == '15') selected @endif>15 mins</option>
                <option value="30" @if($ava_setting != null && $ava_setting->break_between_slots == '30') selected @endif>30 mins</option>
                <option value="45" @if($ava_setting != null && $ava_setting->break_between_slots == '45') selected @endif>45 mins</option>
                <option value="60" @if($ava_setting != null && $ava_setting->break_between_slots == '60') selected @endif>60 mins</option>
            </select>
        </div>
      <div class="modal-footer">
         <button type="submit" id="employeeNoteBtn" class="btn btn-success">Save</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
      </form>
    </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;
  }
}

//unavailability
  $(document).on("click", ".set-un", function() {
    $('.error_container').html('');
    var sd = $('#sd').val();
    var ed = $('#ed').val();
    var tf = $('#tf').val();
    var tt = $('#tt').val();
    var instructorId = $('#instructorId').val();
    $.ajax({
        type:"post",
        url:"{{route('admin.instructors/unavailability')}}",
        dataType: "json",
        data:{'instructorId':instructorId,'time_from':tf,'time_to':tt,'start_date':sd,'end_date':ed,"_token": "{{ csrf_token() }}"},
        success:function(response)
        {
            if(response.status==true) {
               toastr.success(response.msg);
                $("#unavailability")[0].reset();
                $('#exampleModalCenter').modal('hide');
                 window.setTimeout(function() {
                     window.location.reload();
                 }, 2000);
            }
            else{
                 toastr.error(response.msg);
            }

            setTimeout(() => {
                $(".my-toast").delay(5000).fadeOut();
            }, 2000);

        },
        error: function(xhr) {
            var errors = xhr.responseJSON.errors;
            $.each(errors, function(key, value) {
                $('#error-' + key).text(value[0]);
            });
        }
    });
});

//remove unvaibility modal
$(document).on('click','#removeunvaibility', function(){
    $('#remove1').modal('show');
});

//
$(document).on('click', '.deleteUnvaibilityBtn', function (event)
{
    var _this = $(this);
    // var result=confirm("Are You Sure You Want to Delete?");
    var id = $(this).data('id');
    var table = 'unavailabilities';
    swal({
    // icon: "warning",
    title: 'Do you want to remove this unavailability?',
    icon: 'info',
    showCancelButton: true,
    confirmButtonColor: '#3085d6',
    cancelButtonColor: '#d33',
    confirmButtonText: 'Yes'
    },
    function(e){
    if(e==true)
    {
        $.ajax({
            type: "POST",
            dataType: "json",
            url:"{{route('admin.instructors/delete-unavailability')}}",
            data: {
                "_token": "{{ csrf_token() }}",
                'id': id,
                'table_name': table
            },
            success: function(data) {
                console.log(data);
                window.setTimeout(function() {
                    _this.removeClass('disabled-link');
                }, 2000);

                if (data.code == 200) {
                    // toastr.success("unavailabilitie removed Successfully");
                    window.setTimeout(function() {
                        window.location.reload();
                    }, 2000);
                }
            },
            error: function(response) {
                console.log(response);
            }
        });
        swal.close();
    }
    else
    {
    swal.close();
    }
    });
});


//
$(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;
});

  $(document).on('submit', 'form#avaiSettingForm', function (event) {
   event.preventDefault();
   //clearing the error msg
   $('p.error_container').html("");
   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  ) {

                //notify
               toastr.success("Changes applied successfully.");
               $('#employee-note').modal('hide');
                // redirect to google after 5 seconds
                window.setTimeout(function() {
                    window.location.reload();
                }, 2000);

            }
            //show the form validates error
            if(response.success==false ) {
                for (control in response.errors) {
                    $('#error-' + control).html(response.errors[control]);
                }
            }
        },
        error: function (xhr, textStatus, errorThrown) {
            // alert("Error: " + errorThrown);
        }
    });
    return false;
   });

});
$(document).ready(function() {
    function alignModal() {
        var modalDialog = $(this).find(".modal-dialog");

        // Applying the top margin on modal to align it vertically center
        modalDialog.css("margin-top", Math.max(0, ($(window).height() - modalDialog.height()) / 4.5));
    }
    // Align modal when it is displayed
    $(".modal").on("shown.bs.modal", alignModal);

    // Align modal when user resize the window
    $(window).on("resize", function() {
        $(".modal:visible").each(alignModal);
    });
});
</script>
@endsection