@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">
            <div class="row">
                <div class="col-12">
                    <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>Customer Analytics Report </b></h5>
                            </div>
                        </div>
                        <div class="card-body">
                            <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="customerAnalyticsTable">
                                        <label for="bs-rangepicker-range">Date Range</label>
                                    </div>
                                </div>
                            </div>
                            <div class="table-responsive table-nowrap custom-table">
                                <table id="customerAnalyticsTable"
                                    class="table table-striped table-bordered dataTable no-footer dtr-inline"
                                    style="width: 100%;">
                                    <thead>
                                        <tr>
                                            <th style="width:50px;">No</th>
                                            <th>Customer Name</th>
                                            <th>Mobile No</th>
                                            <th>Order Number</th>
                                            <th>Order Date</th>
                                            <th>Order Source</th>
                                            <th>Total Amount</th>
                                            <th>Customer Type</th>
                                            <th>Total Orders</th>
                                            <th>Order Frequency</th>
                                            <th>Retention Stage</th>
                                            <th>Duration</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                                <div id="datatable-controls" class="d-flex justify-content-between align-items-center">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@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>
    <!-- Bootstrap 5 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

    <!-- DataTables Bootstrap 5 -->
    <script src="https://cdn.datatables.net/1.13.8/js/dataTables.bootstrap5.min.js"></script>

    <script type="text/javascript">
        var customerAnalyticsData = '{{ route('customer.analytics.data') }}';
        var csrfToken = $("[name=_token]").val();

        $(document).ready(function() {
            var table = $('#customerAnalyticsTable').DataTable({
                "aoColumnDefs": [{
                    "bSortable": false,
                    "aTargets": []
                }],
                "order": [
                    [0, 'desc']
                ],
                "processing": true,
                "info": false,
                "serverSide": true,
                pagingType: "full_numbers",
                "pageLength": 10,
                "dom": 'Blfrtip',
                "buttons": [
                    {
                        text: 'Excel',
                        action: function(e, dt, button, config) {
                            let params = dt.ajax.params();
                            
                            // Remove pagination parameters to get all data
                            delete params.start;
                            delete params.length;
                            
                            params.from_date = $('#bs-rangepicker-range').data('start');
                            params.to_date = $('#bs-rangepicker-range').data('end');
                            
                            let query = $.param(params);
                            
                            window.location.href = "{{ route('customer.analytics.export') }}?" + query;
                        }
                    },
                ],
                language: {
                    search: "",
                    searchPlaceholder: "Search customer name or mobile number",
                    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>'
                    }
                },
                "ajax": {
                    "url": customerAnalyticsData,
                    "type": "POST",
                    "data": function(d) {
                        d._token = csrfToken;
                        d.from_date = $('#bs-rangepicker-range').data('start');
                        d.to_date = $('#bs-rangepicker-range').data('end');
                    }
                },
                "aoColumns": [{
                        "mData": "id"
                    },
                    {
                        "mData": "customer_name"
                    },
                    {
                        "mData": "mobile_no"
                    },
                    {
                        "mData": "order_id"
                    },
                    {
                        "mData": "order_date"
                    },
                    {
                        "mData": "order_source"
                    },
                    {
                        "mData": "total_amount"
                    },
                    {
                        "mData": "customer_type"
                    },
                    {
                        "mData": "total_orders"
                    },
                    {
                        "mData": "order_frequency_bucket"
                    },
                    {
                        "mData": "retention_stage"
                    },
                    {
                        "mData": "duration"
                    }
                ]
            });

            table.buttons().container().appendTo('#table_buttons');
            $('.dataTables_filter').appendTo('#datatable-search-container');
            var a = document.querySelector("#customerAnalyticsTable 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, 8, 9, 10, 11];

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

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

            $('.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'
            });



            $(function() {
                var start = moment().startOf('month');
                var end   = moment().endOf('month');

                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'));
                    $('#customerAnalyticsTable').DataTable().ajax.reload();
                }

                $('#bs-rangepicker-range').daterangepicker({
                    startDate: start,
                    endDate: end,
                    opens: 'left',
                    ranges: {
                        '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