{% extends "layout.html" %}

{% set title = 'Shipping' %}

{% block content %}

<div class="steps-wrapper">
    <div class="container">
        <ul class="steps list-unstyled d-flex justify-content-between align-items-center">
            <li class="active text-capitalize text-center">cart</li>
            <li class="active current text-capitalize text-center">shipping</li>
            <li class="text-capitalize text-center">payment</li>
            <li class="text-capitalize text-center">summery</li>
        </ul>
    </div>
</div>


<section class="section checkout">
    <div class="container">
        <div class="section-title">
            <h3 class="toshiba-title text-bold no-margin mbmd">Shipping method</h3>
            {% include '../template/component/toshiba-border.html' %}
        </div>
        <div class="boxed mtlg">
            <h4 class="mb-3">Delivery address</h4>
            <div class="my-address">
                <div class="row">
                    <div class="col-md-4">
                        <div class="address">
                            <div class="radio-custom">
                                <input type="radio" name="address" value="" id="office" class="form-radio pull-left">
                                <label for="office" class="pull-left">
                                    <span class="location-name d-block mb-2 text-capitalize">office</span>
                                    <span class="d-flex align-items-center mt-3">
                                        <i class="far fa-user mr-3"></i>
                                        <span>Mukhtar Ali</span>
                                    </span>
                                    <span class="d-flex align-items-center mt-2">
                                        <i class="fa fa-map-marker mr-3"></i>
                                        <span>Giza, Dokki, 1 El Sad El Aaly st, Apt. 16</span>
                                    </span>
                                    <span class="d-flex align-items-center mt-2">
                                        <i class="fa fa-phone mr-3"></i>
                                        <span>01XXXXXXXXXX</span>
                                    </span>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="address">
                            <div class="radio-custom">
                                <input type="radio" name="address" value="" id="home" class="form-radio pull-left">
                                <label for="home" class="pull-left">
                                    <span class="location-name d-block mb-2 text-capitalize">home</span>
                                    <span class="d-flex align-items-center mt-3">
                                        <i class="far fa-user mr-3"></i>
                                        <span>Mukhtar Ali</span>
                                    </span>
                                    <span class="d-flex align-items-center mt-2">
                                        <i class="fa fa-map-marker mr-3"></i>
                                        <span>Cairo, Maadi, Degla , 222 st, Apt. 16</span>
                                    </span>
                                    <span class="d-flex align-items-center mt-2">
                                        <i class="fa fa-phone mr-3"></i>
                                        <span>01XXXXXXXXXX</span>
                                    </span>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="address">
                            <a href="#" class="add-new">
                                <i class="fa fa-plus mr-2"></i>Add new address
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="new mt-4">
                <h5 class="mb-3">Add new address</h5>
                <form action="">
                    <div class="row">
                        <div class="col-lg-4 col-md-6">
                            <div class="form-group">
                                <label for="firstName">First name *</label>
                                <input type="text" class="form-control" id="firstName" placeholder="First name">
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-6">
                            <div class="form-group">
                                <label for="lastName">Last name *</label>
                                <input type="text" class="form-control" id="lastName" placeholder="Last name">
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-6">
                            <label for="governorate">Governorate *</label>
                            <div class="select-custom">
                                <select name="" id="governorate">
                                    <option value="" disabled selected>Choose governorate</option>
                                    <option value="Egypt">Egypt</option>
                                    <option value="UAE">UAE</option>
                                    <option value="Saudi">Saudi Arabia</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-6">
                            <label for="city">City *</label>
                            <div class="select-custom">
                                <select name="" id="city">
                                    <option value="" disabled selected>Choose city</option>
                                    <option value="Egypt">Egypt</option>
                                    <option value="UAE">UAE</option>
                                    <option value="Saudi">Saudi Arabia</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-6">
                            <label for="area">Area *</label>
                            <div class="select-custom">
                                <select name="" id="area">
                                    <option value="" disabled selected>Choose city</option>
                                    <option value="Egypt">Egypt</option>
                                    <option value="UAE">UAE</option>
                                    <option value="Saudi">Saudi Arabia</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-6">
                            <div class="form-group">
                                <label for="street">Street Name/No. *</label>
                                <input type="text" class="form-control" id="street" placeholder="Street Name/No.">
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-6">
                            <div class="form-group">
                                <label for="location">Location Type *</label>
                                <div class="select-custom">
                                    <select name="" id="location">
                                        <option value="" disabled selected>Choose type</option>
                                        <option value="Home">Home</option>
                                        <option value="Office">Office</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-6">
                            <div class="form-group">
                                <label for="mobile">Mobile *</label>
                                <input type="text" class="form-control" id="mobile" placeholder="Mobile">
                            </div>
                        </div>
                    </div>
                    <div class="form-group mb-4">
                        <label for="subject">Shipping Notes</label>
                        <textarea name="" id="subject" class="form-control" cols="30" rows="5" placeholder="Shipping Notes"></textarea>
                    </div>
                    <button type="submit" class="btn mr-3">Save Address</button>
                    <button type="submit" class="btn btn-gray close-new">Cancel</button>
                </form>
            </div>
            <div class="shipping-note mt-4">
                <h5 class="mb-2">Shipping Service</h5>
                <p class="no-margin">2 item shipped locally | Delivered within 3-5 Business days | +200.00 EGP</p>
            </div>
        </div>
        <div class="row mt-4">
            <div class="col-lg-5 offset-lg-7 col-md-6">
                <div class="subtotal">
                    <div class="d-flex justify-content-between mb-2">
                        <div class="sub sub-sm">items subtotal:</div>
                        <div class="price price-sm order-last">35212 EGP</div>
                    </div>
                    <div class="d-flex justify-content-between mb-3 pb-3 bb">
                        <div class="sub sub-sm">+ Shipping</div>
                        <div class="price price-sm order-last">200 EGP</div>
                    </div>
                    <div class="d-flex justify-content-between">
                        <div class="order-sub">
                            <div class="sub text-bold">Order subtotal:</div>
                            <div class="items-no">2 items</div>
                        </div>
                        <div class="price order-last">35412 EGP</div>
                    </div>
                </div>
                <a href="payment.html" class="btn text-capitalize d-block mt-4">checkout</a>
            </div>
        </div>
    </div>
