@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 {
            border: 1px solid #dbdbdb !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

                                $options = ['' => 'Select Bill No'];
                                $searchElements = [];
                                $searchElements = [['element' => 'report_level', 'showAll' => 'no'], ['element' => 'branchIdWithoutHO'], ['element' => 'customerId'], ['element' => 'custom', 'name' => 'sales_billno_cus', 'type' => 'select', 'label' => 'Sales Bill No', 'id' => 'sales_billno_cus', 'options' => $options]];

                                // if ($data['branchName']->name == 'Head Office' || $data['roletype'] != 'Credit Officer') {
                                //     $searchElements = [['element' => 'report_level'], ['element' => 'branchIdWithoutHO'], ['element' => 'custom_option'], ['element' => 'dateRange']];
                                // } else {
                                //     $searchElements = [['element' => 'dateRange']];
                                // }

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

                            <div class="row vert-offset-top-2" id="posCollecrionReportPDF">
                                <style>
                                    @media print {

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

                                        .table thead tr th {
                                            border: 1px solid #474444 !important;
                                        }

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

                                        .table.table-condensed>thead>tr>th,
                                        .table.table-condensed>tbody>tr>th,
                                        .table.table-condensed>tfoot>tr>th,
                                        .table.table-condensed>thead>tr>td,
                                        .table.table-condensed>tbody>tr>td,
                                        .table.table-condensed>tfoot>tr>td {
                                            border: 1px solid #000 !important;
                                        }

                                        tr.footerrow {
                                            font-weight: bold;
                                        }
                                    }
                                </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>Branch Name: </b></span> <span id="brnachName"
                                        style="color:#fff;font-weight:bold"></span><br>
                                    <span style="color:#fff;"><u><b
                                                id="pageTitle">{{ $data['pageTitle'] }}</b></u></span><br>
                                </p>
                                <br>

                                <p class="text-left reportHeading">
                                    <span class="Customer" style="color:#fff;"><b> Customer Name:
                                        </b><span id="customer_name"></span></span><br>
                                    <span class="Customer" style="color:#fff;"><b> Customer Id:
                                        </b><span id="customer_id"></span></span><br>
                                    <span style="color:#fff;"><b>National Id: </b><span id="national_id"></span></span><br>
                                    <span style="color:#fff;"><b>Spouse Name: </b><span id="spouse_name"></span></span><br>
                                    <span style="color:#fff;"><b>Mobile No: </b> <span id="spouse_name"
                                            style="color:#fff;"></span></span>
                                </p>

                                <p class="text-right reportHeading">
                                    <span class="CustomerName" style="color:#fff;"><b> Reporting
                                            Date: </b><span>21-07-2026</span></span>
                                </p>
                                <!-- Customer & Amount Information Section Start
                                                                                                                                                    <div class="row">
                                                                                                                                                        <div class="col-md-8 col-md-offset-2">
                                                                                                                                                            <table
                                                                                                                                                                class='table table-striped reportHeading table-bordered table-condensed first-col-dark dataTable no-footer'>
                                                                                                                                                                <thead>
                                                                                                                                                                    <tr>
                                                                                                                                                                        <th style="text-align: left;"><b>Customer Name:</b> &nbsp;&nbsp; <span
                                                                                                                                                                                class="pull-right" id="customer_name"></span></th>
                                                                                                                                                                        <th style="text-align: left;"><b>National Id:</b> &nbsp;&nbsp; <span
                                                                                                                                                                                class="pull-right" id="national_id"></span></th>
                                                                                                                                                                    </tr>
                                                                                                                                                                    <tr>
                                                                                                                                                                        <th style="text-align: left;"><b>Spouse Name:</b> &nbsp;&nbsp;<span
                                                                                                                                                                                class="pull-right" id="spouse_name"></span>
                                                                                                                                                                        </th>
                                                                                                                                                                        <th style="text-align: left;"><b>Customer ID:</b> &nbsp;&nbsp; <span
                                                                                                                                                                                class="pull-right" id="customer_id"></span></th>
                                                                                                                                                                    </tr>
                                                                                                                                                                    <tr>
                                                                                                                                                                        <th style="text-align: left;"><b>Mobile No:</b> &nbsp;&nbsp;<span
                                                                                                                                                                                class="pull-right" id="mobile_no"></span> </th>
                                                                                                                                                                        <th style="text-align: left;"><b>Reporting Date:</b> &nbsp;&nbsp; <span
                                                                                                                                                                                class="pull-right">21-07-2026</span></th>
                                                                                                                                                                    </tr>
                                                                                                                                                            </table>
                                                                                                                                                            </thead>
                                                                                                                                                        </div>
                                                                                                                                                    </div><br>
                                                                                                                                                     Customer & Amount Information Section Stop -->
                                <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="20">SL No.</th>
                                            <th width="60">Date</th>
                                            <th>Sales Bill No</th>
                                            <th>Product</th>
                                            <th>Barcode</th>
                                            <th>PID NO</th>
                                            <th>Qty</th>
                                            <th>Sales Amount</th>
                                            <th>Processing Fee</th>
                                            @if ($data['othersFeeApplicableisAllow'] == 'Yes')
                                                <th>Others Fee</th>
                                            @endif
                                            <th class="text-nowrap">Gross Total</th>
                                            <th class="text-nowrap">Paid Amount</th>
                                            <th class="text-nowrap">Installmenet Outstanding</th>
                                        </tr>
                                    </thead>
                                    <tbody id="table_data">
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

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

            $('#fillBranchId').change(function() {
                var branchId = $(this).val();
                if (branchId) {
                    getCustomerByBranch(branchId);
                }
            });

            $("#customer_id").change(function(e) {
                var customer_id = $(this).val();
                var branch_id = $('#fillBranchId').val();
                getBillNoByCustomer(customer_id, branch_id);
            });

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

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

                var datehtml = '';
                var branchhtml = '';

                $('#loadingModal').show();
                $('#table_footer_data').html('');
                var form = $('form').serialize();
                $('#table_data').html(''),
                    event.preventDefault();
                var fillBranchId = $('#fillBranchId').val();
                var customer_id = $('#customer_id').val();
                var sales_billno_cus = $('#sales_billno_cus').val();

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


                if (customer_id == "" || customer_id == null) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Please select customer!',
                        showConfirmButton: true,
                    })
                    $('#loadingModal').hide();
                    return false;
                }


                if (sales_billno_cus == "" || sales_billno_cus == null) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Please select bill no!',
                        showConfirmButton: true,
                    })
                    $('#loadingModal').hide();
                    return false;
                }

                $.ajax({
                    type: 'post',
                    url: '{{ Request::url() }}',
                    data: $('form').serialize(),
                    dataType: 'json',
                    success: function(_response) {
                        var colspanvalue = 0;
                        if (_response.othersFeeApplicableisAllow == 'Yes') {
                            colspanvalue = '12';
                        } else {
                            colspanvalue = '11';
                        }

                        $('#loadingModal').hide();
                        if (_response.responseTitle == 'success') {
                            $('#brnachName').html(_response.branch);
                            $('#customer_name').html(_response.customer_name);
                            $('#national_id').html(_response.national_id);
                            $('#spouse_name').html(_response.spouse_name);
                            $('#customer_id').html(_response.customer_id);
                            $('#mobile_no').html(_response.mobile_no);
                            var html = '';
                            var htmlT = '';

                            var totalGrossSaleAmount = 0;
                            var totalPaidAmount = 0;
                            var totalDueAmount = 0;

                            $.each(_response.data, function(key, value) {
                                html = '<tr>';
                                html += '<td style="text-align:center">' + value.sl +
                                    ' </td>';
                                html += '<td style="text-align:center"> ' + value
                                    .collection_date + ' </td>';
                                html += '<td style="text-align:center"> ' + value
                                    .sales_bill_no + ' </td>';
                                html += '<td style="text-align:left"> ' + value
                                    .product + ' </td>';
                                html += '<td style="text-align:center"> ' + value
                                    .product_barcode + '  </td>';
                                html += '<td style="text-align:center"> ' + value
                                    .barcode_serial + '  </td>';
                                html += '<td style="text-align:center"> ' + value
                                    .tqty + '  </td>';
                                html +=
                                    '<td style="text-align:right" class="text-nowrap"> ' +
                                    value.sales_amount + '  </td>';
                                html +=
                                    '<td style="text-align:right" class="text-nowrap"> ' +
                                    zerocheck(
                                        value.processing_fee) + ' </td>';
                                if (_response.othersFeeApplicableisAllow == 'Yes') {
                                    html +=
                                        '<td style="text-align:right" class="text-nowrap"> ' +
                                        zerocheck(
                                            value.others_fee) + ' </td>';
                                }
                                html +=
                                    '<td style="text-align:right" class="text-nowrap"> ' +
                                    zerocheck(
                                        value.total) + ' </td>';
                                html +=
                                    '<td style="text-align:right" class="text-nowrap"> ' +
                                    zerocheck(
                                        value.paid_total) + ' </td>';
                                html +=
                                    '<td style="text-align:right" class="text-nowrap"> ' +
                                    zerocheck(
                                        value.due_amount) + ' </td>';
                                html += '</tr> ';

                                totalGrossSaleAmount += parseFloat(value.total);
                                totalPaidAmount += parseFloat(value
                                    .paid_total);
                                totalDueAmount = parseFloat(value
                                    .due_amount);

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

                            var colspan = '';

                            if (_response.othersFeeApplicableisAllow == 'Yes') {
                                colspan = 10;
                            } else {
                                colspan = 9;
                            }

                            htmlT = '<tr class="color-black">';
                            htmlT +=
                                '<th colspan="' + colspan +
                                '" style="text-align:right" class="text-nowrap">Total</th>';
                            htmlT += '<th style="text-align:right" class="text-nowrap"> ' +
                                zerocheck(totalGrossSaleAmount) + '</th>';
                            htmlT += '<th style="text-align:right" class="text-nowrap"> ' +
                                zerocheck(totalPaidAmount) + '</th>';
                            htmlT += '<th style="text-align:right" class="text-nowrap"> ' +
                                zerocheck(totalDueAmount) + ' </th>';
                            htmlT += '</tr>';

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

                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Something went wrong!',
                                showConfirmButton: true
                            })
                            return false;
                            $('#loadingModal').hide();
                        }
                        getCustomerByBranch(fillBranchId, customer_id);
                    },
                    error: function(_response) {
                        toastr.error('_response.errors');
                        $('#loadingModal').hide();
                    }
                });
            });

        });

        function getCustomerByBranch(branchId, setCustomer) {
            if (branchId) {
                $.ajax({
                    type: "POST",
                    url: '{{ route('get-branch-wise-customer') }}',
                    data: {
                        '_token': $('input[name=_token]').val(),
                        'branchId': branchId
                    },
                    success: function(res) {
                        if (res) {
                            var selected = '';
                            $("#customer_id").empty();
                            $("#customer_id").prepend(
                                '<option value="">Select Customer</option>');

                            $.each(res, function(key, value) {
                                if (key == setCustomer) {
                                    selected = 'selected="selected"';
                                } else {
                                    selected = '';
                                }
                                console.log(selected);
                                $('#customer_id').append("<option " + selected + " value='" + key +
                                    "'>" + value +
                                    "</option>");
                            });
                        } else {
                            $('#customer_id').empty().append('<option value="0">Select Customer</option>');
                        }
                    }
                });
            }
        }

        function getBillNoByCustomer(customer_id, branch_id) {
            if (customer_id) {
                $.ajax({
                    type: 'post',
                    url: '{{ route('collection_get_info_for_report') }}',
                    data: {
                        '_token': $('input[name=_token]').val(),
                        'customer_id': customer_id,
                        'branch_id': branch_id
                    },
                    success: function(_response) {
                        if (_response.salesInfo) {
                            $("#sales_billno_cus").empty();
                            $("#sales_billno_cus").prepend(
                                '<option value="">Select Bill No</option>');

                            $.each(_response.salesInfo, function(id, sales_bill_no) {
                                $('#sales_billno_cus').append("<option value='" + id + "'>" +
                                    sales_bill_no +
                                    "</option>");
                            });
                        } else {
                            $("#sales_billno_cus").empty();
                        }
                    }
                });
            }
        }


        function zerocheck(value) {

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

        }

        function zerocheckForOpeningBalance(value) {

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

        }


        $("#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