@extends('front.practitioner.import.template.import')
@section('content')

<link href="{{ asset('assets/css/croppie.min.css') }}" rel='stylesheet' />

<div class="container-fluid">
   <div class="row">
      <nav class="container navbar navbar-light bg-light  notes-menu w-100 user-information-nav">
         <a class=" p-0 position-relative" href="">
            <img src="{{asset('assets/images/MA_Logo_long-bg-transparent.svg')}}" alt="" class="img-flude logo" /> <span class="eagle-font">Sent via</span>
         </a>

         <div class="col-6 ml-auto">
            <h4 class="font-400">{{ ucwords( $parent->first_name.' '.$parent->last_name ) }}</h4>
            <h4 class="font-bold">{{ ucwords( $parentBusinessProfile->name ) }}</h4>
         </div>
      </nav>
      <!-- @include( 'front.practitioner.import.include.navbar' ) -->
      <div class="brdr-bttm w-100"></div>
   </div>
</div>

<form method="POST" name="setupAccountForm" id="setupAccountForm" action="{{route('practitioner.business.storeAccount')}}">
   @csrf
   <input type="hidden" name="practiitoner_id" id="practitioner_id" value="{{ $practitioner->id }}">
   <input type="hidden" id="user_role" name="role" value="{{ $practitioner->role }}">
   <div class="dashboard-wrapper mdashboard-wrapper clientd-wrapper setting-wrapper">
      <h1 class="page-title eagle-font font-400 text-center">User Information</h1>

      <div class="booking-confirmation user-information">
         <div class="boxwhite padd-sm" id="setup-account-box">
            <div class="card">
               <div class="label-input">
                  <div class="row align-items-center">
                     <div class="col-lg-4 col-md-6">
                        <label>Title</label>
                     </div>
                     <div class="col-lg-2 col-md-3 col-sm-3 col-5">
                        <div class="customdroppdown gray-brdr line-dropdown teamMemberTitle">
                           <div class="form-group border-0 marg-bttm online-dropdown select-dropdown avalable-drop hide-first-child">
                              <select id="name_prefix" name="name_prefix" class="form-control selectboxli">
                                 <option hidden>Title </option>
                                 <option @if( $practitioner->name_prefix == 'Mr' ) Selected @endif value="Mr">Mr</option>
                                 <option @if( $practitioner->name_prefix == 'Mrs' ) Selected @endif value="Mrs">Mrs</option>
                                 <option @if( $practitioner->name_prefix == 'Ms' ) Selected @endif value="Ms">Ms</option>
                                 <option @if( $practitioner->name_prefix == 'Miss' ) Selected @endif value="Miss">Miss</option>
                                 <option @if( $practitioner->name_prefix == 'Master' ) Selected @endif value="Master">Master</option>
                                 <option @if( $practitioner->name_prefix == 'Doctor' ) Selected @endif value="Doctor">Doctor</option>
                                 <option @if( $practitioner->name_prefix == 'None' ) Selected @endif value="None">None</option>
                                 <option @if( $practitioner->name_prefix == 'Other' ) Selected @endif value="Other">Other</option>
                              </select>
                              <span class="invalid-feedback d-block"></span>
                           </div>
                        </div>
                        {{--
                        <div class="customdroppdown gray-brdr line-dropdown">
                           <div class="form-group marg-bttm online-dropdown select-dropdown avalable-drop border-0">
                              <select name="name_prefix" id="mounth500" class="form-control single-select2">
                                 <option @if( $practitioner->name_prefix == 'none' ) Selected @endif value="none" >None</option>
                                 <option value="Mr" @if( $practitioner->name_prefix == 'Mr' ) Selected @endif>Mr</option>
                                 <option value="Mrs" @if( $practitioner->name_prefix == 'Mrs' ) Selected @endif>Mrs</option>
                                 <option value="Ms" @if( $practitioner->name_prefix == 'Ms' ) Selected @endif>Ms</option>
                                 <option value="Miss" @if( $practitioner->name_prefix == 'Miss' ) Selected @endif>Miss</option>
                                 <option value="Master" @if( $practitioner->name_prefix == 'Master' ) Selected @endif>Master</option>
                                 <option value="Doctor" @if( $practitioner->name_prefix == 'Doctor' ) Selected @endif>Doctor</option>
                                 <option value="Title" @if( $practitioner->name_prefix == 'Title' ) Selected @endif>Title</option>
                              </select>
                           </div>
                        </div>
                        --}}
                     </div>
                  </div>
               </div>

               <div class="label-input">
                  <div class="row align-items-center">
                     <div class="col-lg-4 col-md-6">
                        <label>First name <span class="required_span">*</span></label>
                     </div>
                     <div class="col-lg-8 col-md-6">
                        <div class="form-group">
                           <input type="text" name="first_name" class="form-control" value="{{ $practitioner->first_name }}">
                        </div>
                        <div id="div-first_name"></div>
                     </div>
                  </div>
               </div>

               <div class="label-input">
                  <div class="row align-items-center">
                     <div class="col-lg-4 col-md-6">
                        <label>Last name <span class="required_span">*</span></label>
                     </div>
                     <div class="col-lg-8 col-md-6">
                        <div class="form-group">
                           <input type="text" name="last_name" class="form-control" value="{{ $practitioner->last_name }}">
                        </div>
                        <div id="div-last_name"></div>
                     </div>
                  </div>
               </div>

               <div class="label-input">
                  <div class="row align-items-center">
                     <div class="col-lg-4 col-md-6">
                        <label>Email <span class="required_span">*</span></label>
                     </div>
                     <div class="col-lg-8 col-md-6">
                        <div class="form-group">
                           <input readonly type="text" name="email" class="form-control" value="{{ $practitioner->email }}">
                        </div>
                        <div id="div-email"></div>
                     </div>
                  </div>
               </div>

               <div class="label-input">
                  <div class="row align-items-center">
                     <div class="col-lg-4 col-md-6">
                        <label>Mobile <span class="required_span">*</span></label>
                     </div>
                     <div class="col-lg-8 col-md-6">
                        <div class="form-group">
                           <input type="text" name="mobile" value="{{ $practitioner->phone }}" class="form-control">
                        </div>
                        <div id="div-mobile"></div>
                     </div>
                  </div>
               </div>

               @if($practitioner->role != 'instructor')
               <div class="label-input">
                  <div class="row align-items-center">
                     <div class="col-lg-4 col-md-6">
                        <label>Profession/s <span class="required_span">*</span></label>
                     </div>
                     <div class="col-lg-8 col-md-6">
                        <div class="select2-multiple-autoselect">
                           <select class="profession-dd" name="profession[]"  multiple="multiple">
                              @foreach($professions as $profession)
                              <option @if(in_array($profession->id,$professionId)) ? selected @endif value="{{$profession->id}}">{{$profession->name}}</option>
                              @endforeach
                           </select>
                        </div>
                        <div id="div-profession"></div>
                     </div>
                  </div>
               </div>
               @endif

               <div class="label-input">
                  <div class="row align-items-center">
                     <div class="col-lg-4 col-md-6">
                        <label>Ph: Home</label>
                     </div>
                     <div class="col-lg-8 col-md-6">
                        <div class="form-group">
                           <input type="text" class="form-control" name="phone_home" id="phone_home" value="{{ $provider->phone_home ?? '' }}">
                        </div>
                        <div id="div-phone_home"></div>
                     </div>
                  </div>
               </div>

               <div class="label-input">
                  <div class="row align-items-center">
                     <div class="col-lg-4 col-md-6">
                        <label>Ph: Work</label>
                     </div>
                     <div class="col-lg-8 col-md-6">
                        <div class="form-group">
                           <input type="text" class="form-control" name="phone_work" id="phone_work" value="{{ $provider->phone_work ?? '' }}">
                        </div>
                        <div id="div-phone_work"></div>
                     </div>
                  </div>
               </div>

               <div class="label-input">
                  <div class="row align-items-center">
                     <div class="col-lg-4 col-md-6">
                        <label>Address</label>
                     </div>
                     <div class="col-lg-8 col-md-6">
                        <div class="form-group">
                           <input type="hidden" name="latitude" id="latitude">
                           <input type="hidden" name="longitude" id="longitude">
                           <input type="text" name="address" id="address" placeholder="Address line 1" class="form-control google_address" value="{{ $provider->address ?? ''}}">
                        </div>
                     </div>
                  </div>
               </div>

               <div class="label-input">
                  <div class="row align-items-center">
                     <div class="col-lg-4 col-md-6">
                        <label></label>
                     </div>
                     <div class="col-lg-8 col-md-6">
                        <div class="form-group">
                           <input type="text" name="address2" id="address2" placeholder="Address line 2" class="form-control" value="{{ $provider->address2 ?? ''}}">
                        </div>
                     </div>
                  </div>
               </div>

               <div class="label-input">
                  <div class="row align-items-center">
                     <div class="col-lg-4 col-md-6">
                        <label></label>
                     </div>
                     <div class="col-lg-4 col-md-6">
                        <div class="form-group">
                           <input type="text" name="suburb" id="suburb" placeholder="Suburb" class="form-control" value="{{ $provider->suburb ?? ''}}">
                        </div>
                     </div>
                     <div class="col-lg-4 col-md-6">
                        <div class="form-group">
                           <input type="text" name="state" id="state" placeholder="State" class="form-control" value="{{ $provider->state ?? ''}}">
                        </div>
                     </div>
                  </div>
               </div>

               <div class="label-input">
                  <div class="row align-items-center">
                     <div class="col-lg-4 col-md-6">
                        <label></label>
                     </div>
                     <div class="col-lg-4 col-md-6">
                        <div class="form-group">
                           <input type="text" name="country" id="country" placeholder="Country" class="form-control" value="{{ $provider->member_country ?? ''}}">
                        </div>
                     </div>
                     <div class="col-lg-4 col-md-6">
                        <div class="form-group">
                           <input type="text" name="postcode" id="postcode" placeholder="Postcode" class="form-control" value="{{ $provider->postcode ?? ''}}">
                        </div>
                     </div>
                  </div>
               </div>

               <div class="label-input">
                  <div class="row align-items-center">
                     <div class="col-lg-4 col-md-6">
                        <label>D.O.B.</label>
                     </div>
                     <div class="col-lg-8 col-md-6">
                        <div class="form-group">
                           <input type="text" id="date_of_birth" name="dob" class="form-control small-input" placeholder="dd/mm/yyyy" autocomplete="off" onblur="ValidateDOB()">
                        </div>
                        <span class="error" id="lblError"></span>
                     </div>
                  </div>
               </div>

               <div class="label-input">
                  <div class="row align-items-center">
                     <div class="col-lg-4 col-md-6">
                        <label>ABN</label>
                     </div>
                     <div class="col-lg-8 col-md-6">
                        <div class="form-group">
                           <input type="text" name="abn" id="abn" class="form-control" placeholder="Add your ABN if applicable" value="{{ $bankDetail->abn ?? '' }}">
                        </div>
                        <div id="div-abn"></div>
                     </div>
                  </div>
               </div>

               <div class="label-input inde-insurance">
                  <div class="row align-items-center">
                     <div class="col-lg-4 col-md-6">
                        <label>Indemnity insurance</label>
                     </div>
                     <div class="col-lg-8 col-md-6">
                        <div class="single-tittle">
                           <ul class="age-title p-0 text-center">
                              <li>
                                 <input type="radio" id="ii_yes" name="indemnity_insurance" value="1">
                                 <label class="w-100" for="ii_yes">Yes</label>
                              </li>
                              <li class="m-0">
                                 <input type="radio" id="ii_no" name="indemnity_insurance" value="0">
                                 <label class="w-100" for="ii_no">No</label>
                              </li>
                           </ul>
                        </div>
                        <div id="div-indemnity_insurance"></div>
                     </div>
                  </div>
               </div>

               <div class="label-input inde-insurance">
                  <div class="row align-items-center">
                     <div class="col-lg-4 col-md-6">
                        <label>Registered for GST</label>
                     </div>
                     <div class="col-lg-8 col-md-6">
                        <div class="single-tittle">
                           <ul class="age-title p-0 text-center">
                              <li>
                                 <input @if( isset($bankDetail) && $bankDetail->registered_for_gst == 1 ) checked @endif type="radio" id="rfg_yes" name="registered_for_gst" value="1">
                                 <label class="w-100" for="rfg_yes">Yes</label>
                              </li>
                              <li class="m-0">
                                 <input @if( isset($bankDetail) && $bankDetail->registered_for_gst == 0 ) checked @endif type="radio" id="rfg_no" name="registered_for_gst" value="0">
                                 <label class="w-100" for="rfg_no">No</label>
                              </li>
                           </ul>
                        </div>
                        <div id="div-registered_for_gst"></div>
                     </div>
                  </div>
               </div>

               {{-- <div id="workingHoursDiv">
                  
                  <h4 class="text-blue font-15 font-bold mb-3">Working hours  --}}
                     {{-- <span class="required_span">*</span> --}}
                  {{-- </h4> --}}
                  {{--
                     <div class="label-input">
                        <div class="row align-items-center">
                           <div class="col-lg-4 col-md-6">
                              <label>Location</label>
                           </div>
                           <div class="col-lg-8 col-md-6">
                              <div class="form-group">
                                 <select name="location" id="location_id" class="form-control">
                                    @foreach($practitionerLocation as $location)
                                       @if( in_array( $location->id, $teamLocation ) )
                                          <option value={{$location->id}}>{{$location->address}}</option>
                                       @endif
                                    @endforeach
                                 </select>
                              </div>
                              <span class="invalid-feedback d-block"></span>
                           </div>
                        </div>
                     </div>

                     <div id="appendNewLocation"></div>

                     <a id="storeAvailability" href="javascript:void(0)" class="btn-fill w-100 mt-10 d-block text-center">Update and save</a>
                  --}}

                  {{-- @foreach( $practitionerLocation as $key => $location )
                     <input type="hidden" name="location_id[]" value="{{$location->id}}">
                     <h4 class="text-blue font-15 font-bold mb-3">{{ \Illuminate\Support\Str::limit($location->address, 60, '...') }}</h4>

                     @if( count( $location->hours ) > 0 )
                        <div class="dayslabel-space daysDiv">
                           <div class="label-input daysinline" id="emergencycontact">
                              <div class="row">
                                 <div class="col-lg-4 col-md-4">
                                    <label class="">Trading Day/s</label>
                                 </div>
                                 <div class="col-lg-8 col-md-8 pl-xl-0">
                                    <div class="health-history-checkbox selectdays-dropdown mb-0 tradingdays">
                                       <ul class="be-select">
                                          @foreach( $location->hours as $k => $v )
                                             @php $day = $v['day'] @endphp
                                             <li>
                                                <div class="rdio rdio-primary radio-inline">
                                                   <input @if( isset( $location->openDay ) && in_array( $day, $location->openDay ) ) Checked @endif class="{{$day}}s toggle-day-value" id="{{$day}}-{{$location->id}}-check" name="day[monday][]" value="monday" type="checkbox">
                                                   <label for="{{$day}}-{{$location->id}}-check">{{ ucfirst( $day ) }}</label>
                                                </div>
                                             </li>
                                          @endforeach
                                       </ul>
                                    </div>
                                 </div>
                              </div>
                           </div>

                           <!-- NEW TIMEPICKER CODE - START -->
                              @foreach( $location->hours as $k => $v )
                                 @php $day = $v['day'] @endphp
                                 <div class="{{$day}} timePickerDiv @if( !in_array( $day, $location->openDay ) ) d-none @endif" id="{{$day}}_{{$location->id}}_time_section">
                                    <div class="label-input">
                                       <div class="row align-items-center">
                                          <div class="col-sm-4"></div>
                                          <div class="col-sm-8">
                                             <div class="row">
                                                <h3 class="ml-0 businesstitle mb-3 col-12">{{ucfirst($day)}}</h3>
                                                <div class="timepicker-content-b-details">
                                                   <div class="start-time">
                                                      <div class="form-group brdrfull">
                                                         <div @if( in_array( $day, $location->openDay ) ) data-value="{{ $v['start_time'] }}" @else data-value="09:00 AM" @endif data-location="{{$location->id}}" data-day="{{ $day }}" data-flag="start" class="timePickerNew d-flex align-items-center" id="{{ $day }}_starttimePicker_{{$location->id}}" @if( in_array( $day, $location->openDay ) ) data-set="1" @else data-set="0" @endif></div>
                                                         <input type="hidden" class="form-control" name="{{ $day }}_start_time[]" id="{{ $day }}_start_time_{{$location->id}}" value="" readonly placeholder="00:00 AM">
                                                      </div>
                                                      <span class="invalid-feedback d-block"></span>
                                                   </div>
                                                   <div class="to-time py-2">
                                                    To:
                                                   </div>
                                                   <div class="end-time">
                                                      <div class="form-group brdrfull">
                                                         <div @if( in_array( $day, $location->openDay ) ) data-value="{{ $v['end_time'] }}" @else data-value="05:00 PM" @endif data-location="{{$location->id}}" data-day="{{ $day }}" data-flag="end" class="timePickerNew d-flex align-items-center" id="{{ $day }}_endtimePicker_{{$location->id}}" @if( in_array( $day, $location->openDay ) ) data-set="1" @else data-set="0" @endif></div>
                                                         <input type="hidden" class="form-control" name="{{ $day }}_end_time[]" id="{{ $day }}_end_time_{{$location->id}}" value="" readonly placeholder="00:00 AM">
                                                      </div>
                                                      <span class="invalid-feedback d-block"></span>
                                                   </div>
                                                   <div class="clear-time"></div>
                                                </div>

                                             </div>
                                          </div>
                                       </div>
                                    </div>
                                    <div class="label-input">
                                       <div class="row align-items-center">
                                          <div class="col-sm-4"></div>
                                          <div class="col-sm-8">
                                             <div class="row">
                                                <label class="col-12">Break time:</label>
                                                <div class="timepicker-content-b-details">
                                                <div class="start-time">
                                                   <div class="form-group brdrfull">
                                                      <div @if( $v['break_start_time'] != '' ) data-value="{{ $v['break_start_time'] }}" @else data-value="00:00 PM" @endif data-location="{{$location->id}}" data-day="{{ $day }}" data-flag="break_start" class="timePickerNew d-flex align-items-center" id="{{ $day }}_breakstarttimePicker_{{$location->id}}" @if( $v['break_start_time'] != '' ) data-set="1" @else data-set="0" @endif></div>
                                                      <input type="hidden" class="form-control" name="{{ $day }}_break_start_time[]" id="{{ $day }}_break_start_time_{{$location->id}}" value="" readonly placeholder="00:00 AM">
                                                   </div>
                                                   <span class="invalid-feedback d-block"></span>
                                                </div>
                                                <div class="to-time py-2">
                                                    To:
                                                </div>
                                                <div class="end-time">
                                                   <div class="form-group brdrfull">
                                                      <div @if( $v['break_end_time'] != '' ) data-value="{{ $v['break_end_time'] }}" @else data-value="00:00 PM" @endif data-location="{{$location->id}}" data-day="{{ $day }}" data-flag="break_end" class="timePickerNew d-flex align-items-center" id="{{ $day }}_breakendtimePicker_{{$location->id}}" @if( $v['break_end_time'] != '' ) data-set="1" @else data-set="0" @endif></div>
                                                      <input type="hidden" class="form-control" name="{{ $day }}_break_end_time[]" id="{{ $day }}_break_end_time_{{$location->id}}" value="" readonly placeholder="00:00 AM">
                                                   </div>
                                                   <span class="invalid-feedback d-block"></span>
                                                </div>
                                                <div class="clear-time">
                                                   <a class="clearLunch cursor-pointer Clear">Delete break time</a>
                                                </div>
                                                </div>
                                             </div>
                                          </div>
                                       </div>
                                    </div>
                                 </div>
                              @endforeach
                           <!-- NEW TIMEPICKER CODE - END -->
                        </div>
                     @else
                        <div class="dayslabel-space daysDiv">
                           <div class="label-input daysinline" id="emergencycontact">
                              <div class="row">
                                 <div class="col-lg-4 col-md-4">
                                    <label class="">Trading Day/s</label>
                                 </div>
                                 <div class="col-lg-8 col-md-8 pl-xl-0">
                                    <div class="health-history-checkbox selectdays-dropdown mb-0 tradingdays">
                                       <ul class="be-select">
                                          @foreach( $days as $k => $day )
                                             <li>
                                                <div class="rdio rdio-primary radio-inline">
                                                   <input @if( isset( $location->openDay ) && in_array( $day, $location->openDay ) ) Checked @endif class="{{$day}}s toggle-day-value" id="{{$day}}-{{$location->id}}-check"  name="day[{{$day}}][]" value="{{$day}}" type="checkbox">
                                                   <label for="{{$day}}-{{$location->id}}-check">{{$day}}</label>
                                                </div>
                                             </li>
                                          @endforeach
                                       </ul>
                                    </div>
                                 </div>
                              </div>
                           </div>

                           <!-- NEW TIMEPICKER CODE - START -->
                           @foreach( $days as $k => $day )
                              <div class="{{$day}} timePickerDiv" style=display:none>
                                 <div class="label-input">
                                    <div class="row align-items-center">
                                       <div class="col-sm-4"></div>
                                       <div class="col-sm-8">
                                          <div class="row">
                                             <h3 class="ml-0 businesstitle mb-3 col-12" style="text-transform: capitalize;">{{$day}}</h3>
                                             <div class="timepicker-content-b-details">
                                                <div class="start-time">
                                                   <div class="form-group brdrfull">
                                                      <div data-set="0" data-value="09:00 AM" data-location="{{$location->id}}" data-day="{{ $day }}" data-flag="start" class="timePickerNew d-flex align-items-center" id="{{ $day }}_starttimePicker_{{$location->id}}"></div>
                                                      <input type="hidden" class="form-control" name="{{ $day }}_start_time[]" id="{{ $day }}_start_time_{{$location->id}}" value="09:00 AM" readonly placeholder="00:00 AM">
                                                   </div>
                                                   <span class="invalid-feedback d-block"></span>
                                                </div>
                                                <div class="to-time">To:</div>
                                                <div class="end-time">
                                                   <div class="form-group brdrfull">
                                                      <div data-set="0" data-value="05:00 PM" data-location="{{$location->id}}" data-day="{{ $day }}" data-flag="end" class="timePickerNew d-flex align-items-center" id="{{ $day }}_endtimePicker_{{$location->id}}"></div>
                                                      <input type="hidden" class="form-control" name="{{ $day }}_end_time[]" id="{{ $day }}_end_time_{{$location->id}}" value="05:00 PM" readonly placeholder="00:00 AM">
                                                   </div>
                                                   <span class="invalid-feedback d-block"></span>
                                                </div>
                                                <div class="clear-time"></div>
                                             </div>
                                          </div>
                                       </div>
                                    </div>
                                 </div>
                                 <div class="label-input">
                                    <div class="row align-items-center">
                                       <div class="col-sm-4"></div>
                                       <div class="col-sm-8">
                                          <div class="row">
                                             <label class="col-12">Break time:</label>
                                             <div class="timepicker-content-b-details">
                                             <div class="start-time">
                                                <div class="form-group brdrfull">
                                                   <div data-set="0" data-value="00:00 AM" data-location="{{$location->id}}" data-day="{{ $day }}" data-flag="break_start" class="timePickerNew d-flex align-items-center" id="{{ $day }}_startBreakTimePicker_{{$location->id}}"></div>
                                                   <input type="hidden" class="form-control" name="{{ $day }}_break_start_time[]" id="{{ $day }}_break_start_time_{{$location->id}}" value="" readonly placeholder="00:00 AM">
                                                </div>
                                                <span class="invalid-feedback d-block"></span>
                                             </div>
                                             <div class="to-time py-2">
                                                 To:
                                             </div>
                                             <div class="end-time">
                                                <div class="form-group brdrfull">
                                                   <div data-set="0" data-value="00:00 PM" data-location="{{$location->id}}" data-day="{{ $day }}" data-flag="break_end" class="timePickerNew d-flex align-items-center" id="{{ $day }}_endBreakTimePicker_{{$location->id}}"></div>
                                                   <input type="hidden" class="form-control" name="{{ $day }}_break_end_time[]" id="{{ $day }}_break_end_time_{{$location->id}}" value="" readonly placeholder="00:00 PM">
                                                </div>
                                                <span class="invalid-feedback d-block"></span>
                                             </div>
                                             <div class="clear-time">
                                                <a class="clearLunch cursor-pointer Clear">Delete break time</a>
                                             </div>
                                             </div>
                                          </div>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           @endforeach
                           <!-- NEW TIMEPICKER CODE - END -->
                        </div>
                     @endif
                  @endforeach
               </div> --}}

               
               <div id="associationDiv">
                  @if($practitioner->role != 'instructor')
                  <h4 class="text-blue font-15 font-bold my-4">Association & provider numbers</h4>
                  @endif
                  <div id="association-provider-numbers">
                     <div class="mt-10 ">
                        <div class="test-results-area">
                           <div class="appt-market-area">

                              @if($practitioner->role != 'instructor')
                              <div class="form-group select2-multiple-autoselect">
                                 <label class="text-navy">Association/s</label>
                                 <select class="form-control association-dd" name="association[]" multiple="multiple">
                                    @foreach($associations as $association)
                                       <option @if(in_array($association->id,$associationId)) ? selected @endif value="{{$association->id}}">{{$association->name}}</option>
                                    @endforeach
                                 </select>
                                 <div id="div-association"></div>
                              </div>

                              <div class="form-group">
                                 <label class="text-navy">Registration number (Association or AHPRA)</label>
                                 <input type="text" name="registration_number" class="form-control" placeholder="Enter your number" value="">
                                 <span class="invalid-feedback d-block"></span>
                              </div>
                              @endif

                              <input type="hidden" name="is_add_provider_number" class="form-control is_add_provider_number" value="0">
                              <input type="hidden" name="edit_id" class="form-control edit_id" value="">

                              <div class="row">
                                 <div class="col-12">
                                    <div class="dr-table prescriptions-new-table mt-4 mb-3" id="health-fundTable">
                                       <div class="table-responsive">
                                          <table class="table table-striped">
                                             <thead class="head-brdr">
                                                <tr>
                                                   <th class="align-baseline">Health fund</th>
                                                   <th class="align-baseline">Provider no. </th>
                                                   <th class="align-baseline">
                                                      @if($practitionerLocation->count()>=2)
                                                      Location
                                                      @endif
                                                   </th>
                                                </tr>
                                             </thead>

                                             <tbody id="AssociationProviderTable">
                                                @if(count($practitionerHealthFunds))
                                                   @foreach ($practitionerHealthFunds as $val)
                                                      <tr class="tbl_{{$val->id}}">
                                                         <td class="align-middle">{{ $val->healthcodes->name ?? "" }}</td>
                                                         <td class="align-middle description-content">{{ $val->provider_number ?? "" }}</td>
                                                         <td class="align-middle suggested-usecontent">
                                                            @if($practitionerLocation->count()>=2)
                                                            {{ getLocationAddress($val->locations->address ?? "")}}
                                                            @endif
                                                         </td>
                                                         <td class="align-middle">
                                                            <div class="dropdown three-dot-dropdown">
                                                               <a href="#" class="dropdown-toggle three-dot-menu" data-toggle="dropdown" aria-expanded="false"><span></span></a>
                                                               <div class="dropdown-menu"  x-placement="bottom-start">
                                                                  <a class="dropdown-item cursor-pointe editHealth" data-healthFunds="{{$val->codes}}" data-provider_number="{{$val->provider_number}}" data-location="{{$val->location}}" data-id="{{$val->id}}" title="Edit">Edit</a>
                                                                  <a class="dropdown-item cursor-pointer removeHealth" title="Delete" data-id="{{$val->id}}">Delete</a>
                                                               </div>
                                                            </div>
                                                         </td>
                                                      </tr>
                                                   @endforeach
                                                @else
                                                <td colspan="3" class="align-middle text-center">You have not added any health fund provider numbers</td>
                                                @endif
                                             </tbody>
                                          </table>
                                       </div>
                                    </div>
                                 </div>
                              </div>

                              <div class="form-group">
                                 <input type="button" class="btn-unfill association_provider_btn" value="Add provider number"/>
                              </div>

                              <div class="show_section d-none">
                                 <div class="form-group">
                                    <label class="text-navy">Health fund provider details</label>
                                    <select class="form-control healthFunds" id="healthFunds" name="healthFunds">
                                       <option value="">Select Health Fund</option>
                                       @foreach($allHealthFunds as $healthFund)
                                       <option value="{{$healthFund->id}}">{{$healthFund->name}}</option>
                                       @endforeach
                                    </select>
                                    <div id="div-ealthFunds"></div>
                                    <span class="health-error error"></span>
                                 </div>

                                 <div class="form-group">
                                    <label class="text-navy">Provider number</label>
                                    <input type="text" name="provider_number" class="form-control provider_number" placeholder="Health fund provider number" value="">
                                    <div id="div-provider_number"></div>
                                    <span class="provider-error error"></span>
                                 </div>

                                 @if($practitionerLocation->count()>=2)
                                    <div class="form-group">
                                       <label class="text-navy">Location</label>
                                       <select class="form-control location" id="provider_location" name="provider_location">
                                          <option value="">Select Location</option>
                                          @foreach( $practitionerLocation as $val )
                                             <option value="{{$val->id}}">{{$val->address}}</option>
                                          @endforeach
                                          <option value="All">All</option>
                                       </select>
                                       <div id="div-provider_location"></div>
                                    </div>
                                 @endif

                                 <button type="button" class="btn-unfill w-40 mt-2 mb-3 saveprovider">Save provider number</button>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
              

               <div class="team-profile-picture">
                  <div class="profileimgs-area my-detail">
                     <h4 class="text-blue font-15 font-bold mb-3">Profile image</h4>

                     <div class="media">
                        <div class="client-pic mr-xl-4 mr-lg-4 mr-sm-4 mt-0">
                           <div class="client-pic-inner position-relative cpinner">
                              <div class="profile-hover placeholderimg">
                                 <div class="profile-top">
                                    <img src="{{asset('assets/images/camera_icon.svg')}}" alt="" class="img-fluid">
                                    <span style="text-transform:none !important">Upload profile<br/> image</span>
                                 </div>
                              </div>
                              <div class="profile">
                                 <div class="profile-change">
                                    <input type='file' name="profile_image" accept="image/*" id="imgInp" />
                                 </div>
                                 <img id="blah" src="{{$practitioner->profile_picture}}" alt="" />
                                 <div class="profile-hover">
                                    <div class="profile-top">
                                       <img src="{{asset('assets/images/camera_icon.svg')}}" alt="" class="img-fluid">
                                       <span style="text-transform:none !important">Upload profile<br/> image</span>
                                    </div>
                                 </div>
                                 <a class="remove-image-btn {{ $profile_picture_remove_class }}" href="javascript:void(0)" id="remove-my-profile">Remove</a>
                              </div>
                           </div>
                        </div>
                     </div>

                     {{--
                     <div class="label-input client-upload-file">
                        <div class="row align-items-center">
                           <div class="col-xl-7 col-lg-7">
                              <div class="browse-img-area text-center profile_upload">
                                 <div class="browse-img">
                                    <img src="{{asset('assets/images/upload-icon-g.png')}}" alt="" class="img-fluid">
                                 </div>
                                 <div class="drag-drop-text">
                                    <p class="mb-0 font-15">Drag and drop files here </p>
                                 </div>
                                 <div class="text-or">
                                    - or -
                                 </div>
                                 <div class="browse-file">
                                    <input type="file" style="display: block !important;" name="profile_picture" accept="image/*" onchange="loadFileForProvider(event)" id="browseimgForProvider">
                                    <input type="button" class="yellow-btn" value="Browse files" onclick="openfileDialog();">
                                    <img id="outputForProvider" class="output-img" />
                                    <div class="pdfFile">
                                       <img src="{{asset('assets/images/pdf-img.png')}}" alt="">
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                     --}}
                  </div>
               </div>

               <div class="labeltop-inputarea">
                  <h4 class="text-blue font-15 font-bold mb-3 mt-4">Password</h4>
                  <div class="row ">
                     <div class="col-md-4">
                        <div class="labelspace">
                           <label class="text-navy">Set password <span class="required_span">*</span></label>
                        </div>
                     </div>
                     <div class="col-md-8">
                        <div class="form-group brdrfull">
                           <input type="password" name="password" id="password" class="form-control text-left" placeholder="">
                           <div id="div-password"></div>
                        </div>
                     </div>
                  </div>
               </div>

               <div class="labeltop-inputarea">
                  <div class="row ">
                     <div class="col-md-4">
                        <div class="labelspace">
                           <label class="text-navy">Confirm password <span class="required_span">*</span></label>
                        </div>
                     </div>
                     <div class="col-md-8">
                        <div class="form-group brdrfull">
                           <input type="password" name="confirm_password" id="confirm_password" class="form-control text-left" placeholder="">
                           <div id="div-confirm_password"></div>
                        </div>
                     </div>
                  </div>
               </div>

               <div class="consent-treatment-radio-main">
                  <div class="custom-control custom-radio">
                     <input id="privacy_and_terms_radio" name="privacy_and_terms" value="1" type="radio" class="custom-control-input" autocomplete="off">
                     <label class="custom-control-label" for="privacy_and_terms_radio">I have read and accept the <a target="_blank" href="https://myappointments.app/terms-and-conditions-sub-user">terms and conditions</a> and <a href="https://myappointments.app/privacy-policy/" target="_blank">privacy policy</a></label>
                  </div>
                  <div id="div-privacy_and_terms"></div>
               </div>

               <div id="update-btn" class="row">
                  <div class="col-12 text-center">
                     <button type="submit" class="cursor-pointer w-100 save-btn save-btn-bg confirm-bttn ">Activate account</button>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</form>

