@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"/>


    <style>

        .pac-container {
            z-index: 10052 !important;
        }

        #map {
            width: auto !important;
            height: 500px !important;
        }

        #map_edit {
            width: auto !important;
            height: 500px !important;
        }

        tfoot {
            display: table-header-group;
        }

        tfoot input {
            font-weight: normal !important;
        }

        tfoot select {
            font-weight: normal !important;
        }

        .dataTables_filter {
            display: none;
        }

        #orders-table_length {
            display: none;
        }

        .ws-nr {
            width: 100% !important;
        }
    </style>

@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
    <h1 class="page-title">
        Danh sách nhân viên
    </h1>


    <div class="row">

            <div class="col-md-12">
                <div class="text-center">


                        <a class="btn green-meadow pull-right" href="#add-staff" data-toggle="modal" style="float: right">
                            Thêm nhân viên</a>

                </div>
            </div>
    </div>
    <div class="row">
        {{--<div class="col-md-12" style="margin-bottom: 12px; ">--}}
        {{--<a href="#add-hostel" data-toggle="modal" class="btn btn-success" id="btn-add-hostel" style="float: right">Thêm nhà</a>--}}
        {{--</div>--}}
        <div class="col-md-12">
            <table class="table table-striped table-bordered table-hover" id="orders-table">
                <thead>
                <tr style="background-color: #5376B9; color: white">
                    <th>STT</th>
                    <th>Ảnh</th>
                    <th>Tên</th>
                    <th>SĐT</th>
                    <th>Email</th>
                    <th style="width: 15%">Hành động</th>
                </tr>
                </thead>
                <tfoot>
                <tr>
                    <th></th>
                    <th></th>
                    <th><input type="text" class="form-control"></th>
                    <th><input type="text" class="form-control"></th>
                    <th><input type="text" class="form-control"></th>
                    <th></th>
                    {{--<th><input type="text" class="form-control"></th>--}}
                </tr>
                </tfoot>
            </table>
        </div>
    </div>

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


    <div class="modal fade in" tabindex="-1" role="dialog" id="add-staff">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content modal-content--sign-up">
                <form action="#" class="sign-up-form" method="post" enctype="multipart/form-data"
                      novalidate="novalidate" id="form-add-staff">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">×</span>
                        </button>
                        <h4 class="modal-title">Thêm nhân viên</h4>
                    </div>
                    <div class="modal-body add-staff-content">

                        <input type="hidden" name="_token" value="{{ csrf_token() }}">
                        <!-- <div class="help-text text-center mb-24"><span class="color-primary">(*)</span> Thông tin bắt buộc</div> -->
                        <div class="row">
                            <div class="col-xs-12">
                                <div class="form-group">
                                    <label class="">Ảnh đại diện</label>
                                    <div class="">
                                        <div class="fileinput fileinput-new" data-provides="fileinput">
                                            <div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
                                                <img src="/frontend3/assets/img/placeholder.png" alt=""/></div>
                                            <div class="fileinput-preview fileinput-exists thumbnail"
                                                 style="width: 100%; max-height:200px;"></div>
                                            <div>
                            <span class="btn default btn-file" style="width: 100%">
                                <span class="fileinput-new"> Chọn ảnh </span>
                                                                   <span class="fileinput-exists"> Thay đổi </span>
                                                                   <input type="file" name="image"> </span>
                                                <a href="javascript:;" class="btn red fileinput-exists fileinput-delete"
                                                   data-dismiss="fileinput">
                                                    Xóa </a>
                                            </div>
                                        </div>
                                        <div class="clearfix margin-top-10">

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-12 col-sm-4">
                                <div class="form-group">
                                    <input type="text" class="form-control" placeholder="Tên (*)" name="name"
                                           required="">
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-4">
                                <div class="form-group">
                                    <input type="text" class="form-control" placeholder="SĐT (*)" name="phone"
                                           required="" id="phone">
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-4">
                                <div class="form-group">
                                    <input type="text" class="form-control" placeholder="Email" name="email"
                                           id="email">
                                </div>
                            </div>
                        </div>
                        <input type="hidden" value="{{ \App\User::ADMIN }}" name="type">
                        <div class="form-group">
                            <input type="password" class="form-control" placeholder="Mật khẩu (*)" required=""
                                   name="password" id="password">
                        </div>
                        <div class="form-group">
                            <input type="password" class="form-control" placeholder="Xác nhận mật khẩu (*)" required=""
                                   name="confirm_password" id="confirm_password">
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn dark btn-outline" data-dismiss="modal" id="dismiss-modal">Hủy
                        </button>
                        <button type="button" class="btn green" id="btn-save-staff">Lưu</button>

                    </div>
                </form>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>


    <div class="modal fade bs-modal-lg" id="edit-staff" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                    <h4 class="modal-title">Cập nhật nhân viên</h4>
                </div>
                <div class="modal-body" id="edit-staff-content">


                </div>
                <div class="modal-footer">
                    <button type="button" class="btn dark btn-outline" data-dismiss="modal" id="dismiss-modal">Hủy
                    </button>
                    <button type="button" class="btn green" id="btn-save-edit-staff">Lưu</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <div class="modal fade bs-modal-lg" id="edit-staff-permission" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                    <h4 class="modal-title">Cập nhật quyền nhân viên</h4>
                </div>
                <div class="modal-body" id="edit-staff-permission-content">


                </div>
                <div class="modal-footer">
                    <button type="button" class="btn dark btn-outline" data-dismiss="modal" id="dismiss-modal">Hủy
                    </button>
                    <button type="button" class="btn green" id="btn-save-edit-permission-staff">Lưu</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

