@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;
        }

        /*.alert-danger .btn-danger {*/
        /*float: right;*/
        /*}*/

        /*.alert-danger span {*/
        /*line-height: 34px;*/
        /*}*/

        /*.alert-danger > div:after {*/
        /*clear: both;*/
        /*content: '';*/
        /*display: table;*/
        /*}*/
    </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">
      Báo cáo
    </h1>
    <div class="row">
        <div class="portlet-body form">
            <div class="form-body">
                <div class="form-group">
                    <form action="#" class="mt-repeater form-horizontal">
                        <div data-repeater-list="group-a">
                            <div data-repeater-item="" class="mt-repeater-item">
                                <div class="mt-repeater-input">
                                    <label class="control-label">Loại báo cáo</label>
                                    <br>
                                    <select class="form-control select2" multiple id="types">
                                        <option value="">Tất cả</option>
                                        @php $types = App\Models\ReportSale::TYPES;@endphp
                                        @foreach($types as $key => $name)
                                            <option value="{{ $key }}">{{ $name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="mt-repeater-input">
                                    <a href="javascript:;" onclick="getPostByAttr()" data-repeater-delete=""
                                       class="btn btn-danger mt-repeater-delete">
                                        <i class="fa fa-check"></i> Lọc</a>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>


    <div class="row">
        {{--@if(auth('backend')->user()->hasPermissionTo('add-hostel'))--}}
        {{--<div class="col-md-12">--}}
        {{--<div class="text-center" style="margin-top: 15px; line-height: 34px">--}}
        {{--@if($remainHostel == 0)--}}
        {{--<div class="alert alert-warning">--}}
        {{--Số nhà trọ còn lại có thể tạo: 0. Nếu bạn muốn tạo Thêm nhà vui lòng nâng cấp gói cước hoặc gọi cho chúng tôi để được hỗ trợ--}}
        {{--</div>--}}
        {{--@else--}}

        {{--<div class="alert alert-warning">--}}
        {{--Số nhà trọ còn lại có thể tạo: {{ $remainHostel }}--}}
        {{--<a href="#add-hostel" data-toggle="modal" class="btn btn-success" id="btn-add-hostel" style="float: right">Thêm nhà</a>--}}
        {{--</div>--}}

        {{--@endif--}}

        {{--</div>--}}
        {{--</div>--}}
        {{--@endif--}}
        <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>Người báo cáo</th>
                    <th>SĐT báo cáo</th>
                    <th>Người bị báo cáo</th>
                    <th>Nhà bị báo cáo</th>
                    <th>ID hội thoại</th>
                    <th>Loại báo cáo</th>
                    <th>Thông tin chi tiết</th>
                    <th>Trạng thái</th>
                    <th>Ghi chú</th>
                    <th>Ngày báo cáo</th>
                    <th>Hành động</th>
                </tr>
                </thead>
                <tfoot>
                <tr>
                    <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><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>
                    <th>
                        <select class="form-control">
                            <option value="">Tất cả</option>
                            <option value="{{ App\Models\ReportSale::NOT_PROCESS }}">Chờ xử lý</option>
                            <option value="{{ App\Models\ReportSale::PROCESSING }}">Đang xử lý</option>
                            <option value="{{ App\Models\ReportSale::RIGHT }}">Thông tin đúng</option>
                            <option value="{{ App\Models\ReportSale::WRONG }}">Thông tin sai</option>
                        </select>
                    </th>
                    <th><input type="text" class="form-control"></th>
                    <th><input type="text" class="form-control"></th>
                    <th></th>
                </tr>
                </tfoot>
            </table>
        </div>
    </div>

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





@endsection

@push('scripts')
    <script src="/assets/global/plugins/bootstrap-editable/bootstrap-editable/js/bootstrap-editable.js"
            type="text/javascript"></script>
    <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>
        $.validator.addMethod("greaterThan",
            function (value, element, param) {
                var $otherElement = $(param);
                return parseInt(value, 10) >= parseInt($otherElement.val(), 10);
            }
        );
    </script>


@endpush


@push('scripts')

    <script>
        function getPostByAttr() {
            table.ajax.reload();
        }


        var table;

        $(document).on('click', '.btn-delete', 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/report-sale/delete') }}',
                            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();
                            }
                        });

                    }
                }
            });
        });


        $(function () {

            table = $('#orders-table').DataTable({
                "bDestroy": true,
                processing: true,
                searching: true,
                "aaSorting": [[9, 'desc']],
                serverSide: true,
                ajax: {
                    url: '{!! url('admin/report-sale/report-sale.data') !!}',
                    data: function(d)
                    {
                        d.types = $('#types').val();
                    }
                },
                columns: [
                    {data: 'user_name', name: 'user_name'},
                    {data: 'user_phone', name: 'user_phone'},
                    {data: 'owner_name', name: 'owner_name'},
                    {data: 'hostel_id', name: 'hostel_id'}, {data: 'conversation_id', name: 'conversation_id'},
                    {data: 'types', name: 'types'},
                    {data: 'content', name: 'content'},
                    {data: 'status', name: 'status'},
                    {data: 'note', name: 'note'},
                    {data: 'created_at', name: 'created_at'},
                    {data: 'action', name: 'action'},

                ],
                drawCallback: function () {
                    $('.editable').editable({
                        inputclass: "form-control",
                        url: '{{ url('admin/report-sale/update-attribute') }}',
                    });
                }
            });

            table.columns().every( function (index) {

                    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 () {
                    console.log(this.value);
                    if (that.search() !== this.value) {
                        that
                            .search(this.value)
                            .draw();
                    }
                });

            } );

        });



    </script>
@endpush