<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>用户中心 v{{ system_version() }}</title>
    <link rel="stylesheet" href="{{ asset('CmsProUi/component/pear/css/pear.css') }}">
    <link rel="stylesheet" href="{{ asset('CmsProUi/font-awesome/4.7.0/css/font-awesome.min.css') }}">
    <link rel="stylesheet" href="{{ asset('Admin/css/admin.dark.css') }}">
    <link rel="stylesheet" href="{{ asset('Admin/css/admin.css') }}">
    <link rel="stylesheet" href="{{ asset('Admin/css/variables.css') }}">
    <link rel="stylesheet" href="{{ asset('Admin/css/reset.css') }}">
    @stack('page_styles')
    <style>
        .pear-admin .layui-footer {
            text-align: center;
            display: block;
        }
        .layui-footer a:not(.layui-btn) {
            color: #16b777;
            padding: 0px 2px 0px 2px;
        }
        .layui-tab .layui-tab-title {
            border-bottom-style: inset;
        }

        #sideMenu .pear-nav-tree .layui-nav-child {
            display: none;
        }
        #sideMenu .pear-nav-tree .layui-nav-itemed > .layui-nav-child,
        #sideMenu .pear-nav-tree dd.layui-nav-itemed > .layui-nav-child {
            display: block !important;
            height: auto !important;
            overflow: visible !important;
        }
        .layui-body {
            overflow-y: auto;
        }
        .layui-body .pear-container {
            padding: 20px;
        }
    </style>
