{% extends 'layouts/base.html' %}
{% load i18n %}

{% block title %}{% trans "PX Command Center" %}{% endblock %}

{% block extra_css %}
<style>
    /* Al Hammadi Theme - Command Center Styles */
    .kpi-card {
        transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
        border-left: 4px solid var(--hh-primary);
    }
    .kpi-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--hh-shadow-lg);
    }
    .kpi-card.border-left-primary { border-left-color: var(--hh-primary); }
    .kpi-card.border-left-warning { border-left-color: var(--hh-warning); }
    .kpi-card.border-left-danger { border-left-color: var(--hh-accent); }
    .kpi-card.border-left-success { border-left-color: var(--hh-success); }
    .kpi-card.border-left-info { border-left-color: var(--hh-primary-light); }
    .kpi-card.border-left-secondary { border-left-color: var(--hh-secondary); }
    
    .kpi-value {
        font-size: 2rem;
        font-weight: 700;
    }
    .kpi-trend-up {
        color: var(--hh-accent);
    }
    .kpi-trend-down {
        color: var(--hh-success);
    }
    .chart-container {
        min-height: 350px;
    }
    .filter-panel {
        background: var(--hh-bg-light);
        border-radius: 8px;
        padding: 20px;
    }
    .filter-panel.collapsed .filter-content {
        display: none;
    }
    .loading-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255,255,255,0.9);
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 9999;
    }
    .loading-overlay.active {
        display: flex;
    }
    .loading-overlay .spinner-border {
        color: var(--hh-primary);
        width: 3rem;
        height: 3rem;
    }
    .physician-row:hover {
        background-color: var(--hh-primary-bg);
        cursor: pointer;
    }
    
    /* KPI Text Colors */
    .text-primary { color: var(--hh-primary) !important; }
    .text-warning { color: var(--hh-warning) !important; }
    .text-danger { color: var(--hh-accent) !important; }
    .text-success { color: var(--hh-success) !important; }
    .text-info { color: var(--hh-primary-light) !important; }
    .text-secondary { color: var(--hh-secondary) !important; }
    
    /* Card Header Styling */
    .card-header h6 {
        color: var(--hh-text-dark);
    }
    
    /* Table Styling */
    .table thead th {
        background: var(--hh-bg-light);
        color: var(--hh-text-dark);
        font-weight: 600;
        border-bottom: 2px solid var(--hh-border);
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Loading Overlay -->
    <div class="loading-overlay" id="loadingOverlay">
        <div class="text-center">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">{% trans "Loading..." %}</span>
            </div>
            <p class="mt-2">{% trans "Loading dashboard data..." %}</p>
        </div>
    </div>

    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0">{% trans "PX Command Center" %}</h1>
            <p class="text-muted">{% trans "Comprehensive Patient Experience Analytics Dashboard" %}</p>
        </div>
        <div class="d-flex gap-2">
            <!-- Export Buttons -->
            <div class="dropdown">
                <button class="btn btn-success dropdown-toggle" type="button" id="exportDropdown" data-bs-toggle="dropdown">
                    <i class="bi bi-download"></i> {% trans "Export" %}
                </button>
                <ul class="dropdown-menu" aria-labelledby="exportDropdown">
                    <li><a class="dropdown-item" href="#" onclick="exportDashboard('excel')">
                        <i class="bi bi-file-earmark-excel"></i> {% trans "Export to Excel" %}
                    </a></li>
                    <li><a class="dropdown-item" href="#" onclick="exportDashboard('pdf')">
                        <i class="bi bi-file-earmark-pdf"></i> {% trans "Export to PDF" %}
                    </a></li>
                </ul>
            </div>
            <button class="btn btn-primary" onclick="refreshDashboard()">
                <i class="bi bi-arrow-clockwise"></i> {% trans "Refresh" %}
            </button>
        </div>
    </div>

    <!-- Filter Panel -->
    <div class="card mb-4">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h6 class="mb-0">
                <i class="bi bi-funnel"></i> {% trans "Filters" %}
            </h6>
            <button class="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#filterContent">
                <i class="bi bi-chevron-down"></i>
            </button>
        </div>
        <div class="collapse show" id="filterContent">
            <div class="card-body filter-content">
                <form id="filterForm">
                    <div class="row g-3">
                        <!-- Date Range -->
                        <div class="col-md-3">
                            <label class="form-label">{% trans "Date Range" %}</label>
                            <select class="form-select" name="date_range" id="dateRange" onchange="handleDateRangeChange()">
                                <option value="7d" {% if filters.date_range == '7d' %}selected{% endif %}>{% trans "Last 7 Days" %}</option>
                                <option value="30d" {% if filters.date_range == '30d' %}selected{% endif %}>{% trans "Last 30 Days" %}</option>
                                <option value="90d" {% if filters.date_range == '90d' %}selected{% endif %}>{% trans "Last 90 Days" %}</option>
                                <option value="this_month" {% if filters.date_range == 'this_month' %}selected{% endif %}>{% trans "This Month" %}</option>
                                <option value="last_month" {% if filters.date_range == 'last_month' %}selected{% endif %}>{% trans "Last Month" %}</option>
                                <option value="quarter" {% if filters.date_range == 'quarter' %}selected{% endif %}>{% trans "This Quarter" %}</option>
                                <option value="year" {% if filters.date_range == 'year' %}selected{% endif %}>{% trans "This Year" %}</option>
                                <option value="custom" {% if filters.date_range == 'custom' %}selected{% endif %}>{% trans "Custom Range" %}</option>
                            </select>
                        </div>

                        <!-- Custom Date Range -->
                        <div class="col-md-3 d-none" id="customDateRange">
                            <label class="form-label">{% trans "Custom Range" %}</label>
                            <div class="input-group">
                                <input type="date" class="form-control" name="custom_start" id="customStart" value="{{ filters.custom_start|default:'' }}">
                                <span class="input-group-text">to</span>
                                <input type="date" class="form-control" name="custom_end" id="customEnd" value="{{ filters.custom_end|default:'' }}">
                            </div>
                        </div>

                        <!-- Hospital -->
                        <div class="col-md-3">
                            <label class="form-label">{% trans "Hospital" %}</label>
                            <select class="form-select" name="hospital" id="hospitalFilter" onchange="loadDepartments()">
                                <option value="">{% trans "All Hospitals" %}</option>
                                {% for hospital in hospitals %}
                                <option value="{{ hospital.id }}" {% if filters.hospital == hospital.id|stringformat:"s" %}selected{% endif %}>
                                    {{ hospital.name_en|default:hospital.name }}
                                </option>
                                {% endfor %}
                            </select>
                        </div>

                        <!-- Department -->
                        <div class="col-md-3">
                            <label class="form-label">{% trans "Department" %}</label>
                            <select class="form-select" name="department" id="departmentFilter">
                                <option value="">{% trans "All Departments" %}</option>
                                {% for department in departments %}
                                <option value="{{ department.id }}" {% if filters.department == department.id|stringformat:"s" %}selected{% endif %}>
                                    {{ department.name_en|default:department.name }}
                                </option>
                                {% endfor %}
                            </select>
                        </div>

                        <!-- KPI Category -->
                        <div class="col-md-3">
                            <label class="form-label">{% trans "KPI Category" %}</label>
                            <select class="form-select" name="kpi_category" id="kpiCategoryFilter">
                                <option value="">{% trans "All Categories" %}</option>
                                <option value="complaints">{% trans "Complaints" %}</option>
                                <option value="surveys">{% trans "Surveys" %}</option>
                                <option value="actions">{% trans "Actions" %}</option>
                                <option value="physicians">{% trans "Physicians" %}</option>
                            </select>
                        </div>

                        <!-- Apply/Reset Buttons -->
                        <div class="col-md-3 d-flex align-items-end">
                            <button type="submit" class="btn btn-primary me-2">
                                <i class="bi bi-check-circle"></i> {% trans "Apply Filters" %}
                            </button>
                            <button type="button" class="btn btn-outline-secondary" onclick="resetFilters()">
                                <i class="bi bi-x-circle"></i> {% trans "Reset" %}
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- KPI Cards Section -->
    <div class="row mb-4" id="kpiSection">
        <!-- Complaints KPIs -->
        <div class="col-md-3">
            <div class="card kpi-card border-left-primary">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                {% trans "Total Complaints" %}
                            </div>
                            <div class="kpi-value text-primary" id="totalComplaints">0</div>
                        </div>
                        <div class="text-end">
                            <small class="text-muted" id="complaintsTrend">
                                {% if kpis.complaints_trend.percentage_change > 0 %}
                                    <span class="kpi-trend-up"><i class="bi bi-arrow-up"></i> {{ kpis.complaints_trend.percentage_change|floatformat:1 }}%</span>
                                {% elif kpis.complaints_trend.percentage_change < 0 %}
                                    <span class="kpi-trend-down"><i class="bi bi-arrow-down"></i> {{ kpis.complaints_trend.percentage_change|floatformat:1 }}%</span>
                                {% else %}
                                    <span class="text-muted"><i class="bi bi-dash"></i> 0%</span>
                                {% endif %}
                            </small>
                            <div class="text-muted small">{% trans "vs last period" %}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="card kpi-card border-left-warning">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                {% trans "Open Complaints" %}
                            </div>
                            <div class="kpi-value text-warning" id="openComplaints">0</div>
                        </div>
                        <div class="text-end">
                            <i class="bi bi-exclamation-triangle text-warning fs-3"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="card kpi-card border-left-danger">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <div class="text-xs font-weight-bold text-danger text-uppercase mb-1">
                                {% trans "Overdue Complaints" %}
                            </div>
                            <div class="kpi-value text-danger" id="overdueComplaints">0</div>
                        </div>
                        <div class="text-end">
                            <i class="bi bi-clock text-danger fs-3"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="card kpi-card border-left-success">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                {% trans "Resolved Complaints" %}
                            </div>
                            <div class="kpi-value text-success" id="resolvedComplaints">0</div>
                        </div>
                        <div class="text-end">
                            <i class="bi bi-check-circle text-success fs-3"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Actions KPIs -->
        <div class="col-md-3">
            <div class="card kpi-card border-left-info">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                                {% trans "Total Actions" %}
                            </div>
                            <div class="kpi-value text-info" id="totalActions">0</div>
                        </div>
                        <div class="text-end">
                            <i class="bi bi-list-task text-info fs-3"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="card kpi-card border-left-secondary">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <div class="text-xs font-weight-bold text-secondary text-uppercase mb-1">
                                {% trans "Overdue Actions" %}
                            </div>
                            <div class="kpi-value text-secondary" id="overdueActions">0</div>
                        </div>
                        <div class="text-end">
                            <i class="bi bi-clock-history text-secondary fs-3"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Surveys KPIs -->
        <div class="col-md-3">
            <div class="card kpi-card border-left-success">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                {% trans "Avg Survey Score" %}
                            </div>
                            <div class="kpi-value text-success" id="avgSurveyScore">0.0</div>
                        </div>
                        <div class="text-end">
                            <i class="bi bi-star text-success fs-3"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="card kpi-card border-left-danger">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <div class="text-xs font-weight-bold text-danger text-uppercase mb-1">
                                {% trans "Negative Surveys" %}
                            </div>
                            <div class="kpi-value text-danger" id="negativeSurveys">0</div>
                        </div>
                        <div class="text-end">
                            <i class="bi bi-emoji-frown text-danger fs-3"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Charts Row 1 -->
    <div class="row mb-4">
        <!-- Complaints Trend Chart -->
        <div class="col-lg-6">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h6 class="m-0 font-weight-bold">{% trans "Complaints Trend" %}</h6>
                    <div class="btn-group btn-group-sm">
                        <button type="button" class="btn btn-outline-secondary active">Line</button>
                        <button type="button" class="btn btn-outline-secondary">Area</button>
                    </div>
                </div>
                <div class="card-body">
                    <div class="chart-container" id="complaintsTrendChart"></div>
                </div>
            </div>
        </div>

        <!-- Complaints by Category Chart -->
        <div class="col-lg-6">
            <div class="card">
                <div class="card-header">
                    <h6 class="m-0 font-weight-bold">{% trans "Complaints by Category" %}</h6>
                </div>
                <div class="card-body">
                    <div class="chart-container" id="complaintsByCategoryChart"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Charts Row 2 -->
    <div class="row mb-4">
        <!-- Survey Satisfaction Trend -->
        <div class="col-lg-6">
            <div class="card">
                <div class="card-header">
                    <h6 class="m-0 font-weight-bold">{% trans "Survey Satisfaction Trend" %}</h6>
                </div>
                <div class="card-body">
                    <div class="chart-container" id="surveySatisfactionChart"></div>
                </div>
            </div>
        </div>

        <!-- Survey Distribution -->
        <div class="col-lg-6">
            <div class="card">
                <div class="card-header">
                    <h6 class="m-0 font-weight-bold">{% trans "Survey Distribution" %}</h6>
                </div>
                <div class="card-body">
                    <div class="chart-container" id="surveyDistributionChart"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Charts Row 3 -->
    <div class="row mb-4">
        <!-- Department Performance -->
        <div class="col-lg-6">
            <div class="card">
                <div class="card-header">
                    <h6 class="m-0 font-weight-bold">{% trans "Department Performance" %}</h6>
                </div>
                <div class="card-body">
                    <div class="chart-container" id="departmentPerformanceChart"></div>
                </div>
            </div>
        </div>

        <!-- Physician Leaderboard -->
        <div class="col-lg-6">
            <div class="card">
                <div class="card-header">
                    <h6 class="m-0 font-weight-bold">{% trans "Physician Leaderboard" %}</h6>
                </div>
                <div class="card-body">
                    <div class="chart-container" id="physicianLeaderboardChart"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Tables Section -->
    <div class="row mb-4">
        <!-- Overdue Complaints -->
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h6 class="m-0 font-weight-bold text-danger">
                        <i class="bi bi-exclamation-circle"></i> {% trans "Overdue Complaints" %}
                    </h6>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover" id="overdueComplaintsTable">
                            <thead>
                                <tr>
                                    <th>{% trans "ID" %}</th>
                                    <th>{% trans "Title" %}</th>
                                    <th>{% trans "Patient" %}</th>
                                    <th>{% trans "Severity" %}</th>
                                    <th>{% trans "Hospital" %}</th>
                                    <th>{% trans "Department" %}</th>
                                    <th>{% trans "Due Date" %}</th>
                                    <th>{% trans "Actions" %}</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- Data will be loaded via JavaScript -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Physician Details Table -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h6 class="m-0 font-weight-bold">
                        <i class="bi bi-trophy"></i> {% trans "Top Performing Physicians" %}
                    </h6>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover" id="physiciansTable">
                            <thead>
                                <tr>
                                    <th>{% trans "Rank" %}</th>
                                    <th>{% trans "Physician" %}</th>
                                    <th>{% trans "Specialization" %}</th>
                                    <th>{% trans "Department" %}</th>
                                    <th>{% trans "Rating" %}</th>
                                    <th>{% trans "Surveys" %}</th>
                                    <th>{% trans "Positive" %}</th>
                                    <th>{% trans "Neutral" %}</th>
                                    <th>{% trans "Negative" %}</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- Data will be loaded via JavaScript -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- JavaScript -->
<script>
// Global variables
let charts = {};
let currentFilters = {
    date_range: '30d',
    hospital: '',
    department: '',
    kpi_category: '',
    custom_start: '',
    custom_end: ''
};

// Initialize dashboard
document.addEventListener('DOMContentLoaded', function() {
    // Load initial data
    loadDashboardData();
    
    // Handle filter form submission
    document.getElementById('filterForm').addEventListener('submit', function(e) {
        e.preventDefault();
        updateFilters();
        loadDashboardData();
    });
});

function handleDateRangeChange() {
    const dateRange = document.getElementById('dateRange').value;
    const customDateRange = document.getElementById('customDateRange');
    
    if (dateRange === 'custom') {
        customDateRange.classList.remove('d-none');
    } else {
        customDateRange.classList.add('d-none');
    }
}

function updateFilters() {
    currentFilters.date_range = document.getElementById('dateRange').value;
    currentFilters.hospital = document.getElementById('hospitalFilter').value;
    currentFilters.department = document.getElementById('departmentFilter').value;
    currentFilters.kpi_category = document.getElementById('kpiCategoryFilter').value;
    currentFilters.custom_start = document.getElementById('customStart').value;
    currentFilters.custom_end = document.getElementById('customEnd').value;
}

function loadDashboardData() {
    showLoading();
    
    // Fetch data via AJAX
    fetch(`/analytics/api/command-center/?${new URLSearchParams(currentFilters)}`)
        .then(response => response.json())
        .then(data => {
            updateKPIs(data.kpis);
            updateCharts(data.charts);
            updateTables(data.tables);
        })
        .catch(error => {
            console.error('Error loading dashboard data:', error);
            showError();
        })
        .finally(() => {
            hideLoading();
        });
}

function updateKPIs(kpis) {
    document.getElementById('totalComplaints').textContent = kpis.total_complaints || 0;
    document.getElementById('openComplaints').textContent = kpis.open_complaints || 0;
    document.getElementById('overdueComplaints').textContent = kpis.overdue_complaints || 0;
    document.getElementById('resolvedComplaints').textContent = kpis.resolved_complaints || 0;
    document.getElementById('totalActions').textContent = kpis.total_actions || 0;
    document.getElementById('overdueActions').textContent = kpis.overdue_actions || 0;
    document.getElementById('avgSurveyScore').textContent = (kpis.avg_survey_score || 0).toFixed(2);
    document.getElementById('negativeSurveys').textContent = kpis.negative_surveys || 0;
    
    // Update trend indicator
    if (kpis.complaints_trend) {
        const trendElement = document.getElementById('complaintsTrend');
        const change = kpis.complaints_trend.percentage_change;
        if (change > 0) {
            trendElement.innerHTML = `<span class="kpi-trend-up"><i class="bi bi-arrow-up"></i> ${change.toFixed(1)}%</span>`;
        } else if (change < 0) {
            trendElement.innerHTML = `<span class="kpi-trend-down"><i class="bi bi-arrow-down"></i> ${change.toFixed(1)}%</span>`;
        } else {
            trendElement.innerHTML = `<span class="text-muted"><i class="bi bi-dash"></i> 0%</span>`;
        }
    }
}

function updateCharts(chartData) {
    // Complaints Trend Chart
    if (chartData.complaints_trend) {
        renderChart('complaintsTrendChart', chartData.complaints_trend, 'line');
    }
    
    // Complaints by Category Chart
    if (chartData.complaints_by_category) {
        renderChart('complaintsByCategoryChart', chartData.complaints_by_category, 'donut');
    }
    
    // Survey Satisfaction Trend
    if (chartData.survey_satisfaction_trend) {
        renderChart('surveySatisfactionChart', chartData.survey_satisfaction_trend, 'line');
    }
    
    // Survey Distribution
    if (chartData.survey_distribution) {
        renderChart('surveyDistributionChart', chartData.survey_distribution, 'donut');
    }
    
    // Department Performance
    if (chartData.department_performance) {
        renderChart('departmentPerformanceChart', chartData.department_performance, 'bar');
    }
    
    // Physician Leaderboard
    if (chartData.physician_leaderboard) {
        renderChart('physicianLeaderboardChart', chartData.physician_leaderboard, 'bar');
    }
}

function renderChart(elementId, chartData, chartType) {
    const element = document.getElementById(elementId);
    if (!element) return;
    
    // Destroy existing chart if any
    if (charts[elementId]) {
        charts[elementId].destroy();
    }
    
    // Al Hammadi Theme Colors for Charts
    const hhChartColors = ['#0097a7', '#00897b', '#f9a825', '#c62828', '#1a237e', '#4dd0e1'];
    
    const options = {
        series: chartData.series || [],
        chart: {
            type: chartType,
            height: 350,
            toolbar: {
                show: true
            },
            fontFamily: 'Open Sans, Cairo, sans-serif'
        },
        labels: chartData.labels || [],
        colors: hhChartColors,
        dataLabels: {
            enabled: chartType === 'donut'
        },
        legend: {
            position: chartType === 'donut' ? 'bottom' : 'top'
        },
        xaxis: {
            categories: chartData.labels
        },
        yaxis: {
            min: 0,
            forceNiceScale: true
        },
        grid: {
            borderColor: '#e7e7e7',
            strokeDashArray: 5
        },
        tooltip: {
            theme: 'light'
        }
    };
    
    if (chartType === 'line') {
        options.stroke = {
            curve: 'smooth',
            width: 3
        };
        options.fill = {
            type: 'solid',
            gradient: {
                shadeIntensity: 1,
                opacityFrom: 0.4,
                opacityTo: 0.1,
            }
        };
    }
    
    charts[elementId] = new ApexCharts(element, options);
    charts[elementId].render();
}

function updateTables(tableData) {
    // Update Overdue Complaints Table
    if (tableData.overdue_complaints) {
        const tbody = document.querySelector('#overdueComplaintsTable tbody');
        tbody.innerHTML = '';
        
        if (tableData.overdue_complaints.length === 0) {
            tbody.innerHTML = '<tr><td colspan="8" class="text-center text-muted">No overdue complaints</td></tr>';
            return;
        }
        
        tableData.overdue_complaints.forEach(complaint => {
            const row = document.createElement('tr');
            row.innerHTML = `
                <td><small class="text-muted">${complaint.id.substring(0, 8)}</small></td>
                <td>${complaint.title.substring(0, 50)}${complaint.title.length > 50 ? '...' : ''}</td>
                <td>${complaint.patient_name || 'N/A'}</td>
                <td><span class="badge bg-${getSeverityBadgeClass(complaint.severity)}">${complaint.severity}</span></td>
                <td>${complaint.hospital || 'N/A'}</td>
                <td>${complaint.department || 'N/A'}</td>
                <td class="text-danger">${complaint.due_at}</td>
                <td>
                    <a href="/complaints/${complaint.id}/" class="btn btn-sm btn-primary">
                        <i class="bi bi-eye"></i>
                    </a>
                </td>
            `;
            tbody.appendChild(row);
        });
    }
    
    // Update Physicians Table
    if (tableData.physician_leaderboard) {
        const tbody = document.querySelector('#physiciansTable tbody');
        tbody.innerHTML = '';
        
        if (tableData.physician_leaderboard.length === 0) {
            tbody.innerHTML = '<tr><td colspan="9" class="text-center text-muted">No physician data available</td></tr>';
            return;
        }
        
        tableData.physician_leaderboard.forEach((physician, index) => {
            const row = document.createElement('tr');
            row.className = 'physician-row';
            row.onclick = () => window.location.href = `/physicians/${physician.physician_id}/`;
            row.innerHTML = `
                <td><span class="badge bg-primary">${index + 1}</span></td>
                <td><strong>${physician.name}</strong></td>
                <td>${physician.specialization || 'N/A'}</td>
                <td>${physician.department || 'N/A'}</td>
                <td><span class="badge bg-success">${physician.rating.toFixed(2)}</span></td>
                <td>${physician.surveys}</td>
                <td class="text-success">${physician.positive}</td>
                <td class="text-secondary">${physician.neutral}</td>
                <td class="text-danger">${physician.negative}</td>
            `;
            tbody.appendChild(row);
        });
    }
}

function getSeverityBadgeClass(severity) {
    const severityMap = {
        'low': 'secondary',
        'medium': 'warning',
        'high': 'danger',
        'critical': 'dark'
    };
    return severityMap[severity] || 'secondary';
}

function showLoading() {
    document.getElementById('loadingOverlay').classList.add('active');
}

function hideLoading() {
    document.getElementById('loadingOverlay').classList.remove('active');
}

function showError() {
    alert('Error loading dashboard data. Please try again.');
}

function refreshDashboard() {
    loadDashboardData();
}

function resetFilters() {
    document.getElementById('dateRange').value = '30d';
    document.getElementById('hospitalFilter').value = '';
    document.getElementById('departmentFilter').value = '';
    document.getElementById('kpiCategoryFilter').value = '';
    document.getElementById('customStart').value = '';
    document.getElementById('customEnd').value = '';
    document.getElementById('customDateRange').classList.add('d-none');
    
    updateFilters();
    loadDashboardData();
}

function exportDashboard(format) {
    showLoading();
    
    fetch(`/analytics/api/command-center/export/${format}/?${new URLSearchParams(currentFilters)}`)
        .then(response => {
            if (response.ok) {
                return response.blob();
            }
            throw new Error('Export failed');
        })
        .then(blob => {
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = `px360_dashboard_${new Date().toISOString().slice(0,10)}.${format === 'excel' ? 'xlsx' : 'pdf'}`;
            document.body.appendChild(a);
            a.click();
            window.URL.revokeObjectURL(url);
            a.remove();
        })
        .catch(error => {
            console.error('Export error:', error);
            alert('Error exporting dashboard. Please try again.');
        })
        .finally(() => {
            hideLoading();
        });
}
</script>
{% endblock %}