<?php $activePage = strtolower(basename($_SERVER['REQUEST_URI'], ".php")); // wait lang ha nakealam haha sorry ?>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="x-ua-compatible" content="ie=edge">

 <title>SAP Information System</title>

  <!-- Font Awesome Icons -->
  <link rel="stylesheet" href="../plugins/fontawesome-free/css/all.min.css">
  <!-- overlayScrollbars -->
  <link rel="stylesheet" href="../plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="../dist/css/adminlte.min.css">
  <!-- Google Font: Source Sans Pro -->
  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
 <script src="../js/sweetalert.min.js"></script>

  <style>
* {
  box-sizing: border-box;
}

.flex-container {
  display: flex;
  flex-direction: row;
  font-size: 30px;
  text-align: center;
}

.flex-item-left {
  background-color:;
  padding: 10px;
  flex: 50%;
}

.flex-item-right {
  background-color: ;
  padding: 10px;
  flex: 50%;
}

/* Responsive layout - makes a one column-layout instead of two-column layout */
@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }
}
</style>
<style type="">

  body{
     background-image: url(images/01.jpg);
      background-repeat: no-repeat;
      background-size: 100%;
    background-attachment: fixed;
  background-size: cover;
  }



}
/**, *:before, *:after {
  box-sizing: inherit;
}*/

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
.ml5 {
  position: relative;
  font-weight: 300;
  font-size: 4.5em;
  color: #402d2d;
}

.ml5 .text-wrapper {
  position: relative;
  display: inline-block;
  padding-top: 0.1em;
  padding-right: 0.05em;
  padding-bottom: 0.15em;
  line-height: 1em;
}

.ml5 .line {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 3px;
  width: 100%;
  background-color: #402d2d;
  transform-origin: 0.5 0;
}

.ml5 .ampersand {
  font-family: Baskerville, serif;
  font-style: italic;
  font-weight: 400;
  width: 1em;
  margin-right: -0.1em;
  margin-left: -0.1em;
}

.ml5 .letters {
  display: inline-block;
  opacity: 0;
}
footer {
  text-align: center;
  padding: 15px;
  background-color:black;
  color: white;
  font-weight: bold;
  font-size: 25px;
}
a:visited {
  color: ##145A32;

}

.box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.box div {
  width: 100%;
}
</style>
<style type="text/css">
  .big_container {
  display: flex;
    flex-wrap: wrap;    
  }

  div {
    flex: 1;       
  }

  .flex-item-left2 {
  background-color:;
  padding: 0px;
  flex: 50%;
}

.flex-item-right2 {
  background-color: ;
  padding: 0px;
  flex: 50%;
}

.box {
  display: flex;
  align-items: center;
  justify-content: center;
}
.imgwrap {
   width: 50%; /*or whatever you choose*/
   margin: auto;
}
.imgwrap img {
   display: block;
   max-width: 600px; /*actual image width*/
   width: 100%;
   height: auto; /* maintain aspect ratio*/
   margin: auto; /*optional centering of image*/
}

</style>

</head>
<body class="hold-transition sidebar-mini layout-fixed layout-navbar-fixed layout-footer-fixed">
<div class="wrapper">
  <!-- Navbar -->
  <nav class="main-header navbar navbar-expand navbar-white navbar-light">
    <!-- Left navbar links -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
      </li>

    </ul>

    <!-- SEARCH FORM -->

    <!-- Right navbar links -->
    <ul class="navbar-nav ml-auto">
      <!-- Messages Dropdown Menu -->
      <li class="nav-item dropdown">


      <!-- Notifications Dropdown Menu -->
      <li class="nav-item dropdown">
        <a class="nav-link" data-toggle="dropdown" href="#">
          <b>WELCOME!</b>,&nbsp; <?= ucfirst($user_session) ;?> &nbsp;<i class="right fas fa-angle-down"></i>
        </a>
        <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
          <a href="../Dashboard/pages/Change_password.php" class="dropdown-item">
            <i class="fas fa-key mr-2"></i> Change Password
          </a>
<!--           <div class="dropdown-divider"></div>
          <a href="#" class="dropdown-item">
            <i class="fas fa-users mr-2"></i> 8 friend requests
            <span class="float-right text-muted text-sm">12 hours</span>
          </a> -->
          <div class="dropdown-divider"></div>
          <a href="logout.php" class="dropdown-item">
            <i class="fas fa-power-off mr-2"></i> Logout
          </a>

      </li>

    </ul>
  </nav>
  <!-- /.navbar -->

  <!-- Main Sidebar Container -->
  <aside class="main-sidebar sidebar-dark-primary elevation-4">
    <!-- Brand Logo -->
    <a href="home-page.php" class="brand-link">
