<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="icon" type="image/png" sizes="16x16" href="/images/icons/SL-icon.png">
    <title>{{ isset($title) ? $title : '后台管理'  }}</title>

    <link rel="stylesheet" href="/plugins/layui-admin/layui/css/layui.css">
    <link rel="stylesheet" href="/plugins/fontawesome/css/all.min.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2167475_2x5tvqp7zzu.css">
    <link rel="stylesheet" href="/plugins/circle-process-bar/circleProcessBar.min.css">
{{--    <link rel="stylesheet" href="/css/style.css">--}}
    <script src="/plugins/jquery/jquery-3.3.1.min.js"></script>
    <script src="/plugins/layui-admin/layui/layui.js"></script>
    <script src="/plugins/zx-image-view.min.js"></script>

    <script src="/plugins/circle-process-bar/circleProcessBar.min.js"></script>

    {{--<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>--}}

    <style>
        .silent-layout-content {
            padding: 15px 15px 15px 15px;
        }

        .silent-layout-content .layui-form-item .layui-form-label {
            line-height: 38px;
        }

        .sg-card-header {
            color: #00b6ed;
            font-size: 1.1rem;
        }
        .sg-card-create {
            float: right;
            display: inline;
        }
        .layui-form-item.has-error {
            color: #FF5722;
        }
        .layui-form-item.has-error input {
            border-color: #FF5722;
        }
        .sg-create-container {
            padding-top: 50px;
        }
        .layui-form-item .sg-table-multi-select .layui-form-checkbox {
            margin-top: 0;
        }
        .sg-table-multi-select .layui-table {
            margin: 0;
            border-width: 0;
        }
        .sg-table-multi-select {
            width: 220px;
            height: 300px;
            overflow-y: scroll;
            border: 1px solid #e6e6e6;
        }
        .sg-table-multi-select::-webkit-scrollbar {
            display: none;
        }
        #sg-search-form .layui-inline {
            margin-right: 0;
        }


        /* 上传图片 */
        .sg-image-container-sg {
            display: flex;
            flex-wrap: wrap;
        }
        .sg-image-item-sg {
            position: relative;
            width: 100px;
            height: 100px;
            border: 2px solid #f2f2f2;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 10px;
            margin-top: 10px;
            overflow: hidden;
        }
        .sg-image-sg span:hover {
            background-color: rgba(0, 0, 0, 0.4);
            color: #F0F0F0;
        }
        .sg-image-sg span {
            transition: all 0.5s;
            position: absolute;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
            z-index: 1000;
            font-size: 3.5rem;
            color: transparent;
        }
        .sg-image-item-sg img {
            width: 100%;
        }
        .sg-image-btn-sg {
            font-size: 3rem;
            color: #c2c2c2;
        }

        /* sg-data-box */
        .sg-data-box {
            margin-bottom: 20px;
        }
        .sg-data-header {
            margin-bottom: 2px;
            padding: 15px 10px;
            background-color: white;
            color: grey;
            font-size: 1.1rem;
            font-weight: bold;
        }
        .sg-data-title {
            padding-left: 10px;
            border-left: 3px solid #1E9FFF;
        }
        .sg-data-body {
            display: flex;
            flex-wrap: wrap;
        }
        .sg-data-item {
            width: 25%;
        }
        .sg-data-wrapper {
            margin-bottom: 3px;
            padding: 30px 15px;
            margin-right: 3px;
            display: flex;
            justify-content: space-between;
        }
        .sg-data-item:nth-child(4) .sg-data-wrapper {
            margin-right: 0;
        }
        .sg-data-label {
            padding-left: 10px;
        }
        .sg-data-value {
            font-size: 1.2rem;
            color: #2F4056;
            font-weight: bold;
        }

        /* sg-search-box */
        .sg-search-box {
            background-color: white;
            margin-bottom: 20px;
            padding: 24px 10px 5px 30px;
        }

        .sg-red {
            color: #FF5722;
        }

        .layui-card .layui-table-cell {
            word-break: break-all;
            padding: 0 4px;
            height: auto;
            white-space: normal;
        }
        .layui-table-hover .layui-table-grid-down {
            display: none;
        }
        .help-block {
            color: red;
            margin-top: 5px;
            font-size: .8rem;
        }

        .sg-dark-green-bg {
            background: #009688;
        }

        .sg-green-bg {
            background: #5FB878;
        }

        .sg-blue-bg {
            background: #1E9FFF;
        }

        .sg-red-bg {
            background: #FF5722;
        }

        .sg-orange-bg {
            background: #FFB800;
        }
        .layui-container > .layui-col-sm8 {
            float: none;
        }
        .layui-container > div {
            float: none;
        }
        .layui-container {
            background: white;
        }
    </style>
    @yield('header')
</head>

<body>

<div class="silent-layout-content">
    @yield('content')
</div>
<script type="text/javascript">
    $(function () {
        layui.use(['element', 'layer', 'laydate'], function () {
            var layer = layui.layer;
            @if($errors->has('sg_error_info'))
            layer.msg("{{ $errors->first('sg_error_info') }}", {
                icon: 2
            });
            @endif

            @if(session('sg_success_info'))
            layer.msg("{{ session('sg_success_info') }}", {
                icon: 1
            }, function() {

            });

            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);

            @endif




            $('.sg-image-container-sg').on('click', '.sg-image-btn-sg', function () {
                var that = this,
                    type = $(that).parent().attr('data-type');
                type = type === 'multi' ? 'multi' : 'single';
                layer.open({
                    title: '选择图片',
                    type: 2,
                    area: ['90%', '90%'],
                    content: '/admin/upload-images/index',
                    btn: ['确认', '取消'],
                    yes: function(index, layero) {
                        var body = layer.getChildFrame('body', index),
                            images = [],
                            html = '';
                        $(body).find('.sg-image-item.sg-selected').each(function () {
                            images.push($(this).attr('data-path'));
                        });
                        if(type === 'single') {
                            images = images.slice(0, 1);
                        }
                        $(that).next().val(images.join(','));
                        $(that).parent().find('.sg-image-sg').remove();
                        for(var i = 0; i < images.length; ++i) {
                            html += '<div class="sg-image-item-sg sg-image-sg" data-path="' + images[i] + '"><img src="' + images[i] + '"><span><i class="fas fa-times"></i></span></div>'
                        }
                        $(that).before(html);
                        layer.close(index)
                    },
                    btn2: function(index, layero){
                        layer.close(index)
                    }
                });
            }).on('click', '.sg-image-sg', function () {
                var $parent = $(this).parent(),
                    images = [];
                $(this).remove();
                $parent.find('.sg-image-sg').each(function () {
                    images.push($(this).attr('data-path')) ;
                });
                $parent.find('.sg-image-input-sg').val(images.join(','));
            });
        });
    })
</script>
@yield('footer')
</body>

</html>