@extends('app')

@section('content')
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            Income
            <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">Income</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-income-report')}}">
                    <div class="row">

                        <div class="form-group col-md-12" style="margin-top: 10px; margin-bottom: 5px;">
                            <div class="col-md-2">
                                &nbsp;@can('income-create')
                                    <a class="btn btn-success" data-toggle="modal" href="#modal"
                                       onclick="loadModal('accounts/add-income')"> Add Income</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('income-view')
                    <div class="table-responsive">
                        <table id="incomeDatatable" class="table table-bordered table-striped">
                            <thead>
                            <tr>
                                <th>Invoice ID</th>
                                <th>Total Amount</th>
                                <th>Comment</th>
                                <th>Date</th>
                            </tr>
                            </thead>

                            <tfoot>
                            <tr>
                                <th>Total Amount</th>
                                <th></th>
                                <th></th>
                                <th></th>
                            </tr>
                            </tfoot>
                        </table>
                    </div>
                @endcan
            </div>
        </div>

    </section>
    <!-- Normal 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 incomeDatatable = $('#incomeDatatable').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-income-report") }}',
                data: function (d) {
                    d.from = $('input[name=from]').val();
                    d.to = $('input[name=to]').val();
                }
            },
            columns: [
                {data: 'income_invoice_id', name: 'income_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, width: "150px"},
            ],
            dom: 'Bfrtip', // Enable buttons
            buttons: [
                {
                    extend: 'print',
                    title: 'Income Report',
                    messageTop: function() {
                        return '<div style="text-align:center;">' +
                            'Period: ' + ($('#from').val() || 'All') + ' to ' + ($('#to').val() || 'All') + '<br>' +
                            'Generated: ' + new Date().toLocaleString() +
                            '</div>';
                    },
                    customize: function (win) {
                        // Center header
                        $(win.document.body).find('h1').css('text-align', 'center');

                        // Calculate total
                        var total = 0;
                        var dtData = $('#incomeDatatable').DataTable().rows({ page: 'current' }).data();
                        dtData.each(function (d) {
                            total += parseFloat(d.total_amount) || 0;
                        });

                        // Append total row
                        $(win.document.body).find('table').append(
                            '<tr style="font-weight:bold;color:green;">' +
                            '<td colspan="1" style="text-align:right;">Total Amount:</td>' +
                            '<td>' + total.toFixed(2) + '</td>' +
                            '<td colspan="2"></td>' +
                            '</tr>'
                        );
                       $(win.document.body).find('table').find('th:nth-child(4), td:nth-child(4)').css('width', '150px');
                    }
                }
            ],

            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);
                    }, 0);

                $(api.column(1).footer()).html(total.toFixed(2));
            }
           });
            $('.searchForm').on('submit', function (e) {
                incomeDatatable.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);
            });
        }


    </script>
@endsection