@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' />
<link href="{{ asset('assets/css/croppie.min.css') }}" rel='stylesheet' />

<style>
   .timezoneDiv .select2-selection__arrow
   {
      display: none;
   }
   .newBusinessDetailsPage .top-pading{ 
      margin-top: 0.25rem !important; 
   }
   .sidebar-menu {
    display: none;
   }
   body.grey-bg {
    background: #f7f7f7;
   }
   .autosizetextaria {
        overflow-y: hidden; 
        resize: none; 
    }
    .error-message{
      font-size: 80%;
    }
    .notes-menu {
        background: #f7f7f7 !important;
    }
    .removeBottonSpace {
        /* margin-top : -16px !important; */
    }
    .voucher-setting-box .card-header .btn-link:after
    {
        display: none !important;
    }

    .voucher-setting-box .card-body .form-control::placeholder {
        letter-spacing: 0;
    }
    .voucher-setting-box .card-body .form-control
    {
        padding: 5px !important;
    }
</style>

    <div class="voucher-setting-main">
        <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="{{ route('practitioner.my.waitlist') }}"><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 "><span class="arca-font"></span>Add to waitlist</h1>

                </nav>

                <div class="brdr-bttm w-100"></div>
            </div>
        </div>

        <div class="voucher-setting-box">
            <div id="accordion">
                <div class="card">
                    <div class="card-header" id="headingOne">
                        <button class="btn btn-link" aria-expanded="true" aria-controls="collapseOne">
                            Add to waitlist
                        </button>
                    </div>
    
                    <div id="collapseOne" class="collapse show waitlist_form" aria-labelledby="headingOne" data-parent="#accordion">
						<form id="addWaitlist" name="addWaitlist" method="POST" autocomplete="off">
						@csrf
                        <input type="hidden" name="tab_number" id="tab_number" value="1">
                        <input type="hidden" name="added_by" id="added_by" value="practitioner">
                        <input type="hidden" name="waitlist_id" id="waitlist_id" value="@if(!empty($waitlist)){{$waitlist->id}}@endif">
                        <div class="card-body">
                            <div class="seting-card-body">
                                <div class="form-group client">
                                    <div class="row">
                                        <div class="col-sm-12 col-md-5">
                                            <label>Client name</label>
                                        </div>                                     
                                        <div class="col-sm-12 col-md-7">
                                            <div class="form-group-select2">
                                                <div class="row">
                                                    <div class="left">
                                                        <input placeholder="Select client" class="typeahead form-control client_id_waitlist_add" name="client_id_waitlist_add"  autocomplete="off" type="text" @if(!empty($waitlist)) value="{{ $waitlist->client_name }}" @endif>
                                                        <input type="hidden" name="client_id_for_waitlist" value="@if(!empty($waitlist)){{$waitlist->client_id}}@endif">
                                                    </div>
                                                    <span style="padding-left:5px" class="invalid-feedback d-block"></span>  
                                                    <div class="right">
                                                        <div class="add-client">
                                                            <a class="cursor-pointer addFlag" data-toggle="modal" data-target="#addquickModal" title="Add client">
                                                                <img src="{{asset('assets/images/Add-client-grey.svg')}}" alt="" class="img-fluid grey-icon" />
                                                                <img src="{{asset('assets/images/Add-client-white.svg')}}" alt="" class="img-fluid white-icon" />
                                                                <div class="hover-text">
                                                                Add client
                                                                </div>
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-sm-12 col-md-5">
                                            <label for="">Service provider</label>
                                        </div>
                                        <div class="col-sm-12 col-md-7">
                                            <div class="form-group-select2">
                                                <div class="form-group select2-multiple-autoselect m-0">
                                                    <select aria-placeholder="Select service"  class="form-control text-capitalize select2-form-control" id="service-providers" name="service_providers[]" multiple="multiple">                                                 
                                                        @if(count($serviceProviders) > 1)
                                                            <option class="text-capitalize" value="Any"  @if(!empty($waitlist) && in_array('Any', $waitlist->edit_serviceProviders)) selected @endif >Any</option>
                                                        @endif
                                                        @foreach ($serviceProviders as $sp)
                                                        <option class="text-capitalize"
                                                        @if($sp !='Any' && count($serviceProviders) == 1) selected @endif
                                                        value="{{$sp->id}}" 
                                                        @if(!empty($waitlist) && in_array($sp->id, $waitlist->edit_serviceProviders)) selected @endif>{{$sp->first_name}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <span class="invalid-feedback d-block"></span>  
                                            </div>
                                        </div>                                        
                                    </div>
                                </div>

                                <div class="form-group small-padding-group">
                                    <div class="row">
                                        <div class="col-sm-12 col-md-5">
                                            <label class="tooltip-new">Service type </label>
                                        </div>
                                        <div class="col-sm-12 col-md-7">
                                            <div class="form-group-select2">
                                                <div class="form-group select2-multiple-autoselect m-0">
                                                    <select aria-placeholder="Select service"  class="form-control text-capitalize select2-form-control" id="Service-providers-available-for-online-consults" name="applicable_services[]" multiple="multiple">                                                    
                                                        @if(count($practitonerAppointmentTypes) > 1)
                                                            <option class="text-capitalize" value="Any" @if(!empty($waitlist) && in_array('Any', $waitlist->edit_applicable_services)) selected @endif >Any</option>
                                                        @endif
                                                        @foreach ($practitonerAppointmentTypes as $appointmentType)
                                                        <option class="text-capitalize"
                                                        @if($appointmentType !='Any' && count($practitonerAppointmentTypes) == 1) selected @endif
                                                        value="{{$appointmentType->id}}" @if(!empty($waitlist) && in_array($appointmentType->id, $waitlist->edit_applicable_services)) selected @endif>{{$appointmentType->appointment_type}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <span class="invalid-feedback d-block"></span>  
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-sm-12 col-md-5">
                                            <label for="">Preferred location</label>
                                        </div>
                                        <div class="col-sm-12 col-md-7">
                                            <div class="form-group-select2">
                                                <div class="form-group select2-multiple-autoselect m-0">
                                                    <select aria-placeholder="Select location"  class="form-control text-capitalize select2-form-control" id="preferred_locations" name="preferred_locations[]" multiple="multiple">                                                 
                                                        @if(count($locations) > 1)
                                                            <option class="text-capitalize" value="Any" @if(!empty($waitlist) && in_array('Any', $waitlist->edit_locations)) selected @endif >Any</option>
                                                        @endif
                                                        @foreach ($locations as $loc)
                                                        <option class="text-capitalize" 
                                                        @if($loc !='Any' && count($locations) == 1) selected @endif
                                                        value="{{$loc->id}}" @if(!empty($waitlist) && in_array($loc->id, $waitlist->edit_locations)) selected @endif>{{$loc->address}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <span class="invalid-feedback d-block"></span>
                                            </div>
                                        </div>                                        
                                    </div>
                                </div>
                                
                                <div class="form-group small-padding-group">
                                    <div class="row">
                                        <div class="col-sm-12 col-md-5">
                                            <label for="">Availability</label>
                                        </div>
                                        <div class="col-sm-12 col-md-7">
                                            <div class="row" id="pricing_error">
                                                <div class="col-sm-6 col-6 col-md-6">                                                   
                                                    <div class="age-title">
                                                        <input type="radio" id="availability1" name="availability"  value="flexible" autocomplete="off" @if(!empty($waitlist) && $waitlist->availability == 'flexible') checked @endif>
                                                        <label for="availability1" class="w-100 text-center ">Flexible</label>
                                                    </div>
                                                    <span class="invalid-feedback d-block"></span>

                                                </div>                                             
                                                <div class="col-sm-6 col-6 col-md-6">
                                                    <div class="age-title">
                                                        <input type="radio" id="availability2" name="availability"  value="specific_dates" autocomplete="off" @if(!empty($waitlist) && $waitlist->availability == 'specific_dates') checked @endif>
                                                        <label for="availability2" class="w-100 text-center ">Specific dates</label>
                                                    </div>
                                                </div>                                               
                                            </div>
                                            <span class="invalid-feedback d-block"></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="@if(!empty($waitlist) && $waitlist->availability == 'flexible') @else d-none @endif" id="with_flexible" >
                                    <div class="form-group small-padding-group">
                                        <div class="row">
                                        <div class="col-md-4 col-4">
                                            <label class="">Preferred times</label>
                                        </div>                            
                                        </div>
                                        <div class="row">
                                            <div class="col-md-12 col-12">
                                                <textarea name="notes" id="notes" type="text" class="autosizetextaria w-100" placeholder="Enter availability">@if(!empty($waitlist)){{$waitlist->notes}}@endif</textarea>        
                                            </div>
                                            <span class="invalid-feedback d-block" style="padding-left: 15px"></span>

                                        </div>
                                    </div>          
                                    <div class="form-group small-padding-group d-none">
                                        <div class="prefered-days">
                                            <div class="row">
                                                <div class="col-sm-12 col-md-5">
                                                    <label class="tooltip-new">Preferred day</label>
                                                </div>                                   
                                                <div class="col-sm-12 col-md-7">
                                                    <div class="row be-select">
                                                        @foreach($days as $day)
                                                            <div class="col-sm-3 col-md-3">                                                   
                                                                <div class="age-title">
                                                                    <input type="checkbox" class="day-checkbox" name="preferred_day" id="day_{{$day}}" value="{{$day}}" autocomplete="off">
                                                                    <label for="day_{{$day}}" class="w-100 text-center ">{{$day}}</label>
                                                                </div>
                                                            </div>
                                                        @endforeach 
                                                    </div>
                                                <span class="invalid-feedback d-block" id="prefered_day_error"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>   
                                    <div class="form-group small-padding-group d-none">
                                        <div class="row">
                                            <div class="col-sm-12 col-md-5">
                                                <label for="">Available from</label>
                                            </div>
                                            <div class="col-sm-12 col-md-7">
                                                <div class="row">
                                                    <div class="col-sm-12 col-md-4">
                                                        <div class="start-time">
                                                            <div class="form-group brdrfull">
                                                            <div data-flag="from" id="available_from" class="timePickerNew d-flex align-items-center"></div>
                                                            <input type="hidden" class="form-control" name="available_from"  value="" readonly placeholder="00:00 PM">
                                                            </div>
                                                            <span class="invalid-feedback d-block"></span>
                                                        </div>
                                                    </div>                                                                         
                                                </div>
                                            </div>
                                        </div>
                                    </div>         
                                    <div class="form-group small-padding-group d-none">
                                        <div class="row">
                                            <div class="col-sm-12 col-md-5">
                                                <label for="">Available to</label>
                                            </div>
                                            <div class="col-sm-12 col-md-7">
                                                <div class="row">
                                                    <div class="col-sm-12 col-md-4">
                                                        <div class="start-time">
                                                            <div class="form-group brdrfull">
                                                            <div data-flag="to" id="available_to" class="timePickerNew d-flex align-items-center"></div>
                                                            <input type="hidden" class="form-control" name="available_to"  value="" readonly placeholder="00:00 PM">
                                                            </div>
                                                            <span class="invalid-feedback d-block"></span>
                                                        </div>
                                                    </div>                                                                         
                                                </div>
                                            </div>
                                        </div>
                                    </div>  
                                </div>
                                <div class="specific-date-main">
                                      <div class="form-group small-padding-group @if(!empty($waitlist) && $waitlist->availability == 'specific_dates')  @else d-none @endif" id="with_specific_dates">
                                    {{-- <div class="row">
                                        <div class="col-sm-12 col-md-3 date-box-div">
                                            <label class="tooltip-new">Available date                                                
                                            </label>
                                        </div> 
                                        <div class="col-sm-12 col-md-4 time-box-div">
                                            <label class="tooltip-new">Available from                                                
                                            </label>
                                        </div> 
                                        <div class="col-sm-12 col-md-4 time-box-div">
                                            <label class="tooltip-new">Available to                                                
                                            </label>
                                        </div>                                        
                                    </div>  --}}
                                    
                                    @if(!empty($waitlist) && $waitlist->availability == 'specific_dates')
                                 
                                    @foreach($waitlist->dateTimes as $key=>$dateTime)
                                                                                <div class="row specific_date_div {{$addClass}}" id="div_{{$key}}">
                                            <div class="col-sm-12 col-md-3 date-box-div"> 
                                                <label class="tooltip-new {{$show}}">Available date</label>                                                 
                                                <div id="app-date-box">
                                                    <input type="text" class="form-control datepicker-custom waitlist_date" placeholder="dd/mm/yyyy" name="waitlist_date[]"
                                                    autocomplete="off" @if(isset($dateTime->date)) value="{{ $dateTime->date }}" @endif>
                                                </div>
                                                <span class="invalid-feedback d-block"></span>
                                            </div> 
                                            <div class="col-sm-12 col-md-4 time-box-div">                                              
                                                <div class="start-time">
                                                    <div class="form-group-select2">
                                                        <label class="tooltip-new {{$show}}">Available from</label>   
                                                        <div class="form-group brdrfull m-0">
                                                            <div data-flag="start" id="waitlist_start_{{$key}}" class="timePickerNew d-flex align-items-center"></div>
                                                            <input type="hidden" class="form-control" name="start_time[]"  value="@if(isset($dateTime->start_time)) {{ $dateTime->start_time->format('h:i A') }} @endif" readonly placeholder="00:00 PM">
                                                        </div>
                                                        <span class="invalid-feedback d-block"></span>
                                                    </div>
                                                </div>
                                            </div> 
                                            <div class="col-sm-12 col-md-4 time-box-div">                                               
                                                <div class="start-time">
                                                    <div class="form-group-select2">
                                                        <label class="tooltip-new {{$show}}">Available to</label>   
                                                        <div class="form-group brdrfull m-0">
                                                            <div data-flag="end" id="waitlist_end_{{$key}}" set-value="{{ isset($dateTime->end_time) ? $dateTime->end_time->format('h:i A') : '' }}" class="timePickerNew d-flex align-items-center"></div>
                                                            <input type="hidden" class="form-control" name="end_time[]"  value="@if(isset($dateTime->end_time)) {{ $dateTime->end_time->format('h:i A') }} @endif" readonly placeholder="00:00 PM">
                                                        </div>
                                                        <span class="invalid-feedback d-block"></span>
                                                    </div>
                                                </div>
                                            </div>                                        
                                            <div class="col-sm-12 col-md-1 plus-minus-action">
                                                <div class="d-flex action-btns minus-icon-div">
                                                    <a href="#">
                                                        <img src="{{asset('assets/images/minus-icon.png')}}" alt="" class="img-fluid removeAvailableSection" data-flag="div_{{$key}}" />
                                                    </a>  
                                                    @if(count($waitlist->dateTimes) == $key + 1)
                                                    <a id="plusIconImage" href="#">
                                                        <img src="{{asset('assets/images/Voucher/plus.svg')}}" id="addDateBlock" alt="" class="img-fluid" />
                                                    </a>
                                                    @endif
                                                </div>
                                            </div> 
                                            <div class="col-sm-12">
                                                <hr class="mt-0">
                                            </div>                                       
                                        </div>    
                                    @endforeach
                                    @else
                                        <div id="dateContainer">
                                            <div class="row specific_date_div" id="div_default">
                                                <div class="col-sm-12 col-md-3 date-box-div">   
                                                    <label class="tooltip-new">Available date</label>                                            
                                                    <div id="app-date-box">
                                                        <input type="text" class="form-control datepicker-custom waitlist_date" placeholder="dd/mm/yyyy" name="waitlist_date[]"
                                                        autocomplete="off">
                                                    </div>
                                                    <span class="invalid-feedback d-block"></span>
                                                </div> 
                                                <div class="col-sm-12 col-md-4 time-box-div">                                              
                                                    <div class="start-time">
                                                        <div class="form-group-select2">
                                                            <label class="tooltip-new">Available from</label>
                                                            <div class="form-group brdrfull m-0">
                                                                <div data-flag="start" id="waitlist_start_1" class="timePickerNew d-flex align-items-center"></div>
                                                                <input type="hidden" class="form-control" name="start_time[]"  value="" readonly placeholder="00:00 PM">
                                                            </div>
                                                            <span class="invalid-feedback d-block"></span>
                                                        </div>
                                                    </div>
                                                </div> 
                                                <div class="col-sm-12 col-md-4 time-box-div">                                               
                                                    <div class="start-time">
                                                        <div class="form-group-select2">
                                                            <label class="tooltip-new">Available to</label>  
                                                            <div class="form-group brdrfull m-0">
                                                                <div data-flag="end" id="waitlist_end_1" class="timePickerNew d-flex align-items-center"></div>
                                                                <input type="hidden" class="form-control" name="end_time[]"  value="" readonly placeholder="00:00 PM">
                                                            </div>
                                                            <span class="invalid-feedback d-block"></span>
                                                        </div>
                                                    </div>
                                                </div>                                        
                                                <div class="col-sm-12 col-md-1 plus-minus-action">
                                                    <div class="d-flex action-btns minus-icon-div">
                                                        <a href="#">
                                                            <img src="{{asset('assets/images/minus-icon.png')}}" alt="" class="img-fluid removeAvailableSection" data-flag="div_default" />
                                                        </a>  
                                                        <a id="plusIconImage" href="#">
                                                            <img src="{{asset('assets/images/Voucher/plus.svg')}}" id="addDateBlock" alt="" class="img-fluid" />
                                                        </a>
                                                    </div>
                                                </div>  
                                                <div class="col-sm-12">
                                                    <hr class="mt-0">
                                                </div>                                       
                                            </div> 
                                        </div> 
                                    @endif 
                                    
                                </div>    
                                </div>                                                        
                                                                        
                            </div>
                        </div>
                        <div class="voucher-footer">
                            <button type="submit" class="cursor-pointer btn-fill">Update and save</button>
                        </div>
                        </form>
                    </div>
                </div>               
            </div>
        </div>
    </div>


     <!-- add quick Modal -->
    <div class="client-follow-popup customscroll addquick">
        <div class="modal fade" id="addquickModal"  role="dialog" aria-labelledby="exampleModalLabel1"
           aria-hidden="true">
           <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <form id="addClientQuick" autocomplete="off">                 
                        <div class="popup-marg">
                            <div class="modal-header">
                                <h5 class="modal-title text-center font-400" id="exampleModalLabel1">Quick Add</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>
                            <div class="modal-body p-0">
                                <div class="mCustomScrollbar">
                                    <div class="comm-marg detail-form step-popup">
                                        <div class="whitecard marg30">
                                        <h3 class="ml-0 font-bold">Client details</h3>
                                        <div class="form-group">
                                            <input autocomplete="off" type="text" class="form-control small-input" placeholder="First name" name="name">
                                        </div>
                                        <span class="invalid-feedback d-block"></span>
                                        <div class="form-group">
                                            <input autocomplete="off" type="text" class="form-control small-input" placeholder="Last name" name="last_name">
                                        </div>
                                        <span class="invalid-feedback d-block"></span>
                                        <div class="form-group">
                                            <input autocomplete="off" type="text" 
                                            class="form-control small-input " 
                                            placeholder="Mobile" maxlength = "20"  name="phone">
                                        </div>
                                        <span class="invalid-feedback d-block"></span>
                                        <div class="form-group">
                                            <input autocomplete="off" type="text" class="form-control small-input" placeholder="Email" name="email">
                                        </div>
                                        <span class="invalid-feedback d-block"></span>

                                        <div class="caht-tootips">
                                                <span>Mobile and/or email is mandatory</span>
                                                <span class="notify_credit_btn2"><img src="{{asset('assets/images/info-icon.png')}}" alt="" class="info-icon"></span>
                                                <div class="send-client-box-geo">
                                                    <div class="media">
                                                    <img src="{{asset('assets/images/round-n-icon.png')}}" class="align-self-start mr-2" alt="">
                                                    <div class="media-body">
                                                        <h5 class="mt-0 text-left">
                                                        New clients will receive an invitation to create an optional account. This allows you and your client access to all of the My Appointments features including appointment and invoice tracking, product ordering and more
                                                        </h5>
                                                    </div>
                                                    </div>
                                                </div>
                                        </div>

                                        </div>
                                
                                        <div class="whitecard marg30 connectfamilyadd" style="display:none;">
                                        <div id="seldropdownParent" class="form-group select_custom ">                                   
                                        </div>
                                        <span class="invalid-feedback d-block"></span>
                                        <div class="form-group">
                                            <input type="text" class="form-control small-input alpha-only" placeholder="Relation" name="relation" maxlength="12">
                                        </div>
                                        </div>
                                        <div class="whitecard marg30 referral-source ">
                                        <h3 class="ml-0 font-bold">Referral source </h3>
                                        <div class="gray-brdr">
                                            <div class="form-group marg-bttm online-dropdown select-dropdown avalable-drop">
                                                <select id="mounth17" class="form-control single-select2 referral_source_sel" name="referral_source"  data-placeholder="Select referral source">
                                                    <option></option>
                                                    @foreach($referralSource as $rs)
                                                    <option value="{{$rs->id}}">{{$rs->name}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            
                                        </div>
                                       
                                        <div class="gray-brdr">
                                            <div id="AppdropdownParent" class="form-group select_custom marg-bttm online-dropdown select-dropdown avalable-drop" style="display:none">
                                                <select id="referred_by" name="referred_by" class="form-control" data-placeholder="Select client">
                                                    <option></option>
                                                    @foreach($referredClientslist as $client23)
                                                    <option value="{{$client23->id ?? ''}}" >{{ucwords($client23->name ?? "")}}</option>
                                                    @endforeach
                                                </select>
                                              
                                                <span class="invalid-feedback d-block"></span>
                                            </div>
                                            <span class="invalid-feedback d-block"></span>
                                        </div>
                                        

                                        <div id="otherPractitioner" class="form-group" style="display:none;">
                                            <input type="text" class="form-control small-input" placeholder="Referrer name" name="referral_source_name">
                                        </div>
                                        <span class="invalid-feedback d-block"></span>
                                        </div>

                                        
                                        <div class="whitecard marg30">
                                        <h3 class="ml-0 font-bold connect-collapse">
                                            Connect file to family member
                                            <input type="checkbox" id="y_or_n" class=" d-none" name="connect_family" value="Y" />
                                            <label class="connect-tick collapsed" for="y_or_n" data-toggle="collapse" href="#connect-collapse" role="button"></label>
                                        </h3>                                 
                                        <div class="collapse referral-source" id="connect-collapse">
                                            

                                            <div style="color:#24303f">
                                                Use this feature to connect family members who share an email address and/or phone number only. This will link the accounts to the same email and/or mobile and enable the primary account holder to to manage communication and appointments for all family members via the one login.
                                                </div>
                                                <br>

                                            <div class="form-group">
                                            <input type="text" name="relation_client_search" autocomplete="off" class="form-control small-input typeahead "  placeholder="Client name" data-placeholder="Select client">
                                            <input type="hidden" name="relation_client_id" id="relation_client_id" class="form-control">
                                            </div>
                                            <span class="invalid-feedback d-block"></span>
                                            
                                            <div class="form-group">
                                                <input type="text" class="form-control small-input alpha-only" placeholder="Relationship to this family member" name="relation">
                                            </div>
                                            <span class="invalid-feedback d-block"></span>
                                        </div>                              
                                        </div> 

                                    </div>                       
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="yellow-btn mt-0 save-btn light-bg w-100 next" >Save</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
     <!-- add quick Modal -->
@endsection

@section('import-scripts')
<script src='{{ asset("assets/js/colorPick.js")}}'></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
{{-- <script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script> --}}
<script src="{{asset('assets/js/practitioner/my-settings.js')}}" type="text/javascript"></script>
<script src='{{ asset("assets/js/croppie.js")}}'></script>
<script type="text/javascript">

    $(document).ready(function() {
        $('#addquickModal').on('shown.bs.modal', function () {
            $('#referred_by').select2({
                placeholder: function() {
                    $(this).data('placeholder');
                },
                dropdownParent: $('#addquickModal')
            });
        })
        $(".waitlist_date").datepicker({
            format: "dd/mm/yyyy",
            weekStart: 1,
            todayHighlight: true,
            autoclose: true,
            clearBtn: false,
            // container: "#div_default",
        });

        $(".timePickerNew").each(function() {
            var closediv = $(this).closest("div").parent();
            var settime = '00:00 AM';
            var flagnew = $(this).data("flag");
            $(this).timepicker({
            onChange: function(value) {
                // console.log( closediv );
                // console.log( $(this).find(".form-select") );
                $(closediv).find("input[name*="+flagnew+"_time]").val(value);
                $(closediv).find("input[name*=available_"+flagnew+"]").val(value);
                $(closediv ).find( ".form-select" ).css( "color", "#24303f" );
            }
            }).setValue(settime);

            let minuteOptions = ['00', '15', '30', '45'];
            let html = '';
            minuteOptions.forEach(min => {
            html += `<option value="${min}">${min}</option>`;
            });
            $('.minutes-dropdown').html(html);
        });
        function autoResizeTextarea(textarea) {
            textarea.style.height = 'auto'; // Reset height to auto
            textarea.style.height = textarea.scrollHeight + 'px'; // Set height to scrollHeight
        }

        $('.autosizetextaria').each(function() {
            autoResizeTextarea(this);
        });

        $('.autosizetextaria').on('input', function() {
            autoResizeTextarea(this);
        });

        $(document).on('shown.bs.tab shown.bs.collapse', function() {
            $('.autosizetextaria').each(function() {
                autoResizeTextarea(this);
            });
        });

        
        $('#practitionerId').select2({
        placeholder: "Select Practitioner",
        tokenSeparators: [",", " "],
        });
        
        $('.referral_source_sel').select2({
            placeholder: "Select referral source",
            tokenSeparators: [",", " "],
        });
        $('#mounth11').select2({
            placeholder: "Select referral source",
            tokenSeparators: [",", " "],
        });
        $(".single-select2").select2({
            placeholder: " ",
            tokenSeparators: [",", " "],
        });
        
        $('#referral_source').select2({
            placeholder: function() {
                $(this).data('placeholder');
            },
            closeOnSelect: true,
            dropdownPosition: 'auto',
            // dropdownParent: $('#referral_source_box'),
        });
    });

     document.addEventListener('DOMContentLoaded', function () {
        const startTimeInputs = document.querySelectorAll('input[name="start_time[]"]');
        const endTimeInputs = document.querySelectorAll('input[name="end_time[]"]');
        setDateTime(startTimeInputs);
        setDateTime(endTimeInputs);
    });

    function setDateTime(timeInputs)
    {
        timeInputs.forEach(function (input) {
            const timeValue = input.value?.trim();
            if (timeValue) {
                const timePickerDiv = input.previousElementSibling; 
                const [time, meridiem] = timeValue.split(' ');
                const [hour, minute] = time.split(':');
                $(timePickerDiv).find('.hours-dropdown').val(hour);
                $(timePickerDiv).find('.minutes-dropdown').val(minute);
               $(timePickerDiv).find('.btn-group label').each(function () {
                    if ($(this).text().trim().toUpperCase() === meridiem.toUpperCase()) {
                        $(this).click(); // Simulate click to select
                    }
                });
                $(timePickerDiv).find( ".form-select" ).css( "color", "#24303f" );
            }
        });
    }



    function insertAtCaret(areaId, text) {
        var txtarea = document.getElementById(areaId);
        if (!txtarea) {
        return;
        }

        var scrollPos = txtarea.scrollTop;
        var strPos = 0;
        var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ?
        "ff" : (document.selection ? "ie" : false));
        if (br == "ie") {
        txtarea.focus();
        var range = document.selection.createRange();
        range.moveStart('character', -txtarea.value.length);
        strPos = range.text.length;
        } else if (br == "ff") {
        strPos = txtarea.selectionStart;
        }

        var front = (txtarea.value).substring(0, strPos);
        var back = (txtarea.value).substring(strPos, txtarea.value.length);
        txtarea.value = front + text + back;
        strPos = strPos + text.length;
        if (br == "ie") {
        txtarea.focus();
        var ieRange = document.selection.createRange();
        ieRange.moveStart('character', -txtarea.value.length);
        ieRange.moveStart('character', strPos);
        ieRange.moveEnd('character', 0);
        ieRange.select();
        } else if (br == "ff") {
        txtarea.selectionStart = strPos;
        txtarea.selectionEnd = strPos;
        txtarea.focus();
        }

        txtarea.scrollTop = scrollPos;
        $('.selprepo').val('').trigger('change');
    }

	$(document).on( 'submit', '#addWaitlist', function(e) {
        e.preventDefault();

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

        var formData = new FormData(this); 
        var selectedDays = JSON.stringify(selectedDays);   
        formData.append( 'selectedDays',selectedDays);
        $.ajax({
          type: "post",
          url: "{{ route('practitioner.waitlist.store') }}",
          data: formData,
          dataType: "JSON",
          cache: false,
          processData: false,
          contentType: false,
          beforeSend: function(msg) {
            $(".loading").addClass("d-block");
          }
        }).done( function(response) {
          $(".loading").removeClass("d-block");
          if( response.status == 'success' ) {
            Swal.fire({
            icon: response.status,
            title: response.msg,
            showClass: {
              popup: 'animate__animated animate__fadeInDown'
              },
              hideClass: {
                popup: 'animate__animated animate__fadeOutUp'
              }
            })
            setTimeout(function() {
				var baseUrl = "{{route('practitioner.my.waitlist')}}";     
                window.location.href = baseUrl;
               // window.location.reload();				
			}, 2000);
            
          }else{

            $('.invalid-feedback').text('');
            $.each(response.errors, function(key, value) {

                var [before, after] = key.split(".");
                if (after) {
                    var input = $('input[name="' + before + '[]"]');
                    var span = $('input[name="' + before + '[]"]').parent().next();
                    var da = span[after];
                    da.append(value[0].replace(key, before));
                    input.addClass('is-invalid');
                } else {

                    $('#prefered_day_error').text('');
                    if(key == 'prefered_day')
                    {
                        $('#prefered_day_error').text('This field is required');
                    }

                    let input = $('input[name=' + key + ']');
                    // Generic case for other fields
                    input.addClass('is-invalid');
                    input.parent().next('.invalid-feedback').text(value[0]);

                    let select = $('select[name="' + key + '[]"]');
                    if (select.length) {
                        select.addClass('is-invalid');
                        select.parent().next('.invalid-feedback').text(value[0]);
                    }

                    let textarea = $('textarea[name=' + key + ']');
                    // Generic case for other fields
                    if(textarea.length)
                    {
                        textarea.addClass('is-invalid');
                        textarea.parent().next('.invalid-feedback').text(value[0]);
                    }
                    // var select = $('select[name=' + key + '[]]');
                    // if(select.length)
                    // {
                    //     console.log(select);
                    //     var parent = select.parent().next('.invalid-feedback').text(value[0]);
                    //     select.addClass('is-invalid');
                    // }
                   
                }             
            });

            // Swal.fire({
            // icon: response.status,
            // title: response.msg,
            // showClass: {
            //   popup: 'animate__animated animate__fadeInDown'
            //   },
            //   hideClass: {
            //     popup: 'animate__animated animate__fadeOutUp'
            //   }
            // })
        }
        }).fail(function (error) {
          $(".loading").removeClass("d-block");
        });
    });

    $('#service-providers').on("change",function() {
      var selectedTypes = $(this).val();
      $.each(selectedTypes, function (index,value) {
        if( value == 'Any' ) {
          $('#service-providers').val('Any');
          return false;
        }
      });
    });

    $('#Service-providers-available-for-online-consults').on("change",function() {
      var selectedTypes = $(this).val();
      $.each(selectedTypes, function (index,value) {
        if( value == 'Any' ) {
          $('#Service-providers-available-for-online-consults').val('Any');
          return false;
        }
      });
    });

    $('#preferred_locations').on("change",function() {
      var selectedTypes = $(this).val();
      $.each(selectedTypes, function (index,value) {
        if( value == 'Any' ) {
          $('#preferred_locations').val('Any');
          return false;
        }
      });
    });

    $('#Service-providers-available-for-online-consults').select2({
        placeholder: "Select service",
        tokenSeparators: [",", " "],
    });
    $('#service-providers').select2({
        placeholder: "Select service provider",
        tokenSeparators: [",", " "],
    });
    $('#preferred_locations').select2({
        placeholder: "Select location",
        tokenSeparators: [",", " "],
    });

    $("input[name='availability']").on('change', function() { 
        var pricing_type = $("input[name='availability']:checked").val();
        if(pricing_type =='flexible')
        {
            $("#with_flexible").removeClass('d-none');
            $("#with_specific_dates").addClass('d-none');
        }else{
            $("#with_flexible").addClass('d-none');
            $("#with_specific_dates").removeClass('d-none');
        }
    });   


    //let waitlistCounter = 1;
    $(document).on('click', '#addDateBlock', function (e) {

        $('html, body').animate({
			scrollTop: $(document).height()
		}, 500); // 500ms duration
        
        let waitlistCounter = $('.specific_date_div').length;
        if (waitlistCounter >= 5) return;

        $("#plusIconImage").remove();
        // waitlistCounter++;
        const randomStr = generateRandomString(10); // e.g., "aB9kLmT1Xy"

        const html = `
        <div class="row specific_date_div add-specific-date" id="div_${randomStr}">
            <div class="col-sm-12 col-md-3 date-box-div">
                <label class="tooltip-new d-none">Available date</label>      
                <div id="app-date-box">
                    <input type="text" class="form-control datepicker-custom waitlist_date" placeholder="dd/mm/yyyy" name="waitlist_date[]" autocomplete="off">
                </div>
                <span class="invalid-feedback d-block"></span>
            </div>
            <div class="col-sm-12 col-md-4 time-box-div">
                <div class="start-time">
                    <div class="form-group-select2">
                        <label class="tooltip-new d-none">Available from</label>      
                        <div class="form-group brdrfull m-0">
                            <div data-flag="start" id="waitlist_start_${randomStr}" class="timePickerNew d-flex align-items-center"></div>
                            <input type="hidden" class="form-control" name="start_time[]" id="start_time_${randomStr}" value="" readonly placeholder="00:00 PM">
                        </div>
                        <span class="invalid-feedback d-block"></span>
                    </div>
                </div>
            </div>
            <div class="col-sm-12 col-md-4 time-box-div">
                <div class="start-time">
                    <div class="form-group-select2">
                        <label class="tooltip-new d-none">Available to</label>      
                        <div class="form-group brdrfull m-0">
                            <div data-flag="end" id="waitlist_end_${randomStr}" class="timePickerNew d-flex align-items-center"></div>
                            <input type="hidden" class="form-control" name="end_time[]" id="end_time_${randomStr}" value="" readonly placeholder="00:00 PM">
                        </div>
                        <span class="invalid-feedback d-block"></span>
                    </div>
                </div>
            </div>
             <div class="col-sm-12 col-md-1 plus-minus-action">
                <div class="d-flex action-btns minus-icon-div">
                    <a href="#">
                        <img src="{{asset('assets/images/minus-icon.png')}}" alt="" class="img-fluid removeAvailableSection" data-flag="div_${randomStr}" />
                    </a>  
                    <a id="plusIconImage" class="ms-2" href="#">
                        <img src="{{ asset('assets/images/Voucher/plus.svg') }}" id="addDateBlock" alt="" class="img-fluid" />
                    </a>                 
                </div>
            </div>  
            <div class="col-sm-12">
                <hr class="mt-0">
            </div>     
        </div>`;

        $('.specific_date_div').last().after(html);
        //$('#dateContainer').before(html);
        initializeTimePickerFor(`#waitlist_start_${randomStr}`, `start_time_${randomStr}`);
        initializeTimePickerFor(`#waitlist_end_${randomStr}`, `end_time_${randomStr}`);
        var id = `#div_${randomStr}`;
        $(".waitlist_date").datepicker({
            format: "dd/mm/yyyy",
            weekStart: 1,
            todayHighlight: true,
            autoclose: true,
            clearBtn: false,
            // container: id,
        });
    });

    function generateRandomString(length) {
        const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
        let result = '';
        for (let i = 0; i < length; i++) {
            result += chars.charAt(Math.floor(Math.random() * chars.length));
        }
        return result;
    }

    function initializeTimePickerFor(selector, inputId) {
        var closediv = $(selector).closest("div").parent();

        $(selector).timepicker({
            onChange: function (value) {
                $(`#${inputId}`).val(value);
                console.log('closediv',);
                $(closediv).find( ".form-select" ).css( "color", "#24303f" );
            }
        }).setValue('00:00 AM');

        let minuteOptions = ['00', '15', '30', '45'];
        let html = '';
        minuteOptions.forEach(min => {
        html += `<option value="${min}">${min}</option>`;
        });
        $('.minutes-dropdown').html(html);
    }

    $("input[name^='client_id_waitlist_add']").typeahead({
    source:  function (query, process) {
        var searchClientPath = "{{ route('practitioner.search.client') }}";
        return $.get(searchClientPath, { query: query }, function (data) {
            if(data.length > 0){
            return process(data);
        }else{
            $(".tt-dataset").text('No Results Found');
            setTimeout(function() {
            $('.tt-dataset').text('');
            }, 1000);
        }
        });
    },
    updater: function(selection){
        $("input[name='client_id_for_waitlist']").val(selection.id);
        return selection.name;
    }
    });
    $('#mounth17').change(function() {
        //Use $option (with the "$") to see that the variable is a jQuery object
        var $option = $(this).find('option:selected');
        if ($option.text() == 'Family or Friends') {
        $('#AppdropdownParent').css('display', 'block');
        // $('#referral_source_other').addClass('d-none');
            $('#referral_source_name').val('');

        } else if ($option.text() == 'Other Practitioner') {
        //$('#AppdropdownParent').css('display', 'none');
        // $('#referral_source_other').removeClass('d-none');

        } else {
        $('#AppdropdownParent').css('display', 'none');
        $('#referral_source_other').addClass('d-none');
        $('#referral_source_name').val('');
        }

        if ($option.text() == 'Other Practitioner') {
        $('#otherPractitioner').css('display', 'block');
        } else {
        $('#otherPractitioner').css('display', 'none');
        }
    });

    $(document).on( 'click', '.removeAvailableSection', function(e) {
        if($('.removeAvailableSection').length > 1) {
            e.preventDefault();
        } else {
            return false;
        }   
        var divId = $(this).data('flag');
        $("#"+divId).remove();
        // Find the closest .minus-icon-div to the clicked minus icon
        var $minusDiv = $('.minus-icon-div').last();
        console.log($('#plusIconImage').length);
        if ($('#plusIconImage').length === 0) {
            // Create the plus icon element
            var plusIcon = `
                <a id="plusIconImage" class="ms-2" href="#">
                    <img src="{{ asset('assets/images/Voucher/plus.svg') }}" 
                        id="addDateBlock"
                        alt="" 
                        class="img-fluid" />
                </a>
            `;
            $minusDiv.append(plusIcon);
        }

        // Remove d-none from labels in the new first row (if any)
        var remainingRows = $('.specific_date_div');
        if (remainingRows.length > 0) {
            var $firstRemaining = remainingRows.first();
            $firstRemaining.find('label').removeClass('d-none');
        }
    });

    $("#addClientQuick").submit(function(e){
        e.preventDefault();
        var modal = $("#addquickModal");
        clearPreviousErrors(modal);
        $.ajax({
            url: "{{route('practitioner.appointments.addclientquick')}}",
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            data:$(this).serialize(),
            type:'POST',
            beforeSend: function(msg) {
                $(".loading").addClass("d-block");
                $(".loading").css("display", 'block');
            },
        }).done(function(response){
            $(".loading").removeClass("d-block");
            $(".loading").css("display", 'none');
            $(".modal-backdrop").remove();
            if(response.status == "warning"){
                Swal.fire({
                    icon: response.status,
                    title: response.msg,
                    html:response.text,
                    showClass: {
                    popup: 'animate__animated animate__fadeInDown'
                    },
                    hideClass: {
                    popup: 'animate__animated animate__fadeOutUp'
                    }
                });
            }else if(response.status == "exist"){
                var co = $("#addClientQuick").serializeArray();
                co.push({
                    name: 'flag',
                    value: 'continue'
                });
                $.ajax({
                    url: "{{route('practitioner.appointments.addclientquick')}}",
                    data:co,
                    type:'POST',
                    beforeSend: function(msg) {
                    $(".loading").addClass("d-block");
                    $(".loading").css("display", 'block');
                    },
                }).done(function(response){
                    $(".loading").removeClass("d-block");
                    $(".loading").css("display", 'none');
                    $(".modal-backdrop").remove();
                    Swal.fire({
                    icon: 'success',
                    title: 'Client added',
                    showClass: {
                        popup: 'animate__animated animate__fadeInDown'
                    },
                    hideClass: {
                        popup: 'animate__animated animate__fadeOutUp'
                    }
                    });
                    $("#connect-collapse").trigger("click");
                    $("#addClientQuick")[0].reset();
                    modal.modal("hide");
                    $("input[name='client_id_waitlist_add']").val(response.client_name);
                    $("input[name='client_id_for_waitlist']").val(response.client_id);
                });

            }else if(response.status == 'newsuccess'){
                $(".loading").removeClass("d-block");
                $(".modal-backdrop").remove();
                Swal.fire({
                    icon: 'success',
                    title: 'Client added',
                    showClass: {
                    popup: 'animate__animated animate__fadeInDown'
                    },
                    hideClass: {
                    popup: 'animate__animated animate__fadeOutUp'
                    }
                });
                $("#connect-collapse").trigger("click");
                $("#addClientQuick")[0].reset();
                modal.modal("hide");
                $("input[name='client_id_waitlist_add']").val(response.client_name);
                $("input[name='client_id_for_waitlist']").val(response.client_id);
            }else{
                  $.each(response.errors, function(key, value) {
                     var input = $('select[name=' + key + ']');
                     var parent = input.parent().next('.invalid-feedback').text(value[0]);
                     input.addClass('is-invalid');
                     var input = $('input[name=' + key + ']');
                     var parent = input.parent().next('.invalid-feedback').text(value[0]);
                     input.addClass('is-invalid');
                     var input = $('textarea[name=' + key + ']');
                     var parent = input.parent().next('.invalid-feedback').text(value[0]);
                     input.addClass('is-invalid');
                  });
            }
        }).fail(function (error) {
            $(".loading").removeClass("d-block");
            alert('something went wrong error.');
        });
    });//end

    function clearPreviousErrors(modal){
        modal.find('.invalid-feedback').text('');
        modal.find('.is-invalid').removeClass('is-invalid');
    }


</script>
@endsection