{% load static %}

<div class="widget ticket-stats-widget" id="ticket-stats-widget" style="position: relative;">
    <div class="loading-overlay" id="ticket-stats-loading">
        <div class="spinner"></div>
    </div>
    <div class="section-title-wrapper">
        <h2 style="color: #435364; font-weight: 600;">Ticket Statistics</h2>
        {% if "feature-ai-jarvis" in user_feature_access and "feature-ai-jarvis" in company_feature_access %}
        <button class="ask-jarvis-btn" onclick="askJarvisAbout('Ticket Statistics')">
            🤖
            <span class="ask-jarvis-tooltip">Ask Jarvis</span>
        </button>
        {% endif %}
    </div>
        
    <div class="widget-content">
        <div class="summary-numbers" style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
            <div class="number-block" style="grid-column: span 2; background-color: #03FB8D; border-radius: 10px; padding: 1rem; color: #1B545F;">
                <div class="tooltip-icon">
                    <span id="total-tickets-value-tooltip" title="Total Tickets Tooltip" style="text-align: right;" onclick="toggleTooltip(this)">ⓘ</span>
                    <div class="tooltip-box">The sum of all tickets closed within the selected time range and all open tickets, regardless of when they were opened.</div>
                </div>
                <span id="total-tickets-value" class="value" style="font-size: 1.8rem; font-weight: 700;">N/A</span>
                <span class="label">Total Tickets</span>
            </div>
            <div class="number-block" style="grid-column: span 1; background-color: #00ADAD; border-radius: 10px; padding: 1rem; color: #fff;">
                <div class="tooltip-icon">
                    <span id="open-tickets-value-tooltip" title="Open Tickets Tooltip" style="text-align: right;" onclick="toggleTooltip(this)">ⓘ</span>
                    <div class="tooltip-box">The number of all open tickets, regardless of when they were opened.</div>
                </div>
                <span id="open-tickets-value" class="value" style="font-size: 1.8rem; font-weight: 700;">N/A</span>
                <span class="label">Open Tickets</span>
            </div>
            <div class="number-block" style="grid-column: span 1; background-color: #435364; border-radius: 10px; padding: 1rem; color: #fff;">
                <div class="tooltip-icon">
                    <span id="closed-tickets-value-tooltip" title="Closed Tickets Tooltip" style="text-align: right;" onclick="toggleTooltip(this)">ⓘ</span>
                    <div class="tooltip-box">The number of all tickets that were closed within the dates selected.</div>
                </div>
                <span id="closed-tickets-value" class="value" style="font-size: 1.8rem; font-weight: 700;">N/A</span>
                <span class="label">Closed Tickets</span>
            </div>
        </div>

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

<style>
    .summary-numbers {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
    }
    
    .number-block {
        text-align: center;
        flex: 1;
        padding: 10px;
    }
    
    .number-block .value {
        display: block;
        font-size: 1.8rem;
        font-weight: 700;
        margin-bottom: 5px;
    }
</style>

<script>
    // This function will be called from overall_sla_widget.html
    function updateTicketStatsWidget(data) {
        try {
            // Update total tickets
            const totalTicketsElement = document.getElementById('total-tickets-value');
            if (totalTicketsElement) {
                totalTicketsElement.textContent = data.total_tickets || 'N/A';
            }
            
            // Update open tickets
            const openTicketsElement = document.getElementById('open-tickets-value');
            if (openTicketsElement) {
                openTicketsElement.textContent = data.open_tickets || 'N/A';
            }
            
            // Update closed tickets
            const closedTicketsElement = document.getElementById('closed-tickets-value');
            if (closedTicketsElement) {
                closedTicketsElement.textContent = data.closed_tickets || 'N/A';
            }
            
            // Update date range
            const dateRangeElement = document.getElementById('ticket-stats-date-range');
            if (dateRangeElement) {
                dateRangeElement.innerHTML = '<span>Reporting Period: ' + (data.date_range || 'No data available') + '</span>';
            }
            
            // Hide loading overlay
            const loadingElement = document.getElementById('ticket-stats-loading');
            if (loadingElement) {
                loadingElement.classList.remove('active');
            }
        } catch (error) {
            console.error('Error updating Ticket Stats widget:', error);
            const loadingElement = document.getElementById('ticket-stats-loading');
            if (loadingElement) {
                loadingElement.classList.remove('active');
            }
        }
    }
</script>