@extends('front.practitioner.import.template.import')
@section('content')
<style>
  .select2-container--default .select2-selection--multiple
  {
    border: 1px solid #ced4da !important;
    border-radius: 8px !important;
  }
  .select2-container .select2-selection--multiple
  {
    min-height: 26px;
  }
  .booking-confirmation-area .select2-container--default .select2-selection--multiple .select2-selection__rendered
  {
    padding: 0px 12px 0px;
  }
</style>
  <div class="container-fluid">
    <div class="row">
      <nav class="navbar navbar-light bg-light invoice-page-menu notes-menu ">
        <a class=" p-0" href="{{ route('practitioner.settings.myBookingConfirmation') }}">
          <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>Booking confirmation</h1>

        <a href="{{ route('practitioner.settings.myBookingConfirmation.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( $bookingStep == 0 )
        <button id="redirectToSetupWizard" class="btn btn-unfill mb-3">Next step</button>
      @endif
    </div>
  </div>

  <div class="dashboard-wrapper mdashboard-wrapper clientd-wrapper setting-wrapper">
    <div class="booking-confirmation remindersModal">
      <div class="bookingConfirmTemplateBox">
        <div class="boxwhite padd-sm mt-20">
          <form action="{{route('practitioner.settings.editBookingConfirmation')}}" id="editBookingConfirmation" class="addreminder">
            <input type="hidden" name="isNew" id="isNew" value="0">
            <input type="hidden" name="id" id="id" value="{{$practitionerBookingConfirmation->id}}">

            @csrf
            <div class="card">
              <div class="booking-confirmation-area labeltop">
                <div class="note-l-content">
                  <h3>Booking confirmation template name</h3>
                  <label class="font-15" style="color: #24303f;">Set up a single booking confirmation or create unlimited customised templates and link them to specific services. Name your booking confirmation to help identify which template your services belong to.</label>
                  <div class="form-group">
                    <input required type="text" class="form-control" name="template_name" value="@isset($practitionerBookingConfirmation) {{$practitionerBookingConfirmation->template_name}} @endisset" id="template_name" placeholder="Add a template name for this booking confirmation">
                    <div id="div-template_name"></div>
                  </div>
                </div>

                <div class="note-l-content">
                  <h3>Services assigned to this booking confirmation</h3>
                  <div class="form-group brdrfull no-bttm-full select2-multiple-autoselect">
                    <select required class="form-control text-capitalize" id="servicesassignednotetemplate" name="servicesassignednotetemplate[]" multiple="multiple">
                        <optgroup label="Select all services">
                          @foreach ($practAppointmentTypes 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>

                <h3 class="mb-10">Messaging</h3>
                <div class="label-input">
                  <div class="row">
                    <div class="col-lg-12 col-md-12">
                      <label class="font-15">How would you prefer to send your booking confirmation to your clients?</label>
                    </div>
                  </div>

                  <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_confirmation_via_sms" class="custom-control-input" id="send_confirmation_via_sms" @if(isset($practitionerBookingConfirmation->send_confirmation_via_sms) && $practitionerBookingConfirmation->send_confirmation_via_sms == 1) checked @endif>
                              <label class="custom-control-label" for="send_confirmation_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_confirmation_via_email" class="custom-control-input" id="send_confirmation_via_email" @if(isset($practitionerBookingConfirmation->send_confirmation_via_email) && $practitionerBookingConfirmation->send_confirmation_via_email == 1) checked @endif>
                              <label class="custom-control-label" for="send_confirmation_via_email"></label>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div id="top-message-part" class="@if(!isset($practitionerBookingConfirmation)) hide @endif @if(isset($practitionerBookingConfirmation->send_confirmation_via_email) && $practitionerBookingConfirmation->send_confirmation_via_email == 0 && $practitionerBookingConfirmation->send_confirmation_via_sms == 0 ) hide @endif">
                  <hr>
                  <h3 class="mb-10">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" class="@if( !isset($practitionerBookingConfirmation) ) hide @endif @if(isset($practitionerBookingConfirmation->send_confirmation_via_email) && $practitionerBookingConfirmation->send_confirmation_via_email == 0) hide @endif">
                  <div class="label-input send_first_email_subject main-div">
                    <div class="row justify-content-center">
                      <div class="col-md-3 col-sm-6 pr-md-2">
                        <label class="font-15">Email subject line</label>
                      </div>
                      <div class="col-md-9 col-sm-6">
                        <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 font-13" style="width:100%" name="pre7" id="pre7">
                            <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="<My business name>">My business name</option>
                                      </select>
                                      @php
                                      $email_subject_line = isset( $practitionerBookingConfirmation->email_subject_line ) && $practitionerBookingConfirmation->email_subject_line != '' ? $practitionerBookingConfirmation->email_subject_line : 'Your booking with <My business name> is confirmed';
                                        @endphp

                                        <textarea name="email_subject_line" id="email_subject_line" type="text" class="text-left append-text autosizetextaria w-100" placeholder="">{{ $email_subject_line }}</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">
                                  <div class="row">
                                    <div class="col-md-3 col-sm-6 pr-md-2">
                                      <label class="font-15">Email reminder text</label>
                                    </div>
                                    <div class="col-md-9 col-sm-6">
                                      <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 font-13" style="width:100%" name="pre8" id="pre8">
                                          <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 name>">Service name</option>
                                                      <option value="<Service provider name>">Service provider name</option>
                                                        <option value="<My business name>">My business name</option>
                                                          <option value="<Location>">Location</option>
                                                            <option value="<Business number>">Business number</option>
                                                            </select>
                                                            <textarea name="email_reminder_text" id="email_reminder_text" class="text-left  append-text font-13 autosizetextaria w-100">{{ $email_reminder_text }}</textarea>
                                                          </div>
                                                          <span class="invalid-feedback d-block float-center"></span>
                                                        </div>
                                                      </div>
                                                    </div>
                                                  </div>

                                                  <div id="sms-part" class="@if( !isset($practitionerBookingConfirmation) ) hide @endif @if(isset($practitionerBookingConfirmation->send_confirmation_via_sms) && $practitionerBookingConfirmation->send_confirmation_via_sms == 0) hide @endif">
                                                    <div class="label-input send_first_sms_reminder_text">
                                                      <div class="row">
                                                        <div class="col-md-3 col-sm-6 pr-md-2">
                                                          <label class="font-15">SMS reminder text</label>
                                                        </div>
                                                        <div class="col-md-9 col-sm-6 main-div">
                                                          <div class="form-group brdrfull marg-bttm online-dropdown select-dropdown avalable-drop hide-first-child">
                                                            <select style="width:100%" name="pre9" id="pre9" class="form-control selprepo  js-example-basic-single font-13">
                                                              <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 name>">Service name</option>
                                                                          <option value="<Service provider name>">Service provider name</option>
                                                                            <option value="<Location>">Location</option>
                                                                              <option value="<Business number>">Business number</option>
                                                                              </select>
                                                                              @php
                                                                              $sms_reminder_text = isset( $practitionerBookingConfirmation->sms_reminder_text ) && $practitionerBookingConfirmation->sms_reminder_text != '' ? $practitionerBookingConfirmation->sms_reminder_text : 'Your appointment on <Appt date & time> is confirmed. We look forward to seeing you then. Warm regards, <Service provider first name> <Service provider last name>';
                                                                                @endphp

                                                                                <textarea class="w-100 text-left append-text autosizetextaria" maxlength="2000" id="sms_reminder_text" name="sms_reminder_text">{{ $sms_reminder_text }}</textarea>
                                                                              </div>

                                                                              <span class="invalid-feedback d-block float-center"></span>

                                                                              <p class="text-right font-13">
                                                                                <span class="sms_booking_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>
                                                                    </div>
                                                                  </div>

                                                                  <hr class=""/>

                                                                  <div 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>
                                                                </form>
        </div>
      </div>
    </div>
  </div>
@endsection

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

@section('css')
  <style>
    .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;}
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0;}
    input[type=number] {-moz-appearance: textfield;}
    .select2-container--default .select2-selection--single .select2-selection__arrow b::after{display: inline-block;}
    @media (max-width: 425px) {
      .page-content {padding: 45px 15px 45px 15px;}
    }
    .select2-results__group {
        cursor:pointer !important;
    }
    .select2-container--default .select2-results__group{
        margin-left: 10px !important;
    }
    #select2-servicesassignednotetemplate-results > li {
        background-color: unset !important;
        color: #24303f !important;
        font-size: 13px !important;
        letter-spacing: 1px !important;
    }
  </style>
