@extends ('layouts.patient')
@section('inner-content')

    <div>

        <h4 class="font-weight-bold mb-0 font-size-16">Sleep Study</h4>

        <hr class="m-neg-4 mb-0">

        <div class="d-flex align-items-start m-neg-4" id="sleepStudyContainer">
            <div class="ss-leftnav border-right h-100 mh-100 overflow-overlay-on-hover">
                <a href="#" data-target-key="sleep-apnea-background" class="d-block py-1 border-bottom text-nowrap bg-aliceblue font-weight-bold ss-active">Sleep Apnea Background</a>
            </div>
            <div class="ss-content flex-grow-1 h-100 mh-100 overflow-overlay-on-hover" style="max-width:80%">
                <div class="border-bottom pb-4" data-key="sleep-apnea-background">
                    @include('app.patient.sleep-study.sleep-apnea-background')
                </div>
            </div>
        </div>

    </div>

    <script>
        (function () {
            function init() {
                adjustContainerHeight();
                $(window).on('resize', adjustContainerHeight);
                $(window).on('scroll', adjustContainerHeight);

                $(document)
                    .off('click.ss-leftnav', '.ss-leftnav>a[data-target-key]')
                    .on('click.ss-leftnav', '.ss-leftnav>a[data-target-key]', function() {
                        /*$('div[data-key="' + $(this).attr('data-target-key') + '"]')[0].scrollIntoView({
                            behavior: "smooth",
                            inline: "start",
                            block: "start"
                        });*/
                        let step = $('div[data-key="' + $(this).attr('data-target-key') + '"]');
                        $('.ss-content').scrollTop(0);
                        $('.ss-content').scrollTop(
                            step.offset().top -
                            $('.ss-content').offset().top
                        );
                        $(this).addClass('bg-aliceblue font-weight-bold ss-active').siblings().removeClass('bg-aliceblue font-weight-bold ss-active');
                        step.addClass('spot-highlight');
                        setTimeout(() => {
                            step.removeClass('spot-highlight');
                        }, 1500);
                        return false;
                    });

                $(document)
                    .off('mouseenter.ss-content', '.ss-content>[data-key]')
                    .on('mouseenter.ss-content', '.ss-content>[data-key]', function() {
                        let a = $('.ss-leftnav>a[data-target-key="' + $(this).attr('data-key') + '"]');
                        if(a.length) {
                            a.addClass('bg-aliceblue font-weight-bold ss-active').siblings().removeClass('bg-aliceblue font-weight-bold ss-active');
                        }
                    });
            }
            function adjustContainerHeight() {
                let container = $('#sleepStudyContainer'),
                    targetHeight = $(window).height() - (container.offset().top - $(window).scrollTop());
                container.css({
                    height: targetHeight + 'px',
                    minHeight: targetHeight + 'px',
                    maxHeight: targetHeight + 'px',
                });
            }

            addMCHook('refreshSleepStudyStep', function() {
                let step = $('a.ss-active').attr('data-target-key');
                if(step) {
                    $.get('{{route('patients.view.sleep-study-step', $patient)}}?step=' + step, _data => {
                        let stepElem = $('div[data-key="' + step + '"]');
                        stepElem.html(_data);
                        stepElem.addClass('spot-highlight');
                        setTimeout(() => {
                            stepElem.removeClass('spot-highlight');
                        }, 1500);
                        initMoes();
                        runMCInitializer('sleep-apnea-background');
                    });
                }
                return false;
            });

            addMCInitializer('sleepStudy', init, '#sleepStudyContainer');
        }).call(window);
    </script>

@endsection
