{% extends 'hr/base.html' %}
{% load static %}
{% load i18n %}

{% block title %}{% trans "Employee Lab Tests Dashboard" %}{% endblock %}

{% block sidebar.employee_lab_tests %} class="active" {% endblock %}

{% block header.add_script %}
<style>
    .stat-card {
        background: white;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 20px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .stat-card h5 {
        color: #009A6E;
        margin-bottom: 15px;
    }
    .stat-value {
        font-size: 2.5rem;
        font-weight: bold;
        color: #009A6E;
    }
    .stat-label {
        color: #6c757d;
        font-size: 0.9rem;
    }
    .health-badge {
        padding: 5px 15px;
        border-radius: 20px;
        font-size: 0.85rem;
        font-weight: bold;
    }
    .badge-excellent { background: #d4edda; color: #155724; }
    .badge-good { background: #d1ecf1; color: #0c5460; }
    .badge-fair { background: #fff3cd; color: #856404; }
    .badge-poor { background: #f8d7da; color: #721c24; }
    .employee-row {
        border-bottom: 1px solid #e0e0e0;
        padding: 15px;
        transition: background-color 0.2s;
    }
    .employee-row:hover {
        background-color: #f8f9fa;
    }
    .progress-mini {
        height: 8px;
        border-radius: 4px;
    }
    .index-card {
        border-left: 4px solid #009A6E;
        padding: 15px;
        margin-bottom: 15px;
        background: #f8f9fa;
    }
    .risk-summary-card {
        padding: 15px;
        margin-bottom: 15px;
        border-radius: 8px;
    }
    .risk-low { background: #d4edda; border-left: 4px solid #28a745; }
    .risk-medium { background: #fff3cd; border-left: 4px solid #ffc107; }
    .risk-high { background: #f8d7da; border-left: 4px solid #dc3545; }
    .concerning-biomarker {
        padding: 10px;
        margin-bottom: 10px;
        background: #fff3cd;
        border-left: 4px solid #ffc107;
        border-radius: 4px;
    }
</style>
{% endblock %}

{% block content %}
<div class="content container-fluid">
    <div class="page-header">
        <div class="row">
            <div class="col-sm-12">
                <h3 class="page-title">{% trans "Employee Lab Tests Dashboard" %}</h3>
                <ul class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{% url 'panel-hr-employee-lab-tests' %}">{% trans "HR Dashboard" %}</a></li>
                    <li class="breadcrumb-item active">{% trans "Employee Lab Tests" %}</li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Company Selector -->
    {% if company_groups.exists %}
    <div class="row mb-3">
        <div class="col-md-12">
            <div class="stat-card">
                <form method="GET" class="form-inline">
                    <label for="company_id" class="mr-2">{% trans "Select Company:" %}</label>
                    <select name="company_id" id="company_id" class="form-control mr-2" onchange="this.form.submit()">
                        <option value="">{% trans "All Companies" %}</option>
                        {% for company in company_groups %}
                        <option value="{{ company.id }}" {% if selected_company and selected_company.id == company.id %}selected{% endif %}>
                            {{ company.name|default:company.group_id }}
                        </option>
                        {% endfor %}
                    </select>
                </form>
            </div>
        </div>
    </div>
    {% endif %}

    {% if selected_company %}
    <!-- Overview Statistics -->
    <div class="row">
        <div class="col-md-3">
            <div class="stat-card text-center">
                <h5>{% trans "Total Employees" %}</h5>
                <div class="stat-value">{{ total_employees }}</div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stat-card text-center">
                <h5>{% trans "Employees with Tests" %}</h5>
                <div class="stat-value">{{ employees_with_tests }}</div>
                <div class="stat-label">
                    {% if total_employees > 0 %}
                    ({{ employees_with_tests|floatformat:0 }}% {% trans "coverage" %})
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stat-card text-center">
                <h5>{% trans "Total Lab Tests" %}</h5>
                <div class="stat-value">{{ total_lab_tests }}</div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stat-card text-center">
                <h5>{% trans "Average Health Score" %}</h5>
                <div class="stat-value">
                    {% if aggregate_stats.avg_overall_score %}
                    {{ aggregate_stats.avg_overall_score }}
                    {% else %}
                    -
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    {% if aggregate_stats.avg_overall_score %}
    <!-- Health Distribution -->
    <div class="row">
        <div class="col-md-12">
            <div class="stat-card">
                <h5>{% trans "Health Distribution" %}</h5>
                <div class="row">
                    <div class="col-md-3 text-center">
                        <span class="health-badge badge-excellent">{% trans "Excellent" %} (90-100)</span>
                        <div class="stat-value" style="font-size: 2rem;">{{ aggregate_stats.health_distribution.excellent }}</div>
                    </div>
                    <div class="col-md-3 text-center">
                        <span class="health-badge badge-good">{% trans "Good" %} (70-89)</span>
                        <div class="stat-value" style="font-size: 2rem;">{{ aggregate_stats.health_distribution.good }}</div>
                    </div>
                    <div class="col-md-3 text-center">
                        <span class="health-badge badge-fair">{% trans "Fair" %} (50-69)</span>
                        <div class="stat-value" style="font-size: 2rem;">{{ aggregate_stats.health_distribution.fair }}</div>
                    </div>
                    <div class="col-md-3 text-center">
                        <span class="health-badge badge-poor">{% trans "Poor" %} (&lt;50)</span>
                        <div class="stat-value" style="font-size: 2rem;">{{ aggregate_stats.health_distribution.poor }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Index Averages -->
    <div class="row">
        <div class="col-md-12">
            <div class="stat-card">
                <h5>{% trans "Average Health Indices" %}</h5>
                <div class="row">
                    {% for index_name, index_data in aggregate_stats.index_averages.items %}
                    <div class="col-md-4 mb-3">
                        <div class="index-card">
                            <h6>{{ index_name }}</h6>
                            <div class="stat-value" style="font-size: 1.8rem;">{{ index_data.average|floatformat:0 }}</div>
                            <div class="stat-label">
                                {% trans "Range" %}: {{ index_data.min|floatformat:0 }} - {{ index_data.max|floatformat:0 }}
                                ({{ index_data.count }} {% trans "tests" %})
                            </div>
                            <div class="progress progress-mini mt-2">
                                <div class="progress-bar" role="progressbar" 
                                     style="width: {{ index_data.average }}%; background-color: #009A6E;"
                                     aria-valuenow="{{ index_data.average }}" aria-valuemin="0" aria-valuemax="100">
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>

    <!-- Risk Summary -->
    <div class="row">
        <div class="col-md-12">
            <div class="stat-card">
                <h5>{% trans "Health Risk Summary" %}</h5>
                <div class="row">
                    <div class="col-md-4">
                        <div class="risk-summary-card risk-low">
                            <h6>{% trans "CVD Risk" %}</h6>
                            <div>{% trans "Low" %}: {{ aggregate_stats.risk_summary.cvd.low }}</div>
                            <div>{% trans "Medium" %}: {{ aggregate_stats.risk_summary.cvd.medium }}</div>
                            <div>{% trans "High" %}: {{ aggregate_stats.risk_summary.cvd.high }}</div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="risk-summary-card risk-medium">
                            <h6>{% trans "Diabetes Risk" %}</h6>
                            <div>{% trans "Low" %}: {{ aggregate_stats.risk_summary.diabetes.low }}</div>
                            <div>{% trans "Medium" %}: {{ aggregate_stats.risk_summary.diabetes.medium }}</div>
                            <div>{% trans "High" %}: {{ aggregate_stats.risk_summary.diabetes.high }}</div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="risk-summary-card risk-high">
                            <h6>{% trans "Liver Risk" %}</h6>
                            <div>{% trans "Low" %}: {{ aggregate_stats.risk_summary.liver.low }}</div>
                            <div>{% trans "Medium" %}: {{ aggregate_stats.risk_summary.liver.medium }}</div>
                            <div>{% trans "High" %}: {{ aggregate_stats.risk_summary.liver.high }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Concerning Biomarkers -->
    {% if aggregate_stats.concerning_biomarkers %}
    <div class="row">
        <div class="col-md-12">
            <div class="stat-card">
                <h5>{% trans "Most Concerning Biomarkers" %}</h5>
                <p class="text-muted">{% trans "Biomarkers with >30% of employees needing attention" %}</p>
                {% for biomarker in aggregate_stats.concerning_biomarkers %}
                <div class="concerning-biomarker">
                    <strong>{{ biomarker.name }}</strong>
                    <span class="float-right">
                        {{ biomarker.concerning_percentage|floatformat:1 }}% {% trans "concerning" %}
                        {% if biomarker.average_score %}
                        ({% trans "Avg Score" %}: {{ biomarker.average_score|floatformat:0 }})
                        {% endif %}
                    </span>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
    {% endif %}

    <!-- Employee List -->
    <div class="row">
        <div class="col-md-12">
            <div class="stat-card">
                <h5>{% trans "Employee Health Status" %}</h5>
                <p class="text-muted">{% trans "Sorted by health score (lowest first - most concerning)" %}</p>
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>{% trans "Employee Name" %}</th>
                                <th>{% trans "National ID" %}</th>
                                <th>{% trans "Latest Test Date" %}</th>
                                <th>{% trans "Health Score" %}</th>
                                <th>{% trans "Total Tests" %}</th>
                                <th>{% trans "Actions" %}</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for emp_stat in employee_stats %}
                            <tr class="employee-row">
                                <td>
                                    <strong>
                                        {% if emp_stat.employee.profile %}
                                        {{ emp_stat.employee.profile.first_name }} {{ emp_stat.employee.profile.last_name }}
                                        {% else %}
                                        {% trans "Unknown" %}
                                        {% endif %}
                                    </strong>
                                </td>
                                <td>
                                    {% if emp_stat.employee.profile.national_id %}
                                    {{ emp_stat.employee.profile.national_id }}
                                    {% else %}
                                    -
                                    {% endif %}
                                </td>
                                <td>
                                    {% if emp_stat.test_date %}
                                    {{ emp_stat.test_date|date:"Y-m-d" }}
                                    {% else %}
                                    -
                                    {% endif %}
                                </td>
                                <td>
                                    {% if emp_stat.overall_score is not None %}
                                    <span class="badge {% if emp_stat.overall_score >= 90 %}badge-success{% elif emp_stat.overall_score >= 70 %}badge-info{% elif emp_stat.overall_score >= 50 %}badge-warning{% else %}badge-danger{% endif %}">
                                        {{ emp_stat.overall_score }}
                                    </span>
                                    <div class="progress progress-mini mt-1">
                                        <div class="progress-bar" role="progressbar" 
                                             style="width: {{ emp_stat.overall_score }}%; 
                                                    {% if emp_stat.overall_score >= 90 %}background-color: #28a745;
                                                    {% elif emp_stat.overall_score >= 70 %}background-color: #17a2b8;
                                                    {% elif emp_stat.overall_score >= 50 %}background-color: #ffc107;
                                                    {% else %}background-color: #dc3545;{% endif %}"
                                             aria-valuenow="{{ emp_stat.overall_score }}" aria-valuemin="0" aria-valuemax="100">
                                        </div>
                                    </div>
                                    {% else %}
                                    <span class="badge badge-secondary">{% trans "No Score" %}</span>
                                    {% endif %}
                                </td>
                                <td>{{ emp_stat.total_tests }}</td>
                                <td>
                                    <a href="{% url 'panel-hr-employee-lab-test-detail' emp_stat.employee.id %}" 
                                       class="btn btn-sm btn-primary">
                                        {% trans "View Details" %}
                                    </a>
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="6" class="text-center">
                                    {% trans "No employees with lab tests found." %}
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    {% else %}
    <div class="row">
        <div class="col-md-12">
            <div class="stat-card text-center">
                <h5>{% trans "No Lab Test Data Available" %}</h5>
                <p class="text-muted">{% trans "No lab tests found for employees in this company." %}</p>
            </div>
        </div>
    </div>
    {% endif %}

    {% else %}
    <div class="row">
        <div class="col-md-12">
            <div class="stat-card text-center">
                <h5>{% trans "No Company Selected" %}</h5>
                <p class="text-muted">{% trans "Please select a company to view employee lab test data." %}</p>
            </div>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}