@extends("layouts.master")
@section('css')
    <link rel="stylesheet" href="{{ asset('DataTables/datatables.min.css') }}">
@endsection
@section("content")
    <div class="card">
        <div class="card-header">
            <h2>Payment Reports </h2>
        </div>

        <div class="card-body card-padding">

            <div class="row">
                <div class="col-md-4">
                    <label for="">Select Year</label>
                    <select name="year" id="year" class="form-control">
                        @foreach(range(2014,date('Y')) as $year)
                            <option value="{{$year}}">{{$year}}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-4">
                    <label for="">Select Month</label>
                    <select name="month" id="month" class="form-control">
                        <option value="1">January</option>
                        <option value="2">February</option>
                        <option value="3">March</option>
                        <option value="4">April</option>
                        <option value="5">May</option>
                        <option value="6">June</option>
                        <option value="7">July</option>
                        <option value="8">August</option>
                        <option value="9">September</option>
                        <option value="10">October</option>
                        <option value="11">November</option>
                        <option value="12">December</option>
                    </select>
                </div>

                <div class="col-md-4">
                    <p>&nbsp;</p>
                    <button class="btn btn-primary default" id="genBtn">Generate</button>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12" id="displayArea" style="min-height: 480px;">

                </div>
            </div>
        </div>
    </div>
@endsection


@section('js')
    <style>
        .dt-buttons{
            margin: 48px 16px 48px!important;
        }
        #genBtn{
            margin-top: -10px;
        }
    </style>
    <script src="{{ asset('DataTables/datatables.min.js') }}"></script>
    <script>
        function formatMoney(n, c, d, t) {
            var c = isNaN(c = Math.abs(c)) ? 2 : c,
                d = d == undefined ? "." : d,
                t = t == undefined ? "," : t,
                s = n < 0 ? "-" : "",
                i = String(parseInt(n = Math.abs(Number(n) || 0).toFixed(c))),
                j = (j = i.length) > 3 ? j % 3 : 0;
            return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
        };
        $(function () {
            $("#genBtn").on('click',function () {
                // #displayArea
                $("#displayArea").html("<h3>Loading...</h3>");
                var datum = {year:$("#year").val(),month:$("#month").val()};
                // console.log(datum);
                $.ajax({
                    url:"{{ route("payslip.admin.report.payment") }}",
                    data:datum,
                    type:'GET',
                    success:function (data) {
                        // console.log(data);
                        $("#displayArea").html(data);
                        $("#tabRec").DataTable({
                            "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
                            pageLength: 50,
                            dom: "<'row'<'col-sm-12'B>>" +
                                "<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
                                "<'row'<'col-sm-12'tr>>" +
                                "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
                            buttons: [
                                {
                                    extend: 'excelHtml5',
                                    exportOptions: {
                                        columns: ':visible'
                                    },
                                    className:'btn-primary'
                                },
                                {
                                    extend: 'pdfHtml5',
                                    orientation: 'landscape',
                                    pageSize: 'LEGAL',
                                    exportOptions: {
                                        columns: ':visible'
                                    },
                                    className:'btn-primary'
                                },
                                {
                                    extend: 'print',
                                    messageTop: 'Candidates Report',
                                    orientation: 'landscape',
                                    pageSize: 'LEGAL',
                                    className:'btn-primary'
                                },
                                {
                                    extend: 'colvis',
                                    columns: ':not(.noVis)',
                                    collectionLayout: 'fixed two-column',
                                    postfixButtons: [ {
                                        extend:'colvisGroup',
                                        text:'Show all',
                                        show:':hidden'
                                    } ],
                                    className:'btn-primary'
                                }
                            ],
                            language: {
                                buttons: {
                                    colvis: 'Show/Hide columns'
                                }
                            },
                            "footerCallback": function (row, data, start, end, display) {
                                var api = this.api();
                                var json = api.ajax.json();
                                // 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;
                                };

                                // Total over all pages

                                if (api.column(8).data().length){
                                    var total = api
                                        .column( 8 )
                                        .data()
                                        .reduce( function (a, b) {
                                            return intVal(a) + intVal(b);
                                        } ) }
                                else{ total = 0};

                                // Total over this page

                                if (api.column(8).data().length){
                                    var pageTotal = api
                                        .column( 8, { page: 'current'} )
                                        .data()
                                        .reduce( function (a, b) {
                                            return intVal(a) + intVal(b);
                                        } ) }
                                else{ pageTotal = 0};

                                // Update footer
                                $( api.column(7).footer() ).html(
                                    "Page Total: " + formatMoney(pageTotal)
                                );
                                $( api.column(8).footer() ).html(
                                    "<br> Grand Total: " + formatMoney(total)
                                );

                            }
                        });
                    }
                });
            });
        })
    </script>
@endsection