{% extends "layout.html" %}

{% set title = 'Order Details' %}

{% block content %}


<section class="sec-pad">
    <div class="container">
        <div class="order-details">
            <h2 class="no-margin text-semibold mblg text-center">Your order has been placed. Please wait for confirmation</h2>
            <div class="text-center mtlg mbxlg">
                <h4 class="text-center text-semibold">Your order is being processed</h4>
                <a href="#" class="btn btn-delete d-inline mtsm">Cancel order</a>
            </div>
            <div class="row multi-steps-wrap">
                <ul class="list-unstyled multi-steps">
                    <li class="job-status job-created step-done">Ordered</li>
                    <li class="job-status job-inprogress canceled">Canceled</li>
                    <li class="job-status job-completed step-done is-active">On the way</li>
                    <li class="job-status job-closed">Delivered</li>
                </ul>
            </div>
            <div class="row mtxxlg">
                <div class="col-sm-9">
                    <div class="faq-card order-summery">
                        <h3 class="no-margin mbxlg text-semibold capitalize">order details</h3>
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="order-de mbxlg">
                                    <div class="label-img pull-left mrmd">
                                        <img src="_assets/img/icons/receipt.svg" alt="">
                                    </div>
                                    <div class="order-label pull-left">
                                        <label>Order ID</label>
                                        <p class="no-margin">15624326463</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <div class="order-de mbxlg">
                                    <div class="label-img pull-left mrmd">
                                        <img src="_assets/img/icons/plate-1.svg" alt="">
                                    </div>
                                    <div class="order-label pull-left">
                                        <label>Order from</label>
                                        <p class="no-margin">Mohaned's Kitchen</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <div class="order-de mbxlg">
                                    <div class="label-img pull-left mrmd">
                                        <img src="_assets/img/icons/calender.svg" alt="">
                                    </div>
                                    <div class="order-label pull-left">
                                        <label>Order date</label>
                                        <p class="no-margin">06-07-2019 07:55PM</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <div class="order-de mbxlg">
                                    <div class="label-img pull-left mrmd">
                                        <img src="_assets/img/icons/fast.svg" alt="">
                                    </div>
                                    <div class="order-label pull-left">
                                        <label>Delivery date</label>
                                        <p class="no-margin">06-07-2019 08:30PM</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <div class="order-de mbxlg">
                                    <div class="label-img pull-left mrmd">
                                        <img src="_assets/img/icons/location.svg" alt="">
                                    </div>
                                    <div class="order-label pull-left">
                                        <label>Delivery address</label>
                                        <p class="no-margin">
                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br>
                                            Ab culpa dolore doloribus fugit laborum laudantium libero magnam,<br>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="faq-card mblg">
                        <ul class="product-list text-center">
                            <li>
                            <span class="mrxs text-semibold">
                                4
                            </span>
                                Coffe Gift Box
                            </li>
                        </ul>
                    </div>
                    <div class="faq-card mblg">
                        <div class="price text-center">
                            SAR 165/-
                        </div>
                    </div>
                    <div class="faq-card mblg">
                        <div class="info">
                            <div class="mbmd">
                                <strong class="mrsm">Delivary Fee</strong>SAR 20
                            </div>
                            <div class="mbmd">
                                <strong class="mrsm">Vat 14%</strong>SAR 10
                            </div>
                            <div class="mbmd">
                                <strong class="mrsm">Promocode:</strong> SAR 20
                            </div>
                            <div class="mbmd">
                                <strong class="mrsm">Total Amount</strong>SAR 185.00
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

{% endblock content %}