</section>


<section class="section section-top-none checkout">
    <div class="container">
        <div class="section-title">
            <h3 class="toshiba-title text-bold no-margin mbmd">Shipment</h3>
            {% include '../template/component/toshiba-border.html' %}
        </div>
        <div class="cart-items">
            <div class="row">
                {% for i in range(0, 2) -%}
                <div class="col-lg-12 col-md-6">
                    <div class="boxed mtlg">
                        <div class="cart-item">
                            <a href="product.html" class="product-image-bg d-block mr-lg-4">
                                <div class="product-img">
                                    <img src="{{products[0].src}}" alt="">
                                </div>
                            </a>
                            <div class="product-info">
                                <div class="toshiba-tag">
                                    {% include '../template/component/toshiba-border.html' %}
                                    <span class="d-inline-block mlmd text-bold text-uppercase text-brand">GR-RF646WE</span>
                                </div>
                                <a href="product.html">
                                    <h3 class="no-margin mtsm">646L, 4-Door Refrigerator, 3 System, Convert Zone, Dual Inverter</h3>
                                </a>
                                <div class="subtitle mtsm">Avoiding Cross Contamination Matters</div>
                            </div>
                            <div class="product-counter ml-lg-4">
                                <button type="button" class=""><i class="fa fa-minus"></i></button>
                                <input type="text" name="" class="form-control text-center text-bold" value="1" />
                                <button type="button" class=""><i class="fa fa-plus"></i></button>
                            </div>
                            <div class="product-footer ml-lg-4">
                                <div class="price">16606 EGP</div>
                                <div class="cta">
                                    <button class="favorites remove mt-2"><i class="far fa-trash-alt mrsm"></i>Remove</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {%- endfor %}
            </div>
        </div>
    </div>
</section>




{% endblock content %}