{% extends 'base.html.twig' %}

{% block title %}Tableau de bord Employé{% endblock %}

{% block body %}
<div class="container mt-5">
    <div class="text-center mb-4">
        <h1 class="fw-bold">Tableau de bord Employé</h1>
        <p class="lead">Bienvenue, <strong>{{ user.nom }} {{ user.prenom }}</strong> 👋</p>
        <p class="text-muted">Vous êtes connecté en tant que <span class="badge bg-primary">Employé</span></p>
    </div>

    {% if formations is not empty %}
        <div class="card shadow-lg mb-4">
            <div class="card-header bg-primary text-white text-center">
                <h3>Formations Disponibles</h3>
            </div>
            <div class="card-body">
                <table class="table table-striped table-hover">
                    <thead class="table-dark">
                        <tr>
                            <th>Date de début</th>
                            <th>Produit</th>
                            <th>Département</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for formation in formations %}
                            <tr>
                                <td>{{ formation.dateDebut|date('d/m/Y') }}</td>
                                <td>{{ formation.leProduit.libelle }}</td>
                                <td>{{ formation.departement }}</td>
                                <td>
                                    <a href="{{ path('app_inscrireFormation', {'idFormation': formation.id}) }}" class="btn btn-success btn-sm">S'inscrire</a>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    {% else %}
        <div class="alert alert-info text-center">Aucune formation disponible pour le moment.</div>
    {% endif %}

    <div class="row mt-4">
        <div class="col-md-4">
            <div class="card glassmorphism shadow-lg text-white text-center p-3" style="background: rgba(0, 123, 255, 0.6);">
                <div class="card-body d-flex flex-column justify-content-center">
                    <h5 class="card-title">Gérer les formations</h5>
                    <p class="card-text">Consultez et administrez les formations disponibles.</p>
                    <a href="{{ path('app_empFormations') }}" class="btn btn-light mt-auto">Accéder</a>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card glassmorphism shadow-lg text-white text-center p-3" style="background: rgba(0, 123, 255, 0.6);">
                <div class="card-body d-flex flex-column justify-content-center">
                    <h5 class="card-title">Gérer les inscriptions</h5>
                    <p class="card-text">Consultez et validez les demandes d'inscription.</p>
                    <a href="{{ path('app_afficherAllInscriptions') }}" class="btn btn-light mt-auto">Voir les inscriptions</a>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    /* Effet verre avec couleur */
    .glassmorphism {
        backdrop-filter: blur(10px);
        border-radius: 15px;
        min-height: 180px; /* Assure la même hauteur */
        display: flex;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Ombre */
    }

    /* Uniformisation des cartes */
    .card-body {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
</style>

{% endblock %}