@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 chủ trọ</h3>

    <div class="portlet-title">

    </div>
    <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">Đã tạo nhà</label>
                                    <br>
                                    <select name="hostel_status" class="form-control" id="hostel_status">
                                        <option value="" selected="">Tất cả</option>
                                        <option value="created">Đã tạo nhà</option>
                                        <option value="not-create">Chưa tạo nhà</option>
                                    </select>
                                </div>
                                <div class="mt-repeater-input">
                                    <label class="control-label">Đã tạo phòng</label>
                                    <br>
                                    <select name="room_status" class="form-control" id="room_status">
                                        <option value="" selected="">Tất cả</option>
                                        <option value="created">Đã tạo phòng</option>
                                        <option value="not-create">Chưa tạo phòng</option>
                                    </select>
                                </div>
                                <div class="mt-repeater-input">
                                    <label class="control-label">Khoảng thời gian</label>
                                    <br>
                                    <select name="time_range" class="form-control" id="time_range">
                                        <option value="" selected="">Tự chọn</option>
                                        <option value="yesterday">Hôm qua</option>
                                        <option value="today">Hôm nay</option>
                                        <option value="week">Tuần này</option>
                                        <option value="last_7_days">7 ngày qua</option>
                                        <option value="last_week">Tuần trước</option>
                                        <option value="month">Tháng này</option>
                                        <option value="last_30_days">30 ngày qua</option>
                                        <option value="last_month">Tháng trước</option>
                                    </select>
                                </div>

                                <div class="mt-repeater-input">
                                    <label class="control-label">Chọn khoảng thời gian</label>
                                    <br>
                                    <div class="input-group input-large date-picker input-daterange" data-date="10/11/2012"
                                         data-date-format="dd/mm/yyyy">
                                        <input type="text" class="form-control" name="from" id="start_time">
                                        <span class="input-group-addon"> to </span>
                                        <input type="text" class="form-control" name="to" id="end_time"></div>
                                    <!-- /input-group -->
                                </div>

                                <div class="mt-repeater-input" >
                                    <a class="btn green-meadow pull-right btn-export-excel mt-repeater-delete" data-type="outcome"  style="float: right"
                                       href="#export-excel" data-toggle="modal" >
                                        <i class="fa fa-file-excel"></i> Xuất Excel</a>
                                    <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="modal fade bs-modal-lg" id="edit-package" 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">Thông tin đăng ký gói sử dụng</h4>
                </div>
                <div class="modal-body" id="edit-package-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-package">Lưu</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>


    <div class="modal fade bs-modal-lg" id="change-password" 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">Đổi mật khẩu</h4>
                </div>
                <div class="modal-body" id="change-password-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-password">Lưu</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <div class="modal fade bs-modal-lg" id="export-excel" 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" id="voucher-title">Xuất dữ liệu ra Excel</h4>
                </div>
                <div class="modal-body">
                    <form role="form" id="form-export">
                        <input type="hidden" name="_token" value="{{ csrf_token() }}">
                        <input type="hidden" name="type" id="type_export">
                        <div class="form-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Chọn ngày bắt đầu</label>
                                        <input class="form-control datepicker" name="start_date">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Chọn ngày kết thúc</label>
                                        <input class="form-control datepicker" name="end_date">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>

                </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-export">Xuất</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </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>Id</th>--}}
                    <th>Hình ảnh</th>
                    <th>Tên</th>
                    <th>SĐT</th>
                    <th>Email</th>

                    <th>Số nhà</th>
                    <th>Số phòng</th>
                    <th>Trạng thái</th>
                    <th>Nguồn</th>
                    <th>Phân hệ</th>
                    <th>Đăng nhập cuối</th>
                    <th>Ngày tạo</th>
                    <th>Hành động</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="">Tất cả</option>
                            <option value="{{ App\User::PAYMENT_TRIAL }}">Dùng thử</option>
                            <option value="{{ App\User::PAYMENT_PAYING }}">Đang trả tiền</option>
                            <option value="{{ App\User::PAYMENT_OVER }}">Quá hạn</option>
                            <option value="{{ App\User::PAYMENT_NOT_USE }}">Không sử dụng nữa</option>
                        </select>
                    </th>
                    <th>
                        <select class="form-control">
                            <option value="">Tất cả</option>
                            <option value="{{ App\User::FROM_IOS }}">IOS</option>
                            <option value="{{ App\User::FROM_ANDROID }}">ANDROID</option>
                            <option value="{{ App\User::FROM_WEB }}">WEB</option>
                        </select>
                    </th>
                    <th>
                        <select class="form-control">
                            <option value="">Tất cả</option>
                            <option value="{{ App\User::BRANCH_MANAGE }}">Quản lý</option>
                            <option value="{{ App\User::BRANCH_FIND }}">Tìm khách</option>
                        </select>
                    </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>
