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

        .dataTables_wrapper .dataTables_info {

            display: none;
        }

        .dataTables_wrapper .dataTables_info,
        .dataTables_wrapper .dataTables_paginate {
            display: none;
        }
    </style>
    <div class="row page-wrap collection">
        <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">
                            <button id="printIcon" class="btn btn-info pull-right print-icon" target="_blank" style="">
                                <i class="fa fa-print fa-lg" aria-hidden="true"> Print</i>
                            </button>
                            <div class="panel-title">
                                <h2>{!! $data['pageTitle'] !!}</h2>
                            </div>


                        </div>

                        <div class="panel-body panelBodyView" style="overflow-x:auto;">
                            @php

                                $viewStatus_options = ['' => 'Select any', 'All Employees' => $data['empData']];

                                if ($data['branchName']->name == 'Head Office' || $data['roletype'] != 'Credit Officer') {
                                    $searchElements = [['element' => 'branchId'], ['element' => 'dateRange'], ['element' => 'custom', 'name' => 'fillCollectedBy', 'type' => 'select', 'label' => 'Collected By', 'options' => $viewStatus_options]];
                                } else {
                                    $searchElements = [['element' => 'dateRange']];
                                }

                            @endphp
                            @include('partials.searchPanel.main', ['searchElements' => $searchElements])
                            <div id="printDiv">
                                <div class="row"
                                    style="padding-bottom: 10px; text-align: center; vertical-align: middle; color: black; font-weight: bold; ">
                                    {{-- div for Company --}}
                                    <span style="font-size:14px;"></span><br />
                                    <span style="font-size:11px;"></span><br />
                                    <span style="text-decoration: underline;  font-size:14px;">All Collection By
                                        Employee</span></br>
                                </div>
                                @if ($data['roletype'] == 'Credit Officer')
                                    <div id="dateplace" style="font-size: 16px;">
                                        <h6>Date:{{ $data['activeDate'] }}</h6>
                                    </div>
                                @endif

                                <div class="" style="float:right">Printed Date: {{ date('d-m-Y') }}</div>
                                <table class="table table-striped first-col-dark" id="datatable">

                                    <thead>
                                        @if ($data['roletype'] == 'Credit Officer')
                                            <tr>
                                                <th width="50" rowspan="2" class="text-nowrap">SL No.</th>
                                                <th colspan="2" class="text-nowrap">Customer Information</th>
                                                <th rowspan="2" class="text-nowrap">Sales Bill No</th>
                                                <th rowspan="2" class="text-nowrap">Sales Type</th>
                                            </tr>
                                            <tr>
                                                <th style="width: 49px;" class="text-nowrap">Customer Name</th>
                                                <th style="width: 44px;" class="text-nowrap">Customer No</th>
                                            </tr>
                                        @else
                                            <tr>
                                                <th width="50" rowspan="2" class="text-nowrap">SL No.</th>
                                                <th rowspan="2" class="text-nowrap">Collection Date</th>
                                                <th colspan="2" class="text-nowrap">Customer Information</th>
                                                <th rowspan="2" class="text-nowrap">Sales Bill No</th>
                                                <th rowspan="2" class="text-nowrap">Sales Type</th>
                                                <th colspan="@if ($data['company']->othersFeeApplicable == 'Yes') 6 @else 5 @endif" class="text-nowrap">Collection Amount</b></th>
                                                <th rowspan="2" class="text-nowrap">Collected By</b></th>
                                                <th rowspan="2" class="text-nowrap">Collection Time</b></th>
                                            </tr>
                                            <tr>
                                                <th class="text-nowrap">Customer Name</th>
                                                <th class="text-nowrap">Customer No</th>
                                                <th class="text-nowrap">Cash Sales</th>
                                                <th class="text-nowrap">Installment Receivable</th>
                                                <th class="text-nowrap">Service Charge</th>
                                                <th class="text-nowrap">Processing Fee</th>
                                                @if ($data['company']->othersFeeApplicable == 'Yes')
                                                    <th class="text-nowrap">Others Fee</th>
                                                @endif
                                                <th class="text-nowrap">Total</th>
                                            </tr>
                                        @endif
                                    </thead>
                                    <tbody id="tableBodySection">

                                    </tbody>
                                    <tfoot align="right">
                                        @if ($data['roletype'] == 'Credit Officer')
                                            <tr>
                                                <th rowspan="1" colspan="4">Total</th>
                                                <th></th>
                                            </tr>
                                        @else
                                            @if ($data['company']->othersFeeApplicable == 'Yes')
                                                <tr>
                                                    <th></th>
                                                    <th></th>
                                                    <th></th>
                                                    <th></th>
                                                    <th></th>
                                                    <th></th>
                                                    <th></th>
                                                    <th></th>
                                                    <th></th>
                                                    <th></th>
                                                    <th></th>
                                                    <th></th>
                                                    <th></th>
                                                    <th></th>
                                                </tr>
                                            @else
                                                <tr>
                                                    <th></th>
                                                    <th></th>
                                                    <th></th>
                                                    <th></th>
                                                    <th></th>
                                                    <th></th>
                                                    <th></th>
                                                    <th></th>
                                                    <th></th>
                                                    <th></th>
                                                    <th></th>
                                                    <th></th>
                                                    <th></th>
                                                </tr>
                                            @endif
                                        @endif

                                    </tfoot>

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

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

    <script>
        $(document).ready(function() {
            var role = "{{ $data['roletype'] }}";
            var othersFeeApplicable = "{{ $data['company']->othersFeeApplicable }}";
            var target = 0;
            var prm = '';
            if (role == 'Credit Officer') {
                target = 4;
                prm = [{
                        "data": "sl"
                    },
                    {
                        "data": "customer_Name"
                    },
                    {
                        "data": "customer_no"
                    },
                    {
                        "data": "sales_bill_no",
                        className: "text-align-center"
                    },
                    {
                        "data": "total",
                        className: "text-align-right"
                    }
                ]
                } else {

                    if (othersFeeApplicable == 'Yes') {
                        target = 11;
                        prm = [{
                                "data": "sl"
                            },
                            {
                                "data": "collection_date",
                                className: "text-align-center"
                            },
                            {
                                "data": "customer_Name"
                            },
                            {
                                "data": "customer_no",
                                className: "text-align-center"
                            },
                            {
                                "data": "sales_bill_no"
                            },
                            {
                                "data": "sales_type"
                            },
                            {
                                "data": "cash_sales",
                                className: "text-align-right"
                            },
                            {
                                "data": "installment_receivable",
                                className: "text-align-right"
                            },
                            {
                                "data": "service_charge",
                                className: "text-align-right"
                            },
                            {
                                "data": "processing_fee",
                                className: "text-align-right"
                            },
                            {
                                "data": "others_fee",
                                className: "text-align-right"
                            },
                            {
                                "data": "total",
                                className: "text-align-right"
                            },
                            {
                                "data": "createdByName",
                                className: "text-align-left"
                            },
                            {
                                "data": "creationTime",
                                className: "text-align-center"
                            }
                        ]
                    } else {
                        target = 10;
                        prm = [{
                                "data": "sl"
                            },
                            {
                                "data": "collection_date",
                                className: "text-align-center"
                            },
                            {
                                "data": "customer_Name"
                            },
                            {
                                "data": "customer_no",
                                className: "text-align-center"
                            },
                            {
                                "data": "sales_bill_no"
                            },
                            {
                                "data": "sales_type"
                            },
                            {
                                "data": "cash_sales",
                                className: "text-align-right"
                            },
                            {
                                "data": "installment_receivable",
                                className: "text-align-right"
                            },
                            {
                                "data": "service_charge",
                                className: "text-align-right"
                            },
                            {
                                "data": "processing_fee",
                                className: "text-align-right"
                            },
                            {
                                "data": "total",
                                className: "text-align-right"
                            },
                            {
                                "data": "createdByName",
                                className: "text-align-left"
                            },
                            {
                                "data": "creationTime",
                                className: "text-align-center"
                            }
                        ]
                    }

                }
            var dataTable = $('#datatable').DataTable({
                "sDom": "ltipr", // For removeing default Search bar //
                "processing": true,
                "serverSide": true,
                "ordering": false,
                "ajax": {
                    "url": "{{ Request::url() }}",
                    "type": "POST",
                    "data": function(d) {
                        var inputs = {};
                        $.each($('form').serializeArray(), function() {
                            inputs[this.name] = this.value;
                        });
                        d.filter = inputs;
                    }
                },
                "footerCallback": function(row, data, start, end, display) {
                    var api = this.api(),
                        data;

                    // converting to interger to find total
                    var intVal = function(i) {
                        return typeof i === 'string' ?
                            i.replace(/[\$,]/g, '') * 1 :
                            typeof i === 'number' ?
                            i : 0;
                    };

                    // computing column Total of the complete result


                    var amountTotal = api
                        .column(target)
                        .data()
                        .reduce(function(a, b) {
                            return intVal(a) + intVal(b);
                        }, 0);

                    // Update footer by showing the total with the reference of the column index
                    $(api.column(0).footer()).html('Total');
                    $(api.column(target).footer()).html(amountTotal.toLocaleString("en-IN"));
                },

                "columns": prm,


            });

            $("#searchForm").submit(function(e) {

                e.preventDefault();
                dataTable.draw();

                var dateFrom = $('#fillDateFrom').val();
                var dateTo = $('#fillDateTo').val();

                var html = 'Branch :{{ $data['branchName']->name }}<br/>';
                html += 'Date :' + dateFrom + ' To ' + dateTo + '<br/>';
                $('#dateplace').html(html);
            });



            //delete function
            $(document).on('click', '.delete-action', function() {

                Swal.fire({
                    title: 'Are you sure?',
                    text: "Once delete you won't be able to revert this!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    cancelButtonColor: '#7e7979',
                    confirmButtonText: 'Yes, delete it!'
                }).then((result) => {
                    if (result.isConfirmed) {

                        $.ajax({
                            type: 'post',
                            url: '{{ Request::url() }}/delete',
                            data: {
                                '_token': $('input[name=_token]').val(),
                                'id': $(this).data('id')
                            },
                            success: function(_response) {

                                if (_response.responseTitle == 'success') {
                                    Swal.fire({
                                        icon: 'success',
                                        title: 'Deleted!',
                                        text: 'This data has been deleted.',
                                        showConfirmButton: false,
                                        timer: 1500
                                    })

                                    setTimeout(function() {
                                        dataTable.ajax.reload();
                                    }, 1000);


                                } else {
                                    Swal.fire({
                                        icon: 'error',
                                        title: 'Failed to delete!',
                                        text: 'This data has not been deleted.',
                                        showConfirmButton: true,
                                    })
                                }

                            }
                        });



                    }
                })


            });

        });

        // $(document).ready(function() {
        // var sum = $('#datatable').DataTable().column(5).data().sum();
        // $('#total').html(sum);
        // console.log(sum);
        // });

        $("#printIcon").click(function(event) {
            var printStyle =
                '<style>#reportingTable{float:left;height:auto;padding:0px;width:100%;font-size:11px;border:1pt solid ash;page-break-inside:auto;font-family: arial!important;} tr:last-child { font-weight: bold;} thead tr th{ text-align:center;vertical-align: middle;padding:3px;font-size:11px;} tbody tr td { text-align:center;vertical-align: middle;padding:3px ;font-size:10px;} tr{ page-break-inside:avoid; page-break-after:auto } </style><style media="print">@page{size:portrait;margin:10mm 10mm;}</style><style>@media print {.element-that-contains-table { overflow: visible !important; }}</style><style>@page:first{tr:nth-of-type(4n){page-break-after: always;}}</style>';
            var mainContents = document.getElementById("printDiv").innerHTML;
            var headerContents = '';
            var footerContents =
                "<div class='row' style='font-size:12px; padding-left:5px; padding-top:20px;'>Prepared By <span style='display:inline-block; width: 35%; padding-top:40px;'></span> Checked By <span style='display:inline-block; width: 34%; padding-right:15px; padding-top:40px;'></span>Approved By</div>";
            var printContents = '<div id="order-details-wrapper" style="padding: 10px;">' + headerContents +
                printStyle + mainContents /*+ paddingDiv*/ + footerContents + '</div>';
            var win = window.open('', 'printwindow');
            win.document.write(printContents);
            win.print();
            win.close();
        });
    </script>
@endsection