{% extends "layout.html" %}

{% set title = 'Cart checkout' %}

{% block content %}

<section class="checkout sec-pad">
    <div class="container">
        <div class="row">
            <div class="col-sm-9">
                <form action="">
                    <div class="faq-card checkout-card mblg">
                        <div class="feature text-center">
                            <div class="feature-img">
                                <img src="_assets/img/icons/chat.svg" alt="">
                            </div>
                            <h3 class="text-semibold">Preparation Note</h3>
                            <input type="text" class="input-field input-normal mtlg" placeholder="Type your instructions here">
                        </div>
                    </div>
                    <div class="faq-card checkout-card mblg">
                        <div class="feature text-center">
                            <div class="feature-img">
                                <img src="_assets/img/icons/deliver.svg" alt="">
                            </div>
                            <h3 class="text-semibold">Delivery Address and Date</h3>
                            <div class="date-time mtlg mbxxlg">
                                <input type="text" id="pickDate" class="input-field input-normal" placeholder="Pick a date">
                                <input type="text" id="pickTime" class="input-field input-normal" placeholder="Pick a time">
                            </div>
                            <div class="available text-semibold mbxxlg">
                                Delivery is not avialable from 1:30AM - 12:00PM
                            </div>
                            <div class="delivery-info">
                                <div class="text-left mblg">
                                    <strong>
                                        Delivery Area
                                    </strong><br>
                                    Jeddah
                                </div>
                                <div class="text-left mblg">
                                    <strong>
                                        Complete Address
                                    </strong><br>
                                    Jeddah AR Rabwah District AR Rabwah District  23446
                                </div>
                                <div class="text-left">
                                    <strong>
                                        Delivery Instructions
                                    </strong><br>
                                    3887 AR Rabwah District 23446
                                </div>
                            </div>
                            <a href="#" class="btn btn-green text-upper mtxlg pull-left" id="new-address">Add new address</a>
                            <a href="#" class="mtxxlg pull-right text-semibold"  data-toggle="modal" data-target="#change-address">Change default address</a>
                            <div class="clearfix"></div>
                        </div>
                    </div>
                    <div class="faq-card checkout-card mblg new-address">
                        {% include 'component/new-address.html' %}
                    </div>
                    <div class="faq-card checkout-card mblg">
                        <div class="feature text-center">
                            <div class="feature-img">
                                <img src="_assets/img/icons/payment.svg" alt="">
                            </div>
                            <h3 class="text-semibold">Payment Method</h3>
                            <div class="input-group mtlg">
                                <input type="text" class="input-field input-normal" placeholder="Enter Promocode">
                                <span class="input-group-btn mtmd">
                                    <button class="btn btn-green">Apply</button>
                                </span>
                            </div>
                            <div class="checkbox-custom mtxxlg text-left">
                                <div>
                                    <input type="radio" name="type" value="cash" id="cash" class="form-radio" checked="">
                                    <label class="mrlg" for="cash">Cash On Delivery</label>
                                </div>
                                <div class="mtsm">
                                    <input type="radio" name="type" value="visa" id="visa" class="form-radio">
                                    <label class="mrlg" for="visa">Visa/ Master/ Payfort</label>
                                </div>
                                <div class="mtsm">
                                    <input type="radio" name="type" value="sadad" id="sadad" class="form-radio">
                                    <label class="mrlg" for="sadad">SADAD</label>
                                </div>
                                <div class="mtsm">
                                    <input type="radio" name="type" value="bank" id="bank" class="form-radio">
                                    <label class="mrlg" for="bank">Bank Transfer</label>
                                </div>
                                <div class="mtsm">
                                    <input type="radio" name="type" value="wallet" id="wallet" class="form-radio">
                                    <label class="mrlg" for="wallet">My Wallet</label>
                                </div>
                            </div>
                            <div class="text-center mtlg">
                                <p class="text-danger no-margin text-semibold">Currently we accept cash only</p>
                            </div>
                        </div>
                    </div>
                    <a href="" class="btn btn-green text-upper mtxlg">Proceed Checkout</a>
                </form>

            </div>
            <div class="col-sm-3">
                <div class="faq-card mblg">
                    <div class="feature text-center">
                        <div class="feature-img">
                            <img src="_assets/img/icons/cart-g.svg" alt="">
                        </div>
                        <h3 class="text-semibold">Your cart</h3>
                    </div>
                </div>
                <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>
</section>


{% endblock content %}

{% block JS %}
<script>
    function initMap() {
        var addressMap;

        addressMap = new google.maps.Map(document.getElementById('address-map'), {
            center: {lat: 21.4966566, lng: 39.1838337},
            zoom: 8
        });
    }
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBWs4kEppBNkazmiNugMLoOdjGhpwVgX78&callback=initMap"
        async defer></script>
{% endblock %}