{% extends 'unfold/layouts/base.html' %}
{% load i18n unfold %}

{% block breadcrumbs %}{% endblock %}

{% block title %}
    {% trans 'Dashboard' %} | {{ site_title|default:_('Django site admin') }}
{% endblock %}

{% block branding %}
    <h1 id="site-name">
        <a href="{% url 'admin:index' %}">
            {{ site_header }}
        </a>
    </h1>
{% endblock %}

{% block content_before %}
    {% component "unfold/helpers/header.html" %}
        {% trans "Recruitment Dashboard" %}
    {% endcomponent %}
{% endblock %}

{% block content %}
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
    {% component "unfold/components/card.html" with title="Total Jobs Posted" %}
        <p class="text-4xl font-bold text-blue-600">{{ total_jobs }}</p>
    {% endcomponent %}

    {% component "unfold/components/card.html" with title="Total Candidates" %}
        <p class="text-4xl font-bold text-green-600">{{ total_candidates }}</p>
    {% endcomponent %}

    {% component "unfold/components/card.html" with title="Average Applications/Job" %}
        <p class="text-4xl font-bold text-yellow-600">{{ average_applications }}</p>
    {% endcomponent %}
</div>

<div class="bg-white p-6 rounded-xl shadow-md mb-8">
    <div class="flex justify-between items-center mb-4">
        <h2 class="text-lg font-semibold text-gray-800">Applications Per Job</h2>
    </div>
    <canvas id="applicationsChart" height="300"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    const ctx = document.getElementById('applicationsChart').getContext('2d');
    const applicationsChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: {{ job_titles|safe }},
            datasets: [{
                label: 'Applications',
                data: {{ job_app_counts|safe }},
                backgroundColor: 'rgba(34, 197, 94, 0.7)',
                borderColor: 'rgba(34, 197, 94, 1)',
                borderWidth: 1,
                borderRadius: 4,
                maxBarThickness: 40
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: { display: false },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            return `${context.raw} applications`;
                        }
                    }
                }
            },
            scales: {
                x: { ticks: { autoSkip: false } },
                y: {
                    beginAtZero: true,
                    grace: '10%',
                    title: { display: true, text: 'Number of Applicants' }
                }
            }
        }
    });
</script>
{% endblock %}