<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Orbis</title>

<!-- Bootstrap -->
<link href="<?= base_url(); ?>/css/bootstrap.css" rel="stylesheet">
<link href="<?= base_url(); ?>/css/material-kit.css" rel="stylesheet" type="text/css">
<link href="<?= base_url(); ?>/css/demo.css" rel="stylesheet" type="text/css">
<link href="<?= base_url(); ?>/css/styles.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> 
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> -->
<!---<link href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css" rel="stylesheet" type="text/css">-->

<link href="//cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.1.0/material.min.css" rel="stylesheet" type="text/css">
<link href="https://cdn.datatables.net/1.10.15/css/dataTables.material.min.css" rel="stylesheet" type="text/css">




<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="dashboard">
	<div class="burgerMenu"><img src="<?= base_url(); ?>/img/menu.png"></div>
	<div class="leftSide"> 
    <div class="cancelButton"><img src="<?= base_url(); ?>/img/Cancel.png"></div>
    	<div class="logo">
        	<img src="<?= base_url(); ?>/img/orbisLogo.png">
        </div>
        
        <div class="userImage">
        	<img src="<?= base_url(); ?>/img/dashboardImage.png">
            <p>Orbis <!-- <img src="<? //base_url(); ?>/img/downArrow.png"> -->
            </p>
           
        </div>
        
        <div class="dashboardList">
            <ul>
                <li>
                    <a href="<?= base_url(); ?>index.php/user/dashboard">
                    <img class="main1" src="<?= base_url(); ?>/img/overviewIcon.png">
                    <img class="hover1" src="<?= base_url(); ?>/img/overviewIconHover.png">
                     Dashboard</a>
                </li>
               
                <li class="dropdownList1 dropdownAll">
                    <div>
                        <a href="<?= base_url(); ?>index.php/costcenter">
                        <img class="main1" src="<?= base_url(); ?>/img/readingIcon.png">
                          <img class="hover1" src="<?= base_url(); ?>/img/readingIconHover.png">
                         Cost Center</a>
                        <!--<img class="clickArrow1" src="img/downArrow.png">
                        <img class="clickArrow2" src="img/upArrow.png">-->
                     </div>
                     
                </li>
                <li class="dropdownList2 dropdownAll">
                    <div>
                    	<a href="<?= base_url(); ?>index.php/contractarea">
	                        <img class="main1" src="<?= base_url(); ?>/img/paymentIcon.png">
	                        <img class="hover1" src="<?= base_url(); ?>/img/paymentIconHover.png">
	                         Contract Area
	                    </a>
                         <!--<img class="clickArrow3" src="img/downArrow.png">
                        <img class="clickArrow4" src="img/upArrow.png">-->
                    </div>
                     <!-- <ul class="listInner2">
                     	<li><a href="electricityPaymentDashboard.html" target="_blank">Electricity</a></li>
                        <li><a href="gasBillPaymentDashboard.html" target="_blank">Gas</a></li>
                       </ul>-->
                </li>
                <li class="dropdownList3 dropdownAll">
                    <div>
                      <a href="<?= base_url(); ?>index.php/office">
                        <img class="main1" src="<?= base_url(); ?>/img/energyUsageIcon.png"> 
                        <img class="hover1" src="<?= base_url(); ?>/img/energyUsageIconHover.png">
                        Offices
                      </a>
                        <!--<img class="clickArrow5" src="img/downArrow.png">
                        <img class="clickArrow6" src="img/upArrow.png">-->
                    </div>
                    
                </li>
                <li>
                        <img class="main1" src="<?= base_url(); ?>/img/checkTarriffIcon.png">
                        <img class="hover1" src="<?= base_url(); ?>/img/checkTarriffIconHover.png">
                       <a href="<?= base_url() ?>index.php/lwd"> LWD's</a>
                </li>
                <li>
                    	<img class="main1" src="<?= base_url(); ?>/img/homeIcon.png">
                        <img class="hover1" src="<?= base_url(); ?>/img/homeIconHover.png">
                         Geofencing
                </li>
                <li>
                    	<img class="main1" src="<?= base_url(); ?>/img/reportsIcon.png">
                        <img class="hover1" src="<?= base_url(); ?>/img/reportsIconHover.png">
                         Reports
                </li>
            </ul>
        </div>
</div>
<div class="rightSide">
      <div class="dashboardHeading">
         <a href="<?= base_url() ?>index.php/user/logout">
          <span>Log off</span> 
            <img src="<?= base_url(); ?>/img/dashboardIcon.png">
            </a>
      </div>