@extends('layouts/pos_layout')
@section('title', '| ' . $data['pageTitle'])
@section('content')
    <style>
        .page-item.active .page-link {
            background-color: lightgrey !important;
            border: 1px solid black;
        }

        .page-link {
            color: black !important;
        }
    </style>
    <div class="row page-wrap">
        <div class="col-md-12">
            <div class="" style="">
                <div class=" ">
                    <div class="panel panel-default" style="background-color:#708090;">
                        <div class="panel-heading" style="padding-bottom:0px">
                            <button id="printIcon" class="btn btn-info pull-right print-icon" target="_blank" style="">
                                <i class="fa fa-print fa-lg" aria-hidden="true"> Print</i>
                            </button>

                            <div class="panel-title">
                                <h2>{!! $data['pageTitle'] !!}</h2>
                            </div>

                        </div>

                        <div class="panel-body panelBodyView">
                            @php
                                $searchElements = [['element' => 'branchId'], ['element' => 'dateRange']];
                            @endphp

                            @include('partials.searchPanel.main', ['searchElements' => $searchElements])

                            <div id="printDiv">
                                <div class="row"
                                    style="padding-bottom: 10px; text-align: center; vertical-align: middle; color: black; font-weight: bold; ">
                                    {{-- div for Company --}}
                                    <span style="font-size:14px;">{{ $company->name }}</span><br />
                                    <span style="font-size:11px;">{{ $company->address }}</span><br />
                                    <span style="text-decoration: underline;  font-size:14px;">Collection Report With
                                        Profit</span></br>
                                </div>
                                <div class="" style="float:right">Printed Date: {{ date('d-m-Y') }}</div>
                                <table class="table table-striped table-bordered table-condensed first-col-dark"
                                    id="datatable" style="width:100%">
                                    <thead>
                                        <tr>
                                            <th width="5%" class="text-center sorting_1 text-nowrap">SL#</th>
                                            <th width="10" class="text-center sorting_1 text-nowrap">Collection Date
                                            </th>
                                            <th width="10" class="text-center text-nowrap">Customer Name</th>
                                            <th width="10" class="text-center text-nowrap">Bill No.</th>
                                            <th width="10" class="text-center text-nowrap">Installments</th>
                                            <th width="10" class="text-center text-nowrap">Collection Amount (With PF.)
                                            </th>
                                            <th width="10" class="text-center text-nowrap">Processing Fee</th>
                                            @if ($company->othersFeeApplicable == 'Yes')
                                                <th width="10" class="text-center text-nowrap">Others Fee</th>
                                            @endif
                                            <th width="10" class="text-center text-nowrap">Net Collection Amount</th>
                                            <th width="10" class="text-center text-nowrap">Collection Amount (Pr.)</th>
                                            <th width="10" class="text-center text-nowrap">Profit</th>
                                        </tr>
                                    </thead>
                                    <tbody id="tableBodySection">

                                    </tbody>

                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            $('form').submit(function(event) {
                event.preventDefault();
                $('#loadingModal').show();
                var othersFeeApplicable = "{{ $company->othersFeeApplicable }}";
                $.ajax({
                    type: 'post',
                    url: '{{ route('collection_report_with_profit_show') }}',
                    data: $('form').serialize(),
                    dataType: 'json',
                    success: function(_response) {
                        var html = '';
                        var htmlT = '';
                        if (typeof _response[0] == 'undefined') {
                            $("#tableBodySection").append(
                                "<tr>" +
                                "<td colspan='11'>No data found</td>" +
                                "</tr>"
                            );
                        }

                        $('#loadingModal').hide();

                        var sl = 0;
                        var totalCollectionWIthProfit = 0;
                        var totalProcessingFee = 0;
                        var totalOthersFee = 0;
                        var totalNetCollectionAmount = 0;
                        var totalprincipalAmount = 0;
                        var totalProfit = 0;
                        var others_fee_amount = 0;
                        var net_collection_amount = 0;

                        $.each(_response, function(index, item) {
                            var collection_amount_with_pf = 0;
                            var net_collection_amount = 0;
                            var profit = 0;

                            function pad2(n) {
                                return (n < 10 ? '0' : '') + n;
                            }

                            if (item.others_fee_amount != null && item.is_deleted ==
                                null && othersFeeApplicable == 'Yes') {
                                others_fee_amount = item.others_fee_amount;
                            } else {
                                others_fee_amount = 0;
                            }

                            net_collection_amount = parseFloat(item.collection_amount -
                                (parseFloat(item
                                    .service_charge_amount) + parseFloat(
                                    others_fee_amount)));

                            var date = new Date(item.collection_date);
                            var month = pad2(date.getMonth() + 1);
                            var day = pad2(date.getDate());
                            var year = date.getFullYear();

                            var formattedDate = day + "-" + month + "-" + year;


                            html = '<tr>';
                            html += '<td style="text-align:center">' + ++sl +
                                ' </td>';
                            html += '<td style="text-align:left"> ' + formattedDate +
                                ' </td>';
                            html += '<td style="text-align:left"> ' + item
                                .customer_name + '  </td>';
                            html += '<td style="text-align:center"> ' + item
                                .sales_bill_no + ' </td>';
                            html += '<td style="text-align:center"> ' + item
                                .installment_package + ' </td>';
                            html += '<td style="text-align:right"> ' + zerocheck(
                                item.collection_amount) + ' </td>';
                            html += '<td style="text-align:right"> ' + zerocheck(
                                item.service_charge_amount) + ' </td>';
                            if (othersFeeApplicable == 'Yes') {
                                html += '<td style="text-align:right"> ' + zerocheck(
                                    others_fee_amount) + ' </td>';
                            }
                            html += '<td style="text-align:right"> ' + zerocheck(
                                net_collection_amount) + ' </td>';
                            html += '<td style="text-align:right"> ' + zerocheck(
                                item.principal_amount) + ' </td>';
                            html += '<td style="text-align:right"> ' + zerocheck(
                                item.profit_amount) + ' </td>';
                            html +=
                                '</tr> ';
                            $("#tableBodySection").append(html);

                            totalCollectionWIthProfit = parseFloat(
                                totalCollectionWIthProfit) + parseFloat(item
                                .collection_amount);
                            totalProcessingFee = parseFloat(totalProcessingFee) +
                                parseFloat(item.service_charge_amount);
                            totalOthersFee = parseFloat(totalOthersFee) + parseFloat(
                                others_fee_amount);
                            totalNetCollectionAmount = parseFloat(
                                totalNetCollectionAmount) + parseFloat(
                                net_collection_amount);
                            totalprincipalAmount =
                                parseFloat(totalprincipalAmount) +
                                parseFloat(item.principal_amount);
                            totalProfit = parseFloat(
                                totalProfit) + parseFloat(item
                                .profit_amount);
                        });

                        if (typeof _response[0] !== 'undefined') {

                            htmlT += '<tr class="grandtotal">';
                            htmlT +=
                                '<td colspan="5" style="background-color: #819BC4 !important;color: #000 !important;">Grand Total</td>';
                            htmlT +=
                                '<td style="text-align:right" class="text-nowrap"> ' +
                                zerocheck(totalCollectionWIthProfit) + '</td>';
                            htmlT +=
                                '<td style="text-align:right" class="text-nowrap"> ' +
                                zerocheck(totalProcessingFee) + '</td>';
                            if (othersFeeApplicable == 'Yes') {
                                htmlT +=
                                    '<td style="text-align:right" class="text-nowrap"> ' +
                                    zerocheck(totalOthersFee) + '</td>';
                            }
                            htmlT +=
                                '<td style="text-align:right" class="text-nowrap"> ' +
                                zerocheck(totalNetCollectionAmount) + '</td>';
                            htmlT +=
                                '<td style="text-align:right" class="text-nowrap"> ' +
                                zerocheck(totalprincipalAmount) + '</td>';
                            htmlT +=
                                '<td style="text-align:right" class="text-nowrap"> ' +
                                zerocheck(totalProfit) + '</td>';
                            htmlT += '</tr>';
                            $("#tableBodySection").append(htmlT);
                        }

                        $('#loadingModal').hide();
                    },
                });
                $("#tableBodySection").empty();
            });
        });

        $("#printIcon").click(function(event) {
            var printStyle =
                '<style>#reportingTable{float:left;height:auto;padding:0px;width:100%;font-size:11px;border:1pt solid ash;page-break-inside:auto;font-family: arial!important;} tr:last-child { font-weight: bold;} thead tr th{ text-align:center;vertical-align: middle;padding:3px;font-size:11px;} tbody tr td { text-align:center;vertical-align: middle;padding:3px ;font-size:10px;} tr{ page-break-inside:avoid; page-break-after:auto } </style><style media="print">@page{size:portrait;margin:10mm 10mm;}</style><style>@media print {.element-that-contains-table { overflow: visible !important; }}</style><style>@page:first{tr:nth-of-type(4n){page-break-after: always;}}</style>';
            var mainContents = document.getElementById("printDiv").innerHTML;
            var headerContents = '';
            var footerContents =
                "<div class='row' style='font-size:12px; padding-left:5px; padding-top:20px;'>Prepared By <span style='display:inline-block; width: 35%; padding-top:40px;'></span> Checked By <span style='display:inline-block; width: 34%; padding-right:15px; padding-top:40px;'></span>Approved By</div>";
            var printContents = '<div id="order-details-wrapper" style="padding: 10px;">' + headerContents +
                printStyle + mainContents /*+ paddingDiv*/ + footerContents + '</div>';
            var win = window.open('', 'printwindow');
            win.document.write(printContents);
            win.print();
            win.close();
        });

        function zerocheck(value) {

            if (value == 0) {
                return "-";
            } else {
                return value.toLocaleString("en-IN", {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                });
                //return value;
            }

        }
    </script>
@endsection