@extends('company-admin-dashboard')

@section('title', $data['title'])
@section('dashboard-content')

    <div class="page-content" style="padding: 25px calc(24px / 2) 60px calc(24px / 2); background-color: #f7f7f9;">
        <div class="container-fluid">
            <!-- Card Container for Table Management -->
            <div class="card">
                <div class="card-header bg-white d-flex justify-content-between align-items-center"
                    style="padding: 10px 7px 10px 27px !important;">
                    <div class="d-flex align-items-center">
                        <img class="favicon-logo" src="{{ getCompanyFavicon() }}"  alt="Company Logo"  width="40px">
                        &nbsp; &nbsp;
                        <h5 class="mb-0"><b>Item Sales Report </b></h5>
                    </div>
                </div>
                <div class="card-body" style="padding: 20px 0;">
                    @if (in_array('item_sales_report', $data['itemSalesReportPermissions']))
                        {{-- <div class="row date_filter">
                        <div class="col-xl-2 col-md-4">
                            <div class="form-group" style="padding-left: 20px;">
                                <div class="input-group date" id="fl_order_table_from_date" data-target-input="nearest">
                                    <input autocomplete="off" type="text"
                                        class="form-control datepicker-input border-all" placeholder="Select Date"
                                        data-date-format="dd-mm-yyyy" data-date-container='#fl_order_table_from_date'
                                        data-provide="datepicker" data-date-autoclose="true" name="order_table_from_date"
                                        id="order_table_from_date">
                                    <div class="input-group-append" data-date-container="#fl_order_table_from_date"
                                        data-toggle="datepicker">
                                        <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-xl-2 col-md-4">
                            <div class="form-group">
                                <div class="input-group date" id="fl_order_table_to_date" data-target-input="nearest">
                                    <input autocomplete="off" type="text"
                                        class="form-control datepicker-input border-all" placeholder="Select Date"
                                        data-date-format="dd-mm-yyyy" data-date-container='#fl_order_table_to_date'
                                        data-provide="datepicker" data-date-autoclose="true" name="order_table_to_date"
                                        id="order_table_to_date">
                                    <div class="input-group-append" data-date-container="#fl_order_table_to_date"
                                        data-toggle="datepicker">
                                        <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-1 col-md-2">
                            <div class="mb-3">
                                <button type="submit"
                                    class="Reload_Order btn bg-lightdarkgray black btn-block">Show</button>
                            </div>
                        </div>
                    </div> --}}
                        <div class="table-toolbar d-flex justify-content-between mb-2">
                            <div id="table_buttons"></div>
                            <div class="datatable_filters">
                                <div id="datatable-search-container" class=""></div>
                                <div class="float-label-group">
                                    <input type="text" id="bs-rangepicker-range" class="form-control"
                                        placeholder="Select date range" data-table="table_sales_item">
                                    <label for="bs-rangepicker-range">Date Range</label>
                                </div>
                            </div>
                        </div>
                        <div class="table-responsive table-nowrap custom-table">
                            <table id="table_sales_item"
                                class="table table-striped table-bordered dataTable no-footer dtr-inline"
                                style="width: 100%; ">
                                <thead>
                                    <th style="width:50px;">No</th>
                                    <th>Date</th>
                                    <th>Order No</th>
                                    <th>Counter Name</th>
                                    <th>Employee</th>
                                    <th>Item Name</th>
                                    <th>Qty</th>
                                    <th>Rate</th>
                                    <th>IGST Amount</th>
                                    <th>Net Amount</th>
                                    <th>Payment Status</th>
                                </thead>
                                <tbody id="d_and_c_report" class="datecounter_content" style="text-align: center;">
                                    <tr class="odd">
                                        <td valign="top" colspan="7" class="dataTables_empty">No data available in
                                            table
                                        </td>
                                    </tr>
                                </tbody>
                                <tfoot class="thead-light black f-13px  po-stick" style="text-align: center;">
                                    <tr>
                                        <th rowspan="1" colspan="6">Total</th>
                                        <th rowspan="1" colspan="1" id="totalQty" style="text-align: right;">0.00
                                        </th>
                                        <th rowspan="1" colspan="1" id="totalRate" style="text-align: right;">0.00
                                        </th>
                                        <th rowspan="1" colspan="1" id="totalIgst" style="text-align: right;">0.00
                                        </th>
                                        <th rowspan="1" colspan="1" id="totalAmount" style="text-align: right;">
                                            0.00</th>
                                        <th rowspan="1" colspan="1"style="text-align: right;"></th>
                                    </tr>
                                </tfoot>
                            </table>
                            <div id="datatable-controls" class="d-flex justify-content-between align-items-center">
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

