@model WebVentaCoche.Models.Product

<div class="container">
    <h2 class="text-center my-4">@Model.Name</h2>

    <div class="row">
        <div class="col-12 mb-4">
            <div class="card" style="background-color: rgba(255, 255, 255, 0.8); border-radius: 10px;">
                <div class="row g-0">
                    <div class="col-md-8">
                        <div class="card-body">
                            <p>@Model.LongDescription</p>
                            <div class="d-flex justify-content-between align-items-center">
                                <p><strong>Precio:</strong> @Model.Price €</p>
                                <!-- Formulario sin "submit" tradicional -->
                                <form id="addToCartForm">
                                    <input type="hidden" name="id" value="@Model.Id" />
                                    <button type="submit" class="btn btn-primary">Añadir al carrito</button>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 d-flex align-items-center">
                        @if (!string.IsNullOrEmpty(Model.ImagePath))
                        {
                            <img src="@Model.ImagePath" class="img-fluid rounded m-3" alt="@Model.Name" />
                        }
                        else
                        {
                            <img src="/images/default.png" class="img-fluid rounded m-3" alt="Imagen no disponible" />
                        }
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const form = document.getElementById("addToCartForm");
            form.addEventListener("submit", function (event) {
                event.preventDefault();

                let url = '@Url.Action("AddProductToCart", "Cart")';
                let formData = new FormData(form);

                fetch(url, {
                    method: 'POST',
                    body: formData
                })
                    .then(response => {
                        if (!response.ok) {
                            throw new Error("Error en la respuesta del servidor");
                        }
                        return response.json();
                    })
                    .then(data => {
                        if (data.success) {
                            // Mensaje opcional
                            alert("¡Producto añadido al carrito!");

                            // 1) Obtener el span (o elemento) que muestra el contador
                            //    Por ejemplo, un <span> con id="cartCountSpan".
                            const badgeElement = document.getElementById("cartCountSpan");

                            // 2) Actualizar el contenido del badge
                            badgeElement.innerText = data.cartCount;

                            // 3) Mostrarlo si está oculto (si data.cartCount > 0)
                            if (data.cartCount > 0) {
                                badgeElement.parentElement.classList.remove("d-none");
                                // Asumiendo que envuelves el badge en un contenedor con "d-none" cuando es 0
                            }
                        }
                    })
                    .catch(error => {
                        console.error(error);
                        alert("Ocurrió un error al añadir el producto al carrito.");
                    });
            });
        });
    </script>
}

