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

@section('css')
<link rel="stylesheet" href="{{ asset('assets/css/reminder.setting.css') }}">
<style></style>
@endsection

@section('content')
<div class="container-fluid">
  <div class="row">
    <nav class="navbar navbar-light bg-light invoice-page-menu notes-menu">
      <a class="p-0" href="{{ (isset($countTemplate) && $countTemplate <= '1') ? route('practitioner.settings.index') : route('practitioner.settings.reminders') }}">
        <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>reminders settings</h1>

      @if(isset($countTemplate) && $countTemplate != '0')
      @endif

      <a href="{{ route('practitioner.settings.reminder.new') }}" class="btn btn-fill mb-3 ml-auto my-auto">Create new</a>
    </nav>
    <div class="brdr-bttm w-100"></div>
  </div>
</div>

<div class="col-12">
  <div class="row align-items-end booking-confirmation">
    @if($reminderStep == 0)
    <button id="redirectToSetupWizard" data-step="3" class="btn btn-unfill mb-3">Next step</button>
    @endif
  </div>
</div>

<form action="{{route('practitioner.settings.addReminder')}}" id="addReminder" class="addreminder">
  @if(isset($practitionerReminders))
  @if(isset($isDublicate) && $isDublicate == "1")
  <input type="hidden" name="isNew" id="isNew" value="1">
  @else
  <input type="hidden" name="isNew" id="isNew" value="0">
  <input type="hidden" name="template_id" id="template_id" value="{{$practitionerReminders->id ?? ''}}">
  @endif
  @else
  <input type="hidden" name="isNew" id="isNew" value="1">
  @endif
  @csrf

  <div class="dashboard-wrapper mdashboard-wrapper clientd-wrapper setting-wrapper welcome_email_content" id="myRemindersSettingOuterBox">
    <div class="reminder-div client-follow-popup videoconsultationmodal remindersModal businessdetails">
      <div class="">
        <div class="boxwhite padd-sm mt-20">
          <div class="card p-3">
            <div class="test-results-area labeltop mt-3">

              <div class="label-input">
                <div class="row align-items-center justify-content-center">
                  <div class="col-lg-12 ">
                    <h3 class="ml-0 mr-0 pb-4">Reminder template name</h3>
                    <label class="font-15 mb-3">Set up a single reminder or create unlimited customised templates and link them to specific services. Name your reminder to help identify which template your services belong to.</label>
                    <div class="form-group brdrfull">
                      <input required type="text" class="form-control" name="template_name" value="@isset($practitionerReminders){{trim($practitionerReminders->template_name)}}@endisset" id="template_name" placeholder="Add a template name for this reminder">
                      <div id="div-template_name"></div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="label-input multi">
                <div class="row align-items-center justify-content-center">
                  <div class="col-lg-12 ">
                    <h3 class="ml-0 mr-0 pb-4">Services assigned to this reminder</h3>
                    <div class="form-group brdrfull select2-multiple-autoselect">
                      <select required class="form-control text-capitalize" id="servicesassignednotetemplate" name="servicesassignednotetemplate[]" multiple="multiple">
                        <optgroup label="Select all services">
                          @foreach ($practitonerAppointmentTypes as $type)
                          <option value="{{ $type->id }}" @if(isset($type->used) && $type->used == 1) selected @endif>{{ $type->appointment_type }}</option>
                          @endforeach
                        </optgroup>
                      </select>
                      <div id="div-servicesassignednotetemplate"></div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="label-input timing timingBox">
                <div class="row align-items-center justify-content-center">
                  <div class="col-lg-12 ">
                    <h3 class="ml-0 mr-0 pb-4">Timing</h3>
                    <div class="form-group brdrfull">
                      <label class="font-15 mb-3">When would you like to send your reminder?</label>
                      <select name="send_first_reminder_time" id="send_first_reminder_time" class="form-control js-example-basic-single-add send_first_reminder_time">
                        <option value="12" @if(isset($practitionerReminders->send_first_reminder_time) && $practitionerReminders->send_first_reminder_time == 12) selected @endif>12 hours before</option>
                        <option value="24" @if(isset($practitionerReminders->send_first_reminder_time) && $practitionerReminders->send_first_reminder_time == 24) selected @endif @if(!isset($practitionerReminders->send_first_reminder_time)) selected @endif>24 hours before</option>
                        <option value="48" @if(isset($practitionerReminders->send_first_reminder_time) && $practitionerReminders->send_first_reminder_time == 48) selected @endif>48 hours before</option>
                        <option value="72" @if(isset($practitionerReminders->send_first_reminder_time) && $practitionerReminders->send_first_reminder_time == 72) selected @endif>72 hours before</option>
                        <option value="168" @if(isset($practitionerReminders->send_first_reminder_time) && $practitionerReminders->send_first_reminder_time == 168) selected @endif>7 days before</option>
                      </select>
                    </div>
                  </div>
                </div>
              </div>

              <div id="send_reminder_messaging_first" class="label-input">
                <h3 class="ml-0 mr-0 pb-4">Messaging</h3>
                <div class="row">
                  <div class="col-sm-6">
                    <div class="row">
                      <div class="col-md-7 col-6">
                        <div class="toogle-area mb-0">
                          <p class="font-15">SMS</p>
                        </div>
                      </div>

                      <div class="col-md-4 col-6 booking_confirmation_sub">
                        <div class="switch-custom">
                          <div class="custom-control custom-switch">
                            <input type="checkbox" value="1" name="send_reminder_via_sms" class="custom-control-input" id="send_reminder_via_sms" @if(isset($practitionerReminders->send_first_reminder_via) && ($practitionerReminders->send_first_reminder_via == 1 || $practitionerReminders->send_first_reminder_via == 3) && $practitionerReminders->send_appt_reminder != 0) checked @endif @if(!isset($practitionerReminders)) checked @endif>
                            <label class="custom-control-label" for="send_reminder_via_sms"></label>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-sm-6 border-left">
                    <div class="row">
                      <div class="col-md-7 col-6">
                        <div class="toogle-area mb-0">
                          <p class=" font-15">Email</p>
                        </div>
                      </div>
                      <div class="col-md-4 col-6 booking_confirmation_sub">
                        <div class="switch-custom">
                          <div class="custom-control custom-switch">
                            <input type="checkbox" value="1" name="send_reminder_via_email" class="custom-control-input" id="send_reminder_via_email" @if(isset($practitionerReminders->send_first_reminder_via) && ($practitionerReminders->send_first_reminder_via == 2 || $practitionerReminders->send_first_reminder_via == 3) && $practitionerReminders->send_appt_reminder != 0) checked @endif>
                            <label class="custom-control-label" for="send_reminder_via_email"></label>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div id="top-message-part-first" class="">
                <hr>
                <h3 class="ml-0 mr-0 pb-3">Message personalisation</h3>
                <div class="label-input mb-0">
                  <div class="row">
                    <div class="col-lg-12 col-md-12 mt-3">
                      <label class="font-15 mb-4">We have provided you with suggested wording which can be edited as required. Use the personalisation drop down to insert automatically populated fields in your message.</label>
                    </div>
                  </div>
                </div>
              </div>

              <div class="label-input d-none">
                <div class="row">
                  <div class="col-lg-5 col-md-6">
                    <label>Allow 2 way SMS <span class="send-client-btn-geo allow_2_way_sms_btn cursor-pointer"><img src='{{asset("assets/images/info-icon.png")}}' alt="" class="img-fluid info-icon"></span></label>
                    <div class="send-client-box-geo allow_2_way_sms_box">
                      <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">2 way SMS allows patients to respond to sent messages. There is no charge to receive an inbound SMS</h5>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-lg-7 col-md-6">
                    <div class="row">
                      <div class="col-lg-6 col-md-6">
                        <ul class="age-title p-0 listingli mb-0">
                          <li>
                            <input checked="true" type="radio" id="way1" name="allow_2way_sms" value="1" @if(isset($practitionerReminders->allow_2way_sms) && $practitionerReminders->allow_2way_sms == 1) checked @endif>
                            <label for="way1">Yes</label>
                          </li>
                        </ul>
                      </div>
                      <div class="col-lg-6 col-md-6">
                        <ul class="age-title p-0 listingli mb-0">
                          <li>
                            <input type="radio" id="way2" name="allow_2way_sms" value="0" @if(isset($practitionerReminders->allow_2way_sms) && $practitionerReminders->allow_2way_sms == 0) checked @endif>
                            <label for="way2">No</label>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div id="email-part-first" class="test">
                <div class="label-input send_first_email_subject main-div mb-4">
                  <div class="row justify-content-center">
                    <div class="col-lg-12 ">
                      <h6 class="ml-0 mr-0 pb-4 cutomh6">Email subject line</h6>
                      <div class="form-group brdrfull marg-bttm online-dropdown select-dropdown avalable-drop hide-first-child">
                        <select class="form-control selprepo js-example-basic-single" style="width:100%" name="pre2" id="pre2">
                          <option selected disabled value="">Insert Personalisation</option>
                          <option value="<Client name>">Client name</option>
                          <option value="<Client surname>">Client surname</option>
                          <option value="<Preferred name>">Preferred name</option>
                          <option value="<Appt date & time>">Appt date & time</option>
                          <option value="<Service provider name>">Service provider name</option>
                          <option value="<Service name>">Service name</option>
                        </select>
                        <textarea name="send_first_email_subject" id="send_first_email_subject" type="text" class=" text-left append-text autosizetextaria w-100" style="height: 0px;" placeholder="">{{ isset($practitionerReminders->send_first_email_subject) ? $practitionerReminders->send_first_email_subject : $email_reminder_subject }}</textarea>
                      </div>
                      <span class="invalid-feedback d-block float-center"></span>
                    </div>
                  </div>
                </div>
                <div class="label-input send_first_email_reminder_text main-div mb-4">
                  <div class="row">
                    <div class="col-lg-12 ">
                      <h6 class="ml-0 mr-0 pb-4 cutomh6">Email reminder text</h6>
                      <div class="form-group brdrfull marg-bttm online-dropdown select-dropdown avalable-drop hide-first-child">
                        <select class="form-control selprepo js-example-basic-single" style="width:100%" name="pre3" id="pre3">
                          <option selected disabled value="">Insert Personalisation</option>
                          <option value="<Client name>">Client name</option>
                          <option value="<Client surname>">Client surname</option>
                          <option value="<Preferred name>">Preferred name</option>
                          <option value="<Appt date & time>">Appt date & time</option>
                          <option value="<Service provider name>">Service provider name</option>
                          <option value="<Service name>">Service name</option>
                          <option value="<Location>">Location</option>
                          <option value="<Business name>">Business name</option>
                          <option value="<Business number>">Business number</option>
                        </select>
                        <textarea name="send_first_email_reminder_text" id="send_first_email_reminder_text" class=" text-left append-text autosizetextaria w-100" style="height: 0px;">{{ isset($practitionerReminders->send_first_email_reminder_text) ? $practitionerReminders->send_first_email_reminder_text : $email_reminder_text }}</textarea>
                      </div>
                      <span class="invalid-feedback d-block float-center"></span>
                    </div>
                  </div>
                </div>
              </div>

              <div id="sms-part-first" class="test">
                <div class="label-input send_first_sms_reminder_text mb-4">
                  <div class="row">
                    <div class="col-lg-12  main-div">
                      <h6 class="ml-0 mr-0 pb-4 cutomh6">SMS reminder text</h6>
                      <div class="form-group brdrfull marg-bttm online-dropdown select-dropdown avalable-drop hide-first-child">
                        <select style="width:100%" name="pre1" id="pre1" class="form-control selprepo  js-example-basic-single">
                          <option selected disabled value="">Insert Personalisation</option>
                          <option value="<Client name>">Client name</option>
                          <option value="<Client surname>">Client surname</option>
                          <option value="<Preferred name>">Preferred name</option>
                          <option value="<Client address>">Client address</option>
                          <option value="<Appt date & time>">Appt date & time</option>
                          <option value="<Service provider name>">Service provider name</option>
                          <option value="<Service name>">Service name</option>
                          <option value="<Location>">Location</option>
                          <option value="<Business name>">Business name</option>
                          <option value="<Business number>">Business number</option>
                        </select>
                        <textarea name="send_first_sms_reminder_text" maxlength="2000" id="send_first_sms_reminder_text" type="text" class=" text-left append-text autosizetextaria w-100" style="height: 0px;" placeholder="">{{ isset($practitionerReminders->send_first_sms_reminder_text) ? $practitionerReminders->send_first_sms_reminder_text : $sms_reminder_text }}</textarea>
                      </div>
                      <span class="invalid-feedback d-block float-center"></span>
                      <p class="text-right"><span class="sms_first_text"></span>
                        <span class="notify_credit_btn cursor-pointer">
                          <img src='{{asset("assets/images/info-icon.png")}}' alt="" class="img-fluid info-icon ">
                        </span>
                      </p>
                      <div class="send-client-box-geo notify_credit_toggle">
                        <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">
                              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>

              <h6 class="cursor-pointer showSecondRemindertext" id="showSecondReminderPart">Send a second reminder</h6>

              <div class="second-reminder-part d-none">

                <div class="label-input timing timingBox">
                  <hr>
                  <div class="row align-items-center justify-content-center">
                    <div class="col-lg-12 ">
                      <h3 class="ml-0 mr-0 pb-4">Timing</h3>
                      <div class="form-group brdrfull">
                        <label class="font-15 mb-3">When would you like to send your second reminder?</label>

                        <select name="send_second_reminder_time" id="send_second_reminder_time" class="form-control send_second_reminder_time js-example-basic-single-add">
                          <option value="12" @if(isset($practitionerReminders->send_second_reminder_time) && $practitionerReminders->send_second_reminder_time == 12) selected @endif>12 hours before</option>
                          <option value="24" @if(isset($practitionerReminders->send_second_reminder_time) && $practitionerReminders->send_second_reminder_time == 24) selected @endif>24 hours before</option>
                          <option value="48" @if(isset($practitionerReminders->send_second_reminder_time) && $practitionerReminders->send_second_reminder_time == 48) selected @endif>48 hours before</option>
                          <option value="72" @if(isset($practitionerReminders->send_second_reminder_time) && $practitionerReminders->send_second_reminder_time == 72) selected @endif>72 hours before</option>
                          <option value="168" @if(isset($practitionerReminders->send_second_reminder_time) && $practitionerReminders->send_second_reminder_time == 168) selected @endif>7 days before</option>
                          <option value="None" @if(isset($practitionerReminders->send_second_reminder_time) && $practitionerReminders->send_second_reminder_time == "None") selected @endif
                            @if(!isset($practitionerReminders->send_second_reminder_time)) selected @endif>None</option>
                        </select>
                      </div>
                    </div>
                  </div>
                </div>

                <div id="send_reminder_messaging_second" class="label-input">
                  <h3 class="ml-0 mr-0 pb-4">Messaging</h3>
                  <div class="row">
                    <div class="col-sm-6">
                      <div class="row">
                        <div class="col-md-7 col-6">
                          <div class="toogle-area mb-0">
                            <p class="font-15">SMS</p>
                          </div>
                        </div>

                        <div class="col-md-4 col-6 booking_confirmation_sub">
                          <div class="switch-custom">
                            <div class="custom-control custom-switch">
                              <input type="checkbox" value="1" name="send_second_reminder_via_sms" class="custom-control-input" id="send_second_reminder_via_sms" @if(isset($practitionerReminders->send_second_reminder_via) && ($practitionerReminders->send_second_reminder_via == 1 || $practitionerReminders->send_second_reminder_via == 3)) checked @endif>
                              <label class="custom-control-label" for="send_second_reminder_via_sms"></label>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

                    <div class="col-sm-6 border-left">
                      <div class="row">
                        <div class="col-md-7 col-6">
                          <div class="toogle-area mb-0">
                            <p class=" font-15">Email</p>
                          </div>
                        </div>
                        <div class="col-md-4 col-6 booking_confirmation_sub">
                          <div class="switch-custom">
                            <div class="custom-control custom-switch">
                              <input type="checkbox" value="1" name="send_second_reminder_via_email" id="send_second_reminder_via_email" class="custom-control-input" id="send_second_reminder_via_email" @if(isset($practitionerReminders->send_second_reminder_via) && ($practitionerReminders->send_second_reminder_via == 2 || $practitionerReminders->send_second_reminder_via == 3)) checked @endif>
                              <label class="custom-control-label" for="send_second_reminder_via_email"></label>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div id="top-message-part-second" class="">
                  <hr>
                  <h3 class="ml-0 mr-0 pb-3">Message personalisation</h3>
                  <div class="label-input mb-0">
                    <div class="row">
                      <div class="col-lg-12 col-md-12 mt-3">
                        <label class="font-15 mb-4">We have provided you with suggested wording which can be edited as required. Use the personalisation drop down to insert automatically populated fields in your message.</label>
                      </div>
                    </div>
                  </div>
                </div>

                <div id="email-part-second" class="">
                  <div class="label-input send_second_email_subject main-div">
                    <div class="row justify-content-center">
                      <div class="col-lg-12 ">
                        <h6 class="ml-0 mr-0 pb-4 cutomh6">Email subject line</h6>
                        <div class="form-group brdrfull marg-bttm online-dropdown select-dropdown avalable-drop hide-first-child">
                          <select class="form-control selprepo js-example-basic-single" style="width:100%" name="pre5" id="pre5">
                            <option selected disabled value="">Insert Personalisation</option>
                            <option value="<Client name>">Client name</option>
                            <option value="<Client surname>">Client surname</option>
                            <option value="<Preferred name>">Preferred name</option>
                            <option value="<Appt date & time>">Appt date & time</option>
                            <option value="<Service provider name>">Service provider name</option>
                            <option value="<Service name>">Service name</option>
                          </select>
                          <textarea name="send_second_email_subject" id="send_second_email_subject" type="text" class=" text-left append-text autosizetextaria w-100" style="height: 0px;" placeholder="">{{ isset($practitionerReminders->send_second_email_subject) ? $practitionerReminders->send_second_email_subject : $email_reminder_subject }} </textarea>
                        </div>
                        <span class="invalid-feedback d-block float-center"></span>
                      </div>
                    </div>
                  </div>
                  <div class="label-input send_second_email_reminder_text">
                    <div class="row">
                      <div class="col-lg-12  main-div mb-4">
                        <h6 class="ml-0 mr-0 pb-4 cutomh6">Email reminder text</h6>
                        <div class="form-group brdrfull marg-bttm online-dropdown select-dropdown avalable-drop hide-first-child">
                          <select class="form-control selprepo js-example-basic-single" style="width:100%" name="pre6" id="pre6">
                            <option selected disabled value="">Insert Personalisation</option>
                            <option value="<Client name>">Client name</option>
                            <option value="<Client surname>">Client surname</option>
                            <option value="<Preferred name>">Preferred name</option>
                            <option value="<Client address>">Client address</option>
                            <option value="<Appt date & time>">Appt date & time</option>
                            <option value="<Service provider name>">Service provider name</option>
                            <option value="<Service name>">Service name</option>
                            <option value="<Location>">Location</option>
                            <option value="<Business name>">Business name</option>
                            <option value="<Business number>">Business number</option>
                          </select>
                          <textarea name="send_second_email_reminder_text" id="send_second_email_reminder_text" class=" text-left append-text autosizetextaria w-100" style="height: 0px;">{{ isset($practitionerReminders->send_second_email_reminder_text) ? $practitionerReminders->send_second_email_reminder_text : $email_reminder_text }}</textarea>
                        </div>
                        <span class="invalid-feedback d-block float-center"></span>
                      </div>
                    </div>
                  </div>
                </div>

                <div id="sms-part-second" class="">
                  <div class="label-input">
                    <div class="row">
                      <div class="col-lg-12  main-div">
                        <h6 class="ml-0 mr-0 pb-4 cutomh6">SMS reminder text</h6>
                        <div class="form-group brdrfull marg-bttm online-dropdown select-dropdown avalable-drop hide-first-child">
                          <select class="form-control selprepo js-example-basic-single" style="width:100%" name="pre4" id="pre4">
                            <option selected disabled value="">Insert Personalisation</option>
                            <option value="<Client name>">Client name</option>
                            <option value="<Client surname>">Client surname</option>
                            <option value="<Preferred name>">Preferred name</option>
                            <option value="<Client address>">Client address</option>
                            <option value="<Appt date & time>">Appt date & time</option>
                            <option value="<Service provider name>">Service provider name</option>
                            <option value="<Service name>">Service name</option>
                            <option value="<Location>">Location</option>
                            <option value="<Business name>">Business name</option>
                            <option value="<Business number>">Business number</option>
                          </select>
                          <textarea maxlength="2000" name="send_second_sms_reminder_text" id="send_second_sms_reminder_text" class=" text-left append-text autosizetextaria w-100" style="height: 0px;">{{ isset($practitionerReminders->send_second_sms_reminder_text) ? $practitionerReminders->send_second_sms_reminder_text : $sms_reminder_text }}</textarea>
                        </div>
                        <span class="invalid-feedback d-block float-center"></span>
                        <p class="text-right"><span class="sms_second_text"></span>
                          <span class="notify_credit_btn2 cursor-pointer">
                            <img src='{{asset("assets/images/info-icon.png")}}' alt="" class="img-fluid info-icon ">
                          </span>
                        </p>
                        <div class="send-client-box-geo notify_credit_toggle2">
                          <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">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>

              </div>
            </div>
          </div>
          <hr class="mt-0" />
          <div id="update-btn" class="row">
            <div class="col-12 text-center">
              <button type="submit" class="cursor-pointer save-btn save-btn-bg confirm-bttn mt-0">Update and Save</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</form>
