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

@section('css')
<link rel="stylesheet" href="{{ asset('assets/css/reminder.setting.css') }}">
<style>
    .boxwhite .sendintake-text {
        padding-bottom: 0 !important;
        height: 58px;
    }

    .sendintake-text .switch-custom {
        position: relative;
        top: -48px !important;
    }
    #select2-pre1-results{
        max-height: 145px;
    }
</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="{{ route('practitioner.intake_form.index') }}">
                <img src="{{asset('assets/images/My Appointments back icon.svg')}}" alt="" class="img-flude" style="min-width: 40px">
            </a>
            <a class="navbar-brand p-0" href="{{ route('practitioner.appointments.index') }}">
                <img src="{{asset('assets/images/MA Icon Colour.svg')}}" alt="" class="img-flude" style="min-width: 43px">
            </a>

            <h1 class="page-title eagle-font font-400 "><span class="arca-font">My </span>Intake form settings</h1>
        </nav>
        <div class="brdr-bttm w-100"></div>
    </div>
</div>

<form action="{{route('practitioner.template.settings.save')}}" id="intakeForm" class="intakeForm">
    @csrf
    <div class="dashboard-wrapper mdashboard-wrapper  welcome_email_content" id="myRemindersSettingOuterBox">
        <div class="reminder-div client-follow-popup   intake-form-settings">

            <div class="boxwhite padd-sm mt-20 ">

                <div class="card ">


                    <div class="test-results-area labeltop ">
                        <div class="card-body">
                            <h3 class="ml-0 businesstitle mt-3">Intake form settings
                            </h3>
                            <p class="font-15 text-navy mb-4" style="">When an intake form has been linked to a service, it will automatically be sent to all new clients once their first appointment is booked. Alternately, you can choose to manually send intake forms anytime via your client's card.</p>
                            <div class="tab-content clientcollapse-area">
                                <div class="boxwhite   intack_form_sup">
                                    <h3 class="ml-0 businesstitle font-15 pb-0">Automatically send intake form to all new clients
                                    </h3>
                                    <div class="switch-custom">
                                        <div class="custom-control custom-switch">
                                            <input type="checkbox" name="send_intake_form_to_all_new_client" class="custom-control-input" id="send-intake" value="1" data-parsley-multiple="send-intake" data-parsley-id="32" @if(isset($practitionerIntakeForm->send_intake_form_to_all_new_client)
                                            && $practitionerIntakeForm->send_intake_form_to_all_new_client == 1)
                                            checked @endif autocomplete="off">
                                            <label class="custom-control-label" for="send-intake"></label>
                                        </div>
                                    </div>
                                </div>
                                <br>
                                <div class="boxwhite  intack_form_sup">
                                    <h3 class="ml-0 businesstitle font-15 pb-0">Manually send intake form to clients
                                    </h3>
                                    <div class="switch-custom">
                                        <div class="custom-control custom-switch">
                                            <input type="checkbox" @if(isset($practitionerIntakeForm->manually_send_intake_form)
                                            && $practitionerIntakeForm->manually_send_intake_form == 1)
                                            checked @endif name="manually_send_intake_form" class="custom-control-input" id="manually_send_intake_form" value="1" data-parsley-multiple="send-intake" data-parsley-id="32" autocomplete="off">
                                            <label class="custom-control-label" for="manually_send_intake_form"></label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr>
                        <div class="card-body">

                            <div id="send_reminder_messaging_first" class="label-input mb-0 ">
                                <p class="font-13 mb-4">How would you prefer to send your intake form to your clients?</p>
                                <div class="row align-items-center ">
                                    <div class="col-sm-6">
                                        <div class="row align-items-center">
                                            <div class="col-md-7 col-6">
                                                <div class="toogle-area mb-0">
                                                    <p class="font-15 font-bold">SMS</p>
                                                </div>
                                            </div>

                                            <div class="col-md-4 col-6 ">
                                                <div class="switch-custom">
                                                    <div class="custom-control custom-switch">
                                                        <input type="checkbox" value="1" name="send_intake_form_trough_sms" class="custom-control-input" id="send_intake_form_trough_sms" @if(isset($practitionerIntakeForm->send_intake_form_trough_sms)
                                                        && $practitionerIntakeForm->send_intake_form_trough_sms == 1) checked @endif>
                                                        <label class="custom-control-label" for="send_intake_form_trough_sms"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-6 border-left">
                                        <div class="row align-items-center">
                                            <div class="col-md-7 col-6">
                                                <div class="toogle-area mb-0">
                                                    <p class=" font-15 font-bold">Email</p>
                                                </div>
                                            </div>
                                            <div class="col-md-4 col-6 ">
                                                <div class="switch-custom">
                                                    <div class="custom-control custom-switch">
                                                        <input type="checkbox" value="1" name="send_intake_form_trough_email" class="custom-control-input" id="send_intake_form_trough_email" @if(!isset($practitionerIntakeForm->send_intake_form_trough_email)) checked @endif @if(isset($practitionerIntakeForm->send_intake_form_trough_email)
                                                        && $practitionerIntakeForm->send_intake_form_trough_email == 1) checked @endif
                                                        @if(!isset($practitionerIntakeForm->send_intake_form_trough_email)) checked @endif>
                                                        <label class="custom-control-label" for="send_intake_form_trough_email"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr>
                        <div class="card-body messaging-content">
                            <h3 class="ml-0  font-15">Messaging</h3>
                            <div id="sms-part-first" class="">

                                <div class="label-input send_first_sms_reminder_text mb-4">
                                    <div class="row">
                                        <div class="col-lg-3">
                                            <lable class="text-navy">SMS text</lable>
                                        </div>
                                        <div class="col-lg-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="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>
                                                    {{-- <option value="<Intake form button>">Intake form button</option> --}}
                                                    <option value="<Intake form link>">Intake form link</option>
                                                </select>
                                                @php
                                                $intake_sms_reminder_text = isset(
                                                $practitionerIntakeForm->intake_sms_reminder_text
                                                ) &&
                                                $practitionerIntakeForm->intake_sms_reminder_text
                                                != '' ?
                                                $practitionerIntakeForm->intake_sms_reminder_text
                                                : 'Dear <first name>, please complete your intake form via this link <insert link> before your appointment.
