@model FamilyBudget.Models.Compte

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Accueil - Gestion Budget</title>
    <link rel="stylesheet" href="~/css/welcome.css">
    <style>
        .stat-card p a {
            text-decoration: none;
            color: black;
        }

        .depense {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            margin-top: 2rem;
            padding:10px;
            animation: pulse 1s ease-in-out;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
            border-radius: 10px;
            width: auto;
            height: auto;
        }
        .diag {
            width: 300px;
            height: 300px;
        }
        .diag canvas {
            margin: 1rem;
        }
        .diage {
            width: 500px;
            height: 800px;
        }

            .diage canvas {
                margin: 1rem;
            }
    </style>
</head>
<body>

    <main>
        <section class="dashboard">
            <h1>Tableau de bord</h1>
            <div class="stats">
                @if (Model != null)
                {
                    var s = @Model.Solde;
                    <div class="stat-card">
                        <h2>Solde Disponible</h2>
                        <p>@Model.Solde FCFA</p>
                    </div>

                    if (@Model.Solde >= 0)
                    {
                        <div class="stat-card">
                            <h2>@Model.Type</h2>
                            <p>@(Model.Solde + ViewBag.TotalDepenses + ViewBag.Totalfacture) FCFA</p>
                        </div>
                    }
                    else
                    {
                        <div class="stat-card">
                            <h2>Compte</h2>
                            <p>0 FCFA</p>
                        </div>
                    }

                    <div class="stat-card">
                        <h2>Dépenses Récentes</h2>
                        <p>
                            <a asp-controller="Depense" asp-action="DetailAll">
                                -@(ViewBag.TotalDepenses + ViewBag.Totalfacture) FCFA
                            </a>
                        </p>
                    </div>

                    <!-- Condition pour afficher le pop-up -->
                    @if (Model.Solde < 10000)
                    {
                        <div id="popupBackground">
                            <div id="popupContent">
                                <span class="close-btn" onclick="closePopup()">❌</span>
                                <p>votre solde est inférieur à 10 000 FCFA !</p>
                            </div>
                        </div>

                        <script>
                            document.addEventListener("DOMContentLoaded", function () {
                                let popupBg = document.getElementById("popupBackground");
                                let popupContent = document.getElementById("popupContent");

                                popupBg.style.display = "block";
                                setTimeout(() => {
                                    popupBg.style.opacity = "1";
                                    popupContent.style.opacity = "1";
                                }, 50);
                            });

                            function closePopup() {
                                let popupBg = document.getElementById("popupBackground");
                                let popupContent = document.getElementById("popupContent");

                                popupContent.style.opacity = "0";
                                popupBg.style.opacity = "0";
                                setTimeout(() => {
                                    popupBg.style.display = "none";
                                }, 500);
                            }
                        </script>
                    }
                }
                else
                {
                    <div class="herlin">
                        <p>
                            <a asp-controller="Bank" asp-action="Create">
                                Aucun compte créé pour l'instant !
                            </a>
                        </p>
                    </div>
                }
            </div>
        </section>
    </main>
    <div class="depense">

        <div class="diag">
            <canvas id="pieChart"></canvas>
        </div>
        <div class="diage">
            <canvas id="barChart"></canvas>
        </div>

    </div>
    

    <script src="~/js/chart.js"></script>

    <script>
        fetch('/Acceuil/GetDepensesParCompte')
            .then(response => response.json())
            .then(data => {
                const ctx = document.getElementById('pieChart').getContext('2d');
                new Chart(ctx, {
                    type: 'pie',
                    data: {
                        labels: data.labels,  // Types de comptes
                        datasets: [{
                            label: 'Dépenses par Compte (FCFA)',
                            data: data.values,  // Montants dépensés
                            backgroundColor: ['red', 'blue', 'green', 'orange', 'purple']
                        }]
                    }
                });
            });

        fetch('/Acceuil/GetDepensesParMois')
            .then(response => response.json())
            .then(data => {
                const ctx = document.getElementById('barChart').getContext('2d');
                new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: data.labels,  // Mois
                        datasets: [{
                            label: 'Dépenses par mois (FCFA)',
                            data: data.values,  // Montants
                            backgroundColor: 'rgba(255, 99, 132, 0.5)',
                            borderColor: 'rgba(255, 99, 132, 1)',
                            borderWidth: 1
                        }]
                    }
                });
            });
    </script>

</body>
</html>