</head>
<body class="layui-layout-body pear-admin">
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
            <div class="layui-logo">
                <img class="logo">
                <span class="title"></span>
            </div>
            <ul class="layui-nav layui-layout-left">
                <li class="collapse layui-nav-item"><a href="#" class="layui-icon layui-icon-shrink-right"></a></li>
                <li class="refresh layui-nav-item"><a href="#" class="layui-icon layui-icon-refresh-1" loading=600></a></li>
            </ul>
            <div id="control" class="layui-layout-control"></div>
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item layui-hide-xs"><a href="{{ url('/') }}" class="layui-icon layui-icon-website" target="_blank"></a></li>
                @auth('web')
                <li class="layui-nav-item user">
                    <a class="layui-icon layui-icon-username" href="javascript:;"> {{ auth('web')->user()->nickname ?? auth('web')->user()->username }}</a>
                    <dl class="layui-nav-child" style="width: 160px;">
                        <dd style="height: 90px; padding: 5px;">
                            <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
                                <a user-menu-type="_iframe" user-menu-url="{{ url('/user/account') }}" user-menu-id="10006" user-menu-title="我的账号">
                                    <img src="{{ auth('web')->user()->avatar ?? asset('Admin/images/avatar.png') }}" style="max-height: 80px; border-radius: 50%;">
                                </a>
                            </div>
                        </dd>
                        <dd><hr></dd>
                        <dd><a user-menu-type="_iframe" user-menu-url="{{ url('/user/account') }}" user-menu-id="10006" user-menu-title="账号管理">账号管理</a></dd>
                        <dd><a href="javascript:void(0);" class="SetPassword">修改密码</a></dd>
                        <dd><a href="javascript:void(0);" class="logout">注销登录</a></dd>
                    </dl>
                </li>
                @endauth
                <li class="layui-nav-item layui-hide-xs"><a href="#" class="fullScreen layui-icon layui-icon-screen-full"></a></li>
                <li class="layui-nav-item setting"><a href="#" class="layui-icon layui-icon-more-vertical"></a></li>
            </ul>
        </div>
        <div class="layui-side layui-bg-black">
            <div class="layui-logo">
                <img class="logo">
                <span class="title"></span>
            </div>
            <div class="layui-side-scroll">
                <div id="sideMenu"></div>
            </div>
        </div>
        <div class="layui-body">
            <div id="content">@yield('content')</div>
        </div>
        <div class="layui-footer">
            <a href="http://www.cmspro.cn" target="_blank">CMSPRO</a> v{{ system_version() }} &copy; 2015-{{ date('Y') }} Copyright by <a href="http://www.renhuali.cn" target="_blank">Holley</a>
        </div>
        <div class="pear-cover"></div>
        <div class="loader-wrapper">
            <div class="loader"></div>
        </div>
    </div>
    <div class="pear-collapsed-pe collapse">
        <a href="#" class="layui-icon layui-icon-shrink-right"></a>
    </div>
    <script src="{{ asset('CmsProUi/component/layui/layui.js') }}"></script>
    <script src="{{ asset('CmsProUi/component/pear/pear.js') }}"></script>
    <script>
    layui.use(['element', 'toast', 'admin', 'form', 'jquery', 'button', 'popup'], function() {
        var toast = layui.toast;
        var $ = layui.jquery;
        var form = layui.form;
        var button = layui.button;
        var admin = layui.admin;
        var popup = layui.popup;
        var element = layui.element;

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        });

        $(document).on('click', '.refresh', function(e) {
            e.stopImmediatePropagation();
            if (window.PearAdmin) {
                PearAdmin.refresh();
            } else {
                window.location.reload();
            }
        });

        $(document).on('click', '#sideMenu .site-demo-active', function(e) {
            e.stopImmediatePropagation();
            setTimeout(function() {
                if (window.PearAdmin) {
                    PearAdmin.refresh();
                }
            }, 100);
        });

        $(document).on('click', '[user-menu-id]', function(e) {
            var menuType = $(this).attr('user-menu-type') || $(this).attr('menu-type');
            if (menuType === '0' || menuType === 0) {
                return;
            }
            e.stopImmediatePropagation();
            var menuId = $(this).attr('user-menu-id');
            var type = $(this).attr('user-menu-type');
            var url = $(this).attr('user-menu-url');
            var title = $(this).attr('user-menu-title');
            if (type === '_layer' && url) {
                layer.open({ type: 2, title: title, content: url, area: ['80%', '80%'], maxmin: true });
            } else if (url && window.PearAdmin) {
                PearAdmin.changePage({ id: menuId, title: title, url: url, type: type || '_iframe', close: true });
            } else if (url) {
                window.location.href = url;
            }
        });

        admin.setConfigurationPath("{{ url('/api/user/config.json') }}");
        localStorage.removeItem('muilt-tab');
        admin.render();

        function highlightCurrentMenu() {
            var currentPath = window.location.pathname;
            if (currentPath === '/user' || currentPath === '/user/') {
                currentPath = '/user/dashboard';
            }
            var $menuLinks = $('#sideMenu .site-demo-active');
            $menuLinks.each(function() {
                var menuUrl = $(this).attr('menu-url');
                if (menuUrl === currentPath) {
                    $(this).closest('li, dd').addClass('layui-this');
                    $(this).parents('.layui-nav-child').each(function() {
                        $(this).css({ display: 'block', height: 'auto', overflow: '' });
                        $(this).parent('li, dd').addClass('layui-nav-itemed');
                    });
                    var $parentUl = $(this).closest('ul[pear-id]');
                    if ($parentUl.length) {
                        var pearId = $parentUl.attr('pear-id');
                        $('#sideMenu .pear-nav-tree').css({ display: 'none' });
                        $parentUl.css({ display: 'block' });
                        $('#control .pear-nav-control').find('.layui-this').removeClass('layui-this');
                        $('#control .pear-nav-control').find('[pear-id="' + pearId + '"]').addClass('layui-this');
                    }
                    return false;
                }
            });
        }

        var menuObserver = new MutationObserver(function(mutations) {
            if ($('#sideMenu .pear-nav-tree').length) {
                menuObserver.disconnect();
                highlightCurrentMenu();
            }
        });
        menuObserver.observe(document.getElementById('sideMenu'), { childList: true, subtree: true });

        setTimeout(function() {
            if ($('#sideMenu .pear-nav-tree').length) {
                highlightCurrentMenu();
            }
        }, 3000);

        admin.logout(function() {
            doLogout();
            popup.success("注销成功", function() {
                location.href = "{{ url('/user/login') }}";
            });
            return new Promise(function(resolve) { resolve(true); });
        });

        $(".SetPassword").click(function() {
            layer.open({
                type: 2,
                maxmin: false,
                title: "修改密码",
                shade: 0.1,
                area: ['400px', '268px'],
                content: "{{ url('/user/account/password') }}"
            });
        });

        // 清理前端缓存（浏览器本地缓存，清理后刷新页面）
        $(".ClearFrontendCache").click(function() {
            layui.cache = {};
            sessionStorage.clear();
            localStorage.clear();
            popup.success("前端缓存已清理", function() {
                location.reload();
            });
            return true;
        });

        // 清理后端缓存（服务器端缓存，不刷新页面）
        $(".ClearBackendCache").click(function() {
            $.ajax({
                url: "{{ url('/api/user/cache/clear') }}",
                type: 'GET',
                dataType: 'json',
                success: function(res) {
                    if (res.code === 0) {
                        popup.success("后端缓存已清理");
                    } else {
                        popup.error(res.message || "清理失败");
                    }
                }
            });
            return true;
        });

        function doLogout() {
            $.ajax({
                url: "{{ url('/api/user/logout') }}",
                type: 'POST',
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            });
        }
    });
    </script>
    @yield('script')
    @stack('page_scripts')
</body>
</html>
