{% extends "layout.html" %}

{% set title = 'Shopping' %}

{% block content %}


<section class="sec-pad npt">
    <div class="container">
        <div class="shop-head shopping-head">
            <div class="row">
                <div class="col-md-2 col-sm-3">
                    <h3 class="no-margin text-semibold">Products</h3>
                </div>
                <div class="col-md-2 col-sm-3">
                    <h3 class="no-margin text-semibold">Details</h3>
                </div>
                <div class="col-md-2 col-sm-3 col-md-offset-4">
                    <h3 class="no-margin text-semibold">Qty</h3>
                </div>
                <div class="col-md-2 col-sm-3">
                    <h3 class="no-margin text-semibold text-right">Total Price</h3>
                </div>
            </div>
        </div>
        <div class="single-item ptxxlg pbxxlg">
            <div class="row">
                <div class="col-lg-6 col-md-7 col-sm-6">
                    <div class="row">
                        <div class="col-sm-4">
                            <div class="item-shop cover" style="background-image: url('_assets/img/products/product.jpg')"></div>
                        </div>
                        <div class="col-sm-8">
                            <div class="shop-content vcenter">
                                <h4 class="no-margin text-semibold">
                                    <a href="product.html">
                                        Johnson's Shiny Drops, Kids Shampoo, Wit a touch of silk proteins, 500 ml
                                    </a>
                                </h4>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-4 col-xs-9 col-lg-offset-1">
                    <div class="shop-content vcenter">
                        <a href="#" class="d-block mrxxlg"><i class="fas fa-trash"></i></a>
                        <div class="qty">
                            <div class="qty-content">
                                <a href="#" class="qty-btn qty-minus text-bold">-</a>
                                <input type="number" id="qty" value="2">
                                <a href="#" class="qty-btn qty-plus text-bold">+</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-2 col-xs-3">
                    <div class="shop-content end vcenter">
                        <h3 class="price text-right no-margin">
                            102 EGP
                        </h3>
                    </div>
                </div>
            </div>
        </div>
        <div class="single-item ptxxlg pbxxlg">
            <div class="row">
                <div class="col-lg-6 col-md-7 col-sm-6">
                    <div class="row">
                        <div class="col-sm-4">
                            <div class="item-shop cover" style="background-image: url('_assets/img/products/product.jpg')"></div>
                        </div>
                        <div class="col-sm-8">
                            <div class="shop-content vcenter">
                                <h4 class="no-margin text-semibold">
                                    <a href="product.html">
                                        Bed Head, stunning value, prix sensational, 500 ml
                                    </a>
                                </h4>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-4 col-xs-9 col-lg-offset-1">
                    <div class="shop-content vcenter">
                        <a href="#" class="d-block mrxxlg"><i class="fas fa-trash"></i></a>
                        <div class="qty">
                            <div class="qty-content">
                                <a href="#" class="qty-btn qty-minus text-bold">-</a>
                                <input type="number" id="qty-1" value="2">
                                <a href="#" class="qty-btn qty-plus text-bold">+</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-2 col-xs-3">
                    <div class="shop-content end vcenter">
                        <h3 class="price text-right no-margin">
                            52 EGP
                        </h3>
                    </div>
                </div>
            </div>
        </div>
        <div class="single-item ptmd pbmd">
            <div class="row">
                <div class="col-md-2 col-sm-3 col-xs-3 col-md-offset-6 col-sm-offset-4">
                    <div class="shop-content vcenter">
                        <div>
                            <span class="d-block mblg">Total:</span>
                            <span class="d-block">Delivery Fees:</span>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-sm-5 col-xs-6 pull-right">
                    <div class="shop-content end vcenter">
                        <div>
                            <h3 class="price total text-right no-margin text-bold mblg">152 <sub class="text-upper">SAR</sub></h3>
                            <span class="d-block text-right">from 5 to 15 SAR based on the zone</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="pull-right mtxxlg shopping-btn">
            <a href="store.html" class="btn btn-green-outline mrlg capitalize d-inline">continue shopping</a>
            <a href="place-order.html" class="btn btn-green capitalize d-inline">check out</a>
        </div>
    </div>
</section>

{% endblock content %}

{% block JS %}
<script>
    // SHOPPING CART PLUS OR MINUS
    $('a.qty-minus').on('click', function(e) {
        e.preventDefault();
        var $this = $(this);
        var $input = $this.closest('div').find('input');
        var value = parseInt($input.val());

        if (value > 1) {
            value = value - 1;
        } else {
            value = 0;
        }

        $input.val(value);

    });

    $('a.qty-plus').on('click', function(e) {
        e.preventDefault();
        var $this = $(this);
        var $input = $this.closest('div').find('input');
        var value = parseInt($input.val());

        if (value < 100) {
            value = value + 1;
        } else {
            value =100;
        }

        $input.val(value);
    });
</script>
{% endblock %}