@extends('app')

@section('content')
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            Expenses
            <small>Preview</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
            <li><a href="#">Accounts</a></li>
            <li class="active">Expense</li>
        </ol>
    </section>

    <!-- Main content -->
    <section class="content">
        <!-- Custom Tabs -->
        <div class="box box-info">
            <!-- /.box-header -->
            <div class="box-body">
                <form name="searchForm" class="searchForm form-horizontal" method="post"
                      action="{{route('accounts.get-expense-report')}}">
                    <div class="row">

                        <div class="form-group col-md-12" style="margin-top: 10px; margin-bottom: 5px;">
                            <div class="col-md-2">
                                @can('expense-create')
                                    <a class="btn btn-success" data-toggle="modal" href="#modal"
                                       onclick="loadModal('accounts/add-expense')"> Add Expense</a>
                                @endcan
                            </div>
                            <div class="col-md-10">
                                <label class="col-md-1">
                                    <i class="fa fa-calendar"></i>
                                    From:
                                </label>
                                <div class="col-md-3">
                                    {{csrf_field()}}
                                    <input class="form-control datepicker" autocomplete="off" type="text"
                                           name="from" id="from">

                                </div>
                                <label class="col-md-1">
                                    <i class="fa fa-calendar"></i>
                                    To:
                                </label>
                                <div class="col-md-3">
                                    <input class="form-control datepicker" autocomplete="off" type="text" name="to"
                                           id="to">
                                </div>
                                <div class="col-md-2">
                                    <button class="btn btn-sm btn-primary" type="submit"> Submit</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
                @can('expense-view')
                    <table id="expenseDatatable" class="table table-bordered table-striped">
                        <thead>
                        <tr>
                            <th>Invoice ID</th>
                            <th> Amount</th>
                            <th>Comment</th>
                            <th>Date</th>
                            {{--								            <th>Action</th>--}}
                        </tr>
                        </thead>

                        <tfoot>
                        <tr>
                            <th>Total Amount</th>
                            <th> </th>
                            <th></th>
                            <th></th>
                            {{--								            <th>Action</th>--}}
                        </tr>

                        </tfoot>
                    </table>
                @endcan
            </div>
        </div>
    </section>
    <!-- Normal Modal -->
    <div id="saleReportModal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content" style="width: 800px;">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title">Diagnostic Test Sale Report</h4>
                </div>
                <!-- //Message from Ajax request// -->
                <div class="modal-body" id="saleDetailsBody">
                    Loading <img src="{{url('icons/loader.gif')}}" title="loading">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div> <!-- /.modal -->

@endsection

@section('extra-css')
    {{Html::style('assets/bower_components/datatables.net/buttons/css/buttons.dataTables.min.css')}}
@stop

