@extends('app')

@section('content')
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            Ledger
            <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">Ledger</li>
        </ol>
    </section>

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

                        <div class="form-group col-md-12" style="margin-top: 10px; margin-bottom: 5px;">
                            <div class="col-md-12">
                                <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" value="{{$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"
                                           value="{{$to}}"
                                           id="to">
                                </div>
                                <div class="col-md-2">
                                    <button class="btn btn-sm btn-primary search-submit" type="submit"> Submit</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
                @can('income-view')
                    <div class="table-responsive">
                        <table id="ledgerDatatable" class="table table-bordered table-striped">
                            <thead>
                            <tr>
                                <th>Invoice ID</th>
                                <th>Date</th>
                                <th>Type</th>
                                <th>Income</th>
                                <th>Expense</th>
                                <th>Refund</th>
                                <th>Opening Balance</th>
                                <th>Comment</th>
                                <th>Closing Balance</th>
                            </tr>
                            </thead>

                            <tfoot>
                            <tr>
                                <th colspan="3">Total</th>
                                <th>Income</th>
                                <th>Expense</th>
                                <th>Refund</th>
                                <th>Opening Balance</th>
                                <th>Current Balance</th>
                                <th>Closing Balance</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: "yyyy-mm-dd"
            });

            $('.searchForm').on('submit', function (e) {
                e.preventDefault();
                var start = $('input[name=from]').val();
                var to = $('input[name=to]').val();
                var html = `<table class="table table-bordered table-filter-items" width="50%">
                          <tr>
                              <td class="text-left" width="50%">From: ${start && to ? start : ''}</td>
                              <td class="text-left">To: ${start && to ? to : ''}</td>
                          </tr>
                     </table>`

                $('#ledgerDatatable').closest('.table-responsive').removeClass('hide')

                if ($.fn.DataTable.isDataTable('#ledgerDatatable') == true) {
                    $('#ledgerDatatable').DataTable().clear().destroy();
                    $('#ledgerDatatable').find('tbody').remove()
                }

                var ledgerDatatable = $('#ledgerDatatable').DataTable({
                    processing: true,
                    serverSide: true,
                    paging: false,
                    dom: 'Bfrtip',
                    order: [[1, "asc"]],
                    lengthMenu: [
                        [10, 25, 50, 100],
                        ['10 rows', '25 rows', '50 rows', '100 rows']
                    ],
                    buttons: [
                        {
                            extend: 'print',
                            charset: 'utf-8',
                            exportOptions: {
                                columns: [0, 1, 2, 3, 4, 5, 6, 7, 8]
                            },
                            footer: true,
                            // messageTop: function () {
                            //     return 'You have printed this document times';
                            // },
                            // messageBottom: null,
                            text: 'Print',
                            messageTop: function () {
                                return 'Accounts Ledger';
                            },
                            customize: function (win) {
                                $(win.document.head).append(`
                                  <style>
                                    .text-left{text-align: left !important;}
                                    .table{
                                        border-collapse: separate !important;
                                    }
                                    .table-bordered>tbody>tr>td,
                                    .table-bordered>tbody>tr>th,
                                    .table-bordered>tfoot>tr>td,
                                    .table-bordered>tfoot>tr>th,
                                    .table-bordered>thead>tr>td,
                                    .table-bordered>thead>tr>th {
                                        padding: 4px !important;
                                    }
                                    table, td, th {
                                        text-align: center;
                                    }
                                   </style>
                                `)
                                $(win.document.body).find('table')
                                    .before(html);
                                {{--$(win.document.body)--}}
                                {{--    .prepend(--}}
                                {{--        '<img src="{{asset('').'/'.$hospital->logo}}" style="position:absolute; top:0; left:0;" />'--}}
                                {{--    );--}}
                            },
                        },
                        'pageLength'
                    ],
                    ajax: {
                        url: '{{ route("get.accounts.ledger") }}',
                        data: function (d) {
                            d.from = $('input[name=from]').val();
                            d.to = $('input[name=to]').val();
                        }
                    },
                    columns: [
                        {data: 'invoice_id', name: 'invoice_id', orderable: true, searchable: true},
                        {data: 'date', name: 'date', orderable: true, searchable: true},
                        {data: 'type', name: 'type', orderable: true, searchable: false},
                        {data: 'income', name: 'income', orderable: true, searchable: false},
                        {data: 'expense', name: 'expense', orderable: true, searchable: false},
                        {data: 'refund', name: 'refund', orderable: true, searchable: false},
                        {data: 'opening_balance', name: 'opening_balance', orderable: true, searchable: false},
                        {data: 'comment', name: 'comment', orderable: true, searchable: false},
                        {data: 'closing_balance', name: 'closing_balance', orderable: true, searchable: false},
                    ],
                    footerCallback: function (row, data, start, end, display) {

                        var api = this.api(), data;

                        // Remove the formatting to get integer data for summation
                        var intVal = function (i) {
                            return typeof i === 'string' ?
                                i.replace(/[\$,]/g, '') * 1 :
                                typeof i === 'number' ?
                                    i : 0;
                        };

                        var formatter = new Intl.NumberFormat();

                        var totalOpeningBalance = api
                            .column(6, {page: 'current'})
                            .data()
                            .reduce(function (a, b) {
                                return intVal(a) + intVal(b);
                            }, 0);

                        var totalIncome = api
                            .column(3, {page: 'current'})
                            .data()
                            .reduce(function (a, b) {
                                return intVal(a) + intVal(b);
                            }, 0);

                        var totalExpense = api
                            .column(4, {page: 'current'})
                            .data()
                            .reduce(function (a, b) {
                                return intVal(a) + intVal(b);
                            }, 0);

                        var totalRefund = api
                            .column(5, {page: 'current'})
                            .data()
                            .reduce(function (a, b) {
                                return intVal(a) + intVal(b);
                            }, 0);

                        $(api.column(3).footer()).html(formatter.format(totalIncome).replace('$', ''));
                        $(api.column(4).footer()).html(formatter.format(totalExpense).replace('$', ''));
                        $(api.column(5).footer()).html(formatter.format(totalRefund).replace('$', ''));
                        $(api.column(6).footer()).html(formatter.format(totalOpeningBalance).replace('$', ''));
                        $(api.column(8).footer()).html(formatter.format(totalOpeningBalance + totalIncome - totalExpense - totalRefund).replace('$', ''));

                    }
                });
            });

        });

        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