@extends('front.practitioner.import.template.import')
@section('content')
<div class="container-fluid">
   <div class="row">
   <nav class="navbar navbar-light bg-light invoice-page-menu notes-menu w-100">
      <a class=" p-0" href="{{ route('practitioner.appointments.index') }}"><img src="{{asset('assets/images/My Appointments back icon.svg')}}" alt="" class="img-flude" style="min-width: 40px"></a>
      <a class="navbar-brand p-0 " href="{{ route('practitioner.appointments.index') }}"><img src="{{asset('assets/images/MA Icon Colour.svg')}}" alt="" class="img-flude" style="min-width: 43px"></a>
      <h1 class="page-title eagle-font font-400 ">Sent via</h1>

      </nav>
      <!-- @include( 'front.practitioner.import.include.navbar' ) -->
      <div class="brdr-bttm w-100"></div>
   </div>
</div>

<input type="hidden" name="id" id="id" value="{{ $practitioner->id }}">

<div class="dashboard-wrapper mdashboard-wrapper clientd-wrapper setting-wrapper">
   <div class="row justify-content-center position-relative">
      <div class="col-xl-7 col-lg-9 col-md-10">

         <div class="accordion pt-0" id="accordion-clients">
            <div class="tab-content clientcollapse-area dashboard-myaccount user-detail-form my-detail">

               <div class="boxwhite health-history-h4space" id="collapse12">
                  <div class="" id="my-team-profile" data-parent="#accordion-clients">
                     <form class="form-client-helth " id="form_client_personalinfo" name="form_client_personalinfo" method="POST">
                        <div class="mt-10">
                           <div class="test-results-area">
                              <div class="appt-market-area">
                                 <div class="user-profile text-center" id="personalInformation">
                                    <div class="avatar-upload position-relative avatar-upload-contain" style="max-width: unset;">
                                       <div class="client-pic">
                                          <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>
                                    <h2 class="client-name">{{ ucfirst( $practitioner->first_name.' '.$practitioner->last_name ) }}</h2>
                                    <h6 id="member_professions" class="header_bold header_unblod_note europa-font">{{ $professionNames }}</h6>

                                    <ul class="list-inline client-icons mb-4">
                                       <li class="list-inline-item">
                                          <a data-clientname="{{ $practitioner->first_name ?? '' }}" data-clientphone="{{ $practitioner->phone ?? '' }}" data-clientphonework="-" data-clientphonehome="-" id="member-tel"><img src='{{asset("assets/images/phone_appointment.svg")}}' alt="" class="img-fluid"></a>
                                       </li>
                                       <li class="list-inline-item">
                                          <a href="#" id="smssendtomember" class="smssendtomember" data-id="{{$practitioner->id}}" data-name="{{$practitioner->first_name ?? ''}}"><img src='{{asset("assets/images/msg.svg")}}' alt="" class="img-fluid"></a>
                                       </li>
                                    </ul>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </form>
                  </div>
               </div>

               <div class="boxwhite details-area">
                  <h3 class="ml-0">Details <a class="collapse-arrow collapsed" data-toggle="collapse" href="#collapsecommunic" role="button" aria-expanded="false" aria-controls="collapsecommunic"><span class="gtop-arrow"><img src="{{asset('assets/images/g-top-arrow.png')}}" alt=""></span></a></h3>
                  <div class="collapse " id="collapsecommunic" data-parent="#accordion-clients">
                     <form id="myDetails" action="{{route('practitioner.team.editMemberDetails')}}">

                        <div class="mt-30">
                           <div class="media mt-4">
                              <div class="media-body">
                                 <div>
                                    <div class="form-group select2-multiple-autoselect">
                                       <label>Timezone</label>
                                       <select id="timezone" name="timezone" class="form-control filter-dropdown-select2" >
                                          <option selected disabled>Select timezone for team member</option>
                                          @foreach( $timezone as $key => $val )
                                             <option @if( $practitioner->timezone == $val ) Selected @endif value="{{$val}}">{{$val}}</option>
                                          @endforeach
                                       </select>
                                       <div id="div-profession" class="text-danger"></div>
                                    </div>

                                    <div class="form-group">
                                       <label>Title</label>
                                       <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>
                                       <span class="invalid-feedback d-block"></span>
                                    </div>

                                    <div class="form-group">
                                       <label>First name</label>
                                       <input type="text" name="first_name" id="first_name" class="form-control" placeholder="First name" value="{{ $practitioner->first_name ?? ''}}">
                                       <div id="div-first_name" class="text-danger"></div>
                                    </div>

                                    <div class="form-group">
                                       <label>Last name</label>
                                       <input type="text" name="last_name" id="last_name" class="form-control" placeholder="Last name" value="{{ $practitioner->last_name ?? ''}}">
                                       <span class="invalid-feedback d-block"></span>
                                    </div>

                                    <div class="form-group select2-multiple-autoselect">
                                       <label>Profession/s</label>
                                       <select class="form-control 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 id="div-profession" class="text-danger"></div>
                                    </div>

                                    <div class="form-group">
                                       <label>Email address</label>
                                       <input type="text" name="email" id="email" class="form-control" placeholder="Email address" value="{{ $practitioner->email ?? ''}}">
                                       <div id="div-email" class="text-danger"></div>
                                    </div>

                                    <div class="form-group">
                                       <label>Mobile number</label>
                                       <input type="text" name="phone" id="phone" class="form-control" placeholder="Mobile number" value="{{ $practitioner->phone ?? ''}}">
                                       <div id="div-phone" class="text-danger"></div>
                                    </div>

                                    <div class="form-group">
                                       <label>Home phone</label>
                                       <input type="text" name="phone_home" id="phone_home" class="form-control" placeholder="Home phone" value="{{ $provider->phone_home ?? '' }}">
                                       <div id="div-phone_home" class="text-danger"></div>
                                    </div>

                                    <div class="form-group">
                                       <label>Work phone</label>
                                       <input type="text" name="phone_work" id="phone_work" class="form-control" placeholder="Work phone" value="{{ $provider->phone_work ?? '' }}">
                                       <div id="div-phone_work" class="text-danger"></div>
                                    </div>

                                    <div class="form-group">
                                       <label>Address</label>
                                       <input type="text" name="address" id="address" class="form-control google_address" placeholder="Address line 1" value="{{ $provider->address ?? ''}}">
                                    </div>

                                    <div class="form-group">
                                       <input type="text" name="address2" id="address2" class="form-control" placeholder="Address line 2" value="{{ $provider->address2 ?? ''}}">
                                    </div>

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

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

                                    <div class="form-group">
                                       <label>D.O.B</label>
                                       <input type="text" id="date_of_birth" name="dob" class="form-control small-input" placeholder="dd/mm/yyyy" autocomplete="off" onblur="ValidateDOB()" value="{{$dob}}">
                                       <span class="error" id="lblError"></span>
                                    </div>

                                    <div class="form-group">
                                       <label>ABN</label>
                                       <input type="text" name="abn" id="abn" class="form-control" placeholder="ABN number" value="{{ $bankDetail->abn ?? '' }}">
                                       <div id="div-abn" class="text-danger"></div>
                                    </div>

                                    <div class="label-input">
                                       <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">
                                                   <li>
                                                      <input type="radio" id="ii_yes" name="indemnity_insurance" value="1">
                                                      <label for="ii_yes">Yes</label>
                                                   </li>
                                                   <li>
                                                      <input type="radio" id="ii_no" name="indemnity_insurance" value="0">
                                                      <label for="ii_no">No</label>
                                                   </li>
                                                </ul>
                                             </div>
                                             <span class="invalid-feedback d-block"></span>
                                          </div>
                                       </div>
                                    </div>

                                    <div class="label-input">
                                       <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">
                                                   <li>
                                                      <input @if( isset($bankDetail) && $bankDetail->registered_for_gst == 1 ) checked @endif  type="radio" id="rfg_yes" name="registered_for_gst" value="1" checked>
                                                      <label for="rfg_yes">Yes</label>
                                                   </li>
                                                   <li>
                                                      <input @if( isset($bankDetail) && $bankDetail->registered_for_gst == 0 ) checked @endif type="radio" id="rfg_no" name="registered_for_gst" value="0">
                                                      <label for="rfg_no">No</label>
                                                   </li>
                                                </ul>
                                             </div>
                                             <span class="invalid-feedback d-block"></span>
                                          </div>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           </div>
                           <button type="submit" class="btn-fill w-100 mt-10">Update and save</button>
                        </div>
                     </form>
                  </div>
               </div>

               <div class="boxwhite availability-area">
                  <h3 class="ml-0">My Availability <a class="collapse-arrow collapsed" data-toggle="collapse" href="#emergencycontact" role="button" aria-expanded="false" aria-controls="emergencycontact"><span class="gtop-arrow"><img src="{{asset('assets/images/g-top-arrow.png')}}" alt=""></span></a></h3>
                  <div class="collapse" id="emergencycontact" data-parent="#accordion-clients">
                     <form id="myAvailability" action="{{route('practitioner.team.storeLocationHoursTeamMember')}}">
                        <div class="mt-10">
                           <div class="test-results-area">
                              <div class="appt-market-area">
                                 <p class="font-15 text-blue comm-psapce mt-3">The hours your team member is available for appointments in your business</p>
                                 <div class="label-input">
                                    <div class="row align-items-center">
                                       <div class="col-sm-12">
                                          <div class="row align-items-center">
                                             <div class="col-lg-3 col-sm-6">
                                                <label class="loctop">Location</label>
                                             </div>
                                             <div class="col-lg-9 col-sm-6">
                                                <div class="form-group brdrfull mb-0 t-0 manual-select">
                                                   <!-- <input type="text" class="form-control text-left" placeholder="Brighton"> -->
                                                   <select name="location_id" id="location_id" class="form-control">
                                                      @foreach( $parentLocation as $location )
                                                         @if( in_array( $location->id, $teamLocation ) )
                                                            <option value="{{$location->id}}">{{ \Illuminate\Support\Str::limit($location->address, 60, '...') }}</option>
                                                         @endif
                                                      @endforeach
                                                   </select>
                                                </div>
                                             </div>
                                          </div>
                                       </div>
                                    </div>
                                 </div>
                                 <div id="appendNewLocation"></div>
                              </div>
                           </div>
                           <button type="submit" class="btn-fill w-100 mt-10">Update and save</button>
                        </div>
                     </form>
                  </div>
               </div>

               <div class="boxwhite service-area">
                  <h3 class="ml-0">My Services & Locations <a class="collapse-arrow collapsed" data-toggle="collapse" href="#teamServices" role="button" aria-expanded="false" aria-controls="teamServices"><span class="gtop-arrow"><img src="{{asset('assets/images/g-top-arrow.png')}}" alt=""></span></a></h3>
                  <div class="collapse" id="teamServices" data-parent="#accordion-clients">
                     <form id="myServices" action="{{route('practitioner.team.storeServicesTeamMember')}}">

                        <input type="hidden" name="member_id" id="member_id" value="{{$practitioner->id}}">
                        <div class="mt-10">
                           <div class="test-results-area">
                              <div class="appt-market-area">
                                 <p class="font-15 text-blue comm-psapce mt-3">The services & locations your team member is assigned for appointments in your business</p>
                                 <div class="label-input">
                                    <div class="row align-items-center">
                                       <div class="col-sm-12">
                                          <div class="row align-items-center">
                                             <div class="col-lg-3 col-sm-6">
                                                <label class="loctop">Locations</label>
                                             </div>
                                             <div class="col-lg-9 col-sm-6">
                                                <div class="form-group brdrfull mb-0 t-0 manual-select">
                                                   <!-- <input type="text" class="form-control text-left" placeholder="Brighton"> -->
                                                   <select id="selectCalendar" class="location-dd" name="locations[]" multiple="multiple">
                                                      @foreach( $parentLocation as $location )
                                                         <option @if( in_array( $location->id, $locationsAssigned ) ) Selected @endif value="{{$location->id}}">{{$location->address}}</option>
                                                      @endforeach
                                                      <option value="all">All</option>
                                                   </select>
                                                   <div id="div-locations"></div>
                                                </div>
                                             </div>
                                          </div>
                                       </div>
                                    </div>
                                 </div>

                                 <div class="label-input">
                                    <div class="row align-items-center">
                                       <div class="col-sm-12">
                                          <div class="row align-items-center">
                                             <div class="col-lg-3 col-sm-6">
                                                <label class="loctop">Services</label>
                                             </div>
                                             <div class="col-lg-9 col-sm-6">
                                                <div class="form-group brdrfull mb-0 t-0 manual-select">
                                                   <!-- <input type="text" class="form-control text-left" placeholder="Brighton"> -->
                                                   <select id="selectServices" class="service-dd" name="services[]" multiple="multiple">
                                                      @foreach( $appointmentTypes as $service )
                                                         <option @if( in_array( $service->id, $servicesAssigned ) ) Selected @endif value="{{$service->id}}">{{$service->appointment_type}}</option>
                                                      @endforeach
                                                      <option value="all">All</option>
                                                   </select>
                                                   <div id="div-services"></div>
                                                </div>
                                             </div>
                                          </div>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           </div>
                           <button type="submit" class="btn-fill w-100 mt-10">Update and save</button>
                        </div>
                     </form>
                  </div>
               </div>

               <div class="boxwhite permission-area">
                  <h3 class="ml-0">Permissions <a class="collapse-arrow collapsed" data-toggle="collapse" href="#emergencypermission" role="button" aria-expanded="false" aria-controls="emergencypermission"><span class="gtop-arrow"><img src="{{asset('assets/images/g-top-arrow.png')}}" alt=""></span></a></h3>
                  <div class="collapse" id="emergencypermission" data-parent="#accordion-clients">

                     <form id="memberPermissions" action="{{route('practitioner.team.editMemberPermission')}}">
                        <div class="userpermission-area">
                           
                           <div class="row detail-form label-input align-items-center">
                              <div class="col-md-5">
                                 <label>Allow user to adjust settings</label>
                              </div>
                              <div class="col-md-7">
                                 <div class="single-tittle">
                                    <ul class="age-title p-0 text-right">
                                       <li>
                                          <input type="radio" id="{{$unique = uniqid()}}" name="adjust_setting" value="1" @if( isset( $permissions ) && $permissions->adjust_setting == 1 ) checked @endif>
                                          <label for="{{$unique}}">Yes</label>
                                       </li>
                                       <li class="m-0">
                                          <input type="radio" id="{{$unique = uniqid()}}" name="adjust_setting" value="0" @if( isset( $permissions ) && $permissions->adjust_setting == 0 ) checked @endif>
                                          <label for="{{$unique}}">No</label>
                                       </li>
                                    </ul>
                                 </div>
                              </div>
                           </div>
                           
                           <div class="row detail-form label-input align-items-center">
                              <div class="col-md-5">
                                 <label>Allow user to add/edit users</label>
                              </div>
                              <div class="col-md-7">
                                 <div class="single-tittle">
                                    <ul class="age-title p-0 text-right">
                                       <li>
                                          <input type="radio" id="{{$unique = uniqid()}}" name="add_edit_user" value="1" @if( isset( $permissions ) && $permissions->add_edit_user == 1 ) checked @endif>
                                          <label for="{{$unique}}">Yes</label>
                                       </li>
                                       <li class="m-0">
                                          <input type="radio" id="{{$unique = uniqid()}}" name="add_edit_user" value="0" @if( isset( $permissions ) && $permissions->add_edit_user == 0 ) checked @endif>
                                          <label for="{{$unique}}">No</label>
                                       </li>
                                    </ul>
                                 </div>
                              </div>
                           </div>
                           
                           <div class="row detail-form label-input align-items-center">
                              <div class="col-md-5 pr-0">
                                 <label>Allow user to export client lists</label>
                              </div>
                              <div class="col-md-7">
                                 <div class="single-tittle">
                                    <ul class="age-title p-0 text-right">
                                       <li>
                                          <input type="radio" id="{{$unique = uniqid()}}" name="export_client_list" value="1" @if( isset( $permissions ) && $permissions->export_client_list == 1 ) checked @endif >
                                          <label for="{{$unique}}">Yes</label>
                                       </li>
                                       <li class="m-0">
                                          <input type="radio" id="{{$unique = uniqid()}}" name="export_client_list" value="0" @if( isset( $permissions ) && $permissions->export_client_list == 0 ) checked @endif>
                                          <label for="{{$unique}}">No</label>
                                       </li>
                                    </ul>
                                 </div>
                              </div>
                           </div>

                           <div class="row detail-form label-input align-items-center calendars-permission">
                              <div class="col-md-5 pr-0">
                                 <label>Allow user to view calendar of all other service providers  <span class="send-client-btn-geo-permission-calendars client_access_file_btn_permission_calendars cursor-pointer"><img src="{{asset('assets/images/info-icon.png')}}" alt="" class="img-fluid info-icon "></span></label>
                                 <div class="send-client-box-geo-permission-calendars client_access_file_toggle_permission_calendars">
                                    <div class="media">
                                       <img src="{{asset('assets/images/round-n-icon.png')}}" class="align-self-start mr-2" alt="...">
                                       <div class="media-body">
                                          <h5 class="mt-0 text-left">If no is selected, service providers will only be able to see their own calendar. Admin will not be able to see any.</h5>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                              <div class="col-md-7">
                                 <div class="single-tittle">
                                    <ul class="age-title p-0 text-right">
                                       <li>
                                          <input type="radio" id="{{$unique = uniqid()}}" name="view_all_calendars" value="1" @if( isset( $permissions ) && $permissions->view_all_calendars == 1 ) checked @endif >
                                          <label for="{{$unique}}">Yes</label>
                                       </li>
                                       <li class="m-0">
                                          <input type="radio" id="{{$unique = uniqid()}}" name="view_all_calendars" value="0" @if( isset( $permissions ) && $permissions->view_all_calendars == 0 ) checked @endif>
                                          <label for="{{$unique}}">No</label>
                                       </li>
                                    </ul>
                                 </div>
                              </div>
                           </div>

                           <div id="other_location_access" class="@if( isset( $permissions ) && $permissions->view_all_calendars == 1 ) d-none @endif">
                              <div class="row detail-form label-input align-items-center calendars-access-permission">
                                 <div class="col-lg-6 col-sm-5">
                                    <label class="d-inline">Allow user to view other location/s <span class="required_span">*</span> <span class="access-some-calendar-info-icon access_some_calendar_info_icon cursor-pointer"><img src="{{asset('assets/images/information_icon_blue.svg')}}" alt="" class="img-fluid info-icon "></span></label>
                                    <div class="access-some-calendar-info-box client_access_file_toggle_permission_access_some_calendars">
                                       <div class="media">
                                          <img src="{{asset('assets/images/round-n-icon.png')}}" class="align-self-start mr-2" alt="...">
                                          <div class="media-body">
                                             <h5 class="mt-0 text-left">If no is selected, service providers can not view calendars in any location.</h5>
                                          </div>
                                       </div>
                                    </div>
                                 </div>
                                 <div class="col-lg-6 col-sm-7">
                                    <div class="single-tittle">
                                       <ul class="age-title p-0 d-flex justify-content-sm-end text-left">
                                          <li>
                                             <input @if( isset( $permissions ) && $permissions->allow_to_view_calendar_locations == 1 ) checked @endif type="radio" id="{{$unique = uniqid()}}" name="allow_to_view_calendar_locations" value="1">
                                             <label for="{{$unique}}">Yes</label>
                                          </li>
                                          <li class="m-0">
                                             <input @if( isset( $permissions ) && $permissions->allow_to_view_calendar_locations == 0 ) checked @endif type="radio" id="{{$unique = uniqid()}}" name="allow_to_view_calendar_locations" value="0">
                                             <label for="{{$unique}}">No</label>
                                          </li>
                                       </ul>
                                    </div>
                                    <div id="div-allow_to_view_calendar_locations"></div>
                                 </div>
                              </div>

                              <div class="@if( isset( $permissions ) && $permissions->allow_to_view_calendar_locations == 0 ) d-none @endif" id="location_access">
                                 <div class="label-input">
                                    <div class="row align-items-center">
                                       <div class="col-lg-4 col-md-6">
                                          <label>Select Location <span class="required_span">*</span></label>
                                       </div>
                                       <div class="col-lg-8 col-md-6">
                                          <div class="">
                                             <select class="location-access-dd" name="locationCal[]" multiple="multiple">
                                                @foreach( $parentLocation as $key => $value )
                                                   <option @if( in_array( $value->id, $calendarAssigned ) ) Selected @endif value="{{$value->id}}">{{$value->address}}</option>
                                                @endforeach
                                                <option value="all">All</option>
                                             </select>
                                          </div>
                                          <div id="div-locationCal"></div>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           </div>

                           <div class="row detail-form label-input align-items-center">
                              <div class="col-md-5 pr-0">
                                 <label>Allow full access to all client files <span class="send-client-btn-geo-permission-client-files client_access_file_btn_permission_client_files cursor-pointer"><img src="{{asset('assets/images/info-icon.png')}}" alt="" class="img-fluid info-icon "></span></label>
                                 <div class="send-client-box-geo-permission-client-files client_access_file_toggle_permission_client_files">
                                    <div class="media">
                                       <img src="{{asset('assets/images/round-n-icon.png')}}" class="align-self-start mr-2" alt="...">
                                       <div class="media-body">
                                          <h5 class="mt-0 text-left">If no is selected, service providers will only be able to see their own client files. Admin will not be able to see any.</h5>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                              <div class="col-md-7">
                                 <div class="single-tittle">
                                    <ul class="age-title p-0 text-right">
                                       <li>
                                          <input type="radio" id="{{$unique = uniqid()}}" name="access_all_client_files" value="1" @if( isset( $permissions ) && $permissions->access_all_client_files == 1 ) checked @endif >
                                          <label for="{{$unique}}">Yes</label>
                                       </li>
                                       <li class="m-0">
                                          <input type="radio" id="{{$unique = uniqid()}}" name="access_all_client_files" value="0" @if( isset( $permissions ) && $permissions->access_all_client_files == 0 ) checked @endif>
                                          <label for="{{$unique}}">No</label>
                                       </li>
                                    </ul>
                                 </div>
                              </div>
                           </div>

                           <div class="row detail-form label-input align-items-center">
                              <div class="col-md-5 pr-0">
                                 <label>Allow access to client orders</label>
                              </div>
                              <div class="col-md-7">
                                 <div class="single-tittle">
                                    <ul class="age-title p-0 text-right">
                                       <li>
                                          <input type="radio" id="{{$unique = uniqid()}}" name="access_client_orders" value="1" @if( isset( $permissions ) && $permissions->access_client_orders == 1 ) checked @endif >
                                          <label for="{{$unique}}">Yes</label>
                                       </li>
                                       <li class="m-0">
                                          <input type="radio" id="{{$unique = uniqid()}}" name="access_client_orders" value="0" @if( isset( $permissions ) && $permissions->access_client_orders == 0 ) checked @endif>
                                          <label for="{{$unique}}">No</label>
                                       </li>
                                    </ul>
                                 </div>
                              </div>
                           </div>

                           <div class="row detail-form label-input align-items-center">
                              <div class="col-md-5 pr-0">
                                 <label>Allow access to all communication</label>                                 
                              </div>
                              <div class="col-md-7">
                                 <div class="single-tittle">
                                    <ul class="age-title p-0 text-right">
                                       <li>
                                          <input type="radio" id="{{$unique = uniqid()}}" name="access_all_communication" value="1" @if( isset( $permissions ) && $permissions->access_all_communication == 1 ) checked @endif >
                                          <label for="{{$unique}}">Yes</label>
                                       </li>
                                       <li class="m-0">
                                          <input type="radio" id="{{$unique = uniqid()}}" name="access_all_communication" value="0" @if( isset( $permissions ) && $permissions->access_all_communication == 0 ) checked @endif>
                                          <label for="{{$unique}}">No</label>
                                       </li>
                                    </ul>
                                 </div>
                              </div>
                           </div>

                           <button type="submit" class="btn-fill w-100 mt-10">Update and save</button>
                        </div>
                     </form>
                  </div>
               </div>

               <div class="boxwhite association-area">
                  <h3 class="ml-0">Association & provider numbers <a class="collapse-arrow collapsed" data-toggle="collapse" href="#association-provider-numbers" role="button" aria-expanded="false" aria-controls="emergencycontact"><span class="gtop-arrow"><img src="{{asset('assets/images/g-top-arrow.png')}}" alt=""></span></a></h3>
                  <div class="collapse " id="association-provider-numbers" data-parent="#accordion-clients">
                     <form id="assoc_provider_form" action="{{route('practitioner.storeAssociationProviderNumbers')}}">
                        <div class="mt-10">
                           <div class="test-results-area">
                              <div class="appt-market-area">
                                 <input type="hidden" name="practitioner_id" value="{{$practitioner->id}}">
                                 <div class="form-group select2-multiple-autoselect">
                                    <label>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>Registration number (Association or AHPRA)</label>
                                    <input type="text" name="registration_number" class="form-control" placeholder="Enter your number" value="{{ $practitioner->registration_number ?? ''}}">
                                    <div id="div-registration_number"></div>
                                 </div>
                                 <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">Location</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( $val->location == "All" )
                                                               {{ "All locations" }}
                                                            @else
                                                               {{ 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>Health fund provider details</label>
                                       <select required 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>
                                       <span class="invalid-feedback d-block"></span>
                                    </div>

                                    <div class="form-group">
                                       <label>Provider number</label>
                                       <input required type="text" name="provider_number" class="form-control provider_number " placeholder="Health fund provider number" value="">
                                       <span class="invalid-feedback d-block"></span>
                                    </div>

                                    @if( $practitionerLocation->count() >= 2 )
                                       <div class="form-group">
                                          <label>Location</label>
                                          <select required class="form-control location" id="location" name="location">
                                             <option value="">Select Location</option>
                                             @foreach($practitionerLocation as $val)
                                                <option value="{{$val->id}}">{{$val->address}}</option>
                                             @endforeach
                                             <option value="All">All</option>
                                          </select>
                                          <span class="invalid-feedback d-block"></span>
                                       </div>
                                    @endif
                                 </div>
                              </div>
                           </div>
                           <button type="submit" class="btn-fill w-100 mt-10">Update and save</button>
                        </div>
                     </form>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

<div class="dashboard-wrapper mdashboard-wrapper clientd-wrapper setting-wrapper">
   
</div>

<!-- 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 -->

<!-- open member call modal end-->
   <div class="client-follow-popup settingwaitlist customscroll">
      <div class="modal fade" id="membertelModal" 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 memberCallName"></h5>
                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true"><img src="{{asset('assets/images/close-img.png')}}" alt="" class="img-fluid" /></span>
                     </button>
                  </div>
                  <div class="modal-body p-0">
                     <div class="mt-10 mb-30">
                        <div class="mCustomScrollbar">
                           <div class="boxwhite mt-30">
                              <div class="comm-marg mb-15">
                                 <div class="titl-cancel-btn">
                                    <div class="form-group form-check mb-0">
                                       <span style="padding-right: 10px;">Mobile:</span>
                                       <a href="" id="telmemberCallPhone">
                                          <label class="form-check-label text-blue font-15" for="exampleCheck1" id="memberCallPhone">1235468790</label>
                                       </a>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
<!-- open member call modal end-->

<!--- Send SMS Message -->
   <div class="client-follow-popup login-modal settingwaitlist customscroll calenderinterval-modal customscroll clientabpopup businessdetails smsalison-modal" id="myclienthide">
      <div class="modal fade show" id="sendSmsToTeamMemberModal" tabindex="-1" role="dialog"
      aria-labelledby="exampleModalLabel13">
         <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
               <form id="sendMessageToMemberForm" action="{{route('practitioner.team.sendMessageToMember')}}" method="POST" >
                  @csrf
                  <input type="hidden" name="pract_id" id="pract_id" value="{{ $practitioner->id }}">
                  <div class="popup-marg">
                     <div class="modal-header">
                        <h5 class="modal-title text-center eagle-font smsclientname" id="exampleModalLabel13">Send SMS message</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                           <span aria-hidden="true"><img src="{{asset('assets/images/close-img.png')}}" alt="" class="img-fluid" /></span>
                        </button>
                     </div>
                     <div class="modal-body px-4 py-3">
                        <div class="">
                           <div class="mt-30 customformcontrol-form mb-0">
                              <div class="form-group custom-textarea mb-1">
                                 <input type="text" readonly="readonly" name="sendsmsmembername" id="sendsmsmembername" value="" placeholder="Enter name" class="form-control sendsmsmembername">
                              </div>
                              <div class="form-group custom-textarea mb-1">
                                 <textarea name="newmembermsg" id="newteammembermsgsendsms" rows='1' placeholder='Message' class="autoExpand"></textarea>
                              </div>
                              <div class="text-right light-grey sms_firsttext"> <span class="credit-btn-geo cursor-pointer"><img
                                 src="{{asset('assets/images/info-icon.png')}}" alt="" class="img-fluid info-icon"></span>
                              </div>
                              <div class="credit-box-geo">
                                 <div class="media">
                                    <img src="{{asset('assets/images/round-n-icon.png')}}" class="align-self-start mr-2 mCS_img_loaded"
                                    alt="...">
                                    <div class="media-body">
                                       <h5 class="mt-0 text-left">1 credit per sms. Character count for 1st message is 160
                                       and each message thereafter 153. <br />Overseas numbers incur 2 credits per sms.</h5>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                     <div class="modal-footer">
                        <div class="text-center">
                           <button type="submit" class="cursor-pointer save-btn save-btn-bg confirm-bttn mt-0 w-100">Send</button>
                        </div>
                     </div>
                  </div>
               </form>
            </div>
         </div>
      </div>
   </div>
<!--- SMS Message End-->

@endsection

@section('modals')

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

@endsection

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

@endsection

@section('import-scripts')

<script src='{{ asset("assets/js/colorPick.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='{{ asset("assets/js/croppie.js")}}'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.10/jquery.mask.js"></script>

<script type="text/javascript">

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

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

   $('.service-dd').select2({
      placeholder: "Select a services for team member",
      tokenSeparators: [",", " "],
   });

   $('.location-dd').select2({
      placeholder: "Select a locations for team member",
      tokenSeparators: [",", " "],
   });

   $('.location-access-dd').select2({
      placeholder: "Select a location that team member can view on calendar",
      tokenSeparators: [",", " "],
   });

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

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

   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.team.editProfile') }}",
            type: "POST",
            data: {id:$("#id").val(),"image":img, "_token" : "{{ csrf_token() }}" },
            success: function (data) {
               $("#remove-my-profile").removeClass("d-none");
               $("#blah").attr( "src", data.img_path );
               $("#UploadProfileImageModal").modal("hide");
               Swal.fire({
                  icon: 'success',
                  title: "Image uploaded",
                  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);
      });
   });

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

   $('.locationDiv_' + $('#location_id').val()).css('display', 'block');
   $('#location_id').on('change', function() {
      var locationId = $(this).val();
      getLocation(locationId);  
   });

   function getLocation(val)
   {
      $.ajax({
         url: "{{route('practitioner.team.getLocationTeamMember')}}",
         data:{
            'location_id': val,
            'id': $("#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="test-results-area labeltop locationDiv_'+location.id+'"><h3 class="ml-0 businesstitle">Operating Hours</h3><div class="setting-business-box mtop"><div class="label-input daysinline"><div class="row "><div class="col-lg-3 col-md-4"><div class="dayslabel"><label>Day/s</label></div></div><div class="col-lg-9 col-sm-8"><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" );
            }
         });

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

      });
   }

   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+'" '+day+' '+display+'>';
      html_data += '<h3 class="ml-0 businesstitle mb-3" style="text-transform:capitalize;">'+day+'</h3>';
      html_data += '<div class="label-input">';
      html_data += '<div class="row align-items-center">';

      html_data += '<div class="col-lg-3 col-sm-4"><label>Hours:</label></div>';

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

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

      html_data += '<div class="col-sm-6">';
      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="col-sm-1"></div>';

      html_data += '<div class="col-sm-6" style="padding-left:0px;">';
      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="col-sm-1"></div>';

      html_data += '</div>';

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

      /* Break time start */

      html_data += '<div class="row align-items-center">';

      html_data += '<div class="col-lg-3 col-sm-4"><label>Break time:</label></div>';

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

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

      html_data += '<div class="col-sm-6">';
      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="col-sm-6" style="padding-left:0px;">';
      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="col-sm-12"><a class="clearLunch cursor-pointer">Delete break time</a></div>';

      html_data += '</div>';

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

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

      return html_data;
   }

   function countString(letters)
   {
      if (letters > 160 && letters <= 313) {
         return "Character estimate "+letters+" = 2 Credits";
      } else if (letters > 313 && letters <= 466) {
         return "Character estimate "+letters+" = 3 Credits";
      } else if (letters > 466 && letters <= 619) {
         return "Character estimate "+letters+" = 4 Credits";
      } else if (letters > 619 && letters <= 772) {
         return "Character estimate "+letters+" = 5 Credits";
      } else if (letters > 772 && letters <= 925) {
         return "Character estimate "+letters+" = 6 Credits";
      } else if (letters > 925 && letters <= 1078) {
         return "Character estimate "+letters+" = 7 Credits";
      } else if (letters > 1078 && letters <= 1231) {
         return "Character estimate "+letters+" = 8 Credits";
      } else {
         return "Character estimate "+letters+" = 1 Credit";
      }
   }

   $(document).ready(function() {
      getLocation($('#location_id').val());

      $('.location-dd').on("select2:select", function (e) {
         var data = e.params.data.text;
         if( data == 'All' ) {
            $(".location-dd > option").prop("selected","selected");
            $(".location-dd").trigger("change");
         }
      });

      $('.service-dd').on("select2:select", function(e) {
         var data = e.params.data.text;
         if (data == 'All') {
            $(".service-dd > option").prop("selected", "selected");
            $(".service-dd").trigger("change");
         }
      });

      $('.location-access-dd').on("select2:select", function (e) {
         var data = e.params.data.text;
         if( data == 'All' ) {
            $(".location-access-dd > option").prop("selected","selected");
            $(".location-access-dd").trigger("change");
         }
      });

      // Remove member profile image
      $(document).on( 'click', '#remove-my-profile', function(e) {
         var id = $("#id").val();
         e.preventDefault();
         swal.fire({
            icon :'warning',
            title: 'Remove profile image?',
            text: 'This cannot be undone.',
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "Yes",
            cancelButtonText: "No",
         }).then( function( value ) {
            if(value.isConfirmed) {
               $.ajax({
                  url: "{{route('practitioner.team.removeMemberProfileImage')}}",
                  dataType: "JSON",
                  type: 'POST',
                  data: { id:id },
                  success: function( response )
                  {
                     console.log( response );
                     if( response.status == "success" ) {
                        $("#remove-my-profile").addClass("d-none");
                        $("#blah").attr( "src", "" );
                        
                        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'
                           }
                        });
                     }
                  }
               });
            }
         });
      });

      $(document).on('click', '#member-tel', function() {
         $(".memberCallName").text('Call ' + $(this).data('clientname'));
         $("#memberCallPhone").text($(this).data('clientphone'));

         if ($(this).data('clientphone') == '-' || $(this).data('clientphone') == '') {
            $('#telmemberCallPhone').parent().parent().css('display', 'none');
         } else {
            $('#telmemberCallPhone').attr('href', 'tel:' + $(this).data('clientphone'));
         }

         if (($(this).data('clientphonehome') == '-' || $(this).data('clientphonehome') == '') && ($(this).data('clientphonework') == '-' || $(this).data('clientphonework') == '') && ($(this).data('clientphone') == '-' || $(this).data('clientphone') == '')) {
            swalAlert('', '', 'No phone number added');
         } else {
            $("#membertelModal").modal('show');
         }
      });

      // send sms icon
      $(document).on('click', '#smssendtomember', function() {
         $("#sendsmsmembername").val($(this).data('name'));
         $("#sendsmsmemberid").val($(this).data('id'));
         $("#sendSmsToTeamMemberModal").modal('show');
      });

      //Start count string
      $(".sms_firsttext").text((countString($('#newteammembermsgsendsms').val().length)));
      $('#newteammembermsgsendsms').on('input', function() {
         $(".sms_firsttext").text(countString($(this).val().length));
      });

      $(document).find('.modal').on('hidden.bs.modal', function () {
         $("#newteammembermsgsendsms").val('');
         $(".sms_firsttext").text((countString($('#newteammembermsgsendsms').val().length)));
      });

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

      /* Details form validation */
      $('#myDetails').validate({
         errorClass: 'text-danger-custom',
         rules: {
            'first_name': {
               required: true
            },
            'last_name': {
               required: true
            },
            email: {
               required: true,
               email: true,
               remote: {
                  url: '{{ route("practitioner.business.checkEmailExists") }}',
                  type: "post",
                  data: {
                     email: function() {
                        return $('#myDetails :input[name="email"]').val();
                     },
                     id: function() {
                        return $('#id').val();
                     }
                  }
               }
            },
            'phone': {
               required: true,
               digits: true,
               remote: {
                  url: '{{ route("practitioner.team.checkMobileExists") }}',
                  type: "post",
                  data: {
                     mobile: function() {
                        return $('#myDetails :input[name="phone"]').val();
                     },
                     id: function() {
                        return $('#id').val();
                     }
                  }
               }
            },
            'phone_home': {
               digits: true
            },
            'phone_work': {
               digits: true
            },
            'abn': {
               minlength: 11
            },
            'profession[]': {
               required: true
            }
         },
         messages: {
            'first_name': {
               required: "The first name field is required"
            },
            'last_name': {
               required: "The last name field is required"
            },
            'email': {
               required: "The email field is required",
               email: "Invalid email field",
               remote: "The email is already used"
            },
            'phone': {
               required: "The mobile field is required",
               remote: "The mobile is already used"
            },
            'abn': {
               minlength: "The ABN must be of 11 character"
            },
            'profession[]': {
               required: "The profession field is required",
            }
         },
         errorPlacement: function(error, element) {
            if( element.attr("name") == "first_name" ) {
               error.insertAfter( "#div-first_name" );
            } else if( element.attr("name") == "phone" ) {
               error.insertAfter( "#div-phone" );
            } 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") == "abn" ) {
               error.insertAfter( "#div-abn" );
            } else {
               error.insertAfter(element);
            }
         },
         errorElement: 'span',
      });

      /* Send sms form validation */
      $('#sendMessageToMemberForm').validate({
         errorClass: 'text-danger-custom',
         rules: {
            'newmembermsg': {
               required: true
            }
         },
         messages: {
         },
         errorPlacement: function(error, element) {
            if( element.attr("name") == "first_name" ) {
               error.insertAfter( "#div-first_name" );
            } else {
               error.insertAfter(element);
            }
         },
         errorElement: 'span',
      });

      /* Send sms to member */
      $(document).on( "submit", "#sendMessageToMemberForm", function(e) {
         e.preventDefault();

         var datas = new FormData($(this)[0]);

         if( $(this).valid() ) {
            $.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");
               console.log( response );
               if( response.status == "success" ) {
                  var data = response.data;
                  
                  Swal.fire({
                     icon: response.status,
                     title: response.msg,
                     timer: 2000,
                     showClass: {
                        popup: 'animate__animated animate__fadeInDown'
                     },
                     hideClass: {
                        popup: 'animate__animated animate__fadeOutUp'
                     }
                  });

                  $('#sendSmsToTeamMemberModal').modal("hide");

                  $("#newteammembermsgsendsms").val('');
               } else {
                  Swal.fire({
                     icon: response.status,
                     title: response.msg,
                     timer: 2000,
                     showClass: {
                        popup: 'animate__animated animate__fadeInDown'
                     },
                     hideClass: {
                        popup: 'animate__animated animate__fadeOutUp'
                     }
                  });

                  $('#sendSmsToTeamMemberModal').modal("hide");

                  $("#newteammembermsgsendsms").val('');
               }
            }).fail(function (error) {
               $(".loading").removeClass("d-block");
            });
         }
      });

      /* Update details */
      $(document).on( "submit", "#myDetails", function(e) {
         e.preventDefault();
         var id = $("#id").val();

         var datas = new FormData($(this)[0]);
         datas.append('id', id);

         if( $(this).valid() ) {
            $.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" ) {
                  var data = response.data;

                  Swal.fire({
                     icon: response.status,
                     title: 'Details updated',
                     timer: 2000,
                     showClass: {
                        popup: 'animate__animated animate__fadeInDown'
                     },
                     hideClass: {
                        popup: 'animate__animated animate__fadeOutUp'
                     }
                  });

                  $("#member_professions").text( response.professionNames );
                  $("#member_name").text( data.first_name+' '+data.last_name );

                  // $("#myDetails")[0].reset();
               } else {
                  $.each(response.errors, function(key, value, i) {
                     var input = $('input[name=' + key + ']');
                     console.log( key );

                     if( key == 'role' ) {
                        var parent = input.parent().parent().parent().next('.invalid-feedback').text(value[0]);
                        input.addClass('is-invalid');
                     } else {
                        var parent = input.parent().next('.invalid-feedback').text(value[0]);
                        input.addClass('is-invalid');
                     }
                  });
               }
            }).fail(function (error) {
               $(".loading").removeClass("d-block");
            });
         }
      });

      /* Update availability */
      $("#myAvailability").submit(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);
         var id = $("#id").val();
         datas.append('selectedDays', selectedDays);
         datas.append('id', id);

         $.ajax({
            url: $(this).attr("action"),
            data: datas,
            type: 'POST',
            contentType: false, // NEEDED, DON'T OMIT THIS (requires jQuery 1.6+)
            processData: false, // NEEDED, DON'T OMIT THIS
         }).done(function(response) {
            console.log( response );
            if (response.status == "success") {
               Swal.fire({
                  icon: response.status,
                  title: 'Updated',
                  //text: response.msg,
                  showClass: {
                     popup: 'animate__animated animate__fadeInDown'
                  },
                  hideClass: {
                     popup: 'animate__animated animate__fadeOutUp'
                  }
               });
            } else {
               $(".invalid-feedback").text('');

               if( response.status == "server-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 [before, after] = key.split(".");
                     var input = $('input[name="' + before + '[]"]');
                     var span = $('input[name="' + before + '[]"]').parent().next();
                     var da = span[after];
                     da.append(value[0].replace(key, before));
                  });
               }
            }
         });
      });

      // Update services
      $('#myServices').validate({
         errorClass: 'text-danger-custom',
         rules: {
            'services[]': {
               required: true
            },
            'locations[]': {
               required: true
            }
         },
         messages: {
            'services[]': {
               required: 'This field is required'
            },
            'locations[]': {
               required: 'This field is required'
            }
         },
         errorPlacement: function(error, element) {
            if( element.attr("name") == "services[]" ) {
               error.insertAfter( "#div-services" );
            } else if( element.attr("name") == "locations[]" ) {
               error.insertAfter( "#div-locations" );
            } else {
               error.insertAfter(element);
            }
         },
         errorElement: 'span',
      });

      $("#myServices").submit(function(e) {
         e.preventDefault();
         var datas = new FormData($(this)[0]);

         if( $(this).valid() ) {
            $.ajax({
               url: $(this).attr("action"),
               data: datas,
               type: 'POST',
               contentType: false,
               processData: false,
            }).done(function(response) {
               console.log( response );
               if (response.status == "success") {
                  Swal.fire({
                     icon: response.status,
                     title: 'Updated',
                     showClass: {
                        popup: 'animate__animated animate__fadeInDown'
                     },
                     hideClass: {
                        popup: 'animate__animated animate__fadeOutUp'
                     }
                  });

                  setTimeout(function() {
                     location.reload();
                  }, 2500);
                  
               } else {
                  $(".invalid-feedback").text('');

                  if( response.status == "server-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 [before, after] = key.split(".");
                        var input = $('input[name="' + before + '[]"]');
                        var span = $('input[name="' + before + '[]"]').parent().next();
                        var da = span[after];
                        da.append(value[0].replace(key, before));
                     });
                  }
               }
            });
         }
      });

      $('#memberPermissions').validate({
         errorClass: 'text-danger-custom',
         ignore:'',
         rules: {
            "locationCal[]": {
               required: function(element) {
                  return $('input[name="allow_to_view_calendar_locations"]:checked').val() == '1';
               }
            }
         },
         messages: {
            'locationCal[]': {
               required: "The location field is required"
            }},
         errorPlacement: function(error, element) {
            if( element.attr("name") == "first_name" ) {
               error.insertAfter( "#div-first_name" );
            } else if( element.attr("name") == "locationCal[]" ) {
               error.insertAfter( "#div-locationCal" );
            } else {
               error.insertAfter(element);
            }
         },
         errorElement: 'span',
      });

      /* Update member permissions */
      $("#memberPermissions").submit(function(e) {
         e.preventDefault();

         var datas = new FormData($(this)[0]);
         var id = $("#id").val();
         datas.append('id', id);

         if( $(this).valid() ) {
            $.ajax({
               url: $(this).attr("action"),
               data: datas,
               type: 'POST',
               contentType: false,
               processData: false,
            }).done(function(response) {
               if (response.status == "success") {
                  Swal.fire({
                     icon: response.status,
                     title: response.msg,
                     showClass: {
                        popup: 'animate__animated animate__fadeInDown'
                     },
                     hideClass: {
                        popup: 'animate__animated animate__fadeOutUp'
                     }
                  });
               } 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 + '[]"]').parent().next();
                     var da = span[after];
                     da.append(value[0].replace(key, before));
                  });
               }
            });
         }
      });

      /* Association form validation */
      $('#assoc_provider_form').validate({
         errorClass: 'text-danger-custom',
         rules: {
            'association[]': {
               required: true
            },
            'healthFunds': {
               required: function() {
                  return $(".is_add_provider_number").val() == "1";
               }
            },
            'provider_number': {
               required: function() {
                  return $(".is_add_provider_number").val() == "1";
               }
            },
            'provider_location': {
               required: function() {
                  return $(".is_add_provider_number").val() == "1";
               }
            }
         },
         messages: {
         },
         errorPlacement: function(error, element) {
            if( element.attr("name") == "association[]" ) {
               error.insertAfter( "#div-association" );
            } else if( element.attr("name") == "phone" ) {
               error.insertAfter( "#div-phone" );
            } else if( element.attr("name") == "profession[]" ) {
               error.insertAfter( "#div-profession" );
            } else if( element.attr("name") == "abn" ) {
               error.insertAfter( "#div-abn" );
            } else {
               error.insertAfter(element);
            }
         },
         errorElement: 'span',
      });

      // Save health fund provider
      $(document).on( 'submit', '#assoc_provider_form', function(e) {

         e.preventDefault();
         var id = $("#id").val();

         var datas = new FormData($(this)[0]);
         datas.append('practitioner_id', id);
         datas.append('save_association', 1);

         if( $(this).valid() ) {
            $(".loading").show();
            $.ajax({
               url: "{{ route('practitioners.setupAccount.store.providerNumbers') }}",
               data: datas,
               type: 'POST',
               processData: false,
               contentType: false
            }).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.');
               });
            }
         });
      });

      $(".access-some-calendar-info-icon").hover(function() {
         $(".access-some-calendar-info-box").toggle();
      });

      // show location if allow some calendar permission if selected yes
      $(document).on( 'change', 'input[type=radio][name=allow_to_view_calendar_locations]', function(e) {

         e.preventDefault();
         var val = $(this).val();

         if( val == '1' ) {
            $("#location_access").removeClass('d-none');
         } else {
            $("#location_access").addClass('d-none');
         }
      });

      // other_location_access
      $(document).on('change', 'input[type=radio][name=view_all_calendars]', function(e) {
         e.preventDefault();
         var val = $(this).val();

         if (val == '1') {
            $("#other_location_access").addClass('d-none');
         } else {
            $("#other_location_access").removeClass('d-none');
         }
      });
   });
</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: [",", " "],
   });

   $("#timezone").select2({
      placeholder: "Select a timezone for team member"
   });

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

   $(document).on( "change", "#selectCalendar", function(e) {
      e.preventDefault();
      var location = $(this).val();

      $.ajax({
         type: "POST",
         url: "{{ route('practitioner.my_team.getServiceByLocations') }}",
         data: { location:location },
         success: function( response ) {
            var service_data = response.data;
            $("#selectServices").empty();

            if( service_data.length > 0 ) {
               for( var i = 0; i < service_data.length; i++ ) {
                  $("#selectServices").append("<option value='"+service_data[i].id+"' data-cost='"+service_data[i].fee+"' data-location='"+service_data[i].location+"' data-duration='"+service_data[i].duration+"' >"+service_data[i].appointment_type+"</option>");
               }

               $("#selectServices").append("<option value='all' data-cost='' data-location='' data-duration='' >All</option>");
            }
         }
      });
   });

</script>
@endsection