{% extends '@EasyAdmin/page/content.html.twig' %}

{% block content %}
<!-- Chart.js  -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<div class="container-fluid mt-4">
    <div class="row">
        <!-- Colonne principale -->
        <div class="col-lg-9">
            <div class="d-flex justify-content-between align-items-center mb-4">
           <a href="{{ path('admin_commentaire_new') }}" class="btn btn-primary rounded d-flex flex-column align-items-center text-center">
           <span><i class="fas fa-comment-dots me-2"></i>Ajouter un commentaire</span>
           <span>à une entreprise</span>
           </a>

            <div class="text-center flex-grow-1">
            <h2 class="fw-bold text-primary mb-0">Tableau de Bord</h2>
            <p class="text-muted">Vue d'ensemble de vos rappels et versements</p>
            </div>
    </div>

           <!-- Rappels -->
            <div class="mb-4">
                <h4 class="text-primary fw-semibold mb-3">📌 Rappels à traiter</h4>
                <div class="row g-4">
                    {% for rappel in rappels %}
                        <div class="col-md-6 col-xl-4">
                            <!-- Lien englobant toute la card -->
                            <a href="{{ path('admin_rappel_detail', { 'entityId': rappel.id }) }}" class="text-decoration-none">
                                <div class="card border-0 shadow h-100 rounded-4" style="box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.12);">
                                    <div class="card-body">
                                        <h6 class="text-dark fw-bold mb-1 fs-6">
                                            <i class="fas fa-building me-2 text-secondary"></i>{{ rappel.entreprise.raisonSociale }}
                                        </h6>
                                        <p class="small text-muted mb-1 fs-6">
                                            <i class="fas fa-calendar-day me-2"></i>{{ rappel.dateRappel|date('d/m/Y H:i') }}
                                        </p>
                                        <p class="text-muted mb-2">
                                            <i class="fas fa-sticky-note me-2"></i>{{ rappel.rappelObjet }}
                                        </p>
                                        <span class="badge rounded-pill 
                                            {% if rappel.getStatus() == 'En retard' %}
                                                bg-danger text-white
                                            {% elseif rappel.getStatus() == 'En attente' %}
                                                bg-warning text-dark
                                            {% else %}
                                                bg-success
                                            {% endif %}
                                        ">
                                            <i class="fas fa-clock me-1"></i>{{ rappel.getStatus() }}
                                        </span>
                                    </div>
                                    <div class="position-absolute bottom-0 end-0 p-3">
                                    <i class="fas fa-arrow-right text-primary"></i>
                                  </div>
                                </div>
                            </a>
                        </div>
                    {% else %}
                        <div class="col-12">
                            <div class="alert alert-info text-center" role="alert">
                                Aucun rappel en attente ou en retard pour le moment.
                            </div>
                        </div>
                    {% endfor %}
                </div>

                <div class="text-center mt-4">
                    <a href="{{ path('admin_rappel_index') }}" class="btn btn-outline-primary btn-lg rounded">
                        Voir tous les rappels
                    </a>
                </div>
            </div>
        </div>

        <!-- Colonne droite -->
        <div class="col-lg-3">
        <div class="bg-white shadow p-4 rounded-4 sticky-top" style="top: 90px; z-index: 1;">
                <h5 class="fw-bold text-primary mb-4 text-center">👤 Infos Utilisateur</h5>

                <div class="d-flex align-items-center mb-3">
                    <div class="me-3 fs-3 text-primary">
                        <i class="fas fa-envelope"></i>
                    </div>
                    <div>
                        <div class="text-muted small">Adresse email</div>
                        <div class="fw-semibold">{{ app.user.email }}</div>
                    </div>
                </div>

                <div class="d-flex align-items-center mb-3">
                    <div class="me-3 fs-3 text-success">
                        <i class="fas fa-user-tag"></i>
                    </div>
                    <div>
                        <div class="text-muted small">Rôle</div>
                        <div class="fw-semibold">
                            {% set roleLabel = {
                                'ROLE_ADMIN': 'Administrateur',
                                'ROLE_COMMERCIAL': 'Commercial'
                            }[app.user.role] ?? 'Utilisateur' %}
                            {{ roleLabel }}
                        </div>
                    </div>
                </div>

                <div class="text-center mt-4">
                    <span class="badge bg-light text-dark">
                        Connecté en tant que <strong>{{ roleLabel }}</strong>
                    </span>
                </div>
            </div>

            <!-- Bilan Versements -->
            <div class="bg-white shadow p-4 rounded-4 mt-4">
                <h5 class="fw-bold text-primary mb-4 text-center">💰 Bilan Versements</h5>
                <div class="d-flex align-items-center mb-3">
                    <div class="me-3 fs-3 text-success">
                        <i class="fas fa-hand-holding-usd"></i>
                    </div>
                    <div>
                        <div class="text-muted small">Nombre de versements</div>
                        <div class="fw-semibold fs-5">{{ versementsCount }}</div>
                    </div>
                </div>
                <div class="d-flex align-items-center mb-4">
                    <div class="me-3 fs-3 text-primary">
                        <i class="fas fa-euro-sign"></i>
                    </div>
                    <div>
                        <div class="text-muted small">Total encaissé</div>
                        <div class="fw-semibold fs-5">{{ totalVersements }} €</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}