{% extends 'baykeshop/base_site.html' %}

{% load i18n baykeshop %}

{% block main %}
    <section class="bk-section">
        <div class="bk-container">
            <div class="bk-box p-6">
                 <h1 class="bk-title bk-is-4">
                    <span class="bk-icon">
                        <i class="mdi mdi-map-marker-outline"></i>
                    </span>
                    {% translate '收货地址' %}
                </h1>
                <hr>
                {% address_template request.user %}
            </div>

            <div class="bk-box p-6">
                <h1 class="bk-title bk-is-4">
                    <span class="bk-icon">
                        <i class="mdi mdi-list-box-outline"></i>
                    </span>
                    {% translate '结算商品' %}
                </h1>
                <hr>
                {% for sku in skus %}
                    {% include 'baykeshop/shop/includes/cashskus.html' with sku=sku %}
                {% endfor %}
                <hr>
                <div class="bk-has-text-right px-6">
                    <div class="bk-is-size-4 bk-has-text-weight-bold bk-has-text-link">
                        <span class="">{{ count }}{% translate '件商品，总价' %}:</span>
                        <span class="is-size-3">￥{{ total|floatformat:"-2g"  }}</span>
                    </div>
                    <div class="mt-3">
                        <button class="bk-button bk-is-link bk-is-large" id="create-order-btn">
                            <span class="bk-icon">
                                <i class="mdi mdi-cart-arrow-right"></i>
                            </span>
                            
                            <span>{% translate '去支付' %}</span> 
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </section>
    {{ has_carts|json_script:'has-carts' }}
    {{ view.kwargs|json_script:'view-kwargs' }}
    {% paydata skus has_carts as payData %}
    {{ payData|json_script:'payData' }}
{% endblock %}

{% block javascript %}
<script>
    const url = "{% url 'baykeshop_api:orders-list' %}"
    const createOrderBtn = document.querySelector('#create-order-btn');
    const hasCarts = JSON.parse(document.getElementById('has-carts').textContent);
    // const viewKwargs = JSON.parse(document.getElementById('view-kwargs').textContent);
    const payData = JSON.parse(document.getElementById('payData').textContent);

    createOrderBtn.addEventListener('click', function(e) {
        e.preventDefault();
        data = {
            receiver: userAddress.selectedAddress.name,
            phone: userAddress.selectedAddress.phone,
            address: userAddress.getFullAddress(userAddress.selectedAddress),
            baykeshopordersgoods_set: payData,
            source: 'carts'
        }
        fetch(url, {
            method: 'POST',
            headers: {
                'X-CSRFToken': bayke.csrftoken,
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(data)
        })
        .then(response => {
            console.log('response', response)
            return response.json()
        }).then(data => {
            console.log('data', data)
            window.location.href = data.pay_url
        })
        
    })
</script>
{% endblock %}
    