url = "/checkout"
layout = "mainN"
title = "Checkout"
==
{%partial "bread" title='checkout.title'|_ %}
<div class="ltn__checkout-area mb-100">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="ltn__checkout-inner">
                    <div class="ltn__checkout-single-content ltn__coupon-code-wrap">
                        <h5>{{'checkout.select.addr'|_}} <a class="ltn__secondary-color"
                                href="checkout.html#ltn__coupon-code"
                                data-bs-toggle="collapse">{{'checkout.new.addr'|_}}</a></h5>
                        <div id="ltn__coupon-code" class="collapse ltn__checkout-single-content-info">
                            <div class="ltn__coupon-code-form">
                                <form data-request="onAddAddress">
                                    <input type="text" name="new_addr" placeholder="{{'checkout.address.add'|_}}">
                                    <button type="submit" class="btn theme-btn-2 btn-effect-2 text-uppercase">{{'add.btn'|_}}</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="ltn__checkout-payment-method mt-50">

                    <div id="checkout_accordion_1">


                    </div>

                    <div class="row">
                        <div class="col-md-5 mt-30">
                            <h6>{{'checkout.select.payment.type'|_}}</h6>
                            <div class="input-item">
                                <select class="nice-select" onchange="savePayment(this.value);">
                                    <option value="cash100">{{'cash.payment'|_}}</option>
                                    <option value="terminal100">{{'cart.payment'|_}}</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-7">
                            <div class="shoping-cart-total mt-50">
                                <h4 class="title-2">{{'checkout.cart.total'|_}}</h4>
                                <table class="table">
                                    <tbody id="checkout_cart">



                                    </tbody>
                                    <tfooter>
                                        <tr>
                                            <td><strong>{{'checkout.order.total'|_}}</strong></td>
                                            <td><strong id="checkout_total">0.00 TMT</strong></td>
                                        </tr>
                                    </tfooter>
                                </table>
                            </div>
                        </div>
                    </div>


                    <div class="ltn__payment-note mt-30 mb-30">

                    </div>
                    <button {% if nurgulToken != "" %} data-request="onSaveOrder" {% endif %} class="btn theme-btn-1 btn-effect-1 text-uppercase"
                        type="button">{{'place.order'|_}}</button>
                </div>
            </div>
        </div>
    </div>
</div>

{% if nurgulToken != "" %}
{% put scripts %}
<script>
    oc.ajax('onGetCart', {
        success: function (data) {
            if (data.data != null) {
                var cart = data.data;

                $('#checkout_total').html(cart.formatted_grand_total);

                for (var cart of cart.vendors["nurgulShop"]) {
                        $('#checkout_cart').append(`
                        <tr>
                            <td>` + cart.product.name + `<strong>× `+ cart.additional.quantity + `</strong></td>
                            <td>` + cart.formatted_total + `</td>
                        </tr>
                        `);
                }

            }
        }
    })


    oc.ajax('onGetAddress', {
        success: function (data) {
            if (data.data != null) {
                var addrs = data.data;
                console.log(addrs[0]);

                oc.ajax('onSaveShipping', {
                    data: { selected_address: addrs[0].address1[0] },
                    success: function (data) {
                        console.log(data);
                    }
                })

                oc.ajax('onSavePayment', {
                    data: { payment: 'cash100' },
                    success: function (data) {
                        console.log(data);
                    }
                })


                for (var i = 0, len = addrs.length; i < len; i++) {
                    // console.log(product.hasOwnProperty('special_price'));
                    $('#checkout_accordion_1').append(`
                        <div class="card" onclick="saveShipping('`+ addrs[i].address1[0] +`');">
                            <h5 class="collapsed ltn__card-title" data-bs-toggle="collapse"
                                data-bs-target="#faq-item-2-`+ (i + 1) + `" aria-expanded="` + (i == 0 ? `true` : `false`) + `">
                                #`+ (i + 1) + ` {{'addr.title.select'|_}}
                            </h5>
                            <div id="faq-item-2-`+ (i + 1) + `" class="collapse ` + (i == 0 ? `show` : ``) + `" data-bs-parent="#checkout_accordion_1">
                                <div class="card-body">
                                    <p>`+ addrs[i].address1[0] + `</p>
                                </div>
                            </div>
                        </div>
                    `);
                }

            }
        }
    })


    function saveShipping(addr) {
        oc.ajax('onSaveShipping', {
            data: { selected_address: addr },
            success: function (data) {
                console.log(data);
                oc.flashMsg({
                    message: "{{'selected.address.success'|_}}",
                    type: 'success',
                    interval: 3
                });
            }
        })
    }

    function savePayment(paymentS) {
        oc.ajax('onSavePayment', {
            data: { payment: paymentS },
            success: function (data) {
                console.log(data);
                oc.flashMsg({
                    message: "{{'selected.payment.success'|_}}",
                    type: 'success',
                    interval: 3
                });
            }
        })
    }


</script>
{% endput %}
{% endif %}
