@*@model IEnumerable<FamilyBudget.Models.Depense>
    @{
        ViewData["Title"] = "Recherche Dynamique";
    }
    <link rel="stylesheet" href="~/css/deps.css" />
    <h2>🔍 Recherche Dynamique</h2>

    <div class="container">
        <input type="text" id="searchInput" class="search-bar" placeholder="Rechercher une dépense...">

        <div class="card-container">
            @foreach (var depense in Model)
            {
                <div class="card">
                    <h3>@depense.IdBudgetNavigation.Categorie</h3>
                    <p><strong>💰 Montant:</strong> @depense.Montant FCFA</p>
                    <p><strong>📅 Date:</strong> @depense.DateDepense.ToString("dd/MM/yyyy")</p>
                </div>
            }
        </div>
    </div>

    <script>
        document.getElementById("searchInput").addEventListener("keyup", function () {
            let searchValue = this.value.toLowerCase();
            document.querySelectorAll(".card").forEach(card => {
                let text = card.textContent.toLowerCase();
                card.style.display = text.includes(searchValue) ? "block" : "none";
            });
        });
    </script>*@


@model IEnumerable<FamilyBudget.Models.Depense>
@{ 
    ViewData["Title"] = "Recherche Dynamique"; 
}
<link rel="stylesheet" href="~/css/deps.css" />
<h2>🔍 Recherche Dynamique</h2>

<div class="container">
    <!-- Formulaire de recherche -->
    <form method="get" asp-action="Search">
        <input type="text"
               name="searchQuery"
               id="searchInput"
               class="search-bar"
               placeholder="Rechercher une dépense..."
               value="@ViewData["searchQuery"]" />
        <button type="submit" class="btn btn-primary mt-2">Rechercher</button>
    </form>

    <div class="card-container">
        @if (Model.Any())
        {
            @foreach (var depense in Model)
            {
                <div class="card">
                    <h3>@depense.IdBudgetNavigation.Categorie</h3>
                    <p><strong>💰 Montant:</strong> @depense.Montant FCFA</p>
                    <p><strong>📅 Date:</strong> @depense.DateDepense.ToString("dd/MM/yyyy")</p>
                </div>
            }
        }
            else
            {
<p>Aucune dépense ne correspond à votre recherche.</p>}
    </div>
</div>