@extends('admin.layouts.base')
@section('add_css')

@endsection
@section('content')

    <div class="layui-form layui-form-pane" lay-filter="layuiadmin-form-role" id="layuiadmin-form-role" style="padding:  20px 20px 20px 0">
        {{ csrf_field() }}
        <div class="layui-form-item">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" lay-verify="rq" autocomplete="off" class="layui-input" />
            </div>
        </div>
        <div class="layui-form-item insert_upload_logo">
            <label class="layui-form-label">图片</label>
            <div class="layui-input-inline ">
                <div class="layui-upload-drag upload-event">
                    <i class="layui-icon"></i>
                    <p>点击上传，或将文件拖拽到此处</p>
                </div>
                <input class="layui-upload-file" type="file" accept="undefined"
                       name="file">
            </div>
            <div class="layui-input-inline" style="display: none;width: auto">
                <input type="hidden" name="thumb" value=""
                       class="upload_input"><a
                        href="javascript:"
                        class="upload-close layui-icon layui-icon-close "></a><img
                        src="" alt="" class="upload_img"
                        style="max-height: 148px;">
            </div>
            <button class="layui-btn layui-btn-primary" layadmin-event="uploadplace"
                    data-obj=".insert_upload_logo">图片空间
            </button>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">链接地址</label>
            <div class="layui-input-block">
                <input type="text" name="url" lay-verify="rq" autocomplete="off" class="layui-input" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">背景颜色</label>
            <div class="layui-input-inline" style="width: 120px;">
                <input type="text" value="" placeholder="请选择颜色" name="color" class="layui-input" id="test-colorpicker-form-input">
            </div>
            <div class="layui-inline" style="left: -11px;">
                <div id="test-colorpicker-dome3"></div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">类型</label>
            <div class="layui-input-block">
                <select name="type">
                    @if(count($type)>0)
                        @foreach ($type as $k=>$v)
                            <option value="{{ $k }}">{{ $v }}</option>

                        @endforeach
                    @endif
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">排序</label>
            <div class="layui-input-block">
                <input type="number" name="sort" lay-verify="" value="0" autocomplete="off" class="layui-input" />
            </div>
        </div>


        <div class="layui-form-item layui-hide">

            <button class="layui-btn" lay-submit lay-filter="LAY-form-submit" id="LAY-form-submit">提交</button>
        </div>
    </div>


@endsection
@section('add_js')

    <script>
        layui.use(['index', 'form', 'verify', 'custorm','colorpicker'], function () {
            var $ = layui.$
                , custorm = layui.custorm
                , form = layui.form
                ,colorpicker = layui.colorpicker;

            custorm.upload_one(".insert_upload_logo");

            //表单赋值
            colorpicker.render({
                elem: '#test-colorpicker-dome3'
                ,color: '#1c97f5'
                ,done: function(color){
                    $('#test-colorpicker-form-input').val(color);
                }
            });

        });
    </script>
@endsection