<?php // Démarrer la session
session_start();

// Vérifie si l'utilisateur est connecté
$isAdminLoggedIn = isset($_SESSION['user_id']);

?>



<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <style>
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
}

.sidebar {
    position: fixed;
    width: 148px;
    height: 100%;
    background-color: #f8e4a6;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
}

.sidebar .logo {
    width: 40px;
    height: 40px;
    margin-bottom: 100px !important;
}

.sidebar .icon {
    font-size: 36px;
    margin: 20px 0;
    color: #333;
    cursor: pointer;
    position: relative;
    text-decoration: none;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar .active {
    background-color: #fff;
    border-radius: 15%;
    color: #000;
    padding: 0;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main {
    margin-left: 148px;
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.header {
    display: flex;
    justify-content: space-between; /* Espace entre Dashboard et la barre de recherche */
    align-items: center; /* Aligne verticalement les éléments */
    margin-bottom: 20px;
}

.header-title {
    font-size: 28px;
    font-weight: bold;
}

.search-bar {
    position: relative; /* Pour positionner l'icône à l'intérieur */
}

.search-bar input {
    padding: 10px 40px 10px 15px; /* Ajoute de l'espace pour le texte et l'icône */
    border: 1px solid #ccc; /* Bordure légère */
    border-radius: 10px; /* Coins arrondis */
    font-size: 16px; /* Taille du texte */
    outline: none; /* Supprime le contour bleu par défaut */
    width: 300px; /* Largeur de la barre de recherche */
    transition: border-color 0.3s ease; /* Effet de transition sur la bordure */
}

.search-bar input:focus {
    border-color: #666; /* Change la couleur de la bordure au focus */
}

.search-bar i {
    position: absolute; /* Position absolue par rapport à .search-bar */
    right: 10px; /* Espace entre l'icône et le bord droit */
    top: 50%; /* Centre verticalement */
    transform: translateY(-50%); /* Ajuste pour le centre exact */
    font-size: 20px; /* Taille de l'icône */
    color: #aaa; /* Couleur de l'icône */
    cursor: pointer; /* Change le curseur pour indiquer un clic */
    transition: color 0.3s ease; /* Effet de transition sur la couleur */
}

.search-bar i:hover {
    color: #333; /* Couleur plus foncée au survol */
}

.stats {
    display: flex;
    gap: 20px;
    justify-content: space-between;
}

.stat {
    flex: 1;
    height: 170px;
    background-color: #eaeff3;
    padding: 20px;
    border-radius: 10px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
}

.stat img {
    position: absolute;
    top: 30px;
    right: 30px;
    height: 80px;
    width: auto;
}

.stat h2 {
    margin: 5px 0;
}

.stat p {
    margin: 0;
}

.stat:nth-child(1) {
    background-color: #F6FBFF;
}

.stat:nth-child(2) {
    background-color: #75797B;
    color: white;
}

.stat:nth-child(3) {
    background-color: #494B4D;
    color: white;
}

.stat:nth-child(4) {
    background-color: #B3B8C1;
}

.bottom-section {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    flex: 1;
}

.teams {
    flex: 2;
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    overflow-y: auto;
}

.teams h2 {
    font-size: 24px;
    margin-bottom: 20px;
}

.team-logos {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.team-logos img {
    flex: 0 0 calc(100% / 6 - 10px);
    height: auto;
    border-radius: 5px;
}

.riders {
    flex: 1;
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.rider-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    align-items: center;
}

.rider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.riders h2 {
    font-size: 24px;
    margin-bottom: 20px;
}

.rider img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.rider div {
    font-size: 14px;
}

.rider div strong {
    font-size: 16px;
}

@media (max-width: 768px) {
    .sidebar {
        width: 80px;
    }

    .main {
        margin-left: 80px;
    }

    .stats {
        flex-wrap: wrap;
    }

    .stat {
        width: 45%;
    }

    .team-logos img {
        flex: 0 0 calc(100% / 4 - 10px);
    }

    .rider img {
        width: 30px;
        height: 30px;
    }
}

@media (max-width: 480px) {
    .stat {
        width: 100%;
    }

    .team-logos {
        gap: 5px;
    }

    .team-logos img {
        flex: 0 0 calc(100% / 3 - 5px);
    }

    .rider-list {
        gap: 10px;
    }
}
.bx-trash{
            color:red;
        }
    </style>
</head>

<body>
    <div class="sidebar">
    <img src="logo.png" alt="Logo" class="logo">
        <a href="Index.php" class="material-icons icon active">home</a>
        <a href="Coureur.php" class="material-icons icon ">directions_bike</a>
        <a href="Etape.php" class="material-icons icon">terrain</a>
        <a href="Team.php" class="material-icons icon">groups</a>
        <?php if ($isAdminLoggedIn): ?>
            <a href="admin.php" class="material-icons icon">admin_panel_settings</a>
                        <?php endif;?>
    </div>

    <div class="main">
        <div class="header">
            <div class="header-title">Dashboard</div>
            <div class="search-bar">
                <input type="text" placeholder="Rechercher...">
                <i class="material-icons">search</i>
            </div>
        </div>
        

        <div class="stats">
            <div class="stat">
                <img src="course.png" alt="Distance du parcours" class="stat-img">
                <h2>3 350,1 Km</h2>
                <p>Distance du parcours</p>
            </div>
            <div class="stat">
                <img src="tour.png" alt="Nombre de coureurs" class="stat-img">
                <h2>32</h2>
                <p>Nombre de coureurs Français</p>
            </div>
            <div class="stat">
                <img src="mount.png" alt="Dénivelé" class="stat-img">
                <h2>4 750 m</h2>
                <p>Plus gros dénivelé</p>
            </div>
            <div class="stat">
                <img src="ping.png" alt="Étape" class="stat-img">
                <h2>219,9 Km</h2>
                <p>Plus longue étape</p>
            </div>
        </div>

        <div class="bottom-section">
            <div class="teams">
                <h2>Équipes 2022</h2>
                <div class="team-logos">
                    <img src="image-1.png" alt="Team 1">
                    <img src="image-2.png" alt="Team 2">
                    <img src="image-3.png" alt="Team 3">
                    <img src="image-4.png" alt="Team 4">
                    <img src="image-5.png" alt="Team 5">
                    <img src="image-6.png" alt="Team 6">
                    <img src="image-7.png" alt="Team 7">
                    <img src="image-8.png" alt="Team 8">
                    <img src="image-9.png" alt="Team 9">
                    <img src="image-10.png" alt="Team 10">
                    <img src="image-11.png" alt="Team 11">
                    <img src="image-12.png" alt="Team 12">
                    <img src="image-13.png" alt="Team 13">
                    <img src="image-14.png" alt="Team 14">
                    <img src="image-15.png" alt="Team 15">
                    <img src="image-16.png" alt="Team 16">
                    <img src="image-17.png" alt="Team 17">
                    <img src="image-18.png" alt="Team 18">
                    <img src="image-19.png" alt="Team 19">
                    <img src="image-20.png" alt="Team 20">
                    <img src="image-21.png" alt="Team 21">
                    <img src="image.png" alt="Team 22">
                </div>
            </div>

            <div class="riders">
                <h2>Coureurs</h2>
                <div class="rider-list">
                    <div class="rider">
                        <img src="J.VINGEGAARD.jpg" alt="Coureur 1">
                        <div>
                            <strong>J. VINGEGAARD</strong><br>
                            TEAM VISMA-LEASE À BIKE
                        </div>
                    </div>
                    <div class="rider">
                        <img src="T.POGACAR.jpg" alt="Coureur 2">
                        <div>
                            <strong>T. POGACAR</strong><br>
                            UAE TEAM EMIRATES
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>