Thank you, <business name>' @endphp
                                                            <textarea name="intake_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="">{{ $intake_sms_reminder_text }}</textarea>
                                                            <p class="text-right "><span class="sms_first_text review-post font-13"></span>
                                                                <span class="notify_credit_btn cursor-pointer">
                                                                    <img src='{{asset("assets/images/info-icon.svg")}}' alt="" class="img-fluid info-icon ">
                                                                </span>
                                                            </p>
                                            </div>
                                            <span class="invalid-feedback d-block float-center"></span>

                                            <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 id="email-part-first" class="">
                                <div class="label-input send_first_email_subject main-div mb-4">
                                    <div class="row ">
                                        <div class="col-lg-3">
                                            <lable class="text-navy">Email subject line</lable>
                                        </div>
                                        <div class="col-lg-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" 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>
                                                @php
                                                $intake_email_subject_line = isset(
                                                $practitionerIntakeForm->intake_email_subject_line
                                                ) &&
                                                $practitionerIntakeForm->intake_email_subject_line
                                                != '' ?
                                                $practitionerIntakeForm->intake_email_subject_line
                                                : 'Intake form from <My business name>';
                                                    @endphp
                                                    <textarea name="intake_email_subject_line" id="send_first_email_subject" type="text" class=" text-left append-text autosizetextaria w-100" style="height: 0px;" placeholder="">{{ $intake_email_subject_line }}</textarea>
                                            </div>
                                            <span class="invalid-feedback d-block float-center"></span>
                                        </div>
                                    </div>
                                </div>

                                <div class="">
                                    <div class="label-input send_first_email_reminder_text main-div mb-0 ">
                                        <div class="row">
                                            <div class="col-lg-3">
                                                <lable class="text-navy">Email text</lable>
                                            </div>
                                            <div class="col-lg-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" 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>
                                                        <option value="<Intake form button>">Intake form button</option>
                                                    </select>
                                                    @php
                                                    $intake_email_text = isset(
                                                    $practitionerIntakeForm->intake_email_text ) && $practitionerIntakeForm->intake_email_text != ''
                                                    ? $practitionerIntakeForm->intake_email_text :
                                                    'Dear <Client first name>,

Please complete your intake form before your
appointment.

We look forward to seeing you soon.

With thanks,

<Service provider name>
<My business name>
<Intake form button>';@endphp
                                                    <textarea name="intake_email_text" id="send_first_email_reminder_text" class=" text-left append-text autosizetextaria w-100" style="height: 0px;">{{ $intake_email_text }}</textarea>
                                                </div>
                                                <span class="invalid-feedback d-block float-center"></span>
                                            </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>
</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');
    }


    //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() {

        //  show hide div intake form
        if ($("input[name='send_intake_form_trough_sms']").is(':checked') == false) {
            $("#sms-part-first").hide();
        }

        if ($("input[name='send_intake_form_trough_email']").is(':checked') == false) {
            $("#email-part-first").hide();
        }
        $("#send_intake_form_trough_sms").click(function() {
            console.log("hiiii");
            $("#sms-part-first").toggle();
        });

        $("#send_intake_form_trough_email").click(function() {
            $("#email-part-first").toggle();
        });

        $('#send_intake_form_trough_email').change(function() {
            if (this.checked) {
                $('.autosizeta').each(function() {
                    this.setAttribute('style', 'height:' + (this.scrollHeight) +
                        'px !important;overflow-y:hidden;');
                }).on('input', function() {
                    this.style.height = 'auto';
                    this.style.height = (this.scrollHeight) + 'px !important';
                });
            }
        });
        //end


        $('input').attr('autocomplete', 'off');
        $(document).ready(function() {
            $(".js-example-basic-single").select2({
                minimumResultsForSearch: -1
            });
        });

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

        $('#intakeForm').parsley();
        $("#intakeForm").submit(function(e) {
            e.preventDefault();
            $(".profile-form-error").hide();
            if ($(this).parsley().isValid()) {
                $(".loading").show();
                $.ajax({
                    url: $(this).attr("action"),
                    data: $(this).serialize(),
                    type: 'POST',
                }).done(function(response) {
                    $(".loading").hide();
                    if (response.status == "success") {
                        Swal.fire({
                            icon: response.status,
                            title: response.msg,
                            showClass: {
                                popup: 'animate__animated animate__fadeInDown'
                            },
                            hideClass: {
                                popup: 'animate__animated animate__fadeOutUp'
                            }
                        });

                        setTimeout(function() {
                            window.location.reload();
                        }, 3000);
                    } else {
                        $.each(response.errors, function(key, value, i) {
                            var input = $('input[name=' + key + ']');
                            var parent = input.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()));
        });

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

    $('#send-intake').on('click', function() {
        console.log($(this).is(':checked'));
        if ($(this).is(':checked') == true) {
            $("#manually_send_intake_form").prop('checked', false);
        }
    });

    $('#manually_send_intake_form').on('click', function() {
        console.log($(this).is(':checked'));
        if ($(this).is(':checked') == true) {
            $("#send-intake").prop('checked', false);
        }
    });
</script>
@endsection