<?php $this->load->view('meta') ?>
  <div class="wrapper">
    <?php $this->load->view('navbar') ?>
    <?php $this->load->view('sidebar') ?>
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
      <!-- Content Header (Page header) -->
      <section class="content-header">
        <h1><?php echo $title ?></h1>
        <ol class="breadcrumb">
          <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
          <li><a href="#"><?php echo $module ?></a></li>
          <li class="active"><?php echo $title ?></li>
        </ol>
      </section>
      <!-- Main content -->
      <section class="content">
        <!-- Small boxes (Stat box) -->
        <div class="row">
          <div class="col-lg-12">
            <div class="box box-<?php echo box_theme;?>">
              <div class="box-body" style="text-align:center; width:100%; overflow-x: scroll;">
              	<div style="min-width: 1050px;">
<style type="text/css">
/*Now the CSS*/

.tree ul {
    padding-top: 20px; position: relative;
	
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
}

.tree li {
	float: left; text-align: center;
	list-style-type: none;
	position: relative;
	padding: 20px 5px 0 5px;
	
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
}

/*We will use ::before and ::after to draw the connectors*/

.tree li::before, .tree li::after{
	content: '';
	position: absolute; top: 0; right: 50%;
	border-top: 1px solid #ccc;
	width: 50%; height: 20px;
}
.tree li::after{
	right: auto; left: 50%;
	border-left: 1px solid #ccc;
}

/*We need to remove left-right connectors from elements without 
any siblings*/
.tree li:only-child::after, .tree li:only-child::before {
	display: none;
}

/*Remove space from the top of single children*/
.tree li:only-child{ padding-top: 0;}

