@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>Counter Wise Report</b></h5>
                    </div>
                </div>
                <div class="card-body" style="padding: 20px 0;">
                    {{-- <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_order_wise">
                                <label for="bs-rangepicker-range">Date Range</label>
                            </div>
                        </div>
                    </div>
                    <div class="table-responsive table-nowrap custom-table">
                        <table id="table_counter_wise"
                            class="table table-striped table-bordered dataTable no-footer dtr-inline" style="width: 100%; ">
                            <thead>
                                <th style="width:50px;">No</th>
                                <th>Total Item</th>
                                <th>Counter Name</th>
                                <th>Cash</th>
                                <th>Online</th>
                                <th>Total</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="3">Total</th>
                                    <th rowspan="1" colspan="1" id="CounterTotalCash" style="text-align: right;">0.00
                                    </th>
                                    <th rowspan="1" colspan="1" id="CounterTotalonline" style="text-align: right;">
                                        0.00</th>
                                    <th rowspan="1" colspan="1" id="CounterTotal" style="text-align: right;">
                                        0.00</th>
                                </tr>
                            </tfoot>
                        </table>
                        <div id="datatable-controls" class="d-flex justify-content-between align-items-center">
                        </div>
                    </div>
                </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 counterWiseReportData = '{{ route('get.counter.wise.report.data') }}';
        var csrfToken = $("[name=_token").val();

        $(document).ready(function() {
            var counter_table = $('#table_counter_wise').DataTable({
                "aoColumnDefs": [{
                    "bSortable": false,
                    "aTargets": []
                }],
                "order": [
                    [0, 'desc']
                ],
                "processing": true,
                "serverSide": true,
                "pageLength": 10,
                "pagingType": "full_numbers",
                "ajax": {
                    "url": counterWiseReportData,
                    "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 && responseJSON.totals) {
                            $('#CounterTotal').text(responseJSON.totals.totalNetAmount.toFixed(2));
                            $('#CounterTotalCash').text(responseJSON.totals.totalCashAmount.toFixed(2));
                            $('#CounterTotalonline').text(responseJSON.totals.totalOnlineAmount.toFixed(
                                2));
                        } else {
                            console.error("Totals are undefined in the response");
                        }
                    },
                },

                "aoColumns": [{
                        "mData": "id",
                        orderable: false,
                    },
                    {
                        "mData": "total_items",
                        orderable: false,
                        "render": function(data, type, row) {
                            return data ? data : "0";
                        }
                    },
                    {
                        "mData": "counter",
                        "render": function(data, type, row) {
                            return data ? data : "N/A";
                        }
                    },
                    {
                        "mData": "cash"
                    },
                    {
                        "mData": "online"
                    },
                    {
                        "mData": "total"
                    },
                ],
                language: {
                    search: "",
                    searchPlaceholder: "Search 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": [
                    @if (in_array('column_visibility', $data['counterReportPermissions']))
                        {
                            extend: 'colvis',
                            text: 'Column Visibility',
                            postfixButtons: ['colvisRestore']
                        },
                    @endif
                    @if (in_array('pdf_export', $data['counterReportPermissions']))
                        {
                            extend: 'pdfHtml5',
                            text: 'PDF',
                            title: 'Counter Wise Report',
                            exportOptions: {
                                columns: ':visible'
                            },
                        },
                    @endif
                    @if (in_array('excel_export', $data['counterReportPermissions']))
                        {
                            extend: 'excelHtml5',
                            text: 'Excel',
                            title: 'Counter Wise Report',
                            exportOptions: {
                                columns: ':visible'
                            }
                        },
                    @endif
                ]
            });
            counter_table.buttons().container().appendTo('#table_buttons');
            $('.dataTables_filter').appendTo('#datatable-search-container');
            var a = document.querySelector("#table_counter_wise 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, 1];

                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 (counter_table.column(t).search() !== this.value) {
                        counter_table.column(t).search(this.value).draw();
                    }
                });

                input.addEventListener("change", function() {
                    if (counter_table.column(t).search() !== this.value) {
                        counter_table.column(t).search(this.value).draw();
                    }
                });
            });
            $('#table_counter_wise').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 + ')');
                counter_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_counter_wise').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