@extends('cp.web.layouts.admin')

@section('content')
    <div class="row">
        <div class="col-lg-12">
            <h1 class="page-header">cp列表</h1>
        </div>
        <!-- /.col-lg-12 -->
    </div>
    <div class="panel">
        @if (session('message'))
            <div class="alert alert-success" role="alert">{{session('message')}}</div>
        @endif

        @if(($errors->has('message')))
            <div class="alert alert-danger" role="alert">{{$errors->first('message')}}</div>
        @endif
        <form action='{{url("manage/cplist")}}' method="get">
            <div class="form-group">
                <label>cp</label>
                <input class="form-control" name="cp" value="{{ @$param['cp'] }}">
            </div>
            <button type="submit" class="btn btn-success">查询</button>
            <a type="button" class="btn btn-success createCp"  data-title="添加cp">添加cp</a>
        </form>
    </div>

    <div class="panel panel-default">

        <div class="panel-heading">
            列表
        </div>
        <!-- /.panel-heading -->
        <div class="panel-body">
            <div class="dataTable_wrapper">
                <table class="table table-striped table-bordered table-hover" id="dataTables-example" style="text-align: center">
                    <tr>
                        <th>id</th>
                        <th>cp</th>
                        <th>创建时间</th>
                        <th>操作</th>
                    </tr>
                    @foreach ($data as $record)
                        <tr >
                            <td>{{ $record->id }}</td>
                            <td>{{ $record->username }}</td>
                            <td>{{ $record->created_at }}</td>
                            <td>{{ $record->created_at }}</td>
                        </tr>
                    @endforeach
                </table>
            </div>
            <div class="paging">
                总计：{{ $data->total() }}
                {{ $data->links() }}
            </div>
        </div>
    </div>
    <div class="modal fade " id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" >
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close js-modal-close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">文章内容</h4>
                </div>
                <div class="modal-body">
                    <form class="form js-ajax-from">

                    </form>
                </div>
                <div class="modal-footer">


                </div>
            </div>
        </div>
    </div>
@endsection
@push('script')
<script >

    $(function () {

        adduhtml = '<div class="form-group addu"><label for="username">cp名</label><input type="text" class="form-control" id="username" name="username" placeholder="cp名"> <span class="alert alert-danger js-error-msg" style="display: none"></span></div>';
        new AlertWindow({
            "startEle":".createCp",
            "startAjax":false,
            "closeEle":".js-modal-close",
            "saveEle":".js-ajax-add",
            "endAjax":{
                "requiredata":["username"],
                "url":"/manage/createCp",
                "type":"post"
            },
            "formHtml":adduhtml,
            "saveHtml":'<button type="button" class="btn btn-default js-modal-close" data-dismiss="modal">关闭</button><button type="button" class="btn btn-primary js-ajax-add">提交</button>',
        });

    });
    function AlertWindow(obj) {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
            }
        });

        this.startEle       = obj.startEle      || '.js-alert-start';
        this.startAjax      = obj.startAjax     || false;
        this.endAjax        = obj.endAjax       || false;
        this.closeEle       = obj.closeEle      || ".js-modal-close";
        this.saveEle        = obj.saveEle       || ".js-modal-save";
        this.errorEle       = obj.errorEle      || ".js-error-msg";
        this.oStartEle      = $(this.startEle);
        this.formHtml       = obj.formHtml;
        this.saveHtml       =obj.saveHtml;

        this.__init__();
    }
    AlertWindow.prototype.__init__ = function () {

        fromOldHtml = '';
        //打开
        var that = this;
        var editid = '';
        if(that.startAjax){
            that.oStartEle.on('click',function (e) {
                e.preventDefault();
                var data = {};
                if(that.startAjax.data){
                    data[that.startAjax.data.key] = $(this).data(that.startAjax.data.key);
                }
                $.ajax({
                    url:that.startAjax.url,
                    type:that.startAjax.type || 'get',
                    data:data,
                    dataType:'json',
                    success:function (res) {
                        if(res.code == 1){
                            //$(that.startAjax.target).html(res.data)
                            that.formHtml = res.data;
                            var title = $(this).data('title') || '编辑';
                            editid = $(this).data('id');
                            that.show(title);
                        }
                    },
                });
            })

        }else{
            that.oStartEle.on('click',function (e) {
                e.preventDefault();
                var title = $(this).data('title') || '编辑';
                editid = $(this).data('id');
                that.show(title);
            })
        }

        //提交
        console.log(that.saveEle);
        $("#myModal .modal-footer").on('click',that.saveEle,function () {

            var data = $('.js-ajax-from').serializeArray();

            var res =  that.formcheck(data,that.endAjax.requiredata) ;

            if(!( res === true )){
                $('.'+res).addClass('has-error');
                $(that.errorEle).html("不能为空").css({"display":"inline"});

                return false;
            }
            //console.log(that.endAjax);
            //console.log(data);
            var newdata = {};
            for(var k in data){
                newdata[data[k]['name']] = data[k]['value'];
            }
            console.log(editid);
            if(editid){
                newdata['id'] = editid;
            }
            console.log(newdata);
            //return ;
            $.ajax({
                url:that.endAjax.url,
                type:"post",
                data:newdata,
                dataType:'json',
                success:function (response) {
                    //console.log(response)
                    if(response.code){
                        that.hide();
                        setTimeout(function () {
                            var html = '<div class="alert alert-success" role="alert">'+response.msg+'</div>';
                            $('.js-prepend').prepend(html);
                            setTimeout(function () {
                                window.location.reload();
                            },300)
                        },10)
                    }else {
                        $('.'+res).addClass('has-error');
                        $(that.errorEle).html(response.msg).css({"display":"inline"});

                        return false;
                    }
                },
                fail:function () {
                    $(that.errorEle).html("error").css({"display":"inline"});
                    return false;
                }
            })

        });
        //关闭

        $(that.closeEle).on('click',function () {
            that.hide(that.saveClass);
            /*setTimeout(function () {
             window.location.reload();
             },100)*/
        })

    };
    AlertWindow.prototype.show = function (title) {
        $("#myModal .modal-footer").html(this.saveHtml);
        $('#myModal .js-ajax-from').html(this.formHtml);
        $('body').addClass('modal-open');

        $('#myModal').addClass('in').css({"display":"block"});
        if(title){
            $('#myModalLabel').html(title);
        }
        //$(".form_datetime").datetimepicker({format: 'yyyy-mm-dd hh:ii'});

    };

    AlertWindow.prototype.hide = function () {
        $("#myModal .modal-footer").html("");
        $('body').removeClass('modal-open');
        $('#myModal').removeClass('in').css({"display":"none"});
    };

    AlertWindow.prototype.ajax = function (obj) {
        //console.log(obj)
        $.ajax({
            obj
        });
    };
    AlertWindow.prototype.formcheck = function (form,require) {
        //console.log(require);
        if(!require.length)
            return true;

        for(var i = 0;i<require.length;i++){

            if( form[i].name ==  require[i] && form[i].value == '')
                return require[i];
        }
        return true;
    }
</script>
@endpush