{% extends "layout.html" %}

{% set title = 'Wallet' %}

{% set type = 'dashboard' %}

{% block content %}

<div class="container">
    <div class="row">
        <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">
                    <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" class="active">
                    <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="row mbxxlg">
                    <div class="col-sm-4">
                        <div class="feature faq-card text-center mbxxlg">
                            <div class="feature-img">
                                <img src="_assets/img/icons/money-1.svg" alt="">
                            </div>
                            <h3 class="capitalize">Expected Turnover</h3>
                            <h3 class="text-bold mtsm">
                                SAR 835/-
                            </h3>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="feature faq-card text-center mbxxlg">
                            <div class="feature-img">
                                <img src="_assets/img/icons/wallet-1.svg" alt="">
                            </div>
                            <h3 class="capitalize">recieved amount</h3>
                            <h3 class="text-bold mtsm">
                                SAR 0/-
                            </h3>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="feature faq-card text-center">
                            <div class="feature-img">
                                <img src="_assets/img/icons/payment-1.svg" alt="">
                            </div>
                            <h3 class="capitalize">qoot balance</h3>
                            <h3 class="text-bold mtsm">
                                SAR 835/-
                            </h3>
                        </div>
                    </div>
                </div>
                <div class="tab-g">
                    <ul class="nav nav-tabs text-center" role="tablist">
                        <li role="presentation" class="active"><a class="btn" href="#details" aria-controls="details" role="tab" data-toggle="tab" aria-expanded="true">Account Details</a></li>
                        <li role="presentation" class=""><a class="btn" href="#history" aria-controls="history" role="tab" data-toggle="tab" aria-expanded="false">Transaction History</a></li>
                    </ul>
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane active" id="details">
                            <div class="row">
                                <div class="col-sm-12">
                                    <form action="">
                                        <div class="select-container mbmd">
                                            <div class="custom-select">
                                                <select id="bank" name="bank">
                                                    <option value="">
                                                        Bank
                                                    </option>
                                                    <option value="1">
                                                        Option 1
                                                    </option>
                                                    <option value="2">
                                                        Option 2
                                                    </option>
                                                    <option value="3">
                                                        Option 3
                                                    </option>
                                                    <option value="4">
                                                        Option 4
                                                    </option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="select-container mbmd">
                                            <div class="custom-select">
                                                <select id="branch" name="branch">
                                                    <option value="">
                                                        Branch
                                                    </option>
                                                    <option value="1">
                                                        Option 1
                                                    </option>
                                                    <option value="2">
                                                        Option 2
                                                    </option>
                                                    <option value="3">
                                                        Option 3
                                                    </option>
                                                    <option value="4">
                                                        Option 4
                                                    </option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group mbmd">
                                            <input type="text" name="IBAN number" placeholder="IBAN number" required>
                                        </div>
                                        <div class="form-group mbmd">
                                            <input type="text" name="Account Name" placeholder="Account Name" required>
                                        </div>
                                        <div class="form-group mbmd">
                                            <input type="text" name="Account Number" placeholder="Account Number" required>
                                        </div>
                                        <button type="submit" class="btn btn-green mtxxlg pull-right">Save</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <div role="tabpanel" class="tab-pane" id="history">
                            <div class="last-orders order-items">
                                <div class="main-timeline4">
                                    <div class="timeline">
                                        <div class="timeline-content">
                                            <div class="avatar-img text-center mbmd"></div>
                                            <div class="inner-content">
                                                <h3 class="title text-bold">SAR 835</h3>
                                                <p class="text-semibold date no-margin">Sep 18,2018</p>
                                                <span class="time">7:53 PM</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="timeline">
                                        <div class="timeline-content">
                                            <div class="avatar-img text-center mbmd"></div>
                                            <div class="inner-content">
                                                <h3 class="title text-bold">SAR 835</h3>
                                                <p class="text-semibold date no-margin">Sep 18,2018</p>
                                                <span class="time">7:53 PM</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="timeline">
                                        <div class="timeline-content">
                                            <div class="avatar-img text-center mbmd"></div>
                                            <div class="inner-content">
                                                <h3 class="title text-bold">SAR 835</h3>
                                                <p class="text-semibold date no-margin">Sep 18,2018</p>
                                                <span class="time">7:53 PM</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="timeline">
                                        <div class="timeline-content">
                                            <div class="avatar-img text-center mbmd"></div>
                                            <div class="inner-content">
                                                <h3 class="title text-bold">SAR 835</h3>
                                                <p class="text-semibold date no-margin">Sep 18,2018</p>
                                                <span class="time">7:53 PM</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


{% endblock content %}