@extends('layout.home')
@section('csrf-token')
    <meta name="csrf-token" content="{{ csrf_token() }}" />
@endsection
@section('title', '站点设置')
@section('content')
    @if(Session::get('msg'))
        <div class="alert alert-success">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>{{ Session::get('msg') }}
        </div>
    @endif

    @if(Session::get('dmsg'))
        <div class="alert alert-danger">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>{{ Session::get('dmsg') }}
        </div>
    @endif
    <style>
        input{height: 30px!important;width: 200px !important;}
        textarea{width: 250px!important;}
        div{font-size: 12px!important;}
        .attr{display: flex;align-items: flex-start;font-size: 12px;}
        .attr .item{display: flex;margin-right: 20px;height: 30px;align-items: center;}
        .attr .item .desc{line-height: 30px;margin-right: 5px;min-width: 50px;}
    </style>
    <div class="contentpanel contentContainer" style="flex-direction: column;padding: 20px;overflow-y: auto">
        <div class="layui-row layui-form mt10 padding10">
            <form>
                <div class="layui-form-item">
                    <div class="layui-input-block mb20">
                        <a href="javascript:;" class="layui-btn layui-btn-sm layui-btn-primary" id="add">增加一条</a>
                    </div>
                    <div class="layui-input-block content" style="overflow-y: scroll">
                        @foreach($detail as $name=>$url)
                            <div class="attr mt10">
                                <div class="item">
                                    <span class="desc">站点名称：</span>
                                    <input type="text" class="layui-input name" value="{{$name}}">
                                </div>
                                <div class="item">
                                    <span class="desc">站点地址：</span>
                                    <input type="text" class="layui-input url" value="{{$url}}">
                                </div>
                                <div class="item">
                                    <a href="javascript:;" class="layui-btn layui-btn-xs layui-btn-primary layui-border-red del">
                                        <i class="layui-icon layui-icon-delete"></i>删除
                                    </a>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
                @if(in_array('update', $actionType))
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="submit" id="sub" class="layui-btn">立即提交</button>
                    </div>
                </div>
                @endif
            </form>
        </div>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            layui.use(function(){
                $('.content').css('height',$(document).height()-250);
                var form = layui.form;
                $('#add').click(function () {
                    $('.content').append(getHtml());
                    form.render();
                });
                $(document).on('click','.del',function () {
                    if($('.attr').length==1){
                        layer.msg('至少保留一条');
                        return false;
                    }
                    $(this).parent().parent().remove();
                });
                $('form').submit(function () {
                    let arr =[];
                    let isError=false;
                    $('.attr').each(function () {
                        if($(this).find('.name').val()==''){
                            isError=true;
                            $(this).focus();
                            layer.msg('站点名称不可为空');
                            return false;
                        }
                        if($(this).find('.url').val()==''){
                            isError=true;
                            $(this).focus();
                            layer.msg('站点网址不可为空');
                            return false;
                        }
                        arr.push({
                            name:$(this).find('.name').val(),
                            url:$(this).find('.url').val(),
                        });
                    });
                    if(isError){
                        return false;
                    }
                    var link = "{{ url('/setting/siteList',['id'=>request('id')]) }}";
                    layer.confirm('是否确定保存此设置项？', {title: ''}, function () {
                        layer.closeAll();
                        layer.load(3, {shade: [0.1, '#333333']});
                        let params = {
                            _token: "{{ csrf_token() }}",
                            list:arr,
                        };
                        $.post(link, params, function (ret) {
                            layer.closeAll();
                            if (ret.error != 0) {
                                layer.msg(ret.msg, {icon: 2});
                                return false;
                            }
                            layer.msg('保存成功', {icon: 1});
                            setTimeout(function () {
                                window.location.href='{{url('/setting/siteList')}}';
                            },800);
                        }, 'json');
                    });
                    return false;
                });
                function getHtml(str){
                    str = str || ''
                    let html = '<div class="attr mt10">';
                    html +='<div class="item"><span class="desc">站点名称：</span>';
                    html +='<input type="text" class="layui-input name" placeholder="例：HEHAINOM_US" value="'+str+'"></div>';
                    html +='<div class="item"><span class="desc">站点网址：</span>';
                    html +='<input type="text" class="layui-input url" placeholder="例：http://www.网址.com" value="'+str+'"></div>';
                    html +='<div class="item">';
                    html +='<a href="javascript:;" class="layui-btn layui-btn-xs layui-btn-primary layui-border-red del">';
                    html +='<i class="layui-icon layui-icon-delete"></i>删除';
                    html +='</a></div>';
                    html +='</div>';
                    return html;
                }
            });
        });
    </script>
@endsection