@extends('layouts/pos_layout')
@section('title', '| Daily Collection Exp. & Deposite Register')
@section('content')
    <style>
        .page-item.active .page-link {
            background-color: lightgrey !important;
            border: 1px solid black;
        }

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

    </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">
                    <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                      
                        

                        if($data['branchName']->name =='Head Office' || $data['roletype'] != 'Credit Officer')
                        {
                           $searchElements = [
                                ['element' => 'branchId'],
                                
                                ['element' => 'dateRange']
                            ];
                        }
                        else{
                            $searchElements = [
                                ['element' => 'dateRange']
                            ];
                        }                        
                        
                    @endphp
                    @include('partials.searchPanel.main', ['searchElements' => $searchElements])
                           
                    <div class="row vert-offset-top-2" id="posCollecrionReportPDF">
                        
                        <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>Branch Name: </b></span> <span id="brnachName" style="color:#fff;font-weight:bold"></span><br>
                            <span style="color:#fff;"><u><b>Daily Collection Exp. & Deposite Register</b></u></span><br>
                            <span style="color:#fff;"><u><b>Reporting Date: </span><span id="daterange" style="color:#fff;text-decoration: underline;"></span></b></u><br>
                        </p>                    
                        <br>  
     
                        <table class="table table-striped table-bordered table-condensed first-col-dark dataTable no-footer" cellpadding="0" cellspacing="0" width="100">
                            <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 colspan="7">SALES INFORMATION</th>
                                        <th rowspan="2">SALES AMOUNT (TK)</th>
                                        <th rowspan="2">COLLECTION AMOUNT (TK)</th>
                                        <th colspan="2">BALANCE AMOUNT (TK)</th>

                                    </tr>
                                    <tr>
                                        <th >ID</th>
                                        <th >CUSTOMER NAME</th>
                                        <th >PRODUCT NAME</th>
                                        <th >PRODUCT MODEL</th>
                                        <th >BILL NO</th>
                                        <th >PASS BOOK NUMBER</th>
                                        <th >NO OF INST.MENT</th>
                                        <th >INST. AMOUNT (TK)</th>
                                        <th >SALE DATE</th>
                                        <th >DUE AMOUNT (TK)</th>
                                        <th >OUTSTANDING AMOUNT (TK)</th>
                                    </tr>
                                    
                            </thead>
                            <tbody id="table_data">
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    </div>

    <script>
        $(document).ready(function() {
            $('form').submit(function( event ) {

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

                var datehtml = '';
                var branchhtml = '';
                var dateFrom = $('#fillDateFrom').val();
                var dateTo = $('#fillDateTo').val();
                datehtml = dateFrom+' To '+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();

                if(startdate == "" || enddate == "" ){
                    Swal.fire({
                        icon: 'error',
                        title: 'Please select start and end date first!',
                        showConfirmButton: true,
                    })
                    $('#loadingModal').hide();
                        return false;
                }

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

                            var html = '';
                            var htmlT = '';
                            var htmlEx = '';
                            var htmlB = '';
                            var htmlLastCash = '';

                            var totalMainCashSaleAmount = 0;
                            var totalMainCashAmount = 0;
                            var totalServiceChargeAmount = 0;
                            var totalAmount = 0;
                            var totalProcessignFeeAmount = 0;
                            var totalMainAmount = 0;
                            var totalBankAmount = 0;
                            var totalMainBalance = 0;

                                htmlOP = '<tr>';
                                htmlOP += '<td colspan="11" style="text-align:center;background:#fff !important;color:#000">BEGINING OF DAY [CASH BALANCE]</td>';
                                htmlOP += '<td style="background:#fff !important;text-align:right;color:#000;font-weight:bold">'+zerocheck(parseFloat(_response.previousBalance))+'</td>';
                                htmlOP += '</tr> ';
                                $('#table_data').append(htmlOP);
                            $.each( _response.data, function( key, value ) {
                                html = '<tr>';
                                html += '<td style="text-align:center">'+value.sl+' </td>';
                                html += '<td style="text-align:left"> '+value.collector_name+' </td>';
                                html += '<td style="text-align:center"> '+value.collector_no+' </td>';
                                html += '<td style="text-align:left"> '+value.customer_Name+'  </td>';
                                html += '<td style="text-align:center"> '+value.customer_no+'  </td>';
                                html += '<td style="text-align:center"> '+value.sales_bill_no+'  </td>';
                                html += '<td style="text-align:right"> '+zerocheck(value.cash_sales)+' </td>';
                                html += '<td style="text-align:right"> '+zerocheck(value.installment_receivable)+' </td>';
                                html += '<td style="text-align:right"> '+zerocheck(value.service_charge)+' </td>';
                                html += '<td style="text-align:right"> '+zerocheck(value.installment_total)+' </td>';
                                html += '<td style="text-align:right"> '+zerocheck(value.processing_fee)+' </td>';
                                html += '<td style="text-align:right"> '+zerocheck(value.total)+' </td>';
                                html += '</tr> ';

                                totalMainCashSaleAmount += parseFloat(value.cash_sales);
                                totalMainCashAmount += parseFloat(value.installment_receivable);
                                totalServiceChargeAmount += parseFloat(value.service_charge);
                                totalAmount += parseFloat(value.installment_total);
                                totalProcessignFeeAmount += parseFloat(value.processing_fee);
                                totalMainAmount += parseFloat(value.total);
                                $('#table_data').append(html);
                            });

                             htmlT = '<tr class="color-black">';
                                htmlT += '<th colspan="6" style="text-align:right">Total</th>';
                                htmlT += '<th style="text-align:right"> '+zerocheck(totalMainCashSaleAmount)+'</th>';
                                htmlT += '<th style="text-align:right"> '+zerocheck(totalMainCashAmount)+'</th>';
                                htmlT += '<th style="text-align:right"> '+zerocheck(totalServiceChargeAmount)+' </th>';
                                htmlT += '<th style="text-align:right"> '+zerocheck(totalAmount)+'</th>';
                                htmlT += '<th style="text-align:right"> '+zerocheck(totalProcessignFeeAmount)+'</th>';                                
                                htmlT += '<th style="text-align:right"> '+zerocheck(totalMainAmount)+'</th>';                                
                                htmlT += '</tr>';
                                

                             htmlT += '<tr class="color-black">';
                                htmlT += '<th colspan="11" style="text-align:left">(+) OTHERS INCOME</th>';                                
                                htmlT += '<th style="text-align:right" id="todays_income"> '+zerocheck(parseFloat(_response.todaysIncome))+'</th>';                                
                                htmlT += '</tr>';
                                

                             htmlT += '<tr class="color-black">';
                                htmlT += '<th colspan="11" style="text-align:left">(-) THIS PERIOD EXP.</th>';                                
                                htmlT += '<th style="text-align:right" id="todays_expense"> '+zerocheck(parseFloat(_response.todaysExpense))+'</th>';                                
                                htmlT += '</tr>';

                             htmlT += '<tr class="color-black">';
                                htmlT += '<th colspan="11" style="text-align:left">(-) BANK DEPOSITE TO HEAD OFFICE ACCOUNT</th>';                                
                                htmlT += '<th style="text-align:right" id="ho_fund"> '+zerocheck(parseFloat(_response.hoFundBalance))+'</th>';                                
                                htmlT += '</tr>';
                                
                                {{-- if(_response.bankTransection == 0){
                           
                                    htmlT += '<tr class="color-black">';
                                    htmlT += '<th colspan="11" style="text-align:left">(-) Bank</th>';
                                    htmlT += '<th style="text-align:right">-</th>';
                                    htmlT += '</tr>';

                                }else{
                           
                                htmlT += '<tr class="color-black">';
                                htmlT += '<th colspan="11" style="text-align:left">';
                                $.each( _response.bankTransection, function( key, values ) {                                     
                                     htmlT += '<span style="text-align:right">(-) '+values.name+'</span>';
                                    totalBankAmount += parseFloat(values.debitcreditBalance);

                                });
                                htmlT += '</th>';
                                htmlT += '<th style="text-align:right"> '+zerocheck(totalBankAmount)+'</th>';
                                htmlT += '</tr>';

                                } --}}
                           

                             totalMainBalance = (parseFloat(_response.previousBalance) + parseFloat(totalMainAmount) + parseFloat(_response.todaysIncome)) - (parseFloat(_response.todaysExpense) + parseFloat(_response.hoFundBalance))
                             htmlT += '<tr class="color-black">';
                                htmlT += '<th colspan="11" style="text-align:right"> END OF DAY [CASH BALANCE]</th>';                                
                                htmlT += '<th style="text-align:right"> '+zerocheck(totalMainBalance)+'</th>';                                
                                htmlT += '</tr>';
                                
                            $('#table_data').append(htmlT);
                        }
                        else
                        {
                            Swal.fire({
                            icon: 'error',
                            title: 'Something went wrong!',
                            showConfirmButton: true
                            })
                            return false;
                            $('#loadingModal').hide();
                        }

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

        });

        function zerocheck(value){

            if(value == 0){
                return "-";
            }else{
                return value.toFixed(2);
            }
           
        }

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

            var printContents = document.getElementById("posCollecrionReportPDF").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;background-color:#fff !important;border:1px solid #000 !important;} .table tbody tr td {white-space: normal;background-color:#fff !important;border:1px solid #000 !important;} .table tbody tr th {white-space: normal;background-color:#fff !important;border:1px solid #000 !important;} #posCollecrionReportPDF {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