@extends('front.practitioner.import.template.import')
@section('content')
<link href="{{ asset('assets/css/croppie.min.css') }}" rel='stylesheet' />

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

            <!-- <img src="{{asset('assets/images/MA_Logo_long-bg-transparent.svg')}}" alt="" class="img-flude logo" /> <span class="eagle-font">Sent via</span> -->
         </a>

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

<!-- <h3 class="page-title eagle-font font-400 text-center">User Information</h3> -->
<form method="POST" name="setupAccountForm" id="setupAccountForm" action="{{route('practitioner.business.storeAccount')}}">
   @csrf
   <input type="hidden" name="practiitoner_id" id="practitioner_id" value="{{ $practitioner->id }}">
   <input type="hidden" id="user_role" name="role" value="{{ $practitioner->role }}">
   <div class="dashboard-wrapper mdashboard-wrapper clientd-wrapper setting-wrapper">
      <h1 class="page-title eagle-font font-400 text-center">User Information</h1>
      <div class="booking-confirmation user-information">
         <div class="boxwhite padd-sm" id="setup-account-box">
            <div class="card">
               <div class="label-input">
                  <div class="row align-items-center">
                     <div class="col-lg-4 col-md-6">
                        <label>Title</label>
                     </div>
                     <div class="col-lg-2 col-md-3 col-sm-3 col-5">
                        <div class="customdroppdown gray-brdr line-dropdown teamMemberTitle">
                           <div class="form-group border-0 marg-bttm online-dropdown select-dropdown avalable-drop hide-first-child">
                              <select id="name_prefix" name="name_prefix" class="form-control selectboxli">
                                 <option hidden>Title </option>
                                 <option @if( $practitioner->name_prefix == 'Mr' ) Selected @endif value="Mr">Mr</option>
                                 <option @if( $practitioner->name_prefix == 'Mrs' ) Selected @endif value="Mrs">Mrs</option>
                                 <option @if( $practitioner->name_prefix == 'Ms' ) Selected @endif value="Ms">Ms</option>
                                 <option @if( $practitioner->name_prefix == 'Miss' ) Selected @endif value="Miss">Miss</option>
                                 <option @if( $practitioner->name_prefix == 'Master' ) Selected @endif value="Master">Master</option>
                                 <option @if( $practitioner->name_prefix == 'Doctor' ) Selected @endif value="Doctor">Doctor</option>
                                 <option @if( $practitioner->name_prefix == 'None' ) Selected @endif value="None">None</option>
                                 <option @if( $practitioner->name_prefix == 'Other' ) Selected @endif value="Other">Other</option>
                              </select>
                              <span class="invalid-feedback d-block"></span>
                           </div>
                        </div>
                        {{--
                        <div class="customdroppdown gray-brdr line-dropdown">
                           <div class="form-group marg-bttm online-dropdown select-dropdown avalable-drop border-0">
                              <select name="name_prefix" id="mounth500" class="form-control single-select2">
                                 <option @if( $practitioner->name_prefix == 'none' ) Selected @endif value="none" >None</option>
                                 <option value="Mr" @if( $practitioner->name_prefix == 'Mr' ) Selected @endif>Mr</option>
                                 <option value="Mrs" @if( $practitioner->name_prefix == 'Mrs' ) Selected @endif>Mrs</option>
                                 <option value="Ms" @if( $practitioner->name_prefix == 'Ms' ) Selected @endif>Ms</option>
                                 <option value="Miss" @if( $practitioner->name_prefix == 'Miss' ) Selected @endif>Miss</option>
                                 <option value="Master" @if( $practitioner->name_prefix == 'Master' ) Selected @endif>Master</option>
                                 <option value="Doctor" @if( $practitioner->name_prefix == 'Doctor' ) Selected @endif>Doctor</option>
                                 <option value="Title" @if( $practitioner->name_prefix == 'Title' ) Selected @endif>Title</option>
                              </select>
                           </div>
                        </div>
                        --}}
                     </div>
                  </div>
               </div>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   </div>
   </div>
   </div>
   </div>
</form>

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

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

@endsection

@section('modals')

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

@endsection

@section('css')
<link rel="stylesheet" href="{{ asset('assets/css/default-new.css')}}">
<link rel="stylesheet" href="{{ asset('assets/css/team.css')}}">
<style>
   /* .text-danger-custom{color: #dc3545!important;}
   .customswitch-area .custom-control {float: right;right: 20px;top: 5px;}
   .custom-colordrop select::-ms-expand {display: none;}
   .custom-colordrop select {-webkit-appearance: none;appearance: none;}
   .custom-colordrop select option {border-radius: 100px;}
   .custom-colordrop select {position: relative;left: 10px;}
   .custom-colordrop .select-hidden {visibility: inherit !important;}
   .hide {display: none !important;}
   .selectedInput {background: none;color: red !important;}
   .productAdd .select2-container {width: 100px !important;}
   .pac-container {z-index: 10000 !important;} */
   /* hidden updown arrow if type number */
   /* Chrome, Safari, Edge, Opera */
   .text-danger-custom {
      color: #dc3545 !important;
   }

   input::-webkit-outer-spin-button,
   input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
   }

   /* Firefox */
   input[type=number] {
      -moz-appearance: textfield;
   }

   /*end hidden updown arrow if type number */
   @media (max-width: 425px) {
      .page-content {
         padding: 45px 15px 45px 15px;
      }
   }

   .toogle-area h2 {
      font-family: "europa", sans-serif;
   }

   .select2-container--default .select2-results>.select2-results__options {
      max-height: initial !important;
   }

   .label-input .form-group {
      top: 0;
   }

   .tradingdays ul li {
      display: block !important;
      width: 150px !important;
   }

   .booking-confirmation .select2-selection__arrow:after {
      display: none;
   }

   .booking-confirmation .select2-container .select2-selection--single {
      background-color: white !important;
   }

   .select2-search--dropdown {
      display: none !important;
   }

   h1 {
      font-size: 25px !important;
   }

   .consent-treatment-radio-main .custom-radio .custom-control-label::before {
      border: 1px solid #24303f;
   }

   .consent-treatment-radio-main .custom-radio .custom-control-input:checked~.custom-control-label::before {
      background-color: #24303f;
      border: 1px solid #24303f;
   }
