@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 thanh toán</h3>


    <div class="modal fade in" role="dialog" id="add-payment">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content modal-content--sign-up">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">×</span>
                    </button>
                    <h4 class="modal-title">Thêm thanh toán</h4>
                </div>
                <div class="modal-body" id="add-payment-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-payment">Lưu</button>

                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>



    <div class="row" style="margin-top: 15px">
        <div class="col-md-12" style="margin-bottom: 12px">
            <a href="#add-payment" data-toggle="modal" class="btn btn-success" id="btn-add-payment">Thêm</a>
            <a style="margin-left: 10px" class="btn green-meadow pull-right btn-export-excel" data-type="outcome"
               href="#export-excel" data-toggle="modal">
                <i class="fa fa-file-excel"></i> Xuất Excel</a>
        </div>
        <div class="col-md-12">
            <table class="table table-striped table-bordered table-hover" id="orders-table">
                <thead>
                <tr style="background-color: #5376B9; color: white">
                    <th>STT</th>
                    <th>Tên chủ trọ</th>
                    <th>SĐT</th>
                    <th>Số tiền</th>
                    <th>Ghi chú</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></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>

    $(document).on('click', '#btn-add-payment', function () {

        $.ajax({
            url: '{{ url('admin/owner-payment/create') }}',
            type: 'get',
            dataType: 'json',
            beforeSend: function () {
                $('#add-payment-content').addClass('ht-on-loading');
            },
            success: function (response) {
                $('#add-payment-content').removeClass('ht-on-loading').html(response.data);
                $('.select2').select2();
            }
        });
    });


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

        bootbox.confirm({
            message: "Bạn có chắc chắn muốn xóa",
            buttons: {
                confirm: {
                    label: 'Có',
                    className: 'btn-success'
                },
                cancel: {
                    label: 'Không',
                    className: 'btn-danger'
                }
            },


            callback: function (result) {
                if (result == true) {

                    $.ajax({
                        url: '{{ url('admin/partner/delete') }}',
                        type: 'post',
                        data: {
                            id: id,
                        },
                        dataType: 'json',
                        success: function (response) {
                            if (response.status == 1) {
                                swal('Thành công', '', 'success');
                            } else if (response.status == 2) {
                                swal('Thông báo', response.message, 'info');
                            } else {
                                swal('Thông báo', response.message, 'warning');
                            }
                            table.ajax.reload();
                        }
                    });

                }
            }
        });
    });

    $(document).on('click', '#btn-save-payment', function (e) {
        e.preventDefault();
        var formStatus = $("#form-add-payment").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: {
                    amount: "required",
                },
//                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: {
                    amount: "Vui lòng không bỏ trống số tiền",
                    // image: 'Vui lòng không bỏ trống hình ảnh'
                }
            }
        ).form();

        if (formStatus) {

            var data = $('#form-add-payment').serialize();
            $.ajax({
                url: '{{ url('/admin/owner-payment/create') }}',
                type: 'post',
                data: data,
                dataType: 'json',
                beforeSend: function () {
                    $('#add-payment-content').addClass('ht-on-loading');
                },
                success: function (response) {
                    $('#add-payment-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-payment').modal('hide');
                    } else {
                        swal('Thông báo', response.message, 'warning');
                    }
                    table.ajax.reload();
                }
            });
        }
    });


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

    var table = '';


    $(function () {
        table = $('#orders-table').DataTable({
            "bDestroy": true,
            processing: true,
            searching: true,
            "aaSorting": [[4, 'desc']],
            serverSide: true,
            ajax: {
                url: '{!! url('admin/owner-payment/payment.data') !!}',
            },
            columns: [
                {data: 'DT_Row_Index', name: 'DT_Row_Index', orderable: false, searchable: false},
                {data: 'owner_name', name: 'owner_name'},
                {data: 'owner_phone', name: 'owner_phone'},
                {data: 'amount', name: 'amount'},
                {data: 'note', name: 'note'},
                {data: 'action', name: 'action', searchable: false, orderable: false},
            ],
        });

        table.columns().every(function (index) {
            if (index !== 0 && index !== 7) {
                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