{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PRINCICALA</title>
    <link rel="stylesheet" href="{% static 'bootstrap.min.css' %}">
   <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
    <link rel="stylesheet" href="{% static 'styles.css' %}"> 
    <link rel="stylesheet" href="{% static 'icons.css' %}">


</head>
<body>
    
    <style>
        .bg-orange-dark {
  background: linear-gradient(90deg, #993d00, #b34700); /* oranges plus sombres */
  color: white;
}
        .sidebar .nav-link {
            color: white;
            font-weight: 500;
        }
        .sidebar .nav-link:hover {
            background-color: rgba(255,255,255,0.2);
            border-radius: 5px;
        }
        .logo {
            max-width: 90px;

        }
        main {
            margin-left: 220px; 
        }
        .stat-card {
            background: rgb(255, 255, 255);
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0px 2px 5px rgba(113, 11, 11, 0.1);
        }
        
        
    </style>

<div class="container-fluid">
  <div class="row flex-nowrap">
    
    <nav class="col-12 col-md-3 col-lg-2 sidebar p-3">
      <div class="text-center mb-4">
        <img src="{% static 'CERFIF.jpg' %}" alt="Logo" class="logo mb-5">
        <h4 class="text-white">CERFIG</h4>
      </div>
            <ul class="nav flex-column">
                <li class="nav-item mb-2">
                    <a href="/" class="nav-link"><i class="bi bi-speedometer2"></i> Tableau de bord</a>
                </li>
                <li class="nav-item mb-2">
                <a href="#" class="nav-link"><i class=" bi bi-airplane"></i> Demande de congé </a>
                </li>
                <li class="nav-item mb-2">
                     <a href="#" class="nav-link"><i class="bi bi-people"></i> Gestion des Employés</a>
                </li>
                <li class="nav-item mb-2">
                    <a href="#" class="nav-link"><i class="bi bi-folder"></i> Gestion des Projets</a>
                </li>
                <li class="nav-item mb-2">
                    <a href="#" class="nav-link"><i class="bi bi-airplane"></i> Gestion des Congés</a>
                </li>
                <li class="nav-item mb-2">
                    <a href="#" class="nav-link"><i class="bi bi-graph-up"></i>Rapports et Statistiques</a>
                </li>
                <li class="nav-item mb-2">
                    <a href="#" class="nav-link"><i class="bi bi-gear"></i> Paramètres</a>
                  
                </li>
                  <li>
                    <a href="#" class="nav-link"><i class="bi bi-box-arrow-right"></i> Déconnexion</a>
                </li> 
            </ul>
        </nav>

        <!-- Contenu principal -->
        <main class="col px-4 py-4">
            <h1 class="mb-4">Bienvenue sur le tableau de bord</h1>

            
            <div class="row g-3 mb-4">
                <div class="col-md-3">
                    <div class="stat-card">
                        <h5><i class="bi bi-airplane"></i> Congés en attente</h5>
                        
                            <p class="display-6 fw-bold"> {{ nombre_conges_attente }}</p>
                        
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="stat-card">
                             <h5><i class="bi bi-people"></i> Nombre Employés </h5>
                             <p class="display-6 fw-bold">{{ nombre_employes }}</p>
                            </div>

                    
                </div>
                <div class="col-md-3">
                    <div class="stat-card">
                        <h5><i class="bi bi-kanban"></i> Projets en cours</h5>
      
                    </div>
                </div>
            </div>
            <div class="card p-3">
    <h3>
        <i class="bi bi-people"></i> La liste des employés en congé</h3>
    
                <table class="table table-striped">
                      <thead>
        <tr>
            <th>Employé</th>
            <th>Type de congé</th>
            <th>Date de début</th>
            <th>Date de fin</th>    
            <th>Statut</th>
        
        </tr>
    </thead>
   <tbody>
    
 {% for employe in personnes_en_conge %}        
    <tr>
        <td>{{ employe.nom }} {{ employe.prenom }}</td>
        <td>{{ employe.type }}</td>
        <td>{{ employe.date_debut }}</td>
        <td>{{ employe.date_fin }}</td>
        <td>
           <span class="badge bg-success">{{ employe.statut }} </span>
        <td>
         
        </td>
    </tr>
    {% empty %}
    <tr>
        <td colspan="5" class="text-center">Personne en conge </td>
    </tr>
    {% endfor %}
</tbody>
                </table>
            </div>
        </main>

    </div>
</div>

</body>
</html>
