    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 = "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('loadingOverlay').style.display = 'none';
            const theReportRange = document.getElementById('reportRange');
            const theSmsUnitsValue = document.getElementById('smsUnitsValue');
            const theSmsChargeTotalValue = document.getElementById('smsUnitsCharge');
            theReportRange.innerHTML = data.reportDate;
        
            
            if (data.ucm_org_id === 629) {
                theSmsChargeTotalValue.innerHTML = 'SMS Charge (MWK) : <b>' + data.charge_computation + '</b>';
                theSmsUnitsValue.innerHTML = 'SMS Units: Airtel <b>' + data.airtel_sms_units + '</b> | TNM: <b>' + data.tnm_sms_units + '</b>';
            }
            else {
                theSmsChargeTotalValue.innerHTML = 'SMS Charge (MZM) : <b>' + data.charge_computation + '</b>';
                theSmsUnitsValue.innerHTML = 'SMS Units: ' + data.units_computation;

            }
        })
        .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",   
        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){
              var input = document.createElement("input");
              input.type = "date";

              input.addEventListener("change", function(){
                console.log(input.value);
                success(input.value);
              });

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

              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"});
    });