@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.business.my_team') }}"><img src="{{asset('assets/images/My Appointments back icon.svg')}}" alt="" class="img-flude" style="min-width: 40px"></a>
      <a class="navbar-brand p-0 " href="{{ route('practitioner.appointments.index') }}"><img src="{{asset('assets/images/MA Icon Colour.svg')}}" alt="" class="img-flude" style="min-width: 43px"></a>
      <h1 class="page-title eagle-font font-400 "><span class="arca-font"> My </span> Team member</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 }}">
<input type="hidden" name="role" id="role" value="{{ $practitioner->role }}">

<div class="dashboard-wrapper mdashboard-wrapper clientd-wrapper setting-wrapper">
   <div class="row justify-content-center position-relative">
      <div class="col-xl-8 col-lg-10 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">
                                    <div id="personalInformation">
                                       <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="javascript:void(0)" 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 class="">
                                    <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">
                                       <label>Email address</label>
                                       <input name="email" id="email" type="text" 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="">
                                       <div id="div-phone_home" 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>
                              </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"> @if($practitioner->role == 'admin') Permissions & location @else Permissions @endif
                      <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')}}"> -->
                     <form id="myServices" action="{{route('practitioner.team.editPermissionTeamMember')}}">

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

                                 @if($practitioner->role == 'admin')
                                 <h4 class="text-blue font-15 font-bold mb-3">Location/s</h4>
                                 <p class="font-15 text-blue comm-psapce mt-3">Location/s your administrator will manage <span class="required_span">*</span></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-12 col-sm-6">
                                                <div class="form-group brdrfull mb-0 t-0 manual-select">
                                                   
                                                   <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>
                                 @endif

                                 <!-- USER PERMISSIONS -->
                                 <h4 class="text-blue font-15 font-bold mb-3">User permissions</h4>

                                 <div class="row detail-form align-items-center">
                                    <div class="col-lg-8 col-sm-12">
                                       <label>Allow user to adjust settings</label>
                                    </div>
                                    <div class="col-lg-4 col-sm-12">
                                       <div class="single-tittle mt-0">
                                          <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 align-items-center">
                                    <div class="col-lg-8 col-sm-12">
                                       <label>Allow user to add/edit users</label>
                                    </div>
                                    <div class="col-lg-4 col-sm-12">
                                       <div class="single-tittle mt-0">
                                          <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-lg-8 col-sm-12 pr-0">
                                       <label>Allow user to export client lists </label>
                                    </div>
                                    <div class="col-lg-4 col-sm-12">
                                       <div class="single-tittle mt-0">
                                          <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">
                                    <div class="col-lg-8 col-sm-12 pr-0">
                                       <label>Allow user to access takings report? </label>
                                    </div>
                                    <div class="col-lg-4 col-sm-12">
                                       <div class="single-tittle mt-0">
                                          <ul class="age-title p-0 text-right">
                                             <li>
                                                <input type="radio" id="{{$unique = uniqid()}}" name="view_takings" value="1" @if( isset( $permissions ) && $permissions->view_takings == 1 ) checked @endif >
                                                <label for="{{$unique}}">Yes</label>
                                             </li>
                                             <li class="m-0">
                                                <input type="radio" id="{{$unique = uniqid()}}" name="view_takings" value="0" @if( isset( $permissions ) && $permissions->view_takings == 0 ) checked @endif>
                                                <label for="{{$unique}}">No</label>
                                             </li>
                                          </ul>
                                       </div>
                                    </div>
                                 </div>

                                 <!-- INVOICES SETTING -->
                                 <h4 class="text-blue font-15 font-bold mb-3">Adjusting Invoices</h4>
                                 <div class="row detail-form align-items-center">
                                    <div class="col-lg-8 col-sm-12">
                                       <label>Allow user to edit or adjust paid invoices</label>
                                    </div>
                                    <div class="col-lg-4 col-sm-12">
                                       <div class="single-tittle mt-0">
                                          <ul class="age-title p-0 text-right">
                                             <li>
                                                <input type="radio" id="{{$unique = uniqid()}}" name="edit_invoice" value="1" @if( isset( $permissions ) && $permissions->edit_invoice == 1 ) checked @endif>
                                                <label for="{{$unique}}">Yes</label>
                                             </li>
                                             <li class="m-0">
                                                <input type="radio" id="{{$unique = uniqid()}}" name="edit_invoice" value="0" @if( isset( $permissions ) && $permissions->edit_invoice == 0 ) checked @endif>
                                                <label for="{{$unique}}">No</label>
                                             </li>
                                          </ul>
                                       </div>
                                    </div>
                                 </div>

                                 <!-- CLIENTS SETTING -->
                                 <h4 class="text-blue font-15 font-bold mb-3">Clients</h4>
                                 @if($practitioner->role == 'admin')
                                 <p class="font-15 text-blue comm-psapce mt-3">Administrators will have access to all client's general details including contact information but will not have access to health history, prescriptions, test results or appointment notes unless you allow it.</p>
                                 @else

                                 <p class="font-15 text-blue comm-psapce mt-3">Full access allows instructors to view all client information, including medical details such as intake forms, test results, documents, and treatment notes.
                                    <br>
                                    Partial access limits visibility to contact details, invoices, appointments, and billing information.
                                 </p>
                                 @endif

                                 <div class="row detail-form label-input align-items-center">
                                    <div class="col-lg-8 col-sm-12 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-lg-4 col-sm-12">
                                       <div class="single-tittle mt-0">
                                          <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>

                                 <!-- ORDERS SETTING -->
                                 <h4 class="text-blue font-15 font-bold mb-3">Orders</h4>

                                 @if($practitioner->role == 'admin')
                                 <p class="font-15 text-blue comm-psapce mt-3">Administrators will need to be granted access to view and process client orders.</p>
                                 @else
                                 <p class="font-15 text-blue comm-psapce mt-3">Instructors will need to be granted access to view and process client orders.</p>
                                 @endif

                                 <div class="row detail-form label-input align-items-center">
                                    <div class="col-lg-8 col-sm-12 pr-0">
                                       <label>Allow access to client orders</label>
                                    </div>
                                    <div class="col-lg-4 col-sm-12">
                                       <div class="single-tittle mt-0">
                                          <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>

                                 <!-- COMMUNICATION SETTING -->
                                 <h4 class="text-blue font-15 font-bold mb-3">Communication</h4>
                                 @if($practitioner->role == 'admin')
                                 <p class="font-15 text-blue comm-psapce mt-3">Administrators will need to have access granted to view and reply to correspondence in the My Communication tab.</p>
                                 @endif

                                 <div class="row detail-form label-input align-items-center">
                                    <div class="col-lg-8 col-sm-12 pr-0">
                                       @if($practitioner->role == 'admin')
                                          <label>Allow access to all communication</label>
                                       @else
                                          <label>Allow access to all incoming and outgoing client communication</label>
                                       @endif
                                    </div>
                                    <div class="col-lg-4 col-sm-12">
                                       <div class="single-tittle mt-0">
                                          <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>
                              </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">
                              <div class="col-md-5 pr-0">
                                 <label>Allow user to view 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 user to view and process order</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 user to access 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>
         </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"
   });

   $('.location-dd').select2({
      placeholder: "Select location/s",
      tokenSeparators: [",", " "],
   });

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

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

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

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

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

   //SMS character count new js start
	function getAdjustedLengthAndUnicodeStatus(message) {
		const specialCharsRegex = /[|^€{}\[\]~\\]/g;
		const isUnicode = /[^\u0000-\u007F]/.test(message);
		const specialMatches = message.match(specialCharsRegex);
		const specialCharCount = specialMatches ? specialMatches.length : 0;
		const visualLength = getGraphemeLength(message);
		const adjustedLength = isUnicode ? visualLength : visualLength + specialCharCount;
		//const adjustedLength = message.length + specialCharCount;
		return { adjustedLength, isUnicode };
	}

	function getGraphemeLength(text) {
		const segmenter = new Intl.Segmenter(undefined, { granularity: 'grapheme' });
		const segments = [...segmenter.segment(text)];
		return segments.length;
	}

	const gsmSegments = [
		{ min: 1, max: 160, sms: 1 },
		{ min: 161, max: 306, sms: 2 },
		{ min: 307, max: 459, sms: 3 },
		{ min: 460, max: 612, sms: 4 },
		{ min: 613, max: 765, sms: 5 },
		{ min: 766, max: 918, sms: 6 },
		{ min: 919, max: 1071, sms: 7 },
		{ min: 1072, max: 1224, sms: 8 },
		{ min: 1225, max: 1377, sms: 9 },
		{ min: 1378, max: 1530, sms: 10 },
		{ min: 1531, max: 1683, sms: 11 },
		{ min: 1684, max: 1836, sms: 12 },
		{ min: 1837, max: 1989, sms: 13 },
		{ min: 1990, max: 2142, sms: 14 },
		{ min: 2143, max: 2295, sms: 15 },
		{ min: 2296, max: 2448, sms: 16 },
		{ min: 2449, max: 2601, sms: 17 },
		{ min: 2602, max: 2754, sms: 18 },
	];

	const unicodeSegments = [
		{ min: 1, max: 70, sms: 1 },
		{ min: 71, max: 134, sms: 2 },
		{ min: 135, max: 201, sms: 3 },
		{ min: 202, max: 268, sms: 4 },
		{ min: 269, max: 335, sms: 5 },
		{ min: 336, max: 402, sms: 6 },
		{ min: 403, max: 469, sms: 7 },
		{ min: 470, max: 536, sms: 8 },
	];

	function countString(message) {
		const { adjustedLength, isUnicode } = getAdjustedLengthAndUnicodeStatus(message);

		// Use appropriate segment array
		const segments = isUnicode ? unicodeSegments : gsmSegments;

		// Check exact match first
		for (const seg of segments) {
			if (adjustedLength >= seg.min && adjustedLength <= seg.max) {
				return `Character estimate ${adjustedLength} = ${seg.sms} Credit${seg.sms > 1 ? 's' : ''}`;
			}
		}

		// Fallback for over-limit messages
		const last = segments[segments.length - 1];
		const segmentSize = last.max - last.min + 1;
		const extraChars = adjustedLength - last.max;
		const extraCredits = Math.ceil(extraChars / segmentSize);
		const totalCredits = last.sms + extraCredits;

		return `Character estimate ${adjustedLength} = ${totalCredits} Credits`;
	}
	//SMS character count new js end

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

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

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

   $(document).ready(function() {

      var role = $('#role').val();
      if (role === 'instructor') {
         // Find labels for inputs with name="access_all_client_files"
         $('input[name="access_all_client_files"]').each(function () {
            const label = $('label[for="' + $(this).attr('id') + '"]');
            if ($(this).val() == "1") {
               label.text('Full');
            } else if ($(this).val() == "0") {
               label.text('Partial');
            }
         });
      }

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

      $('.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())));
      $('#newteammembermsgsendsms').on('input', function() {
         $(".sms_firsttext").text(countString($(this).val()));
      });

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

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

      /* Details form validation */
      $('#myDetails').validate({
         errorClass: 'text-danger-custom',
         rules: {
            'first_name': {
               required: true
            },
            'last_name': {
               required: true
            },
            '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
            },
            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();
                     }
                  }
               }
            },
         },
         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"
            }
         },
         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") == "profession[]" ) {
               error.insertAfter( "#div-profession" );
            } else if( element.attr("name") == "abn" ) {
               error.insertAfter( "#div-abn" );
            } else {
               error.insertAfter(element);
            }
         },
         errorElement: 'span',
      });

      /* 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" ) {
                  Swal.fire({
                  icon: response.status,
                  title: response.msg,
                  timer: 2000,
                  showClass: {
                     popup: 'animate__animated animate__fadeInDown'
                  },
                  hideClass: {
                     popup: 'animate__animated animate__fadeOutUp'
                  }
               });
                  $("#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");
            });
         }
      });

      /* 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: 4000,
                     showClass: {
                        popup: 'animate__animated animate__fadeInDown'
                     },
                     hideClass: {
                        popup: 'animate__animated animate__fadeOutUp'
                     }
                  });

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

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

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

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

      // Update services
      $('#myServices').validate({
         errorClass: 'text-danger-custom',
         rules: {
            'locations[]': {
               required: true
            }
         },
         messages: {
            '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));
                     });
                  }
               }
            });
         }
      });
   });
</script>

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

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

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

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

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

</script>
@endsection