@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"/>
    <link href="/assets/global/plugins/icheck/skins/all.css" rel="stylesheet" type="text/css"/>


@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 thu chi</h3>

    <div class="row" style="margin-top: 15px; margin-bottom: 15px">
        <div class="col-md-12">
            <a href="#calculate" data-toggle="modal" class="btn btn-success">Tính tiền</a>
            <a href="#add-spend" data-toggle="modal" class="btn btn-danger">Tạo phiếu chi</a>
        </div>
    </div>

    <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 / Năm</label>
                            <br>
                            <input type="text" class="form-control datepicker" id="date_action_filter"
                                   value="{{ \Carbon\Carbon::now()->format('m/Y') }}">
                        </div>
                        <div class="mt-repeater-input">
                            <label class="control-label">Nhà trọ</label>
                            <br>
                            <select name="hostel_id" class="form-control select2" id="hostel_id_filter">
                                <option value="" selected="">Tất cả</option>
                                @foreach($hostels as $hostel)
                                    <option value="{{ $hostel->id }}">{{ $hostel->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="mt-repeater-input">
                            <label class="control-label">Phòng trọ</label>
                            <br>
                            <select name="room_id" class="form-control" id="room_id_filter">
                                <option value="" selected="">Tất cả</option>
                            </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 class="row">
        <div class="col-md-12">

            <div class="row">
                <div class="col-lg-4 col-md-3 col-sm-6 col-xs-12">
                    <a class="dashboard-stat dashboard-stat-v2 red" href="#">
                        <div class="visual">
                            <i class="fa fa-bar-chart-o"></i>
                        </div>
                        <div class="details">
                            <div class="number">
                                <span id="amount" data-counter="counterup" data-value="0">0</span>
                            </div>
                            <div class="desc"> Tổng tiền</div>
                        </div>
                    </a>
                </div>
                <div class="col-lg-4 col-md-3 col-sm-6 col-xs-12">
                    <a class="dashboard-stat dashboard-stat-v2 green" href="#">
                        <div class="visual">
                            <i class="fa fa-shopping-cart"></i>
                        </div>
                        <div class="details">
                            <div class="number">
                                <span id="pay" data-counter="counterup" data-value="0">0</span>
                            </div>
                            <div class="desc"> Tổng đã trả</div>
                        </div>
                    </a>
                </div>
                <div class="col-lg-4 col-md-3 col-sm-6 col-xs-12">
                    <a class="dashboard-stat dashboard-stat-v2 yellow" href="#">
                        <div class="visual">
                            <i class="fa fa-globe"></i>
                        </div>
                        <div class="details">
                            <div class="number">
                                <span id="remain" data-counter="counterup" data-value="0">0</span>
                            </div>
                            <div class="desc"> Còn lại</div>
                        </div>
                    </a>
                </div>
            </div>


        </div>
        <div class="col-md-12" id="result-data">

        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <table class="table table-striped table-bordered table-hover" id="orders-table">
                <thead>
                <tr>
                    <th>Nhà</th>
                    <th>Phòng</th>
                    <th>Số tiền</th>
                    <th>Đã thanh toán</th>
                    <th>Còn lại</th>
                    <th>Hành động</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>

    <div class="modal fade" id="calculate"  role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                    <h4 class="modal-title">Tính tiền</h4>
                </div>
                <div class="modal-body">

                    <form id="form-fee">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label>Nhà trọ</label>
                                    <select class="form-control select2" id="hostel_id_2" name="hostels[]"
                                            multiple="multiple">

                                        @if($hostels->count() == 1)
                                            <option value="{{ $hostels->first()->id }}">{{ $hostels->first()->name }}</option>
                                        @else
                                            <option value="">Vui lòng chọn</option>
                                            @foreach($hostels as $hostel)
                                                <option value="{{ $hostel->id }}">{{ $hostel->name }}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>Phòng trọ</label>
                                    <select class="form-control select2" id="room_id_2" name="rooms[]"
                                            multiple="multiple">

                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>Tháng năm</label>
                                    <input class="form-control datepicker" name="date_action"
                                           value="{{ \Carbon\Carbon::now()->format('m/Y') }}">
                                </div>
                            </div>
                        </div>
                    </form>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn dark btn-outline" data-dismiss="modal">Đóng</button>
                    <button type="button" class="btn green" id="save-fee-month">Lưu</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <div class="modal fade" id="charge-money"  role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                    <h4 class="modal-title">Thu tiền</h4>
                </div>
                <div class="modal-body">

                    <form id="form-charge-fee">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label>Ngày thanh toán</label>
                                    <input class="form-control datepicker2" name="date_action"
                                           value="{{ \Carbon\Carbon::now()->format('d/m/Y') }}">
                                </div>
                                <div class="form-group">
                                    <label>Số tiền</label>
                                    <input class="form-control" name="amount">
                                </div>
                                <input type="hidden" name="id" id="data-id-charge">
                            </div>
                        </div>
                    </form>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn dark btn-outline" data-dismiss="modal">Đóng</button>
                    <button type="button" class="btn green" id="charge-fee">Lưu</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <div class="modal fade bs-modal-lg" id="detail-money"  role="dialog" 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">Xem chi tiết</h4>
                </div>
                <div class="modal-body">

                    <form id="form-detail-fee">

                    </form>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn dark btn-outline" data-dismiss="modal">Đóng</button>
                    <button type="button" class="btn green" id="update-info">Cập nhật</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <div class="modal fade bs-modal-lg" id="add-spend"  role="dialog" 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">Tạo phiếu chi</h4>
                </div>
                <div class="modal-body">

                    <form id="form-spend">
                        <div class="row">

                            <div class="col-md-6">

                                <div class="form-group">
                                    <label>Ngày chi</label>
                                    <div>
                                        <input type="text" name="date_action" class="form-control datepicker2"
                                               placeholder="Ngày chi"
                                               value="{{ \Carbon\Carbon::now()->format('d/m/Y') }}">
                                    </div>
                                </div>
                                <input type="hidden" name="type" value="{{ \App\Models\Transaction::SPEND }}">

                                <div class="form-group">
                                    <label>Số tiền</label>
                                    <div>
                                        <input type="amount" name="amount" class="form-control"
                                               placeholder="Số tiền">
                                    </div>
                                </div>


                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Nhà trọ</label>
                                    <select class="form-control select2" name="hostel_id">

                                        <option value="0">Vui lòng chọn</option>
                                        @foreach($hostels as $hostel)
                                            <option value="{{ $hostel->id }}">{{ $hostel->name }}</option>
                                        @endforeach

                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>Ghi chú</label>
                                    <div>
                                <textarea type="text" name="note" class="form-control"
                                          placeholder="Ghi chú" id="note" value="{{ old('note') }}"></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </form>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn dark btn-outline" data-dismiss="modal">Đóng</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="history-money"  role="dialog" 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="history-title">Lịch sử thu tiền</h4>
                </div>
                <div class="modal-body">
                    <div class="row" id="history-detail">


                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn dark btn-outline" data-dismiss="modal">Đóng</button>
                    <button type="button" class="btn green" id="btn-save-spend">Lưu</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </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/icheck/icheck.min.js" type="text/javascript"></script>
<script src="/assets/bootstrap-datepicker.vi.js" charset="UTF-8" type="text/javascript"></script>

{{--<script src="/assets/pages/scripts/form-editable.min.js" type="text/javascript"></script>--}}

@endpush


@push('scripts')
<script>

    $(document).on('blur', '.form-detail', function () {
        var val = $(this).val();
        var price = $(this).parent().parent().parent().parent().prev().html();
        var start_price = $(this).parent().parent().prev().find('input').val();

        console.log(start_price);

        price = parseInt(price.split('.').join(""));

        $(this).parent().parent().parent().parent().next().html(numberWithDots(price * val));
    });

    $(document).on('click', '.btn-detail', function () {
        var data_id = $(this).attr('data-id');
        $.ajax({
            url: '{{ url('admin/money/detail/') }}' + '/' + data_id,
            dataType: 'json',
            type: 'get',
            success: function (response) {
                $('#form-detail-fee').html(response.html);
            }
        });
    });

    $(document).on('click', '.btn-history', function () {
        var data_id = $(this).attr('data-room-id');
        $.ajax({
            url: '{{ url('admin/money/history') }}',
            dataType: 'json',
            type: 'get',
            data: {
                room_id: data_id
            },
            success: function (response) {
                $('#history-detail').html(response.html);
                $('#history-title').html(response.title);

            }
        });
    });

    $(document).on('click', '#update-info', function () {
        var data = $('#form-detail-fee').serialize();
        $.ajax({
            url: '{{ url('admin/money/update/') }}',
            dataType: 'json',
            type: 'post',
            data: data,
            success: function (response) {
                if (response.status == 1) {
                    $('#detail-money').modal('hide');
                    swal('Thành công', '', 'success');
                    var date_action = $('#date_action_filter').val();
                    var hostel_id = $('#hostel_id_filter').val();
                    var room_id = $('#room_id_filter').val();
                    $.ajax({
                        url: '{{ url('admin/money/stat') }}',
                        dataType: 'json',
                        data: {
                            date_action: date_action,
                            hostel_id: hostel_id,
                            room_id: room_id
                        },
                        success: function (response) {
                            $('#amount').html(response.data.amount);
                            $('#pay').html(response.data.pay);
                            $('#remain').html(response.data.remain);
                        }
                    });
                    table.draw();
                } else {
                    swal('Thông báo', response.message, 'warning');
                }
            }
        });
    });


    $(document).on('click', '.btn-charge', function () {
        var data_id = $(this).attr('data-id');
        $('#data-id-charge').val(data_id);
    });

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

    $(document).on('click', '#charge-fee', function (e) {
        e.preventDefault();
        var data = $('#form-charge-fee').serialize();
        $.ajax({
            url: '{{ url('admin/money/charge') }}',
            data: data,
            type: 'post',
            dataType: 'json',
            success: function (response) {
                if (response.status == 1) {
                    $('#charge-money').modal('hide');
                    swal('Thành công', '', 'success');
                    var date_action = $('#date_action_filter').val();
                    var hostel_id = $('#hostel_id_filter').val();
                    var room_id = $('#room_id_filter').val();
                    $.ajax({
                        url: '{{ url('admin/money/stat') }}',
                        dataType: 'json',
                        data: {
                            date_action: date_action,
                            hostel_id: hostel_id,
                            room_id: room_id
                        },
                        success: function (response) {
                            $('#amount').html(response.data.amount);
                            $('#pay').html(response.data.pay);
                            $('#remain').html(response.data.remain);
                        }
                    });
                    table.draw();
                } else {
                    swal('Thông báo', response.message, 'warning');
                }
            }
        });
    });

    $(document).on('click', '#save-fee-month', function (e) {
        e.preventDefault();

        var data = $('#form-fee').serialize();
        $.ajax({
            url: '{{ url('admin/money/calculate') }}',
            data: data,
            type: 'post',
            dataType: 'json',
            success: function (response) {
                if (response.status == 1) {
                    $('#calculate').modal('hide');
                    swal('Thành công', '', 'success');

                    var date_action = $('#date_action_filter').val();
                    var hostel_id = $('#hostel_id_filter').val();
                    var room_id = $('#room_id_filter').val();
                    $.ajax({
                        url: '{{ url('admin/money/stat') }}',
                        dataType: 'json',
                        data: {
                            date_action: date_action,
                            hostel_id: hostel_id,
                            room_id: room_id
                        },
                        success: function (response) {
                            $('#amount').html(response.data.amount);
                            $('#pay').html(response.data.pay);
                            $('#remain').html(response.data.remain);
                        }
                    });
                    table.draw();
                } else {
                    swal('Thông báo', response.message, 'warning');
                }
            }
        });
    });

    $(document).on('change', '#hostel_id', function () {

        var hostel_id = $(this).val();

        $.ajax({

            url: '{{ url('admin/hostel/get-rooms-by-hostel') }}',
            type: 'get',
            data: {
                hostel_id: hostel_id,
            },
            success: function (response) {
                $('#room_id').html(response.html).select2();
            }

        });

    });

    $(document).on('change', '#hostel_id_2', function () {

        var hostel_id = $(this).val();

        $.ajax({

            url: '{{ url('admin/hostel/get-rooms-by-hostel') }}',
            type: 'get',
            data: {
                hostel_id: hostel_id,
            },
            success: function (response) {
                $('#room_id_2').html(response.html).select2();
            }

        });

    });

    $(document).on('change', '#hostel_id_filter', function () {

        var hostel_id = $(this).val();

        $.ajax({

            url: '{{ url('admin/hostel/get-rooms-by-hostel') }}',
            type: 'get',
            data: {
                hostel_id: hostel_id,
            },
            success: function (response) {
                $('#room_id_filter').html(response.html).select2();
            }

        });

    });

    $('#btn-save').click(function () {
        var data = $('#form-collect-spend').serialize();

        $.ajax({
            url: '{!! url('admin/money/create') !!}',
            data: data,
            type: 'post',
            dataType: 'json',
            success: function (response) {
                if (response.status == 1) {
                    swal('Thành công', '', 'success');
                } else {
                    swal('Thông báo', response.message, 'warning');
                }
            }
        });

    });

    $('.datepicker').datepicker({
        format: 'mm/yyyy',
        language: 'vi',
        autoclose: true,
        viewMode: "months",
        minViewMode: "months"

    });

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

    function getPostByAttr() {
        var date_action = $('#date_action_filter').val();
        var hostel_id = $('#hostel_id_filter').val();
        var room_id = $('#room_id_filter').val();
        $.ajax({
            url: '{{ url('admin/money/stat') }}',
            dataType: 'json',
            data: {
                date_action: date_action,
                hostel_id: hostel_id,
                room_id: room_id
            },
            success: function (response) {
                $('#amount').html(response.data.amount);
                $('#pay').html(response.data.pay);
                $('#remain').html(response.data.remain);
            }
        });

        table = $('#orders-table').DataTable({
            "bDestroy": true,
            processing: true,
            searching: true,
            "aaSorting": [],
            serverSide: true,
            ajax: {
                url: '{!! url('admin/money/money-change.data') !!}',
                data: {
                    date_action: date_action,
                    hostel_id: hostel_id,
                    room_id: room_id
                },
            },
            columns: [

                {data: 'hostel', name: 'hostel'},
                {data: 'room', name: 'room'},
                {data: 'amount', name: 'amount'},
                {data: 'pay', name: 'pay'},
                {data: 'remain', name: 'remain'},
                {data: 'action', name: 'action'},
            ],
        });
    }

    $(function () {

        $.ajax({
            url: '{{ url('admin/money/stat') }}',
            dataType: 'json',
            success: function (response) {
                $('#amount').html(response.data.amount);
                $('#pay').html(response.data.pay);
                $('#remain').html(response.data.remain);
            }
        });

        table = $('#orders-table').DataTable({
            "bDestroy": true,
            processing: true,
            searching: true,
            "aaSorting": [],
            serverSide: true,
            ajax: {
                url: '{!! url('admin/money/money-change.data') !!}',
            },
            columns: [

                {data: 'hostel', name: 'hostel'},
                {data: 'room', name: 'room'},
                {data: 'amount', name: 'amount'},
                {data: 'pay', name: 'pay'},
                {data: 'remain', name: 'remain'},
                {data: 'action', name: 'action'},
            ],
        });
    });


</script>
@endpush