<!--       <img src="../dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3"
           style="opacity: .8"> -->
      <span class="brand-text font-weight-light" style="font-family: 'Pacifico', cursive;"> SAP Information System</span>
    </a>

    <!-- Sidebar -->
    <div class="sidebar">

   <div class="user-panel mt-3 pb-3 mb-3 d-flex">
<!--         <div class="image">
          <img src="../dist/img/user2-160x160.jpg" class="img-circle elevation-2" alt="User Image">
        </div> -->
        <div class="info" align="center">
          <a href="#" class="d-block"> <image src="../images/SAP1.png" style="width:70%;height:70%;"/></a>
        </div>
      </div>

      <!-- Sidebar Menu -->
      <nav class="mt-2">
        <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
          <!-- Add icons to the links using the .nav-icon class
               with font-awesome or any other icon font library -->
          <li class="nav-item has-treeview menu-open">
            <a href="home-page.php" class="nav-link <?php echo $activePage === 'home-page' ? 'active' : '' ?>">
              <i class="nav-icon fas fa-home"></i>
              <p>
                Home
              </p>
            </a>
          </li>
          <li class="nav-item has-treeview menu-open">


         <li class="nav-item">
            <a href="pages/Dashboard.php" class="nav-link <?php echo $activePage === 'dashboard' ? 'active' : '' ?>">
              <i class="nav-icon fas fa-tachometer-alt"></i>
              <p>
                <p>Dashboard</p>
              </p>
            </a>
          </li>

           <li class="nav-item">
            <a href="pages/Household.php" class="nav-link <?php echo $activePage === 'household' ? 'active' : '' ?>">
              <i class="nav-icon fa fa-house-user"></i>
              <p>
                Household
              </p>
            </a>
          </li>

          <li class="nav-item">
            <a href="pages/Beneficiaries.php" class="nav-link <?php echo $activePage === 'beneficiaries' ? 'active' : '' ?>">
              <i class="nav-icon fa fa-users"></i>
              <p>
                Beneficiaries
              </p>
            </a>
          </li>

        <li class="nav-item">
            <a href="pages/SAP_form.php" class="nav-link <?php echo $activePage === 'sap_form' ? 'active' : '' ?>">
              <i class="nav-icon far fa-file-alt"></i>
              <p>
                SAP Form
              </p>
            </a>
          </li>

        <li class="nav-item">
            <a href="pages/Report.php" class="nav-link  <?php echo $activePage === 'report' ? 'active' : '' ?>">
              <i class="nav-icon fa fa-print" aria-hidden="true"></i>
              <p>
                Report
              </p>
            </a>
          </li>

          <li class="nav-item">
            <a href="pages/Account_logs.php" class="nav-link <?php echo $activePage === 'account_logs' ? 'active' : '' ?>">
              <i class="nav-icon fa fa-history" aria-hidden="true"></i>
              <p>
                Audit Trail
              </p>
            </a>
          </li>

           <li class="nav-item">
            <a href="pages/Complaints.php" class="nav-link <?php echo $activePage === 'complaints' ? 'active' : '' ?>">
              <i class="nav-icon fa fa-users"></i>
              <p>
               Complaints
              </p>
            </a>
          </li>
           
        <li class="nav-item">
            <a href="pages/Officials.php" class="nav-link <?php echo $activePage === 'officials' ? 'active' : '' ?>">
              <i class="nav-icon fa fa-users"></i>
              <p>
               Officials
              </p>
            </a>
          </li>


           <li class="nav-item">
            <a href="pages/Admin.php" class="nav-link <?php echo $activePage === 'admin' ? 'active' : '' ?>">
              <i class="nav-icon fa fa-users"></i>
              <p>
               Admin
              </p>
            </a>
          </li>


           <li class="nav-item">
           <a href="Zone_leader.php" class="nav-link <?php echo $activePage === 'zone_leader' ? 'active' : '' ?>">
              <i class="nav-icon fa fa-users"></i>
              <p>
               Zone Leader
              </p>
            </a>
          </li>



           <li class="nav-item">
            <a href="pages/Backups_andrestore.php" class="nav-link <?php echo $activePage === 'backups_andrestore' ? 'active' : '' ?>">
              <i class="nav-icon fa fa-database"></i>
              <p>
               Backups & Restore
              </p>
            </a>
          </li>
     
        </ul>
      </nav>
      <!-- /.sidebar-menu -->
    </div>
    <!-- /.sidebar -->
  </aside>
