@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.dataTable tbody th,
        table.dataTable tbody td {
            padding: 8px 10px;

        }

        .dataTables_wrapper .dataTables_length {
            float: left;
            display: none;
        }

        .dataTables_wrapper table.dataTable thead>tr>th {
            padding-left: 15px;
            padding-right: 9px;
        }
    </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">
                            <div class="panel-title">
                                <h2>{!! $data['pageTitle'] !!}</h2>
                            </div>

                            @if ($data['buttonVisiable'] == true)
                                <div class="panel-options">
                                    <a href="{{ route('collection_create') }}" class="btn btn-info pull-right addViewBtn">
                                        <i class="glyphicon glyphicon-plus-sign addIcon"></i>Add Collection
                                    </a>
                                </div>
                            @endif

                        </div>

                        <div class="panel-body panelBodyView">
                            @php

                                if ($data['branchName']->name == 'Head Office' || $data['roletype'] != 'Credit Officer') {
                                    $searchElements = [['element' => 'branchId'], ['element' => 'dateRange'], ['element' => 'collectedById'], ['element' => 'custom', 'name' => 'fillSaleBillNo', 'type' => 'text', 'label' => 'Sale Bill No']];
                                } else {
                                    $searchElements = [['element' => 'dateRange'], ['element' => 'custom', 'name' => 'fillSaleBillNo', 'type' => 'text', 'label' => 'Sale Bill No']];
                                }

                            @endphp
                            @include('partials.searchPanel.main', ['searchElements' => $searchElements])
                            @if ($data['roletype'] == 'Credit Officer')
                                <div id="dateplace" style="font-size: 16px;">
                                    <h6>Date:{{ $data['activeDate'] }}</h6>
                                </div>
                            @endif
                            <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">Action</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 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>
                                            <th rowspan="2" class="text-nowrap">Action</th>
                                        </tr>
                                        <tr>
                                            <th class="text-nowrap">Customer Name</th>
                                            <th class="text-nowrap">Customer No</th>
                                            <th style="text-align:center" class="text-nowrap">Cash Sales</th>
                                            <th style="text-align:center" class="text-nowrap">Installment Receivable</th>
                                            <th style="text-align:center" class="text-nowrap">Service Charge</th>
                                            <th style="text-align:center" class="text-nowrap">Processing Fee</th>
                                            @if ($data['company']->othersFeeApplicable == 'Yes')
                                                <th style="text-align:center" class="text-nowrap">Others Fee</th>
                                            @endif
                                            <th style="text-align:center" class="text-nowrap">Total</th>
                                        </tr>
                                    @endif
                                </thead>
                                <tbody id="tableBodySection">

                                </tbody>


                            </table>
                        </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"
                    },
                    {
                        "data": "id",
                        className: "text-align-center"
                    }
                ]
            } else {
                if (othersFeeApplicable == 'Yes') {
                    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": "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 text-nowrap"
                        },
                        {
                            "data": "createdByName",
                            className: "text-align-left"
                        },
                        {
                            "data": "creationTime",
                            className: "text-align-center"
                        },
                        {
                            "data": "id",
                            className: "text-align-center text-nowrap"
                        }
                    ]
                } else {
                    target = 9;
                    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": "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 text-nowrap"
                        },
                        {
                            "data": "createdByName",
                            className: "text-align-left"
                        },
                        {
                            "data": "creationTime",
                            className: "text-align-center"
                        },
                        {
                            "data": "id",
                            className: "text-align-center text-nowrap"
                        }
                    ]
                }
            }
            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;
                    }
                },


                "columns": prm,

                "columnDefs": [{
                    "targets": -1,
                    "data": "id",
                    "render": function(data, type, row, meta) {
                        var html = '';

                        // if ((row.sales_type == 2 && row.is_opening_balance == 0 && row
                        //         .service_charge_amount == 0 && row.button_visiable == true &&
                        //         row.button_visiable2 == true && row.saleDate != row
                        //         .collection_date_compare) || (row.button_visiable == true && row
                        //         .createdByUser == row.logInUser && row.saleDate != row
                        //         .collection_date_compare)) {

                        if ((row.sales_type == 2 && row.is_opening_balance == 0 && row
                                .service_charge_amount == 0 && row.button_visiable == true &&
                                row.button_visiable2 == true) || (row.sales_type == 2 && row
                                .is_opening_balance == 0 && row.service_charge_amount == 0 &&
                                row.button_visiable == true && row
                                .createdByUser == row.logInUser &&
                                row.button_visiable2 == true)) {
                            html += '<a href="" class="btn btn-xs btn-info"><i class="fa fa-eye" aria-hidden="true"></i></a>\
                                                        <a href="{{ Request::url() }}/edit/' + data +
                                '" class="btn btn-xs btn-info"><i class="fa fa-edit" aria-hidden="true"></i></a>' +
                                '<a href="javascript:;" data-id=' + data +
                                ' class="btn btn-xs btn-danger delete-action"><i class="fa fa-trash" aria-hidden="true"></i></a>';
                        }

                        return html;


                    }
                }]
            });

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

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

                var dateFrom = $('#fillDateFrom').val();
                var dateTo = $('#fillDateTo').val();
                if (dateFrom == "" && dateTo == "") {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Please select date!',
                        text: 'Date range not selected!',
                        showConfirmButton: true,
                    })
                    return false;
                }

                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);
        // });
    </script>
@endsection