{% load static %}

<div class="widget sla-widget" id="priority-resolution-sla-widget" style="position: relative;">
    <div class="loading-overlay" id="resolution-sla-loading">
        <div class="spinner"></div>
    </div>
    <div class="section-title-wrapper">
        <h2 style="color: #435364; font-weight: 600;">Resolution SLA Summary</h2>
        {% if "feature-ai-jarvis" in user_feature_access and "feature-ai-jarvis" in company_feature_access %}
        <button class="ask-jarvis-btn" onclick="askJarvisAbout('Resolution SLA Summary')">
            🤖
            <span class="ask-jarvis-tooltip">Ask Jarvis</span>
        </button>
        {% endif %}
    </div>
        
    <div class="widget-content">
        <div class="priority-sla-table">
            <table class="data-table" style="width: 100%; border-collapse: collapse; font-size: 0.85rem; table-layout: fixed;">
                <thead>
                    <tr>
                        <th style="padding: 8px 4px; text-align: center; border-bottom: 1px solid #e2e8f0; background-color: #f8fafc; font-weight: 600; font-size: 0.8rem; color: #435364;">Priority</th>
                        <th style="padding: 8px 4px; text-align: center; border-bottom: 1px solid #e2e8f0; background-color: #f8fafc; font-weight: 600; font-size: 0.8rem; color: #435364;">Compliance<br>Rate</th>
                        <th style="padding: 8px 4px; text-align: center; border-bottom: 1px solid #e2e8f0; background-color: #f8fafc; font-weight: 600; font-size: 0.8rem; color: #435364;">Resolution<br>Target</th>
                    </tr>
                </thead>
                <tbody>
                    <tr id="resolution-p1-row">
                        <td style="padding: 8px 4px; text-align: left; border-bottom: 1px solid #e2e8f0; width: 33%; color: #435364;"><strong>Critical</strong></td>
                        <td id="p1-resolution-rate" style="padding: 8px 4px; text-align: center; border-bottom: 1px solid #e2e8f0; width: 33%; color: #435364; font-weight: 600;">
                            N/A
                        </td>
                        <td id="p1-resolution-target" style="padding: 8px 4px; text-align: center; border-bottom: 1px solid #e2e8f0; width: 33%; color: #00ADAD; font-weight: 600;">
                            N/A
                        </td>
                    </tr>
                    <tr id="resolution-p2-row">
                        <td style="padding: 8px 4px; text-align: left; border-bottom: 1px solid #e2e8f0; width: 33%; color: #435364;"><strong>Elevated</strong></td>
                        <td id="p2-resolution-rate" style="padding: 8px 4px; text-align: center; border-bottom: 1px solid #e2e8f0; width: 33%; color: #435364; font-weight: 600;">
                            N/A
                        </td>
                        <td id="p2-resolution-target" style="padding: 8px 4px; text-align: center; border-bottom: 1px solid #e2e8f0; width: 33%; color: #00ADAD; font-weight: 600;">
                            N/A
                        </td>
                    </tr>
                    <tr id="resolution-p3-row">
                        <td style="padding: 8px 4px; text-align: left; border-bottom: 1px solid #e2e8f0; width: 33%; color: #435364;"><strong>Important</strong></td>
                        <td id="p3-resolution-rate" style="padding: 8px 4px; text-align: center; border-bottom: 1px solid #e2e8f0; width: 33%; color: #435364; font-weight: 600;">
                            N/A
                        </td>
                        <td id="p3-resolution-target" style="padding: 8px 4px; text-align: center; border-bottom: 1px solid #e2e8f0; width: 33%; color: #00ADAD; font-weight: 600;">
                            N/A
                        </td>
                    </tr>
                    <tr id="resolution-p4-row">
                        <td style="padding: 8px 4px; text-align: left; border-bottom: 1px solid #e2e8f0; width: 33%; color: #435364;"><strong>Proactive</strong></td>
                        <td id="p4-resolution-rate" style="padding: 8px 4px; text-align: center; border-bottom: 1px solid #e2e8f0; width: 33%; color: #435364; font-weight: 600;">
                            N/A
                        </td>
                        <td id="p4-resolution-target" style="padding: 8px 4px; text-align: center; border-bottom: 1px solid #e2e8f0; width: 33%; color: #00ADAD; font-weight: 600;">
                            N/A
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div id="resolution-date-range" style="margin-top: 15px; text-align: center; color: #435364; font-size: 0.9rem;">
            <span>Reporting Period: No data available</span>
        </div>
        <div style="text-align: center; color: #435364; font-size: 0.9rem;">
            <span>Data updated hourly</span>
        </div>
    </div>
</div>

<script>
    // Function to update the Priority Resolution SLA widget with API data
    function updatePriorityResolutionSLAWidget(data) {
        try {
            // Update Critical (P1) row
            updateResolutionRow('p1', data.p1_closed_tickets, data.p1_sla_resolution_compliance_rate, data.p1_resolution_target_hours);
            
            // Update Elevated (P2) row
            updateResolutionRow('p2', data.p2_closed_tickets, data.p2_sla_resolution_compliance_rate, data.p2_resolution_target_hours);
            
            // Update Important (P3) row
            updateResolutionRow('p3', data.p3_closed_tickets, data.p3_sla_resolution_compliance_rate, data.p3_resolution_target_hours);
            
            // Update Proactive (P4) row
            updateResolutionRow('p4', data.p4_closed_tickets, data.p4_sla_resolution_compliance_rate, data.p4_resolution_target_hours);
            
            // Update date range
            const dateRangeElement = document.getElementById('resolution-date-range');
            if (dateRangeElement) {
                dateRangeElement.innerHTML = '<span>Reporting Period: ' + (data.date_range || 'No data available') + '</span>';
            }
            
            // Toggle loading overlay
            const loadingElement = document.getElementById('resolution-sla-loading');
            if (loadingElement) {
                loadingElement.classList.remove('active');
            }
        } catch (error) {
            const loadingElement = document.getElementById('resolution-sla-loading');
            if (loadingElement) {
                loadingElement.classList.remove('active');
            }
        }
    }
    
    // Helper function to update a priority resolution row
    function updateResolutionRow(priorityLevel, closedTickets, complianceRate, targetHours) {
        const rateElement = document.getElementById(priorityLevel + '-resolution-rate');
        const targetElement = document.getElementById(priorityLevel + '-resolution-target');
        
        if (rateElement && targetElement) {
            if (!closedTickets || closedTickets === 0) {
                rateElement.textContent = 'N/A';
                rateElement.style.color = '#435364';
                targetElement.textContent = 'N/A';
            } else {
                // Format and set compliance rate
                const formattedRate = (complianceRate || 0).toFixed(1) + '%';
                rateElement.textContent = formattedRate;
                
                // Set color based on compliance rate
                if (complianceRate >= 90) {
                    rateElement.style.color = '#00ADAD';
                } else if (complianceRate >= 80) {
                    rateElement.style.color = '#FFC107';
                } else {
                    rateElement.style.color = '#FF5252';
                }
                
                // Set target hours
                targetElement.textContent = (targetHours || 0) + 'h';
            }
        }
    }
</script>