@endsection

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



    $(document).ready(function() {
      $('input').attr('autocomplete', 'off');

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

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

      $('#editBookingConfirmation').validate({
        errorClass: 'text-danger-custom',
        ignore: [],
        rules: {
          'template_name': {
            required: true
          },
          'phone': {
            required: true
          },
          'email[]': {
            required: true,
            email: true
          },
          'phone_number[]': {
            required: true
          },
          'profession[]': {
            required: true
          },
          'abn': {
            required: true
          }
        },
        messages: {
          'template_name': {
            required: "This field is required"
          },
          'servicesassignednotetemplate[]': {
            required: "This field is required"
          }
        },
        errorPlacement: function(error, element) {
          if( element.attr("name") == "template_name" ) {
            error.insertAfter( "#div-template_name" );
          } else if( element.attr("name") == "servicesassignednotetemplate[]" ) {
            error.insertAfter( "#div-servicesassignednotetemplate" );
          } else {
            error.insertAfter(element);
          }
        },
        errorElement: 'span'
      });

      $("#editBookingConfirmation").submit(function(e) {
        e.preventDefault();

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

        if ($(this).valid()) {
          var modal = $("#booking-confirmation");

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

              setTimeout(function() {
                window.location.href = "{{route('practitioner.settings.myBookingConfirmation')}}";
              }, 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');
              });
            }
          });
        }
      });
    });

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

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

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

    $("#send_confirmation_via_email").change(function(e) {
      e.preventDefault();

      if (this.checked) {
        $("#top-message-part").removeClass("hide");
        $("#email-part").removeClass("hide");
      } else {
        $("#email-part").addClass("hide");
        if ($('#send_confirmation_via_sms').is(":checked") == false) {
          $("#top-message-part").addClass("hide");
        }
      }
    });

    $("#send_confirmation_via_sms").change(function(e) {
      e.preventDefault();

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

    $("select.send_second_reminder_via").change(function() {
      showHideReminderInput($(this).children("option:selected").val(), 'second');
    });

    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 + "_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 + "_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").attr('required', false);
        $("#send_" + flag + "_email_reminder_text").attr('required', false);
        $("#send_" + flag + "_sms_reminder_text").attr('required', false);
      }
    }

    if ($("select.send_second_reminder_time").children("option:selected").val() == 'None') {
      $(".second_send_via").addClass('hide');
      $(".send_second_email_subject").addClass('hide');
      $(".send_second_email_reminder_text").addClass('hide');
      $(".send_second_sms_reminder_text").addClass('hide');
      $("#send_second_email_subject").attr('required', false);
      $("#send_second_email_reminder_text").attr('required', false);
      $("#send_second_sms_reminder_text").attr('required', false);
    }

    $("select.send_second_reminder_time").change(function() {
      if ($(this).children("option:selected").val() == 'None') {
        $(".second_send_via").addClass('hide');
        $(".send_second_email_subject").addClass('hide');
        $(".send_second_email_reminder_text").addClass('hide');
        $(".send_second_sms_reminder_text").addClass('hide');
        $("#send_second_email_subject").attr('required', false);
        $("#send_second_email_reminder_text").attr('required', false);
        $("#send_second_sms_reminder_text").attr('required', false);
      } else {
        $(".second_send_via").removeClass('hide');
        $(".send_second_email_subject").addClass('hide');
        $(".send_second_email_reminder_text").addClass('hide');
        $(".send_second_sms_reminder_text").removeClass('hide');
        $("#send_second_email_subject").attr('required', false);
        $("#send_second_email_reminder_text").attr('required', false);
        $("#send_second_sms_reminder_text").attr('required', true);
      }
    });

    // 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');

    //Start count string
    $(".sms_booking_text").text((countString($('#sms_reminder_text').val())));
    $('#sms_reminder_text').on('input', function() {
      $(".sms_booking_text").text(countString($(this).val()));
    });
  </script>

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

  <script>

    /*$('#servicesassignednotetemplate').select2({
      placeholder: "Start typing to select services",
      tokenSeparators: [",", " "],
    });*/

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

  <script type="text/javascript">
    var Tawk_API = Tawk_API || {},
    Tawk_LoadStart = new Date();
    (function() {
      var s1 = document.createElement("script"),
      s0 = document.getElementsByTagName("script")[0];
      s1.async = true;
      s1.src = 'https://embed.tawk.to/60208ea2c31c9117cb76c4d0/1etviqanh';
      s1.charset = 'UTF-8';
      s1.setAttribute('crossorigin', '*');
      s0.parentNode.insertBefore(s1, s0);
    })();
    $(function (){
      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')}}";
    });
  </script>
  @endsection