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

{% block page_title %}Tableau de bord{% endblock %}

{% block main %}
<div style="padding: 1.5rem 0;">

    {# Stats cards #}
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.25rem; margin-bottom: 2rem;">

        <div style="background:#fff; border-radius:10px; padding:1.25rem 1.5rem; box-shadow:0 1px 4px rgba(0,0,0,.08); border-left: 4px solid #3b82f6;">
            <div style="font-size:.8rem; color:#6b7280; text-transform:uppercase; letter-spacing:.5px;">Chambres actives</div>
            <div style="font-size:2.5rem; font-weight:700; color:#1e40af; line-height:1.2;">{{ stats.rooms_active }}</div>
            <div style="font-size:.8rem; color:#9ca3af;">sur {{ stats.rooms_total }} au total</div>
        </div>

        <div style="background:#fff; border-radius:10px; padding:1.25rem 1.5rem; box-shadow:0 1px 4px rgba(0,0,0,.08); border-left: 4px solid #22c55e;">
            <div style="font-size:.8rem; color:#6b7280; text-transform:uppercase; letter-spacing:.5px;">Réservations confirmées</div>
            <div style="font-size:2.5rem; font-weight:700; color:#15803d; line-height:1.2;">{{ stats.bookings_confirmed }}</div>
            <div style="font-size:.8rem; color:#9ca3af;">paiement reçu</div>
        </div>

        <div style="background:#fff; border-radius:10px; padding:1.25rem 1.5rem; box-shadow:0 1px 4px rgba(0,0,0,.08); border-left: 4px solid #f59e0b;">
            <div style="font-size:.8rem; color:#6b7280; text-transform:uppercase; letter-spacing:.5px;">En attente</div>
            <div style="font-size:2.5rem; font-weight:700; color:#b45309; line-height:1.2;">{{ stats.bookings_pending }}</div>
            <div style="font-size:.8rem; color:#9ca3af;">paiement non finalisé</div>
        </div>

        <div style="background:#fff; border-radius:10px; padding:1.25rem 1.5rem; box-shadow:0 1px 4px rgba(0,0,0,.08); border-left: 4px solid #8b5cf6;">
            <div style="font-size:.8rem; color:#6b7280; text-transform:uppercase; letter-spacing:.5px;">Chiffre d'affaires</div>
            <div style="font-size:2rem; font-weight:700; color:#6d28d9; line-height:1.2;">{{ stats.revenue_total|number_format(2, ',', ' ') }} €</div>
            <div style="font-size:.8rem; color:#9ca3af;">réservations confirmées</div>
        </div>

    </div>

    {# Quick links #}
    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem;">

        <div style="background:#fff; border-radius:10px; padding:1.5rem; box-shadow:0 1px 4px rgba(0,0,0,.08);">
            <h3 style="margin:0 0 1rem; font-size:1rem; color:#111827;">
                <i class="fa fa-bed" style="color:#3b82f6; margin-right:.4rem;"></i> Chambres
            </h3>
            <p style="color:#6b7280; font-size:.9rem; margin:0 0 1rem;">Gérer les chambres, prix, descriptions et disponibilités.</p>
            <a href="{{ ea_url().setController('App\\Controller\\Admin\\RoomCrudController').generateUrl() }}"
               style="display:inline-block; background:#3b82f6; color:#fff; padding:.5rem 1rem; border-radius:6px; text-decoration:none; font-size:.875rem;">
                Voir les chambres
            </a>
        </div>

        <div style="background:#fff; border-radius:10px; padding:1.5rem; box-shadow:0 1px 4px rgba(0,0,0,.08);">
            <h3 style="margin:0 0 1rem; font-size:1rem; color:#111827;">
                <i class="fa fa-calendar-days" style="color:#22c55e; margin-right:.4rem;"></i> Réservations
            </h3>
            <p style="color:#6b7280; font-size:.9rem; margin:0 0 1rem;">Consulter et gérer toutes les réservations clients.</p>
            <a href="{{ ea_url().setController('App\\Controller\\Admin\\BookingCrudController').generateUrl() }}"
               style="display:inline-block; background:#22c55e; color:#fff; padding:.5rem 1rem; border-radius:6px; text-decoration:none; font-size:.875rem;">
                Voir les réservations
            </a>
        </div>

    </div>

</div>
{% endblock %}