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

{% block title %}{% trans "Company Risks" %}{% endblock %}

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

{% block header.add_script %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></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;
    }
    .pie-chart-container {
        background: white;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 20px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        text-align: center;
    }
    .pie-chart-container h6 {
        color: #333;
        margin-bottom: 15px;
        font-weight: 600;
    }
    .pie-chart-wrapper {
        position: relative;
        height: 250px;
        margin: 0 auto;
    }
    .category-stats {
        margin-top: 15px;
        padding-top: 15px;
        border-top: 1px solid #e0e0e0;
    }
    .category-stats .stat-item {
        display: flex;
        justify-content: space-between;
        margin-bottom: 8px;
    }
    .category-stats .stat-label {
        color: #6c757d;
        font-size: 0.9rem;
    }
    .category-stats .stat-value {
        font-weight: bold;
        color: #009A6E;
    }
</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 "Company Risks" %}</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 "Company Risks" %}</li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Company and Gender 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-3" 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>
                    
                    <label for="gender" class="mr-2 ml-3">{% trans "Gender:" %}</label>
                    <select name="gender" id="gender" class="form-control" onchange="this.form.submit()">
                        <option value="">{% trans "All" %}</option>
                        <option value="male" {% if gender_filter == 'male' %}selected{% endif %}>{% trans "Men" %} (آقایان)</option>
                        <option value="female" {% if gender_filter == 'female' %}selected{% endif %}>{% trans "Women" %} (بانوان)</option>
                    </select>
                </form>
            </div>
        </div>
    </div>
    {% endif %}

    {% if selected_company %}
    <!-- Statistics Overview -->
    <div class="row mb-3">
        <div class="col-md-12">
            <div class="stat-card text-center">
                <h5>{% trans "Total Employees" %}: <span style="color: #009A6E; font-size: 1.5rem;">{{ total_employees }}</span></h5>
                <p class="text-muted">{% trans "Only employees with uploaded lab test reports are included in the analysis." %}</p>
            </div>
        </div>
    </div>

    <!-- Pie Charts Section -->
    <div class="row">
        {% for category_key, stats in category_stats.items %}
        <div class="col-md-6 col-lg-4 mb-4">
            <div class="pie-chart-container">
                <h6>{{ stats.name }}</h6>
                <div class="pie-chart-wrapper">
                    <canvas id="chart-{{ category_key }}"></canvas>
                </div>
                <div class="category-stats">
                    <div class="stat-item">
                        <span class="stat-label">{% trans "Average Score" %}:</span>
                        <span class="stat-value">{{ stats.average }}%</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-label">{% trans "Employees" %}:</span>
                        <span class="stat-value">{{ stats.count }}</span>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
    </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 company risks." %}</p>
            </div>
        </div>
    </div>
    {% endif %}
</div>

<script>
    // Color scheme for pie charts
    const getColorScheme = (percentage) => {
        if (percentage >= 80) {
            return {
                backgroundColor: ['#28a745', '#e0e0e0'],
                borderColor: ['#28a745', '#e0e0e0']
            };
        } else if (percentage >= 60) {
            return {
                backgroundColor: ['#ffc107', '#e0e0e0'],
                borderColor: ['#ffc107', '#e0e0e0']
            };
        } else {
            return {
                backgroundColor: ['#dc3545', '#e0e0e0'],
                borderColor: ['#dc3545', '#e0e0e0']
            };
        }
    };

    // Create pie charts for each category
    {% for category_key, stats in category_stats.items %}
    (function() {
        const ctx = document.getElementById('chart-{{ category_key }}');
        if (!ctx) return;
        
        const percentage = {{ stats.percentage }};
        const remaining = 100 - percentage;
        const colors = getColorScheme(percentage);
        
        new Chart(ctx, {
            type: 'pie',
            data: {
                labels: ['{{ stats.name }}', '{% trans "Remaining" %}'],
                datasets: [{
                    data: [percentage, remaining],
                    backgroundColor: colors.backgroundColor,
                    borderColor: colors.borderColor,
                    borderWidth: 2
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return context.label + ': ' + context.parsed + '%';
                            }
                        }
                    }
                }
            }
        });
    })();
    {% endfor %}
</script>
{% endblock %}