{{-- {{ dd(Request::get('flag') )}} --}}
@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 !important;
}
input[disabled],select[disabled]
{
  color:grey !important;
} */
.text-gray
{
  color:grey !important;
}
</style>
  <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">
        {{-- {{ route('practitioner.appointments.index',['location'=>Request::get('location')]) }} --}}
        <a class=" p-0" id="back_url" href=""><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"></span>Block out time</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>
    <!-- set a design  02-08-2021 date  -->

    <!-- blockout-time Modal Start --->
    <div class="blockout-time-main businessdetails" id="myclienthide">
      <div id="blockout-time" tabindex="-1" >
            <div class="popup-marg">
              <div class="modal-header">
                <h5 class="modal-title text-center eagle-font">Block out time</h5>
              </div>
              
              <form id="addHolidays" name="addHolidays" method="POST">
                <!--id="addHolidays"-->
                @csrf
                @if(Request::get('flag') && Request::get('id') )
                  <input type="hidden" id="appointment_id" name="appointment_id" value="{{Request::get('id')}}">
                  <input type="hidden" id="block_flag" name="block_flag" value="{{Request::get('flag')}}">
                @else
                  <input type="hidden" id="appointment_id" name="appointment_id" value="">
                  <input type="hidden" id="block_flag" name="block_flag" value="">
                @endif
                <input type="hidden" id="redirect_flag" name="redirect_flag" value="{{Request::get('redirect')}}">
                <input type="hidden" name="id">
                <input type="hidden" name="is_sp_member" id="is_sp_member" value="0">
                <input type="hidden" name="location" id="location">
                <input type="hidden" name="service_provider" id="service_provider">
                <input type="hidden" name="onetime_blockout_in_many_days_count" id="onetime_blockout_in_many_days_count">
                <div class="modal-body p-0">
                    <div class="boxwhite mt-30">
                      <div class="test-results-area labeltop mt-3">
                        <div class="label-input">
                      @if(base64_decode(Request::get('flag')) == 'edit_one_block')
                        {{-- add date filed --}}
                          <div class="row  align-items-center" id="from-calendars" >
                            <div class="col-lg-4 col-md-6">
                              <label class="mb-0">Date:</label> 
                            </div>
                            <div class="col-lg-8 col-md-6">
                                <div class="form-group brdrfull select-arrow-none">
                                    <input type="text" disabled name="from_date_single_edit" class=" form-control from-calendars text-gray from_date_single_edit" placeholder="00/00/00" autocomplete="off">
                                  </div>
                                  <span class="invalid-feedback d-block"></span>
                                </div>
                              </div>
                          </div>
                        @endif
                        {{-- end date filed --}}
                        {{-- add service provider filed --}}
                        <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">
                                <input type="hidden" name="selectedLocationId" id="selectedLocationId" value="{{Request::get('location')}}">
                                  @if($practitioner->role !='admin')
                                    <input type="text"  readonly name="service_provider_single_edit" class="form-control text-gray service_provider_single_edit"  value="">
                                    {{-- <option value="{{$practitioner->id}}">{{$practitioner->first_name}} {{$practitioner->last_name}} </option> --}}
                                  @endif
                              </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">
                                <input readonly type="text"  name="location_single_edit" class="form-control text-gray location_single_edit"  value="">                               
                              </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 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>
                        
                        {{-- end service provider filed --}}
                      {{-- @else --}}
                        {{-- <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 == "q" )
                                      <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">
                                  @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 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> --}}

                      {{-- @endif --}}
                        
                        <input type="hidden" name="appointmentCount" value="0">

                        <div class="label-input mb-2">
                          <div class="row align-items-center justify-content-center blockout_type_select">
                            <div class="col-md-4 col-sm-6">
                              <label class="mb-0">Repeat</label>
                            </div>
                            <div class="col-md-8 col-sm-6">
                              <div class="row graytext">
                                <div class="col-md-12 col-12">
                                  <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="blockout_type" id="blockout_type" onchange="selectNum()" class="single-select2 form-control text-center js-example-basic-single">                                                                              
                                        <option value="One time" selected>None</option>
                                        <option value="Daily">Every day</option>
                                        <option value="Weekly">Every week</option>
                                        <option value="Monthly">Every month</option>
                                      </select>
                                    </div>
                                  </div>
                                  <span class="invalid-feedback d-block"></span>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        
                        <div class="label-input mb-1" id="link_hover">
                          <div class="row align-items-center justify-content-center blockout_type_select">
                            <div class="col-md-4 col-sm-6">
                              
                            </div>
                            <div class="col-md-8 col-sm-6">
                              <div class="row graytext">
                                <div class="col-md-12 col-12">
                                  <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">
                                      <label class="tooltip-new" style="color: #45747a;">
                                        <span class="tooltip-info-icon">
                                          Need to repeat fortnightly?
                                              {{-- <img src="{{asset('assets/images/information-icon-new.svg')}}" alt="" class="img-fluid info-icon mCS_img_loaded"> --}}
                                        </span>   
                                        <div class="tooltiptext" wfd-invisible="true">
                                          <div class="media">
                                             <div class="media-body">Choose weekly and repeat every 2 weeks</div>
                                          </div>
                                        </div>                                     
                                     </label>
                                     
                                    </div>
                                  </div>
                                  <span class="invalid-feedback d-block"></span>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                       
                        {{-- <div class="label-input d-none">
                          <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="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="daysDiv">
                          <div class="row align-items-center ">
                            <div class="col-md-4 col-sm-6">
                              <label class="mb-0">Day/s</label>
                            </div>

                            <div class="col-md-8 col-sm-6">
                              <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">Mon</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">Tue</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">Wed</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">Thu</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">Fri</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">Sat</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">Sun</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 align-items-center">
                                <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"disabled selected>1st</option>
                                        <option value="Second" disabled>2nd</option>
                                        <option value="Third" disabled >3rd</option>
                                        <option value="Fourth" disabled >4th</option>
                                        <option value="Last" disabled >Last</option> --}}

                                        <option value="First" selected>1st</option>
                                        <option value="Second">2nd</option>
                                        <option value="Third">3rd</option>
                                        <option value="Fourth">4th</option>
                                        <option value="Last">5th</option>
                                      </select>
                                    </div>
                                  </div>
                                  <span class="invalid-feedback d-block"></span>
                                </div>
                                
                                <div class="col-md-6 col-6 pl-md-0">
                                  <div class="form-group mb-0 brdrfull">                      
                                    <p class="text-navy text-center font-14 m-0">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 from_date_todate">
                            <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" name="from_date" class="text-center form-control from-calendar 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" name="to_date" require="" class="text-center form-control to-calendar 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>

                       
                        

                        <!-- 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" 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" value="">
                              </div>
                              <span class="invalid-feedback d-block"></span>
                            </div>
                          </div>
                        </div>
                        <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" name="start_date" class="text-center form-control 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 - 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;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 multi-pract" id="afterDiv">
                          <div class="row align-items-center small-bullet">
                            <div class="col-md-4 col-sm-6">
                              <label class="mb-0">End:</label>
                            </div>
    
                            <div class="col-md-8 col-sm-6">
                              <div class="row  align-items-center">
                                <div class="col-md-4 col-6 pr-md-0">
                                <div class="rdio rdio-primary radio-inline"><input  id="after-radio" name="end_after" value="after" type="radio" autocomplete="off" class="d-none" data-parsley-multiple="blockout_type">
                                  <label class="font-15" for="after-radio">After</label>
                                </div>
                              </div>
                              
                              <div class="col-md-4">
                                  <div class="form-group brdrfull">
                                    <input type="text" name="no_of_occurrences" id="no_of_occurrences" 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-4 col-6 pl-md-0">
                                  <p class="text-navy  mt-0 font-15">Occurrence/s</p>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
    
                        <div class="label-input multi-pract" id="onDateDiv">
                          <div class="row align-items-center small-bullet">
                            <div class="col-md-4 col-sm-6">
                            </div>
    
                            <div class="col-md-8 col-sm-6">
                              <div class="row  align-items-center">
                                <div class="col-md-4 col-6 pr-md-0">
                                  <div class="rdio rdio-primary radio-inline"><input id="on-date" name="end_after" value="on_date" type="radio" autocomplete="off" class="d-none" data-parsley-multiple="blockout_type">
                                    <label class="font-15" for="on-date">On date</label>
                                  </div>
                                </div>
                              
                                <div class="col-md-8">
                                  <div class="form-group brdrfull">
                                    <input type="text" name="on_date" class="text-center form-control on_date" placeholder="00/00/00" autocomplete="off">
                                    <!-- <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>
                              <div class="row  align-items-center" id="end_on_date">
                                <div class="col-md-12 col-12 pr-md-0 pt-3">
                                  <label for="" id="text_end_date">Ends on 31/03/24</label>
                                  <input type="hidden" name="endsOn">
                                </div>
                                </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" readonly name="" 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>
                              </div>
                            </div>
                          </div>
                        </div> --}}

                       
                       
                        {{-- <div class="label-input hide" id="repeatEndDateDiv"> 
                          <div class="row align-items-center justify-content-center" id="end_date_text_new">
                            <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" disabled name="end_date" class="text-center form-control end_date text-gray end_date_text_new" 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>
                            </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>
    <!-- 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('');
      //     $(".end_date_text_new").text('');
      //     $(".end_date").datepicker("setDate",null);
      //     return false;
      //   }
      // } 
      $.ajax({
        url: "{{route('practitioner.settings.getEndDate')}}",
        data: {
          'selectedDays': JSON.stringify(selectedDays),
          'startDate': startDate,
          'toDate': toDate,
          'blockout_type': $("#blockout_type").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');
          //$("#endDateText").addClass('hide');
          $("#end_date_text").text('This blockout will end on '+ data.data);
          $(".end_date_text_new").val(data.data);

          $("#text_end_date").text('Ends on '+data.data);
          $("#text_end_date").removeClass('d-none');
          $("input[name='endsOn']").val(data.data);
          // if(data.data !='')
          // {
          //   $(".end_date").datepicker("setDate", data.data);
          //   if(data.data != ''){
          //     $('input[name="after-radio1"]').attr('checked', true);
          //   }
          // }
        }
      });
    } else{
      $("#endDateText").addClass('hide');
      $("#end_date_text").text('');
      $(".end_date_text_new").text('');
      $(".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 calanderPage = "{{ url('practitioner/appointments/show')}}";

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

    $('input[type=radio][name=end_after]').change(function() {
      var selected = $("input[type='radio'][name='end_after']:checked").val();
      if(selected == 'after') {
         $("input[name='on_date']").val('').prop('disabled',true);
         $("input[name='no_of_occurrences']").attr('readonly',false);
         //$("#text_end_date").removeClass('d-none');
         //$("#onDateDiv").addClass('d-none');
         //$("#afterDiv").removeClass('d-none');
      } else {
         $("input[name='no_of_occurrences']").val('').attr('readonly',true);
         $("input[name='on_date']").removeAttr('disabled');
         $("#endsOn").text('');
         $("input[name='endsOn']").val('');
         $("#text_end_date").addClass('d-none');
         //$("#endOnDiv").addClass('d-none');
        // $("#onDateDiv").removeClass('d-none');
         //$("#afterDiv").addClass('d-none');
      }
   });


    $(document).ready(function() {
      editblockappointment();
      //  == 'edit_one_block'

    //   getBlockoutTimeList();

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

      $(document).on( "click", "#openAddBlockout", function(e) {
        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/></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/></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/yy",
      weekStart: 1,
      todayHighlight: true,
      autoclose: true,
      clearBtn: false,
      startDate: '-',
      saveBtn: true,
    });

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



    // add blockout time
    var fromCalendar = '.from-calendar';
    var fromCalendars = '.from-calendars';
    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,
      });
      $(fromCalendars).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,
        disabled: 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) {
      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', $('.on_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));

      var flag = 0;
      $(".loading").show();
      if ($(this).parsley().isValid()) {
        var modal = $("#blockout-time");
        $.ajax({
          url: "{{route('practitioner.appointments.blockout_appointment_update')}}",
          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'
              }
            }).then( function( value ) {
              if( value.isConfirmed ) {

                var redirect_flag = $('#redirect_flag').val();
                var selectedLocationId = $('#selectedLocationId').val();
                window.location.href = response.back_url;
                // if(redirect_flag !='' && redirect_flag =='team_view')
                // {
                //   if(selectedLocationId != ''){
                //     url = "{{ route('practitioner.team.appointments.index', ['location' => 'locations']) }}";
                //     url = url.replace('locations', selectedLocationId);   
                //     window.location.href = url;
                //   }else{
                //     //window.location.href = "{{route('practitioner.team.appointments.index')}}";
                //     window.location.href = response.back_url;
                //   }
                // }else{
                //   window.location.href = response.back_url;
                //   // if(selectedLocationId != ''){
                //   //   url = "{{ route('practitioner.appointments.index', ['location' => 'locations']) }}";
                //   //   url = url.replace('locations', selectedLocationId);   
                //   //   window.location.href = url;
                //   // }else{
                //   //   window.location.href = "{{route('practitioner.appointments.index')}}";
                //   // }
                // }              
              }
            });

            // var is_fromcalander="{{Request::get('is_fromcalander')}}";

            // if(is_fromcalander){
              // window.location.href = calanderPage;
            // }   
          }

          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

    function editblockappointment(){
        var id = $('#appointment_id').val();
        var block_flag = $('#block_flag').val();
        var redirect_flag = $('#redirect_flag').val();
        $.ajax({
        url: "{{ route('practitioner.appointments.blockout_appointment_edit')}}",
        method: 'POST',
        data: {
          block_flag:block_flag,
          redirect_flag:redirect_flag,
          id: id
        },
        success: function(response) {
          console.log(response.data);
          if (response.data) {
            $("#back_url").attr('href',response.data.back_url);
            if(response.data.block_flag == 'edit_one_block'){
			        $("#blockout-time").find('.confirm-bttn').text('Save');
              $('.blockout_type_select').addClass('hide');
              $("#dateFromDiv").addClass('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');
              $('.small-bullet').addClass('hide');
              // $('#link_hover').addClass('hide');
              // $('.from_date_todate').addClass('hide');
              $(".from-calendar").datepicker("setDate", response.data.from_date); 
              $(".from-calendars").datepicker("setDate", response.data.from_date); 
              $("input[name='service_provider_single_edit']").val(response.data.service_provider_name);
              $("input[name='service_provider']").val(response.data.service_provider_id);
              $("input[name='location_single_edit']").val(response.data.location_address);
              $("input[name='location']").val(response.data.location_id);
              $("input[name='description']").val(response.data.description);
              $("input[name='start_time']").val(response.data.startTime);
              $("input[name='id']").val(response.data.id);
              $("input[name='end_time']").val(response.data.endTime);
              $("#starttimePicker").timepicker().setValue(response.data.startTime);
              $("#endtimePicker").timepicker().setValue(response.data.endTime);
              $("select[name='repeat']").val(response.data.repeat);
              $(".to-calendar").datepicker("setDate", response.data.to_date); 
              $(".timePickerNew").each(function() {
                var day = $(this).data("day");
                var closediv = $(this).closest("div").parent();
                $( closediv ).find( ".form-select" ).css( "color", "#24303f" );
              });
              if(response.data.blockout_type =='One time'){
                $("#from-calendars").addClass('hide');
                $("#dateFromDiv").removeClass('hide');
                $('.blockout_type_select').removeClass('hide');
              }
            }else{
              
                hideShowDiv(response.data.blockout_type);
                $("select[name='blockout_type']").val(response.data.blockout_type).trigger('change');

                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);
                    // if(response.data.to_date != ''){
                    //     $('input[name="after-radio1"]').attr('checked', true);
                    // }

                  } 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();
                $("select[name='on_the'] option:selected").removeAttr('disabled');
              }

              //$("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='service_provider_single_edit']").val(response.data.service_provider_name);
              $("input[name='location_single_edit']").val(response.data.location_address);
              $("input[name='service_provider']").val(response.data.service_provider_id);
              $("input[name='location']").val(response.data.location_id);
              $("input[name='start_time']").val(response.data.startTime);
              $("input[name='end_time']").val(response.data.endTime);
              $("select[name='repeat']").val(response.data.repeat);
              $("input[name='repeat_end_date']").val(response.data.repeat_end_date);
              $("input[name='end_time']").val(response.data.endTime);
             
              if(response.data.end_after =='' || response.data.end_after == null || response.data.end_after =='on_date')
              {
                $('#on-date').attr('checked', true);
                $("input[name='no_of_occurrences']").val('').attr('readonly',true);
               // $('input[name="after-radio"]').attr('disabled', true);
               $(".on_date").datepicker("setDate", response.data.to_date); 
                $('input[name="on_date"]').val(response.data.to_date);
                $("#text_end_date").addClass('d-none');
              }else{
                if(response.data.no_of_occurrences != ''){
                  $('#after-radio').attr('checked', true);
                  $("input[name='on_date']").val('').prop('disabled',true);
                  $("input[name='no_of_occurrences']").val(response.data.no_of_occurrences);
                  $("input[name='no_of_occurrences_new']").val(response.data.no_of_occurrences);
                  $("#text_end_date").text('Ends on '+response.data.to_date);
                  $("#text_end_date").removeClass('d-none');
                }
              }
             
            

              /*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").find('.confirm-bttn').text('Save');
            
              
              $(".start_date").datepicker("setDate", response.data.from_date); 
              $(".from-calendar").datepicker("setDate", response.data.from_date); 
              $(".from-calendars").datepicker("setDate", response.data.from_date); 
              $(".to-calendar").datepicker("setDate", response.data.to_date); 
              /*$(".from-calendar").datepicker({ minDate: null});
              $(".to-calendar").datepicker({ minDate: null});*/
            } 
            //$('.select2-selection__rendered').attr('style','color:gray !important');  
            $('.select2-selection__arrow').addClass('d-none');   
            $("input[name='onetime_blockout_in_many_days_count']").val(response.data.onetime_blockout_in_many_days_count);
          }
        }
      });
    }
    //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); 
            /*$(".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('');
    });

    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');
      
    }

    // $("select[name='blockout_type']").click(function() {
    //   hideShowDiv($(this).val());
    // });
    function selectNum() {
      var val = $("#blockout_type").val();
      hideShowDiv(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');
        $("#afterDiv").addClass("hide");
        $("#onDateDiv").addClass("hide");

      } else if (val == 'Daily') {
        $("input[name='end_date']").val('');     
       // $('#end_on_date').addClass('hide');
        $("#dateFromDiv").addClass('hide');
        $("#repeatEveryDiv").addClass('hide');
        $("#monthsDiv").addClass('hide');
        $("#datesDiv").addClass('hide');
        $("#daysDiv").addClass('hide');
        $("#on-the").addClass('hide');  
        $("#endDateDiv").addClass('hide');
        $('#end_date_text_new').addClass('hide');
        $("#timeFromDiv").removeClass('hide');
        $("#startDateDiv").removeClass('hide');
        $("#repeat-indefinitely").removeClass('hide');
        // $("#Occurrences").removeClass('hide');
        $("#Occurrences").addClass('hide');
        $("#repeatEndDateDiv").addClass('hide'); 
        $("#endDateText").addClass('hide');
        $("#afterDiv").removeClass("hide");
        $("#onDateDiv").removeClass("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").addClass('hide');
        $("#endDateText").addClass('hide');
        $("#afterDiv").removeClass("hide");
        $("#onDateDiv").removeClass("hide");
      } else {
        $("#startDateDiv").removeClass('hide');
        $("#timeFromDiv").removeClass('hide');
        //$('#end_on_date').addClass('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").addClass('hide');
        $("#endDateText").addClass('hide');
        $("#afterDiv").removeClass("hide");
        $("#onDateDiv").removeClass("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');
        }
      }
    });
    // $("input[name='start_date']").datepicker({
    //     format: "dd/mm/yy",
    //     weekStart: 1,
    //     todayHighlight: true,
    //     autoclose: true,
    //     clearBtn: false
    // }).on('changeDate', function(e){
    //     // Update the startDate of the end_date datepicker when start_date changes
    //     var newStartDate = $("input[name='start_date']").datepicker('getDate');
    //     $("input[name='on_date']").datepicker('setStartDate', newStartDate);
    // });

    // // Initialize the end_date datepicker
    // $("input[name='on_date']").datepicker({
    //     format: "dd/mm/yy",
    //     weekStart: 1,
    //     todayHighlight: true,
    //     autoclose: true,
    //     clearBtn: false,
    //     startDate: '-'
    // });
  </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() {    
      
    });
  </script>
  @endsection