const token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
        const startDateElement = document.getElementById('startDate');
        const endDateElement = document.getElementById('endDate');

        const startDatepicker = new Datepicker(startDateElement, {
            autohide: true,
            format: 'yyyy-mm-dd'
        });

        
        const endDatepicker = new Datepicker(endDateElement, {
            autohide: true,
            format: 'yyyy-mm-dd'
        });
        
        function sendDailySmsUnits() {
            document.getElementById('loadingOverlay').style.display = 'flex';
            const endpoint = "{{ route('client.dailysmsunits') }}";
            const startDate = startDateElement.value;
            const endDate = endDateElement.value;
            fetch(endpoint, {
                  method: 'POST',
                  headers: { 'Content-Type': 'application/x-www-form-urlencoded',  'X-CSRF-TOKEN': token },
                  body: 'start_date=' + encodeURIComponent(startDate) + '&end_date=' + encodeURIComponent(endDate)
                })
                .then(response => response.json())
                .then(data => {
                    // document.getElementById('loadingSpinner').style.display = 'none';
                    document.getElementById('loadingOverlay').style.display = 'none';
                    const theReportRange = document.getElementById('reportRange');
                    const theSmsUnitsValue = document.getElementById('smsUnitsValue');
                    theReportRange.innerHTML = data.reportDate;
                    theSmsUnitsValue.innerHTML = "SMS Units : " + data.smsUnits + "| Charge : " + data.clientChargeTotal.toFixed(2);

                })
                .catch(error => console.error('Error:', error));
        }
        endDateElement.addEventListener('changeDate', sendDailySmsUnits);


        function statusDesign (cell, formatterParams){
          var value = cell.getValue();
          if (value !== null) {
            if(value.includes('SENT')){
              return "<span style='color:#3FB449; font-weight:bold;'>" + value + "</span>";
            }
            else{
                  return "<span style='color:#E4A11B;'>" + value + "</span>";
            }
          }
        }
        var table = new Tabulator("#message-table", {
            ajaxURL: base_url = "client-traffic-tabulator", // "https://smsportal.clickmlapps.com/client-traffic-tabulator/",   
            ajaxConfig: {
                method: "GET", 
                headers: {
                    "Content-type": "application/json; charset=utf-8",
                },
            },
            ajaxParams: {size: 1000},     
            pagination: "remote",     
            paginationSize: 20,       
            paginationDataSent: {
                "page": "page",       
                "size": "size"         
            },
            paginationDataReceived: {
                "last_page": "totalPages", 
                "data": "content",          
                "current_page": "number",    
                "total": "totalElements"     
            },
            ajaxResponse: function(url, params, response) {
                return response.content;
            },
            columns: [
              {title: "Sender", field: "from", width:150, headerFilter:"input"},
              {title: "Msisdn", field: "to", width:150, headerFilter:"input"},
              {title:"Message", field:"message", width:650, formatter:"textarea", headerFilter:"input"},           
              {
                title:"Date Created",
                field:"createdAt",
                width:200,
                formatter:"datetime",
                formatterParams:{
                  inputFormat:"iso",
                  outputFormat:"yyyy-MM-dd",
                  invalidPlaceholder:"(invalid date)"
                },
                headerFilter:function(cell, onRendered, success, cancel){
                  // Create native date input
                  var input = document.createElement("input");
                  input.type = "date";

                  input.addEventListener("change", function(){
                    console.log(input.value);
                    success(input.value); // pass value to Tabulator filter
                  });

                  return input;
                },
                headerFilterFunc:function(headerValue, rowValue){
                  if(!headerValue){ return true; } // no filter
                  if(!rowValue){ return false; }

                  // Extract just the date portion from ISO timestamp
                  const rowDate = new Date(rowValue);
                  const formatted = rowDate.toISOString().split("T")[0]; // yyyy-MM-dd

                  return formatted === headerValue;
                }
              }
            ],
        });

        document.getElementById("download-pdf").addEventListener("click", function(){
            table.download("pdf", "messages.pdf", {
                orientation:"portrait", // portrait or landscape
                title:"Messages Export", // document title
            });
        });

        document.getElementById("download-xlsx").addEventListener("click", function(){
            table.download("xlsx", "messages.xlsx", {sheetName:"Messages"});
        });