{% extends "admin/base_site.html" %}
{% load i18n static %}

{% block extrastyle %}
<link rel="stylesheet" href="{% static 'admin/css/dashboard.css' %}">
<style>
  .chart-container {
    margin-bottom: 2rem;
    padding: 1rem;
    background: white;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  }
  .team-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
  }
  .stat-card {
    padding: 1rem;
    background: white;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
    text-align: center;
  }
  .stat-number {
    font-size: 2rem;
    font-weight: bold;
    color: var(--primary);
  }
  .events-list {
    margin-top: 2rem;
  }
  .event-item {
    padding: 0.5rem;
    border-bottom: 1px solid #eee;
  }
  .event-date {
    color: var(--primary);
    font-weight: bold;
  }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
  
  <!-- Statistiques d'équipe -->
  <div class="team-stats">
    <div class="stat-card">
      <h3>Total Employés</h3>
      <div class="stat-number">{{ team_availability.total }}</div>
    </div>
    <div class="stat-card">
      <h3>Présents</h3>
      <div class="stat-number">{{ team_availability.present }}</div>
    </div>
    <div class="stat-card">
      <h3>En congé</h3>
      <div class="stat-number">{{ team_availability.on_leave }}</div>
    </div>
    <div class="stat-card">
      <h3>En formation</h3>
      <div class="stat-number">{{ team_availability.in_training }}</div>
    </div>
    <div class="stat-card">
      <h3>Disponibles</h3>
      <div class="stat-number">{{ team_availability.available }}</div>
    </div>
  </div>

  <!-- Graphiques -->
  <div class="row">
    <div class="col-md-8">
      <div class="chart-container">
        <h2>Présences hebdomadaires par département</h2>
        <img src="data:image/png;base64,{{ weekly_chart }}" class="img-fluid">
      </div>
    </div>
    <div class="col-md-4">
      <div class="chart-container">
        <h2>Répartition par département</h2>
        <img src="data:image/png;base64,{{ department_chart }}" class="img-fluid">
      </div>
    </div>
  </div>

  <!-- Événements à venir -->
  <div class="row">
    <div class="col-md-6">
      <div class="chart-container events-list">
        <h2>Congés à venir</h2>
        {% for leave in upcoming_events.leaves %}
        <div class="event-item">
          <span class="event-date">{{ leave.start_date|date:"d/m/Y" }}</span>
          <strong>{{ leave.employee.full_name }}</strong> -
          {{ leave.get_type_display }}
        </div>
        {% empty %}
        <p>Aucun congé prévu pour la semaine à venir.</p>
        {% endfor %}
      </div>
    </div>
    <div class="col-md-6">
      <div class="chart-container events-list">
        <h2>Formations à venir</h2>
        {% for training in upcoming_events.trainings %}
        <div class="event-item">
          <span class="event-date">{{ training.start_date|date:"d/m/Y" }}</span>
          <strong>{{ training.employee.full_name }}</strong> -
          {{ training.title }}
        </div>
        {% empty %}
        <p>Aucune formation prévue pour la semaine à venir.</p>
        {% endfor %}
      </div>
    </div>
  </div>
  
</div>
{% endblock %}