{% extends "base.html" %}
{% load static i18n %}

{% block title %}{% trans "Recruitment Dashboard" %} - {{ block.super }}{% endblock %}

{% block customCSS %}
<style>
    /* UI Variables for the KAAT-S Theme (Teal/Consistent Look) */
    :root {
        --kaauh-teal: #00636e;
        --kaauh-teal-light: #0093a3;
        --kaauh-teal-dark: #004a53;
        --kaauh-border: #eaeff3;
        --kaauh-primary-text: #343a40;
        --color-success: #28a745;
        --color-info: #17a2b8;
    }

    /* General Card Styling */
    .card {
        border: 1px solid var(--kaauh-border);
        border-radius: 0.75rem;
        box-shadow: 0 4px 12px rgba(0,0,0,0.06);
        transition: transform 0.2s, box-shadow 0.2s;
        background-color: white;
    }
    .card:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0,0,0,0.1);
    }
    
    .card-header {
        font-weight: 600;
        padding: 1.25rem;
        border-bottom: 1px solid var(--kaauh-border);
        background-color: #f8f9fa; 
    }

    /* Stats Grid Layout - Six columns for better detail display */
    .stats {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); 
        gap: 1.5rem;
        margin-bottom: 3rem;
    }

    /* Stat Card Specific Styling */
    .stat-value {
        font-size: 2.8rem; 
        text-align: center;
        color: var(--kaauh-teal-dark); 
        font-weight: 700;
        padding: 1rem 1rem 0.5rem; 
    }
    
    .stat-caption {
        font-size: 0.9rem;
        text-align: center;
        color: #6c757d;
        padding-bottom: 1rem;
    }

    /* Header Styling */
    .card-header h3, .card-header h2 {
        display: flex;
        align-items: center;
        color: var(--kaauh-primary-text);
        font-size: 1.25rem;
        font-weight: 600;
        margin: 0;
    }

    .stat-icon {
        color: var(--kaauh-teal);
        font-size: 1.75rem;
        margin-right: 0.75rem;
    }

    /* Chart Container */
    .chart-container {
        padding: 2rem;
    }

</style>
{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    
    <h1 class="mb-4" style="color: var(--kaauh-teal-dark); font-weight: 700;">{% trans "Recruitment Overview" %} 🚀</h1>

    <div class="stats">
        
        <div class="card">
            <div class="card-header">
                <h3><i class="fas fa-briefcase stat-icon"></i> {% trans "Total Jobs" %}</h3>
            </div>
            <div class="stat-value">{{ total_jobs }}</div>
            <div class="stat-caption">{% trans "Active & Drafted Positions" %}</div>
        </div>
        
        <div class="card">
            <div class="card-header">
                <h3><i class="fas fa-users stat-icon"></i> {% trans "Total Candidates" %}</h3>
            </div>
            <div class="stat-value">{{ total_candidates }}</div>
            <div class="stat-caption">{% trans "All Profiles in ATS" %}</div>
        </div>
        
        <div class="card">
            <div class="card-header">
                <h3><i class="fas fa-chart-line stat-icon"></i> {% trans "Avg. Apps per Job" %}</h3>
            </div>
            <div class="stat-value">{{ average_applications|floatformat:1 }}</div>
            <div class="stat-caption">{% trans "Key Efficiency Metric" %}</div>
        </div>

        <div class="card">
            <div class="card-header">
                <h3><i class="fas fa-arrow-alt-circle-up stat-icon" style="color: var(--color-success);"></i> {% trans "Active Listings" %}</h3>
            </div>
            <div class="stat-value">22</div> 
            <div class="stat-caption">{% trans "Jobs currently open for application" %}</div>
        </div>
        
        <div class="card">
            <div class="card-header">
                <h3><i class="fas fa-clock stat-icon" style="color: var(--color-info);"></i> {% trans "Time to Hire" %}</h3>
            </div>
            <div class="stat-value">35d</div> 
            <div class="stat-caption">{% trans "Average days from apply to offer" %}</div>
        </div>

        <div class="card">
            <div class="card-header">
                <h3><i class="fas fa-handshake stat-icon" style="color: var(--kaauh-teal-light);"></i> {% trans "Offer Acceptance" %}</h3>
            </div>
            <div class="stat-value">85%</div> 
            <div class="stat-caption">{% trans "Successful offers vs. Total offers" %}</div>
        </div>
    </div>
    
    <div class="card shadow-lg">
        <div class="card-header">
            <h2 class="d-flex align-items-center mb-0">
                <i class="fas fa-chart-bar stat-icon"></i>
                {% trans "Applications Volume by Job" %}
            </h2>
        </div>
        <div class="chart-container">
            <canvas id="applicationsChart"></canvas>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  
    // if the strings are visible to the user. 'Applications' is used for Chart.js here.
    const ctx = document.getElementById('applicationsChart').getContext('2d');
    const chart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: {{ job_titles|safe }},
            datasets: [{
                
                // For simplicity, we are leaving it as-is for now, assuming the context provides the translated labels.
                label: '{% trans "Applications" %}', 
                data: {{ job_app_counts|safe }},
                backgroundColor: ' #00636e', // Green theme
                borderColor: ' #004a53',
                borderWidth: 1,
                barThickness: 50
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    labels: {
                        color: '#333333'
                    }
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        color: '#333333'
                    },
                    grid: {
                        color: '#e0e0e0'
                    }
                },
                x: {
                    ticks: {
                        color: '#333333'
                    },
                    grid: {
                        color: '#e0e0e0'
                    }
                }
            }
        }
    });
</script>

{% endblock %}