@extends('admin2')

@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/typeahead/typeahead.css" rel="stylesheet" type="text/css"/>
    <link href="/assets/global/plugins/bootstrap-select/css/bootstrap-select.min.css" rel="stylesheet" type="text/css"/>
    <link href="/assets/global/plugins/datatables/datatables.min.css" rel="stylesheet" type="text/css"/>
    <link href="/assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.css" rel="stylesheet"
          type="text/css"/>



    <style>

        td.details-control > div {
            background: url('https://datatables.net/examples/resources/details_open.png') no-repeat center center !important;
            cursor: pointer;
        }
        tr.shown td.details-control {
            background: url('https://datatables.net/examples/resources/details_close.png') no-repeat center center !important;
        }

        .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">
        Thu chi
    </h1>

    <div class="row"
         style="margin-right: 0px; margin-left: 0px; padding-top: 15px; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #e7ecf1; background-color: #EFF2F5">
        <div class="col-md-12">
            <div class="row">


                <div class="col-md-2">
                    <label class="control-label">Chọn nhà</label>
                    <select class="form-control" id="hostels">
                        <option value="">Tất cả nhà</option>
                        @php
                            $hostelArrs = \App\Models\Hostel::where('owner_id', auth('backend')->user()->id)->pluck('id')->toArray();

                             if(auth('backend')->user()->type == \App\User::STAFF)
	    {
		    $hostelArrs = \App\Components\Functions::getHostelArrStaff();
	    }
                                $hostels = \App\Models\Hostel::whereIn('id', $hostelArrs)->get();

                        @endphp
                        @foreach($hostels as $hostel)
                            <option
                                    value="{{ $hostel->id }}">{{ $hostel->name }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-2">
                    <label class="control-label">Chọn phòng</label>
                    <select class="form-control select2" id="select-rooms">
                        <option value=" " selected>Tất cả phòng</option>
                        @if(!empty($hostels))

                            @php $hostel = $hostels->first();
                            if($hostel){
                            $hostelId = $hostel->id;
                            $rooms = \App\Models\Room::where('hostel_id', $hostelId)->get();
                            }
                            @endphp

                            @if(!empty($rooms))
                                @foreach($rooms as $room)
                                    <option value="{{ $room->id }}"> {{ $room->name }}</option>
                                @endforeach
                            @endif


                        @endif
                    </select>
                </div>


                <div class="col-md-2">
                    <div class="row">
                        <div class="col-md-6">
                            <label class="control-label">Ngày bắt đầu</label>
                            <input class="form-control date-picker" type="text" name="start_date" id="start_date">
                        </div>


                        <div class="col-md-6">
                            <label class="control-label">Ngày kết thúc</label>
                            <input class="form-control date-picker" type="text" name="end_date" id="end_date">
                        </div>
                    </div>
                </div>


                <div class="col-md-2">
                    <label class="control-label">Loại chứng từ</label>
                    <select class="form-control" id="type">
                        <option value=" " selected>Tất cả</option>
                        <option value="{{ App\Models\CollectSpend::COLLECT }}">Phiếu thu</option>
                        <option value="{{ App\Models\CollectSpend::SPEND }}">Phiếu chi</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="control-label">Trạng thái</label>
                    <select class="form-control" id="status">
                        <option value="1">Đã thanh toán</option>
                        <option value="2">Hủy / Xóa</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="control-label">Người tạo</label>
                    <select class="form-control" id="user">
                        <option value=" " selected>Tất cả</option>
                       @foreach($users as $user)
                        <option value="{{ $user->id }}">{{ $user->name_text }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        </div>



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

            <div class="row">
                <div class="col-md-12" id="hostels-button">

                    @if(auth('backend')->user()->can('add-spend'))

                        <a style="margin-right: 10px" class="btn green-meadow pull-left btn-export-excel"
                           data-type="outcome"
                           href="#export-excel" data-toggle="modal">
                            <i class="fa fa-file-excel"></i> Xuất Excel</a>
                        <a href="#spend" data-toggle="modal" class="btn btn-success pull-left" id="btn-add-spend" style="margin-right: 10px ">Thêm
                            phiếu chi</a>
                        @if(auth('backend')->user()->can('add-collect'))

                            <a href="#collect" data-toggle="modal" class="btn btn-success pull-left" id="btn-add-collect"
                               style="float: right; margin-right: 10px">Thêm
                                phiếu thu</a>
                        @endif
                    @endif

                </div>
            </div>
        </div>
    </div>
    <div class="row" id="stat">
    </div>
    <div class="row">


        <div class="col-md-12">
            <table class="table table-striped table-bordered table-hover dt-responsive" id="orders-table">
                <thead>
                <tr style="background-color: #5376B9; color: white">

                    <th class="all">STT</th>
                    <th>Mã phiếu</th>
                    <th>Hợp đồng</th>
                    <th>Loại thu chi</th>
                    <th>Người nộp / nhận</th>
                    <th>Số tiền</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 bs-modal-lg" id="spend" 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">Lập phiếu chi</h4>
                </div>
                <div class="modal-body" id="spend-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-spend">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 nhà <span class="required"
                                                                  aria-required="true"> (*) </span></label>
                                        <select class="form-control" name="hostel_id" id="hostel_id_2">
                                            @php
                                                

                                                                        $hostelArrs = \App\Models\Hostel::where('owner_id', auth('backend')->user()->id)->pluck('id')->toArray();

                             if(auth('backend')->user()->type == \App\User::STAFF)
	    {
		    $hostelArrs = \App\Components\Functions::getHostelArrStaff();
	    }
                                $hostels = \App\Models\Hostel::whereIn('id', $hostelArrs)->get();


                                            @endphp

                                            <option value="">Vui lòng chọn</option>
                                            @foreach($hostels as $hostel)
                                                <option value="{{ $hostel->id }}"> {{ $hostel->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Chọn phòng</label>
                                        <select class="form-control" name="room_id" id="room_id_2">

                                        </select>
                                    </div>
                                </div>
                            </div>
                            <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="modal fade bs-modal-lg" id="collect" 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">Lập phiếu thu</h4>
                </div>
                <div class="modal-body" id="collect-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-collect">Lưu</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>


    <div class="modal fade bs-modal-lg" id="detail-money-info" 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="detail-money-info-title">Thông tin hóa đơn</h4>
                </div>
                <div class="modal-body" id="detail-money-info-content">


                </div>
                <div class="modal-footer">
                    <button type="button" class="btn dark btn-outline" data-dismiss="modal" id="dismiss-modal">Hủy
                    </button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <div class="modal fade bs-modal-lg" id="edit-collect-spend" 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="collect-spend-title">Cập nhật phiếu thu chi</h4>
                </div>
                <div class="modal-body" id="edit-collect-spend-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">Lưu</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>


@endsection

@push('scripts')

    <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/global/plugins/typeahead/handlebars.min.js" type="text/javascript"></script>
    <script src="/assets/global/plugins/typeahead/typeahead.bundle.min.js" type="text/javascript"></script>
    <script src="/assets/global/plugins/bootstrap-select/js/bootstrap-select.min.js" type="text/javascript"></script>
    <script src="/assets/pages/scripts/components-bootstrap-select.min.js" type="text/javascript"></script>

    <script src="/assets/global/scripts/datatable.js" type="text/javascript"></script>
    <script src="/assets/global/plugins/datatables/datatables.min.js" type="text/javascript"></script>
    <script src="/assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.js"
            type="text/javascript"></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 type="text/javascript">--}}
    {{--var file1 = $('.add-image-hostel').val();--}}

    {{--$('#file-upload').on('change.bs.fileinput', function(e, file) {--}}
    {{--//console.log(e)--}}
    {{--$('#file1').val(file1)--}}
    {{--});--}}


    {{--$('#file-upload').on('clear.bs.fileinput', function(e, file) {--}}
    {{--//console.log(e)--}}
    {{--$('#file1').val(file1)--}}
    {{--});--}}
    {{--</script>--}}

    <script>


        //    $(document).on('change', '.add-image-hostel', function(e) {
        //        alert('123');
        //       $('.fileinput-exists').css({
        //           'width' : '48%'
        //       });
        //
        //      $('.btn-file').css({
        //          'width' : '100%'
        //      });
        //
        //
        //    });

        var table = null;

        $('#select-rooms').change(function () {
            getPostByAttr();
        });

        $('#hostels').change(function (e) {
            getPostByAttr();
            $.ajax({
                url: '{{ url('admin2/hostel/select-rooms') }}',
                type: 'get',
                data: {
                    hostel_id: $(this).val()
                },
                dataType: 'json',
                success: function (response) {
                    $('#select-rooms').html(response.data);
                }
            })
        });

        //    $('#start_date').change(function (e) {
        //        getPostByAttr();
        //    });

        function getDt() {

        }

        $('.date-picker').datepicker({
            format: 'dd/mm/yyyy',
            autoclose: true,
        }).on('changeDate', function (ev) {
            //  get_stat();
            getPostByAttr();
        });

        $('#type').change(function () {
            getPostByAttr();
        });

        $('#status').change(function () {
            getPostByAttr();
        });
        $('#user').change(function () {
            getPostByAttr();
        });

        // $('.btn-export-excel').click(function (e) {
        //     var data_type = $(this).attr('data-type');
        //     $('#type_export').val(data_type);
        // });

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

        function get_stat() {
            $.ajax({
                url: '{!! url('admin2/money/money2.data') !!}',
                data: {

                    type: $('#type').val(),
                    status: $('#status').val(),
                    user: $('#user').val(),

                    hostel_id: $('#hostels').val(),
                    start_date: $('#start_date').val(),
                    end_date: $('#end_date').val(),
                    type_voucher: $('#type').val(),
                    room_id: $('#select-rooms').val(),
                    is_stat: 1,
                },
                beforeSend: function () {
                    $('#stat').addClass('ht-on-loading');
                },
                dataType: 'json',
                success: function (response) {
                    $('#stat').removeClass('ht-on-loading').html(response.data);
                }
            });
        }

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

        $(function () {
            get_stat();

//        $('#orders-table tfoot th').each( function (index) {
//            if(index != 0 && index != 9) {
//                $(this).html('<input type="text" class="form-control" />');
//            }
//        } );co
            table = $('#orders-table').DataTable({
                "bDestroy": true,
                processing: true,
                searching: true,
                serverSide: true,
                responsive: {
                    details: {}
                },


                ajax: {
                    url: '{!! url('admin2/money/money2.data') !!}',
                    data: function (d) {
                        d.type = $('#type').val();
                        d.status = $('#status').val();
                        d.user = $('#user').val();
                        d.hostel_id = $('#hostels').val();
                        d.start_date = $('#start_date').val();
                        d.end_date = $('#end_date').val();
                        d.room_id = $('#select-rooms').val();
                    }
                },
                // "columnDefs": [
                //     {
                //         "targets": [2],
                //         "visible": false,
                //     },
                // ],
                columns: [

                    {
                        data: 'DT_Row_Index',
                        name: 'DT_Row_Index',
                        orderable: false,
                        searchable: false,
                    },
                    {data: 'code', name: 'code'},
                    {data: 'contract_name', name: 'contract_name'},
                    {data: 'money_info_type', name: 'money_info_type'},
                    {data: 'user', name: 'user'},
                    {data: 'amount', name: 'amount'},
                    {data: 'action', name: 'action', 'orderable' : false, searchable: false},
                ],
            });




            function format(d) {
                // `d` is the original data object for the row
                return '<table cellpadding="5" cellspacing="0" border="1" style="margin: auto;">' +
                    '<tr>' +
                    '<td>Mã phiếu:' + d.code + '</td>' +
                    '<td>Nhà: ' + d.hostel_name + '</td>' +
                    '<td>Người nộp / nhận: ' + d.user + '</td>' +
                    '</tr>' +
                    '<tr>' +
                    '<td>Thời gian: ' + d.created_at + '</td>' +
                    '<td>Phòng: ' + d.room_name + '</td>' +
                    '<td>Người tạo: ' + d.creator + '</td>' +
                    '</tr>' +
                    '<tr>' +
                    '<td>Số tiền: '+d.amount+'</td>' +
                    '<td>Hợp đồng: '+d.contract_code+'</td>' +
                    '<td>Hình thức: '+d.payment_method+'</td>' +
                    '</tr>' +
                    '<tr>' +
                    '<td>Loại thu chi: '+d.money_info_type+'</td>' +
                    '<td>Hóa đơn: '+d.money_info_name_2+'</td>' +
                    '<td>Nội dung: '+d.name+'</td>' +
                    '</tr>' +
                    '<tr>' +
                    '<td>'+d.edit_btn+'</td>' +
                    '<td>'+d.delete_btn+'</td>' +
                    '<td> '+d.print_btn+'</td>' +
                    '</tr>' +
                    '</table>';
            }

            $('#orders-table tbody').on('click', '.details-control', function () {
                var tr = $(this).parent().parent();
                var row = table.row(tr);

                if (row.child.isShown()) {
                    // This row is already open - close it
                    row.child.hide();
                    tr.removeClass('shown');
                } else {
                    // Open this row
                    row.child(format(row.data())).show();
                    tr.addClass('shown');
                }
            });

        });

        $("#spend").on("shown.bs.modal", function (e) {
            $.ajax({
                url: '{{ url('admin2/money/spendView') }}',
                type: 'get',
                dataType: 'json',
                beforeSend: function () {
                    $('#spend-content').addClass('ht-on-loading');
                },
                success: function (response) {
                    if (response.status == 2) {
                        swal('Thông báo', response.message, 'info');
                    }

                    if (response.status == 1) {
                        $('#spend-content').removeClass('ht-on-loading').html(response.data);
                        $('.datepicker').datepicker({
                            format: 'dd/mm/yyyy',
                            autoclose: true,
                        });

                        $('#receiver').typeahead({
                            hint: true,
                            highlight: true,
                            minLength: 1
                        }, {
                            source: function (query, syncresults, process) {
                                return $.ajax({
                                    url: '{{ url('admin2/money/receivers') }}',
                                    data: {q: query},
                                    dataType: 'json',
                                    type: 'get',
                                    success: function (response) {
                                        return process(response)
                                    }
                                });
                            },
                            display: 'name', // PUT IT HERE
                            templates: {
                                empty: [
//                    '<div class="empty-message">',
//                    '</div>'
                                ].join('\n'),
                                suggestion: function (data) {
                                    return '<div>' + data.name + '</div>';
                                }
                            }
                        })
                    }
                }
            });
        });

        $("#collect").on("shown.bs.modal", function (e) {
            $.ajax({
                url: '{{ url('admin2/money/collectView') }}',
                type: 'get',
                dataType: 'json',
                beforeSend: function () {
                    $('#collect-content').addClass('ht-on-loading');
                },
                success: function (response) {
                    if (response.status == 2) {
                        swal('Thông báo', response.message, 'info');
                    }

                    if (response.status == 1) {
                        $('#collect-content').removeClass('ht-on-loading').html(response.data);
                        $('.datepicker').datepicker({
                            format: 'dd/mm/yyyy',
                            autoclose: true,
                        });
                    }
                }
            });
        });

        $(document).on('click', '.detail-money', function () {
            var money_info_id = $(this).attr('data-id');
            $.ajax({
                url: '{{ url('admin2/money/detail-money-info') }}',
                type: 'get',
                data: {
                    money_info_id: money_info_id
                },
                dataType: 'json',
                beforeSend: function () {
                    $('#detail-money-info-content').addClass('ht-on-loading');
                },
                success: function (response) {
                    $('#detail-money-info-content').removeClass('ht-on-loading').html(response.data);
                    $('#detail-money-info-title').text(response.title);
                }
            });

        });


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

            $("#edit-collect-spend").off('shown.bs.modal').on("shown.bs.modal", function (e) {
                $.ajax({
                    url: '{{ url('admin2/money/edit-spendView') }}',
                    type: 'get',
                    data: {
                        id: id
                    },
                    dataType: 'json',
                    beforeSend: function () {
                        $('#edit-collect-spend-content').addClass('ht-on-loading');
                        $('#spend-content').html('');
                    },
                    success: function (response) {
                        $('#edit-collect-spend-content').removeClass('ht-on-loading').html(response.data);
                        $('.datepicker').datepicker({
                            format: 'dd/mm/yyyy',
                            autoclose: true,
                        });

                        $('#collect-spend-title').text(response.code);
                        $('#receiver').typeahead({
                            hint: true,
                            highlight: true,
                            minLength: 1
                        }, {
                            source: function (query, syncresults, process) {
                                return $.ajax({
                                    url: '{{ url('admin2/money/receivers') }}',
                                    data: {q: query},
                                    dataType: 'json',
                                    type: 'get',
                                    success: function (response) {
                                        return process(response)
                                    }
                                });
                            },
                            display: 'name', // PUT IT HERE
                            templates: {
                                empty: [
//                    '<div class="empty-message">',
//                    '</div>'
                                ].join('\n'),
                                suggestion: function (data) {
                                    return '<div>' + data.name + '</div>';
                                }
                            }
                        })
                    }
                });
            });
        });

        $(document).off('click', '.btn-edit-collect').on('click', '.btn-edit-collect', function (e) {
            var id = $(this).attr('data-id');

            $("#edit-collect-spend").off('shown.bs.modal').on("shown.bs.modal", function (e) {
                $.ajax({
                    url: '{{ url('admin2/money/edit-collectView') }}',
                    type: 'get',
                    data: {
                        id: id
                    },
                    dataType: 'json',
                    beforeSend: function () {
                        $('#edit-collect-spend-content').addClass('ht-on-loading');
                        $('#spend-content').html('');
                    },
                    success: function (response) {
                        $('#edit-collect-spend-content').removeClass('ht-on-loading').html(response.data);
                        $('.datepicker').datepicker({
                            format: 'dd/mm/yyyy',
                            autoclose: true,
                        });

                        $('#collect-spend-title').text(response.code);
                        $('#receiver').typeahead({
                            hint: true,
                            highlight: true,
                            minLength: 1
                        }, {
                            source: function (query, syncresults, process) {
                                return $.ajax({
                                    url: '{{ url('admin2/money/receivers') }}',
                                    data: {q: query},
                                    dataType: 'json',
                                    type: 'get',
                                    success: function (response) {
                                        return process(response)
                                    }
                                });
                            },
                            display: 'name', // PUT IT HERE
                            templates: {
                                empty: [
//                    '<div class="empty-message">',
//                    '</div>'
                                ].join('\n'),
                                suggestion: function (data) {
                                    return '<div>' + data.name + '</div>';
                                }
                            }
                        })
                    }
                });
            });
        });


        $(document).on('change', '#hostel_id', function (e) {
            var id = $(this).val();
            var type = $(this).attr('data-type');
            $.ajax({
                url: '{{ url('get-sub-hostel') }}',
                type: 'get',
                data: {
                    'id': $(this).val(),
                    'type': type
                },
                dataType: 'html',
                success: function (response) {
                    $('#room_id').html(response);
                    $('#room_id').select2();

                }
            });
        });

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

        $(document).on('change', '#hostel_id_2', function (e) {
            var id = $(this).val();
            $.ajax({
                url: '{{ url('get-sub-hostel') }}',
                type: 'get',
                data: {
                    'id': $(this).val(),
                },
                dataType: 'html',
                success: function (response) {
                    $('#room_id_2').html(response);
                    $('#room_id_2').select2();

                }
            });
        });

        $(document).on('click', '#btn-save-spend', function (e) {
            e.preventDefault();
            //var data = $('#form-add-spend').serialize();
            var data = new FormData($('#form-add-spend')[0]);
            var formStatus = $('#form-add-spend').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")
                },
                rules: {
                    // 'hostel_id': "required",
                    'name': "required",
                    //  'amenities[]': "required",
                    'date_action': {
                        required: true,
                    },
                    'amount': {
                        required: true,
                    },
                    'receiver': {
                        required: true,
                    },
                    'payment_method': {
                        required: true,
                    }
                },
                messages: {
                    //  'hostel_id': "Không được bỏ trống nhà trọ",
                    'name': "Không được bỏ trống lý do chi",
                    'date_action': "Không được bỏ trống ngày chi",
                    'amount': "Không được bỏ trống số tiền",
                    'receiver': "Không được bỏ trống người nhận",
                    'payment_method': "Không được bỏ trống phương thức thanh toán",
                    // 'amenities[]': "Không được bỏ trống tiện ích"
                }
            }).form();
            if (formStatus) {
                $.ajax({
                    url: '{{ url('admin2/money/spend') }}',
                    type: 'post',
                    data: data,
                    dataType: 'json',
                    cache:false,
                    contentType: false,
                    processData: false,
                    beforeSend: function () {
                        $('#spend-content').addClass('ht-on-loading');
                    },
                    success: function (response) {
                        $('#spend-content').removeClass('ht-on-loading');
                        if (response.status == 1) {
                            swal('Thành công', 'Lập phiếu chi thành công', 'success');
                            get_stat();
                            table.ajax.reload();
                            $('#spend').modal('hide');
                        } else {
                            swal('Thông báo', response.message, 'warning');
                        }
                    }
                });
            }
        });


        $(document).on('click', '.btn-delete-cp-file', function (e) {
            e.preventDefault();

            var id = $(this).attr('data-id');
            var that =this;

            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('admin2/money/delete-cp-file') }}',
                            type: 'post',
                            data: {
                                id: id
                            },
                            dataType: 'json',
                            success: function (response) {
                                if (response.status == 1) {
                                    swal('Xóa thành công', '', 'success');
                                    $(that).parent().parent().remove();
                                 //   table.ajax.reload();
                                } else {
                                    swal('Thông báo', response.message, 'info');
                                }
                            }
                        });
                    }
                }
            });
        });

        $(document).on('click', '#btn-save-collect', function (e) {
            e.preventDefault();
          //  var data = $('#form-add-collect').serialize();
            var data = new FormData($('#form-add-collect')[0]);

            var formStatus = $('#form-add-collect').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")
                },
                rules: {
                    'hostel_id': "required",
                    'name': "required",
                    //  'amenities[]': "required",
                    'date_action': {
                        required: true,
                    },
                    'amount': {
                        required: true,
                    },
                    'receiver': {
                        required: true,
                    },
                    'payment_method': {
                        required: true,
                    },
                    'payer': {
                        required: true,
                    }

                },
                messages: {
                    'hostel_id': "Không được bỏ trống nhà trọ",
                    'name': "Không được bỏ trống lý do chi",
                    'date_action': "Không được bỏ trống ngày thu",
                    'amount': "Không được bỏ trống số tiền",
                    'payment_method': "Không được bỏ trống phương thức thanh toán",
                    'payer': "Không được bỏ trống người nộp tiền"
                }
            }).form();

            if (formStatus) {

                $.ajax({
                    url: '{{ url('admin2/money/collect') }}',
                    type: 'post',
                    data: data,
                    dataType: 'json',
                    cache:false,
                    contentType: false,
                    processData: false,
                    beforeSend: function () {
                        $('#spend-content').addClass('ht-on-loading');
                    },
                    success: function (response) {
                        $('#spend-content').removeClass('ht-on-loading');
                        if (response.status == 1) {
                            swal('Thành công', 'Lập phiếu thu thành công', 'success');
                            table.ajax.reload();
                            $('#collect').modal('hide');
                        } else {
                            swal('Thông báo', response.message, 'warning');
                        }

                    }
                });
            }
        });

        $(document).on('click', '#btn-save-edit', function (e) {
            e.preventDefault();
            //   var data = $('#form-edit-spend').serialize();
            var data = new FormData($('#form-edit-spend')[0]);

            var formStatus = $('#form-edit-spend').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")
                },
                rules: {
                    //'hostel_id': "required",
                    'name': "required",
                    //  'amenities[]': "required",
                    'date_action': {
                        required: true,
                    },
                    'amount': {
                        required: true,
                    },
                    'receiver': {
                        required: true,
                    },
                    'payment_method': {
                        required: true,
                    }
                },
                messages: {
                    //'hostel_id': "Không được bỏ trống nhà trọ",

                    @if(request()->url == url('admin2/money/income'))
                    'name': "Không được bỏ trống lý do thu",

                    'date_action': "Không được bỏ trống ngày thu",

                    @else
                    'name': "Không được bỏ trống lý do chi",

                    'date_action': "Không được bỏ trống ngày chi",
                    @endif
                    'amount': "Không được bỏ trống số tiền",
                    'receiver': "Không được bỏ trống người nhận",
                    'payment_method': "Không được bỏ trống phương thức thanh toán",
                    // 'amenities[]': "Không được bỏ trống tiện ích"
                }
            }).form();

            if (formStatus) {

                $.ajax({
                    url: '{{ url('admin2/money/edit-spend') }}',
                    type: 'post',
                    data: data,
                    cache:false,
                    contentType: false,
                    processData: false,
                    dataType: 'json',
                    beforeSend: function () {
                        $('#edit-collect-spend-content').addClass('ht-on-loading');
                    },
                    success: function (response) {
                        $('#edit-collect-spend-content').removeClass('ht-on-loading');
                        if (response.status == 1) {
                            swal('Thành công', 'Cập nhật thành công', 'success');
                            table.ajax.reload();
                            $('#edit-collect-spend').modal('hide');
                        } else {
                            swal('Thông báo', response.message, 'warning');
                        }

                    }
                });
            }
        });

        @if(request()->url == url('admin2/money/income'))
        $(document).ready(function () {
            $.ajax({
                url: '{{ url('admin2/money/collect-stat') }}',
                type: 'post',
                data: {},
                dataType: 'json',
                beforeSend: function () {
                    $('#edit-collect-spend-content').addClass('ht-on-loading');
                },
                success: function (response) {
                    $('#edit-collect-spend-content').removeClass('ht-on-loading');
                    if (response.status == 1) {
                        swal('Thành công', 'Cập nhật thành công', 'success');
                        table.ajax.reload();
                        $('#edit-collect-spend').modal('hide');
                    } else {
                        swal('Thông báo', response.message, 'warning');
                    }

                }
            });
        });
        @endif



        $(document).on('click', '.btn-delete-money', 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('admin2/money/delete') }}',
                            type: 'post',
                            data: {
                                id: id
                            },
                            dataType: 'json',
                            success: function (response) {
                                if (response.status == 1) {
                                    swal('Xóa thành công', '', 'success');
                                    table.ajax.reload();
                                } else {
                                    swal('Thông báo', response.message, 'info');
                                }
                            }
                        });
                    }
                }
            });
        });
        //$('.bs-select').selectpicker();
    </script>

@endpush