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

{% block title %}Tableau de bord — H TRANSPORT{% endblock %}

{% block body %}
    <div class="container mt-5">
        <div class="text-center mb-5">
            <img src="{{ asset('images/Logo H transport.jpg') }}" alt="Logo H Transport" height="100" class="rounded shadow-sm mb-3">
            <h1 class="fw-bold text-primary">Bienvenue sur le tableau de bord H TRANSPORT</h1>
            <p class="text-muted fs-5">Gérez facilement vos chauffeurs, véhicules, marchés et plannings depuis une seule interface.</p>
        </div>

        <!-- Cards -->
        <div class="row g-4 text-center">
            <div class="col-md-4">
                <a href="/chauffeur" class="text-decoration-none">
                    <div class="card shadow-sm border-0 hover-shadow h-100">
                        <div class="card-body">
                            <h2 class="text-primary display-6">👨‍🔧</h2>
                            <h5 class="card-title fw-bold">Chauffeurs</h5>
                            <p class="text-muted">Gérez les informations, contrats et activités de vos chauffeurs.</p>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col-md-4">
                <a href="/vehicule" class="text-decoration-none">
                    <div class="card shadow-sm border-0 hover-shadow h-100">
                        <div class="card-body">
                            <h2 class="text-success display-6">🚗</h2>
                            <h5 class="card-title fw-bold">Véhicules</h5>
                            <p class="text-muted">Consultez et gérez votre flotte de véhicules en temps réel.</p>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col-md-4">
                <a href="/marche" class="text-decoration-none">
                    <div class="card shadow-sm border-0 hover-shadow h-100">
                        <div class="card-body">
                            <h2 class="text-info display-6">🏪</h2>
                            <h5 class="card-title fw-bold">Marchés</h5>
                            <p class="text-muted">Visualisez les marchés partenaires et leurs barèmes.</p>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col-md-4">
                <a href="/planning" class="text-decoration-none">
                    <div class="card shadow-sm border-0 hover-shadow h-100">
                        <div class="card-body">
                            <h2 class="text-warning display-6">📅</h2>
                            <h5 class="card-title fw-bold">Planning</h5>
                            <p class="text-muted">Planifiez les chauffeurs et véhicules sur les marchés.</p>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col-md-4">
                <a href="/tournee" class="text-decoration-none">
                    <div class="card shadow-sm border-0 hover-shadow h-100">
                        <div class="card-body">
                            <h2 class="text-secondary display-6">📦</h2>
                            <h5 class="card-title fw-bold">Tournées</h5>
                            <p class="text-muted">Suivez les livraisons et performances quotidiennes.</p>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col-md-4">
                <a href="/document" class="text-decoration-none">
                    <div class="card shadow-sm border-0 hover-shadow h-100">
                        <div class="card-body">
                            <h2 class="text-dark display-6">🧾</h2>
                            <h5 class="card-title fw-bold">Documents</h5>
                            <p class="text-muted">Stockez et retrouvez tous vos documents importants.</p>
                        </div>
                    </div>
                </a>
            </div>
        </div>

        <!-- Footer -->
        <div class="text-center mt-5">
            <small class="text-muted">© {{ "now"|date("Y") }} H TRANSPORT - Tous droits réservés</small>
        </div>
    </div>

    <style>
        .hover-shadow:hover {
            transform: translateY(-4px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
            transition: all 0.2s ease-in-out;
        }
    </style>
{% endblock %}