<!-- message-send modal Start-->
<div class="todo-list-modal clientabpopup sentmodal">
   <div class="modal fade"  id="invite-sendmodal" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
         <div class="modal-content mdashboard-client-followuparea">
            <div class="modal-header">
               <button type="button" class="close bttn-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 text-center">
               <img style="max-width: 63px;" src="{{asset('assets/images/appointment-notes-send-icon.svg')}}" alt="" class="img-fluid" />
               <h3 class="font-bold text-blue mt-3">Account Activated</h3>
               <p></p>
               <a href="https://myappointments.app/service-provider-login/" class="yellow-btn mt-0 save-btn-bg">Login</a>
            </div>
         </div>
      </div>
   </div>
</div>
<!-- message-send modal Modal End-->

<!-- Upload profile image modal -->
   <div class="customscroll showpop">
      <div class="modal fade" id="UploadProfileImageModal" tabindex="-1" role="dialog" aria-hidden="true">
         <div class="modal-dialog modal-dialog-centered" role="document" >
            <div class="modal-content">
               <div class="popup-marg">
                  <div class="modal-header">
                     <h5 class="modal-title text-center">CROP & UPLOAD PROFILE IMAGE</h5>
                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true"><img src="{{asset('assets/images/close-img.svg')}}" alt="" class="img-fluid closeimg"></span>
                     </button>
                  </div>
                  <div class="modal-body p-0">
                     <div class="row">
                        <div class="col-md-12 text-center mt-20">
                           <div id="profile_image_preview"></div>
                        </div>
                     </div>
                  </div>
               </div>
               <div class="modal-footer" style="justify-content: center;">
                  <button id="cropProfileImage" class="crop-profile-picture yellow-btn mt-0 save-btn save-btn-bg" >Crop & Save</button>
               </div>
            </div>
         </div>
      </div>
   </div>
