@extends('layouts/pos_layout')
@section('title', '| Customer Wise Outstanding Due Report')
@section('content')
<style>
    .page-item.active .page-link {
        background-color: lightgrey !important;
        border: 1px solid black;
    }

    .page-link {
        color: black !important;
    }

    .table.table-condensed>thead>tr>td,
    .table.table-condensed>tbody>tr>td,
    .table.table-condensed>tfoot>tr>td,
    .table.table-condensed>thead>tr>th,
    .table.table-condensed>tbody>tr>th,
    .table.table-condensed>tfoot>tr>th {
        padding: 5px 3px !important;
        font-size: 10px !important;
        border: 1px solid #dbdbdb !important;

    }

    .table thead tr th {
        font-size: 8px !important;
    }

    tr.footerrow {
        font-weight: bold;
    }

    p.text-center.reportHeading {
        font-size: 15px;
    }
</style>


<div class="row page-wrap ">
    <div class="col-md-12">
        <div>
            <div>


                <div class="panel panel-default" style="background-color:#708090;">
                    <div class="panel-heading" style="padding-bottom:0px">
                        <div class="panel-title">
                            <h2>Customer Wise Outstanding Due Report</h2>
                        </div>
                        <div class="panel-options">
                            <a href="" class="btn btn-info pull-right addViewBtn printIcon" id="printIcon">
                                <i class="glyphicon glyphicon-plus-sign addIcon"></i>Print
                            </a>
                        </div>
                    </div>


                    <div class="panel-body panelBodyView printIcon" id="printDiv">
                        @php

                        $searchElements = [
                        ['element' => 'report_level','showAll' => 'no'],
                        ['element' => 'branchId','showAll' => 'no','showHeadoffice' => 'no'],
                        ['element' => 'supplierId'],
                        ['element' => 'category_id','label' => 'Product'],
                        ['element' => 'dateTo'],

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

                        <div class="row vert-offset-top-2" id="stockReportPdf">

                            <style>
                                @media print {

                                    #stockReportPdf {
                                        visibility: visible;
                                        overflow-x: unset;
                                    }

                                    .text-nowrap {
                                        white-space: normal;
                                    }

                                    table th {
                                        border-top: 1px solid red !important;
                                    }

                                    .table thead tr th {
                                        font-size: 8px !important;
                                        border: 1px solid #474444 !important;
                                        font-weight: bold;
                                    }

                                    .table thead tr td {
                                        border: 1px solid #848484 !important;
                                    }

                                    .table.table-condensed>tbody>tr>td {
                                        border: 1px solid #848484 !important;
                                        color: #000 !important;
                                        padding: 5px 2px !important;
                                        font-size: 7px !important;
                                    }

                                    .table.table-condensed>tfoot>tr>th {
                                        border: 1px solid #827a7a !important;
                                        border-left: 1px solid #827a7a !important;
                                        border-right: 1px solid #827a7a !important;
                                    }

                                    tr.footerrow {
                                        font-weight: bold;
                                    }

                                    p.text-center.reportHeading {
                                        font-size: 15px;
                                    }
                                }
                            </style>
                            <p class="text-center reportHeading">
                                <span class="companyNameData" style="color:#fff;"><b> {{ $data['company']->name }} </b></span><br>
                                <span style="color:#fff;font-size:11px;"><b>{{$data['company']->address}}</b></span><br>
                                <span style="color:#fff;"><b>Customer Wise Outstanding & Due Report</b></span><br>
                                <span style="color:#fff;"><b><span id="reportlevelName">Branch Name: </span></b></span> <span id="brnachName" style="color:#fff;"></span><br>
                                <span style="color:#fff;"><b>As on:</b> </span><span id="daterange" style="color:#fff;"></span><br>
                            </p>

                            <p class="text-right" style="color:#fff;">Printed Date: {{date('d-m-Y')}}</p>
                            <table class="table table-striped table-bordered table-condensed first-col-dark dataTable no-footer" cellpadding="0" cellspacing="0" width="100" id="dueReport">
                                <thead>
                                    <tr>

                                        <th width="50" rowspan="3">SL No.</th>
                                        <th colspan="2">CUSTOMER ID & NAME</th>
                                        <th rowspan="2">CUSTOMER MOBILE NUMBER</th>
                                        <th rowspan="2">YEAR</th>
                                        <th colspan="7">SALES INFORMATION</th>
                                        <th rowspan="2">SALES AMOUNT (TK)</th>
                                        <th rowspan="2">COLLECTION AMOUNT (TK)</th>
                                        @if(isset($data['branchName']->name) && $data['branchName']->name == 'Head Office')
                                            <th colspan="3">BALANCE AMOUNT (TK)</th>
                                        @else
                                            <th colspan="2">BALANCE AMOUNT (TK)</th>
                                        @endif
                                    </tr>
                                    <tr>
                                        <th>ID</th>
                                        <th>CUSTOMER NAME</th>
                                        <th>SALE DATE</th>
                                        <th>BILL NO</th>
                                        <th>PASS BOOK NUMBER</th>
                                        <th>PRODUCT MODEL</th>
                                        <th>PRODUCT NAME</th>
                                        <th>NO OF INST.MENT</th>
                                        <th>INST. AMOUNT (TK)</th>
                                        <th>DUE AMOUNT (TK)</th>
                                        @if(isset($data['branchName']->name) && $data['branchName']->name == 'Head Office')
                                            <th>OUTSTANDING AMOUNT (TK)</th>
                                            <th>OUTSTANDING AMOUNT(WITHOUT S.C) (TK)</th>
                                        @else
                                            <th>OUTSTANDING AMOUNT (TK)</th>
                                        @endif
                                    </tr>

                                </thead>
                                <tbody id="table_data">
                                </tbody>
                            </table>

                            <div class="row userInfoMainDiv" style="padding: 100px 15px 5px 15px; ">
                                <table class="" id="" style="color:black;font-size: 12px; font-weight: bold; width:100%">
                                    <tbody>
                                        <tr>
                                            <td style="text-align:left;  width: 25%">Prepared By</td>
                                            <td style="text-align:center;  width: 20%">Verified By</td>
                                            <td style="text-align:right; width: 25%">Reviewed By</td>
                                            <td style="text-align:right;">Approved By</td>
                                        </tr>
                                    </tbody>
                                </table>

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

