{{-- lean wrapper for 2 pane page --}}
<!doctype html>
<html lang="en" class="h-100 overflow-hidden">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="/js/jquery-3.5.1.min.js"></script>
    <link rel="stylesheet" href="/fontawesome-free-5.13.1-web/css/all.min.css">
    <link href="/css/app.css?v={{config('app.asset_version')}}" rel="stylesheet">
    <link href="/css/style.css?v={{config('app.asset_version')}}" rel="stylesheet">
    <link href="/v-splitter-px/v-splitter.css?v={{config('app.asset_version')}}" rel="stylesheet" >
    <script src="/v-splitter-px/v-splitter.js?v={{config('app.asset_version')}}"></script>
    <link rel="stylesheet" href="{{ asset('/css/toastr.min.css') }}">
    <script src="{{ asset('js/toastr.min.js') }}" type="application/javascript"></script>
    <title>Leadership Health</title>
    <style>
        body.mc-parent>.phpdebugbar {
            display: none !important;
        }
    </style>
</head>
<body class="h-100 mc-parent" data-pro-uid="{{$pro ? $pro->uid : ''}}">
    <iframe id="stag_mcp_lhs" src="/blank" frameborder="0" class="h-100 w-100"></iframe>
    <div class="stag-video-bar collapsed d-none mcp-theme-1">
        <div class="bg-aliceblue d-flex align-items-center border-bottom p-2 stag-video-bar-header">
            <i class="fa fa-video text-secondary mr-1"></i>
            <div class="text-secondary font-weight-bold flex-grow-1 c-pointer" onclick="return toggleVideoBar($(this).closest('.stag-video-bar'))">Video</div>
            <a href="#" if-collapsed="" class="ml-1 px-1" onclick="return toggleVideoBar($(this).closest('.stag-video-bar'))"><i class="fa fa-chevron-up"></i></a>
            <a href="#" if-not-collapsed="" class="ml-1 px-1" onclick="return toggleVideoBar($(this).closest('.stag-video-bar'))"><i class="fa fa-chevron-down"></i></a>
            <a href="#" class="ml-1 px-1" onclick="return $(this).closest('.stag-video-bar').addClass('d-none'); return false;"><i class="fa fa-times"></i></a>
        </div>
        <iframe id="stag_mcp_rhs" src="" frameborder="0" class="h-100 w-100"></iframe>
    </div>
    <script>
        window.top.localStorage.currentProUid = "{{$pro ? $pro->uid : ''}}";
        // initVSplitter('stag-mc-main', $('.app-left-panel'), $('.app-right-panel'));
        window.toggleVideoBar = function(_videoBar) {
            _videoBar.toggleClass('collapsed');
            return false;
        };
        window.openInLHS = function(_url) {
            $('#stag_mcp_lhs')[0].contentWindow.fastLoad(_url, true, false);
            return false;
        };
        window.openInRHS = function(_url) {
            $('#stag_mcp_rhs').attr('src', _url);
            let videoBar = $('.stag-video-bar');
            if(videoBar.is('.d-none')) {
                videoBar.removeClass('d-none');
            }
            if(videoBar.is('.collapsed')) {
                toggleVideoBar(videoBar);
            }
            return false;
        };
        window.openInLHS = function(_url) {
            $('#stag_mcp_lhs')[0].contentWindow.fastLoad(_url);
            return false;
        }
        window.ensureRHS = function() {
            if(!$('#stag_mcp_rhs').length) window.location.reload();
        };
        window.toggleRHS = function() {
            var body = $('body'), leftPanel = $('.app-left-panel'), result = '';
            if(!body.is('.stag_rhs_collapsed')) {
                body.addClass('stag_rhs_collapsed');
                leftPanel.attr('data-prev-style', leftPanel.attr('style'));
                leftPanel.attr('style', '');
                leftPanel.removeClass('col-9').addClass('col-12');
                result = 'collapsed';
            }
            else {
                if(leftPanel.attr('data-prev-style')) {
                    leftPanel.attr('style', leftPanel.attr('data-prev-style'));
                }
                leftPanel.attr('data-prev-style', '');
                leftPanel.removeClass('col-12').addClass('col-9');
                body.removeClass('stag_rhs_collapsed');
                result = 'expanded';
            }
            window.localStorage.stagRHS = result;
            return result;
        };
        window.showRHS = function() {
            var body = $('body'), leftPanel = $('.app-left-panel');
            if(body.is('.stag_rhs_collapsed')) {
                if(leftPanel.attr('data-prev-style')) {
                    leftPanel.attr('style', leftPanel.attr('data-prev-style'));
                }
                leftPanel.attr('data-prev-style', '');
                leftPanel.removeClass('col-12').addClass('col-9');
                body.removeClass('stag_rhs_collapsed');
                window.localStorage.stagRHS = 'expanded';
                return 'expanded';
            }
        };
        window.hideRHS = function() {
            var body = $('body'), leftPanel = $('.app-left-panel');
            if(!body.is('.stag_rhs_collapsed')) {
                body.addClass('stag_rhs_collapsed');
                leftPanel.attr('data-prev-style', leftPanel.attr('style'));
                leftPanel.attr('style', '');
                leftPanel.removeClass('col-9').addClass('col-12');
                window.localStorage.stagRHS = 'collapsed';
                result = 'collapsed';
            }
        };
        $(document).ready(function() {
            var body = $('body'), leftPanel = $('.app-left-panel');
            if(!{{$pro->is_enrolled_as_mcp ? 1 : 0}}) {
                if(!body.is('.stag_rhs_collapsed')) {
                    body.addClass('stag_rhs_collapsed');
                    leftPanel.attr('data-prev-style', leftPanel.attr('style'));
                    leftPanel.attr('style', '');
                    leftPanel.removeClass('col-9').addClass('col-12');
                    window.localStorage.stagRHS = 'collapsed';
                    return 'collapsed';
                }
            }
            if(window.localStorage.stagRHS === 'collapsed') {
                window.hideRHS();
            }
            else {
                window.showRHS();
            }
        });
    </script>
</body>
</html>
