{% extends 'base.html' %}
{% load static %}

{% block content %}
    <div class="row">
        <div class="col-lg-6">
            <div class="box-element" id="form-wrapper">
                <form id="form">
                    <div id="user-info">
                        <div class="mb-3">
                            <input class="form-control" type="text" name="name" placeholder="Nome Completo">
                        </div>
                        <div class="mb-3">
                            <input class="form-control" type="email" name="email" placeholder="Email">
                        </div>
                    </div>

                    <div id="shipping-info">
                        <hr>
                        <p>Informações de Envio:</p>
                        <div class="mb-3">
                            <input class="form-control" type="text" name="address" placeholder="Endereço">
                        </div>
                        <div class="mb-3">
                            <input class="form-control" type="text" name="city" placeholder="Cidade">
                        </div>
                        <div class="mb-3">
                            <input class="form-control" type="text" name="state" placeholder="Estado">
                        </div>
                        <div class="mb-3">
                            <input class="form-control" type="text" name="zipcode" placeholder="CEP">
                        </div>
                    </div>

                    <hr>
                    <input id="form-button" class="btn btn-success btn-block" type="submit" value="Continuar">
                </form>
            </div>

            <br>
            <div class="box-element hidden" id="payment-info">
                <small>Opções de Pagamento</small>
                <button id="make-payment">Fazer Pagamento</button>
            </div>
        </div>

        <div class="col-lg-6">
            <div class="box-element">
                <a class="btn btn-outline-dark" href="{% url 'carrinho' %}">&#x2190; Voltar ao Carrinho</a>
                <hr>
                <h3>Resumo do Pedido</h3>
                <hr>
                {% for item in itens %}
                <div class="cart-row">
                    <div style="flex:2"><img class="row-image" src="{{ item.produto.imagem.url }}"></div>
                    <div style="flex:2"><p>{{ item.produto.nome }}</p></div>
                    <div style="flex:1"><p>R${{ item.produto.valor|floatformat:2 }}</p></div>
                    <div style="flex:1"><p>x{{ item.quantidade }}</p></div>
                    <div style="flex:1"><p>R${{ item.get_total|floatformat:2 }}</p></div>
                </div>
                {% endfor %}
                <h5>Itens: {{ pedido.get_carrinho_itens }}</h5>
                <h5>Total: R${{ pedido.get_carrinho_total|floatformat:2 }}</h5>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        var shipping = true

        if (shipping == false) {
            document.getElementById("shipping-info").classList.add("hidden")
        }

        var form = document.getElementById("form")

        form.addEventListener("submit", function(e) {
            e.preventDefault()
            console.log("Form Submitted...")
            document.getElementById("form-button").classList.add("hidden")
            document.getElementById("payment-info").classList.remove("hidden")
        })

        document.getElementById("make-payment").addEventListener("click", function(e) {
            submitFormData()
        })

        function submitFormData() {
            console.log("Payment button clicked")

            var userFormData = {
                "name": null,
                "email": null,
                "total": total,
            }

            if (shipping != false) {
                userFormData.address = form.address.value
                userFormData.city = form.city.value
                userFormData.state = form.state.value
                userFormData.zipcode = form.zipcode.value
            }

            var url = "/process_order/"
            fetch(url, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "X-CSRFToken": csrftoken,
                },
                body: JSON.stringify({"form": userFormData})
            })
            .then((response) => response.json())
            .then((data) => {
                console.log("Success:", data)
                alert("Transação Completa!")
                window.location.href = "{% url 'home' %}"
            })
        }
    </script>
{% endblock content %}