<?php
require_once "common/header.php";
require_once "include/db_handler.php";
$db = new DbHandler();
?>
<body>
<div class="container-fluid">
    <div class="row">
        <?php
        require_once "common/sidebar.php";
        ?>
        <div class="right-column">
            <nav class="navbar navbar-expand-lg navbar-light bg-white">
                <a class="navbar-brand d-block d-sm-block d-md-block d-lg-none" href="#">
                    <img src="assets/img/logo-dark.png" width="145" height="32.3" alt="QuillPro">
                </a>
                <button class="hamburger hamburger--slider" type="button" data-target=".sidebar" aria-controls="sidebar"
                        aria-expanded="false" aria-label="Toggle Sidebar">
						<span class="hamburger-box">
							<span class="hamburger-inner"></span>
						</span>
                </button>
                <!-- Added Mobile-Only Menu -->
                <ul class="navbar-nav ml-auto mobile-only-control d-block d-sm-block d-md-block d-lg-none">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" id="navbar-notification-search-mobile"
                           data-toggle="dropdown" data-flip="false" aria-haspopup="true" aria-expanded="false">
                            <i class="batch-icon batch-icon-search"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-menu-fullscreen"
                            aria-labelledby="navbar-notification-search-mobile">
                            <li>
                                <form class="form-inline my-2 my-lg-0 no-waves-effect">
                                    <div class="input-group">
                                        <input type="text" class="form-control" placeholder="Search for..."
                                               aria-label="Search for..." aria-describedby="basic-addon2">
                                        <div class="input-group-append">
                                            <button class="btn btn-primary btn-gradient waves-effect waves-light"
                                                    type="button">
                                                <i class="batch-icon batch-icon-search"></i>
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </li>
                        </ul>
                    </li>
                </ul>

                <!--  DEPRECATED CODE:
                    <div class="navbar-collapse" id="navbarSupportedContent">
                -->
                <!-- USE THIS CODE Instead of the Commented Code Above -->
                <!-- .collapse added to the element -->
                <div class="collapse navbar-collapse" id="navbar-header-content">
                    <ul class="navbar-nav navbar-language-translation mr-auto">
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" id="navbar-dropdown-menu-link" data-toggle="dropdown"
                               data-flip="false" aria-haspopup="true" aria-expanded="false">
                                <i class="batch-icon batch-icon-book-alt-"></i>
                                English
                            </a>
                            <ul class="dropdown-menu" aria-labelledby="navbar-dropdown-menu-link">
                                <li><a class="dropdown-item" href="#">Français</a></li>
                                <li><a class="dropdown-item" href="#">Deutsche</a></li>
                                <li><a class="dropdown-item" href="#">Español</a></li>
                            </ul>
                        </li>
                    </ul>
                    <ul class="navbar-nav navbar-notifications float-right">
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" id="navbar-notification-search" data-toggle="dropdown"
                               data-flip="false" aria-haspopup="true" aria-expanded="false">
                                <i class="batch-icon batch-icon-search"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-menu-fullscreen"
                                aria-labelledby="navbar-notification-search">
                                <li>
                                    <form class="form-inline my-2 my-lg-0 no-waves-effect">
                                        <div class="input-group">
                                            <input type="text" class="form-control" placeholder="Search for..."
                                                   aria-label="Search for..." aria-describedby="basic-addon2">
                                            <div class="input-group-append">
                                                <button class="btn btn-primary btn-gradient waves-effect waves-light"
                                                        type="button">Search
                                                </button>
                                            </div>
                                        </div>
                                    </form>
                                </li>
                            </ul>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle no-waves-effect" id="navbar-notification-calendar"
                               data-toggle="dropdown" data-flip="false" aria-haspopup="true" aria-expanded="false">
                                <i class="batch-icon batch-icon-calendar"></i>
                                <span class="notification-number">6</span>
                            </a>
                            <ul class="dropdown-menu dropdown-menu-right dropdown-menu-md"
                                aria-labelledby="navbar-notification-calendar">
                                <li class="media">
                                    <a href="task-list.html">
                                        <i class="batch-icon batch-icon-calendar batch-icon-xl d-flex mr-3"></i>
                                        <div class="media-body">
                                            <h6 class="mt-0 mb-1 notification-heading">Meeting with Project Manager</h6>
                                            <div class="notification-text">
                                                Cras sit amet nibh libero
                                            </div>
                                            <span class="notification-time">Right now</span>
                                        </div>
                                    </a>
                                </li>
                                <li class="media">
                                    <a href="task-list.html">
                                        <i class="batch-icon batch-icon-calendar batch-icon-xl d-flex mr-3"></i>
                                        <div class="media-body">
                                            <h6 class="mt-0 mb-1 notification-heading">Sales Call</h6>
                                            <div class="notification-text">
                                                Nibh amet cras sit libero
                                            </div>
                                            <span class="notification-time">One hour from now</span>
                                        </div>
                                    </a>
                                </li>
                                <li class="media">
                                    <a href="task-list.html">
                                        <i class="batch-icon batch-icon-calendar batch-icon-xl d-flex mr-3"></i>
                                        <div class="media-body">
                                            <h6 class="mt-0 mb-1 notification-heading">Email CEO new expansion
                                                proposal</h6>
                                            <div class="notification-text">
                                                Cras sit amet nibh libero
                                            </div>
                                            <span class="notification-time">In 3 days</span>
                                        </div>
                                    </a>
                                </li>
                                <li class="media">
                                    <a href="task-list.html">
                                        <i class="batch-icon batch-icon-calendar batch-icon-xl d-flex mr-3"></i>
                                        <div class="media-body">
                                            <h6 class="mt-0 mb-1 notification-heading">Team building exercise</h6>
                                            <div class="notification-text">
                                                Cras sit amet nibh libero
                                            </div>
                                            <span class="notification-time">In one week</span>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle no-waves-effect" id="navbar-notification-misc"
                               data-toggle="dropdown" data-flip="false" aria-haspopup="true" aria-expanded="false">
                                <i class="batch-icon batch-icon-bell"></i>
                                <span class="notification-number">4</span>
                            </a>
                            <ul class="dropdown-menu dropdown-menu-right dropdown-menu-md"
                                aria-labelledby="navbar-notification-misc">
                                <li class="media">
                                    <a href="task-list.html">
                                        <i class="batch-icon batch-icon-bell batch-icon-xl d-flex mr-3"></i>
                                        <div class="media-body">
                                            <h6 class="mt-0 mb-1 notification-heading">General Notification</h6>
                                            <div class="notification-text">
                                                Cras sit amet nibh libero
                                            </div>
                                            <span class="notification-time">Just now</span>
                                        </div>
                                    </a>
                                </li>
                                <li class="media">
                                    <a href="task-list.html">
                                        <i class="batch-icon batch-icon-cloud-download batch-icon-xl d-flex mr-3"></i>
                                        <div class="media-body">
                                            <h6 class="mt-0 mb-1 notification-heading">Your Download Is Ready</h6>
                                            <div class="notification-text">
                                                Nibh amet cras sit libero
                                            </div>
                                            <span class="notification-time">5 minutes ago</span>
                                        </div>
                                    </a>
                                </li>
                                <li class="media">
                                    <a href="task-list.html">
                                        <i class="batch-icon batch-icon-tag-alt-2 batch-icon-xl d-flex mr-3"></i>
                                        <div class="media-body">
                                            <h6 class="mt-0 mb-1 notification-heading">New Order</h6>
                                            <div class="notification-text">
                                                Cras sit amet nibh libero
                                            </div>
                                            <span class="notification-time">Yesterday</span>
                                        </div>
                                    </a>
                                </li>
                                <li class="media">
                                    <a href="task-list.html">
                                        <i class="batch-icon batch-icon-pull batch-icon-xl d-flex mr-3"></i>
                                        <div class="media-body">
                                            <h6 class="mt-0 mb-1 notification-heading">Pull Request</h6>
                                            <div class="notification-text">
                                                Cras sit amet nibh libero
                                            </div>
                                            <span class="notification-time">3 day ago</span>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                    <ul class="navbar-nav ml-5 navbar-profile">
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" id="navbar-dropdown-navbar-profile"
                               data-toggle="dropdown" data-flip="false" aria-haspopup="true" aria-expanded="false">
                                <div class="profile-name">
                                    Johanna Quinn
                                </div>
                                <div class="profile-picture bg-gradient bg-primary has-message float-right">
                                    <img src="assets/img/profile-pic.jpg" width="44" height="44">
                                </div>
                            </a>
                            <ul class="dropdown-menu dropdown-menu-right"
                                aria-labelledby="navbar-dropdown-navbar-profile">
                                <li><a class="dropdown-item" href="profiles-member-profile.html">Profile</a></li>
                                <li>
                                    <a class="dropdown-item" href="mail-inbox.html">
                                        Messages
                                        <span class="badge badge-danger badge-pill float-right">3</span>
                                    </a>
                                </li>
                                <li><a class="dropdown-item" href="profiles-member-profile.html">Settings</a></li>
                                <li><a class="dropdown-item" href="sisu-lock-screen.html">Logout</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </nav>
            <main class="main-content p-5" role="main">
                <div class="row">
                    <div class="col-md-6 col-lg-6 col-xl-3 mb-5">
                        <div class="card card-tile card-xs bg-primary bg-gradient text-center">
                            <div class="card-body p-4">
                                <div class="tile-left">
                                    <i class="batch-icon batch-icon-user-alt batch-icon-xxl"></i>
                                </div>
                                <div class="tile-right">
                                    <div class="tile-number">
                                        <?php
                                        $listingSize = $db->countUser();
                                        echo $listingSize;
                                        ?>
                                    </div>
                                    <div class="tile-description">ToTal Users</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-6 col-xl-3 mb-5">
                        <div class="card card-tile card-xs bg-secondary bg-gradient text-center">
                            <div class="card-body p-4">
                                <div class="tile-left">
                                    <i class="batch-icon batch-icon-tag-alt-2 batch-icon-xxl"></i>
                                </div>
                                <div class="tile-right">
                                    <div class="tile-number">
                                        <?php
                                        $listingSize = $db->countCategories();
                                        echo $listingSize;
                                        ?>
                                    </div>
                                    <div class="tile-description">Categories</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-6 col-xl-3 mb-5">
                        <div class="card card-tile card-xs bg-primary bg-gradient text-center">
                            <div class="card-body p-4">
                                <div class="tile-left">
                                    <i class="batch-icon batch-icon-list batch-icon-xxl"></i>
                                </div>
                                <div class="tile-right">
                                    <div class="tile-number">
                                        <?php
                                        $listingSize = $db->countAllArticles();
                                        echo $listingSize;
                                        ?>
                                    </div>
                                    <div class="tile-description">Total Articles</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-6 col-xl-3 mb-5">
                        <div class="card card-tile card-xs bg-secondary bg-gradient text-center">
                            <div class="card-body p-4">
                                <div class="tile-left">
                                    <i class="batch-icon batch-icon-star batch-icon-xxl"></i>
                                </div>
                                <div class="tile-right">
                                    <div class="tile-number">
                                        <?php
                                        $listingSize = $db->countPublishedArticles();
                                        echo $listingSize;
                                        ?>
                                    </div>
                                    <div class="tile-description">Published Articles</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 col-lg-6 col-xl-8 mb-5">
                        <div class="card">
                            <div class="card-header">
                                Articles Overview
                                <div class="header-btn-block">
										<span class="data-range dropdown">
											<a href="#" class="btn btn-primary dropdown-toggle"
                                               id="navbar-dropdown-sales-overview-header-button" data-toggle="dropdown"
                                               data-flip="false" aria-haspopup="true" aria-expanded="false">
												<i class="batch-icon batch-icon-calendar"></i>
											</a>
											<div class="dropdown-menu dropdown-menu-right"
                                                 aria-labelledby="navbar-dropdown-sales-overview-header-button">
												<a class="dropdown-item" href="today.html">Today</a>
												<a class="dropdown-item" href="week.html">This Week</a>
												<a class="dropdown-item" href="month.html">This Month</a>
												<a class="dropdown-item active" href="year.html">This Year</a>
											</div>
										</span>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="card-chart" data-chart-color-1="#07a7e3" data-chart-color-2="#32dac3"
                                     data-chart-legend-1="Sales ($)" data-chart-legend-2="Orders"
                                     data-chart-height="281">
                                    <canvas id="sales-overview"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-6 col-xl-4 mb-5">
                        <div class="card card-md">
                            <div class="card-header">
                                Traffic Sources
                                <div class="header-btn-block">
										<span class="data-range dropdown">
											<a href="#" class="btn btn-primary dropdown-toggle"
                                               id="navbar-dropdown-traffic-sources-header-button" data-toggle="dropdown"
                                               data-flip="false" aria-haspopup="true" aria-expanded="false">
												<i class="batch-icon batch-icon-calendar"></i>
											</a>
											<div class="dropdown-menu dropdown-menu-right"
                                                 aria-labelledby="navbar-dropdown-traffic-sources-header-button">
												<a class="dropdown-item" href="today.html">Today</a>
												<a class="dropdown-item" href="week.html">This Week</a>
												<a class="dropdown-item" href="month.html">This Month</a>
												<a class="dropdown-item active" href="year.html">This Year</a>
											</div>
										</span>
                                </div>
                            </div>
                            <div class="card-body text-center">
                                <p class="text-left">Your top 5 traffic sources</p>
                                <div class="card-chart" data-chart-color-1="#07a7e3" data-chart-color-2="#32dac3"
                                     data-chart-color-3="#4f5b60" data-chart-color-4="#FCCF31"
                                     data-chart-color-5="#f43a59">
                                    <canvas id="traffic-source"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">

                    <div class="col-md-6 col-lg-4 mb-5">
                        <div class="card card-sm bg-info">
                            <div class="card-body">
                                <div class="mb-4 clearfix">
                                    <div class="float-left text-warning text-left">
                                        <i class="fa fa-facebook-square batch-icon-xxl"></i>
                                    </div>
                                    <div class="float-right text-right">
                                        <h6 class="m-0">Twitter Followers</h6>
                                    </div>
                                </div>
                                <div class="text-right clearfix">
                                    <div class="display-4">65,452</div>
                                    <div class="m-0">+72 Today</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6 col-lg-4 mb-5">
                        <div class="card card-sm bg-info">
                            <div class="card-body">
                                <div class="mb-4 clearfix">
                                    <div class="float-left text-warning text-left">
                                        <i class="fa fa-twitter batch-icon-xxl"></i>
                                    </div>
                                    <div class="float-right text-right">
                                        <h6 class="m-0">Twitter Followers</h6>
                                    </div>
                                </div>
                                <div class="text-right clearfix">
                                    <div class="display-4">65,452</div>
                                    <div class="m-0">+72 Today</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-12 col-lg-4 mb-5">
                        <div class="card card-sm bg-danger">
                            <div class="card-body">
                                <div class="mb-4 clearfix">
                                    <div class="float-left text-left">
                                        <i class="fa fa-youtube batch-icon-xxl"></i>
                                    </div>
                                    <div class="float-right text-right">
                                        <h6 class="m-0">Products Returned</h6>
                                    </div>
                                </div>
                                <div class="text-right clearfix">
                                    <div class="display-4">231</div>
                                    <div class="m-0">-4% Today</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>
</div>
<?php
require_once "modals/add_article.php";
require_once "modals/logout.php";
require_once "modals/add_user.php";
require_once "modals/add_category.php";
require_once "common/footer.php";
?>