</style>

@endsection

@section('import-scripts')

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

<script type="text/javascript">

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

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

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

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

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

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

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

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

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

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

         $(document).click(function () {
            $styledSelect.removeClass('active');
            $list.hide();
         });
      });
   }
   
   function ValidateDOB() {
      var lblError = document.getElementById("lblError");

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

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

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

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

   var $uploadProfileCrop,
      tempProfileFilename,
      rawProfileImg,
      imageProfileId;

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

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

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

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

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

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

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

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

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

   $("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('12:00 PM');
      day.find("input[name*=" + flag + "break_end_time]").val('1:00 PM');
   }

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

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

   // for admin
   var loadFileForAdmin = function(event) {
      var reader = new FileReader();
      reader.onload = function() {
         var output = document.getElementById('outputForAdmin');
         output.src = reader.result;
         $('#outputForAdmin').css({
            "background-color": "#ffffff"
         });
      };
      reader.readAsDataURL(event.target.files[0]);
      $('#outputForAdmin')[0].files[0].name;

   };

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

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

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

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

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

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

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

            if (element.attr("name") == "first_name") {
               error.insertAfter("#div-first_name");
            } else if (element.attr("name") == "last_name") {
               error.insertAfter("#div-last_name");
            } else if (element.attr("name") == "mobile") {
               error.insertAfter("#div-mobile");
            } else if (element.attr("name") == "phone_home") {
               error.insertAfter("#div-phone_home");
            } else if (element.attr("name") == "password") {
               error.insertAfter("#div-password");
            } else if (element.attr("name") == "confirm_password") {
               error.insertAfter("#div-confirm_password");
            } else if (element.attr("name") == "privacy_and_terms") {
               error.insertAfter("#div-privacy_and_terms");
            } else {
               error.insertAfter(element);
            }
         },
         errorElement: 'span',
      });

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

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

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

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

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

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

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

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

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

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

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

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

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

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

         $.ajax({
            url: "{{route('practitioner.deleteAssociationProviderNumbers')}}",
            data: datas,
            contentType: false,
            processData: false,
            method: 'POST',
            beforeSend: function(msg) {
               $(".loading").addClass("d-block");
            },
         }).done(function(response) {
            $('.tbl_' + id).remove();
            $(".loading").removeClass("d-block");
            Swal.fire({
               icon: response.status,
               title: response.msg,
               showClass: {
                  popup: 'animate__animated animate__fadeInDown'
               },
               hideClass: {
                  popup: 'animate__animated animate__fadeOutUp'
               }
            });
         }).fail(function(error) {
            $(".loading").hide();
            alert('something went wrong error.');
         });
      });

      $(document).on("submit", "#setupAccountForm", function(e) {
         e.preventDefault();
         var selectedDays = new Array();
         console.log(selectedDays);

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

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

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

         if ($(this).parsley().isValid()) {
            $.ajax({
               url: $(this).attr("action"),
               data: datas,
               type: 'POST',
               processData: false,
               contentType: false,
               beforeSend: function(msg) {
                  $(".loading").addClass("d-block");
               },
            }).done(function(response) {
               $(".loading").removeClass("d-block");
               if (response.status == "success") {
                  $("#invite-message-area").text(response.msg);
                  $("#invite-sendmodal").modal("show");

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

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

                  $("#setupAccountForm")[0].reset();
               } else {
                  /*$.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');
                     }
                  });*/

                  $(".invalid-feedback").text('');
                  //console.log( response.errors );

                  $.each(response.errors, function(key, value, i) {
                     //console.log('key',key);
                     //console.log('i',i);
                     var [before, after] = key.split(".");
                     if (after) {
                        var input = $('input[name="' + before + '[]"]');
                        var span = $('input[name="' + before + '[]"]').parent().next();
                        var da = span[after];
                        da.append(value[0].replace(key, before));
                     } else {
                        var input = $('input[name=' + key + ']');
                        var parent = input.next('.invalid-feedback').text(value[0]);
                        input.addClass('is-invalid');
                        var select = $('select[name=' + key + ']');
                        var parent = select.next('.invalid-feedback').text(value[0]);
                        select.addClass('is-invalid');
                     }
                  });

                  console.log('response',response);

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

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

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