{% extends "layout.html" %}

{% set title = 'Account' %}

{% block content %}


<section class="sec-pad">
    <div class="container">
        <div class="avatar-img text-center mbmd">
            <div class="a-img cover" style="background-image: url('_assets/img/kitchen.jpg')">
                <div class="upload-container mbxxlg">
                    <div class="custom-input">
                        <div class="input-file-container text-center">
                            <input class="input-file" id="my-file-1" type="file">
                            <label tabindex="0" for="my-file-1" class="input-file-trigger file-btn text-bold">
                                <i class="fa fa-edit"></i>
                            </label>
                        </div>
                        <p class="file-return"></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="sec-title">
            <h2 class="no-margin mbmd text-semibold text-center">
                Mohanad
            </h2>
        </div>
        <div class="deals mtxlg">
            <div class="tab-g">
                <ul class="nav nav-tabs account-tabs text-center" role="tablist">
                    <li role="presentation" class="active"><a class="btn" href="#account" aria-controls="account" role="tab" data-toggle="tab">My Account</a></li>
                    <li role="presentation"><a class="btn" href="#orders" aria-controls="orders" role="tab" data-toggle="tab">Recent Orders</a></li>
                    <li role="presentation"><a class="btn" href="#favourites" aria-controls="favourites" role="tab" data-toggle="tab">Favourites</a></li>
                    <li role="presentation"><a class="btn" href="#address" aria-controls="address" role="tab" data-toggle="tab">My Address</a></li>
                    <li role="presentation"><a class="btn" href="#bookmarks" aria-controls="bookmarks" role="tab" data-toggle="tab">My Bookmarks</a></li>
                    <li role="presentation"><a class="btn" href="#wallet" aria-controls="wallet" role="tab" data-toggle="tab">My Wallet</a></li>
                </ul>

                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="account">
                        <div class="row">
                            <div class="col-sm-10 col-sm-offset-1">
                                <h3 class="text-center text-semibold">
                                    Personal information
                                </h3>
                                <div class="checkbox-custom black text-center mtxxlg">
                                    <input type="radio" name="location" value="jeddah" id="jeddah" class="form-radio"><label class="mrlg" for="jeddah">Jeddah</label>
                                    <input type="radio" name="location" value="madina" id="madina" class="form-radio"><label for="madina">Al Madina</label>
                                </div>
                                <div id="map" class="mtlg"></div>
                                <form action="" class="mtxxlg">
                                    <div class="row">
                                        <div class="col-sm-6">
                                            <div class="form-group">
                                                <label class="text-semibold mlmd">First Name</label>
                                                <input type="text" name="name" placeholder="First name" value="Mohaned" required>
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="form-group">
                                                <label class="text-semibold mlmd">Last Name</label>
                                                <input type="text" name="name" placeholder="Last name" value="Mohaned" required>
                                            </div>
                                        </div>
                                        <div class="col-sm-12">
                                            <div class="form-group">
                                                <label class="text-semibold mlmd">Phone number</label>
                                                <input type="number" name="name" placeholder="Phone number" value="09755256358443" required>
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="form-group">
                                                <label class="text-semibold mlmd">E-mail</label>
                                                <input type="email" name="name" placeholder="E-mail" value="Mohanad@gmail.com" required>
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <label class="text-semibold mlmd" style="visibility: hidden;">change passowrd</label>
                                            <div class="ptmd pbxxlg">
                                                <a href="#" class="ptlg" data-toggle="modal" data-target="#change-password">Change password</a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="checkbox-custom black">
                                        <input type="checkbox" name="receive" value="receive" id="receive" class="form-radio" checked>
                                        <label class="mrlg" for="receive">Receive orders and deals from Qoot</label>
                                    </div>
                                    <button class="btn btn-green mtxxlg pull-right">Update</button>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div role="tabpanel" class="tab-pane" id="orders">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="main-timeline4">
                                    <div class="timeline">
                                        <a href="order-details.html" class="timeline-content">
                                            <div class="avatar-img text-center mbmd">
                                                <div class="a-img cover" style="background-image: url('_assets/img/products/product.jpg')"></div>
                                            </div>
                                            <div class="inner-content">
                                                <h3 class="title">Meal name</h3>
                                                <p class="text-semibold date no-margin">Sep 18,2018</p>
                                                <div class="text-semibold no-margin d-block order-id">Order ID: 7512154</div>
                                                <span class="time">7:53 PM</span>
                                            </div>
                                        </a>
                                    </div>
                                    <div class="timeline">
                                        <a href="#" class="timeline-content">
                                            <div class="avatar-img text-center mbmd">
                                                <div class="a-img cover" style="background-image: url('_assets/img/products/product.jpg')"></div>
                                            </div>
                                            <div class="inner-content">
                                                <h3 class="title">Meal name</h3>
                                                <p class="text-semibold date no-margin">Sep 18,2018</p>
                                                <div class="text-semibold no-margin d-block order-id">Order ID: 7512154</div>
                                                <span class="time">7:53 PM</span>
                                            </div>
                                        </a>
                                    </div>
                                    <div class="timeline">
                                        <a href="#" class="timeline-content">
                                            <div class="avatar-img text-center mbmd">
                                                <div class="a-img cover" style="background-image: url('_assets/img/products/product.jpg')"></div>
                                            </div>
                                            <div class="inner-content">
                                                <h3 class="title">Meal name</h3>
                                                <p class="text-semibold date no-margin">Sep 18,2018</p>
                                                <div class="text-semibold no-margin d-block order-id">Order ID: 7512154</div>
                                                <span class="time">7:53 PM</span>
                                            </div>
                                        </a>
                                    </div>
                                    <div class="timeline">
                                        <a href="#" class="timeline-content">
                                            <div class="avatar-img text-center mbmd">
                                                <div class="a-img cover" style="background-image: url('_assets/img/products/product.jpg')"></div>
                                            </div>
                                            <div class="inner-content">
                                                <h3 class="title">Meal name</h3>
                                                <p class="text-semibold date no-margin">Sep 18,2018</p>
                                                <div class="text-semibold no-margin d-block order-id">Order ID: 7512154</div>
                                                <span class="time">7:53 PM</span>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div role="tabpanel" class="tab-pane" id="favourites">
                        <div class="row ">
                            <div class="col-md-3 col-sm-6">
                                <div class="mbxlg">{% include 'component/product.html' %}</div>
                            </div>
                            <div class="col-md-3 col-sm-6">
                                <div class="mbxlg">{% include 'component/product.html' %}</div>
                            </div>
                            <div class="col-md-3 col-sm-6 ">
                                <div class="mbxlg">{% include 'component/product.html' %}</div>
                            </div>
                            <div class="col-md-3 col-sm-6 col-4">
                                <div class="mbxlg">{% include 'component/product.html' %}</div>
                            </div>
                            <div class="col-md-3 col-sm-6 col-4">
                                <div class="mbxlg">{% include 'component/product.html' %}</div>
                            </div>
                            <div class="col-md-3 col-sm-6 col-4">
                                <div class="mbxlg">{% include 'component/product.html' %}</div>
                            </div>
                            <div class="col-md-3 col-sm-6 col-4">
                                <div class="mbxlg">{% include 'component/product.html' %}</div>
                            </div>
                            <div class="col-md-3 col-sm-6 col-4">
                                <div class="mbxlg">{% include 'component/product.html' %}</div>
                            </div>
                        </div>
                    </div>
                    <div role="tabpanel" class="tab-pane" id="address">
                        <div class="row">
                            <div class="col-sm-4">
                                <div class="term-card address-card mblg">
                                    <div class="address-head mbsm">
                                        <h3 class="no-margin text-semibold">Home</h3>
                                    </div>
                                    <div class="address-details">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
                                        <p>+2011XXXXXX</p>
                                    </div>
                                    <div class="address-footer ptmd mtsm bt">
                                        <div class="default pull-left">
                                            <div class="text-semibold">
                                                Default address
                                            </div>
                                        </div>
                                        <div class="act-address pull-right">
                                            <a href="#" class="edit text-semibold mrsm"><i class="fa fa-edit mtxs"></i></a>
                                            <a href="#" class="delete text-semibold"><i class="fa fa-trash-alt mtxs"></i></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="term-card address-card mblg">
                                    <div class="address-head mbsm">
                                        <h3 class="no-margin text-semibold">Work</h3>
                                    </div>
                                    <div class="address-details">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
                                        <p>+2011XXXXXX</p>
                                    </div>
                                    <div class="address-footer ptmd mtsm bt">
                                        <div class="default pull-left">
                                            <a href="#">Set as default address</a>
                                        </div>
                                        <div class="act-address pull-right">
                                            <a href="#" class="edit text-semibold mrsm"><i class="fa fa-edit mtxs"></i></a>
                                            <a href="#" class="delete text-semibold"><i class="fa fa-trash-alt mtxs"></i></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="term-card address-card mblg">
                                    <div class="address-head mbsm">
                                        <h3 class="no-margin text-semibold">Club</h3>
                                    </div>
                                    <div class="address-details">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
                                        <p>+2011XXXXXX</p>
                                    </div>
                                    <div class="address-footer ptmd mtsm bt">
                                        <div class="default pull-left">
                                            <a href="#">Set as default address</a>
                                        </div>
                                        <div class="act-address pull-right">
                                            <a href="#" class="edit text-semibold mrsm"><i class="fa fa-edit mtxs"></i></a>
                                            <a href="#" class="delete text-semibold"><i class="fa fa-trash-alt mtxs"></i></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="text-center mtxxlg">
                            <a href="#" class="btn btn-green d-inline" data-toggle="modal" data-target="#add-address">Add new address</a>
                        </div>
                    </div>
                    <div role="tabpanel" class="tab-pane" id="bookmarks">
                        <div class="row">
                            {% for i in range(0, 6) -%}
                                <div class="col-sm-4">
                                <div class="bookmark-card mblg">
                                    <div class="bookmark-head">
                                        <div class="kitchen-img cover" style="background-image: url('_assets/img/cover/homepage.jpg')"></div>
                                        <div class="avatar-img kitchen-img text-center">
                                            <div class="a-img cover" style="background-image: url('_assets/img/kitchen.jpg')"></div>
                                        </div>
                                        <h3 class="no-margin text-semibold text-center mblg plxlg prxlg">kitchen 3</h3>
                                    </div>
                                    <div class="bookmark-footer text-center pbxxlg">
                                        <a href="kitchen.html" class="btn btn-green d-inline">Order food</a>
                                        <a href="#" class="btn btn-delete d-inline">Remove</a>
                                    </div>
                                </div>
                            </div>
                            {%- endfor %}
                        </div>
                    </div>
                    <div role="tabpanel" class="tab-pane" id="wallet">
                        <div class="row">
                            <div class="col-sm-4 col-sm-offset-4">
                                <div class="wallet-balance text-center">
                                    <img class="mbsm" src="_assets/img/icons/wallet-1.svg" alt="">
                                    <h2 class="no-margin mbmd text-semibold">My wallet</h2>
                                    <div class="credit text-bold">1512 EGP</div>
                                    <p class="text-center">Your wallet is empty </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

{% include 'component/product-model.html' %}

{% endblock content %}

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

        map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: 21.4966566, lng: 39.1838337},
            zoom: 8
        });

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

    $('#add-address').on('shown.bs.modal', function () {
        console.log("working");
        google.maps.event.trigger(map, "resize");
    });
</script>

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