<?php
session_start();

require_once "../SystemController/DbConnection.php";
require '../SystemController/CsrfProtection.php';
$csrf = new CsrfProtection();
if(!isset($_SESSION['id']) && !isset($_SESSION['loggedid'])){
    header("Location: ../login.php");
    
    exit;
}

$id = $_SESSION['id'];
//$id = 1;
$msg = "";

$page = $_GET['page'];


$db_handle = new Dbconnection();


$user = $db_handle->runBaseQuery("SELECT * FROM users WHERE id = $id ");
$fname = $user[0]['first_name'];
$surname = $user[0]['surname'];
$acc_balance = $user[0]['balance'];
$email = $user[0]['email'];
$phone = $user[0]['phone'];
$state = $user[0]['state'];
$city = $user[0]['city'];
$address = $user[0]['address'];
$photo = $user[0]['user_photo'];
$reg_date = $user[0]['date_registered'];
$savings_balance = $user[0]['savings_balance'];


?>
 <html lang="en" dir="ltr" data-nav-layout="vertical" data-theme-mode="light" data-header-styles="light" data-menu-styles="dark" loader="disable" data-vertical-style="overlay">
    <head>
        <!-- Meta Data --> 
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Ovoh Initiative</title>
        <meta name="robots" content="noindex, nofollow">

        
        
        <!-- Favicon --> 
        <link rel="icon" href="assets/images/brand-logos/favicon.png" type="image/x-icon">
        <link rel="icon" href="/favicon.ico" sizes="any">
        <link rel="icon" href="/favicon.svg" type="image/svg+xml">
        <link rel="apple-touch-icon" href="assets/images/brand-logos/favicon.png">

         <!-- Main Theme Js --> 
        <script src="assets/js/main.js"></script> <!-- Bootstrap Css --> 
        <link id="style" href="assets/css/bootstrap.min.css" rel="stylesheet">
        <!-- Style Css --> 
        <!-- Inter -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

<!-- Manrope -->
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&display=swap" rel="stylesheet">

<!-- Bootstrap Icons CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">

<!-- IBM Plex Sans -->
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">

        <link href="assets/css/styles.css" rel="stylesheet">
        <link href="assets/css/form-stylings.css" rel="stylesheet">
        <!-- Icons Css --> 
       
        <!-- Node Waves Css --> 
       
        <!-- Auto Complete CSS --> 
       
        <!-- FlatPickr CSS --> 
        
        <link rel="stylesheet" href="assets/css/dataTables.bootstrap.min.css">
        <link rel="stylesheet" href="../assets/fonts/remixicon.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
        <meta http-equiv="imagetoolbar" content="no">
        <style type="text/css">
            /* .paginate_button{
                color: #fff;
  
  padding: 15px;
  font-size: 14px;
            }


            .paginate_button.active > a{
                color: #fff;
                padding: 15px;
                background-color: #C81D25;
  border: none;
  outline: none;
  border-radius: 50%;
  font-size: 0.8125rem;

            }*/
            /* General pagination button style */
            .btn-red{
                background: #C81D25 !important;
                color: #fff;
            }
            .text-red{
                color: #C81D25 !important;
                
            }
            div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    margin: 12px;
    white-space: nowrap;
}
.paginate_button a {
  color: #C81D25 !important;
  padding: 10px 15px;
  font-size: 14px;
  border-radius: 50%;
  text-decoration: none;
  transition: all 0.3s ease;
 
}

/* Hover effect */
.paginate_button a:hover {
  background: #C81D25;
  color: #fff !important;
}