<script>
    $(document).ready(function() {

        // sreach by
        $("#fillAreaId").change(function(event) {
            var areaName = $('#fillAreaId option:selected').text();
            $('#reportlevelName').html("Area Name: ");
            $('#brnachName').html(areaName);
        });
        $("#fillZoneId").change(function(event) {
            var zoneName = $('#fillZoneId option:selected').text();
            $('#reportlevelName').html("Zone Name: ");
            $('#brnachName').html(zoneName);
        });
        $("#fillRegionId").change(function(event) {
            var regionName = $('#fillRegionId option:selected').text();
            $('#reportlevelName').html("Region Name: ");
            $('#brnachName').html(regionName);
        });

        $("#fillBranchId").change(function(event) {
            var branchName = $('#fillBranchId option:selected').text();
            if (branchName != '') {
                $('#reportlevelName').html("Branch Name: ");
                $('#brnachName').html(branchName);
            } else {
                $('#reportlevelName').html("Branch Name: ");
                $('#brnachName').html("ALL");
            }

        });
        //...........search by end

        $('form').submit(function(event) {

            $('#daterange').html('');

            var datehtml = '';
            var branchhtml = '';
            var dateTo = $('#fillDateTo').val();
            datehtml = dateTo;
            $('#daterange').html(datehtml);

            $('#loadingModal').show();
            $('#table_footer_data').html('');
            var form = $('form').serialize();
            $('#table_data').html(''),
                event.preventDefault();
            var startdate = $('#fillDateFrom').val();
            var enddate = $('#fillDateTo').val();
            var branch = $('#fillBranchId').val();
            var area = $('#fillAreaId').val();
            var zone = $('#fillZoneId').val();
            var region = $('#fillRegionId').val();
            var reportLevel = $('#fillReportLevel').val();
            if (enddate == "") {

                $('#loadingModal').hide();
                Swal.fire({
                    icon: 'error',
                    title: 'Please select end date!',
                    showConfirmButton: true,
                })
                return false;
            } else if (reportLevel == '' || reportLevel == "Branch") {

                if (branch == '') {
                    $('#loadingModal').hide();
                    Swal.fire({
                        icon: 'error',
                        title: 'Please select branch first!',
                        showConfirmButton: true,
                    })
                    return false;
                }

            } else if (reportLevel == "Area") {
                if (area == "") {
                    $('#loadingModal').hide();
                    Swal.fire({
                        icon: 'error',
                        title: 'Please select area first!',
                        showConfirmButton: true,
                    })
                    return false;
                }

            } else if (reportLevel == "Zone") {
                if (zone == "") {
                    $('#loadingModal').hide();
                    Swal.fire({
                        icon: 'error',
                        title: 'Please select zone first!',
                        showConfirmButton: true,
                    })
                    return false;
                }

            } else if (reportLevel == "Region") {
                if (region == "") {
                    $('#loadingModal').hide();
                    Swal.fire({
                        icon: 'error',
                        title: 'Please select region first!',
                        showConfirmButton: true,
                    })
                    return false;
                }

            } else if (branch == '') {
                $('#loadingModal').hide();
                Swal.fire({
                    icon: 'error',
                    title: 'Please select branch first!',
                    showConfirmButton: true,
                })
                return false;
            }

            $.ajax({
                type: 'post',
                url: '{{ Request::url() }}',
                data: $('form').serialize(),
                dataType: 'json',
                success: function(_response) {
                    $('#loadingModal').hide();
                    // console.log(_response.branch);
                    //$('#loadingModal').hide();
                    if (_response.responseTitle == 'success') {

                        var html = '';
                        var totalSaleAmount = 0;
                        var totalCollectionAmount = 0;
                        var totalDueAmount = 0;
                        var totalOutstandingAmountWithSC = 0;
                        var totalOutstandingAmountWithOutSC = 0;
                        $.each(_response.data, function(key, value) {
                            html = '<tr >';
                            html += '<td> ' + value.sl + '</td>';
                            html += '<td class="text-nowrap"> ' + value.view_customer_id_no + ' </td>';
                            html += '<td> ' + value.view_customer_name + ' </td>';
                            html += '<td style="text-align:center"> ' + value.view_customer_phone + ' </td>';
                            html += '<td class="text-nowrap"> ' + value.view_year + ' </td>';
                            html += '<td class="text-nowrap"> ' + value.view_sales_date + ' </td>';
                            html += '<td class="text-nowrap"> ' + value.view_sales_bill_no + ' </td>';
                            html += '<td style="text-align:center"> ' + value.view_pass_book_no + ' </td>';
                            html += '<td style="text-align:right"> ' + value.view_model_name + ' </td>';
                            html += '<td style="text-align:center"> ' + value.view_product_name + ' </td>';
                            html += '<td style="text-align:center"> ' + value.view_installment_package + ' </td>';
                            html += '<td style="text-align:center"> ' + value.view_total_installment_amount + ' </td>';
                            html += '<td style="text-align:right"> ' + zerocheck(value.view_total_sales_amount) + ' </td>';
                            html += '<td style="text-align:right"> ' + zerocheck(value.view_collection_amount) + '</td>';
                            html += '<td style="text-align:right"> ' + zerocheck(value.view_dueAmount) + '  </td>';
                            html += '<td style="text-align:right"> ' + zerocheck(value.view_outstandingAmount_with_s_c) + ' </td>';

                            @if(isset($data['branchName']->name) && $data['branchName']->name == 'Head Office')
                                html += '<td style="text-align:right"> ' + zerocheck(value.view_outstandingAmount_without_s_c) + ' </td>';
                            @endif

                            html += '</tr> ';


                            $('#table_data').append(html);

                            totalSaleAmount += parseFloat(value.view_total_sales_amount);
                            totalCollectionAmount += parseFloat(value.view_collection_amount);
                            totalDueAmount += parseFloat(value.view_dueAmount);
                            totalOutstandingAmountWithSC += parseFloat(value.view_outstandingAmount_with_s_c);
                            totalOutstandingAmountWithOutSC += parseFloat(value.view_outstandingAmount_without_s_c);

                        });

                        var footer = '';

                        footer = '<tr style="font-weight:bold">';
                        footer += '<td colspan="12" style="text-align:center"> TOTAL </td>';
                        footer += '<td style="text-align:right"> ' + zerocheck(totalSaleAmount) + ' </td>';
                        footer += '<td style="text-align:right"> ' + zerocheck(totalCollectionAmount) + ' </td>';
                        footer += '<td style="text-align:right"> ' + zerocheck(totalDueAmount) + ' </td>';
                        footer += '<td style="text-align:right"> ' + zerocheck(totalOutstandingAmountWithSC) + ' </td>';
                        @if(isset($data['branchName']->name) && $data['branchName']->name == 'Head Office')
                            footer += '<td style="text-align:right"> ' + zerocheck(totalOutstandingAmountWithOutSC) + ' </td>';
                        @endif

                        footer += '</tr> ';

                        $('#table_data').append(footer);


                    } else {
                        $('#loadingModal').hide();
                        Swal.fire({
                            icon: 'error',
                            title: 'Something went wrong!',
                            showConfirmButton: true
                        })
                        return false;
                    }

                },
                error: function(_response) {
                    $('#loadingModal').hide();
                    toastr.error('_response.errors');

                }
            });
        });

    });



    function zerocheck(value) {

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

        }

    }



    $("#printIcon").click(function() {

        var printContents = document.getElementById("stockReportPdf").innerHTML;
        var printStyle = '<style>@page {size: auto;margin: 0mm;margin-top:20px;margin-bottom:20px;margin-right:10px;} @media print  { .table thead tr th {white-space: normal;} #stockReportPdf {width: 100%;height: auto;overflow: visible;} }</style>';
        var printDiv = '<div id="order-details-wrapper" style="margin-top:25px;padding-left:10px;padding-right:10px;">' + printStyle + printContents + '</div>';

        document.body.innerHTML = printDiv;

        var originalContents = document.body.innerHTML;
        window.print();
        document.body.innerHTML = originalContents;
        // location.reload();

    });
</script>
@endsection