{% extends "layout.html" %}

{% set title = 'Shopping Cart' %}

{% block content %}

<section class="sec-pad-sm npt">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                {% include 'component/search.html' %}
            </div>
        </div>
    </div>
</section>

<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-bold">Products</h3>
                </div>
                <div class="col-md-2 col-sm-3">
                    <h3 class="no-margin text-bold">Details</h3>
                </div>
                <div class="col-md-2 col-sm-3 col-md-offset-4">
                    <h3 class="no-margin text-bold">Qty</h3>
                </div>
                <div class="col-md-2 col-sm-3">
                    <h3 class="no-margin text-bold 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">
                                <div class="shop-content item-shop-img vcenter">
                                    <img src="_assets/img/products/06.jpg" alt="">
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-8">
                            <div class="shop-content vcenter">
                                <h4 class="no-margin text-bold">
                                    <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">
                                <div class="shop-content item-shop-img vcenter">
                                    <img src="_assets/img/products/03.jpg" alt="">
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-8">
                            <div class="shop-content vcenter">
                                <h4 class="no-margin text-bold">
                                    <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">egp</sub></h3>
                            <span class="d-block text-right">from 5 to 15 EGP based on the zone</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="pull-right mtxxlg shopping-btn">
            <a href="store.html" class="btn btn-orange-outline mrlg capitalize">continue shopping</a>
            <a href="place-order.html" class="btn btn-orange capitalize">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 %}