@extends('admin')

@section('styles')

    <link href="/assets/global/plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.css" rel="stylesheet" type="text/css"/>
    <link href="/assets/global/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css" rel="stylesheet"
          type="text/css"/>
    <link href="/assets/global/plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet"
          type="text/css"/>
    <link href="/assets/global/plugins/bootstrap-editable/bootstrap-editable/css/bootstrap-editable.css"
          rel="stylesheet" type="text/css"/>
    <link href="/assets/global/plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.css" rel="stylesheet" type="text/css"/>
    <link href="/assets/global/plugins/bootstrap-editable/inputs-ext/address/address.css" rel="stylesheet"
          type="text/css"/>
    <link href="/assets/global/plugins/select2/css/select2.min.css" rel="stylesheet" type="text/css"/>
    <link href="/assets/global/plugins/select2/css/select2-bootstrap.min.css" rel="stylesheet" type="text/css"/>

@endsection
@section('content')
    @if (session()->has('error'))
        <div class="alert alert-danger">{{ session()->get('error') }}</div>
    @endif
    @if (session()->has('success'))
        <div class="alert alert-success">{{ session()->get('success') }}</div>
    @endif
    @if (count($errors) > 0)
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif
    <h3 class="inline">Quản lý danh sách editor</h3>

    <div class="portlet-title">

    </div>


    <div class="row">
        <div class="col-md-12" style="margin-bottom: 12px; margin-top: 12px">
            <a href="#add-editor" data-toggle="modal" class="btn btn-success">Thêm</a>
        </div>
        <div class="col-md-12">
            <table class="table table-striped table-bordered table-hover" id="orders-table">
                <thead>
                <tr>
                    {{--<th>Id</th>--}}
                    <th>Hình ảnh</th>
                    <th>Tên</th>
                    <th>SĐT</th>
                    <th>Email</th>
                    <th>Hành động</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12" id="detail">
        </div>
    </div>

    <div class="modal fade" id="add-editor" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <form action="{{ url('admin/editors/create') }}" method="post" enctype="multipart/form-data" id="form-add-editor">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                    <h4 class="modal-title">Thêm editor</h4>
                </div>
                <div class="modal-body">

                    {!! csrf_field() !!}

                    <div class="row">
                        <div class="col-md-12" style="margin-bottom: 15px">
                            <div class="form-group">
                                <div class="col-md-4 col-md-offset-4">


                                    <div class="fileinput fileinput-new"
                                         data-provides="fileinput">

                                        <div class="fileinput-new thumbnail"
                                             style="width: 200px; height: 180px;">
                                            <img id="inp-image-web2"
                                                 src="/frontend3/assets/img/placeholder.png"
                                                 alt=""></div>
                                        <div class="fileinput-preview fileinput-exists thumbnail"
                                             style="max-width: 200px; max-height: 150px;"></div>
                                        <div>
                                                                            <span class="btn default btn-file"
                                                                                  style="width: 100%">
                                                                                <span class="fileinput-new"> Chọn hình ảnh </span>
                                                                                <span class="fileinput-exists"> Thay đổi </span>
                                                                                <input type="file"
                                                                                       name="image"> </span>
                                            <a href="javascript:;"
                                               class="btn default fileinput-exists"
                                               data-dismiss="fileinput"> Xóa </a>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Họ (*)</label>
                                <div>
                                    <input type="text" name="first_name" class="form-control"
                                           id="first_name" value="{{ old('first_name') }}" required>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Tên (*)</label>
                                <div>
                                    <input type="text" name="last_name" class="form-control" required
                                           id="last_name" value="{{ old('last_name') }}">
                                </div>
                            </div>
                        </div>


                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>SĐT (*)</label>
                                <div>
                                    <input type="text" name="phone" class="form-control"
                                           id="phone" value="{{ old('phone') }}" required>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Email (*)</label>
                                <div>
                                    <input type="text" name="email" class="form-control" required
                                           id="email" value="{{ old('email') }}">
                                </div>
                            </div>
                        </div>
                    </div>


                    <div class="row">
                        <div class="col-md-12">
                            <label>Mật khẩu</label>
                            <div>
                                <input type="password" name="password" class="form-control"
                                       id="password">
                            </div>
                        </div>

                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <label>Nhập lại mật khẩu</label>
                            <div>
                                <input type="password" name="confirm_password" class="form-control"
                                       id="confirm_password">
                            </div>
                        </div>

                    </div>



                </div>
                <div class="modal-footer">
                    <button type="button" class="btn dark btn-outline" data-dismiss="modal">Đóng</button>
                    <button type="submit" class="btn green" id="btn-save">Lưu</button>
                </div>
            </div>
            </form>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
