@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/bootstrap-lightbox/lightbox.css" rel="stylesheet" type="text/css"/>

    <style>

        .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">
        Cài đặt loại phiếu thu
    </h1>

    <div class="row">
        <div class="col-md-12" style="margin-bottom: 12px; ">
        <a href="#add-setting-collect" data-toggle="modal" class="btn btn-success" id="btn-add-setting-collect" style="float: right">Thêm loại phiếu thu</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>Tên</th>
                    <th>Thao tác</th>
                </tr>
                </thead>
                <tfoot>
                <tr>

                    <th><input type="text" class="form-control"></th>
                    <th></th>
                </tr>
                </tfoot>
            </table>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12" id="detail">
        </div>
    </div>


    <div class="modal fade bs-modal-lg" id="add-setting-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">Thêm loại phiếu thu</h4>
                </div>
                <div class="modal-body" id="add-setting-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-setting-collect">Lưu</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

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

@endsection

@push('scripts')
    <script src="/assets/global/plugins/dropzone/dropzone.min.js" type="text/javascript"></script>
    <script src="/assets/pages/scripts/form-dropzone.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 type="text/javascript"
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCydLs7dhJPuozABFQjJO-uk1PITW18oo8&libraries=places&region=vi&language=vi&sensor=false"></script>
    <script type="text/javascript" src="/js/gmap.js"></script>
    <script src="/assets/global/plugins/bootstrap-lightbox/lightbox.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>

        var table;

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

        $(document).on('click', '#btn-add-setting-collect', function (e) {

            e.preventDefault();


            $.ajax({
                url: '{{ url('admin2/money/add-setting-collect') }}',
                type: 'get',
                dataType: 'json',
                beforeSend: function () {
                    $('#add-setting-collect-content').addClass('ht-on-loading');
                },
                success: function (response) {
                    $('#add-setting-collect-content').removeClass('ht-on-loading').html(response.data);
                }
            });

        });

        $(document).on('click', '.btn-edit', function (e) {

            e.preventDefault();

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

            $.ajax({
                url: '{{ url('admin2/money/edit-setting-collect') }}',
                type: 'get',
                data: {
                    id: id
                },
                dataType: 'json',
                beforeSend: function () {
                    $('#edit-setting-collect-content').addClass('ht-on-loading');
                },
                success: function (response) {
                    $('#edit-setting-collect-content').removeClass('ht-on-loading').html(response.data);
                }
            });

        });




        $(document).off('click', '.btn-edit-renter').on('click', '.btn-edit-renter', function (e) {

            e.preventDefault();

            var renter_id = $(this).attr('data-renter');


            $.ajax({
                url: '{{ url('admin2/renter/edit') }}' + '/' + renter_id,
                type: 'get',
                dataType: 'json',
                beforeSend: function () {
                    $('#edit-renter-content').addClass('ht-on-loading');
                },
                success: function (response) {
                    $('#edit-renter-content').removeClass('ht-on-loading').html(response.data);
                    $('.select2').select2();
                    $('.datepicker').datepicker({
                        format: 'dd/mm/yyyy',
                        autoclose: true
                    });
                }
            });

        });


        $(function () {

//        $('#orders-table tfoot th').each( function (index) {
//            if(index != 0 && index != 9) {
//                $(this).html('<input type="text" class="form-control" />');
//            }
//        } );
            table = $('#orders-table').DataTable({
                "bDestroy": true,
                processing: true,
                searching: true,
                "aaSorting": [[0, 'desc']],
                serverSide: true,
                ajax: {
                    url: '{!! url('admin2/money/setting-collect.data') !!}',
                    data: function (d) {
                        d.hostel_id = $('#hostels').val()
                    }
                },
                columns: [
                    {data: 'name', name: 'name'},
                    {data: 'action', name: 'action', 'orderable': false, searchable: false},
                ],
            });


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

        });


        $(document).on('click', '#btn-save-setting-collect', function (e) {
            e.preventDefault();

            var form = $('#form-add-setting-collect');
            var data = form.serialize();

            var formStatus = form.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: {
                    'name': "required",
                },
                messages: {
                    'name': "Không được bỏ trống tên",
                }
            }).form();

            if (formStatus) {
                $.ajax({
                    url: '{{ url('admin2/money/store-setting-collect') }}',
                    type: 'post',
                    data: data,

                    dataType:'json',
                    beforeSend: function () {
                        $('#add-setting-collect-content').addClass('ht-on-loading');
                    },
                    success: function (response) {
                        $('#add-setting-collect-content').removeClass('ht-on-loading');
                        if (response.status == 1) {
                            swal('Thành công', 'Dữ liệu đã được cập nhật', 'success');
                            table.ajax.reload();
                            $('#add-setting-collect').modal('hide');
                        }

                        if (response.status == 0) {
                            swal('Thông báo', response.message, 'info');
                            $('#add-setting-collect').modal('hide');
                        }

                    }
                });
            }
        });

        $(document).on('click', '#btn-save-edit-setting-collect', function (e) {
            e.preventDefault();

            var form = $('#form-edit-setting-collect');
            var data = form.serialize();

            var formStatus = $('#form-edit-setting-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: {
                    'name': "required",
                    //  'amenities[]': "required",
                },
                messages: {
                    'name': "Không được bỏ trống tên",
                }
            }).form();

            if (formStatus) {
                $.ajax({
                    url: '{{ url('admin2/money/edit-setting-collect') }}',
                    type: 'post',
                    data: data,
                    dataType: 'json',

                    beforeSend: function () {
                        $('#edit-setting-collect-content').addClass('ht-on-loading');
                    },
                    success: function (response) {
                        $('#edit-setting-collect-content').removeClass('ht-on-loading');
                        if (response.status == 1) {
                            swal('Thành công', 'Dữ liệu đã được cập nhật', 'success');
                            table.ajax.reload();
                            $('#edit-setting-collect').modal('hide');
                        }

                        if (response.status == 0) {
                            swal('Thông báo', response.message, 'info');
                            $('#edit-setting-collect').modal('hide');
                        }

                    }
                });
            }
        });


    </script>
@endpush