@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>ALL COLLECTION REPORT</h2>
                            </div>
                        </div>
                        <div class="panel-body panelBodyView">
                            @php
                                $searchElements = [['element' => 'report_level','showAll'=>'no'], ['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; ">
                                    <span style="color:#fff;font-size:14px;">{{ $company->name }}</span><br />
                                    <span style="color:#fff;font-size:11px;">{{ $company->address }}</span><br />
                                    <span style="color:#fff;text-decoration: underline;  font-size:14px;">All Collection
                                        Report</span></br>
                                    <p class="text-right" style="color:#fff;margin-right:15px;">Printed Date:
                                        {{ date('d-m-Y') }}</p>

                                </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">SL#</th>
                                            <th width="15%" class="text-center  sorting_1">Customer Id</th>
                                            <th width="15%">Customer Name</th>
                                            <th width="15%" class="">Bill No.</th>
                                            <th width="10%">Sales Amount</th>
                                            <th width="10%">Processing Fee</th>
                                            @if ($company->othersFeeApplicable == 'Yes')
                                                <th width="10%">Others Fee</th>
                                            @endif
                                            <th width="10%">Total Sales Amount</th>
                                            <th width="10%">Collection Amount</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('all_collection_report_show') }}',
                    data: $('form').serialize(),
                    dataType: 'json',
                    success: function(_response) {
                        var html = '';
                        var htmlT = '';
                        if (typeof _response[0] == 'undefined') {
                            $("#tableBodySection").append(
                                "<tr>" +
                                "<td colspan='9'>No data found</td>" +
                                "</tr>"
                            );
                        }
                        $('#loadingModal').hide();
                        var sl = 0;
                        var totalSalesAmount = 0;
                        var totalProcessingFee = 0;
                        var totalOthersFee = 0;
                        var totalGrandSalesAmount = 0;
                        var totalCollectionAmount = 0;
                        var others_fee_amount = 0;
                        $.each(_response, function(index, item) {

                            if (item.others_fee_amount != null && item.is_deleted ==
                                null && othersFeeApplicable == 'Yes') {
                                others_fee_amount = item.others_fee_amount;
                            } else {
                                others_fee_amount = 0;
                            }
                            var total_sales_amount = parseFloat(item.sales_amount) +
                                parseFloat(item.service_charge_amount) + parseFloat(
                                    others_fee_amount);

                            html = '<tr>';
                            html += '<td width="5%" style="text-align:center">' + ++sl +
                                ' </td>';
                            html += '<td width="15%" style="text-align:left"> ' + item.customer_id +
                                ' </td>';
                            html += '<td width="15%" style="text-align:left"> ' + item
                                .customer_name + '  </td>';
                            html += '<td width="15%" style="text-align:center"> ' + item
                                .sales_bill_no + ' </td>';
                            html += '<td width="10%" style="text-align:right"> ' + zerocheck(
                                item.sales_amount) + ' </td>';
                            html += '<td width="10%" style="text-align:right"> ' + zerocheck(
                                item.service_charge_amount) + ' </td>';
                            if (othersFeeApplicable == 'Yes') {
                                html += '<td width="10%" style="text-align:right"> ' + zerocheck(
                                    others_fee_amount) + ' </td>';
                            }
                            html += '<td width="10%" style="text-align:right"> ' + zerocheck(
                                total_sales_amount) + ' </td>';
                            html += '<td width="10%" style="text-align:right"> ' + zerocheck(
                                item.collection_amount) + ' </td>';
                            html +=
                                '</tr> ';
                            $("#tableBodySection").append(html);


                            totalSalesAmount += parseFloat(item.sales_amount);
                            totalProcessingFee += parseFloat(item
                                .service_charge_amount);
                            totalOthersFee += parseFloat(others_fee_amount);
                            totalGrandSalesAmount += parseFloat(total_sales_amount);
                            totalCollectionAmount += parseFloat(item.collection_amount);
                        });
                        if (typeof _response[0] !== 'undefined') {
                            htmlT += '<tr class="grandtotal">';
                            htmlT +=
                                '<td colspan="4" style="background-color: #819BC4 !important;color: #000 !important;">Grand Total</td>';
                            htmlT +=
                                '<td style="text-align:right" class="text-nowrap"> ' +
                                zerocheck(totalSalesAmount) + '</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(totalGrandSalesAmount) + '</td>';
                            htmlT +=
                                '<td style="text-align:right" class="text-nowrap"> ' +
                                zerocheck(totalCollectionAmount) + '</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