@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;
    }

    .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>{{$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
                        $searchElements = [
                        ['element' => 'report_level','showAll'=>'no'],
                        ['element' => 'branchId'],
                        ['element' => 'allEmployeeId','alloption' => 'no'],
                        ['element' => 'monthyear'],
                        ];
                        @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>{{$data['pageTitle']}}</b></span><br>
                                <span style="color:#fff;"><b>Branch Name: </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>

                            <div class="row">
                                <div class="col-md-6">
                                    <p style="color:#fff;"><b>Field Officer Name:</b><span id="employeeName"></p>
                                </div>
                                <div class="col-md-6">
                                    <p style="text-align: right;color:#fff;"><b>Printed Date: 21-07-2026</b></p>
                                </div>
                            </div>
                            <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="2">SL No.</th>
                                        <th colspan="3">CUSTOMER INFORMATION</th>
                                        <th colspan="2">PRODUCT INFORMATION</th>
                                        <th colspan="5">SALES INFORMATION</th>
                                        <th colspan="2">OPENING BALANCE (TK)</th>
                                        <th rowspan="2">OPENING OUTSTANDING</th>
                                        <th colspan="2">CURRENT MONTH (RECOVERABLE & RECOVERY)</th>
                                        <th rowspan="2">COLLECTION DATE</th>
                                        <th rowspan="2">COLLECTION SIGNITURE</th>

                                    </tr>
                                    <tr>
                                        <th>ID</th>
                                        <th>CUSTOMER NAME</th>
                                        <th>MOBILE NUMBER</th>
                                        <th>PRODUCT NAME</th>
                                        <th>PRODUCT MODEL</th>
                                        <th>SALES DATE</th>
                                        <th>BILL NO</th>
                                        <th>NUMBER OF INST.MENT</th>
                                        <th>PASS BOOK NUMBER</th>
                                        <th>SALES AMOUNT (TK)</th>
                                        <th>ADVANCE (TK)</th>
                                        <th>DUE (TK)</th>
                                        <th>RECOVERABLE (TK)</th>
                                        <th>COLLECTION 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 = '';

            $('#loadingModal').show();
            $('#table_footer_data').html('');
            var form = $('form').serialize();
            $('#table_data').html(''),
                event.preventDefault();
            var startdate = $('#fillDateFrom').val();
            var enddate = $('#fillDateTo').val();

            if (enddate == "") {

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

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

                        var html = '';

                        var totalSaleAmount = 0;
                        var totalAdvanceAmount = 0;
                        var totalDueAmount = 0;
                        var totalOutstandingAmount = 0;
                        var totalRecoverableAmount = 0;
                        var totalCollectionAmount = 0;

                        $.each(_response.data, function(key, value) {
                            if(value.view_total_sales_amount != value.totalPaidAmount){
                            //if(value.view_total_sales_amount != value.totalPaidAmount && value.view_total_sales_amount > value.totalPaidAmount){

                                console.log(value);
                                html = '<tr >';
                                html += '<td> ' + value.sl + '</td>';
                                html += '<td class="text-nowrap">' + value.view_customer_id_no + '</td>';
                                html += '<td class="text-nowrap">' + value.view_customername + '</td>';
                                html += '<td class="text-nowrap" style="text-align:center">' + value.view_cusphone + '</td>';
                                html += '<td class="text-nowrap" style="text-align:center">' + value.view_productname + ' </td>';
                                html += '<td class="text-nowrap" style="text-align:center">' + value.view_model_name + ' </td>';
                                html += '<td class="text-nowrap" style="text-align:center">' + value.view_sales_date + ' </td>';
                                html += '<td class="text-nowrap" style="text-align:center">' + value.view_sales_bill_no + ' </td>';
                                html += '<td class="text-nowrap" style="text-align:center">' + value.view_installment_package + ' </td>';
                                html += '<td class="text-nowrap" style="text-align:center">' + value.view_pass_book_no + ' </td>';
                                html += '<td class="text-nowrap" style="text-align:right">' + zerocheck(parseFloat(value.view_total_sales_amount)) + ' </td>';
                                html += '<td class="text-nowrap" style="text-align:right">' + zerocheck(parseFloat(value.view_total_advance_amount)) + ' </td>';
                                html += '<td class="text-nowrap" style="text-align:right">' + zerocheck(parseFloat(value.view_dueAmount)) + '  </td>';
                                html += '<td class="text-nowrap" style="text-align:right">' + zerocheck(parseFloat(value.view_outstandingAmount)) + '  </td>';
                                html += '<td class="text-nowrap" style="text-align:right">' + zerocheck(parseFloat(value.view_total_recoverable)) + '  </td>';
                                html += '<td class="text-nowrap" style="text-align:right">' + zerocheck(parseFloat(value.view_collection_amount)) + '</td>';
                                html += '<td class="text-nowrap" style="text-align:center"></td>';
                                html += '<td class="text-nowrap" style="text-align:center"></td>';

                                html += '</tr> ';


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

                                totalSaleAmount += parseFloat(value.view_total_sales_amount);
                                totalAdvanceAmount += parseFloat(value.view_total_advance_amount);
                                totalDueAmount += parseFloat(value.view_dueAmount);
                                totalOutstandingAmount += parseFloat(value.view_outstandingAmount);
                                totalRecoverableAmount += parseFloat(value.view_total_recoverable);
                                totalCollectionAmount += parseFloat(value.view_collection_amount);
                            }
                        });

                        var footer = '';

                        footer = '<tr style="font-weight:bold">';
                        footer += '<td class="text-nowrap" colspan="10" style="text-align:center"> TOTAL </td>';
                        footer += '<td class="text-nowrap" style="text-align:right"> ' + zerocheck(parseFloat(totalSaleAmount)) + ' </td>';
                        footer += '<td class="text-nowrap" style="text-align:right"> ' + zerocheck(parseFloat(totalAdvanceAmount)) + ' </td>';
                        footer += '<td class="text-nowrap" style="text-align:right"> ' + zerocheck(parseFloat(totalDueAmount)) + ' </td>';
                        footer += '<td class="text-nowrap" style="text-align:right"> ' + zerocheck(parseFloat(totalOutstandingAmount)) + ' </td>';
                        footer += '<td style="text-align:right"> ' + zerocheck(parseFloat(totalRecoverableAmount)) + ' </td>';
                        footer += '<td class="text-nowrap" style="text-align:right"> ' + zerocheck(parseFloat(totalCollectionAmount)) + ' </td>';
                        footer += '<td class="text-nowrap" colspan="2" style="text-align:right"></td>';

                        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');

                }
            });
        });

        /*$('#fillBranchId').change(function () {
            var branchId = $(this).val();

            $("#allfillEmployeeId option:gt(0)").remove();

            if (branchId) {
                $.ajax({
                    type: "GET",
                    url: "{{url('pos/get-branch-wise-employee')}}?branchId=" + branchId,
                    success: function (res) {
                        if (res) {
                            $("#allfillEmployeeId").append('');
                            $.each(res, function (key, value) {
                                $("#allfillEmployeeId").append('<option value="' + key + '">' + value + '</option>');
                            });
                        }
                    }
                });
            }
        });*/
    });

    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