{% load static %}

<div class="widget patching-status-widget" style="font-family: 'Quicksand', 'Helvetica Neue', Arial, sans-serif; position: relative;"
     id="patching-status-widget">
    <div class="loading-overlay" id="patch-loading">
        <div class="spinner"></div>
    </div>
    <div class="section-title-wrapper">
        <h2 style="color: #435364; font-weight: 600;">System Patching Status</h2>
        {% if "feature-ai-jarvis" in user_feature_access and "feature-ai-jarvis" in company_feature_access %}
        <button class="ask-jarvis-btn" onclick="askJarvisAbout('System Patching Status')">
            🤖
            <span class="ask-jarvis-tooltip">Ask Jarvis</span>
        </button>
        {% endif %}
    </div>
        
    <div class="widget-content">
        <div class="category-counts" style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
            <div class="count-item" style="grid-column: span 2; background-color: #03FB8D; border-radius: 10px; padding: 1rem; color: #1B545F; text-align: center;">
                <div class="tooltip-icon">
                    <span id="patching-fully-patched-value-tooltip" title="Fully Patched Tooltip" style="text-align: right;" onclick="toggleTooltip(this)">ⓘ</span>
                    <div class="tooltip-box">The number of workstations and servers which are fully up to date with all Operating Systems updates.</div>
                </div>
                <span id="patching-fully-patched-value" class="value" style="font-size: 1.8rem; font-weight: 700;">{{ patching_data.cwa_patch_status_fully_patched | default:'0' }}</span>
                <br>
                <span class="label" style="font-weight: 600;">Fully Patched Systems</span>
            </div>
            <div class="count-item" style="grid-column: span 1; background-color: #00ADAD; border-radius: 10px; padding: 1rem; color: #fff; text-align: center;">
                <div class="tooltip-icon">
                    <span id="patching-total-agents-value-tooltip" title="Total Agents Tooltip" style="text-align: right;" onclick="toggleTooltip(this)">ⓘ</span>
                    <div class="tooltip-box">The total number of workstations and servers which are managed by Datapath's RMM tools.</div>
                </div>
                <span id="patching-total-agents-value" class="value" style="font-size: 1.8rem; font-weight: 700;">{{ patching_data.cwa_agent_count | default:'0' }}</span>
                <br>
                <span class="label" style="font-weight: 600;">Total Agents</span>
            </div>
            <div class="count-item" style="grid-column: span 1; background-color: #435364; border-radius: 10px; padding: 1rem; color: #fff; text-align: center;">
                <div class="tooltip-icon">
                    <span id="patching-need-attention-value-tooltip" title="Needs Attention Tooltip" style="text-align: right;" onclick="toggleTooltip(this)">ⓘ</span>
                    <div class="tooltip-box">
                        The number of workstations and servers which either need updates or have not been rebooted in more than 30 days.
                        <br><br>
                        Some machines may need both updates and a reboot.</div>
                </div>
                <span id="patching-need-attention-value" class="value" style="font-size: 1.8rem; font-weight: 700;">{{ patching_data.cwa_needs_attention_count | default:'0' }}</span>
                <br>
                <span class="label" style="font-weight: 600;">Needs Attention</span>
            </div>
        </div>
        
        <div style="margin-top: 20px;">
            <h3 style="color: #435364; font-weight: 600; font-size: 1.2rem; margin-bottom: 10px;">Patch Status Breakdown
                <div class="tooltip-icon">
                    <span id="patching-fully-patched-value-tooltip" title="Fully Patched Tooltip" style="text-align: right;" onclick="toggleTooltip(this)">ⓘ</span>
                    <div class="tooltip-box">
                        A breakdown of workstations and servers that need attention.
                        <br><br>
                        These numbers may not add up to the total number of machines needing attention as some machines that need to be rebooted may also need patches.
                    </div>
                </div>
            </h3>
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
                <div style="background-color: #f8fafc; border-radius: 10px; padding: 1rem;">
                    <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
                        <span style="color: #435364; font-weight: 600;">Fully Patched:</span>
                        <span id="patching-fully-patched-detail" style="color: #10b981; font-weight: 600;">{{ patching_data.cwa_patch_status_fully_patched | default:'0' }}</span>
                    </div>
                    <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
                        <span style="color: #435364; font-weight: 600;">1-2 Missing:</span>
                        <span id="patching-1-2-missing-value" style="color: #f59e0b; font-weight: 600;">{{ patching_data.cwa_patch_status_1_2_missing | default:'0' }}</span>
                    </div>
                    <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
                        <span style="color: #435364; font-weight: 600;">3-10 Missing:</span>
                        <span id="patching-3-10-missing-value" style="color: #ef4444; font-weight: 600;">{{ patching_data.cwa_patch_status_3_10_missing | default:'0' }}</span>
                    </div>
                </div>
                <div style="background-color: #f8fafc; border-radius: 10px; padding: 1rem;">
                    <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
                        <span style="color: #435364; font-weight: 600;">>10 Missing:</span>
                        <span id="patching-gt-10-missing-value" style="color: #ef4444; font-weight: 600;">{{ patching_data.cwa_patch_status_gt_10_missing | default:'0' }}</span>
                    </div>
                    <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
                        <span style="color: #435364; font-weight: 600;">Unknown/Null:</span>
                        <span id="patching-null-value" style="color: #6B7280; font-weight: 600;">{{ patching_data.cwa_patch_status_null | default:'0' }}</span>
                    </div>
                    <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
                        <span style="color: #435364; font-weight: 600;">Pending Reboot:</span>
                        <span id="patching-pending-reboot-value" style="color: #f59e0b; font-weight: 600;">{{ patching_data.cwa_pending_reboot_count | default:'0' }}</span>
                    </div>
                </div>
            </div>
        </div>

        <div style="margin-top: 15px; text-align: center; color: #435364; font-size: 0.9rem;">
            <span>Data updated daily</span>
        </div>

    <script>        
        function updatePatchWidgetData(data) {
            try {
                // Update total agents
                const totalAgentsElement = document.getElementById('patching-total-agents-value');
                if (totalAgentsElement) {
                    totalAgentsElement.textContent = data.cwa_agent_count || 0;
                }
                
                // Update fully patched systems
                const fullyPatchedElement = document.getElementById('patching-fully-patched-value');
                const fullyPatchedDetailElement = document.getElementById('patching-fully-patched-detail');
                if (fullyPatchedElement && fullyPatchedDetailElement) {
                    const fullyPatched = data.cwa_patch_status_fully_patched || 0;
                    fullyPatchedElement.textContent = fullyPatched;
                    fullyPatchedDetailElement.textContent = fullyPatched;
                    
                    // Update the background color based on the percentage of fully patched systems
                    const countItem = fullyPatchedElement.closest('.count-item');
                    if (countItem && data.cwa_agent_count > 0) {
                        const patchPercentage = (fullyPatched / data.cwa_agent_count) * 100;
                        if (patchPercentage >= 90) {
                            countItem.style.backgroundColor = '#03FB8D';
                            countItem.style.color = '#1B545F';
                        } else if (patchPercentage >= 80) {
                            countItem.style.backgroundColor = '#03FB8D';
                            countItem.style.color = '#1B545F';
                            //countItem.style.backgroundColor = '#FFC107';
                            //countItem.style.color = '#fff';
                        } else {
                            countItem.style.backgroundColor = '#03FB8D';
                            countItem.style.color = '#1B545F';
                            //countItem.style.backgroundColor = '#FF5252';
                            //countItem.style.color = '#fff';
                        }
                    }
                }
                
                // Update needs attention count
                const needsAttentionElement = document.getElementById('patching-need-attention-value');
                if (needsAttentionElement) {
                    needsAttentionElement.textContent = data.cwa_needs_attention_count || 0;
                }
                
                // Update patch status breakdown
                const missing1to2Element = document.getElementById('patching-1-2-missing-value');
                if (missing1to2Element) {
                    missing1to2Element.textContent = data.cwa_patch_status_1_2_missing || 0;
                }
                
                const missing3to10Element = document.getElementById('patching-3-10-missing-value');
                if (missing3to10Element) {
                    missing3to10Element.textContent = data.cwa_patch_status_3_10_missing || 0;
                }
                
                const missingGt10Element = document.getElementById('patching-gt-10-missing-value');
                if (missingGt10Element) {
                    missingGt10Element.textContent = data.cwa_patch_status_gt_10_missing || 0;
                }
                
                const nullStatusElement = document.getElementById('patching-null-value');
                if (nullStatusElement) {
                    nullStatusElement.textContent = data.cwa_patch_status_null || 0;
                }
                
                const pendingRebootElement = document.getElementById('patching-pending-reboot-value');
                if (pendingRebootElement) {
                    pendingRebootElement.textContent = data.cwa_pending_reboot_count || 0;
                }
                
                // Update the agents needing attention table
                updateAgentsNeedingAttentionTable(data.agents_needing_attention || []);
                
                // Hide loading animation
                hidePatchLoading();
                hidePatchTableLoading();
                
            } catch (error) {
                hidePatchLoading();
                hidePatchTableLoading();
            }
        }
        
        // Function to update the agents needing attention table
        function updateAgentsNeedingAttentionTable(agents) {
            try {
                // Get the table body
                const tableBody = document.querySelector('#agents-attention-table tbody');
                if (!tableBody) {
                    console.error('Table body not found');
                    return;
                }
                
                // Destroy existing DataTable if it exists and clear existing rows
                if ($.fn.DataTable.isDataTable('#agents-attention-table')) {
                    $('#agents-attention-table').DataTable().destroy();
                }
                tableBody.innerHTML = '';
                
                // If no agents, show a "no agents" message
                if (!agents || agents.length === 0) {
                    const row = document.createElement('tr');
                    row.style.backgroundColor = '#ffffff';
                    
                    const computerNameCell = document.createElement('td');
                    computerNameCell.className = 'text-center';
                    computerNameCell.textContent = 'No agents';
                    computerNameCell.style.padding = '10px';
                    computerNameCell.style.borderBottom = '1px solid #e2e8f0';
                    row.appendChild(computerNameCell);
                    
                    // Always create company column cell with the patch-company-column class
                    const companyCell = document.createElement('td');
                    companyCell.className = 'text-center patch-company-column';
                    companyCell.textContent = '-';
                    companyCell.style.padding = '10px';
                    companyCell.style.borderBottom = '1px solid #e2e8f0';
                    row.appendChild(companyCell);
                    
                    const reasonCell = document.createElement('td');
                    reasonCell.className = 'text-center';
                    reasonCell.textContent = 'No agents currently need attention based on criteria.';
                    reasonCell.style.padding = '10px';
                    reasonCell.style.borderBottom = '1px solid #e2e8f0';
                    row.appendChild(reasonCell);
                    
                    tableBody.appendChild(row);
                    return;
                }
                
                // Add rows for each agent
                agents.forEach((agent, index) => {
                    const row = document.createElement('tr');
                    row.style.backgroundColor = index % 2 === 0 ? '#ffffff' : '#f8fafc';
                    
                    const computerNameCell = document.createElement('td');
                    computerNameCell.textContent = agent.computer_name || 'N/A';
                    computerNameCell.style.padding = '10px';
                    computerNameCell.style.borderBottom = '1px solid #e2e8f0';
                    row.appendChild(computerNameCell);
                    
                    // Always create company column cell with the patch-company-column class
                    const companyCell = document.createElement('td');
                    companyCell.className = 'patch-company-column';
                    companyCell.textContent = agent.company_name || agent.client_name || 'N/A';
                    companyCell.style.padding = '10px';
                    companyCell.style.borderBottom = '1px solid #e2e8f0';
                    row.appendChild(companyCell);
                    
                    const reasonCell = document.createElement('td');
                    reasonCell.textContent = agent.reason || 'N/A';
                    reasonCell.style.padding = '10px';
                    reasonCell.style.borderBottom = '1px solid #e2e8f0';
                    
                    // Apply color based on reason content
                    const reasonText = agent.reason ? agent.reason.toLowerCase() : '';
                    if (reasonText.includes('offline')) {
                        reasonCell.style.color = '#ef4444'; // Red for offline
                    } else if (reasonText.includes('uptime')) {
                        reasonCell.style.color = '#f59e0b'; // Orange for uptime issues
                    } else {
                        reasonCell.style.color = '#435364'; // Default color
                    }
                    
                    row.appendChild(reasonCell);
                    
                    tableBody.appendChild(row);
                });
                
                // Initialize DataTable if jQuery and DataTables are available
                if (typeof $ !== 'undefined' && $.fn.DataTable) {
                    $('#agents-attention-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 agents found",
                            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"
                        },
                        columnControl: ['order', ['search', 'spacer', 'orderAsc', 'orderDesc', 'orderClear']],
                        columnDefs: [
                            {
                                targets: 0, // Assignment column (index 0)
                            },
                            {
                                targets: 1, // Assignment column (index 1)
                                columnControl: [
                                    'order',
                                    ['searchList', 'spacer', 'orderAsc', 'orderDesc', 'orderClear']
                                ]
                            },
                            {
                                targets: 2, // Assignment column (index 2)
        //                        columnControl: [
        //                            'order',
        //                            ['searchList', 'spacer', 'orderAsc', 'orderDesc', 'orderClear']
        //                        ]
                            },
                        ],
                        responsive: true,
                        // 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
                hidePatchTableLoading();
                }
            } catch (error) {
                hidePatchTableLoading();
            }
        }
 
        // Function to show loading animation
        function showPatchLoading() {
            const loadingElement = document.getElementById('patch-loading');
            if (loadingElement) {
                loadingElement.classList.add('active');
            }
        }
        
        // Function to hide loading animation
        function hidePatchLoading() {
            const loadingElement = document.getElementById('patch-loading');
            if (loadingElement) {
                loadingElement.classList.remove('active');
            }
        }
        
        // Function to show table loading animation
        function showPatchTableLoading() {
            const loadingPatchTableElement = document.getElementById('patch-table-loading');
            if (loadingPatchTableElement) {
                loadingPatchTableElement.classList.add('active');
            }
        }
        
        // Function to hide table loading animation
        function hidePatchTableLoading() {
            const loadingPatchTableElement = document.getElementById('patch-table-loading');
            if (loadingPatchTableElement) {
                loadingPatchTableElement.classList.remove('active');
            }
        }
        
        // Function to fetch SLA data from the API
        function fetchPatchData() {
            // Show loading animation for all widgets
            showPatchLoading();
            showPatchTableLoading();
            
            // Start with base API URL
            let apiUrl = '{{ base_api_url }}' + '/api/v1/dashboard/endpoint-patching';
            
            // Check for group selection and append to path if not "All Companies"
            const groupSelect = document.getElementById('group-select');
            if (groupSelect && groupSelect.value) {
                const selectedGroup = groupSelect.options[groupSelect.selectedIndex];
                const groupCodename = selectedGroup.getAttribute('data-codename');
                if (groupCodename) {
                    // Append group ID to the URL path (not as a parameter)
                    apiUrl += `/${groupCodename}/`;
                } else {
                    // Ensure trailing slash for consistency
                    apiUrl += '/';
                }
            } else {
                // Ensure trailing slash for consistency
                apiUrl += '/';
            }
            
            // Make the API request with automatic token refresh on 401
            window.authenticatedFetch(apiUrl, {
                method: 'GET'
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json();
            })
            .then(data => {
                updatePatchWidgetData(data);
                // Hide loading animation
                hidePatchLoading();
            })
            .catch(error => {
                // Silently ignore stale requests (user switched companies before this completed)
                if (error.message === 'STALE_REQUEST' || error.name === 'AbortError') {
                    console.log('Patch data request cancelled - user switched companies');
                    return;
                }
                // Hide loading animation even on error
                hidePatchLoading();
                hidePatchTableLoading();
            });
        }

        document.addEventListener('DOMContentLoaded', function() {
            // Handle group selection
            // Listen for debounced group change event from sidebar
            document.addEventListener('groupChanged', function() {
                // Trigger a refresh of the widget with the new group selection
                fetchPatchData();
            });
            
            // Initial data fetch
            fetchPatchData();
        });
    </script>
    </div>
</div>