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

    <style>
        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
    <h3 class="inline">Quản lý danh sách giới thiệu</h3>

    <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">Tháng</label>
                                    <br>
                                      <input class="form-control" id="month">
                                </div>


                                <div class="mt-repeater-input">
                                    <a href="javascript:;" onclick="getPostByAttr()" data-repeater-delete=""
                                       class="btn btn-danger mt-repeater-delete"
                                       style="float: right; margin-right: 10px">
                                        <i class="fa fa-check"></i> Lọc</a>

                                </div>
                                <div class="mt-repeater-input">

                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12" style="margin-bottom: 12px">

        </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>Họ tên</th>
                    <th>SĐT người giới thiệu</th>
                    <th>Họ tên người được giới thiệu</th>
                    <th>SĐT người được giới thiệu</th>

                    <th>Thời gian</th>
                    <th>Trạng thái</th>
                    <th>Nguyên nhân</th>
                </tr>
                </thead>
                <tfoot>
                <tr>
                    <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><input type="text" class="form-control"></th>
                    <th><input type="text" class="form-control"></th>
                    <th>
                        <select class="form-control">
                            <option value="">Vui lòng chọn</option>
                            <option value="{{ App\User::REFER_STATUS_SUCCESS }}">Thành công</option>
                            <option value="{{ App\User::REFER_STATUS_NOT_SUCCESS }}">Chưa thành công</option>
                        </select>
                    </th>
                    <th> <select class="form-control">
                            <option value="">Vui lòng chọn</option>
                            <option value="{{ App\User::REFER_REASON_NOT_CREATED }}">Chưa tạo nhà trọ</option>
                            <option value="{{ App\User::REFER_REASON_CREATED_NOT_CONFIRM }}">Đã tạo nhà trọ nhưng chưa xác nhận</option>
                            <option value="{{ App\User::REFER_REASON_NOT_CREATE_REQUEST }}">Chưa tạo yêu cầu tìm kiếm</option>
                        </select></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-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/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 src="/assets/pages/scripts/form-editable.min.js" type="text/javascript"></script>--}}

@endpush


@push('scripts')
    <script>

        var table = '';

        function getPostByAttr() {
            table.ajax.reload();
        }

        $('#month').datepicker({
            format: 'mm/yyyy',
            autoclose: true,
            viewMode: "months",
            minViewMode: "months",
        });


        $(function () {
            table = $('#orders-table').DataTable({
                "bDestroy": true,
                processing: true,
                searching: true,
                "aaSorting": [],
                serverSide: true,
                ajax: {
                    url: '{!! url('admin/user/refer.data') !!}',
                    data: function(d)
                    {
                        d.month = $('#month').val();
                    }
                },
                columns: [
                    {data: 'DT_Row_Index', name: 'DT_Row_Index', orderable: false, searchable: false},
                    {data: 'refer_name', name: 'refer_name'},
                    {data: 'refer_phone', name: 'refer_phone'},
                    {data: 'name', name: 'name'},
                    {data: 'phone', name: 'phone'},
                    {data: 'refer_date', name: 'refer_date'},
                    {data: 'refer_status', name: 'refer_status'},
                    {data: 'refer_reason', name: 'refer_reason'},
                ],
                drawCallback: function () {
                    $('.editable').editable({
                        inputclass: "form-control",
                        url: '{{ url('admin/account/update-attribute') }}',
                    });
                }
            });

            table.columns().every(function (index) {
                if (index !== 0 && index !== 11) {
                    var that = this;
                    $('input', this.footer()).on('keyup', 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();
                        }
                    });
                }
            });
        });


    </script>
@endpush