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

{% block title %}{% trans "Employee Eating Habits" %}{% endblock %}

{% block sidebar.employee_eating_habits %} 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;
    }
    .nutrition-metric {
        text-align: center;
        padding: 20px;
        border-radius: 8px;
        background: #f8f9fa;
        margin-bottom: 15px;
    }
    .nutrition-metric .value {
        font-size: 2.5rem;
        font-weight: bold;
        color: #009A6E;
    }
    .nutrition-metric .label {
        color: #6c757d;
        font-size: 0.9rem;
        margin-top: 5px;
    }
    .food-item {
        padding: 15px;
        margin-bottom: 10px;
        background: white;
        border-left: 4px solid #009A6E;
        border-radius: 4px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .food-name {
        font-weight: 600;
        color: #333;
    }
    .food-frequency {
        background: #009A6E;
        color: white;
        padding: 5px 15px;
        border-radius: 20px;
        font-weight: bold;
    }
</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 Eating Habits" %}</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 "Eating Habits" %}</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" style="font-size: 2.5rem; color: #009A6E;">{{ total_employees }}</div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stat-card text-center">
                <h5>{% trans "Total Eating Logs" %}</h5>
                <div class="stat-value" style="font-size: 2.5rem; color: #009A6E;">{{ total_eating_logs }}</div>
            </div>
        </div>
    </div>

    <!-- Average Nutrition Metrics -->
    <div class="row">
        <div class="col-md-12">
            <div class="stat-card">
                <h5>{% trans "Average Daily Nutrition per Employee" %}</h5>
                <div class="row">
                    <div class="col-md-3">
                        <div class="nutrition-metric">
                            <div class="value">{{ avg_calories }}</div>
                            <div class="label">{% trans "Calories (kcal)" %}</div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="nutrition-metric">
                            <div class="value">{{ avg_carbs }}</div>
                            <div class="label">{% trans "Carbohydrates (g)" %}</div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="nutrition-metric">
                            <div class="value">{{ avg_protein }}</div>
                            <div class="label">{% trans "Protein (g)" %}</div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="nutrition-metric">
                            <div class="value">{{ avg_fat }}</div>
                            <div class="label">{% trans "Fat (g)" %}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Most Used Foods -->
    {% if most_used_foods %}
    <div class="row">
        <div class="col-md-12">
            <div class="stat-card">
                <h5>{% trans "Most Used Foods" %}</h5>
                <p class="text-muted">{% trans "Top foods consumed by employees (by frequency)" %}</p>
                <div class="row">
                    {% for food_name, frequency in most_used_foods %}
                    <div class="col-md-6">
                        <div class="food-item">
                            <span class="food-name">{{ food_name }}</span>
                            <span class="food-frequency">{{ frequency }} {% trans "times" %}</span>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
    {% else %}
    <div class="row">
        <div class="col-md-12">
            <div class="stat-card text-center">
                <h5>{% trans "No Eating Data Available" %}</h5>
                <p class="text-muted">{% trans "No eating logs 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 eating habits." %}</p>
            </div>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}