@endsection('dashboard-content')
@section('custom-scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.68/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.68/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.colVis.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>

    <script type="text/javascript">
        var itemSalesReportData = '{{ route('get.item.sales.report.data') }}';
        var csrfToken = $("[name=_token").val();

        $(document).ready(function() {
            var order_table = $('#table_sales_item').DataTable({
                "aoColumnDefs": [{
                    "bSortable": false,
                    "aTargets": []
                }],
                "order": [
                    [0, 'desc']
                ],
                "processing": true,
                "serverSide": true,
                pagingType: "full_numbers",
                "pageLength": 10,
                "ajax": {
                    "url": itemSalesReportData,
                    "type": "POST",
                    "data": function(d) {
                        d._token = csrfToken;
                        d.from_date = $('#bs-rangepicker-range').data('start');
                        d.to_date = $('#bs-rangepicker-range').data('end');
                    },
                    "complete": function(response) {
                        const responseJSON = JSON.parse(response
                            .responseText);

                        if (responseJSON.totals) {
                            $('#totalQty').text(responseJSON.totals.totalQty.toFixed(2));
                            $('#totalRate').text(responseJSON.totals.totalRate.toFixed(2));
                            $('#totalIgst').text(responseJSON.totals.totalIgst.toFixed(2));
                            $('#totalAmount').text(responseJSON.totals.totalNetAmount.toFixed(2));
                        } else {
                            console.error("Totals are undefined");
                        }
                    },
                },
                "aoColumns": [{
                        "mData": "id"
                    },
                    {
                        "mData": "saledate",
                        "render": function(data, type, row) {
                            return data ? data : "0";
                        }
                    },
                    {
                        "mData": "order_no",
                    },
                    {
                        "mData": "counter_name",
                    },
                    {
                        "mData": "employee",
                    },
                    {
                        "mData": "item_name",
                    },
                    {
                        "mData": "qty"
                    },
                    {
                        "mData": "rate"
                    },
                    {
                        "mData": "igst"
                    },
                    {
                        "mData": "net_amount"
                    },
                    {
                        "mData": "payment_status"
                    },

                ],
                "drawCallback": function(settings) {
                    var api = this.api();
                    var $rows = $(api.rows({
                        page: 'current'
                    }).nodes());

                    $rows.find('td').show().removeAttr('rowspan');
                    $rows.find('td').css('vertical-align', 'middle');

                    var dateCol = 1;
                    var orderNoCol = 2;
                    var counterNameCol = 3;
                    var employeeCol = 4;

                    var lastDate = null;
                    var lastOrderNo = null;
                    var firstRowInDateGroup = null;
                    var dateRowSpanCount = 0;

                    $rows.each(function() {
                        var $currentRow = $(this);
                        var currentDate = $currentRow.find('td').eq(dateCol).text().trim();
                        var currentOrderNo = $currentRow.find('td').eq(orderNoCol).text()
                            .trim();

                        if (currentDate === lastDate && currentOrderNo === lastOrderNo &&
                            lastOrderNo !== '') {
                            $currentRow.find('td').eq(dateCol).hide();
                            dateRowSpanCount++;
                        } else {
                            if (firstRowInDateGroup !== null && dateRowSpanCount > 0) {
                                firstRowInDateGroup.find('td').eq(dateCol)
                                    .attr('rowspan', dateRowSpanCount + 1)
                                    .css('vertical-align', 'middle');
                            }
                            lastDate = currentDate;
                            lastOrderNo = currentOrderNo;
                            firstRowInDateGroup = $currentRow;
                            dateRowSpanCount = 0;
                        }
                    });

                    if (firstRowInDateGroup !== null && dateRowSpanCount > 0) {
                        firstRowInDateGroup.find('td').eq(dateCol)
                            .attr('rowspan', dateRowSpanCount + 1)
                            .css('vertical-align', 'middle');
                    }

                    var lastOrderNo = null;
                    var firstRowInOrderGroup = null;
                    var orderRowSpanCount = 0;

                    $rows.each(function() {
                        var $currentRow = $(this);
                        var currentOrderNo = $currentRow.find('td').eq(orderNoCol).text()
                            .trim();

                        if (currentOrderNo === lastOrderNo && lastOrderNo !== '') {
                            $currentRow.find('td').eq(orderNoCol).hide();
                            orderRowSpanCount++;
                        } else {
                            if (firstRowInOrderGroup !== null && orderRowSpanCount > 0) {
                                firstRowInOrderGroup.find('td').eq(orderNoCol)
                                    .attr('rowspan', orderRowSpanCount + 1)
                                    .css('vertical-align', 'middle');
                            }

                            lastOrderNo = currentOrderNo;
                            firstRowInOrderGroup = $currentRow;
                            orderRowSpanCount = 0;
                        }
                    });

                    if (firstRowInOrderGroup !== null && orderRowSpanCount > 0) {
                        firstRowInOrderGroup.find('td').eq(orderNoCol)
                            .attr('rowspan', orderRowSpanCount + 1)
                            .css('vertical-align', 'middle');
                    }

                    var lastOrderNo = null;
                    var lastCounterName = null;
                    var firstRowInCounterGroup = null;
                    var counterRowSpanCount = 0;

                    $rows.each(function() {
                        var $currentRow = $(this);
                        var currentOrderNo = $currentRow.find('td').eq(orderNoCol).text()
                            .trim();
                        var currentCounterName = $currentRow.find('td').eq(counterNameCol)
                            .text().trim();

                        if (currentOrderNo === lastOrderNo && currentCounterName ===
                            lastCounterName && lastOrderNo !== '') {

                            $currentRow.find('td').eq(counterNameCol).hide();
                            counterRowSpanCount++;
                        } else {
                            if (firstRowInCounterGroup !== null && counterRowSpanCount > 0) {
                                firstRowInCounterGroup.find('td').eq(counterNameCol)
                                    .attr('rowspan', counterRowSpanCount + 1)
                                    .css('vertical-align', 'middle');
                            }

                            lastOrderNo = currentOrderNo;
                            lastCounterName = currentCounterName;
                            firstRowInCounterGroup = $currentRow;
                            counterRowSpanCount = 0;
                        }
                    });

                    if (firstRowInCounterGroup !== null && counterRowSpanCount > 0) {
                        firstRowInCounterGroup.find('td').eq(counterNameCol)
                            .attr('rowspan', counterRowSpanCount + 1)
                            .css('vertical-align', 'middle');
                    }

                    var lastOrderNo = null;
                    var lastEmployee = null;
                    var firstRowInEmployeeGroup = null;
                    var employeeRowSpanCount = 0;

                    $rows.each(function() {
                        var $currentRow = $(this);
                        var currentOrderNo = $currentRow.find('td').eq(orderNoCol).text()
                            .trim();
                        var currentEmployee = $currentRow.find('td').eq(employeeCol).text()
                            .trim();

                        if (currentOrderNo === lastOrderNo && currentEmployee ===
                            lastEmployee && lastOrderNo !== '') {
                            $currentRow.find('td').eq(employeeCol).hide();
                            employeeRowSpanCount++;
                        } else {
                            if (firstRowInEmployeeGroup !== null && employeeRowSpanCount > 0) {
                                firstRowInEmployeeGroup.find('td').eq(employeeCol)
                                    .attr('rowspan', employeeRowSpanCount + 1)
                                    .css('vertical-align', 'middle');
                            }

                            lastOrderNo = currentOrderNo;
                            lastEmployee = currentEmployee;
                            firstRowInEmployeeGroup = $currentRow;
                            employeeRowSpanCount = 0;
                        }
                    });

                    if (firstRowInEmployeeGroup !== null && employeeRowSpanCount > 0) {
                        firstRowInEmployeeGroup.find('td').eq(employeeCol)
                            .attr('rowspan', employeeRowSpanCount + 1)
                            .css('vertical-align', 'middle');
                    }
                },
                language: {
                    search: "",
                    searchPlaceholder: "Search Item,Counter",
                    paginate: {
                        first: '<i class="bx bx-skip-previous"></i>',
                        previous: '<i class="bx bx-chevron-left"></i>',
                        next: '<i class="bx bx-chevron-right"></i>',
                        last: '<i class="bx bx-skip-next"></i>'
                    }
                },
                "dom": 'Blfrtip',
                "buttons": [{
                        extend: 'colvis',
                        text: 'Column Visibility',
                        postfixButtons: ['colvisRestore']
                    },
                    {
                        extend: 'pdfHtml5',
                        text: 'PDF',
                        title: 'Item Sales Report',
                        exportOptions: {
                            columns: ':visible'
                        },
                    },
                    {
                        extend: 'excelHtml5',
                        text: 'Excel',
                        title: 'Item Sales Report',
                        exportOptions: {
                            columns: ':visible'
                        }
                    },
                ]

            });
            order_table.buttons().container().appendTo('#table_buttons');
            $('.dataTables_filter').appendTo('#datatable-search-container');
            var a = document.querySelector("#table_sales_item thead"),
                n = a.querySelector("tr").cloneNode(true);
            a.appendChild(n);

            let searchRowTh = a.querySelectorAll("tr:nth-child(2) th");
            searchRowTh.forEach(th => {
                th.classList.remove("sorting", "sorting_asc", "sorting_desc");
                th.removeAttribute("aria-sort");
            });

            searchRowTh.forEach((e, t) => {
                let skipColumns = [0, 10];

                if (skipColumns.includes(t)) {
                    e.innerHTML = "";
                    return;
                }
                var text = e.textContent;
                var input = document.createElement("input");
                input.type = "text";
                input.className = "form-control";
                input.placeholder = "Search " + text;

                e.innerHTML = "";
                e.appendChild(input);

                input.addEventListener("keyup", function() {
                    if (order_table.column(t).search() !== this.value) {
                        order_table.column(t).search(this.value).draw();
                    }
                });

                input.addEventListener("change", function() {
                    if (order_table.column(t).search() !== this.value) {
                        order_table.column(t).search(this.value).draw();
                    }
                });
            });
            $('#table_sales_item').on('length.dt', function(e, settings, len) {

                setCookie('usersPageLength', len, 100);

            });
            $('.dataTables_length').appendTo('#datatable .row');
            $('.dataTables_length select').addClass('form-select form-select-sm');

            $('.dataTables_length').appendTo('#datatable-controls');
            $('.dataTables_paginate').appendTo('#datatable-controls');

            $('.dataTables_paginate').css({
                'text-align': 'center',
                'margin-top': '20px'
            });

            $('.dataTables_length').css({
                'text-align': 'center',
                'margin-top': '20px'
            });

            $('.Reload_Order').click(function() {
                var fromDate = $('#order_table_from_date').val();
                var toDate = $('#order_table_to_date').val();
                $('#order_table_filterdatevalue').text('(' + fromDate + 'To' + toDate + ')');
                order_table.ajax.reload(null, false);
            });

        });
        $(function() {

            var start = moment().subtract(1, 'years');
            var end = moment().add(1, 'day');

            function cb(start, end, label) {
                if (label === 'All') {
                    $('#bs-rangepicker-range').val('All');
                } else {
                    $('#bs-rangepicker-range').val(start.format('DD-MM-YYYY') + ' - ' + end.format('DD-MM-YYYY'));
                }
                $('#bs-rangepicker-range').data('start', start.format('DD-MM-YYYY'));
                $('#bs-rangepicker-range').data('end', end.format('DD-MM-YYYY'));
                $('#table_sales_item').DataTable().ajax.reload();
            }

            $('#bs-rangepicker-range').daterangepicker({
                startDate: start,
                endDate: end,
                opens: 'left',
                ranges: {
                    // 'All': [moment().subtract(100, 'years'), moment().add(1,
                    // 'day')],
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1,
                        'month').endOf('month')]
                }
            }, cb);
            cb(start, end);

        });
        $('#profile-pic').on('click', function(e) {
            e.stopPropagation();
            $('#dropdown-menu').toggle();
        });
    </script>
@endsection