/*Remove left connector from first child and 
right connector from last child*/
.tree li:first-child::before, .tree li:last-child::after{
	border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/
.tree li:last-child::before{
	border-right: 1px solid #ccc;
	border-radius: 0 5px 0 0;
	-webkit-border-radius: 0 5px 0 0;
	-moz-border-radius: 0 5px 0 0;
}
.tree li:first-child::after{
	border-radius: 5px 0 0 0;
	-webkit-border-radius: 5px 0 0 0;
	-moz-border-radius: 5px 0 0 0;
}

/*Time to add downward connectors from parents*/
.tree ul ul::before{
	content: '';
	position: absolute; top: 0; left: 50%;
	border-left: 1px solid #ccc;
	width: 0; height: 20px;
}

.tree li a{
	border: #f39c12;
	background-color:#f39c12;
	padding: 5px 10px;
	text-decoration: none;
	color: black;
	font-family: arial, verdana, tahoma;
	font-size: 14px;
	display: inline-block;
	
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
}

/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.tree li a:hover, .tree li a:hover+ul li a {
	background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
}
/*Connector styles on hover*/
.tree li a:hover+ul li::after, 
.tree li a:hover+ul li::before, 
.tree li a:hover+ul::before, 
.tree li a:hover+ul ul::before{
	border-color:  #94a0b4;
}

/*Thats all. I hope you enjoyed it.
Thanks :)*/
</style>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<!--
We will create a family tree using just CSS(3)
The markup will be simple nested lists
-->




<div class="col-xs-12" style="background-color: white; z-index: 99999;">
<br/><br/>
<h4><b>Struktur Pengurus Yayasan Cinta Sedekah</b></h4>

</div>


<div class="col-xs-12 text-center">
<div class="tree" style="margin-left: 17%;">
    <ul>
		<li>
			<a href="#" style="background-color: #0984e3;"><b>Pembina</b><br/>
            <?php
			foreach ($pembina as $pembina){
				echo $pembina->nama_user;
				echo "<br/>";
			}
			
			?>
			</a>
		</li>

		<li>
			<a href="#"><b>Ketua Yayasan</b><br/>
            <?php
			foreach ($ketua_yayasan as $ketua_yayasan){
				echo $ketua_yayasan->nama_user;
				echo "<br/>";
			}
			
			?>
			</a>

            <ul>
				<li>
					<a href="#"><b>Sekretaris</b><br/>
						<?php
                            foreach ($sekretaris as $sekretaris){
                                echo $sekretaris->nama_user;
                                echo "<br/>";
                            }
                            
						?>
                    </a>
				</li>
                
				<li>
					<a href="#"><b>Bendahara</b><br/>
						<?php
                            foreach ($bendahara as $bendahara){
                                echo $bendahara->nama_user;
                                echo "<br/>";
                            }
                            
						?>
                    </a>
					
				</li>
			</ul>
		</li>
		<li>
			<a href="#" style="background-color: #0984e3;"><b>Pengawas</b><br/>
            <?php
			foreach ($pengawas as $pengawas){
				echo $pengawas->nama_user;
				echo "<br/>";
			}
			
			?>
			</a>
		</li>
	</ul>
</div>
</div>





<div class="col-xs-12">
<br/><br/>
<br/><br/>
<h4><b>Struktur Pelaksana Kegiatan Harian Yayasan Cinta Sedekah</b></h4>

</div>




<div class="col-xs-12">
<div class="tree">
    <ul>
		<li>
			<a href="#"><b>Direktur</b><br/>
            <?php
			foreach ($ketua_yayasan2 as $ketua_yayasan){
				//echo $ketua_yayasan->nama_user;
				//echo "<br/>";
			}
			
			?>
			</a>
            <ul>
				<li>
					<a href="#"><b>Sekretaris</b><br/>
						<?php
                            foreach ($sekretaris_harian as $sekretaris_harian){
                                //echo $sekretaris_harian->nama_user;
                                //echo "<br/>";
                            }
                            
						?>
                    </a>
				</li>
                
						<li>
                        <div style="height:50px; border-right: 1px solid #ccc; width:1px; margin:0 auto; padding-left:1px;"></div>
							
							<ul>
								<li>
									<a href="#"><b>Divisi Fundraising</b><br/>
									<?php
										foreach ($kadiv_fundraising as $kadiv_fundraising){
											//echo $kadiv_fundraising->nama_user;
											//echo "<br/>";
										}
										
									?>

                                    </a>
								</li>
								<li>
									<a href="#"><b>Divisi Program</b><br/>
									<?php
										foreach ($kadiv_program as $kadiv_program){
											//echo $kadiv_program->nama_user;
											//echo "<br/>";
										}
										
									?>

                                    </a>
								</li>
								<li>
									<a href="#"><b>Divisi Teknologi Informasi</b><br/>
									<?php
										foreach ($kadiv_it as $kadiv_it){
											//echo $kadiv_it->nama_user;
											//echo "<br/>";
										}
										
									?>

                                    </a>
								</li>
							</ul>
						</li>
					
				<li>
					<a href="#"><b>Keuangan</b><br/>
						<?php
                            foreach ($bendahara_harian as $bendahara_harian){
                                //echo $bendahara_harian->nama_user;
                                //echo "<br/>";
                            }
                            
						?>
                    </a>
				</li>
			</ul>
		</li>
	</ul>
</div>
</div>





			</div>
			</div>
            </div>
          </div><!-- ./col -->
        </div><!-- /.row -->
      </section><!-- /.content -->
    </div><!-- /.content-wrapper -->
    <!-- Modal -->
    <div id="modal_page" class="modal fade" role="dialog">
        <div class="modal-dialog">
                <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title" id="modal_title"></h4>
                </div>
                <div id="modal_konten"></div>
            </div>
        </div>                    
    </div>
    <?php $this->load->view('footer') ?>
  </div><!-- ./wrapper -->
  <?php $this->load->view('js') ?>
  <!-- DATA TABLES-->
  <link href="<?php echo base_url('assets/plugins/') ?>datatables/dataTables.bootstrap.css" rel="stylesheet" type="text/css" />
  <script src="<?php echo base_url('assets/plugins/') ?>datatables/jquery.dataTables.min.js" type="text/javascript"></script>
  <script src="<?php echo base_url('assets/plugins/') ?>datatables/dataTables.bootstrap.min.js" type="text/javascript"></script>
  <script type="text/javascript">
  var table;
  $(document).ready(function() {
    table = $('#datatable').DataTable({
      "processing": true, //Feature control the processing indicator.
      "serverSide": true, //Feature control DataTables' server-side processing mode.
      "bPaginate": true,
      "bLengthChange": true,
      "bFilter": true,
      "bSort": true,
      "bInfo": true,
      "bAutoWidth": false,
      "aaSorting": [[0,'desc']],
      "lengthMenu": [[10, 25, 50, 100, 500, 1000, -1], [10, 25, 50, 100, 500, 1000, "Semua"]],

      // Load data for the table's content from an Ajax source
      "ajax": {
        "url": "<?php echo site_url('user/ajax_list')?>",
        "type": "POST"
      },

      //Set column definition initialisation properties.
      "columnDefs": [
      {
        "targets": [ -1 ], //last column
      },
      ],
    });
  });

  function reload_table(){
    table.ajax.reload(null,false); //reload datatable ajax
  }
  </script>
</body>
</html>
