<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>FirstMe Admin Panel</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
    <!-- Bootstrap 3.3.4 -->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <!-- Font Awesome Icons -->
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <!-- Ionicons -->
    <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css" />
    <!-- Theme style -->
    <link href="dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />
    <link href="plugins/datatables/dataTables.bootstrap.css" rel="stylesheet" type="text/css" />
    <!-- AdminLTE Skins. We have chosen the skin-blue for this starter
          page. However, you can choose any other skin. Make sure you
          apply the skin class to the body tag so the changes take effect.
    -->
    <link href="dist/css/skins/skin-blue.min.css" rel="stylesheet" type="text/css" />
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js"></script>
    <script src="js/jqSource.js"></script>
    <script src="js/common.js"></script>
    <!-- HTML5 Shim and Respond.js 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]-->
    
    <style>
      .example-modal .modal {
        position: relative;
        top: auto;
        bottom: auto;
        right: auto;
        left: auto;
        display: block;
        z-index: 1;
      }
      .example-modal .modal {
        background: transparent!important;
      }
      
      #progress_container {
        width: 100%;
        height: 100%;
        z-index: 10000;
        display: block;
        background: rgba(20,20,20,.81);
        position: fixed;
        text-align: center;
      }
      
      #loader {
        width: 100px;
        height: 100px;
        margin-top: 25%;
      }
    </style>
  </head>
  <body class="skin-blue sidebar-mini">
    <div class="wrapper">

         <div id="progress_container">
            <img id="loader" src="dist/img/loader.gif">
        </div>
        
      <!-- Main Header -->
      <header class="main-header">

        <!-- Logo -->
        <a href="dashboard.html" class="logo">
          <!-- mini logo for sidebar mini 50x50 pixels -->
          <span class="logo-mini"><b>F</b>ME</span>
          <!-- logo for regular state and mobile devices -->
          <span class="logo-lg"><b>First</b>ME</span>
        </a>

        <!-- Header Navbar -->
        <nav class="navbar navbar-static-top" role="navigation">
          <!-- Sidebar toggle button-->
          <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
            <span class="sr-only">Toggle navigation</span>
          </a>
          <!-- Navbar Right Menu - Code Removed -->
          
        </nav>
      </header>
      <!-- Left side column. contains the logo and sidebar -->
      <aside class="main-sidebar">

        <!-- sidebar: style can be found in sidebar.less -->
        <section class="sidebar">
          <!-- Sidebar user panel (optional) -->
          <div class="user-panel">
            <div class="pull-left image">
              <img src="dist/img/ic_launcher.jpg" class="img-circle" alt="First Me" />
            </div>
            <div class="pull-left info">
              <p>Admin Portal</p>
              <!-- Status -->
              <a href="#"><i class="fa fa-circle text-success"></i> Live</a>
            </div>
          </div>

          <!-- Sidebar Menu -->
          <ul class="sidebar-menu">
            <li class="header">Operations</li>
            <!-- Optionally, you can add icons to the links -->
            <li class="active"><a href="dashboard.html"><i class='fa fa-home'></i> <span>Home</span></a></li>
            <li><a href="user.html"><i class='fa fa-users'></i> <span>User</span></a></li>
            <li><a href="deals.html"><i class='fa fa-bullhorn'></i> <span>Deals</span></a></li>
            <li><a href="category.html"><i class='fa fa-tags'></i> <span>Category</span></a></li>
            <li><a href="business.html"><i class='fa fa-dollar'></i> <span>Business</span></a></li>
          </ul><!-- /.sidebar-menu -->
        </section>
        <!-- /.sidebar -->
      </aside>

      <!-- Content Wrapper. Contains page content -->
      <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
          <h1>
            FirstMe Admin Portal
            <small>Control your world right here...</small>
          </h1>
          <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li>
            <li class="active">Home</li>
          </ol>
        </section>

        <!-- Main content -->
        <section class="content">

          <!-- Your Page Content Here -->
          <section class="content">
          <!-- Small boxes (Stat box) -->
          <div class="row">
              <div class="col-lg-3 col-xs-6">
                  <div class="small-box bg-yellow">
                    <div class="inner" id="userCount">
                      <h3>-</h3>
                      <p>User Registrations</p>
                    </div>
                    <div class="icon">
                      <i class="ion ion-person-add"></i>
                    </div>
                    <a href="#" class="small-box-footer" id="refreshUser">Refresh <i class="fa fa-refresh"></i></a>
                  </div>
              </div>
              
              <div class="col-lg-3 col-xs-6">
              <!-- small box -->
              <div class="small-box bg-red">
                  <div class="inner" id="categoryCount">
                  <h3>-</h3>
                  <p>Categories</p>
                </div>
                <div class="icon">
                  <i class="ion ion-pie-graph"></i>
                </div>
                <a href="#" class="small-box-footer" id="refreshCategory">Refresh <i class="fa fa-refresh"></i></a>
              </div>
            </div><!-- ./col -->
            
            <div class="col-lg-3 col-xs-6">
              <!-- small box -->
                <div class="small-box bg-green">
                    <div class="inner" id="dealCount">
                      <h3>-</h3>
                      <p>Deals</p>
                    </div>
                    <div class="icon">
                      <i class="ion ion-stats-bars"></i>
                    </div>
                    <a href="#" class="small-box-footer" id="refreshDeals">Refresh <i class="fa fa-refresh"></i></a>
                </div>
            </div>
            
            <div class="col-lg-3 col-xs-6">
              <!-- small box -->
              <div class="small-box bg-aqua">
                  <div class="inner" id="vendorCount">
                  <h3>-</h3>
                  <p>Vendors</p>
                </div>
                <div class="icon">
                  <i class="ion ion-bag"></i>
                </div>
                  <a href="#" class="small-box-footer" id="refreshVendor">Refresh <i class="fa fa-refresh"></i></a>
              </div>
            </div><!-- ./col -->
          </div>
          <div class="row">
              <div class="col-lg-6 col-xs-6">
                <div class="box box-primary">
                  <div class="box-header with-border">
                    <i class="fa fa-bar-chart-o"></i>
                    <h3 class="box-title">OS Platform</h3>
                    <div class="box-tools pull-right">
                      <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                      <!--button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button-->
                    </div>
                  </div>
                  <div class="box-body">
                    <div id="donut-chart" style="height: 300px;"></div>
                  </div><!-- /.box-body-->
                </div><!-- /.box -->
              </div>
              <div class="col-lg-6 col-xs-6">
                <div class="box box-primary">
                  <div class="box-header with-border">
                    <i class="fa fa-bar-chart-o"></i>
                    <h3 class="box-title">Last 6 Month Status</h3>
                    <div class="box-tools pull-right">
                      <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                      <!--button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button-->
                    </div>
                  </div>
                  <div class="box-body">
                    <div id="month-chart" style="height: 300px;"></div>
                  </div><!-- /.box-body-->
                </div><!-- /.box -->
              </div>
          </div>
            <!-- content -->
            
          
            <!-- content end -->
        </section><!-- /.content -->
      </div><!-- /.content-wrapper -->

      <!-- Main Footer -->
      <footer class="main-footer">
        <!-- To the right -->
        <div class="pull-right hidden-xs">
          Powered by Technokratz.
        </div>
        <!-- Default to the left -->
        <strong>Copyright &copy; 2015 <a href="#">FirstMe</a>.</strong> All rights reserved.
      </footer>
      
      <!-- Control Sidebar -->
      <!-- Add the sidebar's background. This div must be placed
           immediately after the control sidebar -->
      <div class='control-sidebar-bg'></div>
    </div><!-- ./wrapper -->

    <!-- REQUIRED JS SCRIPTS -->

    <!-- jQuery 2.1.4 -->
    <script src="plugins/jQuery/jQuery-2.1.4.min.js"></script>
    <!-- Bootstrap 3.3.2 JS -->
    <script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
    <!-- AdminLTE App -->
    <script src="dist/js/app.min.js" type="text/javascript"></script>

    <!-- Optionally, you can add Slimscroll and FastClick plugins.
          Both of these plugins are recommended to enhance the
          user experience. Slimscroll is required when using the
          fixed layout. -->
  </body>
</html>