@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>
    $('#room_status').parent().hide();
    $('#hostel_status').change(function() {
       var value = $(this).val();
       if(value == 'created')
       {
           $('#room_status').parent().show();
       } else {
           $('#room_status').parent().hide();
           $('#room_status').val("");
       }
    });

    $(document).on('change', '#province1', function (e) {
        $.ajax({
            url: '{{ url('get-sub-location') }}',
            type: 'get',
            data: {
                'id': $(this).val(),
                'type': 'province',
            },
            dataType: 'html',
            success: function (response) {
                $('#district1').html(response);
                $('#ward1').html('');

            }
        });
    });

    $(document).on('change', '#district1', function (e) {
        $.ajax({
            url: '{{ url('get-sub-location') }}',
            type: 'get',
            data: {
                'id': $(this).val(),
                'type': 'district'
            },
            dataType: 'html',
            success: function (response) {
                $('#ward1').html(response);

            }
        });
    });


    $(document).on('change', '#province2', function (e) {
        $.ajax({
            url: '{{ url('get-sub-location') }}',
            type: 'get',
            data: {
                'id': $(this).val(),
                'type': 'province',
            },
            dataType: 'html',
            success: function (response) {
                $('#district2').html(response);
                $('#ward2').html('');

            }
        });
    });

    $(document).on('change', '#district2', function (e) {
        $.ajax({
            url: '{{ url('get-sub-location') }}',
            type: 'get',
            data: {
                'id': $(this).val(),
                'type': 'district'
            },
            dataType: 'html',
            success: function (response) {
                $('#ward2').html(response);

            }
        });
    });


    $(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: {
                    password: "required",
                    confirm_password: {
                        equalTo: "#password"
                    },
                    phone: {
                        required: true,
                        remote: {
                            url: "{{ url('admin/check-unique-phone') }}",
                            type: "post",
                            data: {
                                phone: function () {
                                    return $("#phone").val();
                                }
                            }
                        }
                    },
                    email: {
                        required: true,
                        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: {
                    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: {
                        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'
                }
            }
        ).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 {
                        swal('Thông báo', response.message, 'warning');
                    }
                    table.ajax.reload();
                }
            });
        }
    });

    $('#btn-export').click(function(e) {
        var data = $('#form-export').serialize();
        window.location = '{{ url('admin/owner/export-excel') }}'+'?'+data;
    });

    $('.datepicker').datepicker({
        format: 'dd/mm/yyyy',
        language: 'vi',
        autoclose: true,
    });

    var table = '';

    $(document).on('change', '#package_id, #package_find_hostel_id', function (e) {
        e.preventDefault();
        var package_id = $('#package_id').val();
        var package_find_hostel_id = $('#package_find_hostel_id').val();
        var user_id = $('#edit_package_user').val();
        var that = this;
        $.ajax({
            url: '{{ url('admin/owner/get-package-content') }}',
            type: 'get',
            data: {
                package_id: package_id,
                package_find_hostel_id: package_find_hostel_id,
                user_id : user_id
            },
            beforeSend: function()
            {
                $('#edit-package-content').addClass('ht-on-loading');
            },
            dataType: 'json',
            success: function (response) {
                $('#edit-package-content').removeClass('ht-on-loading');
                $('#number_rooms').val(response.data.number_rooms);
                $('#number_hostels').val(response.data.number_hostels);
                $('#number_staffs').val(response.data.number_staffs);
                $('#number_interacts').val(response.data.number_interacts);
            }
        });
    });

    $(document).on('click', '#btn-save-package', function (e) {
        e.preventDefault();
        var data = $('#form-edit-package').serialize();
        $.ajax({
            url: '{{ url('admin/owner/edit-package') }}',
            type: 'post',
            data: data,
            dataType: 'json',
            beforeSend: function () {
                $('#edit-package-content').addClass('ht-on-loading');
            },
            success: function (response) {
                $('#edit-package').modal('hide');
                if (response.status == 1) {
                    swal('Thành công', '', 'success');
                } else {
                    swal('Thông báo', response.message, 'warning');
                }
            }
        });
    });

    $(document).on('click', '#btn-save-password', function (e) {
        e.preventDefault();
        var data = $('#form-change-password').serialize();
        $.ajax({
            url: '{{ url('admin/owner/change-password-ajax') }}',
            type: 'post',
            data: data,
            dataType: 'json',
            beforeSend: function () {
                $('#change-password-content').addClass('ht-on-loading');
            },
            success: function (response) {
                $('#change-password').modal('hide');
                if (response.status == 1) {
                    swal('Thành công', '', 'success');
                } else {
                    swal('Thông báo', response.message, 'warning');
                }
            }
        });
    });

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

    $(document).on('click', '.btn-edit-package', function(e) {
        e.preventDefault();
        var id = $(this).attr('data-id');
        var that = this;
        $.ajax({
            url: '{{ url('admin/owner/get-package') }}',
            type: 'get',
            data: {
                account_id: id,
            },
            beforeSend: function()
            {
                $('#edit-package-content').addClass('ht-on-loading');
            },
            dataType: 'json',
            success: function (response) {
               $('#edit-package-content').removeClass('ht-on-loading').html(response.html);
                $('.datepicker').datepicker({
                    format: 'dd/mm/yyyy',
                    autoclose: true,
                });
            }
        });
    });

    $(document).on('click', '.btn-change-password', function(e) {
        e.preventDefault();
        var id = $(this).attr('data-id');
        var that = this;
        $.ajax({
            url: '{{ url('admin/owner/change-password') }}',
            type: 'get',
            data: {
                account_id: id,
            },
            beforeSend: function()
            {
                $('#change-password-content').addClass('ht-on-loading');
            },
            dataType: 'json',
            success: function (response) {
                $('#change-password-content').removeClass('ht-on-loading').html(response.data);
            }
        });
    });

    $(function () {
        table = $('#orders-table').DataTable({
            "bDestroy": true,
            processing: true,
            searching: true,
            "aaSorting": [[10, 'desc']],
            serverSide: true,
            ajax: {
                url: '{!! url('admin/owner/owner.data') !!}',
                data: function(d)
                {
                    d.hostel_status= $('#hostel_status').val();
                    d.room_status = $('#room_status').val();
                    d.start_date = $('#start_time').val();
                    d.end_date = $('#end_time').val();
                    d.owner_id = '{{ request()->input('owner_id') }}'
                }
            },
            columns: [

                {
                    "render": function (data, type, full, meta) {
                        return '<img src="'+full.image+'" style="max-width: 100px">';
                    }
                },
                {data: 'name', name: 'name'},
                {data: 'phone', name: 'phone'},
                {data: 'email', name: 'email'},
                {data: 'hostels_count', name: 'hostels_count'},
                {data: 'rooms_count', name: 'rooms_count'},
                {data: 'payment_status', name: 'payment_status'},
                {data: 'from', name: 'from'},
                {data: 'branch_app', name: 'branch_app'},
                {data: 'last_login_at', name: 'last_login_at'},
                {data: 'created_at', name: 'created_at'},

                {data: 'action', name: 'action', searchable: false, orderable: false},
            ],
            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