{% extends 'base.html' %}
{% load static %}
{% block title %}Datapath | Dashboard{% endblock %}

{% block content %}
    {{ base_api_url|json_script:"base_api_url" }}
    <link rel="stylesheet" href="https://cdn.datatables.net/columncontrol/1.1.0/css/columnControl.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/3.0.6/css/responsive.dataTables.min.css">
    <section class="portal-preview">
        <div class="section-header-banner">
            <h2 class="dashboard-title">Systems Health Dashboard</h1>
        </div>
        <div class="date-selector" style="display: inline-flex; gap: 10px; margin-bottom: 15px; padding-top: 3rem;">
            <div style="flex: 1;">
                <label for="startdate" style="display: block; margin-bottom: 5px; font-weight: 600; color: #435364;">Start Date:</label>
                <input type="date" id="startdate" name="startdate"
                        style="width: 90%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-family: 'Quicksand', sans-serif;">
            </div>
            <div style="flex: 1;">
                <label for="enddate" style="display: block; margin-bottom: 5px; font-weight: 600; color: #435364;">End Date:</label>
                <input type="date" id="enddate" name="enddate"
                        style="width: 90%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-family: 'Quicksand', sans-serif;">
            </div>
        </div>

        <div class="dashboard-widgets" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 50px; margin-top: 30px;">
            {# Include the Dashboard widgets #}
            {% include "dashboard/widgets/overall_sla_widget.html" %}
            {% include "dashboard/widgets/priority_response_sla_widget.html" %}
            {% include "dashboard/widgets/priority_resolution_sla_widget.html" %}
            {% include "dashboard/widgets/ticket_stats_widget.html" %}
            {% include "dashboard/widgets/patching_status_widget.html" %}
            {% include "dashboard/widgets/endpoint_security_widget.html" %}
            {% include "dashboard/widgets/email_security_widget.html" %}
            {% include "dashboard/widgets/simplesat_widget.html" %}
            {% include "dashboard/widgets/sat_awareness_widget.html" %}
            {% include "dashboard/widgets/sat_learners_widget.html" %}
        </div>
        {% include "dashboard/table-widgets/company_overview_table.html" %}
        <div class="dashboard-tables" style="gap: 50px; margin-top: 30px;">
            {% include "dashboard/table-widgets/sat_learners_table.html" %}
            {% include "dashboard/table-widgets/patching_status_table.html" %}
            {% include "dashboard/table-widgets/simplesat_table.html" %}
        </div>
    </section>
    <script>
        // Function to toggle tooltip visibility
        function toggleTooltip(element) {
            const tooltip = element.nextElementSibling;
            
            // Get computed style to check actual display value
            const computedStyle = window.getComputedStyle(tooltip);
            const isVisible = computedStyle.display !== 'none';
            
            // Close all other tooltips first
            closeAllTooltips(tooltip);
            
            if (!isVisible) {
                // First set default position to ensure proper measurement
                tooltip.style.left = '100%';
                tooltip.style.right = 'auto';
                
                // Show tooltip
                tooltip.style.display = 'block';
                
                // Check if tooltip would overflow the right edge of the window
                const elementRect = element.getBoundingClientRect();
                const tooltipRect = tooltip.getBoundingClientRect();
                const windowWidth = window.innerWidth;
                
                // Calculate if the tooltip would overflow
                const wouldOverflow = elementRect.right + tooltipRect.width > windowWidth;
                
                if (wouldOverflow) {
                    // Position tooltip to the left of the icon
                    tooltip.style.left = 'auto';
                    tooltip.style.right = '100%';
                } else {
                    // Default position (right side)
                    tooltip.style.left = '100%';
                    tooltip.style.right = 'auto';
                }
                
                // Close tooltip when clicking outside
                document.addEventListener('click', closeTooltipOnClickOutside);
            } else {
                // Hide tooltip
                tooltip.style.display = 'none';
                document.removeEventListener('click', closeTooltipOnClickOutside);
            }
            
            // Prevent the click from propagating to the document
            event.stopPropagation();
        }
        
        // Function to close all tooltips except the current one
        function closeAllTooltips(currentTooltip = null) {
            const tooltips = document.querySelectorAll('.tooltip-box');
            tooltips.forEach(tooltip => {
                if (tooltip !== currentTooltip && tooltip.style.display === 'block') {
                    tooltip.style.display = 'none';
                }
            });
        }
        
        // Function to close tooltip when clicking outside
        function closeTooltipOnClickOutside(event) {
            const tooltips = document.querySelectorAll('.tooltip-box');
            tooltips.forEach(tooltip => {
                if (tooltip.style.display === 'block' && !tooltip.contains(event.target) && !event.target.classList.contains('value')) {
                    tooltip.style.display = 'none';
                    document.removeEventListener('click', closeTooltipOnClickOutside);
                }
            });
        }
    
    </script>
    <script src="https://cdn.datatables.net/columncontrol/1.1.0/js/dataTables.columnControl.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/3.0.6/js/dataTables.responsive.min.js"></script>
{% endblock %}