/* Active page */
.paginate_button.active a {
  background-color: #C81D25 !important;
  color: #fff !important;
  border: none !important;
  outline: none !important;
  border-radius: 50%;
  font-size: 14px;
}

            <!-- input,textarea{-webkit-touch-callout:default;-webkit-user-select:auto;-khtml-user-select:auto;-moz-user-select:text;-ms-user-select:text;user-select:text} *{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:-moz-none;-ms-user-select:none;user-select:none} -->
        </style>
        <style type="text/css" media="print">
            <!-- body{display:none} -->
        </style>
       
    </head>
    <body cz-shortcut-listen="true">
    

       
        <div class="page">

 <header class="app-header">
                <!-- Start::main-header-container --> 
                <div class="main-header-container container-fluid">
                    <!-- Start::header-content-left --> 
                    <div class="header-content-left">
                        <!-- Start::header-element --> 
                        <div class="header-element">
                            <div class="horizontal-logo"> <a href="dashboard" class="header-logo"><!-- <img src="assets/images/brand-logos/desktop-logo.png" alt="logo" class="desktop-logo"> <img src="assets/images/brand-logos/toggle-logo.png" alt="logo" class="toggle-logo"> <img src="assets/images/brand-logos/desktop-white.png" alt="logo" class="desktop-white"> <img src="assets/images/brand-logos/toggle-white.png" alt="logo" class="toggle-white"> --></a> </div>
                        </div>
                        <!-- End::header-element --> <!-- Start::header-element -->
                        <div class="header-element mx-lg-0 mx-2"> <a aria-label="Hide Sidebar" class="sidemenu-toggle header-link animated-arrow hor-toggle horizontal-navtoggle" data-bs-toggle="sidebar" href="javascript:void(0);"><span></span></a> </div>
                        <!-- End::header-element --> <!-- Start::header-element --> 
                        
                        <!-- End::header-element --> 
                    </div>
                    <!-- End::header-content-left --> <!-- Start::header-content-right --> 
                    <div class="header-content-right">
                        <!-- Start::header-element --> 
                        
                        <!-- End::header-element --> <!-- Start::header-element --> 
                        
                        <!-- End::header-element --> <!-- Start::header-element --> 
                       
                        
                        <!-- End::header-element --> <!-- Start::header-element --> 
                        <div class="header-element header-shortcuts-dropdown dropdown">
                            <!-- Start::header-link|dropdown-toggle --> 
                            <a href="javascript:void(0);" class="header-link dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside" id="notificationDropdown" aria-expanded="false">
                                <svg xmlns="http://www.w3.org/2000/svg" class="header-link-icon" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#5f6368">
                                    <g>
                                        <rect fill="none" height="24" width="24"></rect>
                                    </g>
                                    <g>
                                        <g>
                                            <g>
                                                <path d="M3,3v8h8V3H3z M9,9H5V5h4V9z M3,13v8h8v-8H3z M9,19H5v-4h4V19z M13,3v8h8V3H13z M19,9h-4V5h4V9z M13,13v8h8v-8H13z M19,19h-4v-4h4V19z"></path>
                                            </g>
                                        </g>
                                    </g>
                                </svg>
                            </a>
                            
                        </div>
                        <!-- End::header-element --> <!-- Start::header-element --> 
                        
                        <!-- End::header-element --> <!-- Start::header-element --> 
                        <div class="header-element dropdown">
                            <!-- Start::header-link|dropdown-toggle --> <a href="javascript:void(0);" class="header-link dropdown-toggle" id="mainHeaderProfile" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false"> <span class="avatar avatar-sm avatar-rounded"> <img src="../users_photos/<?php echo $photo; ?>" alt="img" class="img-fluid"> </span> </a> <!-- End::header-link|dropdown-toggle --> 
                            <ul class="main-header-dropdown dropdown-menu pt-0 overflow-hidden header-profile-dropdown dropdown-menu-end" aria-labelledby="mainHeaderProfile">
                                <li class="p-3 bg-light bg-opacity-75 border-bottom">
                                    <div class="d-flex align-items-center justify-content-between gap-4">
                                        <div>
                                            <p class="mb-0 fw-semibold lh-1"><?php echo ucwords($fname." ".$surname); ?></p>
                                            <span class="fs-11 text-muted"><?php echo $email; ?></span> 
                                        </div>
                                        
                                    </div>
                                </li>
                                <li><a class="dropdown-item d-flex align-items-center" href="settings?page=settings"><i class="ti ti-user-circle fs-18 me-2 text-gray fw-normal"></i>My Profile</a></li>
                                
                                <li><a class="dropdown-item d-flex align-items-center" href="settings?page=settings"><i class="ti ti-adjustments-horizontal fs-18 me-2 text-gray fw-normal"></i>Account Settings</a></li>
                                <li>
                                    <hr class="dropdown-divider">
                                </li>
                                <li><a class="dropdown-item d-flex align-items-center" href="logout"><i class="ti ti-logout fs-18 me-2 text-gray fw-normal"></i>Sign Out</a></li>
                            </ul>
                        </div>
                        <!-- End::header-element --> <!-- Start::header-element --> 
                       
                        <!-- End::header-element --> 
                    </div>
                    <!-- End::header-content-right --> 
                </div>
                <!-- End::main-header-container --> 
            </header>


