{% extends "layout.html" %}

{% set title = 'Account chef' %}

{% set type = 'dashboard' %}

{% block content %}

<div class="container">
    <aside class="col-sm-3 d-aside no-padding sticky" id="sidebar-menu">
        <div class="d-aside-c br">

            {% include 'component/aside-dashboard.html' %}

            <nav class="mtxxlg">
                <a href="dashboard.html">
                    <span class="icon-c text-center d-inline mrxs">
                        <img src="_assets/img/icons/view.svg" alt="">
                    </span>
                    <span>Dashboard</span>
                </a>
                <a href="dishes.html">
                     <span class="icon-c text-center d-inline mrxs">
                        <img src="_assets/img/icons/plate-1.svg" alt="">
                     </span>
                    <span>My Dishes</span>
                </a>
                <a href="weekly-deals.html">
                    <span class="icon-c text-center d-inline mrxs">
                        <img src="_assets/img/icons/calender.svg" alt="">
                    </span>
                    <span>Weekly Deals</span>
                </a>
                <a href="menus.html">
                    <span class="icon-c text-center d-inline mrxs">
                        <img src="_assets/img/icons/fork.svg" alt="">
                    </span>
                    <span>Menus</span>
                </a>
                <a href="orders.html">
                    <span class="icon-c text-center d-inline mrxs">
                        <img src="_assets/img/icons/edit-2.svg" alt="">
                    </span>
                    <span>Orders</span>
                </a>
                <a href="ingredient-calculator.html">
                    <span class="icon-c text-center d-inline mrxs">
                        <img src="_assets/img/icons/calculator.svg" alt="">
                    </span>
                    <span>Ingredient Calculator</span>
                </a>
                <a href="chef-account.html" class="active">
                    <span class="icon-c text-center d-inline mrxs">
                        <img src="_assets/img/icons/user-1.svg" alt="">
                    </span>
                    <span>My Account</span>
                </a>
                <a href="wallet.html">
                    <span class="icon-c text-center d-inline mrxs">
                        <img src="_assets/img/icons/wallet.svg" alt="">
                    </span>
                    <span>My Wallet</span>
                </a>
            </nav>
        </div>
    </aside>
    <div class="col-sm-9 d-content">
        <div class="d-content-c plmd">
            <div class="avatar-img text-center mbmd">
                <div class="a-img cover" style="background-image: url('_assets/img/kitchen.jpg')"></div>
            </div>
            <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">
                            Upload Photo
                        </label>
                    </div>
                    <p class="file-return"></p>
                </div>
            </div>
            <div class="kitchen-img vcenter cover mbxxlg" style="background-image: url('_assets/img/cover/homepage.jpg')">
                <div class="upload-container">
                    <div class="custom-input">
                        <div class="input-file-container text-center">
                            <input class="input-file" id="my-file-2" type="file">
                            <label tabindex="0" for="my-file-2" class="input-file-trigger file-btn text-bold">
                                Change Cover
                            </label>
                        </div>
                        <p class="file-return"></p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <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">Kitchen Name</label>
                                    <input type="text" name="name" placeholder="Kitchen Name" value="Mohaned" required>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="text-semibold mlmd">Owner Name</label>
                                    <input type="text" name="name" placeholder="Owner Name" value="Mohaned" required>
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label class="text-semibold mlmd">Kitchen info</label>
                                    <textarea name="" id="" cols="30" rows="5"></textarea>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="text-semibold mlmd">Phone Number</label>
                                    <input type="text" name="phone" placeholder="Phone Number" value="012316546123" required>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="text-semibold mlmd">Maroof Number</label>
                                    <input type="text" name="name" placeholder="Maroof Number" 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">Password</label>
                                    <input type="password" name="password" placeholder="Password" 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">Change password</a>
                                </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">
                                <div class="form-group">
                                    <label class="text-semibold mlmd">Instagram Page</label>
                                    <input type="text" name="name" placeholder="Instagram Page" value="Mohanad" required>
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <div class="select-container mbmd">
                                    <label class="text-semibold mlmd">Change Language</label>
                                    <div class="custom-select">
                                        <select id="lang" name="bank">
                                            <option value="">
                                                Change Language
                                            </option>
                                            <option value="1">
                                                English
                                            </option>
                                            <option value="2">
                                                عربي
                                            </option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-green mtxxlg pull-right">Save</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>


{% endblock content %}

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

            map = new google.maps.Map(document.getElementById('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 %}