<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>{{ config('app.name') }}</title>

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">

    {{-- mc initializers --}}
    <script src="/js/mc-init.js?_=2"></script>

    {{-- vue --}}
    <script src="/js/vue.js"></script>

    {{-- Quill RTE --}}
    <link href="/quill/quill.snow.css" rel="stylesheet">
    <script src="/quill/quill.js"></script>

    <!-- <link href="{{ asset('bootstrap-4.5.0/css/bootstrap.css') }}" rel="stylesheet"> -->
    <link rel="stylesheet" href="/fontawesome-free-5.13.1-web/css/all.min.css">
    <link href="{{ asset('/css/app.css') }}" rel="stylesheet">
    <link href="{{ asset('/css/style.css') }}" rel="stylesheet">
    <link href="{{ asset('/css/yemi.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="{{ asset('/css/toastr.min.css') }}">
    <link href="{{asset('/css/z.css')}}" rel=stylesheet>
    <!-- Styles -->

    <script src="{{ asset('js/app.js') }}" type="application/javascript"></script>
    <script src="/js/jquery-3.5.1.min.js"></script>
    <script src="/js/jquery.form.min.js"></script>
    <script src="{{ asset('js/toastr.min.js') }}" type="application/javascript"></script>
    <script src="/js/yemi.js?_=7" type="application/javascript"></script>

    {{-- med ac --}}
    <link href='/css/autocomplete-lhc.min.css' rel="stylesheet">
    <script src='/js/autocomplete-lhc.js'></script>

    {{-- inline bootstrap datepicker --}}
    <link href='/bootstrap-datepicker/css/bootstrap-datepicker.min.css' rel="stylesheet">
    <script src='/bootstrap-datepicker/js/bootstrap-datepicker.min.js'></script>

    @yield('head')
</head>

<body>
    <div id="mask" style="background: rgba(0, 0, 0, 0) url(&quot;/vanillaspin.gif&quot;) no-repeat scroll center center; position: fixed; top: 0px; left: 0px; z-index: 9999; width: 100%; height: 100%; display: none;">
    </div>
    <div id="moe-form-mask" style="background: rgba(0, 0, 0, .1) no-repeat scroll center center; position: fixed; top: 0px; left: 0px; z-index: 99; width: 100%; height: 100%; display: none;">
    </div>

    <nav class="navbar navbar-expand-md navbar-dark stag-primary-bg py-1">
        <a class="navbar-brand" href="">Leadership Health</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navBar" aria-controls="navBar" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navBar">
            <ul class="navbar-nav mr-auto">

            </ul>

        </div>

        <a href="#" class="stag_rhs_toggle d-none d-md-block text-white" title="Toggle Video Pane">
            <i class="fa fa-arrow-right"></i>
        </a>
    </nav>

    <main role="main" class="stag-content px-0">

        @yield('content')

    </main><!-- /.container -->

    <!-- shortcut/suggest component -->
    <link href="/css/shortcut.css" rel=stylesheet>
    <script src="/js/shortcut.js" type="application/javascript"></script>

    <!-- script to handle history/back/forward for mc/xxx pages
    + all other JS initialization needed in fastLoaded pages  -->
    <script src="/js/find-event-handlers.js" type="application/javascript"></script>

    <script>
        window.noMc = true;
    </script>

    <script src="/js/mc.js?_=4" type="application/javascript"></script>

    <script>
        $(document).ready(function() {
            const debounce = (func, wait) => {
                let timeout;
                return function executedFunction(...args) {
                    const later = () => {
                        clearTimeout(timeout);
                        func(...args);
                    };
                    clearTimeout(timeout);
                    timeout = setTimeout(later, wait);
                };
            };
            var lastTerm = '';
            var returnedFunction = debounce(function() {
                var term = $.trim($('#patient-search').val());
                if (!!term && lastTerm !== term) {
                    $.get('/patients-suggest?term=' + term, function(_data) {
                        $('.suggestions-outer').html(_data).removeClass('d-none');
                    });
                    lastTerm = term;
                } else {
                    $('.suggestions-outer').addClass('d-none');
                }
            }, 250);
            $('#patient-search')
                .on('keydown', function(e) {
                    var term = $.trim($('#patient-search').val());
                    var activeItem = $('.suggestions-outer .suggest-item.active');
                    switch (e.which) {
                        case 27:
                            $('.suggestions-outer').addClass('d-none');
                            return false;
                        case 38:
                            if (activeItem.prev().length) {
                                activeItem.prev()
                                    .addClass('active')
                                    .siblings().removeClass('active');
                                activeItem = $('.suggestions-outer .suggest-item.active');
                                if (activeItem.length) {
                                    activeItem[0].scrollIntoView();
                                }
                            }
                            return false;
                        case 40:
                            if (activeItem.next().length) {
                                activeItem.next()
                                    .addClass('active')
                                    .siblings().removeClass('active');
                                activeItem = $('.suggestions-outer .suggest-item.active');
                                if (activeItem.length) {
                                    activeItem[0].scrollIntoView();
                                }
                            }
                            return false;
                        case 13:
                            if (activeItem.length) {
                                activeItem.first().click();
                            }
                            return false;
                        default:
                            if (!!term) {
                                $('.suggestions-outer')
                                    .html('<span class="d-block no-suggest-items">Searching...</span>')
                                    .removeClass('d-none');
                                returnedFunction();
                            } else {
                                $('.suggestions-outer').addClass('d-none');
                            }
                            break;
                    }
                })
                .on('keypress', function(e) {
                    var term = $.trim($('#patient-search').val());
                    if (!!term) {
                        $('.suggestions-outer')
                            .html('<span class="d-block no-suggest-items">Searching...</span>')
                            .removeClass('d-none');
                        returnedFunction();
                    } else {
                        $('.suggestions-outer').addClass('d-none');
                    }
                });
            $(document).on('click', '.suggest-item.patient-suggest[data-target-uid]', function() {
                $('#patient-search').val('');
                $('.suggestions-outer').addClass('d-none');
                fastLoad('/patients/view/' + $(this).attr('data-target-uid'), true, false, false);
                return false;
            });
        });
    </script>
    <script>
        function showStagPopup(_key) {
            $('html, body').addClass('no-scroll');
            let stagPopup = $('[stag-popup-key="' + _key + '"]');
            stagPopup.addClass('show');
            stagPopup.find('[moe][initialized]').removeAttr('initialized');
            initMoes();
            return false;
        }
        function submitStagPopup(_form) {
            if(!_form[0].checkValidity()) {
                _form[0].reportValidity();
                return false;
            }
            showMask();
            $.post(_form.attr('action'), _form.serialize(), function(_data) {
                fastReload();
            });
            return false;
        }
        function closeStagPopup() {
            $('.stag-popup').removeClass('show');
            $('html, body').removeClass('no-scroll');
            return false;
        }
        (function() {
            window.initStagPopupEvents = function () {
                $(document).on('click', '.stag-popup', function(_e) {
                    if($(_e.target).is('.stag-popup')) {
                        closeStagPopup();
                    }
                });
            }
            addMCInitializer('stag-popups', window.initStagPopupEvents);
        })();
    </script>

</body>

</html>
