<br/>
<!-- Online Container -->
<div id="online"></div>
<!-- End Online Container -->

            <section class="col-lg-3 connectedSortable ">
            <div style="text-align:center;padding:20px">
            <img src="<?php echo base_url(); ?>/assets/images/logopaten2.png"; width="100%"></img>
            </div>
            <div class="info-box dashboard1">
                <span class="info-box-icon bg-black"><i class="fa fa-users"></i></span>
                <div class="info-box-content">
                  <span class="info-box-text">Identitas Jabatan</span>
                  <span class="info-box-number"><div id='jbtt'></div></span>
                </div><!-- /.info-box-content -->
              </div><!-- /.info-box -->
              <div class="info-box dashboard1">
                <span class="info-box-icon bg-blue"><i class="fa fa-star"></i></span>
                <div class="info-box-content">
                  <span class="info-box-text">JPT</span>
                  <span class="info-box-number"><div id="jbt2"></div></span>
                </div><!-- /.info-box-content -->
              </div><!-- /.info-box -->
              <div class="info-box dashboard1">
                <span class="info-box-icon bg-green"><i class="fa fa-star-half-full"></i></span>
                <div class="info-box-content">
                  <span class="info-box-text">Administrasi</span>
                  <?php $jmlc = $this->model_agenda->agenda()->num_rows(); ?>
                  <span class="info-box-number"><div id="jbt0"></div></span>
                </div><!-- /.info-box-content -->
              </div><!-- /.info-box -->
              <div class="info-box dashboard1">
                <span class="info-box-icon bg-yellow"><i class="fa fa-star-half-empty"></i></span>
                <div class="info-box-content">
                  <span class="info-box-text">Fungsional</span>
                  <span class="info-box-number"><div id="jbt1"></div></span>
                </div><!-- /.info-box-content -->
              </div><!-- /.info-box -->

          </section><!-- /.Left col -->
            <section class="col-lg-5 connectedSortable">
            <?php include "home_jbt.php"; ?>
                <?php include "home_chart.php"; ?>
        </section><!-- right col -->

            <section class="col-lg-4 connectedSortable">
            <div class='info-box-text dashboard0'><span class="fa fa-feed "></span>&nbsp;dashboard ANJAB/ABK<br/>Versi : <?php echo $versi; ?></div>

            <table class="table table-bordered">
          <tr><td style="text-align:left" width='70%'>TOTAL IDENTITAS JABATAN</th>
          <th><?php echo $record['rekap'][0]['total']; ?></th></tr>
          <tr><td style="text-align:left">BEZZETING</td><th><?php echo $record['rekap'][0]['b']; ?></th></tr>
          <tr><td style="text-align:left">KEBUTUHAN</td><th><?php echo $record['rekap'][0]['k']; ?></th></tr>
          <tr><td style="text-align:left">SELISIH</td><th><?php echo $record['rekap'][0]['s']; ?></th></tr>
        </table>

            <table class="table table-bordered">
             <tr><th colspan=3>BERDASAR KELAS</th></tr> 
            <tr><td><small><b>NO</b></small></td><td><small><b>KELAS</b></small></td><td><small><b>JUMLAH</b></small></td></tr>
          <?php 
          $i=1;
          foreach ($record['kelas'] as $k=>$v) {
              if($v['jbt_kelas'] == null) $jbt_kelas ='-'; else $jbt_kelas = $v['jbt_kelas'];
              echo '<tr><td style="font-size:10px;">'.$i.'</td><td>'.$jbt_kelas.'</td><td>'.$v['jumlah'].'</td></tr>';
              $i++;
          }
          ?>
        </table>            

        <?php //include "home_grafik.php"; ?>

            </section><!-- right col -->



<style>
.panel-title {
  text-align:center;
  color:white;
  background-color:#888;
  font-weight:100;
}
.panel-header {
  border-color:#ddd;
  background-color:#888;
}
.panel-body {
  border-color:#ddd;
}        

.content {
  height:900px;
  padding-top:0px;
  background-color:#ccc;
  background-image:url("<?php echo base_url(); ?>/assets/images/bg01.jpg");
  background-repeat:repeat;
}

.info-box-number {
  font-size:30px;
  color:#888;
  text-align:center;
}

table th {
  text-align:center;
  color:white;
  background-color:#888;
}
table td {
  text-align:center;
  font-size:15px;
  background-color:#eee;

}
.dashboard0 {
  background-color:#EB242D;
  border-radius: 0px 0px 0px 0px;
  font-size:22px;
  color:white;
  text-align:center;
}

.dashboard1 {
  background-color:#eee;
  border-radius: 0px 0px 50px 0px;
  border-width:1px;
  border-color:black;
  border-style:dashed;
  margin-top:0px;
  font-size:22px;
  text-align:center;
}

.content {
}

.dboard {
  background-color:#ccc;
}

</style>         


