<?php
// Initialize the session
require '../includes/session-check.php';

require_once "../includes/header.php";

?>



<body>

    <!-- loader -->
    <div id="loader">
        <img src="assets/img/logo-icon.png" alt="icon" class="loading-icon">
    </div>
    <!-- * loader -->

    <!-- App Header -->
    <div class="appHeader bg-primary text-light">
        <div class="left">
            <a href="#" class="headerButton" data-toggle="modal" data-target="#sidebarPanel">
                <ion-icon name="menu-outline"></ion-icon>
            </a>
        </div>
        <div class="pageTitle">
            <img src="assets/img/logo.png" alt="logo" class="logo">
        </div>
        <div class="right">
            <a href="app-notifications.html" class="headerButton">
                <ion-icon class="icon" name="notifications-outline"></ion-icon>
                <span class="badge badge-danger">4</span>
            </a>
            <a href="app-settings.html" class="headerButton">
                <img src="assets/img/sample/avatar/avatar1.jpg" alt="image" class="imaged w32">
                <span class="badge badge-danger">6</span>
            </a>
        </div>
    </div>
    <!-- * App Header -->


    <!-- App Capsule -->
    <div id="appCapsule">

        <!-- Wallet Card -->
        <div class="section wallet-card-section pt-1">
            <div class="wallet-card">
                <!-- Balance -->
                <div class="balance">
                    <div class="left">
                        <span class="title">Total Balance</span>
                        <h1 class="total">$ 2,562.50</h1>
                    </div>
                    <div class="right">
                        <a href="#" class="button" data-toggle="modal" data-target="#depositActionSheet">
                            <ion-icon name="add-outline"></ion-icon>
                        </a>
                    </div>
                </div>
                <!-- * Balance -->
                <!-- Wallet Footer -->
                <div class="wallet-footer">
                    <div class="item">
                        <a href="#" data-toggle="modal" data-target="#depositActionSheet">
                            <div class="icon-wrapper bg-danger">
                                <ion-icon name="arrow-down-outline"></ion-icon>
                            </div>
                            <strong>Withdraw</strong>
                        </a>
                    </div>
                    <div class="item">
                        <a href="#" data-toggle="modal" data-target="#sendActionSheet">
                            <div class="icon-wrapper">
                                <ion-icon name="arrow-forward-outline"></ion-icon>
                            </div>
                            <strong>Send</strong>
                        </a>
                    </div>
                    <div class="item">
                        <a href="app-cards.html">
                            <div class="icon-wrapper bg-success">
                                <ion-icon name="card-outline"></ion-icon>
                            </div>
                            <strong>Cards</strong>
                        </a>
                    </div>
                    <div class="item">
                        <a href="#" data-toggle="modal" data-target="#sendActionSheet">
                            <div class="icon-wrapper bg-warning">
                                <ion-icon name="swap-vertical"></ion-icon>
                            </div>
                            <strong>Exchange</strong>
                        </a>
                    </div>

                </div>
                <!-- * Wallet Footer -->
            </div>
        </div>
        <!-- Wallet Card -->

        <!-- Deposit Action Sheet -->
        <div class="modal fade action-sheet" id="depositActionSheet" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Add Balance</h5>
                    </div>
                    <div class="modal-body">
                        <div class="action-sheet-content">
                            <form>
                                <div class="form-group basic">
                                    <div class="input-wrapper">
                                        <label class="label" for="account1">From</label>
                                        <select class="form-control custom-select" id="account1">
                                            <option value="0">Savings (*** 5019)</option>
                                            <option value="1">Investment (*** 6212)</option>
                                            <option value="2">Mortgage (*** 5021)</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group basic">
                                    <label class="label">Enter Amount</label>
                                    <div class="input-group mb-3">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text" id="input1">$</span>
                                        </div>
                                        <input type="text" class="form-control form-control-lg" value="100">
                                    </div>
                                </div>

                                

                                <div class="form-group basic">
                                    <button type="button" class="btn btn-primary btn-block btn-lg"
                                        data-dismiss="modal">Deposit</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- * Deposit Action Sheet -->

        <!-- Send Action Sheet -->
        <div class="modal fade action-sheet" id="sendActionSheet" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Send Money</h5>
                    </div>
                    <div class="modal-body">
                        <div class="action-sheet-content">
                            <form>
                                <div class="form-group basic">
                                    <div class="input-wrapper">
                                        <label class="label" for="account2">From</label>
                                        <select class="form-control custom-select" id="account2">
                                            <option value="0">Savings (*** 5019)</option>
                                            <option value="1">Investment (*** 6212)</option>
                                            <option value="2">Mortgage (*** 5021)</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group basic">
                                    <div class="input-wrapper">
                                        <label class="label" for="text11">To</label>
                                        <input type="email" class="form-control" id="text11" placeholder="Enter bank ID">
                                        <i class="clear-input"><ion-icon name="close-circle"></ion-icon></i>
                                    </div>
                                </div>

                                <div class="form-group basic">
                                    <label class="label">Enter Amount</label>
                                    <div class="input-group mb-3">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text" id="input14">$</span>
                                        </div>
                                        <input type="text" class="form-control form-control-lg" placeholder="0">
                                    </div>
                                </div>

                                

                                <div class="form-group basic">
                                    <button type="button" class="btn btn-primary btn-block btn-lg"
                                        data-dismiss="modal">Deposit</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- * Send Action Sheet -->

        <!-- Stats -->
        <div class="section">
            <div class="row mt-2">
                <div class="col-6">
                    <div class="stat-box">
                        <div class="title">Income</div>
                        <div class="value text-success">$ 552.95</div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="stat-box">
                        <div class="title">Expenses</div>
                        <div class="value text-danger">$ 86.45</div>
                    </div>
                </div>
            </div>
            <div class="row mt-2">
                <div class="col-6">
                    <div class="stat-box">
                        <div class="title">Total Bills</div>
                        <div class="value">$ 53.25</div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="stat-box">
                        <div class="title">Savings</div>
                        <div class="value">$ 120.99</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- * Stats -->

        <!-- Transactions -->
        <div class="section mt-4">
            <div class="section-heading">
                <h2 class="title">Transactions</h2>
                <a href="app-transactions.html" class="link">View All</a>
            </div>
            <div class="transactions">
                <!-- item -->
                <a href="app-transaction-detail.html" class="item">
                    <div class="detail">
                        <img src="assets/img/sample/brand/1.jpg" alt="img" class="image-block imaged w48">
                        <div>
                            <strong>Amazon</strong>
                            <p>Shopping</p>
                        </div>
                    </div>
                    <div class="right">
                        <div class="price text-danger"> - $ 150</div>
                    </div>
                </a>
                <!-- * item -->
                <!-- item -->
                <a href="app-transaction-detail.html" class="item">
                    <div class="detail">
                        <img src="assets/img/sample/brand/2.jpg" alt="img" class="image-block imaged w48">
                        <div>
                            <strong>Apple</strong>
                            <p>Appstore Purchase</p>
                        </div>
                    </div>
                    <div class="right">
                        <div class="price text-danger">- $ 29</div>
                    </div>
                </a>
                <!-- * item -->
                <!-- item -->
                <a href="app-transaction-detail.html" class="item">
                    <div class="detail">
                        <img src="assets/img/sample/avatar/avatar3.jpg" alt="img" class="image-block imaged w48">
                        <div>
                            <strong>Alex Ljung</strong>
                            <p>Transfer</p>
                        </div>
                    </div>
                    <div class="right">
                        <div class="price">+ $ 1,000</div>
                    </div>
                </a>
                <!-- * item -->
                <!-- item -->
                <a href="app-transaction-detail.html" class="item">
                    <div class="detail">
                        <img src="assets/img/sample/avatar/avatar4.jpg" alt="img" class="image-block imaged w48">
                        <div>
                            <strong>Beatriz Brito</strong>
                            <p>Transfer</p>
                        </div>
                    </div>
                    <div class="right">
                        <div class="price text-danger">- $ 186</div>
                    </div>
                </a>
                <!-- * item -->
            </div>
        </div>
        <!-- * Transactions -->

        <!-- my cards -->
        <div class="section full mt-4">
            <div class="section-heading padding">
                <h2 class="title">My Cards</h2>
                <a href="app-cards.html" class="link">View All</a>
            </div>
            <div class="carousel-single owl-carousel owl-theme shadowfix">
                <div class="item">
                    <!-- card block -->
                    <div class="card-block bg-primary">
                        <div class="card-main">
                            <div class="card-button dropdown">
                                <button type="button" class="btn btn-link btn-icon" data-toggle="dropdown">
                                    <ion-icon name="ellipsis-horizontal"></ion-icon>
                                </button>
                                <div class="dropdown-menu dropdown-menu-right">
                                    <a class="dropdown-item" href="javacript:;">
                                        <ion-icon name="pencil-outline"></ion-icon>Edit
                                    </a>
                                    <a class="dropdown-item" href="javacript:;">
                                        <ion-icon name="close-outline"></ion-icon>Remove
                                    </a>
                                    <a class="dropdown-item" href="javacript:;">
                                        <ion-icon name="arrow-up-circle-outline"></ion-icon>Upgrade
                                    </a>
                                </div>
                            </div>
                            <div class="balance">
                                <span class="label">BALANCE</span>
                                <h1 class="title">$ 1,256,90</h1>
                            </div>
                            <div class="in">
                                <div class="card-number">
                                    <span class="label">Card Number</span>
                                    9905 0903 0234 9905
                                </div>
                                <div class="bottom">
                                    <div class="card-expiry">
                                        <span class="label">Expiry</span>
                                        12 / 25
                                    </div>
                                    <div class="card-ccv">
                                        <span class="label">CCV</span>
                                        553
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- * card block -->
                </div>
                <div class="item">
                    <!-- card block -->
                    <div class="card-block bg-dark">
                        <div class="card-main">
                            <div class="card-button dropdown">
                                <button type="button" class="btn btn-link btn-icon" data-toggle="dropdown">
                                    <ion-icon name="ellipsis-horizontal"></ion-icon>
                                </button>
                                <div class="dropdown-menu dropdown-menu-right">
                                    <a class="dropdown-item" href="javacript:;">
                                        <ion-icon name="pencil-outline"></ion-icon>Edit
                                    </a>
                                    <a class="dropdown-item" href="javacript:;">
                                        <ion-icon name="close-outline"></ion-icon>Remove
                                    </a>
                                    <a class="dropdown-item" href="javacript:;">
                                        <ion-icon name="arrow-up-circle-outline"></ion-icon>Upgrade
                                    </a>
                                </div>
                            </div>
                            <div class="balance">
                                <span class="label">BALANCE</span>
                                <h1 class="title">$ 1,256,90</h1>
                            </div>
                            <div class="in">
                                <div class="card-number">
                                    <span class="label">Card Number</span>
                                    9905 0903 0234 9905
                                </div>
                                <div class="bottom">
                                    <div class="card-expiry">
                                        <span class="label">Expiry</span>
                                        12 / 25
                                    </div>
                                    <div class="card-ccv">
                                        <span class="label">CCV</span>
                                        553
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- * card block -->
                </div>
                <div class="item">
                    <!-- card block -->
                    <div class="card-block bg-secondary">
                        <div class="card-main">
                            <div class="card-button dropdown">
                                <button type="button" class="btn btn-link btn-icon" data-toggle="dropdown">
                                    <ion-icon name="ellipsis-horizontal"></ion-icon>
                                </button>
                                <div class="dropdown-menu dropdown-menu-right">
                                    <a class="dropdown-item" href="javacript:;">
                                        <ion-icon name="pencil-outline"></ion-icon>Edit
                                    </a>
                                    <a class="dropdown-item" href="javacript:;">
                                        <ion-icon name="close-outline"></ion-icon>Remove
                                    </a>
                                    <a class="dropdown-item" href="javacript:;">
                                        <ion-icon name="arrow-up-circle-outline"></ion-icon>Upgrade
                                    </a>
                                </div>
                            </div>
                            <div class="balance">
                                <span class="label">BALANCE</span>
                                <h1 class="title">$ 1,256,90</h1>
                            </div>
                            <div class="in">
                                <div class="card-number">
                                    <span class="label">Card Number</span>
                                    9905 0903 0234 9905
                                </div>
                                <div class="bottom">
                                    <div class="card-expiry">
                                        <span class="label">Expiry</span>
                                        12 / 25
                                    </div>
                                    <div class="card-ccv">
                                        <span class="label">CCV</span>
                                        553
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- * card block -->
                </div>
            </div>
        </div>
        <!-- * my cards -->

        <!-- Send Money -->
        <div class="section full mt-4">
            <div class="section-heading padding">
                <h2 class="title">Send Money</h2>
                <a href="javascript:;" class="link">Add New</a>
            </div>
            <div class="shadowfix carousel-small owl-carousel owl-theme">
                <!-- item -->
                <div class="item">
                    <a href="#">
                        <div class="user-card">
                            <img src="assets/img/sample/avatar/avatar2.jpg" alt="img" class="imaged w-48">
                            <strong>Jurrien</strong>
                        </div>
                    </a>
                </div>
                <!-- * item -->
                <!-- item -->
                <div class="item">
                    <a href="#">
                        <div class="user-card">
                            <img src="assets/img/sample/avatar/avatar3.jpg" alt="img" class="imaged w-48">
                            <strong>Elwin</strong>
                        </div>
                    </a>
                </div>
                <!-- * item -->
                <!-- item -->
                <div class="item">
                    <a href="#">
                        <div class="user-card">
                            <img src="assets/img/sample/avatar/avatar4.jpg" alt="img" class="imaged w-48">
                            <strong>Alma</strong>
                        </div>
                    </a>
                </div>
                <!-- * item -->
                <!-- item -->
                <div class="item">
                    <a href="#">
                        <div class="user-card">
                            <img src="assets/img/sample/avatar/avatar5.jpg" alt="img" class="imaged w-48">
                            <strong>Justine</strong>
                        </div>
                    </a>
                </div>
                <!-- * item -->
                <!-- item -->
                <div class="item">
                    <a href="#">
                        <div class="user-card">
                            <img src="assets/img/sample/avatar/avatar6.jpg" alt="img" class="imaged w-48">
                            <strong>Maria</strong>
                        </div>
                    </a>
                </div>
                <!-- * item -->
                <!-- item -->
                <div class="item">
                    <a href="#">
                        <div class="user-card">
                            <img src="assets/img/sample/avatar/avatar7.jpg" alt="img" class="imaged w-48">
                            <strong>Pamela</strong>
                        </div>
                    </a>
                </div>
                <!-- * item -->
                <!-- item -->
                <div class="item">
                    <a href="#">
                        <div class="user-card">
                            <img src="assets/img/sample/avatar/avatar8.jpg" alt="img" class="imaged w-48">
                            <strong>Neville</strong>
                        </div>
                    </a>
                </div>
                <!-- * item -->
                <!-- item -->
                <div class="item">
                    <a href="#">
                        <div class="user-card">
                            <img src="assets/img/sample/avatar/avatar9.jpg" alt="img" class="imaged w-48">
                            <strong>Alex</strong>
                        </div>
                    </a>
                </div>
                <!-- * item -->
                <!-- item -->
                <div class="item">
                    <a href="#">
                        <div class="user-card">
                            <img src="assets/img/sample/avatar/avatar10.jpg" alt="img" class="imaged w-48">
                            <strong>Stina</strong>
                        </div>
                    </a>
                </div>
                <!-- * item -->
            </div>
        </div>
        <!-- * Send Money -->

        <!-- Monthly Bills -->
        <div class="section full mt-4">
            <div class="section-heading padding">
                <h2 class="title">Monthly Bills</h2>
                <a href="app-bills.html" class="link">View All</a>
            </div>
            <div class="carousel-multiple owl-carousel owl-theme shadowfix">
                <!-- item -->
                <div class="item">
                    <div class="bill-box">
                        <div class="img-wrapper">
                            <img src="assets/img/sample/brand/1.jpg" alt="img" class="image-block imaged w48">
                        </div>
                        <div class="price">$ 14</div>
                        <p>Prime Monthly Subscription</p>
                        <a href="#" class="btn btn-primary btn-block btn-sm">PAY NOW</a>
                    </div>
                </div>
                <!-- * item -->
                <!-- item -->
                <div class="item">
                    <div class="bill-box">
                        <div class="img-wrapper">
                            <img src="assets/img/sample/brand/2.jpg" alt="img" class="image-block imaged w48">
                        </div>
                        <div class="price">$ 9</div>
                        <p>Music Monthly Subscription</p>
                        <a href="#" class="btn btn-primary btn-block btn-sm">PAY NOW</a>
                    </div>
                </div>
                <!-- * item -->
                <!-- item -->
                <div class="item">
                    <div class="bill-box">
                        <div class="img-wrapper">
                            <div class="iconbox bg-danger">
                                <ion-icon name="medkit-outline"></ion-icon>
                            </div>
                        </div>
                        <div class="price">$ 299</div>
                        <p>Monthly Health Insurance</p>
                        <a href="#" class="btn btn-primary btn-block btn-sm">PAY NOW</a>
                    </div>
                </div>
                <!-- * item -->
                <!-- item -->
                <div class="item">
                    <div class="bill-box">
                        <div class="img-wrapper">
                            <div class="iconbox">
                                <ion-icon name="card-outline"></ion-icon>
                            </div>
                        </div>
                        <div class="price">$ 962</div>
                        <p>Credit Card Statement
                        </p>
                        <a href="#" class="btn btn-primary btn-block btn-sm">PAY NOW</a>
                    </div>
                </div>
                <!-- * item -->
            </div>
        </div>
        <!-- * Monthly Bills -->


        <!-- Saving Goals -->
        <div class="section mt-4">
            <div class="section-heading">
                <h2 class="title">Saving Goals</h2>
                <a href="app-savings.html" class="link">View All</a>
            </div>
            <div class="goals">
                <!-- item -->
                <div class="item">
                    <div class="in">
                        <div>
                            <h4>Gaming Console</h4>
                            <p>Gaming</p>
                        </div>
                        <div class="price">$ 499</div>
                    </div>
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" style="width: 85%;" aria-valuenow="85"
                            aria-valuemin="0" aria-valuemax="100">85%</div>
                    </div>
                </div>
                <!-- * item -->
                <!-- item -->
                <div class="item">
                    <div class="in">
                        <div>
                            <h4>New House</h4>
                            <p>Living</p>
                        </div>
                        <div class="price">$ 100,000</div>
                    </div>
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" style="width: 55%;" aria-valuenow="55"
                            aria-valuemin="0" aria-valuemax="100">55%</div>
                    </div>
                </div>
                <!-- * item -->
                <!-- item -->
                <div class="item">
                    <div class="in">
                        <div>
                            <h4>Sport Car</h4>
                            <p>Lifestyle</p>
                        </div>
                        <div class="price">$ 42,500</div>
                    </div>
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" style="width: 15%;" aria-valuenow="15"
                            aria-valuemin="0" aria-valuemax="100">15%</div>
                    </div>
                </div>
                <!-- * item -->
            </div>
        </div>
        <!-- * Saving Goals -->


        <!-- News -->
        <div class="section full mt-4 mb-3">
            <div class="section-heading padding">
                <h2 class="title">Lastest News</h2>
                <a href="app-blog.html" class="link">View All</a>
            </div>
            <div class="shadowfix carousel-multiple owl-carousel owl-theme">

                <!-- item -->
                <div class="item">
                    <a href="app-blog-post.html">
                        <div class="blog-card">
                            <img src="assets/img/sample/photo/1.jpg" alt="image" class="imaged w-100">
                            <div class="text">
                                <h4 class="title">What will be the value of bitcoin in the next...</h4>
                            </div>
                        </div>
                    </a>
                </div>
                <!-- * item -->

                <!-- item -->
                <div class="item">
                    <a href="app-blog-post.html">
                        <div class="blog-card">
                            <img src="assets/img/sample/photo/2.jpg" alt="image" class="imaged w-100">
                            <div class="text">
                                <h4 class="title">Rules you need to know in business</h4>
                            </div>
                        </div>
                    </a>
                </div>
                <!-- * item -->

                <!-- item -->
                <div class="item">
                    <a href="app-blog-post.html">
                        <div class="blog-card">
                            <img src="assets/img/sample/photo/3.jpg" alt="image" class="imaged w-100">
                            <div class="text">
                                <h4 class="title">10 easy ways to save your money</h4>
                            </div>
                        </div>
                    </a>
                </div>
                <!-- * item -->

                <!-- item -->
                <div class="item">
                    <a href="app-blog-post.html">
                        <div class="blog-card">
                            <img src="assets/img/sample/photo/4.jpg" alt="image" class="imaged w-100">
                            <div class="text">
                                <h4 class="title">Follow the financial agenda with...</h4>
                            </div>
                        </div>
                    </a>
                </div>
                <!-- * item -->

            </div>
        </div>
        <!-- * News -->


        <!-- app footer -->
        <div class="appFooter">
            <div class="footer-title">
                Copyright © Finapp 2020. All Rights Reserved.
            </div>
            Bootstrap 4 based mobile template.
        </div>
        <!-- * app footer -->

    </div>
    <!-- * App Capsule -->


    <!-- App Bottom Menu -->
    <div class="appBottomMenu">
        <a href="app-index.html" class="item active">
            <div class="col">
                <ion-icon name="pie-chart-outline"></ion-icon>
                <strong>Overview</strong>
            </div>
        </a>
        <a href="app-pages.html" class="item">
            <div class="col">
                <ion-icon name="document-text-outline"></ion-icon>
                <strong>Pages</strong>
            </div>
        </a>
        <a href="app-components.html" class="item">
            <div class="col">
                <ion-icon name="apps-outline"></ion-icon>
                <strong>Components</strong>
            </div>
        </a>
        <a href="app-cards.html" class="item">
            <div class="col">
                <ion-icon name="card-outline"></ion-icon>
                <strong>My Cards</strong>
            </div>
        </a>
        <a href="javascript:;" class="item" data-toggle="modal" data-target="#sidebarPanel">
            <div class="col">
                <ion-icon name="menu-outline"></ion-icon>
                <strong>Menu</strong>
            </div>
        </a>
    </div>
    <!-- * App Bottom Menu -->

    <!-- App Sidebar -->
<?php
// Initialize the session
require '../includes/admin-side-menu.php';



?>
    <!-- * App Sidebar -->

    <!-- ///////////// Js Files ////////////////////  -->
    <!-- Jquery -->
    <?php
   require '../includes/js-bottom-scripts.php';
   ?>


</body>


