@using Microsoft.AspNetCore.Http
@inject IHttpContextAccessor HttpContextAccessor
@{
    var userName = HttpContextAccessor.HttpContext.Session.GetString("UserName");
}
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - FamilyBudget</title>
    <link rel="stylesheet" href="~/css/StyleSh.css" />
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <style>
        /* Sidebar (si activée) */
        

        /* Lorsque la sidebar est ouverte, afficher le texte à côté des icônes */
        /*            .left-navbar.show nav ul li a span {
                display: inline;
            }*/

        /* Transition de l'animation du bouton */
        button {
            font-size: 2rem;
            background: none;
            border: none;
            cursor: pointer;
        }
        .navbar-nav {
            list-style: none;
            display: inline-flex;
        }

        .nav-item {
            margin-left: 20px;
        }
        .nabar {
            background-color: #ffffff;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            /*padding: 10px 20px;*/
            position: fixed;
            top:0;
            width: 100%;
            height: auto;
            z-index: 1000;/* Assure-toi que la navbar soit au-dessus du contenu */
        }
        .left-navbar {
            top: 90px;
        }
        .lynx{
            position:relative;
            top:100px;
        }
        .profile-item {
            margin-top: auto; /* Envoie l'élément tout en bas */
        }
    </style>
</head> 

<body>
    <header>
        <div class="nabar">
            <div class="container">
                <a class="navbar-brand" href="/">FamilyBudget</a>
                <button class="navbar-toggler" id="navbar-toggler">
                    <span class="navbar-toggler-icon">herlin</span>
                </button>
                <div class="navbar-collapse" style="display:flex; flex-direction:row;">
                    @if (HttpContextAccessor.HttpContext.Session.GetInt32("IdUtilisateur") != null)
                    {
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            @if (!string.IsNullOrEmpty(userName))
                            {
                                <p>Bienvenue, @userName !</p>
                            }
                            else
                            {
                                <p>Bienvenue, invité !</p>
                            }
                        </li>
                        <li class="nav-item">
                            <a style=" text-decoration:none;" asp-controller="Compte" asp-action="Logout">Se deconnecter</a>
                            <!--<form asp-controller="Compte" asp-action="Logout" method="post" class="form-inline">-->
                                @*<input type="submit" class="nav-link btn btn-link text-dark" value="Se déconnecter"/>*@
                                
                            <!--</form>-->
                        </li>
                        @*<li class="nav-item">
            <form asp-controller="Compte" asp-action="Logout" method="post" class="form-inline">
                <button type="submit" class="nav-link btn btn-link text-dark">Se déconnecter</button>
            </form>
        </li>*@
                    </ul>
                    }
                    else
                    {
                        <ul class="navbar-nav">
                            <li class="nav-item">
                                <a class="nav-link text-dark" asp-controller="Compte" asp-action="Register">S'inscrire</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link text-dark" asp-controller="Compte" asp-action="Login">Se connecter</a>
                            </li>
                        </ul>
                    }
                </div>
            </div>
        </div>
    </header>

    @if (HttpContextAccessor.HttpContext.Session.GetInt32("IdUtilisateur") != null)
    {
        <header class="left-navbar show">
            <button style="font-weight:500;" onclick="toggleNavbar()">☰</button>
            <nav>
                <ul>
                    <li><a asp-controller="Acceuil" asp-action="Acceuil" class="menu-item"><p>🏠</p><span> Accueil</span></a></li>
                    <li><a asp-controller="Facture" asp-action="facture" class="menu-item"><p>💸</p><span> Dépenses</span></a></li>
                    <li><a asp-controller="Budget" asp-action="Budget" class="menu-item"><p>💰</p><span> Budget</span></a></li>
                    <li><a asp-controller="Bank" asp-action="bank" class="menu-item"><p>💳</p><span> Compte</span></a></li>
                    <li><a asp-controller="Depense" asp-action="Depense" class="menu-item"><p>🏦</p><span> Gestion des budgets</span></a></li>
                    <li><a asp-controller="Revenu" asp-action="revenu" class="menu-item"><p>📈</p><span> Revenus</span></a></li>
                    <li><a asp-controller="Acceuil" asp-action="Stats" class="menu-item"><p>📊</p><span> Statistique</span></a></li>
                    <li  class="profile-item"><a asp-controller="Utilisateur" asp-action="Details" class="menu-item"><p> 👤</p><span> Profil</span></a></li>
                   
                </ul>
            </nav>
        </header>
        <script>
            function toggleNavbar() {
                const left = document.querySelector('.left-navbar'); // La sidebar
                const navbar = document.querySelectorAll('.left-navbar nav ul li span'); // Tous les éléments <span> dans la sidebar
                const li = document.querySelectorAll('.left-navbar nav ul li p');
                // Itérer sur tous les éléments <span> pour les afficher ou les masquer
                if (left.style.width === "250px" || getComputedStyle(left).width === "250px") {
                    left.style.transition = "0.5s";
                    left.style.width = "50px";  // Réduire la largeur de la sidebar
                    navbar.forEach(function (span) {
                        span.style.display = "none"; // Masquer le texte
                    });
                } else {
                    // Afficher les spans et élargir la largeur de la sidebar
                    left.style.transition = "0.5s";
                    left.style.width = "250px";  // Rétablir la largeur complète
                    navbar.forEach(function (span) {
                        span.style.display = "inline"; // Afficher le texte
                    });

                }
            }

            document.querySelectorAll('.left-navbar nav ul li a').forEach(item => {
                item.addEventListener('click', function () {
                    // Enlève la classe 'selected' de tous les éléments
                    document.querySelectorAll('.left-navbar nav ul li a').forEach(link => {
                        link.classList.remove('selected');
                    });
                    // Ajoute la classe 'selected' à l'élément cliqué
                    this.classList.add('selected');
                });
            });
        </script>
    }

    <div class="container lynx">
        <main role="main">
            @RenderBody()
        </main>
    </div>
</body>
</html>
