{% extends "layout.html" %}

{% set title = 'Tie Neck Puffed Sleeves Blouse' %}

{% block content %}

<div class="container">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">Home</a></li>
            <li class="breadcrumb-item"><a href="products.html">Blouses</a></li>
            <li class="breadcrumb-item active" aria-current="page">Tie Neck Puffed Sleeves Blouse</li>
        </ol>
    </nav>

    <div class="row">
        <div class="col-sm-6">
            <div class="product-slider">
                <div class="product-img cover" style="background-image: url('_assets/img/products/01.jpg')"></div>
                <div class="product-img cover" style="background-image: url('_assets/img/products/02.jpg')"></div>
                <div class="product-img cover" style="background-image: url('_assets/img/products/03.jpg')"></div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="product-details">
                <h2>Tie Neck Puffed Sleeves Blouse</h2>
                <div class="mini-details">
                    <div class="pull-left">
                        <span class="sn text-upper">SKU:  B133-B-38 9 </span>
                    </div>
                    <div class="pull-right">
                        <span class="srp text-upper mrxlg">srb  150 usd </span>
                        <span class="price">
                            <span class="discount text-upper mrsm">1500 usd</span>
                            <span class="current text-upper">1200 usd</span>
                        </span>
                    </div>
                </div>
                <form action="">
                    <div class="mbsm">
                        <span class="radio-label mtmd mrmd">Color</span>
                        <div class="radio-custom mrmd">
                            <input type="radio" name="payment" value="" id="black" class="form-checkbox pull-left">
                            <label for="black" class="pull-left">Black</label>
                        </div>
                        <div class="radio-custom">
                            <input type="radio" name="payment" value="" id="white" class="form-checkbox pull-left">
                            <label for="white" class="pull-left">White</label>
                        </div>
                    </div>
                    <div class="size mbsm">
                        <span class="radio-label mtmd mrmd">Size</span>
                        <div class="radio-custom mrsm">
                            <input type="radio" name="size" value="" id="38" data-value="38" class="form-checkbox pull-left">
                        </div>
                        <div class="radio-custom mrsm">
                            <input type="radio" name="size" value="" id="40" data-value="40" class="form-checkbox pull-left">
                        </div>
                        <div class="radio-custom mrsm">
                            <input type="radio" name="size" value="" id="42" data-value="42" class="form-checkbox pull-left">
                        </div>
                        <div class="radio-custom mrsm">
                            <input type="radio" name="size" value="" id="44" data-value="44" class="form-checkbox pull-left" disabled>
                        </div>
                        <div class="radio-custom mrsm">
                            <input type="radio" name="size" value="" id="46" data-value="46" class="form-checkbox pull-left">
                        </div>
                        <div class="radio-custom mrsm">
                            <input type="radio" name="size" value="" id="50" data-value="50" class="form-checkbox pull-left">
                        </div>
                        <div class="radio-custom mrsm">
                            <input type="radio" name="size" value="" id="52" data-value="52" class="form-checkbox pull-left">
                        </div>
                    </div>
                    <div class="cta mbsm">
                        <div class="qty mrmd">
                            <span class="mrsm">Qty</span>
                            <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 class="action-btns">
                            <button class="btn-cart text-upper mrsm">
                                <img src="_assets/img/icons/cart.png" class="mrxs" alt="">
                                <span>Add to cart</span>
                            </button>
                            <div class="icon-action favorite mrsm">
                                <div class="btn-wrapper">
                                    <a href="#" class="btn btn-main">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 471.7 471.7">
                                            <path d="M433.6,67c-24.7-24.7-57.4-38.2-92.3-38.2s-67.7,13.6-92.4,38.3L236,80l-13.1-13.1c-24.7-24.7-57.6-38.4-92.5-38.4
                                            c-34.8,0-67.6,13.6-92.2,38.2C13.5,91.4-0.1,124.2,0,159.1c0,34.9,13.7,67.6,38.4,92.3l187.8,187.8c2.6,2.6,6.1,4,9.5,4
                                            s6.9-1.3,9.5-3.9l188.2-187.5c24.7-24.7,38.3-57.5,38.3-92.4C471.8,124.5,458.3,91.7,433.6,67z M414.4,232.7l-178.7,178L57.4,232.4
                                            C37.8,212.8,27,186.8,27,159.1s10.7-53.7,30.3-73.2c19.5-19.5,45.5-30.3,73.1-30.3c27.7,0,53.8,10.8,73.4,30.4l22.6,22.6
                                            c5.3,5.3,13.8,5.3,19.1,0l22.4-22.4c19.6-19.6,45.7-30.4,73.3-30.4c27.6,0,53.6,10.8,73.2,30.3c19.6,19.6,30.3,45.6,30.3,73.3
                                            C444.8,187.1,434,213.1,414.4,232.7z"></path>
                                        </svg>
                                    </a>
                                </div>
                            </div>
                            <div class="icon-action share">
                                <div class="btn-wrapper">
                                    <a href="#" class="btn btn-main">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 481.6 481.6" >
                                            <g>
                                                <path d="M381.6,309.4c-27.7,0-52.4,13.2-68.2,33.6l-132.3-73.9c3.1-8.9,4.8-18.5,4.8-28.4c0-10-1.7-19.5-4.9-28.5l132.2-73.8
                                                    c15.7,20.5,40.5,33.8,68.3,33.8c47.4,0,86.1-38.6,86.1-86.1S429,0,381.5,0s-86.1,38.6-86.1,86.1c0,10,1.7,19.6,4.9,28.5
                                                    l-132.1,73.8c-15.7-20.6-40.5-33.8-68.3-33.8c-47.4,0-86.1,38.6-86.1,86.1s38.7,86.1,86.2,86.1c27.8,0,52.6-13.3,68.4-33.9
                                                    l132.2,73.9c-3.2,9-5,18.7-5,28.7c0,47.4,38.6,86.1,86.1,86.1s86.1-38.6,86.1-86.1S429.1,309.4,381.6,309.4z M381.6,27.1
                                                    c32.6,0,59.1,26.5,59.1,59.1s-26.5,59.1-59.1,59.1s-59.1-26.5-59.1-59.1S349.1,27.1,381.6,27.1z M100,299.8
                                                    c-32.6,0-59.1-26.5-59.1-59.1s26.5-59.1,59.1-59.1s59.1,26.5,59.1,59.1S132.5,299.8,100,299.8z M381.6,454.5
                                                    c-32.6,0-59.1-26.5-59.1-59.1c0-32.6,26.5-59.1,59.1-59.1s59.1,26.5,59.1,59.1C440.7,428,414.2,454.5,381.6,454.5z"/>
                                            </g>
                                        </svg>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
                <div class="out-of-stock">
                    *This item is out of stock - this item can be specially manufactered with extra 2 weeks in
                    delivery time.
                </div>
                <div class="designer-desc">
                    <h3>Designer Notes</h3>
                    <p>
                        Featuring our signature Egyptian Stretch Cotton in a tapered silhouette, The Tie Neck Puffed Sleeves Blouse features a Knotted tie collar and arms with a center front investable button partial placket, and puffed balloon style sleeves with single button.
                    </p>
                </div>
                <div class="product-tabs mtlg">
                    <ul class="nav nav-tabs">
                        <li class="active"><a data-toggle="tab" href="#description">Description</a></li>
                        <li><a data-toggle="tab" href="#size">Size Guide</a></li>
                        <li><a data-toggle="tab" href="#delivery">Delivery & Shipping</a></li>
                        <li><a data-toggle="tab" href="#exchange">Exchange & Return</a></li>
                    </ul>
                    <div class="tab-content">
                        <div id="description" class="tab-pane fade in active">
                            <div class="row">
                                <div class="col-sm-6">
                                    <ul>
                                        <li>- Tailored Fit</li>
                                        <li>- Tie Neck Collar</li>
                                        <li>- Investable Partial Placket</li>
                                        <li>- Puffed Balloon Sleeves</li>
                                        <li>- Elbow Tie</li>
                                        <li>- Single Button Band Cuffs</li>
                                        <li>- 98% Cotton 2% Spandex - 100% Cotton; Egyptian</li>
                                        <li>- Length 70cm</li>
                                    </ul>
                                </div>
                                <div class="col-sm-6">
                                    <ul>
                                        <li>- Tailored Fit</li>
                                        <li>- Tie Neck Collar</li>
                                        <li>- Investable Partial Placket</li>
                                        <li>- Puffed Balloon Sleeves</li>
                                        <li>- Elbow Tie</li>
                                        <li>- Single Button Band Cuffs</li>
                                        <li>- 98% Cotton 2% Spandex - 100% Cotton; Egyptian</li>
                                        <li>- Length 70cm</li>
                                    </ul>
                                </div>
                            </div>
                            <p class="mtmd">Our Guarantee. Returns or exchanges within 14 days of the delivery date. 1. Items in original condition, undamaged & unused 2. Items have attached ticket. 3. Return or Exchange shipping fee is paid by buyer. Learn more in link </p>
                            <div class="clearfix">
                                <a href="#" class="text-link text-right mtsm pull-right">View full Product Care<i class="fa fa-chevron-right mlxs"></i></a>
                            </div>
                        </div>
                        <div id="size" class="tab-pane fade">
                            <table class="table table-borderless">
                                <thead>
                                    <tr>
                                        <th scope="col">Size</th>
                                        <th scope="col">Sholder</th>
                                        <th scope="col">Bust</th>
                                        <th scope="col">Waist</th>
                                        <th scope="col">Hip</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <th scope="row">38</th>
                                        <td>128 - 131 Cm</td>
                                        <td>128 - 131 Cm</td>
                                        <td>128 - 131 Cm</td>
                                        <td>128 - 131 Cm</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">39</th>
                                        <td>128 - 131 Cm</td>
                                        <td>128 - 131 Cm</td>
                                        <td>128 - 131 Cm</td>
                                        <td>128 - 131 Cm</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">40</th>
                                        <td>128 - 131 Cm</td>
                                        <td>128 - 131 Cm</td>
                                        <td>128 - 131 Cm</td>
                                        <td>128 - 131 Cm</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">41</th>
                                        <td>128 - 131 Cm</td>
                                        <td>128 - 131 Cm</td>
                                        <td>128 - 131 Cm</td>
                                        <td>128 - 131 Cm</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">42</th>
                                        <td>128 - 131 Cm</td>
                                        <td>128 - 131 Cm</td>
                                        <td>128 - 131 Cm</td>
                                        <td>128 - 131 Cm</td>
                                    </tr>
                                </tbody>
                            </table>
                            <div class="clearfix">
                                <a href="#" class="text-link text-right mtsm pull-right">View full Exchange & Returnes Policy <i class="fa fa-chevron-right mlxs"></i></a>
                            </div>
                        </div>
                        <div id="delivery" class="tab-pane fade">
                            <p>Our Guarantee. Returns or exchanges within 14 days of the delivery date. 1. Items in original condition, undamaged & unused 2. Items have attached ticket. 3. Return or Exchange shipping fee is paid by buyer. Learn more in link </p>
                            <div class="clearfix">
                                <a href="#" class="text-link text-right mtsm pull-right">View full Delivery & Shipping Policy<i class="fa fa-chevron-right mlxs"></i></a>
                            </div>
                        </div>
                        <div id="exchange" class="tab-pane fade">
                            <p>Our Guarantee. Returns or exchanges within 14 days of the delivery date. 1. Items in original condition, undamaged & unused 2. Items have attached ticket. 3. Return or Exchange shipping fee is paid by buyer. Learn more in link </p>
                            <div class="clearfix">
                                <a href="#" class="text-link text-right mtsm pull-right">View full Exchange & Returnes Policy <i class="fa fa-chevron-right mlxs"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="wear-with sec-pad">
    <div class="container">
        <div class="row">
            <h2 class="text-center mbxlg">Wear This With</h2>
            <div class="col-sm-3 col-xs-6">
                <div class="product-item">
                    <a href="#" class="product-img">
                        <img src="_assets/img/products/03.jpg" alt="">
                        <img src="_assets/img/products/01.jpg" class="hover-img" alt="">
                        <div class="sale">
                            25% Off
                        </div>
                    </a>
                    <div class="product-content">
                        <a href="#">
                            <h2 class="mtmd">
                                Puff Sleeves Puff Sleeves
                                Puff Sleeves
                            </h2>
                        </a>
                        <div class="product-footer">
                            <div class="price pull-left">
                                <span class="text-upper">800 egp</span>
                            </div>
                            {% include 'component/product-cta.html' %}
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="product-item">
                    <a href="#" class="product-img">
                        <img src="_assets/img/products/01.jpg" alt="">
                        <img src="_assets/img/products/02.jpg" class="hover-img" alt="">
                        <div class="sale">
                            25% Off
                        </div>
                    </a>
                    <div class="product-content">
                        <a href="#">
                            <h2 class="mtmd">
                                Puff Sleeves Puff Sleeves
                                Puff Sleeves
                            </h2>
                        </a>
                        <div class="product-footer">
                            <div class="price pull-left">
                                <span class="text-upper">800 egp</span>
                            </div>
                            {% include 'component/product-cta.html' %}
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="product-item">
                    <a href="#" class="product-img">
                        <img src="_assets/img/products/02.jpg" alt="">
                        <img src="_assets/img/products/01.jpg" class="hover-img" alt="">
                        <div class="sale">
                            25% Off
                        </div>
                    </a>
                    <div class="product-content">
                        <a href="#">
                            <h2 class="mtmd">
                                Puff Sleeves Puff Sleeves
                                Puff Sleeves
                            </h2>
                        </a>
                        <div class="product-footer">
                            <div class="price pull-left">
                                <span class="text-upper">800 egp</span>
                            </div>
                            {% include 'component/product-cta.html' %}
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="product-item">
                    <a href="#" class="product-img">
                        <img src="_assets/img/products/01.jpg" alt="">
                        <img src="_assets/img/products/02.jpg" class="hover-img" alt="">
                        <div class="sale">
                            25% Off
                        </div>
                    </a>
                    <div class="product-content">
                        <a href="#">
                            <h2 class="mtmd">
                                Puff Sleeves Puff Sleeves
                                Puff Sleeves
                            </h2>
                        </a>
                        <div class="product-footer">
                            <div class="price pull-left">
                                <span class="text-upper">800 egp</span>
                            </div>
                            {% include 'component/product-cta.html' %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="wear-with related sec-pad">
    <div class="container">
        <div class="row">
            <h2 class="text-center mbxlg">Related Items</h2>
            <div class="col-sm-3 col-xs-6">
                <div class="product-item">
                    <a href="#" class="product-img">
                        <img src="_assets/img/products/03.jpg" alt="">
                        <img src="_assets/img/products/01.jpg" class="hover-img" alt="">
                        <div class="sale">
                            25% Off
                        </div>
                    </a>
                    <div class="product-content">
                        <a href="#">
                            <h2 class="mtmd">
                                Puff Sleeves Puff Sleeves
                                Puff Sleeves
                            </h2>
                        </a>
                        <div class="product-footer">
                            <div class="price pull-left">
                                <span class="text-upper">800 egp</span>
                            </div>
                            {% include 'component/product-cta.html' %}
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="product-item">
                    <a href="#" class="product-img">
                        <img src="_assets/img/products/01.jpg" alt="">
                        <img src="_assets/img/products/02.jpg" class="hover-img" alt="">
                        <div class="sale">
                            25% Off
                        </div>
                    </a>
                    <div class="product-content">
                        <a href="#">
                            <h2 class="mtmd">
                                Puff Sleeves Puff Sleeves
                                Puff Sleeves
                            </h2>
                        </a>
                        <div class="product-footer">
                            <div class="price pull-left">
                                <span class="text-upper">800 egp</span>
                            </div>
                            {% include 'component/product-cta.html' %}
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="product-item">
                    <a href="#" class="product-img">
                        <img src="_assets/img/products/02.jpg" alt="">
                        <img src="_assets/img/products/01.jpg" class="hover-img" alt="">
                        <div class="sale">
                            25% Off
                        </div>
                    </a>
                    <div class="product-content">
                        <a href="#">
                            <h2 class="mtmd">
                                Puff Sleeves Puff Sleeves
                                Puff Sleeves
                            </h2>
                        </a>
                        <div class="product-footer">
                            <div class="price pull-left">
                                <span class="text-upper">800 egp</span>
                            </div>
                            {% include 'component/product-cta.html' %}
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="product-item">
                    <a href="#" class="product-img">
                        <img src="_assets/img/products/01.jpg" alt="">
                        <img src="_assets/img/products/02.jpg" class="hover-img" alt="">
                        <div class="sale">
                            25% Off
                        </div>
                    </a>
                    <div class="product-content">
                        <a href="#">
                            <h2 class="mtmd">
                                Puff Sleeves Puff Sleeves
                                Puff Sleeves
                            </h2>
                        </a>
                        <div class="product-footer">
                            <div class="price pull-left">
                                <span class="text-upper">800 egp</span>
                            </div>
                            {% include 'component/product-cta.html' %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{% 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 %}