{%set active_page = 'shop.html'%}
{% extends "shop/base.html" %}
{% block pagehead %}
<style type="text/css">

.quantity{
    -webkit-appearance: none !important;
    margin: 0 !important;
    -moz-appearance: textfield !important;
}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
#cart-items{
    min-width: 200px;
}

</style>
{% endblock %}
{% block content %}
<div class="shop-spacer-1">
</div>
<nav aria-label="breadcrumb ">
  <ol class="breadcrumb bg-white">
    <li class="breadcrumb-item"><a href="{{ url_for('www.index') }}">Home</a></li>
    <li class="breadcrumb-item "><a href="{{ url_for('shop.index') }}">Shop</a></li>
    <li class="breadcrumb-item active">Cart</li>
  </ol>
</nav>
<div>
    <div class="container" style="background-color: #">
        
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-7 col-xs-5">
                            <form method="POST" action="{{ url_for('shop.cart_update') }}">
                                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                            <table class="table table-responsive" id="cart-items">
                                <thead>
                                    <th></th>
                                    <th>Product</th>
                                    <th>Quantity</th>
                                    <th>Price</th>
                                    <th>Subtotal</th>
                                </thead>
                                <tbody >
                                    {%for item in cart_data%}
                                        {%set product = get_product(item)%}
                                        
                                            
                                        <tr>
                                            <input type="hidden" name="barcode_{{ loop.index }}" value="{{ product.barcode }}" class="barcode">
                                            <td><a href="{{ url_for('shop.cart_remove', product_barcode=product.barcode) }}">
                                                <i style="color: #ff6565;" class="fa fa-times-circle"></i>
                                            </a></td>
                                            <td>{{product.name}}</td>
                                            <td>
                                            
                                            <div class="input-group mb-3">
                                        <div class="input-group-prepend" >
                                            <button type="button" class="btn btn-primary input-group-text minus-btn">-</button>
                                        </div>
                                        <input class="form-control quantity" aria-label="Amount (to the nearest )" min="0" max="{{ product.in_stock }}" name="quantity_{{ loop.index }}" value="{{cart_data[item]}}" type="number" >
                                        <div class="input-group-append" >
                                            <button type="button" class="btn btn-primary input-group-text plus-btn">+</button>
                                        </div>
                                    </div>
                                        <input type="hidden" name="" class="in_stock" value="{{product.in_stock}}">
                                        </td>
                                            <td class="price">{{product.selling_price}}</td>
                                            <td class="total_price">{{product.selling_price * cart_data[item]}}</td>
                                        </tr>
                                        
                                    {%endfor%}
                                </tbody>
                            </table>
                            <div>
                                <button class="btn btn-primary" type="button"><a href="{{ url_for('shop.index') }}">
                                    
                                    <- Continue shopping
                                </a></button>
                                <button class="btn btn-primary" type="submit">Update Cart</button>
                            </div>
                            </form>
                            <br><br>
                        </div>
                        <div class="col-md-5 col-xs-3">
                            <h3>Cart Totals</h3><hr>
                            <p>
                                <span>Subtotal: {{ get_currency_symbol() }}<span id="subtotal">{{ cart_total_price }}</span></span>
                                <span></span>
                            </p>
                            <div>
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <b>Shipping</b>
                                        </tr>
                                        <tr>
                                            <th></th>
                                            <th>option</th>
                                            <th>price</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {%for option in delivery_options%}
                                        <tr>
                                            <th><input class="form-check-input" type="radio" id="option_{{ option.id }}" name="option" value="{{option.price}}" {{'checked' if loop.index == 1}}></th>
                                            <td style="min-width: 200px">{{option.option}}</td>
                                            <td>{{option.price}}</td>
                                        </tr>
                                        {%endfor%}
                                    </tbody>
                                </table>
                            </div>
                            <p>
                                <span>Total: {{ get_currency_symbol() }}<span id="grandtotal"></span></span>
                                <span></span>
                            </p>
                            <p>
                                <button type="button" id='checkoutbut' class="btn btn-primary">CHECKOUT</button>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
    </div>
</div>

<script type="text/javascript">
/*
$(reciviedXml).find('p').each(function () {
    var paragraph = $(this).text();

    //do something useful with paragraph
    console.log(paragraph);
});
*/
    function subtotal() {
    var tbl = $("#cart-items .total_price");

        sumVal = 0;

    for (var i = 0; i < tbl.length; i++) {
        // console.log(tbl[i].textContent);
      sumVal += parseFloat(tbl[i].textContent);
    }
    return sumVal
  }

    sum_price = subtotal();
    var option_price = parseFloat($('input[type=radio][name=option]:checked').val());
    $('#grandtotal').text(sum_price+option_price);
    $('.plus-btn').click(function(){
        var row = $(this).parent().parent().parent().parent();
        var in_stock_val = $(row).find('.in_stock').val();
        var quantity_input = $(row).find('.quantity');
        
        if (parseFloat(quantity_input.val())+1 <= parseFloat(in_stock_val)){
            quantity_input.val(parseFloat(quantity_input.val())+1);

            var total_price_td = $(row).find('.total_price');
            var price_td = $(row).find('.price');


            // console.log(quantity_input.val(), price_td.text());

            total_price_td.text(parseFloat(quantity_input.val()) * parseFloat(price_td.text()));

            sum_price = subtotal();
            $('#subtotal').text(sum_price);
            var option_price = parseFloat($('input[type=radio][name=option]:checked').val());
            $('#grandtotal').text(sum_price+option_price);
        }
        

    });
    $('.minus-btn').click(function(){
        var row = $(this).parent().parent().parent().parent();
        var quantity_input = $(row).find('.quantity');
        if(parseFloat(quantity_input.val())-1 >= 0){
            quantity_input.val(parseFloat(quantity_input.val())-1);

            var total_price_td = $(row).find('.total_price');
            var price_td = $(row).find('.price');


            // console.log(quantity_input.val(), price_td.text());

            total_price_td.text(parseFloat(quantity_input.val()) * parseFloat(price_td.text()));

            
            var sum_price = subtotal();
            $('#subtotal').text(sum_price);
            var option_price = parseFloat($('input[type=radio][name=option]:checked').val());
            $('#grandtotal').text(sum_price+option_price);
            
        }

    });

    $('input[type=radio][name=option]').change(function() {
        var subtotal = parseFloat($('#subtotal').text());
        var option_price = parseFloat(this.value);
        $('#grandtotal').text(subtotal+option_price);
    });
</script>
<script type="text/javascript">
    $('#checkoutbut').click(function (){
        var csrf_token = "{{ csrf_token() }}";
        var option_id = $('input[type=radio][name=option]:checked').attr('id');
        var cart = {};
        $('#cart-items .barcode').each(function () {
            var barcode = $(this).val();
            var row = $(this).parent();
            var quantity_input = $(row).find('.quantity');
            var quantity = quantity_input.val();
            cart[barcode] = quantity;
        });
        var post_data = {
            'option_id': option_id,
            'cart': cart
        };
        $.ajax({
            type: "POST",
            url: "{{ url_for('shop.prepare_checkout') }}",
            // The key needs to match your method's input parameter (case-sensitive).
            data: JSON.stringify(post_data),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(data){
                // alert(JSON.stringify(data));
                // window.location.reload();
                // return false;
                window.location.href = data['goto'];
            },
            failure: function(errMsg) {
                alert(errMsg);
            },
            beforeSend: function(xhr, settings) {
                if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type) && !this.crossDomain) {
                    xhr.setRequestHeader("X-CSRFToken", "{{csrf_token()}}")
                }
            }
        });
    });
    
</script>
{% endblock %}