{% extends "layout.html" %}

{% set title = 'Place Order' %}

{% block content %}

<section class="sec-pad">
    <div class="container">
        <button class="btn btn-black mbxxlg" data-toggle="modal" data-target="#add-new-report">Add New Report</button>
        <div class="row">
            <div class="col-sm-8">
                <div class="shop-head">
                    <div class="row">
                        <div class="col-sm-6 col-xs-12">
                            <h3 class="no-margin text-bold">Shipping Address</h3>
                        </div>
                        <div class="col-sm-6 col-xs-12 pull-right">
                            <div class="add-address text-right">
                                <a href="#" data-toggle="modal" data-target="#add-new-address">Add new address</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="shipping-details plxxlg mtxlg">
                    <div class="row">
                        <div class="col-md-8 col-sm-10">
                            <h4 class="d-inline text-bold">Eman Salah</h4>
                            <div class="checkbox-custom radio-custom mtmd">
                                <div class="clearfix">
                                    <input type="radio" name="address" id="address" class="form-radio">
                                    <label class="mlxs" for="address">
                                        27 El-Quds El Shareef St, from Shehab St.,<br>
                                        Mohandessin<br>

                                        +20 10 04654253
                                    </label>
                                </div>
                                <div class="clearfix mtmd">
                                    <input type="radio" name="address" id="address-2" class="form-radio">
                                    <label class="mlxs" for="address-2">
                                        102 Road 105, Maadi, Cairo
                                    </label>
                                </div>
                                <div class="clearfix mtmd">
                                    <input type="radio" name="address" id="address-3" class="form-radio">
                                    <label class="mlxs" for="address-3">
                                        36 Othman Ibn Affan St., Heliopolis, Cairo
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="shop-head mtxxlg">
                    <h3 class="no-margin text-bold">Payment Method</h3>
                </div>
                <div class="delivery-method single-item plxxlg mtxlg pbxlg">
                    <p class="no-margin">Cash on Delivery <span>(Delivery fees varys from 5 to 15 EGP based on the zone)</span></p>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="shop-head">
                    <h3 class="no-margin text-bold">Order Summary</h3>
                </div>
                <div class="cart">
                    <div class="cart-item single-item ptxxlg pbxxlg">
                        <div class="row">
                            <div class="col-xs-4 col-sm-12 col-md-4">
                                <a href="#">
                                    <div class="item-shop cart-img vcenter">
                                        <img src="_assets/img/products/03.jpg" alt="">
                                    </div>
                                </a>
                            </div>
                            <div class="col-xs-8 col-sm-12 col-md-8">
                                <div class="cart-content">
                                    <h4 class="no-margin">
                                        <a href="#">
                                            Bed Head, stunning value, prix sensational, 500 ml
                                        </a>
                                    </h4>
                                    <p class="price no-margin mtxs text-bold">102 EGP</p>
                                    <span class="d-block">Qty:1</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="cart-item single-item ptxxlg pbxxlg">
                        <div class="row">
                            <div class="col-xs-4 col-sm-12 col-md-4">
                                <a href="#">
                                    <div class="item-shop cart-img vcenter">
                                        <img src="_assets/img/products/02.jpg" alt="">
                                    </div>
                                </a>
                            </div>
                            <div class="col-xs-8 col-sm-12 col-md-8">
                                <div class="cart-content">
                                    <h4 class="no-margin">
                                        <a href="#">
                                            Bed Head, stunning value, prix sensational, 500 ml
                                        </a>
                                    </h4>
                                    <p class="price no-margin mtxs text-bold">102 EGP</p>
                                    <span class="d-block">Qty:1</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="single-item cart-item ptmd pbmd">
                        <div class="row">
                            <div class="col-xs-3">
                                <div class="shop-content vcenter">
                                    <div>
                                        <span class="d-block">Total:</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-6 pull-right">
                                <div class="shop-content end vcenter">
                                    <div>
                                        <h3 class="price total text-right no-margin text-bold">152 <sub class="text-upper">egp</sub></h3>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <a href="#" class="btn btn-orange text-upper d-block mtxxlg">place order</a>
                </div>
            </div>
        </div>
    </div>
</section>




<div class="modal fade insurance cr-pop" id="add-new-address" tabindex="-1" role="dialog" aria-labelledby="add-new-address" aria-hidden="true">
    <div class="modal-dialog main-model" role="document">
        <div class="modal-content">
            <div class="modal-header text-upper text-bold">
                add new address
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <form action="">
                    <div class="mbmd">
                        <label for="location-name" class="text-semibold text-black">Location Name</label>
                        <input type="text" id="location-name" placeholder="">
                    </div>
                    <div class="mbmd">
                        <label for="area" class="text-semibold text-black">Area</label>
                        <div class="mbsm">
                            <div class="custom-select">
                                <select id="area" name="area">
                                    <option value="">Area</option>
                                    <option value="option">option</option>
                                    <option value="option">option</option>
                                </select>
                            </div>
                        </div>
                       <div class="">
                           <div class="custom-select">
                               <select id="district" name="district">
                                   <option value="">District</option>
                                   <option value="option">option</option>
                                   <option value="option">option</option>
                               </select>
                           </div>
                       </div>
                    </div>
                    <div class="mbmd">
                        <label for="street" class="text-semibold text-black">Street, Building</label>
                        <input type="text" id="street" placeholder="">
                    </div>
                    <div class="mbmd">
                        <label for="floor" class="text-semibold text-black">Floor, Appartment No.</label>
                        <input type="text" id="floor" placeholder="">
                    </div>
                    <div class="mbmd">
                        <label for="floor" class="text-semibold text-black">Delivery Instructions (Optional)</label>
                        <textarea name="" id="" cols="30" rows="5"></textarea>
                    </div>
                </form>
                <div class="cta-btns mtxxlg">
                    <a href="#" class="btn btn-outline d-inline mlxs mrxs">Skip</a>
                    <a href="#" class="btn btn-orange d-inline mlxs mrxs">Confirm</a>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade insurance cr-pop" id="add-new-report" tabindex="-1" role="dialog" aria-labelledby="add-new-report" aria-hidden="true">
    <div class="modal-dialog main-model" role="document">
        <div class="modal-content">
            <div class="modal-header text-upper text-bold">
                Add New Report
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <form action="">
                    <div class="mbmd">
                        <label for="title" class="text-semibold text-black">Title</label>
                        <input type="text" id="title" placeholder="">
                    </div>
                    <div class="mbmd">
                        <label for="area" class="text-semibold text-black">Report Date</label>
                        <input type="text" id="datepicker" class="mblg hasDatepicker" placeholder="Date of Birth ( DD/MM/YYYY )" required="">
                    </div>


                    <div class="upload-container mbxxlg">
                        <div class="custom-input">
                            <div class="input-file-container text-center">
                                <input class="input-file" id="my-file" type="file">
                                <label tabindex="0" for="my-file" class="input-file-trigger">
                                    <span class="user"><a href="#"><i class="fas fa-plus"></i></a></span>
                                    <span class="label-input">Upload Photo</span>
                                    <span class="label-input pull-right"><i class="fas fa-chevron-right"></i></span>
                                </label>
                            </div>
                            <p class="file-return"></p>
                        </div>
                    </div>



                </form>
                <a href="#" class="btn btn-blue d-block mlxs mrxs">Add</a>
            </div>
        </div>
    </div>
</div>
{% endblock content %}