@endsection

@section('modals')
<div id="load-modal"></div>
@endsection

@section('import-scripts')
<script src="{{asset('assets/js/practitioner/my-settings.js')}}" type="text/javascript"></script>
<script type="text/javascript">
  $('.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';
  });

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

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

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

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

  function showHideReminderInput(value, flag) {
    if (value == 3) {
      $(".send_" + flag + "_email_subject").removeClass('hide');
      $(".send_" + flag + "_email_reminder_text").removeClass('hide');
      $(".send_" + flag + "_sms_reminder_text").removeClass('hide');
      $("#send_" + flag + "_email_subject").attr('required', true);
      $("#send_" + flag + "_email_reminder_text").attr('required', true);
      $("#send_" + flag + "_sms_reminder_text").attr('required', true);
    }
    if (value == 2) {
      //email
      $(".send_" + flag + "_email_subject").removeClass('hide');
      $(".send_" + flag + "_email_reminder_text").removeClass('hide');
      $(".send_" + flag + "_sms_reminder_text").addClass('hide');
      //$("#send_" + flag + "_sms_reminder_text").val('');
      $("#send_" + flag + "_email_subject").attr('required', true);
      $("#send_" + flag + "_email_reminder_text").attr('required', true);
      $("#send_" + flag + "_sms_reminder_text").attr('required', false);
    }
    if (value == 1) {
      //text
      $(".send_" + flag + "_email_subject").addClass('hide');
      $(".send_" + flag + "_email_reminder_text").addClass('hide');
      $(".send_" + flag + "_sms_reminder_text").removeClass('hide');
      //$("#send_" + flag + "_email_subject").val('');
      // $("#send_" + flag + "_email_reminder_text").val('');
      $("#send_" + flag + "_sms_reminder_text").attr('required', true);
      $("#send_" + flag + "_email_subject").attr('required', false);
      $("#send_" + flag + "_email_reminder_text").attr('required', false);
    }
    if (value == 0) {
      //none
      $(".send_" + flag + "_email_subject").addClass('hide');
      $(".send_" + flag + "_email_reminder_text").addClass('hide');
      $(".send_" + flag + "_sms_reminder_text").addClass('hide');
      // $("#send_" + flag + "_email_subject").val('');
      // $("#send_" + flag + "_email_reminder_text").val('');
      // $("#send_" + flag + "_sms_reminder_text").val('');
      $("#send_" + flag + "_email_subject").attr('required', false);
      $("#send_" + flag + "_email_reminder_text").attr('required', false);
      $("#send_" + flag + "_sms_reminder_text").attr('required', false);
    }
  }

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