@endsection

@push('scripts')

<script src="/assets/global/plugins/bootstrap-wysihtml5/wysihtml5-0.3.0.js" type="text/javascript"></script>
<script src="/assets/global/plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.js" type="text/javascript"></script>
<script src="/assets/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js"
        type="text/javascript"></script>
<script src="/assets/global/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"
        type="text/javascript"></script>
<script src="/assets/global/plugins/moment.min.js" type="text/javascript"></script>
<script src="/assets/global/plugins/jquery.mockjax.js" type="text/javascript"></script>
<script src="/assets/global/plugins/bootstrap-editable/bootstrap-editable/js/bootstrap-editable.js"
        type="text/javascript"></script>
<script src="/assets/global/plugins/bootstrap-editable/inputs-ext/address/address.js" type="text/javascript"></script>
<script src="/assets/global/plugins/bootstrap-editable/inputs-ext/wysihtml5/wysihtml5.js"
        type="text/javascript"></script>
<script src="/assets/global/plugins/bootstrap-typeahead/bootstrap3-typeahead.min.js" type="text/javascript"></script>
<script src="/assets/global/plugins/select2/js/select2.full.min.js" type="text/javascript"></script>
{{--<script src="/assets/pages/scripts/form-editable.min.js" type="text/javascript"></script>--}}
<script src="/assets/global/plugins/jquery-validation/js/jquery.validate.min.js" type="text/javascript"></script>
<script src="/assets/global/plugins/jquery-validation/js/additional-methods.min.js" type="text/javascript"></script>
@endpush


@push('scripts')
<script>

    $("#form-add-editor").validate(
        {
            ignore: ".ignore",
            rules: {
                password: "required",
                confirm_password: {
                    equalTo: "#password"
                },
                phone: {
                    required: true,
                    remote: {
                        url: "{{ url('admin/check-unique-phone') }}",
                        type: "post",
                        data: {
                            phone: function () {
                                return $("#phone").val();
                            }
                        }
                    }
                },
                hiddenRecaptcha: {
                    required: function () {
                        if (grecaptcha.getResponse() == '') {
                            return true;
                        } else {
                            return false;
                        }
                    }
                },
                email: {
                    required: true,
                    email: true,
                    remote: {
                        url: "{{ url('admin/check-unique-email') }}",
                        type: "post",
                        data: {
                            email: function () {
                                return $("#email").val();
                            }
                        }
                    }
                }
            },
            messages: {
                first_name: "Vui lòng không bỏ trống Họ",
                last_name: "Vui lòng không bỏ trống Tên",
                gender: "Vui lòng không bỏ trống Giới tính",
                hiddenRecaptcha: "Vui lòng xác nhận recaptcha",
                phone: {
                    required: "Vui lòng không bỏ trống số điện thoại",
                    remote: jQuery.validator.format("{0} đã được sử dụng")
                },
                email: {
                    required: "Vui lòng không bỏ trống Email",
                    remote: jQuery.validator.format("{0} đã được sử dụng")
                },
                type: "Vui lòng không bỏ trống loại tài khoản",
                password: "Vui lòng không bỏ trống mật khẩu",
                //    confirm_password: "Vui lòng không bỏ trống loại tài khoản",
                confirm_password: {
                    required: "Vui lòng nhập lại mật khẩu",
                    equalTo: "Vui lòng nhập lại chính xác mật khẩu"
                },
                // image: 'Vui lòng không bỏ trống hình ảnh'
            }
        }
    );

    $(function () {
        table = $('#orders-table').DataTable({
            "bDestroy": true,
            processing: true,
            searching: true,
            "aaSorting": [],
            serverSide: true,
            ajax: {
                url: '{!! url('admin/editors/editor.data') !!}',
            },
            columns: [

                {
                    "render": function (data, type, full, meta) {
                        return '<img src="' + full.image + '" style="max-width: 150px">';
                    }
                },
                {data: 'name', name: 'name'},
                {data: 'phone', name: 'phone'},
                {data: 'email', name: 'email'},
                {data: 'action', name: 'action'},
            ],
            initComplete: function () {
                $('.editable').editable({
                    prepend: "Chưa chọn",
                    source: [{
                        value: 1,
                        text: 'Có'
                    }, {
                        value: 0,
                        text: 'Không'
                    }],
                });
            }
        });
    });


</script>
@endpush