@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;
        }
        .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>{{ $data['pageTitle'] }}</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
                        $viewStatus_options =  ['' => 'Select any','All Customer' =>$data['customerData']];

                           $searchElements = [
                                ['element' => 'branchId'],
                                ['element' => 'custom', 'name' => 'fillCustomerBy','type' => 'select',
                                'label' => 'Customer','options' => $viewStatus_options],
                                ['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;"><u><b>{{ $data['pageTitle'] }}</b></u></span><br>
                        </p>


                        <div class="col-md-12"  style="font-size: 12px;">

                            <span>
                                <span style="color: black; float: left;">
                                    <span style="font-weight: bold;">Customer Name: </span>
                                    <span id="customer_name"></span>
                                </span>
                                <span style="color: black; float: right;">
                                    <span style="font-weight: bold;">Branch: </span>
                                    <span> <span id="brnachName" style="font-weight:bold"></span></span>
                                </span>
                            </span>
                            <br>
                            <span>
                                <span style="color: black; float: left;">
                                    <span style="font-weight: bold;">Customer ID:</span>
                                    <span id="customer_id"></span>
                                </span>
                                <span style="color: black; float: right;">
                                    <span style="font-weight: bold;">Reporting Date : </span>
                                    <span><span id="daterange" style="text-decoration: underline;"></span></span>
                                </span>
                            </span>
                            <br/>
                            <span>
                                <span style="color: black; float: left;">
                                    <span style="font-weight: bold;">Customer Phone:</span>
                                    <span id="customer_phone"></span>
                                </span>
                                <span style="color: black; float: right;">
                                    <span style="font-weight: bold;">Print Date:</span>
                                    <span>{{date('d-m-Y g:i A')}}</span>
                                </span>
                            </span>

                        </div>

                        <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">SL No.</th>
                                        <th>Bill Date</th>
                                        <th>Bill No</th>
                                        <th>Incentive Amount</b></th>
                                        <th>Payment Amount</b></th>
                                        <th>Balance</b></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);
                            $('#customer_name').html(_response.customerName);
                            $('#customer_id').html(_response.customerID);
                            $('#customer_phone').html(_response.customerPhone);

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

                            var totalCAmount = 0;
                            var totalPAmount = 0;
                            var totalBAmount = 0;

                                htmlOP = '<tr>';
                                htmlOP += '<td colspan="5" style="text-align:right;">Opening Balance</td>';
                                htmlOP += '<td style="text-align:right;font-weight:bold">'+zerocheck(parseFloat(_response.openingBalance))+'</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:center"> '+value.bill_date+'  </td>';
                                html += '<td style="text-align:center"> '+value.bill_no+'  </td>';
                                html += '<td style="text-align:right"> '+zerocheck(value.camount)+' </td>';
                                html += '<td style="text-align:right"> '+zerocheck(value.pamount)+' </td>';
                                html += '<td style="text-align:right"> '+zerocheck(value.balance)+' </td>';
                                html += '</tr> ';

                                totalCAmount += parseFloat(value.camount);
                                totalPAmount += parseFloat(value.pamount);
                                $('#table_data').append(html);
                            });


                            totalBAmount = (parseFloat(_response.openingBalance) + (parseFloat(totalCAmount) - parseFloat(totalPAmount)));

                             htmlT = '<tr class="color-black">';
                                htmlT += '<th colspan="3" style="text-align:right">Total</th>';
                                htmlT += '<th style="text-align:right"> '+zerocheck(totalCAmount)+'</th>';
                                htmlT += '<th style="text-align:right"> '+zerocheck(totalPAmount)+'</th>';
                                htmlT += '<th style="text-align:right"> '+zerocheck(totalBAmount)+' </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);
                return value.toLocaleString("en-IN",{minimumFractionDigits: 2,maximumFractionDigits: 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