$(document).ready(function () {
    $("#comprar").on("click", async function (e) {
        e.preventDefault();
        $("#store-response").empty();

        let button = $(this);
        let originalText = button.html();
        button.html("Procesando pago...");
        button.prop("disabled", true);

        let personaje = $("#personaje").val();
        if (!personaje) {
            $("#store-response").append('<span class="red-form-response">Selecciona un personaje antes de comprar.</span>').hide().slideDown();
            button.html(originalText);
            button.prop("disabled", false);
            return;
        }

        let carrito = [];
        $("#carrito li").each(function () {
            let itemData = $(this).data("item");
            carrito.push({
                item_id: itemData.item_id,
                name: itemData.name,
                price: itemData.price
            });
        });

        if (carrito.length === 0) {
            $("#store-response").append('<span class="red-form-response">El carrito está vacío.</span>').hide().slideDown();
            button.html(originalText);
            button.prop("disabled", false);
            return;
        }

        // Realizar la solicitud para crear la sesión de pago en el backend
        try {
            const response = await fetch("{% url 'create_checkout_session' %}", {
                method: "POST",
                body: new URLSearchParams({
                    personaje: personaje,
                    carrito: JSON.stringify(carrito)
                })
            });

            const data = await response.json();
            if (data.success) {
                window.location.href = data.stripe_url;  // Redirigir a la página de pago de Stripe
            } else {
                $("#store-response").append(`<span class="red-form-response">${data.message}</span>`).hide().slideDown();
            }
        } catch (error) {
            console.error("Error al procesar el pago:", error);
            $("#store-response").append('<span class="red-form-response">Error al procesar el pago.</span>').hide().slideDown();
        }

        button.html(originalText);
        button.prop("disabled", false);
    });
});
$("#categoria").on("change", function () {
    let categoriaSeleccionada = $(this).val();
    if (categoriaSeleccionada) {
        $.ajax({
            url: "{% url 'get_items_by_category' %}",
            method: "GET",
            data: { category: categoriaSeleccionada },
            success: function (data) {
                $("#items-container").empty();
                if (data.items.length > 0) {
                    data.items.forEach(function (item) {
                        let itemHtml = `
                            <div class="item">
                                <img src="${item.image_url}" alt="${item.name}" />
                                <h4>${item.name}</h4>
                                <p>Price: ${item.price} EUR</p>
                                <button class="add-to-cart" data-item-id="${item.item_id}">Add to Cart</button>
                            </div>
                        `;
                        $("#items-container").append(itemHtml);
                    });
                } else {
                    $("#items-container").append('<p>No items found in this category.</p>');
                }
            },
            error: function () {
                alert("Error loading items.");
            }
        });
    }
});