{% load static %}

<style>
    /* Fix for assignment selector dropdown width */
    div.dtcc-dropdown {
        width: auto;
    }
    table.dataTable span.dtcc span.dtcc-button-icon svg {
        color: #fff;
    }
    table.dataTable span.dtcc {
        --dtcc-button_opacity: 0.8;
    }
    
    .dt-column-control-dropdown-menu {
        min-width: 200px !important;
        max-width: 300px !important;
    }
    .dt-column-control-dropdown-menu li {
        white-space: normal !important;
        word-wrap: break-word !important;
    }
</style>
<div class="dashboard-all-companies-tables" style="gap: 50px; margin-top: 30px; display: none;" id="dashboard-all-companies-tables">
    <div class="widget all-company-table-widget" style="font-family: 'Quicksand', 'Helvetica Neue', Arial, sans-serif; position: relative;"
        id="all-company-table-widget">
        <div class="loading-overlay" id="all-company-table-loading">
            <div class="spinner"></div>
        </div>
        <div class="section-title-wrapper">
            <h2 style="color: #435364; font-weight: 600;">Company Breakdown</h2>
            <button class="ask-jarvis-btn" onclick="askJarvisAbout('Company Breakdown')">
                🤖
                <span class="ask-jarvis-tooltip">Ask Jarvis</span>
            </button>
        </div>
        <div class="widget-content" style="margin-top: 15px;">
            <div class="table-wrapper" style="background-color: #f8fafc; border-radius: 10px; padding: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
                <table id="all-companies-edr-table" class="display compact cell-border" style="width:100%; border-collapse: separate; border-spacing: 0; font-family: 'Quicksand', 'Helvetica Neue', Arial, sans-serif; block: auto;">
                    <thead>
                        <tr style="background-color: #435364; color: white;">
                            <th style="padding: 10px; border-radius: 5px 0 0 0; font-weight: 600;">Company</th>
                            <th style="padding: 10px; font-weight: 600;">Entities</th>
                            <th style="padding: 10px; font-weight: 600;">Incidents</th>
                            <th style="padding: 10px; font-weight: 600;">AV Events</th>
                            <th style="padding: 10px; font-weight: 600;">Malware Blocked</th>
                            <th style="padding: 10px; font-weight: 600;">Endpoint Events</th>
                            <th style="padding: 10px; font-weight: 600;">M365 Events</th>
                            <th style="padding: 10px; border-radius: 0 5px 0 0; font-weight: 600;">Firewall Events</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- Table content will be populated by JavaScript -->
                        <tr>
                            <td class="text-center">Loading...</td>
                            <td class="text-center">-</td>
                            <td class="text-center">-</td>
                            <td class="text-center">-</td>
                            <td class="text-center">-</td>
                            <td class="text-center">-</td>
                            <td class="text-center">-</td>
                            <td class="text-center">Loading all-company data...</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="table-wrapper" style="margin-top: 30px; background-color: #f8fafc; border-radius: 10px; padding: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
                <table id="all-companies-patching-table" class="display compact cell-border" style="width:100%; border-collapse: separate; border-spacing: 0; font-family: 'Quicksand', 'Helvetica Neue', Arial, sans-serif; block: hidden;">
                    <thead>
                        <tr style="background-color: #435364; color: white;">
                            <th style="padding: 10px; border-radius: 5px 0 0 0; font-weight: 600;">Company</th>
                            <th style="padding: 10px; font-weight: 600;">Total Agents</th>
                            <th style="padding: 10px; font-weight: 600;">Fully Patched</th>
                            <th style="padding: 10px; font-weight: 600;">1-2 Missing</th>
                            <th style="padding: 10px; font-weight: 600;">3-10 Missing</th>
                            <th style="padding: 10px; font-weight: 600;">10+ Missing</th>
                            <th style="padding: 10px; font-weight: 600;">Null Missing</th>
                            <th style="padding: 10px; border-radius: 0 5px 0 0; font-weight: 600;">Needs Attention</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- Table content will be populated by JavaScript -->
                        <tr>
                            <td class="text-center">Loading...</td>
                            <td class="text-center">-</td>
                            <td class="text-center">-</td>
                            <td class="text-center">-</td>
                            <td class="text-center">-</td>
                            <td class="text-center">-</td>
                            <td class="text-center">-</td>
                            <td class="text-center">Loading all-company data...</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="table-wrapper" style="margin-top: 30px; background-color: #f8fafc; border-radius: 10px; padding: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
                <table id="all-companies-email-sec-table" class="display compact cell-border" style="width:100%; border-collapse: separate; border-spacing: 0; font-family: 'Quicksand', 'Helvetica Neue', Arial, sans-serif; block: hidden;">
                    <thead>
                        <tr style="background-color: #435364; color: white;">
                            <th style="padding: 10px; border-radius: 5px 0 0 0; font-weight: 600;">Company</th>
                            <th style="padding: 10px; font-weight: 600;">Emails Inspected</th>
                            <th style="padding: 10px; font-weight: 600;">Detected Items</th>
                            <th style="padding: 10px; font-weight: 600;">False Positives</th>
                            <th style="padding: 10px; font-weight: 600;">Phishing Emails</th>
                            <th style="padding: 10px; border-radius: 0 5px 0 0; font-weight: 600;">Spam Emails</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- Table content will be populated by JavaScript -->
                        <tr>
                            <td class="text-center">Loading...</td>
                            <td class="text-center">-</td>
                            <td class="text-center">-</td>
                            <td class="text-center">-</td>
                            <td class="text-center">-</td>
                            <td class="text-center">Loading all-company data...</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script>
    // Function to update the all-company table with data
    function updateAllCompaniesEmailSecTable(data) {
        try {
            // Get the table body
            const tableBody = document.querySelector('#all-companies-email-sec-table tbody');
            if (!tableBody) {
                console.error('Table body not found');
                return;
            }
            
            // Destroy existing DataTable if it exists and clear existing rows
            // Has to be done in this order or the data doesn't actually clear
            if ($.fn.DataTable.isDataTable('#all-companies-email-sec-table')) {
                $('#all-companies-email-sec-table').DataTable().destroy();
            }
            tableBody.innerHTML = '';
            
            // If no data or no companies, show a "no data returned" message
            if (!data || !data.report_data || data.report_data.length === 0) {
                const row = document.createElement('tr');
                row.style.backgroundColor = '#ffffff';
                                
                // Always create company column cell
                const companyCell = document.createElement('td');
                companyCell.className = 'text-center all-company-column';
                companyCell.textContent = 'No data returned';
                companyCell.style.padding = '10px';
                companyCell.style.borderBottom = '1px solid #e2e8f0';
                row.appendChild(companyCell);
                
                const entitiesCell = document.createElement('td');
                entitiesCell.className = 'text-center';
                entitiesCell.textContent = '-';
                entitiesCell.style.padding = '10px';
                entitiesCell.style.borderBottom = '1px solid #e2e8f0';
                row.appendChild(entitiesCell);

                // Add empty cells for other columns
                for (let i = 0; i < 3; i++) {
                    const emptyCell = document.createElement('td');
                    emptyCell.className = 'text-center';
                    emptyCell.textContent = '-';
                    emptyCell.style.padding = '10px';
                    emptyCell.style.borderBottom = '1px solid #e2e8f0';
                    row.appendChild(emptyCell);
                }
                
                tableBody.appendChild(row);
                return;
            }
            
            // Use the companies array directly from the API data
            const companies = data.report_data;
            
            // Add rows for each company
            companies.forEach((company, index) => {
                const row = document.createElement('tr');
                                    
                // Company cell
                const companyCell = document.createElement('td');
                companyCell.textContent = company.official_name || 'N/A';
                companyCell.style.padding = '10px';
                companyCell.style.borderBottom = '1px solid #e2e8f0';
                row.appendChild(companyCell);
                
                // Emails Inspected cell (entities)
                const emailsInspectedCell = document.createElement('td');
                emailsInspectedCell.textContent = company.ironscales_emails_inspected || '0';
                emailsInspectedCell.style.padding = '10px';
                emailsInspectedCell.style.borderBottom = '1px solid #e2e8f0';
                row.appendChild(emailsInspectedCell);
            
                // Detected Items cell
                const detectedItemsCell = document.createElement('td');
                detectedItemsCell.textContent = company.ironscales_detected_items || '0';
                detectedItemsCell.style.padding = '10px';
                detectedItemsCell.style.borderBottom = '1px solid #e2e8f0';
                row.appendChild(detectedItemsCell);
                
                // False Positives cell
                const falsePositivesCell = document.createElement('td');
                falsePositivesCell.textContent = company.ironscales_false_positives || '0';
                falsePositivesCell.style.padding = '10px';
                falsePositivesCell.style.borderBottom = '1px solid #e2e8f0';
                row.appendChild(falsePositivesCell);
                
                // Phishing cell
                const phishingCell = document.createElement('td');
                phishingCell.textContent = company.ironscales_phishing || '0';
                phishingCell.style.padding = '10px';
                phishingCell.style.borderBottom = '1px solid #e2e8f0';
                row.appendChild(phishingCell);
            
                // Spam cell
                const spamCell = document.createElement('td');
                spamCell.textContent = company.ironscales_spam || '0';
                spamCell.style.padding = '10px';
                spamCell.style.borderBottom = '1px solid #e2e8f0';
                row.appendChild(spamCell);
                        
                tableBody.appendChild(row);
            });
                        
            // Initialize DataTable if jQuery and DataTables are available
            if (typeof $ !== 'undefined' && $.fn.DataTable) {
                var emailCompact = window._tablesCompactMode || false;
                var emailColDefs = [
                    { targets: 0, columnControl: ['order', ['searchList', 'spacer', 'orderAsc', 'orderDesc', 'orderClear']] }
                ];
                if (emailCompact) {
                    emailColDefs.push({ targets: [2, 3, 4, 5], className: 'none' });
                }
                $('#all-companies-email-sec-table').DataTable({
                    paging: true,
                    searching: true,
                    ordering: {
                        indicators: false
                    },
                    info: true,
                    pageLength: 10,
                    lengthMenu: [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
                    language: {
                        emptyTable: "No data returned",
                        paginate: {
                            first: "First",
                            last: "Last",
                            next: "→",
                            previous: "←"
                        },
                        info: "Showing _START_ to _END_ of _TOTAL_ entries",
                        infoEmpty: "Showing 0 to 0 of 0 entries",
                        lengthMenu: "Show _MENU_ entries"
                    },
                    order: emailCompact ? [[1, 'desc']] : [[4, 'desc']],
                    columnControl: ['order', ['search', 'spacer', 'orderAsc', 'orderDesc', 'orderClear']],
                    columnDefs: emailColDefs,
                    responsive: emailCompact,
                    // Custom styling for DataTables elements
                    initComplete: function() {
                        // Style the DataTables wrapper
                        $('.dataTables_wrapper').css({
                            'font-family': "'Quicksand', 'Helvetica Neue', Arial, sans-serif",
                            'color': '#435364',
                            'margin-top': '10px'
                        });
                        
                        // Style the search input
                        $('.dataTables_filter input').css({
                            'border-radius': '5px',
                            'border': '1px solid #e2e8f0',
                            'padding': '5px 10px',
                            'margin-bottom': '10px'
                        });
                        
                        // Style the length selector
                        $('.dataTables_length select').css({
                            'border-radius': '5px',
                            'border': '1px solid #e2e8f0',
                            'padding': '5px 10px',
                            'margin-bottom': '10px'
                        });
                        
                        // Style pagination buttons
                        $('.dataTables_paginate').css({
                            'margin-top': '10px'
                        });
                        
                        $('.dataTables_paginate .paginate_button').css({
                            'border-radius': '5px',
                            'padding': '5px 10px',
                            'margin': '0 2px',
                            'border': '1px solid #e2e8f0',
                            'background-color': '#f8fafc',
                            'color': '#435364 !important'
                        });
                        
                        $('.dataTables_paginate .paginate_button.current').css({
                            'background-color': '#00ADAD !important',
                            'color': 'white !important',
                            'border': '1px solid #00ADAD'
                        });
                        
                        $('.dataTables_paginate .paginate_button:hover').css({
                            'background-color': '#e2e8f0 !important',
                            'color': '#435364 !important'
                        });
                    }
                });
            
            // Hide loading animation
            hideAllCompanyTableLoading();
            }
        } catch (error) {
            console.error('Error updating all companies email sec table:', error);
            hideAllCompanyTableLoading();
        }
    }

    // Function to update the all-company table with data
    function updateAllCompaniesPatchingTable(data) {
        try {
            // Get the table body
            const tableBody = document.querySelector('#all-companies-patching-table tbody');
            if (!tableBody) {
                console.error('Table body not found');
                return;
            }
            
            // Destroy existing DataTable if it exists and clear existing rows
            // Has to be done in this order or the data doesn't actually clear
            if ($.fn.DataTable.isDataTable('#all-companies-patching-table')) {
                $('#all-companies-patching-table').DataTable().destroy();
            }
            tableBody.innerHTML = '';
            
            // If no data or no companies, show a "no data returned" message
            if (!data || !data.report_data || data.report_data.length === 0) {
                const row = document.createElement('tr');
                row.style.backgroundColor = '#ffffff';
                                
                // Always create company column cell
                const companyCell = document.createElement('td');
                companyCell.className = 'text-center all-company-column';
                companyCell.textContent = 'No data returned';
                companyCell.style.padding = '10px';
                companyCell.style.borderBottom = '1px solid #e2e8f0';
                row.appendChild(companyCell);
                
                const entitiesCell = document.createElement('td');
                entitiesCell.className = 'text-center';
                entitiesCell.textContent = '-';
                entitiesCell.style.padding = '10px';
                entitiesCell.style.borderBottom = '1px solid #e2e8f0';
                row.appendChild(entitiesCell);

                // Add empty cells for other columns
                for (let i = 0; i < 3; i++) {
                    const emptyCell = document.createElement('td');
                    emptyCell.className = 'text-center';
                    emptyCell.textContent = '-';
                    emptyCell.style.padding = '10px';
                    emptyCell.style.borderBottom = '1px solid #e2e8f0';
                    row.appendChild(emptyCell);
                }
                
                tableBody.appendChild(row);
                return;
            }
            
            // Use the companies array directly from the API data
            const companies = data.report_data;
            
            // Add rows for each company
            companies.forEach((company, index) => {
                const row = document.createElement('tr');
                                    
                // Company cell
                const companyCell = document.createElement('td');
                companyCell.textContent = company.official_name || 'N/A';
                companyCell.style.padding = '10px';
                companyCell.style.borderBottom = '1px solid #e2e8f0';
                row.appendChild(companyCell);
                
                // Agents cell (entities)
                const agentsCell = document.createElement('td');
                agentsCell.textContent = company.cwa_agent_count || '0';
                agentsCell.style.padding = '10px';
                agentsCell.style.borderBottom = '1px solid #e2e8f0';
                row.appendChild(agentsCell);
            
                // Fully Patched cell
                const fullyPatchedCell = document.createElement('td');
                fullyPatchedCell.textContent = company.cwa_patch_status_fully_patched || '0';
                fullyPatchedCell.style.padding = '10px';
                fullyPatchedCell.style.borderBottom = '1px solid #e2e8f0';
                row.appendChild(fullyPatchedCell);
                
                // 1-2 Missing cell
                const missing12Cell = document.createElement('td');
                missing12Cell.textContent = company.cwa_patch_status_1_2_missing || '0';
                missing12Cell.style.padding = '10px';
                missing12Cell.style.borderBottom = '1px solid #e2e8f0';
                row.appendChild(missing12Cell);
                
                // 3-10 Missing cell
                const mising310Cell = document.createElement('td');
                mising310Cell.textContent = company.cwa_patch_status_3_10_missing || '0';
                mising310Cell.style.padding = '10px';
                mising310Cell.style.borderBottom = '1px solid #e2e8f0';
                row.appendChild(mising310Cell);
            
                // 10+ Missing cell
                const missingManyCell = document.createElement('td');
                missingManyCell.textContent = company.cwa_patch_status_gt_10_missing || '0';
                missingManyCell.style.padding = '10px';
                missingManyCell.style.borderBottom = '1px solid #e2e8f0';
                row.appendChild(missingManyCell);
            
                // Null Missing cell
                const missingNullCell = document.createElement('td');
                missingNullCell.textContent = company.cwa_patch_status_null || '0';
                missingNullCell.style.padding = '10px';
                missingNullCell.style.borderBottom = '1px solid #e2e8f0';
                row.appendChild(missingNullCell);
            
                // Needs Attention cell
                const needsAttentionCell = document.createElement('td');
                needsAttentionCell.textContent = company.cwa_patch_status_needs_attention || '0';
                needsAttentionCell.style.padding = '10px';
                needsAttentionCell.style.borderBottom = '1px solid #e2e8f0';
                row.appendChild(needsAttentionCell);
            
                tableBody.appendChild(row);
            });
                        
            // Initialize DataTable if jQuery and DataTables are available
            if (typeof $ !== 'undefined' && $.fn.DataTable) {
                var patchCompact = window._tablesCompactMode || false;
                var patchColDefs = [
                    { targets: 0, columnControl: ['order', ['searchList', 'spacer', 'orderAsc', 'orderDesc', 'orderClear']] }
                ];
                if (patchCompact) {
                    patchColDefs.push({ targets: [2, 3, 4, 5, 6, 7], className: 'none' });
                }
                $('#all-companies-patching-table').DataTable({
                    paging: true,
                    searching: true,
                    ordering: {
                        indicators: false
                    },
                    info: true,
                    pageLength: 10,
                    lengthMenu: [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
                    language: {
                        emptyTable: "No data returned",
                        paginate: {
                            first: "First",
                            last: "Last",
                            next: "→",
                            previous: "←"
                        },
                        info: "Showing _START_ to _END_ of _TOTAL_ entries",
                        infoEmpty: "Showing 0 to 0 of 0 entries",
                        lengthMenu: "Show _MENU_ entries"
                    },
                    order: patchCompact ? [[1, 'desc']] : [[4, 'desc']],
                    columnControl: ['order', ['search', 'spacer', 'orderAsc', 'orderDesc', 'orderClear']],
                    columnDefs: patchColDefs,
                    responsive: patchCompact,
                    // Custom styling for DataTables elements
                    initComplete: function() {
                        // Style the DataTables wrapper
                        $('.dataTables_wrapper').css({
                            'font-family': "'Quicksand', 'Helvetica Neue', Arial, sans-serif",
                            'color': '#435364',
                            'margin-top': '10px'
                        });
                        
                        // Style the search input
                        $('.dataTables_filter input').css({
                            'border-radius': '5px',
                            'border': '1px solid #e2e8f0',
                            'padding': '5px 10px',
                            'margin-bottom': '10px'
                        });
                        
                        // Style the length selector
                        $('.dataTables_length select').css({
                            'border-radius': '5px',
                            'border': '1px solid #e2e8f0',
                            'padding': '5px 10px',
                            'margin-bottom': '10px'
                        });
                        
                        // Style pagination buttons
                        $('.dataTables_paginate').css({
                            'margin-top': '10px'
                        });
                        
                        $('.dataTables_paginate .paginate_button').css({
                            'border-radius': '5px',
                            'padding': '5px 10px',
                            'margin': '0 2px',
                            'border': '1px solid #e2e8f0',
                            'background-color': '#f8fafc',
                            'color': '#435364 !important'
                        });
                        
                        $('.dataTables_paginate .paginate_button.current').css({
                            'background-color': '#00ADAD !important',
                            'color': 'white !important',
                            'border': '1px solid #00ADAD'
                        });
                        
                        $('.dataTables_paginate .paginate_button:hover').css({
                            'background-color': '#e2e8f0 !important',
                            'color': '#435364 !important'
                        });
                    }
                });
            
            // Hide loading animation
            hideAllCompanyTableLoading();
            }
        } catch (error) {
            console.error('Error updating all company patch table:', error);
            hideAllCompanyTableLoading();
        }
    }

    // Function to update the all-company-edr table with data
    function updateAllCompaniesEDRTable(data) {
        try {
            // Get the table body
            const tableBody = document.querySelector('#all-companies-edr-table tbody');
            if (!tableBody) {
                console.error('Table body not found');
                return;
            }
            
            // Destroy existing DataTable if it exists and clear existing rows
            // Has to be done in this order or the data doesn't actually clear
            if ($.fn.DataTable.isDataTable('#all-companies-edr-table')) {
                $('#all-companies-edr-table').DataTable().destroy();
            }
            tableBody.innerHTML = '';
            
            // If no data or no companies, show a "no data returned" message
            if (!data || !data.report_data || data.report_data.length === 0) {
                const row = document.createElement('tr');
                row.style.backgroundColor = '#ffffff';
                                
                // Always create company column cell
                const companyCell = document.createElement('td');
                companyCell.className = 'text-center all-company-column';
                companyCell.textContent = 'No data returned';
                companyCell.style.padding = '10px';
                companyCell.style.borderBottom = '1px solid #e2e8f0';
                row.appendChild(companyCell);
                
                const entitiesCell = document.createElement('td');
                entitiesCell.className = 'text-center';
                entitiesCell.textContent = '-';
                entitiesCell.style.padding = '10px';
                entitiesCell.style.borderBottom = '1px solid #e2e8f0';
                row.appendChild(entitiesCell);

                // Add empty cells for other columns
                for (let i = 0; i < 3; i++) {
                    const emptyCell = document.createElement('td');
                    emptyCell.className = 'text-center';
                    emptyCell.textContent = '-';
                    emptyCell.style.padding = '10px';
                    emptyCell.style.borderBottom = '1px solid #e2e8f0';
                    row.appendChild(emptyCell);
                }
                
                tableBody.appendChild(row);
                return;
            }
            
            // Use the companies array directly from the API data
            const companies = data.report_data;
            
            // Add rows for each company
            companies.forEach((company, index) => {
                const row = document.createElement('tr');
                                    
                // Company cell
                const companyCell = document.createElement('td');
                companyCell.textContent = company.official_name || 'N/A';
                companyCell.style.padding = '10px';
                companyCell.style.borderBottom = '1px solid #e2e8f0';
                row.appendChild(companyCell);
                
                // Entities cell (entities)
                const entitiesCell = document.createElement('td');
                entitiesCell.textContent = company.huntress_entity_count || '0';
                entitiesCell.style.padding = '10px';
                entitiesCell.style.borderBottom = '1px solid #e2e8f0';
                row.appendChild(entitiesCell);
            
                // Incidents cell
                const incidentsCell = document.createElement('td');
                incidentsCell.textContent = company.huntress_total_incidents || '0';
                incidentsCell.style.padding = '10px';
                incidentsCell.style.borderBottom = '1px solid #e2e8f0';
                row.appendChild(incidentsCell);
                
                // AV Events cell
                const avEventsCell = document.createElement('td');
                avEventsCell.textContent = company.huntress_antivirus_events || '0';
                avEventsCell.style.padding = '10px';
                avEventsCell.style.borderBottom = '1px solid #e2e8f0';
                row.appendChild(avEventsCell);
                
                // Malware Blocked cell
                const malwareBlockedCell = document.createElement('td');
                malwareBlockedCell.textContent = company.huntress_malware_blocked || '0';
                malwareBlockedCell.style.padding = '10px';
                malwareBlockedCell.style.borderBottom = '1px solid #e2e8f0';
                row.appendChild(malwareBlockedCell);
            
                // Endpoint Events cell
                const endpointEventsCell = document.createElement('td');
                endpointEventsCell.textContent = company.huntress_edr_events_analyzed || '0';
                endpointEventsCell.style.padding = '10px';
                endpointEventsCell.style.borderBottom = '1px solid #e2e8f0';
                row.appendChild(endpointEventsCell);
            
                // M365 Events cell
                const m365EventsCell = document.createElement('td');
                m365EventsCell.textContent = company.huntress_m365_events_analyzed || '0';
                m365EventsCell.style.padding = '10px';
                m365EventsCell.style.borderBottom = '1px solid #e2e8f0';
                row.appendChild(m365EventsCell);
            
                // Firewall Events cell
                const firewallEventsCell = document.createElement('td');
                firewallEventsCell.textContent = company.huntress_firewall_log_ingestion || '0';
                firewallEventsCell.style.padding = '10px';
                firewallEventsCell.style.borderBottom = '1px solid #e2e8f0';
                row.appendChild(firewallEventsCell);
            
                tableBody.appendChild(row);
            });
                        
            // Initialize DataTable if jQuery and DataTables are available
            if (typeof $ !== 'undefined' && $.fn.DataTable) {
                var edrCompact = window._tablesCompactMode || false;
                var edrColDefs = [
                    { targets: 0, columnControl: ['order', ['searchList', 'spacer', 'orderAsc', 'orderDesc', 'orderClear']] }
                ];
                if (edrCompact) {
                    edrColDefs.push({ targets: [2, 3, 4, 5, 6, 7], className: 'none' });
                }
                $('#all-companies-edr-table').DataTable({
                    paging: true,
                    searching: true,
                    ordering: {
                        indicators: false
                    },
                    info: true,
                    pageLength: 10,
                    lengthMenu: [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
                    language: {
                        emptyTable: "No data returned",
                        paginate: {
                            first: "First",
                            last: "Last",
                            next: "→",
                            previous: "←"
                        },
                        info: "Showing _START_ to _END_ of _TOTAL_ entries",
                        infoEmpty: "Showing 0 to 0 of 0 entries",
                        lengthMenu: "Show _MENU_ entries"
                    },
                    order: edrCompact ? [[1, 'desc']] : [[4, 'desc']],
                    columnControl: ['order', ['search', 'spacer', 'orderAsc', 'orderDesc', 'orderClear']],
                    columnDefs: edrColDefs,
                    responsive: edrCompact,
                    // Custom styling for DataTables elements
                    initComplete: function() {
                        // Style the DataTables wrapper
                        $('.dataTables_wrapper').css({
                            'font-family': "'Quicksand', 'Helvetica Neue', Arial, sans-serif",
                            'color': '#435364',
                            'margin-top': '10px'
                        });
                        
                        // Style the search input
                        $('.dataTables_filter input').css({
                            'border-radius': '5px',
                            'border': '1px solid #e2e8f0',
                            'padding': '5px 10px',
                            'margin-bottom': '10px'
                        });
                        
                        // Style the length selector
                        $('.dataTables_length select').css({
                            'border-radius': '5px',
                            'border': '1px solid #e2e8f0',
                            'padding': '5px 10px',
                            'margin-bottom': '10px'
                        });
                        
                        // Style pagination buttons
                        $('.dataTables_paginate').css({
                            'margin-top': '10px'
                        });
                        
                        $('.dataTables_paginate .paginate_button').css({
                            'border-radius': '5px',
                            'padding': '5px 10px',
                            'margin': '0 2px',
                            'border': '1px solid #e2e8f0',
                            'background-color': '#f8fafc',
                            'color': '#435364 !important'
                        });
                        
                        $('.dataTables_paginate .paginate_button.current').css({
                            'background-color': '#00ADAD !important',
                            'color': 'white !important',
                            'border': '1px solid #00ADAD'
                        });
                        
                        $('.dataTables_paginate .paginate_button:hover').css({
                            'background-color': '#e2e8f0 !important',
                            'color': '#435364 !important'
                        });
                    }
                });
            
            // Hide loading animation
            hideAllCompanyTableLoading();
            }
        } catch (error) {
            console.error('Error updating all companies endpoint table:', error);
            hideAllCompanyTableLoading();
        }
    }

    // Function to show loading animation
    function showAllCompanyTableLoading() {
        const loadingAllCompanyTableElement = document.getElementById('all-company-table-loading');
        if (loadingAllCompanyTableElement) {
            loadingAllCompanyTableElement.classList.add('active');
        }
    }
    
    // Function to hide loading animation
    function hideAllCompanyTableLoading() {
        const loadingAllCompanyTableElement = document.getElementById('all-company-table-loading');
        if (loadingAllCompanyTableElement) {
            loadingAllCompanyTableElement.classList.remove('active');
        }
    }

    // Function to fetch EndpointSecurity data from the API
    function fetchAllCompanySummaryData() {
        // Show loading animation
        showAllCompanyTableLoading();

        const startDate = document.getElementById('startdate').value;
        const endDate = document.getElementById('enddate').value;
        
        // Start with base API URL
        let apiUrl = '{{ base_api_url }}/api/v1/dashboard/all-companies-summary';
        
        // Ensure trailing slash for consistency
        apiUrl += '/';
        
        // Add query parameters for dates
        const params = new URLSearchParams();
        
        if (startDate) {
            params.append('startdate', startDate);
        }
        
        if (endDate) {
            params.append('enddate', endDate);
        }
        
        // Append parameters to URL if any exist
        if (params.toString()) {
            apiUrl += '?' + params.toString();
        }
        
        // Make the API request
        fetch(apiUrl, {
            method: 'GET',
            headers: {
                'Authorization': 'Bearer {{ wristband.access_token }}',
                'Content-Type': 'application/json'
            }
        })
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        })
        .then(data => {
            updateAllCompaniesEDRTable(data);
            updateAllCompaniesEmailSecTable(data);
            updateAllCompaniesPatchingTable(data);
        })
        .catch(error => {
            console.error('Error fetching all company edr data:', error);
            hideAllCompanyTableLoading();
        });
    }

    // Function to toggle visibility based on selection
    function toggleAllCompaniesVisibility() {
        const groupSelect = document.getElementById('group-select');
        const allCompaniesTablesDiv = document.getElementById('dashboard-all-companies-tables');
        if (groupSelect && allCompaniesTablesDiv) {
            const selectedGroup = groupSelect.options[groupSelect.selectedIndex];
            const groupCodename = selectedGroup.getAttribute('data-codename');
            if (groupCodename) {
                // Destroy existing DataTable if it exists and clear existing rows
                const emailSecTableBody = document.querySelector('#all-companies-email-sec-table tbody');
                const patchingTableBody = document.querySelector('#all-companies-patching-table tbody');
                const edrTableBody = document.querySelector('#all-companies-edr-table tbody');
                if (!emailSecTableBody) {
                    console.error('Table body not found');
                }
                if (!patchingTableBody) {
                    console.error('Table body not found');
                }
                if (!edrTableBody) {
                    console.error('Table body not found');
                }
                if ($.fn.DataTable.isDataTable('#all-companies-email-sec-table')) {
                    $('#all-companies-email-sec-table').DataTable().destroy();
                }
                if ($.fn.DataTable.isDataTable('#all-companies-patching-table')) {
                    $('#all-companies-patching-table').DataTable().destroy();
                }
                if ($.fn.DataTable.isDataTable('#all-companies-edr-table')) {
                    $('#all-companies-edr-table').DataTable().destroy();
                }
                emailSecTableBody.innerHTML = '';
                patchingTableBody.innerHTML = '';
                edrTableBody.innerHTML = '';
                allCompaniesTablesDiv.style.display = 'none';
            } else {
                allCompaniesTablesDiv.style.display = 'block';
                fetchAllCompanySummaryData();
            }
        }
    }

    // Global function to reinitialize company breakdown tables when drawer opens/closes
    window.reinitCompanyBreakdownTables = function() {
        var compact = window._tablesCompactMode || false;
        
        var tableConfigs = [
            { id: '#all-companies-edr-table', hiddenTargets: [2, 3, 4, 5, 6, 7] },
            { id: '#all-companies-patching-table', hiddenTargets: [2, 3, 4, 5, 6, 7] },
            { id: '#all-companies-email-sec-table', hiddenTargets: [2, 3, 4, 5] }
        ];
        
        tableConfigs.forEach(function(cfg) {
            if (!$.fn.DataTable.isDataTable(cfg.id)) return;
            
            $(cfg.id).DataTable().destroy();
            
            var colDefs = [
                { targets: 0, columnControl: ['order', ['searchList', 'spacer', 'orderAsc', 'orderDesc', 'orderClear']] }
            ];
            if (compact) {
                colDefs.push({ targets: cfg.hiddenTargets, className: 'none' });
            }
            
            $(cfg.id).DataTable({
                paging: true,
                searching: true,
                ordering: { indicators: false },
                info: true,
                pageLength: 10,
                lengthMenu: [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
                language: {
                    emptyTable: "No data returned",
                    paginate: { first: "First", last: "Last", next: "→", previous: "←" },
                    info: "Showing _START_ to _END_ of _TOTAL_ entries",
                    infoEmpty: "Showing 0 to 0 of 0 entries",
                    lengthMenu: "Show _MENU_ entries"
                },
                order: compact ? [[1, 'desc']] : [[4, 'desc']],
                columnControl: ['order', ['search', 'spacer', 'orderAsc', 'orderDesc', 'orderClear']],
                columnDefs: colDefs,
                responsive: compact
            });
        });
    };

    document.addEventListener('DOMContentLoaded', function() {
        // Handle group selection
        const groupSelect = document.getElementById('group-select');
                
        if (groupSelect) {
            // Set initial visibility
            toggleAllCompaniesVisibility();
            
            // Add change event listener
            groupSelect.addEventListener('change', function() {
                // Toggle visibility based on selection
                toggleAllCompaniesVisibility();
            });
        }
    });

</script>