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

{% block title %}{% trans "Green Employees" %}{% endblock %}

{% block sidebar.green_employees %} 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: #28a745;
        margin-bottom: 15px;
    }
    .metric-large {
        text-align: center;
        padding: 30px;
        border-radius: 12px;
        background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
        color: white;
        margin-bottom: 20px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }
    .metric-large .value {
        font-size: 4rem;
        font-weight: bold;
        margin-bottom: 10px;
    }
    .metric-large .label {
        font-size: 1.2rem;
        opacity: 0.9;
    }
    .metric-small {
        text-align: center;
        padding: 20px;
        border-radius: 8px;
        background: white;
        border: 2px solid #e0e0e0;
        margin-bottom: 15px;
        transition: transform 0.2s, box-shadow 0.2s;
    }
    .metric-small:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    .metric-small .value {
        font-size: 2.5rem;
        font-weight: bold;
        color: #28a745;
        margin-bottom: 5px;
    }
    .metric-small .label {
        color: #6c757d;
        font-size: 0.9rem;
    }
    .green-employee-item {
        padding: 20px;
        margin-bottom: 15px;
        background: white;
        border-left: 5px solid #28a745;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        transition: transform 0.2s, box-shadow 0.2s;
    }
    .green-employee-item:hover {
        transform: translateX(5px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }
    .health-score-badge {
        padding: 8px 20px;
        border-radius: 25px;
        font-weight: bold;
        font-size: 1.1rem;
    }
    .badge-green {
        background: #28a745;
        color: white;
    }
    .badge-excellent {
        background: #009A6E;
        color: white;
    }
</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 "Green Employees" %}</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 "Green Employees" %}</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 %}
    <!-- Statistics Section -->
    <div class="row">
        <div class="col-md-6">
            <div class="metric-large" style="background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);">
                <div class="value" style="font-size: 5rem; font-weight: bold;">{{ overall_health_percentage }}%</div>
                <div class="label" style="font-size: 1.3rem; margin-top: 10px;">{% trans "Overall Health Score" %}</div>
                <div class="label" style="font-size: 1rem; margin-top: 20px; opacity: 0.9;">
                    {% trans "Personnel" %}
                </div>
                <div class="label" style="font-size: 1.5rem; margin-top: 5px; font-weight: bold;">
                    {{ total_employees }}
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="row">
                <div class="col-md-12 mb-3">
                    <div class="metric-small" style="border: 2px solid #28a745;">
                        <div class="value" style="color: #28a745; font-size: 3rem;">{{ green_employees_count }}</div>
                        <div class="label">{% trans "Green Employees" %}</div>
                    </div>
                </div>
                <div class="col-md-12 mb-3">
                    <div class="metric-small" style="border: 2px solid #dc3545;">
                        <div class="value" style="color: #dc3545; font-size: 3rem;">{{ critical_cases_count }}</div>
                        <div class="label">{% trans "Critical Cases" %}</div>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="metric-small" style="border: 2px solid #28a745;">
                        <div class="value" style="color: #28a745; font-size: 3rem;">{{ avg_health_score|floatformat:0 }}%</div>
                        <div class="label">{% trans "Average Health" %}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Green Employees List -->
    <div class="row">
        <div class="col-md-12">
            <div class="stat-card">
                <h5>{% trans "Green Employees List" %} <span class="badge badge-success">{{ green_employees_count }}</span></h5>
                <p class="text-muted">{% trans "Employees with health score above 70 (sorted by best health first)" %}</p>
                
                {% if green_employees_list %}
                {% for employee_data in green_employees_list %}
                <div class="green-employee-item">
                    <div class="row align-items-center">
                        <div class="col-md-4">
                            <h6 class="mb-1">
                                {% if employee_data.employee.profile %}
                                {{ employee_data.employee.profile.first_name }} {{ employee_data.employee.profile.last_name }}
                                {% else %}
                                {% trans "Unknown Employee" %}
                                {% endif %}
                            </h6>
                            <small class="text-muted">
                                {% if employee_data.employee.profile.national_id %}
                                {% trans "National ID" %}: {{ employee_data.employee.profile.national_id }}
                                {% endif %}
                            </small>
                        </div>
                        <div class="col-md-3">
                            <div>
                                <strong>{% trans "Health Score" %}:</strong>
                                <span class="health-score-badge badge-green ml-2">{{ employee_data.health_score }}</span>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div>
                                <strong>{% trans "Latest Test Date" %}:</strong><br>
                                <small>{{ employee_data.test_date|date:"Y-m-d"|default:"-" }}</small>
                            </div>
                        </div>
                        <div class="col-md-2 text-right">
                            <a href="{% url 'panel-hr-employee-lab-test-detail' employee_data.employee.id %}" 
                               class="btn btn-sm btn-success">
                                {% trans "View Details" %}
                            </a>
                        </div>
                    </div>
                    <div class="row mt-2">
                        <div class="col-md-12">
                            <div class="progress" style="height: 8px;">
                                <div class="progress-bar bg-success" 
                                     role="progressbar" 
                                     style="width: {{ employee_data.health_score }}%;"
                                     aria-valuenow="{{ employee_data.health_score }}" 
                                     aria-valuemin="0" 
                                     aria-valuemax="100">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {% endfor %}
                {% else %}
                <div class="text-center py-5">
                    <i class="fa fa-info-circle fa-3x text-info mb-3"></i>
                    <h5>{% trans "No Green Employees" %}</h5>
                    <p class="text-muted">{% trans "No employees found with health scores above 70." %}</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>

    {% 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 green employees." %}</p>
            </div>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}