@endsection

@push('scripts')
<script src="/assets/global/plugins/dropzone/dropzone.min.js" type="text/javascript"></script>
<script src="/assets/pages/scripts/form-dropzone.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>
<script type="text/javascript"
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCydLs7dhJPuozABFQjJO-uk1PITW18oo8&libraries=places&region=vi&language=vi&sensor=false"></script>
<script type="text/javascript" src="/js/gmap.js"></script>
<script src="/js/jquery.validate.min.js"></script>

<script>
    $.validator.addMethod("greaterThan",
        function (value, element, param) {
            var $otherElement = $(param);
            return parseInt(value, 10) >= parseInt($otherElement.val(), 10);
        }
    );
</script>


@endpush


@push('scripts')

<script>
    $('.date-picker').datepicker({
        format: 'dd/mm/yyyy',
        autoclose: true

    });

    var table;

    $(document).on('click', '#btn-save-staff', function (e) {
        e.preventDefault();
        var formStatus = $("#form-add-staff").validate(
            {
                errorElement: "span",
                errorClass: "help-block help-block-error",

                highlight: function (e) {
                    $(e).closest(".form-group").addClass("has-error")
                },
                unhighlight: function (e) {
                    $(e).closest(".form-group").removeClass("has-error")
                },
                success: function (e) {
                    e.closest(".form-group").removeClass("has-error")
                },
                ignore: ".ignore",
                rules: {
                    phone: {
                        required: true,
                        remote: {
                            url: "{{ url('admin/check-unique-phone') }}",
                            type: "post",
                            data: {
                                phone: function () {
                                    return $("#phone").val();
                                }
                            }
                        }
                    },
                    email: {
                        email: true,
                        remote: {
                            url: "{{ url('admin/check-unique-email') }}",
                            type: "post",
                            data: {
                                email: function () {
                                    return $("#email").val();
                                }
                            }
                        }
                    }
                },
                submitHandler: function (form) {
                    var fileName = $('input[name="image"]').val();
                    if (!fileName) {
                        $('input[name="is_valid]').val(0);
                        alert('Không được bỏ trống ảnh');
                        return false;
                    }

                    form.submit();


                },
                messages: {
                    name: "Vui lòng không bỏ trống tên",
                    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: {

                        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'
                }
            }
        ).form();

        if (formStatus) {

            var data = new FormData($('#form-add-staff')[0]);
            $.ajax({
                url: '{{ url('/admin/process-register') }}',
                type: 'post',
                data: data,
                dataType: 'json',
                processData: false,
                contentType: false,
                beforeSend: function () {
                    $('#add-staff-content').addClass('ht-on-loading');
                },
                success: function (response) {
                    $('#add-staff-content').removeClass('ht-on-loading');
                    if (response.status == 1) {
                        swal('Thành công', 'Nhân viên đã được lưu lại', 'success');
                        $('#add-staff').modal('hide');
                    } else if (response.status == 0) {
                        swal('Thông báo', response.message, 'warning');
                    } else if (response.status == 2) {
                        swal('Thông báo', response.message, 'info');
                    }
                    table.ajax.reload();
                }
            });
        }
    });

    $(document).on('click', '#btn-save-edit-staff', function (e) {
        e.preventDefault();
        var formStatus = $("#form-edit-staff").validate(
            {
                errorElement: "span",
                errorClass: "help-block help-block-error",

                highlight: function (e) {
                    $(e).closest(".form-group").addClass("has-error")
                },
                unhighlight: function (e) {
                    $(e).closest(".form-group").removeClass("has-error")
                },
                success: function (e) {
                    e.closest(".form-group").removeClass("has-error")
                },
                ignore: ".ignore",
                rules: {
                    phone: {
                        required: true,
                        remote: {
                            url: "{{ url('admin/check-unique-phone') }}",
                            type: "post",
                            data: {
                                phone: function () {
                                    return $("#phone-e").val();
                                },
                                type: 'edit',
                                user_id: $('#user_id').val()
                            }
                        }
                    },
                    email: {
                        email: true,
                        remote: {
                            url: "{{ url('admin/check-unique-email') }}",
                            type: "post",
                            data: {
                                email: function () {
                                    return $("#email-e").val();
                                },
                                type: 'edit',
                                user_id: $('#user_id').val()
                            }
                        }
                    }
                },
                submitHandler: function (form) {
                    var fileName = $('input[name="image"]').val();
                    if (!fileName) {
                        $('input[name="is_valid]').val(0);
                        alert('Không được bỏ trống ảnh');
                        return false;
                    }

                    form.submit();


                },
                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",
                    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: {
                        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'
                }
            }
        ).form();

        if (formStatus) {

            var data = new FormData($('#form-edit-staff')[0]);
            $.ajax({
                url: '{{ url('/admin/staff/update') }}',
                type: 'post',
                data: data,
                dataType: 'json',
                processData: false,
                contentType: false,
                beforeSend: function () {
                    $('#edit-staff-content').addClass('ht-on-loading');
                },
                success: function (response) {
                    $('#edit-staff-content').removeClass('ht-on-loading');
                    if (response.status == 1) {
                        swal('Thành công', 'Thông tin đã được lưu lại', 'success');
                        $('#edit-staff').modal('hide');
                    } else {
                        swal('Thông báo', response.message, 'warning');
                    }
                    table.ajax.reload();
                }
            });
        }
    });

    $(document).on('click', '#btn-save-edit-permission-staff', function (e) {
        e.preventDefault();
        var data = $("#form-staff-permission").serialize();
        $.ajax({
            url: '{{ url('/admin/staff/update-permission') }}',
            type: 'post',
            data: data,
            dataType: 'json',
            beforeSend: function () {
                $('#edit-staff-permission-content').addClass('ht-on-loading');
            },
            success: function (response) {
                $('#edit-staff-permission-content').removeClass('ht-on-loading');
                if (response.status == 1) {
                    swal('Thành công', 'Thông tin đã được lưu lại', 'success');
                    $('#edit-staff-permission').modal('hide');
                } else if(response.status == 2) {
                    swal('Thông báo', response.message, 'info');
                }else {
                    swal('Thông báo', response.message, 'warning');
                }
            }
        });

    });

    $(document).on('click', '.btn-delete-staff', function (e) {
        e.preventDefault();
        var id = $(this).attr('data-id');

        bootbox.confirm({
            message: "Bạn có chắc chắn muốn xóa",
            buttons: {
                confirm: {
                    label: 'Có',
                    className: 'btn-success'
                },
                cancel: {
                    label: 'Không',
                    className: 'btn-danger'
                }
            },


            callback: function (result) {
                if (result == true) {

                    $.ajax({
                        url: '{{ url('admin/staff/delete-staff') }}',
                        type: 'post',
                        data: {
                            id: id,
                        },
                        dataType: 'json',
                        success: function (response) {
                            if (response.status == 1) {
                                swal('Thành công', '', 'success');
                            } else if (response.status == 2) {
                                swal('Thông báo', response.message, 'info');
                            } else {
                                swal('Thông báo', response.message, 'warning');
                            }
                            table.ajax.reload();
                        }
                    });

                }
            }
        });
    });

    $(document).on('click', '.btn-edit-staff', function (e) {
        e.preventDefault();

        var id = $(this).attr('data-id');
        $.ajax({
            url: '{{ url('admin/staff/edit-staff') }}' + '/' + id,
            type: 'get',
            dataType: 'json',
            beforeSend: function () {
                $('#edit-staff-content').addClass('ht-on-loading');
            },
            success: function (response) {
                $('#edit-staff-content').removeClass('ht-on-loading').html(response.data);
                $('.date-picker').datepicker({
                    format: 'dd/mm/yyyy',
                    autoclose: true

                });
                $('.select2').select2();
            }
        });
    });

    $(document).on('click', '.btn-edit-permission', function (e) {
        e.preventDefault();

        var id = $(this).attr('data-id');
        $.ajax({
            url: '{{ url('admin/staff/edit-staff-permission') }}' + '/' + id,
            type: 'get',
            dataType: 'json',
            beforeSend: function () {
                $('#edit-staff-permission-content').addClass('ht-on-loading');
            },
            success: function (response) {
                $('#edit-staff-permission-content').removeClass('ht-on-loading').html(response.data);
                $('.date-picker').datepicker({
                    format: 'dd/mm/yyyy',
                    autoclose: true

                });
                $('.select2').select2();
            }
        });
    });

    $(function () {

//        $('#orders-table tfoot th').each( function (index) {
//            if(index != 0 && index != 9) {
//                $(this).html('<input type="text" class="form-control" />');
//            }
//        } );
        table = $('#orders-table').DataTable({
            "bDestroy": true,
            processing: true,
            searching: true,
            "aaSorting": [],
            serverSide: true,
            ajax: {
                url: '{!! url('admin/staff/staff.data') !!}',
            },
            columns: [

                {data: 'DT_Row_Index', name: 'DT_Row_Index', orderable: false, searchable: false},
                {data: 'image', name: 'image'},
                {data: 'name', name: 'name'},
                {data: 'phone', name: 'phone'},
                {data: 'email', name: 'email'},
                {data: 'action', name: 'action'},
                // {data: 'action', name: 'action', 'orderable' : false, searchable: false},
            ],
        });


        table.columns().every(function (index) {
            if (index !== 0) {
                var that = this;
                $('input', this.footer()).on('keyup change', function () {
                    if (that.search() !== this.value) {
                        that
                            .search(this.value)
                            .draw();
                    }
                });

                $('select', this.footer()).on('change', function () {
                    if (that.search() !== this.value) {
                        that
                            .search(this.value)
                            .draw();
                    }
                });
            }
        });

    });

    $(document).on('change', '.check-all', function(e) {
        if(!$(this).is(':checked')) {
            $(this).parent().parent().find('input').prop('checked', false);
        } else {
            $(this).parent().parent().find('input').prop('checked', true);
        }
    });



</script>
@endpush