{{--@extends('front.inner-layout.app')
@section('content')--}}
@extends('front.practitioner.import.template.import')
@section('content')

<link href="{{ asset('assets/css/colorPick.css') }}" rel='stylesheet' />
<link href="{{ asset('assets/css/colorPick.dark.theme.css') }}" rel='stylesheet' />


<style type="text/css">
  input[readonly],select[readonly]
  {
    color:grey;
  }
</style>

<!-- <div class="page-content dashboard-wrapper mdashboard-wrapper clientd-wrapper setting-wrapper">
  <div class="row align-items-center">
    <div class="col-lg-4 col-md-4 col-sm-4">
      <h1 class="page-title eagle-font font-400"><span class="arca-font">My</span> Blockout times
      </h1>
    </div>
    {{--@include('front.inner-layout.header')--}}
  </div>
  <div class="brdr-bttm"></div> -->

  <div class="loading">Loading&#8230;</div>

  <div class="container-fluid">
    <div class="row">
      <nav class="navbar navbar-light bg-light invoice-page-menu notes-menu w-100">
        <a class=" p-0" href="{{ url()->previous() }}"><img src="{{asset('assets/images/My Appointments back icon.svg')}}" alt="" class="img-flude" style="min-width: 40px"></a>
        <a class="navbar-brand p-0 " href="{{ route('practitioner.appointments.index') }}"><img src="{{asset('assets/images/MA Icon Colour.svg')}}" alt="" class="img-flude" style="min-width: 43px"></a>

        <h1 class="page-title eagle-font font-400 m-0"><span class="arca-font">My </span>Blockout times</h1>
        <!-- <ul class="list-inline icons-listing mr-auto my-auto"></ul> -->
        <a href="#blockout-time" data-toggle="modal" class="btn btn-fill mb-3 ml-auto my-auto" id="openAddBlockout"><i class="fa fa-plus" aria-hidden="true"></i> Blockout time</a>
      </nav>
      <div class="brdr-bttm w-100"></div>
    </div>

    <div class="dashboard-wrapper mdashboard-wrapper clientd-wrapper setting-wrapper">
      <!-- set a design  02-08-2021 date  -->
      <!-- <div class="row mb-4">
        <div class="col-sm-6">
          <h1 class="page-title eagle-font font-400 ">Blockout time<span class="arca-font"></span></h1>
          <p class="text-navy d-none">Need to make times as unavailable on your calendar? Enter your details here:</p>
        </div>
        <div class="col-sm-6"><a href="#blockout-time" data-toggle="modal" class="btn-fill float-right">Blockout time</a></div>
      </div> -->

      <div class="services-pages mb-5">
        <div class="boxwhite padd-sm mt-5">
          <div class="card">
            <div class="booking-confirmation-area blockout-time">
              <div class=" for-service-table  dr-table w-100 Blockouttime-table hide" id="blockoutTable">
                <div class="table-responsive">
                  <table class="table table-striped">
                    <thead class="head-brdr">
                      <tr>
                        <th class="align-middle">Service Provider</th>
                        <th class="align-middle">Location</th>
                        <th class="align-middle">Description </th>
                        <th class="align-middle">Start date</th>
                        <!-- <th class="align-middle">Date to</th> -->
                        <th class="align-middle">Time from</th>
                        <th class="align-middle">Time to</th>
                        <th class="align-middle">Scheduled</th>
                        <th class="align-middle">Repeat</th>
                        <th class="align-middle ">End date</th>
                        <th class="d-none"></th>
                      </tr>
                    </thead>
                    <tbody id="blockoutTimeAppend"></tbody>
                  </table>
                </div>
              </div>
            </div>                            
          </div>
        </div>             
        <div class="text-center">
          <a href="#" class="btn btn-fill load-more hide">Load more</a>
        </div>              
      </div>
    </div>

    <div class="row mt-5 pt-5 blockout-time no_data_found hide">
      <div class="dataempty-box mt-100 mb-30 nonotesbox m-auto" style="display: block;">
        <div class="appointment-empty-box pay-mbox-padd">
          <div class="innerroundbox-padd">
            <div class="img-calenderbox">
              <img src="https://myappointments.app/portal/public/assets/images/appointment-img.svg" alt="" class="img-fluid mCS_img_loaded">
            </div>
            <h3 class="sub-title ml-0 mb-3">You have no blocked out times</h3>
            <p>Need to block out times in your calendar? Enter details here.</p>
          </div>
        </div>
      </div>
    </div>

    <!-- set a design  02-08-2021 date  -->

    <!-- blockout-time Modal Start --->
    <div class="client-follow-popup login-modal videoconsultationmodal customscroll  calenderinterval-modal customscroll clientabpopup businessdetails" id="myclienthide">
      <div class="modal fade "  id="blockout-time" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-dialog-centered" role="document">
          <div class="modal-content">
            <div class="popup-marg">
              <div class="modal-header">
                <h5 class="modal-title text-center eagle-font">Blockout time</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true"><img src='{{asset("assets/images/close-img.png")}}' alt="" class="img-fluid"></span>
                </button>
              </div>
              <form id="addHolidays" name="addHolidays" method="POST">
                <!--id="addHolidays"-->
                @csrf
                <input type="hidden" name="id">
                <input type="hidden" name="is_sp_member" id="is_sp_member" value="0">
                <div class="modal-body p-0">
                  <div class="mCustomScrollbar">
                    <div class="boxwhite mt-30">
                      <div class="test-results-area labeltop mt-3">
                        <div class="label-input">
                          <div class="row  align-items-center">
                            <div class="col-lg-4 col-md-6">
                              <label class="mb-0">Service provider</label>
                            </div>
                            <div class="col-lg-8 col-md-6">
                              <div class="form-group brdrfull select-arrow-none">
                                <select id="serviceProvider" name="service_provider" class="form-control text-align-left js-example-basic-single select-service-provider">
                                  @if($practitioner->role !='admin')
                                  <option value="{{$practitioner->id}}">{{$practitioner->first_name}} {{$practitioner->last_name}} </option>
                                  @endif
                                  @php 
                                    if($user->parent_id != '' && $user->parent_id != null){
                                        $serviceProvider = $user->serviceProvider()->orwhere('parent_id',$user->parent_id)
                                        ->orwhere('id',$user->parent_id)->get(); 
                                    }else{
                                        $serviceProvider = $user->serviceProvider()->get(); 
                                    }
                                  @endphp
                                  @foreach($serviceProvider as $provider)

                                    @if( isset( $provider->calendar_removed ) && $provider->calendar_removed == 1 )
                                      @php continue; @endphp
                                    @endif

                                    @if( isset( $provider->role ) && $provider->role == 'admin' && $provider->parent_id != '' )
                                      @php continue; @endphp
                                    @endif

                                    @if( isset( $provider->invitation_accepted ) && $provider->invitation_accepted == 0 && $provider->parent_id != '' )
                                      @php continue; @endphp
                                    @endif
                                    
                                    @if( $provider->role == "service_provider" )
                                      <option value="{{$provider->id}}"> {{$provider->full_name}}</option>
                                    @endif
                                  @endforeach
                                </select>
                              </div>
                            </div>
                          </div>
                        </div>

                        <div class="label-input">
                          <div class="row  align-items-center" >
                            <div class="col-lg-4 col-md-6">
                              <label class="mb-0">Location</label> 
                            </div>
                            <div class="col-lg-8 col-md-6">
                              <div class="form-group brdrfull select-arrow-none">
                                <select name="location" id="locations" class="form-control text-align-left js-example-basic-single">
                                  @if(asset(Request::get('selectedLocationId')))
                                    @foreach($practitionerBusinessLocations as $val)
                                        <option value="{{$val->id}}"@if($val->id== Request::get('selectedLocationId')) selected='selected' @endif>{{ \Illuminate\Support\Str::limit($val->address, 40, '...') }}</option>
                                    @endforeach
                                    <input type="hidden" name="selectedLocationId" id="selectedLocationId" value="{{base64_encode(Request::get('selectedLocationId'))}}">
                                  @else
                                    @foreach($practitionerBusinessLocations as $val)
                                        <option value="{{$val->id}}">{{ \Illuminate\Support\Str::limit($val->address, 40, '...') }}</option>
                                    @endforeach
                                  @endif
                                </select>
                              </div>
                            </div>
                          </div>
                        </div>

                        <input type="hidden" name="appointmentCount" value="0">

                        <div class="label-input">
                          <div class="row  align-items-center justify-content-center">
                            <div class="col-md-4 col-sm-6">
                              <label class="mb-0">Description</label>
                            </div>
                            <div class="col-md-8 col-sm-6">
                              <div class="form-group brdrfull">
                                <input type="text" class="form-control text-left" name="description" placeholder="Eg, holidays">
                              </div>
                            </div>
                          </div>
                        </div>

                        <div class="label-input">
                          <div class="row align-items-center justify-content-center multi-pract small-bullet">

                            <div class="col-sm-3 col-6">
                              <div class="rdio rdio-primary radio-inline"><input checked id="One_time" value="One time" type="radio" name="blockout_type" autocomplete="off" class="d-none">
                                <label class="font-15" for="One_time">One time</label>
                              </div>
                            </div>
                            <div class="col-sm-3 col-6">
                              <div class="rdio rdio-primary radio-inline"><input id="Daily" name="blockout_type" value="Daily" type="radio" autocomplete="off" class="d-none">
                                <label class="font-15" for="Daily">Daily</label>
                              </div>
                            </div>
                            <div class="col-sm-3 col-6">
                              <div class="rdio rdio-primary radio-inline"><input id="Weekly" name="blockout_type" value="Weekly" type="radio" autocomplete="off" class="d-none">
                                <label class="font-15" for="Weekly">Weekly</label>
                              </div>
                            </div>
                            <div class="col-sm-3 col-6">
                              <div class="rdio rdio-primary radio-inline"><input id="Monthly" name="blockout_type" value="Monthly" type="radio" autocomplete="off" class="d-none blockout_type">
                                <label class="font-15" for="Monthly">Monthly</label>
                              </div>
                            </div>
                          </div>
                        </div>

                        <div class="label-input hide" id="daysDiv">
                          <div class="row align-items-center ">
                            <div class="col-4 ">
                              <label class="mb-0">Day/s</label>
                            </div>

                            <div class="col-8 ">
                              <div class="days">
                                <div class="health-history-checkbox selectdays-dropdown mb-0 tradingdays">
                                  <ul id="be-select" class="be-select-days weekdays-select">
                                    <li>
                                      <div class="rdio rdio-primary radio-inline"><input class="mondays" id="6107e61f5a5ba" name="day[]" value="monday"  type="checkbox" wfd-invisible="true"><label for="6107e61f5a5ba">Monday</label></div>
                                    </li>
                                    <li>
                                      <div class="rdio rdio-primary radio-inline"> <input class="tuesdays" id="6107e61f5a5bd" name="day[]" value="tuesday" type="checkbox" wfd-invisible="true"> <label for="6107e61f5a5bd">Tuesday</label> </div>
                                    </li>
                                    <li>
                                      <div class="rdio rdio-primary radio-inline"> <input class="wednesdays" id="6107e61f5a5be" name="day[]" value="wednesday" type="checkbox" wfd-invisible="true"> <label for="6107e61f5a5be">Wednesday</label> </div>
                                    </li>
                                    <li>
                                      <div class="rdio rdio-primary radio-inline"> <input class="thursdays" id="6107e61f5a5bf" name="day[]" value="thursday" type="checkbox" wfd-invisible="true"> <label for="6107e61f5a5bf">Thursday</label> </div>
                                    </li>
                                    <li>
                                      <div class="rdio rdio-primary radio-inline"> <input class="fridays" id="6107e61f5a5c1" name="day[]" value="friday" type="checkbox" wfd-invisible="true"> <label for="6107e61f5a5c1">Friday</label> </div>
                                    </li>
                                    <li>
                                      <div class="rdio rdio-primary radio-inline"> <input class="saturdays" id="6107e61f5a5c2" name="day[]" value="saturday" type="checkbox" wfd-invisible="true"> <label for="6107e61f5a5c2">Saturday</label> </div>
                                    </li>
                                    <li>
                                      <div class="rdio rdio-primary radio-inline"> <input class="sundays" id="6107e61f5a5c3" name="day[]" value="sunday" type="checkbox" wfd-invisible="true"> <label for="6107e61f5a5c3">Sunday</label> </div>
                                    </li>
                                  </ul>
                                </div>
                                <span class="invalid-feedback d-block"></span>
                              </div>
                            </div>
                          </div>
                        </div>

                        <div class="label-input hide" id="on-the">
                          <div class="row align-items-center justify-content-center">
                            <div class="col-md-4 col-sm-6">
                              <label class="mb-0">On the:</label>
                            </div>
                            <div class="col-md-8 col-sm-6">
                              <div class="row graytext">
                                <div class="col-md-5 col-6 pr-md-0">
                                  <div class="  brdrfull ">                                                                        
                                    <div class="form-group mb-0 marg-bttm online-dropdown select-dropdown avalable-drop hide-first-child select-arrow-none border-0">
                                      <select  name="on_the" id="loction123" class="single-select2 form-control text-center js-example-basic-single">                                                                              
                                        <option value="First" selected>First</option>
                                        <option value="Second">Second</option>
                                        <option value="Third">Third</option>
                                        <option value="Fourth">Fourth</option>
                                        <option value="Last">Last</option>
                                      </select>
                                    </div>
                                  </div>
                                  <span class="invalid-feedback d-block"></span>
                                </div>
                                <div class="col-md-2">

                                </div>
                                <div class="col-md-5 col-6 pl-md-0">
                                  <div class="form-group mb-0 brdrfull">                      
                                    <p class="text-navy text-center font-14">Week of the month</p>
                                  </div>
                                  <span class="invalid-feedback d-block"></span>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>



                        <div class="label-input" id="dateFromDiv">
                          <div class="row align-items-center justify-content-center">
                            <div class="col-md-4 col-sm-6">
                              <label class="mb-0">Date from:</label>
                            </div>
                            <div class="col-md-8 col-sm-6">
                              <div class="row graytext">
                                <div class="col-md-5 pr-md-0">
                                  <div class="form-group mb-0 brdrfull">
                                    <input type="text" readonly name="from_date" class="text-center form-control from-calendar text-gray from_date" placeholder="00/00/00" autocomplete="off">
                                  </div>
                                  <span class="invalid-feedback d-block"></span>
                                </div>
                                <div class="col-md-2">
                                  <span class="d-block text-center mb-md-0 mb-3 text-navy">To:</span>
                                </div>
                                <div class="col-md-5 pl-md-0">
                                  <div class="form-group mb-0 brdrfull">
                                    <input type="text" readonly name="to_date" require="" class="text-center form-control to-calendar text-gray to_date" placeholder="00/00/00" autocomplete="off">
                                  </div>
                                  <span class="invalid-feedback d-block"></span>
                                </div>
                              </div>
                              <span class="invalid-feedback d-block"></span>
                            </div>
                          </div>
                        </div>

                        <!-- OLD TIMEPICKER - START -->
                        {{--<div class="label-input" id="timeFromDiv">
                          <div class="row align-items-center justify-content-center">
                            <div class="col-md-4 col-sm-6">
                              <label class="mb-0">Time from:</label>
                            </div>
                            <div class="col-md-8 col-sm-6">
                              <div class="row graytext">
                                <div class="col-md-5 pr-md-0">
                                  <div class="form-group mb-0 brdrfull">
                                    <input type="text" class="text-center form-control timepicker" name="start_time" readonly placeholder="00:00 AM">
                                  </div>
                                  <span class="invalid-feedback d-block"></span>
                                </div>
                                <div class="col-md-2">
                                  <span class=" d-block text-center mb-md-0 mb-3 text-navy">To:</span>
                                </div>
                                <div class="col-md-5 pl-md-0">
                                  <div class="form-group mb-0 brdrfull">
                                    <input type="text" class="text-center form-control timepicker" name="end_time" readonly placeholder="00:00 PM">
                                  </div>
                                  <span class="invalid-feedback d-block"></span>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>--}}
                        <!-- OLD TIMEPICKER - END -->

                        <div class="label-input hide" id="startDateDiv">
                          <div class="row align-items-center ">
                            <div class="col-md-4 col-sm-6">
                              <label class="mb-0">Start date:</label>
                            </div>
                            <div class="col-md-8 col-sm-6 ">
                              <div class="row gstyn-txt age-title">
                                <div class=" col-md-5 col-6 pr-md-0">
                                  <div class="form-group brdrfull">
                                    <input type="text" readonly name="start_date" class="text-center form-control text-gray start_date" placeholder="00/00/00" autocomplete="off">
                                  </div>
                                  <span class="invalid-feedback d-block"></span>                                             
                                </div>
                              </div> 
                              <span class="invalid-feedback d-block"></span>                                             
                            </div>
                          </div>
                        </div>
                        

                        <!-- NEW TIMEPICKER - START -->
                        <div class="label-input" id="timeFromDiv">
                          <div class="row align-items-center justify-content-center">
                            <div class="col-md-4 col-sm-6">
                              <label class="mb-0">Time from:</label>
                            </div>
                            <div class="col-md-8 col-sm-6">
                              <div class="row graytext">
                                <div class="timePickerNew timepickerBlockoutTIme" id="starttimePicker" style="width: 20rem;"></div>
                                <input type="hidden" name="start_time" id="blockout_start_time" autocomplete="off" readonly value="">
                              </div>
                              <span class="invalid-feedback d-block"></span>
                            </div>
                          </div>
                        </div>

                        <div class="label-input" id="timeFromDiv">
                          <div class="row align-items-center justify-content-center">
                            <div class="col-md-4 col-sm-6">
                              <label class="mb-0">Time to:</label>
                            </div>
                            <div class="col-md-8 col-sm-6">
                              <div class="row graytext">
                                <div class="timePickerNew timepickerBlockoutTIme" id="endtimePicker" style="width: 20rem;"></div>
                                <input type="hidden" name="end_time" id="blockout_end_time" autocomplete="off" readonly value="">
                              </div>
                              <span class="invalid-feedback d-block"></span>
                            </div>
                          </div>
                        </div>
                        <!-- NEW TIMEPICKER - END -->

                        <div class="label-input hide" id="Occurrences">
                          <div class="row align-items-center ">
                            <div class="col-md-4 col-sm-6">
                              <label class="mb-0">Number of occurrences</label>
                              {{-- <span style="color:#666 !important;font-size: 13px;">*Maximum 60</span> --}}
                              <span style="color:#666 !important;font-size: 13px;display:block;margin-bottom:15px;">*Maximum 60</span>                                                                                          
                            </div>
                            <div class="col-md-8 col-sm-6 ">
                              <div class="row gstyn-txt age-title">
                                <div class=" col-md-5 col-6 pr-md-0">
                                  <div class="form-group brdrfull">
                                    <input type="text" id="no_of_occurrences" name="no_of_occurrences" class="text-center form-control text-gray numeric-only" maxlength="2" onkeypress="return event.charCode &gt;= 48 &amp;&amp; event.charCode &lt;= 57" placeholder="00" autocomplete="off">
                                  </div>
                                  <span class="invalid-feedback d-block" style="color:#666 !important"></span>                                             
                                </div>
                              </div> 
                              <span class="invalid-feedback d-block"></span>                                             
                            </div>
                          </div>
                        </div>

                        <div class="label-input hide" id="repeatEveryDiv">
                          <div class="row align-items-center ">
                            <div class="col-md-4 col-sm-6">
                              <label class="mb-0">Repeat every:</label>
                            </div>

                            <div class="col-md-8 col-sm-6">
                              <div class="row">
                                <div class="col-md-5 col-6 pr-md-0">
                                  <div class="form-group brdrfull">
                                    <input type="text" name="repeat_every_week" class="text-center numeric-only form-control text-gray" placeholder="0" autocomplete="off">
                                  </div>
                                  <span class="invalid-feedback d-block"></span>
                                </div>

                                <div class="col-md-2 d-md-block d-none">

                                </div>
                                <div class="col-md-5 col-6 pl-md-0">
                                  <p class="text-navy  mt-0 font-15">Week/s</p>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>

                        {{-- <div class="label-input hide" id="repeat-indefinitely">
                          <div class="row align-items-center justify-content-center">
                            <div class="col-md-4 col-sm-6">
                              <label>Repeat indefinitely:</label>
                            </div>
                            <div class="col-md-8 col-sm-6">
                              <div class="row gstyn-txt age-title">
                                <div class=" col-md-5 col-6 pr-md-0">
                                  <ul class="radioli p-0">
                                    <li class="text-center w-100"><input type="radio"  id="yes1" name="repeat_indefinitely" value="1" data-parsley-multiple="registered_for_gst">
                                      <label for="yes1" class="d-block">Yes</label>
                                    </li>
                                  </ul>
                                </div>
                                <div class="offset-md-2 col-md-5 col-6 pl-md-0">
                                  <ul class="radioli p-0">
                                    <li class="text-center w-100"><input type="radio" id="no1" name="repeat_indefinitely" value="0" data-parsley-multiple="registered_for_gst">
                                      <label for="no1" class="d-block">No</label>
                                    </li>
                                  </ul>
                                </div>
                                <span class="invalid-feedback d-block" id="repeat_indefinitely"></span>
                              </div>                                              
                            </div>
                          </div>
                        </div> --}}

                        <div class="label-input mt-sm-3 mt-0 hide" id="endDateDiv">
                          <div class="row align-items-center ">
                            <div class="col-md-4 col-sm-6">
                              <label class="mb-0">End after:</label>
                            </div>
                            <div class="col-md-8 col-sm-6">
                              <div class="row graytext">
                                <div class="col-md-5 col-6 pr-md-0">
                                  <div class="form-group brdrfull">                                                                         
                                    <input type="text" name="end_after" class="text-center form-control text-gray numeric-only mt-sm-0 mt-2" placeholder="00" />
                                  </div>
                                  <span class="invalid-feedback d-block"></span>                                                                    
                                </div>
                                <div class="col-md-2 d-md-block d-none">
                                  <span class=" d-block "></span>
                                </div>
                                <div class="col-md-5 col-6">
                                  <p class="text-navy  mt-sm-0 mt-2 font-15"><span id="Weeks"> Weeks</span><span id="months" class="hide">Months</span></p>
                                  <!-- <div class="form-group mb-0 brdrfull">
                                    <p class="text-navy text-center mt-0 font-15" >Repeat/s</p>
                                  </div> -->
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>

                       
                       
                        <div class="label-input hide" id="repeatEndDateDiv"> 
                          <div class="row align-items-center justify-content-center">
                            <div class="col-md-4 col-sm-6">
                              <label class="mb-0">Repeat end date:</label>
                            </div>
                            <div class="col-md-8 col-sm-6">
                              <div class="row graytext">
                                <div class=" col-md-5 col-6 pr-md-0">
                                  <div class="form-group mb-0 brdrfull">
                                    <input type="text" readonly name="end_date" class="text-center form-control end_date text-gray" placeholder="00/00/00" autocomplete="off">
                                  </div>
                                  <span class="invalid-feedback d-block"></span>
                                </div>

                              </div>
                            </div>
                          </div>
                        </div>

                        <div class="label-input hide" id="endDateText">
                          <div class="row">
                            <div class="col-md-6 col-sm-6">
                              <label class="mb-0" id="end_date_text">This blockout will end on <date></label>
                              <input type="hidden" name="endsOn">
                            </div>
                            {{-- <div class="col-md-8 col-sm-6">
                              <div class="row graytext">
                                <div class=" col-md-5 col-6 pr-md-0">
                                  <div class="form-group mb-0 brdrfull">
                                    <input type="text" readonly name="end_date" class="text-center form-control end_date text-gray" placeholder="00/00/00" autocomplete="off">
                                  </div>
                                  <span class="invalid-feedback d-block"></span>
                                </div>

                              </div>
                            </div> --}}
                          </div>
                        </div>


                        <!--
                        <div class="label-input hide" id="monthsDiv">
                          <div class="row align-items-center ">
                            <div class="col-4 ">
                                <label>Months:</label>
                            </div>
                            <div class="col-8 ">
                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="months">
                                            <div class="health-history-checkbox selectdays-dropdown mb-0 ">
                                                <ul id="be-select" class="be-select-months">
                                                    <li class="d-block">
                                                        <div class="rdio rdio-primary radio-inline w-100"><input class="jan" id="jan" value="1" name="month[]" checked="" type="checkbox" wfd-invisible="true"><label class="w-100" for="jan">Jan</label></div>
                                                    </li>
                                                    <li class="d-block">
                                                        <div class="rdio rdio-primary radio-inline w-100"> <input class="feb" id="feb" name="month[]" value="2" checked="" type="checkbox" wfd-invisible="true"> <label class="w-100" for="feb">Feb</label> </div>
                                                    </li>
                                                    <li class="d-block">
                                                        <div class="rdio rdio-primary radio-inline w-100"> <input class="mar" id="mar" name="month[]" value="3" checked="" type="checkbox" wfd-invisible="true"> <label class="w-100" for="mar">Mar</label> </div>
                                                    </li>
                                                    <li class="d-block">
                                                        <div class="rdio rdio-primary radio-inline w-100"> <input class="apr" id="apr" name="month[]" value="4" checked="" type="checkbox" wfd-invisible="true"> <label class="w-100" for="apr">Apr</label> </div>
                                                    </li>
                                                    <li class="d-block">
                                                        <div class="rdio rdio-primary radio-inline w-100"> <input class="may" id="may" name="month[]" value="5" checked="" type="checkbox" wfd-invisible="true"> <label class="w-100" for="may">May</label> </div>
                                                    </li>
                                                    <li class="d-block">
                                                        <div class="rdio rdio-primary radio-inline w-100"> <input class="jun" id="jun" name="month[]" value="6" checked="" type="checkbox" wfd-invisible="true"> <label class="w-100" for="jun">Jun</label> </div>
                                                    </li>
                                                </ul>                                                                        
                                            </div>
                                            <span class="invalid-feedback d-block"></span>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="months">
                                            <div class="health-history-checkbox selectdays-dropdown mb-0    ">
                                                <ul id="be-select" class="be-select-months">
                                                    <li class="d-block">
                                                        <div class="rdio rdio-primary radio-inline w-100"><input class="jul" id="jul" value="7" name="month[]" checked="" type="checkbox" wfd-invisible="true"><label class="w-100" for="jul">Jul</label></div>
                                                    </li>
                                                    <li class="d-block">
                                                        <div class="rdio rdio-primary radio-inline w-100"> <input class="aug" id="aug" name="month[]" value="8" checked="" type="checkbox" wfd-invisible="true"> <label class="w-100" for="aug">Aug</label> </div>
                                                    </li>
                                                    <li class="d-block">
                                                        <div class="rdio rdio-primary radio-inline w-100"> <input class="sep" id="sep" name="month[]" value="9" checked="" type="checkbox" wfd-invisible="true"> <label class="w-100" for="sep">Sep</label> </div>
                                                    </li>
                                                    <li class="d-block">
                                                        <div class="rdio rdio-primary radio-inline w-100"> <input class="oct d-none" id="oct" name="month[]" value="10" checked="" type="checkbox" wfd-invisible="true"> <label class="w-100" for="oct">Oct</label> </div>
                                                    </li>
                                                    <li class="d-block">
                                                        <div class="rdio rdio-primary radio-inline w-100"> <input class="nov" id="nov" name="month[]" value="11" checked="" type="checkbox" wfd-invisible="true"> <label class="w-100" for="nov">Nov</label> </div>
                                                    </li>
                                                    <li class="d-block">
                                                        <div class="rdio rdio-primary radio-inline w-100"> <input class="dec" id="dec" name="month[]" value="12" checked="" type="checkbox" wfd-invisible="true"> <label class="w-100" for="dec">Dec</label> </div>
                                                    </li>
                                                    <li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                          </div>
                        </div> -->

                        <!-- <div class="label-input hide" id="repeatDiv">
                          <div class="row">
                            <div class="col-md-4 col-sm-6">
                              <label>Repeat</label>
                            </div>
                            <div class="col-md-8 col-sm-6">
                              <div class="form-group brdrfull no-bttm-full select2-multiple-autoselect select-arrow-none">
                                <select required class="form-control text-capitalize select-arr-none repeat" name="repeat" id="repeat">

                                  <option value="Never">Never </option>
                                  <option value="Every Day">Every Day </option>
                                  <option value="Every Week">Every Week</option>
                                  <option value="Every Fortnight">Every Fortnight</option>
                                  <option value="Every Month">Every Month</option>
                                  <option value="Every Year">Every Year</option>
                                </select>
                              </div>
                            </div>
                          </div>
                        </div> -->

                        <!-- <div class="label-input hide" id="repeatEndDateDiv">
                          <div class="row align-items-center justify-content-center">
                            <div class="col-md-4 col-sm-6">
                              <label>Repeat end date:</label>
                            </div>
                            <div class="col-md-8 col-sm-6">
                              <div class="row graytext">
                                <div class="col-md-5">
                                  <div class="form-group mb-0 brdrfull">
                                    <input type="text" readonly name="repeat_end_date" class="text-center form-control repeat_end_date text-gray" placeholder="00/00/00" autocomplete="off">
                                  </div>
                                  <span class="invalid-feedback d-block"></span>
                                </div>

                              </div>
                            </div>
                          </div>
                        </div> -->

                        <!-- <div class="label-input">
                          <div id="datesDiv" class="row align-items-center justify-content-center hide">
                            <div class="col-md-4 col-sm-6">
                              <label>Date/s</label>
                            </div>
                            <div class="col-md-8 col-sm-6">
                              <div class="form-group brdrfull no-bttm-full select2-multiple-autoselect">
                                <select class="form-control text-capitalize" id="dates" name="dates[]" multiple="multiple">
                                </select>
                              </div>
                            </div>
                          </div>

                          <div class="label-input mt-3 hide" id="endDateDiv">
                            <div class="row align-items-center ">
                              <div class="col-md-4 col-sm-6">
                                <label>End date:</label>
                              </div>

                              <div class="col-md-8 col-sm-6">
                                <div class="row">
                                  <div class="col-6 ">
                                    <div class="form-group brdrfull">
                                      <input type="text" readonly name="end_date" class="text-center form-control text-gray end_date mt-sm-0 mt-2" placeholder="00/00/00" autocomplete="off">
                                    </div>
                                    <span class="invalid-feedback d-block"></span>
                                  </div>
                                  <div class="col-6">
                                    <div class="row align-items-center justify-content-center multi-pract small-bullet">
                                      <div class="rdio rdio-primary radio-inline">
                                        <input id="Never" name="never" value="1" type="checkbox" autocomplete="off" class="d-none">
                                        <label class="font-15" for="Never" style="top:0">Never</label>
                                      </div>

                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div> -->
                      </div>
                    </div>
                  </div>
                </div>
                <div class="modal-footer">
                  <div class="text-center">
                    <button type="submit" class="cursor-pointer save-btn save-btn-bg confirm-bttn mt-0 w-100">Update and Save</button>
                  </div>
                </div>

                <!-- <div class="mCustomScrollbar">
                  <div class="boxwhite mt-30">
                    <div class="test-results-area labeltop mt-3">
                      <div class="label-input">
                        <div class="row">
                          <div class="col-lg-4 col-md-6">
                            <label>Service provider</label>
                          </div>
                          <div class="col-lg-8 col-md-6">
                            <div class="form-group brdrfull">
                              <select id="color-dropdown" name="service_provider" class="form-control text-align-left">
                                <option value="{{$practitioner->id}}">{{$practitioner->first_name}} {{$practitioner->last_name}} </option>
                              </select>
                            </div>
                          </div>
                        </div>
                      </div>

                      <div class="label-input">
                        <div class="row">
                          <div class="col-lg-4 col-md-6">
                            <label>Location</label>
                          </div>
                          <div class="col-lg-8 col-md-6">
                            <div class="form-group brdrfull">
                              <select id="color-dropdown" name="location" class="form-control text-align-left">
                                @foreach($practitionerBusinessLocations as $val)
                                <option value="{{$val->id}}">{{ \Illuminate\Support\Str::limit($val->address, 40, '...') }}</option>
                                @endforeach
                              </select>
                            </div>
                          </div>
                        </div>
                      </div>

                      <div class="label-input">
                        <div class="row align-items-center justify-content-center">
                          <div class="col-md-4 col-sm-6">
                            <label>Description</label>
                          </div>
                          <div class="col-md-8 col-sm-6">
                            <div class="form-group brdrfull">
                              <input type="text" class="form-control text-left" name="description" placeholder="Eg, day off">
                            </div>
                          </div>
                        </div>
                      </div>

                      <div class="label-input">
                        <div class="row align-items-center justify-content-center multi-pract small-bullet">
                          <div class="col-sm-3 col-6">
                            <div class="rdio rdio-primary radio-inline"><input checked id="one-time" value="One time" type="radio" name="blockout_type" autocomplete="off" class="d-none">
                              <label class="font-15" for="one-time">One time</label>
                            </div>
                          </div>
                          <div class="col-sm-3 col-6">
                            <div class="rdio rdio-primary radio-inline"><input id="daily" name="blockout_type" value="Daily" type="radio" autocomplete="off" class="d-none">
                              <label class="font-15" for="daily">Daily</label>
                            </div>
                          </div>
                          <div class="col-sm-3 col-6">
                            <div class="rdio rdio-primary radio-inline"><input id="weekly" name="blockout_type" value="Weekly" type="radio" autocomplete="off" class="d-none">
                              <label class="font-15" for="weekly">Weekly</label>
                            </div>
                          </div>
                          <div class="col-sm-3 col-6">
                            <div class="rdio rdio-primary radio-inline"><input id="monthly" name="blockout_type" value="Monthly" type="radio" autocomplete="off" class="d-none blockout_type">
                              <label class="font-15" for="monthly">Monthly</label>
                            </div>
                          </div>
                        </div>
                      </div>

                      <div class="label-input hide" id="daysDiv">
                        <div class="row align-items-center ">
                          <div class="col-4 ">
                            <label>Day/s</label>
                          </div>

                          <div class="col-8 ">
                            <div class="days">
                              <div class="health-history-checkbox selectdays-dropdown mb-0 tradingdays">
                                <ul id="be-select" class="be-select-days">
                                  <li>
                                    <div class="rdio rdio-primary radio-inline"><input class="mondays" id="6107e61f5a5ba" name="day[]" value="monday" checked="" type="checkbox" wfd-invisible="true"><label for="6107e61f5a5ba">Monday</label></div>
                                  </li>
                                  <li>
                                    <div class="rdio rdio-primary radio-inline"> <input class="tuesdays" id="6107e61f5a5bd" name="day[]" value="tuesday" checked="" type="checkbox" wfd-invisible="true"> <label for="6107e61f5a5bd">Tuesday</label> </div>
                                  </li>
                                  <li>
                                    <div class="rdio rdio-primary radio-inline"> <input class="wednesdays" id="6107e61f5a5be" name="day[]" value="wednesday" checked="" type="checkbox" wfd-invisible="true"> <label for="6107e61f5a5be">Wednesday</label> </div>
                                  </li>
                                  <li>
                                    <div class="rdio rdio-primary radio-inline"> <input class="thursdays" id="6107e61f5a5bf" name="day[]" value="thursday" checked="" type="checkbox" wfd-invisible="true"> <label for="6107e61f5a5bf">Thursday</label> </div>
                                  </li>
                                  <li>
                                    <div class="rdio rdio-primary radio-inline"> <input class="fridays" id="6107e61f5a5c1" name="day[]" value="friday" checked="" type="checkbox" wfd-invisible="true"> <label for="6107e61f5a5c1">Friday</label> </div>
                                  </li>
                                  <li>
                                    <div class="rdio rdio-primary radio-inline"> <input class="saturdays" id="6107e61f5a5c2" name="day[]" value="saturday" checked="" type="checkbox" wfd-invisible="true"> <label for="6107e61f5a5c2">Saturday</label> </div>
                                  </li>
                                  <li>
                                    <div class="rdio rdio-primary radio-inline"> <input class="sundays" id="6107e61f5a5c3" name="day[]" value="sunday" checked="" type="checkbox" wfd-invisible="true"> <label for="6107e61f5a5c3">Sunday</label> </div>
                                  </li>
                                </ul>
                              </div>
                              <span class="invalid-feedback d-block"></span>
                            </div>
                          </div>
                        </div>
                      </div>

                      <div class="label-input hide" id="monthsDiv">
                        <div class="row align-items-center ">
                          <div class="col-4 ">
                            <label>Months:</label>
                          </div>
                          <div class="col-8 ">
                            <div class="row">
                              <div class="col-sm-6">
                                <div class="months">
                                  <div class="health-history-checkbox selectdays-dropdown mb-0 ">
                                    <ul id="be-select" class="be-select-months">
                                      <li class="d-block">
                                        <div class="rdio rdio-primary radio-inline w-100"><input class="jan" id="jan" value="1" name="month[]" checked="" type="checkbox" wfd-invisible="true"><label class="w-100" for="jan">Jan</label></div>
                                      </li>
                                      <li class="d-block">
                                        <div class="rdio rdio-primary radio-inline w-100"> <input class="feb" id="feb" name="month[]" value="2" checked="" type="checkbox" wfd-invisible="true"> <label class="w-100" for="feb">Feb</label> </div>
                                      </li>
                                      <li class="d-block">
                                        <div class="rdio rdio-primary radio-inline w-100"> <input class="mar" id="mar" name="month[]" value="3" checked="" type="checkbox" wfd-invisible="true"> <label class="w-100" for="mar">Mar</label> </div>
                                      </li>
                                      <li class="d-block">
                                        <div class="rdio rdio-primary radio-inline w-100"> <input class="apr" id="apr" name="month[]" value="4" checked="" type="checkbox" wfd-invisible="true"> <label class="w-100" for="apr">Apr</label> </div>
                                      </li>
                                      <li class="d-block">
                                        <div class="rdio rdio-primary radio-inline w-100"> <input class="may" id="may" name="month[]" value="5" checked="" type="checkbox" wfd-invisible="true"> <label class="w-100" for="may">May</label> </div>
                                      </li>
                                      <li class="d-block">
                                        <div class="rdio rdio-primary radio-inline w-100"> <input class="jun" id="jun" name="month[]" value="6" checked="" type="checkbox" wfd-invisible="true"> <label class="w-100" for="jun">Jun</label> </div>
                                      </li>
                                    </ul>
                                  </div>
                                  <span class="invalid-feedback d-block"></span>
                                </div>
                              </div>
                              <div class="col-sm-6">
                                <div class="months">
                                  <div class="health-history-checkbox selectdays-dropdown mb-0    ">
                                    <ul id="be-select" class="be-select-months">
                                      <li class="d-block">
                                        <div class="rdio rdio-primary radio-inline w-100"><input class="jul" id="jul" value="7" name="month[]" checked="" type="checkbox" wfd-invisible="true"><label class="w-100" for="jul">Jul</label></div>
                                      </li>
                                      <li class="d-block">
                                        <div class="rdio rdio-primary radio-inline w-100"> <input class="aug" id="aug" name="month[]" value="8" checked="" type="checkbox" wfd-invisible="true"> <label class="w-100" for="aug">Aug</label> </div>
                                      </li>
                                      <li class="d-block">
                                        <div class="rdio rdio-primary radio-inline w-100"> <input class="sep" id="sep" name="month[]" value="9" checked="" type="checkbox" wfd-invisible="true"> <label class="w-100" for="sep">Sep</label> </div>
                                      </li>
                                      <li class="d-block">
                                        <div class="rdio rdio-primary radio-inline w-100"> <input class="oct d-none" id="oct" name="month[]" value="10" checked="" type="checkbox" wfd-invisible="true"> <label class="w-100" for="oct">Oct</label> </div>
                                      </li>
                                      <li class="d-block">
                                        <div class="rdio rdio-primary radio-inline w-100"> <input class="nov" id="nov" name="month[]" value="11" checked="" type="checkbox" wfd-invisible="true"> <label class="w-100" for="nov">Nov</label> </div>
                                      </li>
                                      <li class="d-block">
                                        <div class="rdio rdio-primary radio-inline w-100"> <input class="dec" id="dec" name="month[]" value="12" checked="" type="checkbox" wfd-invisible="true"> <label class="w-100" for="dec">Dec</label> </div>
                                      </li>
                                    </ul>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>

                      <div class="label-input" id="on-the">
                        <div class="row align-items-center justify-content-center">
                          <div class="col-md-4 col-sm-6">
                            <label>On the:</label>
                          </div>
                          <div class="col-md-8 col-sm-6">
                            <div class="row graytext">
                              <div class="col-md-5 pr-0">
                                <div class="form-group mb-0 brdrfull">

                                  <div class="form-group mb-0 marg-bttm online-dropdown select-dropdown avalable-drop hide-first-child select-arrow-none border-0">
                                    <select  name="location" id="loction123" class="form-control single-select2 text-center">

                                      <option value="First" selected>First</option>
                                      <option value="Second">Second</option>
                                      <option value="Three">Three</option>
                                      <option value="Four">Four</option>
                                      <option value="Last">Last</option>

                                    </select>
                                  </div>
                                </div>
                                <span class="invalid-feedback d-block"></span>
                              </div>
                              <div class="col-md-2">

                              </div>
                              <div class="col-md-5 pl-0">
                                <div class="form-group mb-0 brdrfull">                      
                                  <p class="text-navy text-center mt-0 font-15">Day of the month</p>
                                </div>
                                <span class="invalid-feedback d-block"></span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>

                      <div class="label-input" id="timeFromDiv">
                        <div class="row align-items-center justify-content-center">
                          <div class="col-md-4 col-sm-6">
                            <label>Time from:</label>
                          </div>
                          <div class="col-md-8 col-sm-6">
                            <div class="row graytext">
                              <div class="col-md-5 pr-0">
                                <div class="form-group mb-0 brdrfull">
                                  <input type="text" class="text-center form-control timepicker" name="start_time" readonly placeholder="00:00 AM">
                                </div>
                                <span class="invalid-feedback d-block"></span>
                              </div>
                              <div class="col-md-2">
                                <span class=" d-block text-center mb-md-0 mb-3 text-navy">To:</span>
                              </div>
                              <div class="col-md-5 pl-0">
                                <div class="form-group mb-0 brdrfull">
                                  <input type="text" class="text-center form-control timepicker" name="end_time" readonly placeholder="00:00 PM">
                                </div>
                                <span class="invalid-feedback d-block"></span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>

                      <div class="label-input hide" id="repeatEveryDiv">
                        <div class="row align-items-center ">
                          <div class="col-md-4 col-sm-6">

                            <label class="tooltip-new">Repeat every: 
                              <span class="tooltip-info-icon">
                                <img src='{{asset("assets/images/information-icon-new.svg")}}' alt="" class="img-fluid info-icon mt-2">
                              </span>

                            </label>
                          </div>

                          <div class="col-md-8 col-sm-6">
                            <div class="row graytext">
                              <div class="col-md-5 pr-0">
                                <div class="form-group brdrfull">
                                  <input type="text" name="repeat_every_week" class="text-center numeric-only form-control text-gray" placeholder="Weeks" autocomplete="off">

                                </div>
                                <span class="invalid-feedback d-block"></span>

                              </div>
                              <div class="col-md-2">
                                <span class=" d-block text-center mb-md-0 mb-3 text-navy"></span>
                              </div>
                              <div class="col-md-5 pl-0">
                                <div class="form-group mb-0 brdrfull">
                                  <p class="text-navy text-center mt-0 font-15">Week/s</p>

                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>

                      <div class="label-input" id="repeat-indefinitely">
                        <div class="row align-items-center justify-content-center">
                          <div class="col-md-4 col-sm-6">
                            <label>Repeat indefinitely:</label>
                          </div>
                          <div class="col-md-8 col-sm-6">
                            <div class="row graytext">
                              <div class="col-md-5 pr-0">
                                <div class="form-group mb-0 brdrfull">

                                  <button class="text-center form-control ">Yes</button>
                                </div>
                                <span class="invalid-feedback d-block"></span>
                              </div>
                              <div class="col-md-2">
                                <span class=" d-block text-center mb-md-0 mb-3 text-navy"></span>
                              </div>
                              <div class="col-md-5 pl-0">
                                <div class="form-group mb-0 brdrfull">

                                  <button class="text-center form-control ">No</button>
                                </div>
                                <span class="invalid-feedback d-block"></span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>

                      <div class="label-input hide" id="repeatEndDateDiv">
                        <div class="row align-items-center justify-content-center">
                          <div class="col-md-4 col-sm-6">
                            <label>Repeat end date:</label>
                          </div>
                          <div class="col-md-8 col-sm-6">
                            <div class="row graytext">
                              <div class="col-md-5 pr-0">
                                <div class="form-group mb-0 brdrfull">
                                  <input type="text" readonly name="repeat_end_date" class="text-center form-control repeat_end_date text-gray" placeholder="00/00/00" autocomplete="off">
                                </div>
                                <span class="invalid-feedback d-block"></span>
                              </div>

                            </div>
                          </div>
                        </div>
                      </div>

                      <div class="label-input">
                        <div id="datesDiv" class="row align-items-center justify-content-center hide">
                          <div class="col-md-4 col-sm-6">
                            <label>Date/s</label>
                          </div>
                          <div class="col-md-8 col-sm-6">
                            <div class="form-group brdrfull no-bttm-full select2-multiple-autoselect">
                              <select class="form-control text-capitalize" id="dates" name="dates[]" multiple="multiple">
                              </select>
                            </div>
                          </div>
                        </div>
                        <div class="label-input mt-3 hide" id="endDateDiv">
                          <div class="row align-items-center ">
                            <div class="col-md-4 col-sm-6">
                              <label>End after:</label>
                            </div>
                            <div class="col-md-8 col-sm-6">
                              <div class="row graytext">
                                <div class="col-md-5 pr-0">
                                  <div class="form-group brdrfull">
                                    <input type="text" class="text-center form-control text-gray  mt-sm-0 mt-2" placeholder="00" />
                                  </div>
                                  <span class="invalid-feedback d-block"></span>
                                </div>
                                <div class="col-md-2">
                                  <span class=" d-block text-center mb-md-0 mb-3 text-navy"></span>
                                </div>
                                <div class="col-md-5 pl-0">
                                  <div class="form-group mb-0 brdrfull">
                                    <p class="text-navy text-center mt-0 font-15" >Repeat/s</p>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>

                        <div class="label-input mt-3 hide" id="startDateDiv">
                          <div class="row align-items-center ">
                            <div class="col-md-4 col-sm-6">
                              <label>Strat date:</label>
                            </div>

                            <div class="col-md-8 col-sm-6">
                              <div class="row graytext">
                                <div class="col-md-5 pr-0">
                                  <div class="form-group brdrfull">
                                    <input type="text" readonly name="start_date" class="text-center form-control text-gray start_date" placeholder="00/00/00" autocomplete="off">
                                  </div>
                                  <span class="invalid-feedback d-block"></span>
                                </div>
                                <div class="col-md-2">

                                </div>
                                <div class="col-md-5">

                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="modal-footer">
                  <div class="text-center">
                    <button type="submit" class="cursor-pointer save-btn save-btn-bg confirm-bttn mt-0 w-100">Update and
                    Save</button>
                  </div>
                </div> -->
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- AddServiceModal Modal End -->
  </div>
  <!-- </div> -->
  <!-- blockout-time Modal End --->
  @endsection
  @section('css')
    <style>
      .timePicker .form-select {display: block;width: 100%;padding: 0.375rem 2.25rem 0.375rem 0.75rem;-moz-padding-start: calc(.75rem - 3px);font-size: 1rem;font-weight: 400;line-height: 1.5;color: #888;background-color: #fff;margin: 0 10px;background-repeat: no-repeat;background-position: right 0.75rem center;background-size: 16px 12px;border: 1px solid #ced4da;border-radius: 0.4rem;transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;-webkit-appearance: none;-moz-appearance: none;appearance: none;}
      .timePicker .btn-group input{display: none;}
      .timePicker .btn-group label{margin: 0;padding: 0.375rem 1rem;color: #68afb5;border: 1px solid;}
      .timePicker .btn-group label:hover{color: white;background-color: #68afb5;}
      .label-am{border-radius: 0.4rem 0 0 0.4rem !important;border-right: none !important;}
      .lable-pm{border-radius: 0 0.4rem 0.4rem 0;border-left: none !important;}
      .select2-container--default .select2-selection--single {border: 1px solid #c7c7c7 !important; height: 33px !important;}
      #InvoiceAddServiceModal .form-control.disabled,
      #myclienthide .form-control.disabled {background-color: #e9ecef !important;}
      .select2-search__field {width: 200px !important;}
      .select2-search{display: none !important;}
      .select2-container .select2-dropdown{padding: 0 !important;overflow: hidden !important;}
      .select2-container .select2-dropdown .select2-results ul.select2-results__options li{padding: 4px 16px !important;}
      .select2-container .select2-dropdown .select2-results ul.select2-results__options li:hover{background-color: #68afb5 !important;color: white !important;}
    </style>
  @endsection

  @section('import-scripts')
  <script>

    
  const Max_ava_water = 60;
  // Using `blur` event
  $('#no_of_occurrences').on("input", function() {
      // Explicit conversion
      const value = this.value ? parseInt(this.value, 10) : NaN;
      // Note that `NaN` is never `>` anything
      if (value > Max_ava_water) {
        this.value = 60;
        //console.log($('#no_of_occurrences').parent());
       //$('#no_of_occurrences').parent().next('.invalid-feedback').text("*Maximum 60");
      }else if (value == 0) {
        this.value = 1;
        //console.log($('#no_of_occurrences').parent());
        //$('#no_of_occurrences').parent().next('.invalid-feedback').text("*Minimum 1");
      }
      else{
        $('#no_of_occurrences').parent().next('.invalid-feedback').text("");
        $("#endDateText").addClass('hide');
      }
      getEndDate();
  });

  $("input[name='day[]']").click(function() {
    getEndDate();
  });

  $("select[name='on_the']").on("change", function() {
    getEndDate();
  });

  

  $("input[name='repeat_every_week']").on("input", function() {
    getEndDate();
  });
  



  function getEndDate()
  {
    if($("input[name='no_of_occurrences']").val() !='' && $("input[name='no_of_occurrences']").val() != 0)
    {
      var selectedDays = new Array();;
      $(".be-select-days").each(function() {
        $(this).find("input").each(function(index) {
          if ($(this).is(":checked")) {
            selectedDays.push(1);                  
                 } else {
                  selectedDays.push(0);
                 }
               });
          });

      var selectedMonths = new Array();
      $(".be-select-months").each(function() {
        $(this).find("input").each(function(index) {
          if ($(this).is(":checked")) {
            selectedMonths.push(1);
          } else {
            selectedMonths.push(0);
          }
        });
      });

      var toDate = null;
      var startDate = null;
      var endDate = null;

      var dates = $.datepicker.formatDate('yy-mm-dd', $('.from_date').datepicker('getDate'));
      if (dates) {
        fromDate = dates;
      }

      var dates1 = $.datepicker.formatDate('yy-mm-dd', $('.to_date').datepicker('getDate'));
      if (dates1) {
        toDate = dates1;
      }
      
      var dates2 = $.datepicker.formatDate('yy-mm-dd', $('.start_date').datepicker('getDate'));
      if (dates2) {
        startDate = dates2;
      }

      if($("input[type='radio'][name='blockout_type']:checked").val() =='Weekly')
      {
        if(selectedDays.indexOf(1) !== -1 == false || $("input[name='repeat_every_week']").val() =='')
        {
          $("#endDateText").addClass('hide');
          $("#end_date_text").text('');
          $("input[name='endsOn']").val('');          
          $(".end_date").datepicker("setDate",null);
          return false;
        }
      }

      $.ajax({
        url: "{{route('practitioner.settings.getEndDate')}}",
        data: {
          'selectedDays': JSON.stringify(selectedDays),
          'startDate': startDate,
          'toDate': toDate,
          'blockout_type': $("input[type='radio'][name='blockout_type']:checked").val(),
          'no_of_occurrences': $("input[name='no_of_occurrences']").val(),
          'repeat_every_week' :  $("input[name='repeat_every_week']").val(),
          'on_the' : $("select[name='on_the']").val()
        },
        method: 'POST',
        success: function(data) {
          $("#endDateText").removeClass('hide');
          $("#end_date_text").text('This blockout will end on '+ data.data);
          if(data.data !='')
          {
            $(".end_date").datepicker("setDate", data.data);
            $("input[name='endsOn']").val(data.data);     
          }
        }
      });
    } else{
      $("#endDateText").addClass('hide');
      $("#end_date_text").text('');
      $("input[name='endsOn']").val('');     
      $(".end_date").datepicker("setDate",null);
    }


  }

  var is_fromcalander="{{Request::get('is_fromcalander')}}";
  var is_calander_time="{{Request::get('calander_time')}}";
  var is_fromcalanderDate="{{$calander_date ?? ""}}";
  var selectedLocationId = $('#selectedLocationId').val();
 
  if(selectedLocationId != ''){
   
    var calanderPage = "{{ url('practitioner/appointments/show?location=')}}"+selectedLocationId;
  }else{
    var calanderPage = "{{ url('practitioner/appointments/show')}}";
  }


  
   console.log('is_fromcalander', is_calander_time);
    

    $("#starttimePicker").timepicker({ onChange: function(value) {
      $("#blockout_start_time").val( value );
      $( "#starttimePicker" ).find( ".form-select" ).css( "color", "#24303f" );
    }});

    $("#endtimePicker").timepicker({ onChange: function(value) {
      $("#blockout_end_time").val( value );
      $( "#endtimePicker" ).find( ".form-select" ).css( "color", "#24303f" );
    }});

    if(is_fromcalander){
      $('#openAddBlockout').trigger('click');
      $('.from_date').val(is_fromcalanderDate);
      $("#starttimePicker").timepicker().setValue(is_calander_time);
      $("input[name='start_time']").val(is_calander_time);
      $( "#starttimePicker" ).find( ".form-select" ).css( "color", "#24303f" );
    }


    $(document).ready(function() {

      getBlockoutTimeList();

      /*$(".timepicker").each(function() {
        $(this).mdtimepicker({
          theme: 'blue',
          useCurrent: false
        });
      });*/

      $(document).on( "click", "#openAddBlockout", function(e) {
        $("input[name='id']").val('');
        e.preventDefault();
        $("#starttimePicker").timepicker().setValue("00:00 AM");
        $("#endtimePicker").timepicker().setValue("00:00 AM");

        $(".timePickerNew").each(function() {
          var closediv = $(this).closest("div").parent();
          $( closediv ).find( ".form-select" ).css( "color", "#cccccc" );
        });
      });

      $('input').attr('autocomplete', 'off');

      $(".js-example-basic-single").select2({minimumResultsForSearch: -1});

      $(".single-select2").select2({
        placeholder: function() {
          $(this).data('placeholder');
        },
        closeOnSelect: true,
        dropdownPosition: 'below',
      });
    });

    $('.load-more').on('click', function() {
      getBlockoutTimeForLoadMore();
    });

    function getBlockoutTimeList() {
      $.ajax({
        url: "{{route('practitioner.settings.getBlockoutTimeList')}}",
        data: '',
        method: 'POST',
        success: function(data) {

          if (data.data.length != 0) {
            var html = '';
            $.each(data.data, function(key, value) {
              var endDate = value.end_date;
              if(value.repeat_indefinitely ==1){
                endDate = 'Never';
              }  
              html += '<tr class="count_tr"><td>' + value.service_provider + '</td><td>' + value.location_name + '</td><td>' + value.description + '</td><td>' + value.start_date + '</td><td>' + value.startTime + '</td><td>' + value.endTime + '</td><td>' + value.blockout_type + '</td><td>' + value.repeat_status + '</td><td>'+endDate+'</td><td><div class="dropdown three-dot-dropdown"><a href="#" class="dropdown-toggle three-dot-menu" data-toggle="dropdown"><span></span><span></span><span></span></a><div class="dropdown-menu"><a  data-id="' + value.id + '" class="dropdown-item cursor-pointer editBlockoutTime">Edit</a><a class="dropdown-item cursor-pointer remove-service deleteBlockoutTime" data-id="' + value.id + '" href="#">Delete</a></div></div></td></tr>';
            });
            $("#blockoutTimeAppend").html(html);

            if ($('.count_tr').length < data.count) {
              $('.load-more').removeClass('hide');
            } else {
              $('.load-more').addClass('hide');
            }
            $(".no_data_found").addClass('hide');
            $("#blockoutTable").removeClass('hide');
          } else {
            $("#blockoutTimeAppend").html('');
            $('.load-more').addClass('hide');
            $(".no_data_found").removeClass('hide');
            $("#blockoutTable").addClass('hide');
          }
        }
      });
    }

    function getBlockoutTimeForLoadMore() {
      $.ajax({
        url: "{{route('practitioner.settings.getBlockoutTimeList')}}",
        method: 'POST',
        data: {
          skip: $('.count_tr').length
        },
        success: function(data) {
          if (data.data.length != 0) {
            var html = '';
            $.each(data.data, function(key, value) {
              html += '<tr class="count_tr"><td>' + value.service_provider + '</td><td>' + value.location_name + '</td><td>' + value.description + '</td><td>' + value.start_date + '</td><td>' + value.startTime + '</td><td>' + value.endTime + '</td><td>' + value.blockout_type + '</td><td>' + value.repeat_status + '</td><td>'+value.end_date+'</td><td><div class="dropdown three-dot-dropdown"><a href="#" class="dropdown-toggle three-dot-menu" data-toggle="dropdown"><span></span><span></span><span></span></a><div class="dropdown-menu"><a  data-id="' + value.id + '" class="dropdown-item cursor-pointer editBlockoutTime">Edit</a><a class="dropdown-item cursor-pointer remove-service deleteBlockoutTime" data-id="' + value.id + '" href="#">Delete</a></div></div></td></tr>';
            });
            $("#blockoutTimeAppend").append(html);

            if ($('.count_tr').length < data.count) {
              $('.load-more').removeClass('hide');
            } else {
              $('.load-more').addClass('hide');
            }

          } else {
            $("#blockoutTimeAppend").html('');
            $('.load-more').addClass('hide');
            $(".no_data_found").removeClass('hide');
          }
        }
      });
    }

    $('.end_date').datepicker({
      format: "dd/mm/yyyy",
      weekStart: 1,
      todayHighlight: true,
      autoclose: true,
      clearBtn: false,
      startDate: '-',
      saveBtn: true,
    });

    // add blockout time
    var fromCalendar = '.from-calendar';
    var toCalendar = '.to-calendar';
    var startDate = '.start_date';
    var endDate = '.end_date';
    calender(fromCalendar, toCalendar);
    calender(startDate, endDate);

    function calender(fromCalendar, toCalendar) {
      $(fromCalendar).datepicker({
        format: "dd/mm/yy",
        weekStart: 1,
        todayHighlight: true,
        autoclose: true,
        clearBtn: false,
        startDate: 0,
        saveBtn: true,
      });

      $(toCalendar).datepicker({
        format: "dd/mm/yy",
        weekStart: 1,
        todayHighlight: true,
        autoclose: true,
        clearBtn: false,
        startDate: 0,
      });

      var startDate = new Date('01/01/2012');
      var FromEndDate = new Date();
      var ToEndDate = new Date();
      ToEndDate.setDate(ToEndDate.getDate() + 365);

      $(fromCalendar).datepicker({
        weekStart: 1,
        startDate: '01/01/2012',
        endDate: FromEndDate,
        autoclose: true
      })
      .on('changeDate', function(selected) {

      getEndDate();

        var to_calendar = $(toCalendar);
        if (selected.date != undefined) {
          startDate = new Date(selected.date.valueOf());
          startDate.setDate(startDate.getDate(new Date(selected.date.valueOf())));
          // $(".to-calendar").datepicker("setDate", startDate);
          // $(".end_date").datepicker("setDate", startDate);
          console.log($(".to-calendar").datepicker().val());
          to_calendar.each(function() {
            $(this).datepicker('setStartDate', startDate);
          });
        }
      });
    }

    $(".single-select2").select2({
      placeholder: function() {
        $(this).data('placeholder');
      },
      closeOnSelect: true,
      dropdownPosition: 'below',
    });

    $('#dates').select2({
      placeholder: "Add dates, eg 1st, 22nd, 31st",
      tokenSeparators: [",", " "]
    });

    $('#addHolidays').parsley();
    $("#addHolidays").submit(function(e) {
      $("input[name='from_date']").attr('disabled',false);
      $("input[name='to_date']").attr('disabled',false);
      e.preventDefault();
      var datas = new FormData($(this)[0]);
      var selectedDays = new Array();;
      $(".be-select-days").each(function() {
        $(this).find("input").each(function(index) {
          if ($(this).is(":checked")) {
            selectedDays.push(1);
                    // {
                    //     'day': $(this).val(),
                    //     'selected': 1
                    // }
                    // datas.append($(this).val(), 1);
                 } else {
                  selectedDays.push(0);
                    // {
                    //     'day': $(this).val(),
                    //     'selected': 0
                    // }
                   // datas.append($(this).val(), 0);
                 }
               });
            // selectedDays.push(arr);
          });

      var selectedMonths = new Array();
      $(".be-select-months").each(function() {
        $(this).find("input").each(function(index) {
          if ($(this).is(":checked")) {
            selectedMonths.push(1);
          } else {
            selectedMonths.push(0);
          }
        });
      });

      var fromDate = null;
      var toDate = null;
      var repeat_end_date = null;
      var startDate = null;
      var endDate = null;

      var dates = $.datepicker.formatDate('yy-mm-dd', $('.from_date').datepicker('getDate'));
      if (dates) {
        fromDate = dates;
      }

      var dates1 = $.datepicker.formatDate('yy-mm-dd', $('.to_date').datepicker('getDate'));
      if (dates1) {
        toDate = dates1;
      }
      
      var dates2 = $.datepicker.formatDate('yy-mm-dd', $('.start_date').datepicker('getDate'));
      if (dates2) {
        startDate = dates2;
      }

	  var dates3 = $.datepicker.formatDate('yy-mm-dd', $('.end_date').datepicker('getDate'));
      if (dates3) {
        endDate = dates3;
      }

      datas.append('fromDate', JSON.stringify(fromDate));
      datas.append('toDate', JSON.stringify(toDate));
      datas.append('startDate', JSON.stringify(startDate));
      datas.append('endDate', JSON.stringify(endDate));
      datas.append('selectedDays', JSON.stringify(selectedDays));
      datas.append('selectedMonths', JSON.stringify(selectedMonths));
      datas.append('addtypes', "blocklist");

      var flag = 0;
      $(".loading").show();
      if ($(this).parsley().isValid()) {
        var modal = $("#blockout-time");
        $.ajax({
          url: "{{route('practitioner.settings.addBlockoutTime')}}",
          data: datas,
          type: 'POST',
          processData: false,
          contentType: false,
        }).done(function(response) {
       
          $(".loading").hide();
          if (response.status == "success") {
            $("input[name='appointmentCount']").val(0);
            modal.modal("hide");
            // $("#from-calendar").datepicker().datepicker("setDate", new Date());
            // $("#to-calendar").datepicker().datepicker("setDate", new Date());
            // $("#service_provider").val('');
            // $("#holiday_location").val('');
            Swal.fire({
              icon: response.status,
              title: response.msg,
              showClass: {
                popup: 'animate__animated animate__fadeInDown'
              },
              hideClass: {
                popup: 'animate__animated animate__fadeOutUp'
              }
            });

            var is_fromcalander="{{Request::get('is_fromcalander')}}";
            if(is_fromcalander){
              window.location.href = calanderPage;
            }    
            getBlockoutTimeList();
          }

          if (response.status == "false") {
            $('.invalid-feedback').text('');
            $.each(response.errors, function(key, value) {
              console.log(key);
              var input = $('input[name=' + key + ']');
              if(key=='day'){
                var input = $('.be-select-days');                            
              } 
              if(key=='month'){
                var input = $('.be-select-months');                       
              }  
              if(response.appointmentCount){
                var parent = input.parent().parent().parent().next('.invalid-feedback').text(value[0]);
              } else{
                var parent = input.parent().next('.invalid-feedback').text(value[0]);
              }                     

              if(key =='repeat_indefinitely')
              {
                $("#repeat_indefinitely").text(value[0]);
              }

              input.addClass('is-invalid');
            });

            if(response.appointmentCount){
              $("input[name='appointmentCount']").val(response.appointmentCount);
            }
          }

          if (response.status == "warning") {
            Swal.fire({
              icon: 'warning',
              title: response.msg,
              showClass: {
                popup: 'animate__animated animate__fadeInDown'
              },
              hideClass: {
                popup: 'animate__animated animate__fadeOutUp'
              }
            });
          }


        });
      }
    });
    // end add blockout time

    //edit blockout time
    $(document).on('click', '.editBlockoutTime', function() {
      var id = $(this).data('id');
      $.ajax({
        url: "{{ route('practitioner.settings.getBlockoutTime')}}",
        method: 'POST',
        data: {
          id: id
        },
        success: function(response) {
          console.log( response.data );
          if (response.data) {
            //$(".to-calendar").datepicker({ minDate: null});
            hideShowDiv(response.data.blockout_type);
            if(response.data.blockout_type == 'One time'){
              $("#One_time").prop('checked',true);
            } else{
              $('#'+response.data.blockout_type).prop('checked',true);
            }

            $(".be-select-days").each(function() {
              var arr = new Array();;
              $(this).find("input").each(function(index) {
                for (const [key, value] of Object.entries(response.data)) {
                  if($(this).val() == key && value == 1)
                  {
                    $(this).prop('checked',true);
                  } 
                  if($(this).val() == key && value == 0)
                  {
                    $(this).prop('checked',false);
                  }
                }
              });
            });

            if(response.data.blockout_type != 'One time')
            {
              if(response.data.repeat_indefinitely == 0)
              {               
                $("#no1").prop('checked',true);
                if(response.data.blockout_type =='Daily' || response.data.blockout_type =='Weekly')
                {
                  $("#repeatEndDateDiv").removeClass('hide');
                  $(".end_date").datepicker("setDate", response.data.to_date);

                } else{
                  $("#endDateDiv").removeClass('hide');
                }
              } else{
                $("#yes1").prop('checked',true);
                // if(response.data.blockout_type =='Daily')
                // {
                //     $("#repeatEndDateDiv").removeClass('hide');
                // } else{
                //     $("#endDateDiv").removeClass('hide');
                // }
              }
            }

            if(response.data.blockout_type == 'Monthly') {
              $("select[name='on_the']").val(response.data.on_the).select2();
            }

            $("input[name='end_after']").val(response.data.repeat);
            $("input[name='repeat_every_week']").val(response.data.repeat_every_week);

            $("input[name='id']").val(response.data.id);
            $("input[name='description']").val(response.data.description);
            $("select[name='service_provider']").val(response.data.service_provider).trigger('change');
            $("select[name='location']").val(response.data.location).trigger('change');
            /*$("input[name='from_date']").val(response.data.from_date);
            $("input[name='to_date']").val(response.data.to_date);*/
            $("input[name='start_time']").val(response.data.start_time);
            $("input[name='end_time']").val(response.data.end_time);
            $("select[name='repeat']").val(response.data.repeat);
            $("input[name='repeat_end_date']").val(response.data.repeat_end_date);
            $("input[name='no_of_occurrences']").val(response.data.no_of_occurrences);


            /*Comment by Jaypal 22-02-2022*/
            $("#starttimePicker").timepicker().setValue(response.data.startTime);
            $("#endtimePicker").timepicker().setValue(response.data.endTime);

            $(".timePickerNew").each(function() {
              var day = $(this).data("day");
              var closediv = $(this).closest("div").parent();
              $( closediv ).find( ".form-select" ).css( "color", "#24303f" );
            });
            /*Comment by Jaypal 22-02-2022*/

            $("#blockout-time").modal('show');
            $("#blockout-time").find('.confirm-bttn').text('Update');
           
            
            $(".start_date").datepicker("setDate", response.data.from_date); 
            $(".from-calendar").datepicker("setDate", response.data.from_date); 
            $(".to-calendar").datepicker("setDate", response.data.to_date); 

            $("input[name='from_date']").attr('disabled',true);
            $("input[name='to_date']").attr('disabled',true);

            /*$(".from-calendar").datepicker({ minDate: null});
            $(".to-calendar").datepicker({ minDate: null});*/
          }
        }
      });
    });
    //end edit blockout time



    /// delete Blockout time 
    $(document).on('click', '.deleteBlockoutTime', function() {
      var id = $(this).data('id');

      swal.fire({
        icon :'warning',
        title: 'Delete blockout time?',
        text: 'This cannot be undone.',
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "Yes",
        cancelButtonText: "No",
      }).then( function( value ) {
        if( value.isConfirmed ) {
          $.ajax({
            url: "{{ route('practitioner.settings.deleteHoliday')}}",
            method: 'POST',
            data: {
              id: id
            },
            success: function(response) {                
              if(response.status == "success"){
                Swal.fire({
                  icon: response.status,
                  title: response.msg,
                  showClass: {
                    popup: 'animate__animated animate__fadeInDown'
                  },
                  hideClass: {
                    popup: 'animate__animated animate__fadeOutUp'
                  }
                });
                getBlockoutTimeList();
              }                
            }
          });
        }
      });
    });
    
    // end delete blockout time

    $('#blockout-time').on('hidden.bs.modal', function() {
      resetValue();
      hideShowDiv('One time');
      $('#One_time').prop('checked',true);
      $("input[name='description']").val('');
      $("input[name='from_date']").attr('disabled',false);
      $("input[name='to_date']").attr('disabled',false);
    });

    function resetValue()
    {
      
      // $("input[name='id']").val('');
     // $("input[name='description']").val('');
      $("input[name='from_date']").val('');
      $("input[name='to_date']").val('');
      $("input[name='end_date']").val('');        
      $("input[name='start_date']").val('');
      $("input[name='start_time']").val('');
      $("input[name='end_time']").val('');
      $("input[name='end_after']").val('');
      $("input[name='no_of_occurrences']").val('');
      $("input[name='repeat_every_week']").val('');
      $('select[name="dates[]"]').val('').trigger("change");
      $('.invalid-feedback').text(''); 
      $("#end_date_text").text('This blockout will end');
      
    }

    $("input[name='blockout_type']").click(function() {
      hideShowDiv($(this).val());
    });

    function hideShowDiv(val) {
      resetValue();
      $("#yes1").prop('checked',false);
      $("#no1").prop('checked',false);

      $(".be-select-days").each(function() {
        $(this).find("input").each(function(index) {
          $(this).prop('checked',false);
        });
      });

      if (val == 'One time') {

        $("#dateFromDiv").removeClass('hide');
        $("#timeFromDiv").removeClass('hide');
        $("#monthsDiv").addClass('hide');
        $("#datesDiv").addClass('hide');
        $("#on-the").addClass('hide');  

        $("#startDateDiv").addClass('hide');
        $("#daysDiv").addClass('hide');
        $("#endDateDiv").addClass('hide');
        $("#repeatEveryDiv").addClass('hide');
        $("#repeat-indefinitely").addClass('hide'); 
        $("#repeatEndDateDiv").addClass('hide');
        $("#endDateText").addClass('hide');
        $("#Occurrences").addClass('hide');

      } else if (val == 'Daily') {

        $("input[name='end_date']").val('');     
        $("#dateFromDiv").addClass('hide');
        $("#repeatEveryDiv").addClass('hide');
        $("#monthsDiv").addClass('hide');
        $("#datesDiv").addClass('hide');
        $("#daysDiv").addClass('hide');
        $("#on-the").addClass('hide');  
        $("#endDateDiv").addClass('hide');

        $("#timeFromDiv").removeClass('hide');
        $("#startDateDiv").removeClass('hide');
        $("#repeat-indefinitely").removeClass('hide');
        $("#Occurrences").removeClass('hide');
        $("#repeatEndDateDiv").addClass('hide'); 
        $("#endDateText").addClass('hide');

      } else if (val == 'Weekly') {
        $("#dateFromDiv").addClass('hide');
        $("#monthsDiv").addClass('hide');
        $("#datesDiv").addClass('hide');    
        $("#on-the").addClass('hide');        
        $("#endDateDiv").addClass('hide');
        $("#repeatEveryDiv").removeClass('hide');
        $("#timeFromDiv").removeClass('hide');
        $("#daysDiv").removeClass('hide');
        $("#startDateDiv").removeClass('hide');
        $("#repeat-indefinitely").removeClass('hide');           
        $("#Weeks").removeClass('hide'); 
        $("#months").addClass('hide'); 
        $("#repeatEndDateDiv").addClass('hide');
        $("#Occurrences").removeClass('hide');
        $("#endDateText").addClass('hide');
      } else {
        $("#startDateDiv").removeClass('hide');
        $("#timeFromDiv").removeClass('hide');
        $("#endDateDiv").addClass('hide');
        $("#datesDiv").removeClass('hide');
        $("#monthsDiv").removeClass('hide');
        $("#daysDiv").removeClass('hide');
        $("#on-the").removeClass('hide');
        $("#repeat-indefinitely").removeClass('hide');
        $("#dateFromDiv").addClass('hide');
        $("#repeatEveryDiv").addClass('hide');
        $("#months").removeClass('hide'); 
        $("#Weeks").addClass('hide'); 
        $("#repeatEndDateDiv").addClass('hide');
        $("#Occurrences").removeClass('hide');
        $("#endDateText").addClass('hide');

        /*var dates = Array();
        for (let i = 1; i <= 31; i++) {
          switch (i % 10) {
            case 1:
            var string = "<option value=" + i + ">" + i + "th</option>";
            dates.push(string);
            break;
            case 2:
            var string = "<option value=" + i + ">" + i + "nd</option>";
            dates.push(string);

            break;
            case 3:
            var string = "<option value=" + i + ">" + i + "rd</option>";
            dates.push(string);

            break;
            default:
            var string = "<option value=" + i + ">" + i + "th</option>";
            dates.push(string);
            break;
          }
        }
        $("#dates").append(dates);*/
      }
    }

    $('input[type=radio][name=repeat_indefinitely]').change(function() {
      var selected = $("input[type='radio'][name='blockout_type']:checked").val();
      if(selected == 'Monthly') {
        if( this.value == '1' ) {
          $("#endDateDiv").addClass('hide');
        } else if (this.value == '0') {
          $("#endDateDiv").removeClass('hide');
        }
      } else {
        if( this.value == '1' ) {
          $("#repeatEndDateDiv").addClass('hide');
        } else{
          $("input[name='end_date']").val(''); 
          $("#repeatEndDateDiv").removeClass('hide');
        }
      }
    });
  </script>

  <script type="text/javascript">
    var Tawk_API = Tawk_API || {},
    Tawk_LoadStart = new Date();
    (function() {
      var s1 = document.createElement("script"),
      s0 = document.getElementsByTagName("script")[0];
      s1.async = true;
      s1.src = 'https://embed.tawk.to/60208ea2c31c9117cb76c4d0/1etviqanh';
      s1.charset = 'UTF-8';
      s1.setAttribute('crossorigin', '*');
      s0.parentNode.insertBefore(s1, s0);
    })();
  </script>

  <script type="text/javascript">
    $(document).ready( function() {

      /*$(document).on( 'change', '#serviceProvider', function(e) {

        e.preventDefault();
        var id = $(this).val();
        var url = "{{ route('practitioner.settings.checkSPBlockoutTime') }}?id="+id;

        $.ajax({
          url: url,
          type: "GET",
          success: function( response )
          {
            $("#locations").empty();
            $.each(response.locations, function(key, value) {
              $("#locations").append($("<option></option>")
                .attr("value", value.id)
                .text(value.address));
            });

            $("#locations").trigger('change');
          }
        });
      });*/
      
    });
  </script>
  @endsection