<!-- Upload profile image modal -->

@endsection

@section('modals')

<div id="load-modal"></div>

@endsection

@section('css')
<link rel="stylesheet" href="{{ asset('assets/css/default-new.css')}}">
<link rel="stylesheet" href="{{ asset('assets/css/team.css')}}">
<style>
   /* .text-danger-custom{color: #dc3545!important;}
   .customswitch-area .custom-control {float: right;right: 20px;top: 5px;}
   .custom-colordrop select::-ms-expand {display: none;}
   .custom-colordrop select {-webkit-appearance: none;appearance: none;}
   .custom-colordrop select option {border-radius: 100px;}
   .custom-colordrop select {position: relative;left: 10px;}
   .custom-colordrop .select-hidden {visibility: inherit !important;}
   .hide {display: none !important;}
   .selectedInput {background: none;color: red !important;}
   .productAdd .select2-container {width: 100px !important;}
   .pac-container {z-index: 10000 !important;} */
   /* hidden updown arrow if type number */
   /* Chrome, Safari, Edge, Opera */
   .text-danger-custom{color: #dc3545!important;}
   input::-webkit-outer-spin-button,
   input::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0;}
   /* Firefox */
   input[type=number] {-moz-appearance: textfield;}
   /*end hidden updown arrow if type number */
   @media (max-width: 425px){
      .page-content {padding: 45px 15px 45px 15px;}
   }
   .toogle-area h2{font-family:"europa", sans-serif;}
   .select2-container--default .select2-results>.select2-results__options{max-height: initial !important;}
   .label-input .form-group{top:0;}
   .tradingdays ul li {display: block !important;width: 150px !important;}
   .booking-confirmation .select2-selection__arrow:after{display: none;}
   .booking-confirmation .select2-container .select2-selection--single{background-color: white !important;}
   .select2-search--dropdown{display: none !important;}
   h1{font-size: 25px !important;}
   .consent-treatment-radio-main .custom-radio .custom-control-label::before{border: 1px solid #24303f;}
   .consent-treatment-radio-main .custom-radio .custom-control-input:checked~.custom-control-label::before{background-color: #24303f;border: 1px solid #24303f;}
</style>

@endsection

@section('import-scripts')

<script src='{{ asset("assets/js/colorPick.js")}}'></script>
<script src='{{ asset("assets/js/croppie.js")}}'></script>
{{-- <script src="https://maps.google.com/maps/api/js?key=AIzaSyCjtdxXehCp88pH_w-aQ84QFn-LfRX-3Pg&sensor=false&amp;libraries=places" type="text/javascript"></script> --}}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCthc-S3bNXYCC2J6mun-z1qQ2maA_yV-E&amp;libraries=places"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.10/jquery.mask.js"></script>
<script type="text/javascript">

   var input = $('select[name="name_prefix"]');
   $(input).each(function() {
      var option = $('option:selected', this).val();
      input.val(option);
      input.siblings('.select-styled1').remove();
      input.siblings('ul').remove();
      input.parent('.select').prop('class', '');
      regenerateSelect(input);
   });

   function regenerateSelect(select)
   {
      $(select).each(function () {
         var $this = $(this),
         numberOfOptions = $(this).children('option').length;

         $this.addClass('select-hidden');
         $this.wrap('<div class="select"></div>');
         $this.after('<div class="select-styled select-styled1"></div>');

         var $styledSelect = $this.next('div.select-styled');
         $styledSelect.text($this.children('option').eq(0).text());
         var optionText = $('option:selected', this).text();

         if( optionText ) {
            $styledSelect.text(optionText);
         }

         var $list = $('<ul />', {
            'class': 'select-options'
         }).insertAfter($styledSelect);

         for( var i = 0; i < numberOfOptions; i++ ) {
            $('<li />', {
               text: $this.children('option').eq(i).text(),
               rel: $this.children('option').eq(i).val()
            }).appendTo($list);
         }

         var $listItems = $list.children('li');

         $styledSelect.click(function (e) {
            e.stopPropagation();
            $('div.select-styled.active').not(this).each(function () {
               $(this).removeClass('active').next('ul.select-options').hide();
            });
            $(this).toggleClass('active').next('ul.select-options').toggle();
         });

         $listItems.click(function (e) {
            e.stopPropagation();
            $styledSelect.text($(this).text()).removeClass('active');
            $this.val($(this).attr('rel'));
            $list.hide();
         });

         $(document).click(function () {
            $styledSelect.removeClass('active');
            $list.hide();
         });
      });
   }

   function ValidateDOB() {
      var lblError = document.getElementById("lblError");

      //Get the date from the TextBox.
      var dateString = document.getElementById("date_of_birth").value;
      var regex = /(((0|1)[0-9]|2[0-9]|3[0-1])\/(0[1-9]|1[0-2])\/((19|20)\d\d))$/;

      //Check whether valid dd/MM/yyyy Date Format.
      if( regex.test(dateString) ) {
         var parts = dateString.split("/");
         var dtDOB = new Date(parts[1] + "/" + parts[0] + "/" + parts[2]);
         var dtCurrent = new Date();
         lblError.innerHTML = "Date of birth cannot be a future date"

         if (dtDOB > dtCurrent) {
            $("#date_of_birth").val('');
            return false;
         }

         lblError.innerHTML = "";
         return true;
      } else {
         lblError.innerHTML = "Enter date in dd/mm/yyyy format ONLY."
         $("#date_of_birth").val('');
         return false;
      }
   }

   var $uploadProfileCrop,
   tempProfileFilename,
   rawProfileImg,
   imageProfileId;

   function readProfileFile(input)
   {
      if (input.files && input.files[0]) {
         var reader = new FileReader();
         var file = input.files[0];
         var fileType = file.type.split('/')[0];

         if( fileType == 'image' ) {
            reader.onload = function (e) {
               $('#UploadProfileImageModal').modal('show');
               rawProfileImg = e.target.result;
            }
            reader.readAsDataURL(input.files[0]);
         } else {
            $("#imgInp").val("");
            Swal.fire({
               icon:'error',
               title:"Only image type supported!",
               showClass: {
                  popup:'animate__animated animate__fadeInDown'
               },
               hideClass: {
                  popup:'animate__animated animate__fadeOutUp'
               }
            });
         }
      } else {
         swal("Sorry - you're browser doesn't support the FileReader API");
      }
   }

   $uploadProfileCrop = $('#profile_image_preview').croppie({
      enableOrientation: true,
      enableZoom: true,
      showZoomer: true,
      enableExif: true,
      viewport: {
         width: 550,
         height: 550,
         type: 'circle'
      },
      boundary: {
         width: 560,
         height: 560
      }
   });

   $('#UploadProfileImageModal').on('shown.bs.modal', function() {
      $uploadProfileCrop.croppie('bind', {
         url: rawProfileImg
      }).then(function() {
         console.log('jQuery bind complete');
      });
   });

   $('#imgInp').on('change', function () {
      imageProfileId = $(this).data('id');
      tempProfileFilename = $(this).val();
      readProfileFile(this);
      this.value = null;
   });

   $('.crop-profile-picture').on('click', function (ev) {
      $uploadProfileCrop.croppie('result', {
         type: 'canvas',
         size: 'viewport',
         quality: 1
      }).then( function (img) {
         $.ajax({
            url: "{{ route('practitioner.fmateam.store.profileimage') }}",
            type: "POST",
            data: { "id": $("#practitioner_id").val(), "image":img, "_token" : "{{ csrf_token() }}" },
            success: function (data) {
               console.log( data );
               $("#blah").attr( 'src', data.img_path );
               $("#remove-my-profile").removeClass( 'd-none' );
               $("#UploadProfileImageModal").modal("hide");
               $("#isProfileSet").val(1);
               Swal.fire({
                  icon: 'success',
                  title: "Image uploaded",
                  showClass: {
                     popup: 'animate__animated animate__fadeInDown'
                  },
                  hideClass: {
                     popup: 'animate__animated animate__fadeOutUp'
                  }
               });
            }
         });
      });
   });

   // Remove profile picture
   $(document).on( 'click', '#remove-my-profile', function(e) {
      e.preventDefault();
      swal.fire({
         icon :'warning',
         title: 'Remove profile picture?',
         text: 'This cannot be undone.',
         showCancelButton: true,
         confirmButtonColor: "#DD6B55",
         confirmButtonText: "Yes",
         cancelButtonText: "No",
      }).then( function( value ) {
         if(value.isConfirmed) {
            $.ajax({
               url: "{{route('practitioner.fmateam.remove.profileimage')}}?id="+$("#practitioner_id").val(),
               dataType: "JSON",
               type: 'GET',
               success: function( response ) {
                  if( response.status == "success" ) {
                     $("#remove-my-profile").addClass("d-none");
                     $("#blah").attr( "src", "" );
                     $("#isProfileSet").val(0);

                     Swal.fire({
                        icon: response.status,
                        title: response.message,
                        showClass: {
                           popup: 'animate__animated animate__fadeInDown'
                        },
                        hideClass: {
                           popup: 'animate__animated animate__fadeOutUp'
                        }
                     });
                  } else {
                     Swal.fire({
                        icon: response.status,
                        title: response.message,
                        showClass: {
                           popup: 'animate__animated animate__fadeInDown'
                        },
                        hideClass: {
                           popup: 'animate__animated animate__fadeOutUp'
                        }
                     });
                  }
               }
            });
         }
      });
   });

   $("body").on('input load', '.google_address1', function() {
      var input = $(this);

      var options = {
         types: ['geocode']
      };

      var autocomplete = new google.maps.places.Autocomplete(input[0]);

      google.maps.event.addListener(autocomplete, 'place_changed', function() {
         var place = autocomplete.getPlace();
         input.parent().find("#latitude").val(place.geometry.location.lat());
         input.parent().find("#longitude").val(place.geometry.location.lng());

         var address1 = "";
         var address2 = "";

         $.each(place.address_components, function (key, value) {
            if( $.inArray("street_number", value.types) !== -1 ) {
               address1 += value.long_name + " ";
            }

            if( $.inArray("route", value.types) !== -1 || $.inArray("premise", value.types) !== -1 ) {
               address1 += value.long_name + " ";
            }

            if( $.inArray("sublocality_level_2", value.types) !== -1 ) {
               address1 += value.long_name + " ";
            }

            if( $.inArray("locality", value.types) !== -1 ) {
               $("#suburb").val(value.long_name);
            }

            if( $.inArray("administrative_area_level_1", value.types) !== -1 ) {
               $("#state").val(value.long_name);;
            }

            if( $.inArray("country", value.types) !== -1 ) {
               $('#country').val(value.long_name);
            }

            if( $.inArray("postal_code", value.types) !== -1 ) {
               $('#postcode').val(value.long_name);
            }
         });

         input.val(address1);
         input.parent().next('div').find('input:text').val(address2);
      });
   });

   $('#date_of_birth').mask('99/99/9999', {
      placeholder: "dd/mm/yyyy"
   });

   $(document).on('click', '.be-select', function(event) {
      if (event.target.value == 'monday') {
         var monday = $(this).closest('div').parent().parent().parent().next();
         resetValue(monday, 'monday_');
      }

      if (event.target.value == 'tuesday') {
         var tuesday = $(this).closest('div').parent().parent().parent().next().next();
         resetValue(tuesday, 'tuesday_');
      }

      if (event.target.value == 'wednesday') {
         var wednesday = $(this).closest('div').parent().parent().parent().next().next().next();
         resetValue(wednesday, 'wednesday_');
      }

      if (event.target.value == 'thursday') {
         var thursday = $(this).closest('div').parent().parent().parent().next().next().next().next();
         resetValue(thursday, 'thursday_');
      }

      if (event.target.value == 'friday') {
         var friday = $(this).closest('div').parent().parent().parent().next().next().next().next().next();
         resetValue(friday, 'friday_');
      }

      if (event.target.value == 'saturday') {
         var saturday = $(this).closest('div').parent().parent().parent().next().next().next().next().next().next();
         resetValue(saturday, 'saturday_');
      }

      if (event.target.value == 'sunday') {
         var sunday = $(this).closest('div').parent().parent().parent().next().next().next().next().next().next().next();
         resetValue(sunday, 'sunday_');
      }
   });

   function resetValue(day, flag)
   {
      day.find('.timepicker').each(function(element) {
         $(this).mdtimepicker({
            theme: 'blue',
            useCurrent: false
         });
      });
      day.toggle("show");
      day.find("input[name*=" + flag + "start_time]").val('9:00 AM');
      day.find("input[name*=" + flag + "end_time]").val('5:00 PM');
      day.find("input[name*=" + flag + "break_start_time]").val('');
      day.find("input[name*=" + flag + "break_end_time]").val('');
   }

   $(".client_access_file_btn").hover(function() {
      $(".client_access_file_toggle").toggle();
   });

   $(".send-client-btn-geo").hover(function() {
      $(".send-client-box-geo").toggle();
   });

   // profile image upload for provider
   var loadFileForProvider = function(event) {
      var reader = new FileReader();
      reader.onload = function() {
         var output = document.getElementById('outputForProvider');
         output.src = reader.result;
         $('#outputForProvider').css({
            "background-color": "#ffffff"
         });
      };
      reader.readAsDataURL(event.target.files[0]);
   };

   // date only future
   $.validator.addMethod("minDate", function (value, element) {
      var now = new Date();
      var myDate = new Date(value);
      return this.optional(element) || myDate > now;
   });

   $.validator.addMethod("CheckDOB", function (value, element) {
      var minDate = Date.parse("01/01/1990");
      var today = new Date();
      var DOB = Date.parse(value);
      if( ( DOB >= today ) ) {
         return false;
      }
      return true;
   }, "NotValid");

   $(document).ready(function() {

      // getLocation($('#location_id').val());

      /*$(".timePickerNew").each(function() {
         var daynew = $(this).data("day");
         var flagnew = $(this).data("flag");
         var closediv = $(this).closest("div").parent();

         var settime = '00:00 PM';

         if( flagnew == 'start' ) {
            settime = '00:00 PM';
         }

         if( flagnew == 'end' ) {
            settime = '00:00 PM';
         }

         $(this).timepicker({
            onChange: function(value) {
               console.log("input[name*="+ daynew +"_"+flagnew+"_time]");
               $(closediv).find("input[name*="+ daynew +"_"+flagnew+"_time]").val(value);
               $( closediv ).find( ".form-select" ).css( "color", "#24303f" );
            }
         }).setValue(settime);
      });*/

      $(".timePickerNew").each(function() {
         var settime = $(this).data("value");
         var location = $(this).data("location");
         var daynew = $(this).data("day");
         var flagnew = $(this).data("flag");
         var closediv = $(this).closest("div").parent();
         var isTimeSet = $(this).data("set");

         $(this).timepicker({
            onChange: function(value) {
               $(closediv).find("input[name*="+ daynew +"_"+flagnew+"_time]").val(value);
               $( closediv ).find( ".form-select" ).css( "color", "#24303f" );
            }
         }).setValue(settime);

         if( isTimeSet == 1 ) {
            $( closediv ).find( ".form-select" ).css( "color", "#24303f" );
            $( closediv ).find( "#"+daynew+"_"+flagnew+"_time_"+location ).val(settime);
         } else {
            $( closediv ).find( ".form-select" ).css( "color", "#cccccc" );

            if( flagnew == 'start' ) {
               $( closediv ).find( "#"+daynew+"_"+flagnew+"_time_"+location ).val("09:00 AM");
            } else {

               if( flagnew == 'break_start' || flagnew == 'break_end' ) {
                  $( closediv ).find( "#"+daynew+"_"+flagnew+"_time_"+location ).val("");
               } else {
                  $( closediv ).find( "#"+daynew+"_"+flagnew+"_time_"+location ).val("05:00 PM");
               }
            }
         }
      });

      $(document).on( "change", ".toggle-day-value", function() {
         var ischecked = $(this).is(':checked');
         var id = $(this).attr('id');

         const split_string = id.split("-");
         var day = split_string[0];
         var location = split_string[1];

         var divId = '#'+ day +'_'+ location +'_time_section';

         if( !ischecked ) {
            $(divId).addClass('d-none');
            $("#"+ day +"_starttimePicker_"+location).setValue('09:00 AM');
            $("#"+ day +"_start_time_"+location).val('09:00 AM');

            $("#"+ day +"_endtimePicker_"+location).setValue('05:00 PM');
            $("#"+ day +"_end_time_"+location).val('05:00 PM');

            $("#"+ day +"_"+ location +"_selected").val(0);
         } else {
            $(divId).removeClass('d-none');
            $("#"+ day +"_starttimePicker_"+location).setValue('00:00 AM');
            $("#"+ day +"_start_time_"+location).val('00:00 AM');

            $("#"+ day +"_endtimePicker_"+location).setValue('00:00 PM');
            $("#"+ day +"_end_time_"+location).val('00:00 PM');
            $("#"+ day +"_"+ location +"_selected").val(1);
         }
      });

      $(document).on( "click", ".clearLunch", function() {
         $(this).parent().parent().find('input').val('');

         /* NEW TIMEPICKER CLEAR */
         var parentDiv = $(this).parent().parent();

         parentDiv.find('.timePickerNew').each( function() {
            $(this).timepicker().setValue('00:00 PM');
            $( parentDiv ).find( ".form-select" ).css( "color", "#cccccc" );
         });
      });

      $('#browseimgForProvider').on('change', function() {
         Object.values(this.files).forEach(function(file) {
            if (file.type == 'application/pdf') {
               $('.pdfFile').addClass('d-flex');
               $('#outputForProvider').addClass('d-none');
            } else {
               $('.pdfFile').removeClass('d-flex');
               $('#outputForProvider').removeClass('d-none');
            }
         })
      });

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

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

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

      $(document).on('click', '.association_provider_btn', function() {
         if( $(".show_section").hasClass("d-none") ) {
            $('.show_section').removeClass('d-none');
            $('.is_add_provider_number').val(1);
         } else {
            $('.show_section').addClass('d-none');
            $('.is_add_provider_number').val(0);
         }
      });

      $('#setupAccountForm').validate({
         errorClass: 'text-danger-custom',
         rules: {
            'first_name': {
               required: true
            },
            'last_name': {
               required: true
            },
            'email': {
               required: true,
               email: true
            },
            'mobile': {
               required: true,
               digits: true,
               remote: {
                  url: '{{ route("practitioner.team.checkMobileExists") }}',
                  type: "post",
                  data: {
                     mobile: function() {
                        return $('#setupAccountForm :input[name="mobile"]').val();
                     },
                     id: function() {
                        return $('#setupAccountForm :input[name="practiitoner_id"]').val();
                     }
                  }
               }
            },
            'privacy_and_terms': {
               required: true
            },
            'profession[]': {
               //required: true
               required: function(element) {
                  return $('#user_role').val() == 'service_provider' || $('#user_role').val() == 'service_provider_instructor';
               }
            },
            'location[]': {
              // required: true
               required: function(element) {
                  return $('#user_role').val() == 'service_provider' || $('#user_role').val() == 'service_provider_instructor';
               }
            },
            'password': {
               required: true
            },
            'confirm_password': {
               required: true,
               equalTo : "#password"
            },
            'healthFunds': {
               required: function() {
                  return $(".is_add_provider_number").val() == "1";
               }
            },
            'provider_number': {
               required: function() {
                  return $(".is_add_provider_number").val() == "1";
               }
            },
            'location': {
               //required: true
               required: function(element) {
                  return $('#user_role').val() == 'service_provider' || $('#user_role').val() == 'service_provider_instructor';
               }
            },
            'provider_location': {
               required: function() {
                  return $(".is_add_provider_number").val() == "1";
               }
            },
            'phone_home': {
               digits: true
            },
            'phone_work': {
               digits: true
            }
         },
         messages: {
            'mobile': {
               remote: "This mobile is already used"
            }
         },
         errorPlacement: function(error, element) {
            /*error.appendTo(element.parent()).addClass('text-danger');

            if( element.parent('.input-group').length ) {
               error.insertAfter( element.parent() );
            }*/

            if( element.attr("name") == "first_name" ) {
               error.insertAfter( "#div-first_name" );
            } else if( element.attr("name") == "last_name" ) {
               error.insertAfter( "#div-last_name" );
            } else if( element.attr("name") == "mobile" ) {
               error.insertAfter( "#div-mobile" );
            } else if( element.attr("name") == "phone_home" ) {
               error.insertAfter( "#div-phone_home" );
            } else if( element.attr("name") == "phone_work" ) {
               error.insertAfter( "#div-phone_work" );
            } else if( element.attr("name") == "profession[]" ) {
               error.insertAfter( "#div-profession" );
            } else if( element.attr("name") == "association[]" ) {
               error.insertAfter( "#div-association" );
            } else if( element.attr("name") == "abn" ) {
               error.insertAfter( "#div-abn" );
            } else if( element.attr("name") == "location" ) {
               error.insertAfter( "#div-location" );
            } else if( element.attr("name") == "healthFunds" ) {
               error.insertAfter( "#div-healthFunds" );
            } else if( element.attr("name") == "provider_number" ) {
               error.insertAfter( "#div-provider_number" );
            } else if( element.attr("name") == "provider_location" ) {
               error.insertAfter( "#div-provider_location" );
            } else if( element.attr("name") == "password" ) {
               error.insertAfter( "#div-password" );
            } else if( element.attr("name") == "confirm_password" ) {
               error.insertAfter( "#div-confirm_password" );
            } else if( element.attr("name") == "privacy_and_terms" ) {
               error.insertAfter( "#div-privacy_and_terms" );
            } else {
               error.insertAfter(element);
            }
         },
         errorElement: 'span',
      });

      // Save health fund provider
      $(document).on( 'click', '.saveprovider', function(e) {

         if( $('.healthFunds').val() == "" ) {
            $('.health-error').text('this field is required');
            return false;
         }

         if( $('.provider_number').val() == "" ) {
            $('.provider-error').text('this field is required');
            return false;
         }

         $(".loading").show();
         $.ajax({
            url: "{{ route('practitioners.setupAccount.store.providerNumbers') }}",
            data: {
               practitioner_id: $('#practitioner_id').val(),
               provider_number: $('.provider_number').val(),
               edit_id: $('.edit_id').val(),
               healthFunds: $('.healthFunds').val(),
               location: $('.location').val(),
               is_add_provider_number: $('.is_add_provider_number').val()
            },
            type: 'POST',
         }).done(function(response) {
            $(".loading").hide();
            $('.health-error').text('');
            $('.provider-error').text('');
            $('.show_section').addClass('d-none');
            $('.is_add_provider_number').val(0);

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

               $('.edit_id').val('');
               $('.provider_number').val('');
               $('.healthFunds').val('');
               $('.location').val('');

               $('#AssociationProviderTable').html(response.html_table);

            } else if( response.status == "dupicate_error" ) {

               Swal.fire({
                  icon: 'error',
                  title: response.msg,
                  showClass: {
                     popup: 'animate__animated animate__fadeInDown'
                  },
                  hideClass: {
                     popup: 'animate__animated animate__fadeOutUp'
                  }
               });
            } else {
               $.each(response.errors, function(key, value, i) {
                  var input = $('input[name=' + key + ']');
                  var parent = input.next('.invalid-feedback').text(value[0]);
                  input.addClass('is-invalid');
                  var select = $('select[name=' + key + ']');
                  var parent = select.next('.invalid-feedback').text(value[0]);
                  select.addClass('is-invalid');
               });
            }
         }).fail(function(error) {
            $(".loading").hide();
         });
      });

      // Edit health fund provider
      $(document).on('click', '.editHealth', function(e) {
         if( $(".show_section").hasClass("d-none") ) {
            $('.show_section').removeClass('d-none');
            $('.is_add_provider_number').val(1);
         }

         var el = $(this);
         var id = el.data('id');
         var healthfunds = el.data('healthfunds');
         var provider_number = el.data('provider_number');
         var location = el.data('location');

         $('.provider_number').val(provider_number);
         $('.healthFunds').val(healthfunds);
         $('.location').val(location);
         $('.edit_id').val(id);
      });

      // Remove health fund provider
      $(document).on('click', '.removeHealth', function(e) {
         var el = $(this);
         var id = el.data('id');

         var datas = new FormData();
         datas.append('id', id);

         Swal.fire({
            title: 'Delete provider number?',
            text: 'This cannot be undone',
            icon: 'warning',
            confirmButtonText: 'Delete',
            showCloseButton: true,
         }).then((result) => {
            if (result.value) {
               $.ajax({
                  url: "{{route('practitioner.deleteAssociationProviderNumbers')}}",
                  data: datas,
                  contentType: false,
                  processData: false,
                  method: 'POST',
                  beforeSend: function(msg) {
                     $(".loading").addClass("d-block");
                  },
               }).done(function(response) {
                  $('.tbl_' + id).remove();
                  $(".loading").removeClass("d-block");
                  Swal.fire({
                     icon: response.status,
                     title: response.msg,
                     showClass: {
                        popup: 'animate__animated animate__fadeInDown'
                     },
                     hideClass: {
                        popup: 'animate__animated animate__fadeOutUp'
                     }
                  });
               }).fail(function(error) {
                  $(".loading").hide();
                  alert('something went wrong error.');
               });
            }
         });
      });

      $(document).on( "submit", "#setupAccountForm", 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 datas = new FormData($(this)[0]);
         var selectedDays = JSON.stringify(selectedDays);
         datas.append('selectedDays', selectedDays);

         $(".profile-form-error").hide();

         if( $(this).parsley().isValid() ) {
            $.ajax({
               url: $(this).attr("action"),
               data: datas,
               type: 'POST',
               processData: false,
               contentType: false,
               beforeSend: function(msg) {
                  $(".loading").addClass("d-block");
               },
            }).done(function(response) {
               $(".loading").removeClass("d-block");

               if( response.status == "success" ) {
                  $("#invite-message-area").text(response.msg);
                  $("#invite-sendmodal").modal("show");

                  setTimeout(function() {
                     window.location.href = response.redirect;
                  }, 2000);

                  // window.location.href = response.redirect;

                  $("#setupAccountForm")[0].reset();
               } else {
                  $(".invalid-feedback").text('');
                  //console.log( response.errors );

                  $.each(response.errors, function(key, value, i) {
                     //console.log('key',key);
                     //console.log('i',i);
                     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));
                     } else {
                        var input = $('input[name=' + key + ']');
                        var parent = input.next('.invalid-feedback').text(value[0]);
                        input.addClass('is-invalid');
                        var select = $('select[name=' + key + ']');
                        var parent = select.next('.invalid-feedback').text(value[0]);
                        select.addClass('is-invalid');
                     }
                  });

                  if(response.errors.password && response.errors.password != undefined){
                      $("#div-password").next('span').remove();
                      $("#div-password").after('<span for="password" class="text-danger-custom" style="display: inline;">'+ response.errors.password[0] +'</span>');
                  }else{ $("#div-password").next('span').remove(); }

                  if(response.errors.confirm_password && response.errors.confirm_password != undefined){
                      $("#div-confirm_password").next('span').remove();
                      $("#div-confirm_password").after('<span for="confirm_password" class="text-danger-custom" style="display: inline;">'+ response.errors.confirm_password[0] +'</span>');
                  }else{ $("#div-confirm_password").next('span').remove(); }
               }
            }).fail(function (error) {
               $(".loading").removeClass("d-block");
            });
         }
      });

      // On selecting location set address field
      /*$(document).on( "change", "#location_id", function(e) {
         e.preventDefault();
         var id = $(this).val();
         var text = $(this).find("option:selected").text();
         // $("#address").val( text );

         $(".timePickerNew").each(function() {
            var daynew = $(this).data("day");
            var flagnew = $(this).data("flag");
            var closediv = $(this).closest("div").parent();

            var settime = '00:00 PM';

            $(this).timepicker({
               onChange: function(value) {
                  console.log("input[name*="+ daynew +"_"+flagnew+"_time]");
                  $(closediv).find("input[name*="+ daynew +"_"+flagnew+"_time]").val(value);
                  $( closediv ).find( ".form-select" ).css( "color", "#24303f" );
               }
            }).setValue(settime);

            $( closediv ).find( ".form-select" ).css( "color", "#cccccc" );
         });

         $('.timePickerDiv').css('display','none');
         $('.be-select').find('input[type=checkbox]:checked').removeAttr('checked');
      });*/

      $(document).on('change', "#location_id", function(e) {
         e.preventDefault();
         var locationId = $(this).val();
         // getLocation(locationId);
      });

      function getLocation(val)
      {
         $.ajax({
            url: "{{route('practitioner.team.getLocationTeamMember')}}",
            data:{
               'location_id': val,
               'id': $("#practitioner_id").val()
            }, 
            type: 'POST'
         }).done(function(response) {
            var location = response.data;

            var monday = null;
            var tuesday = null;
            var wednesday = null;
            var thursday = null;
            var friday = null;
            var saturday = null;
            var sunday = null;

            if( location.openDay.indexOf('monday') != -1 ) {
               monday = 'checked';
            }

            if( location.openDay.indexOf('tuesday') != -1 ) {
               tuesday = 'checked';
            } 

            if( location.openDay.indexOf('wednesday') != -1 ) {
               wednesday = 'checked';
            }

            if( location.openDay.indexOf('thursday') != -1 ) {
               thursday = 'checked';
            }

            if( location.openDay.indexOf('friday') != -1 ) {
               friday = 'checked';
            }

            if( location.openDay.indexOf('saturday') != -1 ) {
               saturday = 'checked';
            }

            if( location.openDay.indexOf('sunday') != -1 ) {
               sunday = 'checked';
            }

            var html ='';
            var html2 ='';
            var html3 ='';

            html +='<input type="hidden" name="location_id[]" value="'+location.id+'"><div class="dayslabel-space daysDiv locationDiv_'+location.id+'"><div class="label-input daysinline" id="emergencycontact"><div class="row "><div class="col-lg-4 col-md-4"><label>Trading Day/s</label></div><div class="col-lg-8 col-md-8 pl-xl-0"><div class="health-history-checkbox selectdays-dropdown mb-0 tradingdays"><ul id="be-select" class="be-select"><li><div class="rdio rdio-primary radio-inline"><input class="mondays" id="{{$unique = uniqid()}}" name="day[monday][]" value="monday" '+monday+' type="checkbox"><label for="{{$unique}}">Monday</label></div></li> <li> <div class="rdio rdio-primary radio-inline"> <input class="tuesdays" id="{{$unique = uniqid()}}" name="day[tuesday][]" value="tuesday" '+tuesday+' type="checkbox"> <label for="{{$unique}}">Tuesday</label> </div> </li> <li> <div class="rdio rdio-primary radio-inline"> <input class="wednesdays" id="{{$unique = uniqid()}}" name="day[wednesday][]" value="wednesday" '+wednesday+' type="checkbox"> <label for="{{$unique}}">Wednesday</label> </div> </li> <li> <div class="rdio rdio-primary radio-inline"> <input class="thursdays" id="{{$unique = uniqid()}}" name="day[thursday][]" value="thursday" '+thursday+' type="checkbox"> <label for="{{$unique}}">Thursday</label> </div> </li> <li> <div class="rdio rdio-primary radio-inline"> <input class="fridays" id="{{$unique = uniqid()}}" name="day[friday][]" value="friday" '+friday+' type="checkbox"> <label for="{{$unique}}">Friday</label> </div> </li> <li> <div class="rdio rdio-primary radio-inline"> <input class="saturdays" id="{{$unique = uniqid()}}" name="day[saturday][]" value="saturday" '+saturday+' type="checkbox"> <label for="{{$unique}}">Saturday</label> </div> </li> <li> <div class="rdio rdio-primary radio-inline"> <input class="sundays" id="{{$unique = uniqid()}}" name="day[sunday][]" value="sunday" '+sunday+' type="checkbox"> <label for="{{$unique}}">Sunday</label> </div> </li> </ul> </div> </div> </div> </div>';

            var monday_start_time =  '';
            var monday_end_time =  '';
            var break_start_time = '';
            var break_end_time =  '';

            if( location.hours.length >= 1 ) {
               $.each(location.hours, function(key, value, i) {
                  var monday_start_time =  '';
                  var monday_end_time =  '';
                  var break_start_time = '';
                  var break_end_time =  '';

                  if( value.day && value.start_time != null && value.status == 'open' ) {
                     monday_start_time = value.start_time;
                     monday_end_time = value.end_time;
                  }

                  if( value.day && value.break_start_time != null && value.status == 'open' ) {
                     break_start_time = value.break_start_time;
                     break_end_time = value.break_end_time;
                  }

                  /* NEW TIMEPICKER CODE - START */
                  html2 += getLocationHtmlNew(value.day,monday_start_time,monday_end_time,break_start_time,break_end_time,location.openDay);
                  /* NEW TIMEPICKER CODE - END */

               });
            } else {
               /* NEW TIMEPICKER CODE - START */
               var monday_start_time =  '';
               var monday_end_time =  '';
               var break_start_time = '';
               var break_end_time =  '';

               html2 += getLocationHtmlNew('monday',monday_start_time,monday_end_time,break_start_time,break_end_time,location.openDay);
               html2 += getLocationHtmlNew('tuesday',monday_start_time,monday_end_time,break_start_time,break_end_time,location.openDay);
               html2 += getLocationHtmlNew('wednesday',monday_start_time,monday_end_time,break_start_time,break_end_time,location.openDay);
               html2 += getLocationHtmlNew('thursday',monday_start_time,monday_end_time,break_start_time,break_end_time,location.openDay);
               html2 += getLocationHtmlNew('friday',monday_start_time,monday_end_time,break_start_time,break_end_time,location.openDay);
               html2 += getLocationHtmlNew('saturday',monday_start_time,monday_end_time,break_start_time,break_end_time,location.openDay);
               html2 += getLocationHtmlNew('sunday',monday_start_time,monday_end_time,break_start_time,break_end_time,location.openDay);
               /* NEW TIMEPICKER CODE - END */
            }

            html3 +='</div> </div>';
            var total = html + html2 + html3;
            $('#appendNewLocation').empty();
            $('#appendNewLocation').append(total);

            $(".timePickerNew").each(function() {
               var day = $(this).data("day");
               var isTimeSet = $(this).data("set");
               var flag = $(this).data("flag");
               var setTime = $(this).data("val");
               var closediv = $(this).closest("div").parent();

               if( setTime == '' ) {
                  setTime = '00:00 PM';
               }

               $(this).timepicker({ onChange: function(value) {
                  $("#"+day).val( value );
                  $( closediv ).find( ".form-select" ).css( "color", "#24303f" );
               }}).setValue( setTime );

               if( isTimeSet == 1 ) {
                  $( closediv ).find( ".form-select" ).css( "color", "#24303f" );
               } else {
                  $( closediv ).find( ".form-select" ).css( "color", "#cccccc" );
               }
            });
         });
      }

      function getLocationHtmlNew( day, start_time, end_time, break_start_time, break_end_time, openDay )
      {
         var display = '';
         if( openDay.indexOf(day) == -1 ) { 
            display = 'style="display:none"';
         }

         var isStartTimeSet = start_time != '' ? 1 : 0;
         var isEndTimeSet = end_time != '' ? 1 : 0;
         var isBreakStartTimeSet = break_start_time != '' ? 1 : 0;
         var isBreakEndTimeSet = break_end_time != '' ? 1 : 0;

         var html_data = '';

         html_data += '<div class="'+day+' timePickerDiv" '+day+' '+display+' >';
         html_data += '<div class="label-input">';
         html_data += '<div class="row align-items-center">';

         html_data += '<div class="col-sm-4"></div>';

         html_data += '<div class="col-sm-8">';

            html_data += '<div class="row" >';

               html_data += '<h3 class="ml-0 businesstitle mb-3 col-12" style="text-transform:capitalize;">'+day+'</h3>'

               html_data += '<div class="timepicker-content-b-details">';
                  html_data += '<div class="start-time">';
                     html_data += '<div class="form-group brdrfull">';
                        html_data += '<div data-set="'+ isStartTimeSet +'" data-val="'+ start_time +'" data-day="'+day+'_start_time" data-flag="start" class="timePickerNew d-flex align-items-center" id="starttimePicker_'+day+'"></div>';

                        if( isStartTimeSet == 1 ) {
                           html_data += '<input type="hidden" name="'+day+'_start_time[]" id="'+day+'_start_time" autocomplete="off" readonly="" value="'+start_time+'">';
                        } else {
                           html_data += '<input type="hidden" name="'+day+'_start_time[]" id="'+day+'_start_time" autocomplete="off" readonly="" value="9:00 AM">';
                        }

                     html_data += '</div>';
                     html_data += '<span class="invalid-feedback d-block"></span>';
                  html_data += '</div>';

                  html_data += '<div class="to-time py-2"> To: </div>';

                  html_data += '<div class="end-time">';
                     html_data += '<div class="form-group brdrfull">';
                        html_data += '<div data-set="'+ isEndTimeSet +'" data-val="'+ end_time +'" data-day="'+day+'_end_time" data-flag="end" class="timePickerNew d-flex align-items-center" id="endtimePicker_'+day+'"></div>';

                        if( isEndTimeSet == 1 ) {
                           html_data += '<input type="hidden" name="'+day+'_end_time[]" id="'+day+'_end_time" autocomplete="off" readonly="" value="'+end_time+'">';
                        } else {
                           html_data += '<input type="hidden" name="'+day+'_end_time[]" id="'+day+'_end_time" autocomplete="off" readonly="" value="5:00 PM">';
                        }

                     html_data += '</div>';
                     html_data += '<span class="invalid-feedback d-block"></span>';
                  html_data += '</div>';

                  html_data += '<div class="clear-time"></div>'

               html_data += '</div>';

            html_data += '</div>';

         html_data += '</div>';
         html_data += '</div>';
         html_data += '</div>';

         /* Break time start */
         html_data += '<div class="label-input">';
            html_data += '<div class="row align-items-center">';

            html_data += '<div class="col-sm-4"></div>';

            html_data += '<div class="col-sm-8">';

            html_data += '<div class="row">';

            html_data += '<label class="col-12">Break time:</label>';

            html_data += '<div class="timepicker-content-b-details">';

               html_data += '<div class="start-time">';
                  html_data += '<div class="form-group brdrfull">';
                     html_data += '<div data-set="'+ isBreakStartTimeSet +'" data-val="'+ break_start_time +'" data-day="'+day+'_start_break_time" data-flag="start_break" class="timePickerNew d-flex align-items-center" id="startBreaktimePicker_'+day+'"></div>';
                     html_data += '<input type="hidden" name="'+day+'_break_start_time[]" id="'+day+'_start_break_time" autocomplete="off" readonly="" value="'+break_start_time+'">';
                  html_data += '</div>';
                  html_data += '<span class="invalid-feedback d-block"></span>';
               html_data += '</div>';

               html_data += '<div class="to-time py-2"> To: </div>'

               html_data += '<div class="end-time">';
                  html_data += '<div class="form-group brdrfull">';
                     html_data += '<div data-set="'+ isBreakEndTimeSet +'" data-val="'+ break_end_time +'" data-day="'+day+'_end_break_time" data-flag="end_break" class="timePickerNew d-flex align-items-center" id="endBreaktimePicker_'+day+'"></div>';
                     html_data += '<input type="hidden" name="'+day+'_break_end_time[]" id="'+day+'_end_break_time" autocomplete="off" readonly="" value="'+break_end_time+'">';
                  html_data += '</div>';
                  html_data += '<span class="invalid-feedback d-block"></span>';
               html_data += '</div>';

               html_data += '<div class="clear-time">';
               html_data += '<a class="clearLunch cursor-pointer Clear">Delete break time</a>';
               html_data += '</div>';

            html_data += '</div>';

            html_data += '</div>';

            html_data += '</div>';
            html_data += '</div>';
         html_data += '</div>';
         /* Break time end */

         html_data += '</div>';

         return html_data;
      }

      $(document).on( 'click', '#storeAvailability', 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 datas = new FormData($('#setupAccountForm')[0]);
         var selectedDays = JSON.stringify(selectedDays);
         var id = $("#practitioner_id").val();
         var location_id = $("#location_id").val();
         datas.append('selectedDays', selectedDays);
         datas.append('id', id);

         $.ajax({
            url: "{{route('practitioner.team.storeLocationHoursTeamMember')}}",
            data: datas,
            type: 'POST',
            contentType: false,
            processData: false,
         }).done(function(response) {
            if (response.status == "success") {
               Swal.fire({
                  icon: response.status,
                  title: 'Updated',
                  showClass: {
                     popup: 'animate__animated animate__fadeInDown'
                  },
                  hideClass: {
                     popup: 'animate__animated animate__fadeOutUp'
                  }
               });
            } else {
               $(".invalid-feedback").text('');
               $.each(response.errors, function(key, value, i) {
                  var [before, after] = key.split(".");
                  var input = $('input[name="' + before + '[]"]');
                  var span = $('input[name="' + before + '[]"]').next('span');
                  var da = span[after];
                  da.append(value[0].replace(key, before));
               });
            }
         });
      });
   });
</script>

<script src="{{asset('assets/js/practitioner/my-settings.js')}}" type="text/javascript"></script>

<script>
   $('.autosizetextaria').each(function () {
      this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;overflow-y:hidden;');
   }).on('input', function () {
      this.style.height = 'auto';
      this.style.height = (this.scrollHeight) + 'px';
   });

   $('.profession-dd').select2({
      placeholder: " ",
      tokenSeparators: [",", " "],
   });

   $('.association-dd').select2({
      placeholder: " ",
      tokenSeparators: [",", " "],
   });

   $('.custom-control-input').on( 'change', function() {
      if(  this.checked ) {
         $('.autosizetextaria').each(function () {
            this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;overflow-y:hidden;');
         }).on('input', function () {
            this.style.height = 'auto';
            this.style.height = (this.scrollHeight) + 'px';
         });
      }
   });
</script>
@endsection