@section('extra-js')
    <script src="{{ asset('assets/bower_components/datatables.net/buttons/js/dataTables.buttons.min.js') }}"></script>
    <script src="{{asset('assets/bower_components/datatables.net/buttons/js/buttons.html5.min.js')}}"></script>
    <script src="{{asset('assets/bower_components/datatables.net/buttons/js/buttons.print.min.js')}}"></script>
    <script type="text/javascript">
        $(document).ready(function () {

                $('.datepicker').datepicker({
                    todayHighlight: true,
                    autoclose: true,
                    format: "dd-mm-yyyy"
                });

            var expenseDatatable = $('#expenseDatatable').DataTable({
                processing: true,
                serverSide: true,
                bFilter: true,
                lengthMenu: [
                    [10, 25, 50, 100],
                    ['10 rows', '25 rows', '50 rows', '100 rows']
                ],
                ajax: {
                    url: '{{ route("accounts.get-expense-report") }}',
                    data: function (d) {
                        d.from = $('input[name=from]').val();
                        d.to = $('input[name=to]').val();
                    }
                },
                columns: [
                    {data: 'expense_invoice_id', name: 'expense_invoice_id', orderable: true, searchable: true},
                    {data: 'total_amount', name: 'total_amount', orderable: true, searchable: true},
                    {data: 'comment', name: 'comment', orderable: true, searchable: false},
                    {data: 'date', name: 'date', orderable: true, searchable: false},
                ],
                footerCallback: function (row, data, start, end, display) {
                    var api = this.api();
                    var total = api.column(1).data().reduce(function(a,b){
                        return parseFloat(a) + parseFloat(b);
                    },0);
                    $(api.column(1).footer()).html(total.toFixed(2));
                },
                dom: 'Bfrtip',
                buttons: [
                    {
                        extend: 'print',
                        text: 'Print',
                        title: '',
                        messageTop: function() {
                            var period = 'Period: ' + ($('#from').val() || 'All') + ' to ' + ($('#to').val() || 'All');
                            var generated = 'Generated: ' + new Date().toLocaleString();
                            return '<div style="text-align:center;">' +
                                    '<h2>Expense Report</h2>' +
                                    '<p>' + period + '</p>' +
                                    '<p>' + generated + '</p>' +
                                '</div>';
                        },
                        customize: function (win) {
                            var api = expenseDatatable; // reference to DataTable instance

                            // Wait for data to be fully loaded
                            setTimeout(function() {
                                // Calculate total from visible rows
                                var total = 0;
                                api.rows({search:'applied'}).data().each(function(d){
                                    total += parseFloat(d.total_amount) || 0;
                                });

                                // Append total row
                                $(win.document.body).find('table').append(
                                    '<tr style="font-weight:bold;">' +
                                    '<td style="border:none;">Total Amount</td>' +
                                    '<td>' + total.toFixed(2) + '</td>' +
                                    '<td></td><td></td>' +
                                    '</tr>'
                                );

                                // Remove borders for Invoice ID column
                                $(win.document.body).find('table td:first-child, table th:first-child').css('border','none');
                                $(win.document.body).find('table').find('th:nth-child(4), td:nth-child(4)').css('width', '150px');

                                // Center header
                                $(win.document.body).find('h2, p').css('text-align','center');

                            }, 10);
                        },
                        exportOptions: {
                            columns: ':visible'
                        }
                    }
                ]
              });

                $('.searchForm').on('submit', function (e) {
                    expenseDatatable.draw();
                    e.preventDefault();
                });

           }); 


        function loadingImg() {
            $('#loading').ajaxStart(function () {
                $(this).show();
            }).ajaxComplete(function () {
                $(this).hide();
            });
        }

        function saleDetails(saleInvoiceId) {
            $(function () {
                loadingImg();
                $("#saleDetailsBody").load("{{url('reports/category-wise-sale-report')}}" + "/" + saleInvoiceId);
            });
        }

        function updateStatus(action, url, id) {
            var reference = $("#reference_" + id);

            if (action == 'delete') {
                if (!confirm('Do you want to Delete ?')) {
                    return false;
                }
            }

            $.ajax({
                url: "update-" + url + '-status/' + action + '/' + id,
                method: "GET",
                dataType: 'json',
                success: function (data) {
                    if (data.success == true) {
                        if (action == 'active') {
                            // reference.
                            reference.prev().show().prev().hide();
                            reference.parent().prev().children().next().show().prev().hide();
                        } else if (action == 'inactive') {
                            reference.prev().hide().prev().show();
                            reference.parent().prev().children().next().hide().prev().show();
                        } else if (action == 'delete') {
                            reference.parent().parent().hide(1000).remove();
                        }

                        $('.box-body-second').show();
                        $('.messageBodySuccess').slideDown(1000).delay(3000).slideUp(1000).children().next().html(data.message);
                    } else {
                        $('.box-body-second').show();
                        $('.messageBodyError').slideDown(1000).delay(3000).slideUp(1000).children().next().html(data.message);
                    }
                },
                error: function (data) {
                    $('.box-body-second').show();
                    $('.messageBodyError').slideDown(1000).delay(3000).slideUp(1000).children().next().html(data.message);
                }
            });
        }

    </script>
@endsection