//   function countString(letters) {
//     const credits = Math.min(16, Math.max(1, Math.floor((letters - 160) / 153) + 2));
//     return `Character estimate ${letters} = ${credits} Credits`;
//   }

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

  $(function() {
    $("#showSecondReminderPart").on("click", function() {
      $("#showSecondReminderPart").addClass('d-none');
      $(".second-reminder-part").removeClass('d-none');
    });

    $("#top-message-part-first").addClass("hide");

    if ($('#send_reminder_via_sms').is(":checked") == true) {
      $("#top-message-part-first").removeClass("hide");
      $("#sms-part-first").removeClass("hide");
    } else {
      $("#sms-part-first").addClass("hide");
    }

    if ($('#send_reminder_via_email').is(":checked") == true) {
      $("#top-message-part-first").removeClass("hide");
      $("#email-part-first").removeClass("hide");
      $('.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';
      });
    } else {
      $("#email-part-first").addClass("hide");
    }

    if ($('#send_second_reminder_via_email').is(":checked") == true) {
      $("#top-message-part-second").removeClass("hide");
      $("#email-part-second").removeClass("hide");
      $('.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';
      });
    } else {
      $("#email-part-second").addClass("hide");
    }

    $("#send_reminder_via_sms").change(function(e) {
      e.preventDefault();
      if (this.checked) {
        $("#sms-part-first").removeClass("hide");
        $("#top-message-part-first").removeClass("hide");

        $('.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';
        });
      } else {
        $("#sms-part-first").addClass("hide");
        if ($('#send_reminder_via_email').is(":checked") == false) {
          $("#top-message-part-first").addClass("hide");
        }
      }
    });

    $("#send_reminder_via_email").change(function(e) {
      e.preventDefault();
      if (this.checked) {
        $("#top-message-part-first").removeClass("hide");
        $("#email-part-first").removeClass("hide");
        $('.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';
        });
      } else {
        $("#email-part-first").addClass("hide");
        if ($('#send_reminder_via_sms').is(":checked") == false) {
          $("#top-message-part-first").addClass("hide");
        }
      }
    });

    $("#send_second_reminder_via_sms").change(function(e) {
      e.preventDefault();
      if (this.checked) {
        $("#sms-part-second").removeClass("hide");
        $("#top-message-part-second").removeClass("hide");
        $('.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';
        });
      } else {
        $("#sms-part-second").addClass("hide");
        if ($('#send_second_reminder_via_email').is(":checked") == false) {
          $("#top-message-part-second").addClass("hide");
        }
      }
    });

    $("#send_second_reminder_via_email").change(function(e) {
      e.preventDefault();
      if (this.checked) {
        $("#top-message-part-second").removeClass("hide");
        $("#email-part-second").removeClass("hide");
        $('.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';
        });
      } else {
        $("#email-part-second").addClass("hide");
        if ($('#send_second_reminder_via_sms').is(":checked") == false) {
          $("#top-message-part-second").addClass("hide");
        }
      }
    });

    if ($("select.send_second_reminder_time").children("option:selected").val() == 'None') {
      $("#send_reminder_messaging_second").addClass("hide");
      $("#top-message-part-second").addClass("hide");
      $("#email-part-second").addClass("hide");
      $("#sms-part-second").addClass("hide");
    } else {
      $("#showSecondReminderPart").addClass('d-none');
      $(".second-reminder-part").removeClass('d-none');

      $("#top-message-part-first").removeClass("hide");
      //$("#email-part-first").removeClass("hide");


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

      $("#send_reminder_messaging_second").removeClass("hide");
      $("#top-message-part-second").addClass("hide");

      if ($('#send_second_reminder_via_sms').is(":checked") == true) {
        $("#top-message-part-second").removeClass("hide");
        $("#sms-part-second").removeClass("hide");
      } else {
        $("#sms-part-second").addClass("hide");
      }
      if ($('#send_second_reminder_via_email').is(":checked") == true) {
        $("#top-message-part-second").removeClass("hide");
        $("#email-part-second").removeClass("hide");
      } else {
        $("#email-part-second").addClass("hide");
      }
    }

    $("select.send_second_reminder_time").change(function() {
      if ($(this).children("option:selected").val() == 'None') {
        $("#send_reminder_messaging_second").addClass("hide");
        $("#top-message-part-second").addClass("hide");
        $("#email-part-second").addClass("hide");
        $("#sms-part-second").addClass("hide");
      } else {
        $("#send_reminder_messaging_second").removeClass("hide");
        $("#top-message-part-second").addClass("hide");

        if ($('#send_second_reminder_via_sms').is(":checked") == true) {
          $("#top-message-part-second").removeClass("hide");
          $("#sms-part-second").removeClass("hide");
        } else {
          $("#sms-part-second").addClass("hide");
        }
        if ($('#send_second_reminder_via_email').is(":checked") == true) {
          $("#top-message-part-second").removeClass("hide");
          $("#email-part-second").removeClass("hide");
        } else {
          $("#email-part-second").addClass("hide");
        }
      }
    });

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

    // display hide div through selection
    //showHideReminderInput($("select.send_first_reminder_via").val(), 'first');
    //showHideReminderInput($("select.send_second_reminder_via").val(), 'second');

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

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

    $('#addReminder').validate({
      errorClass: 'text-danger-custom',
      ignore: [],
      rules: {
        'template_name': {
          required: true
        },
        'servicesassignednotetemplate[]': {
          required: true
        },
        'send_first_sms_reminder_text': {
          required: "#send_reminder_via_sms:checked"
        },
        'send_first_email_subject': {
          required: "#send_reminder_via_email:checked"
        },
        'send_first_email_reminder_text': {
          required: "#send_reminder_via_email:checked"
        },
        'send_second_sms_reminder_text': {
          required: "#send_second_reminder_via_sms:checked"
        },
        'send_second_email_subject': {
          required: "#send_second_reminder_via_email:checked"
        },
        'send_second_email_reminder_text': {
          required: "#send_second_reminder_via_email:checked"
        },
      },
      messages: {
        'template_name': {
          required: "This field is required"
        },
        'servicesassignednotetemplate[]': {
          required: "This field is required"
        },
        'send_first_sms_reminder_text': {
          required: "This field is required"
        },
        'send_first_email_subject': {
          required: "This field is required"
        },
        'send_first_email_reminder_text': {
          required: "This field is required"
        },
        'send_second_sms_reminder_text': {
          required: "This field is required"
        },
        'send_second_email_subject': {
          required: "This field is required"
        },
        'send_second_email_reminder_text': {
          required: "This field is required"
        },
      },
      errorPlacement: function(error, element) {
        if (element.attr("name") == "servicesassignednotetemplate[]") {
          error.insertAfter("#div-servicesassignednotetemplate");
        } else {
          error.insertAfter(element);
        }
      },
      errorElement: 'span'
    });

    $("#addReminder").submit(function(e) {
      e.preventDefault();
      $(".profile-form-error").hide();
      if ($(this).valid()) {
        var modal = $("#remindersModal");
        $.ajax({
          url: $(this).attr("action"),
          data: $(this).serialize(),
          type: 'POST',
        }).done(function(response) {
          if (response.status == "success") {
            Swal.fire({
              icon: response.status,
              title: 'Settings updated',
              showClass: {
                popup: 'animate__animated animate__fadeInDown'
              },
              hideClass: {
                popup: 'animate__animated animate__fadeOutUp'
              }
            });
            if (response.setupWizard == 0) {
              setTimeout(function() {
                window.location.href = "{{route('practitioner.mysetupwizard')}}";
              }, 2000);
            } else {
              setTimeout(function() {
                window.location.href = "{{ route('practitioner.settings.reminders') }}";
              }, 2000);
            }
          } else {
            $.each(response.errors, function(key, value, i) {
              var input = $('input[name=' + key + ']');
              var parent = input.parent().next('.invalid-feedback').text(value[0]);
              var textarea = $('textarea[name=' + key + ']');
              var parent = textarea.parent().next('.invalid-feedback').text(value[0]);
              input.addClass('is-invalid');
            });
          }
        });
      }
    });

    $(".selprepo").change(function() {
      var val = $(this).val();
      console.log("val: " + val);
      if (val != "" && val != null) {
        var id = $(this).closest(".main-div").find('.append-text').attr("id");
        $(this).closest(".main-div").find('.append-text').trigger('input');
        console.log(id);
        insertAtCaret(id, val);
      }
    });

    // change text color
    $("#send_first_sms_reminder_text").css('color', '#24303f');
    $("#send_first_email_subject").css('color', '#24303f');
    $("#send_first_email_reminder_text").css('color', '#24303f');
    $("#send_second_sms_reminder_text").css('color', '#24303f');
    $("#send_second_email_subject").css('color', '#24303f');
    $("#send_second_email_reminder_text").css('color', '#24303f');
    $(".holidayTitle").css('color', '#24303f');

    $(".sms_first_text").text((countString($('#send_first_sms_reminder_text').val())));
    $('#send_first_sms_reminder_text').on('input', function() {
      $(".sms_first_text").text(countString($(this).val()));
    });

    $(".sms_second_text").text((countString($('#send_second_sms_reminder_text').val())));
    $('#send_second_sms_reminder_text').on('input', function() {
      $(".sms_second_text").text(countString($(this).val()));
    });

    $(".notify_credit_btn").hover(function() {
      $(".notify_credit_toggle").toggle();
    });

    $(".notify_credit_btn2").hover(function() {
      $(".notify_credit_toggle2").toggle();
    });

    $(".allow_2_way_sms_btn").hover(function() {
      $(".allow_2_way_sms_box").toggle();
    });

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

    function RunSelect2() {
      $('#servicesassignednotetemplate').select2({
        placeholder: "Start typing to select services",
        tokenSeparators: [",", " "],
        closeOnSelect: true,
      }).on('select2:open', function() {
        setTimeout(function() {
          $(".select2-results__option .select2-results__group").bind("click", selectAlllickHandler);
        }, 0);
      });
    }

    RunSelect2();

    var selectAlllickHandler = function() {
      $(".select2-results__option .select2-results__group").unbind("click", selectAlllickHandler);
      $('#servicesassignednotetemplate').select2('destroy').find('option').prop('selected', 'selected').end();
      RunSelect2();
    };
  });

  // $('#redirectToSetupWizard').on('click', function() {
  //   window.location.href = "{{route('practitioner.mysetupwizard')}}";
  // });

  // this code is setup Wizard updated status 
  $(document).on('click', '#redirectToSetupWizard', function(event) {
        $.ajax({
            url: "{{route('practitioner.settings.skipSetupWizardStatus')}}",
            type: 'POST',
            data: {
                step: $(this).data('step')
            }
        }).done(function(response) {
            if (response.status == "success") {
              window.location.href = "{{route('practitioner.mysetupwizard')}}";
            }
        });
    });
</script>
@endsection