<?php include("includes/head.php");?>

<!--<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet" id="">-->
<link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet" id="">

<style>
#cboxOverlay {
	visibility: visible;
	opacity: 0.3 !important;
}
.dataTables_length{
 text-align:left;
}
</style>

<body>
<!--[if lt IE 8]>
        <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
<!-- Header top area start-->
<?php include("includes/header.php");?>
<!-- Header top area end-->
<!-- Menu area start-->
<?php include("includes/navigation.php");?>
<!-- Menu area end-->
<!-- Data table area Start-->
<div class="admin-dashone-data-table-area mg-b-40" style="min-height:500px;">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <div class="row">
          <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="width:110% !important;">
            <div class="tab-content view-mail-ov-mg-t-30">
              <div class="tab-pane fade in zoomInDown shadow-reset active">
                <div class="sparkline8-list shadow-reset">
                  <div class="sparkline8-hd">
                    <div class="main-sparkline8-hd">
                      <h1>Step-2 Departments Management</h1>
                      <div class="sparkline8-outline-icon">
                      <a href="configurations.php"><button class="btn btn-sm btn-danger login-submit-cs" type="button">Back to Setup</button></a>&nbsp;                        
                      <a href="sh-user-management.php"><button class="btn btn-sm btn-primary login-submit-cs" type="button">Back to Previous Step</button></a>&nbsp;
                      <a href="sh-files-management.php"><button class="btn btn-sm btn-success login-submit-cs" type="button">Proceed to Next Step</button></a>
                      </div>
                    </div>
                  </div>
                  <div class="sparkline8-graph">
                    <div class="container bootstrap snippet">
                     <div class="row">
                        <div class="col-md-12">
                          <h4 style="text-align:left;">Departments listings</h4>
                          <div style="text-align:right;" data-placement="top" data-toggle="tooltip" title="Add Department">
                          <!--<button class="btn btn-primary btn-xs" data-title="View" data-toggle="modal" data-target="#view" ><span class="glyphicon glyphicon-plus"></span></button>-->
                          <i class="fa fa-plus openPopup" data-target="add-department.php" style=" cursor:pointer;" data-title="Add Department" title="CLick to Add Department"></i>
                          </div>
                          <div class="table-responsive">
                            <table id="tblListings" class="table table-striped table-bordered" style="width:100%">
                              <thead>                                
                                <tr>
                                  <th>Sr#</th>
                                  <th>Name</th>
                                  <th>Description</th>
                                  <th>Status</th>
                                  <th>Edit</th>
                                  <th>Delete</th>
                                </tr>
                              </thead>
                              <tbody id="deptList">
                              <?php 
								  //--------------- Category Info ----------
								  $srno = 0;
								  								  
								  $selQry_depts = "SELECT * FROM ".TBL_DEPARTMENTS." ORDER BY name";
								  $deptsInfo =  $con->getMultiRow($selQry_depts, __FILE__,__LINE__);
								  $totDeptsListings = count($deptsInfo);
									if($totDeptsListings>0)
									{
										for($dept=0;$dept<$totDeptsListings;$dept++)
										{
											$srno++;
								  //----------------------------------------
								?>
                                <tr>
                                  <td><?php echo $srno;?>.</td>
                                  <td style="text-align:left;"><?php echo $deptsInfo[$dept]['name'];?></td>
                                  <td style="text-align:left;"><?php echo $deptsInfo[$dept]['description'];?></td>
                                  <td style="text-align:left;">
                                  <?php if($deptsInfo[$dept]['status']=='1'){?>
                                  <button type="button" class="btn btn-sm btn-success">Active</button>
								  <?php }else if($deptsInfo[$dept]['status']=='0'){?>
                                  <button type="button" class="btn btn-sm btn-danger">InActive</button>
								  <?php }?>
                                  </td> 
                                  <td>                                  
                                 <p data-placement="top" data-toggle="tooltip" title=""><button class="btn btn-primary btn-xs openPopup" data-title="Edit Department" data-target="edit-department.php?did=<?php echo $deptsInfo[$dept]['id'];?>"><span class="glyphicon glyphicon-pencil"></span> Edit</button></p>
                                  </td>
                                  <td>                                  
                                 <p data-placement="top" data-toggle="tooltip" title="">
                                 <button class="btn btn-danger btn-xs openPopup" data-title="Delete Department" data-toggle="modal" data-target="del-department.php?did=<?php echo $deptsInfo[$dept]['id'];?>" ><span class="glyphicon glyphicon-trash"></span> Delete</button>                                 
                                 </p>
                                  </td>                                 
                                </tr>
                                <?php }
								}?>
                              </tbody>
                              <tfoot>
                                <tr>
                                  <th>Sr#</th>
                                  <th>Name</th>
                                  <th>Description</th>
                                  <th>Status</th>
                                  <th>Edit</th>
                                  <th>Delete</th>
                                </tr>
                              </tfoot>
                            </table>
                          </div>
                        </div>
                      </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- Data table area End-->

<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog modal-lg">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title"></h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body"> </div>
      <div class="modal-footer">
        <!--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->
      </div>
    </div>
  </div>
</div>

<!-- Footer Start-->
<?php include("includes/footer.php");?>
<!-- Footer End-->
<!-- jquery
		============================================ -->
<script src="js/vendor/jquery-1.11.3.min.js"></script>
<!-- bootstrap JS
		============================================ -->
<script src="js/bootstrap.min.js"></script>
<!-- meanmenu JS
		============================================ -->
<script src="js/jquery.meanmenu.js"></script>
<!-- mCustomScrollbar JS
		============================================ -->
<script src="js/jquery.mCustomScrollbar.concat.min.js"></script>
<!-- sticky JS
		============================================ -->
<script src="js/jquery.sticky.js"></script>
<!-- scrollUp JS
		============================================ -->
<script src="js/jquery.scrollUp.min.js"></script>
<!-- counterup JS
		============================================ -->
<!--<script src="js/counterup/jquery.counterup.min.js"></script>
<script src="js/counterup/waypoints.min.js"></script>
<script src="js/counterup/counterup-active.js"></script>-->
<!-- peity JS
		============================================ -->
<!--<script src="js/peity/jquery.peity.min.js"></script>
<script src="js/peity/peity-active.js"></script>-->
<!-- sparkline JS
		============================================ -->
<!--<script src="js/sparkline/jquery.sparkline.min.js"></script>
<script src="js/sparkline/sparkline-active.js"></script>-->
<!-- colorpicker JS
		============================================ -->
<!--<script src="js/colorpicker/jquery.spectrum.min.js"></script>
<script src="js/colorpicker/color-picker-active.js"></script>-->
<!-- flot JS
		============================================ -->
<!--<script src="js/flot/jquery.flot.js"></script>
<script src="js/flot/jquery.flot.tooltip.min.js"></script>
<script src="js/flot/jquery.flot.spline.js"></script>
<script src="js/flot/jquery.flot.resize.js"></script>
<script src="js/flot/jquery.flot.pie.js"></script>
<script src="js/flot/Chart.min.js"></script>
<script src="js/flot/flot-active.js"></script>-->
<!-- map JS
		============================================ -->
<!--<script src="js/map/raphael.min.js"></script>
<script src="js/map/jquery.mapael.js"></script>
<script src="js/map/france_departments.js"></script>
<script src="js/map/world_countries.js"></script>
<script src="js/map/usa_states.js"></script>
<script src="js/map/map-active.js"></script>-->
<!-- data table JS
		============================================ -->
<!--<script src="js/data-table/bootstrap-table.js"></script>
<script src="js/data-table/tableExport.js"></script>
<script src="js/data-table/data-table-active.js"></script>
<script src="js/data-table/bootstrap-table-editable.js"></script>
<script src="js/data-table/bootstrap-editable.js"></script>
<script src="js/data-table/bootstrap-table-resizable.js"></script>
<script src="js/data-table/colResizable-1.5.source.js"></script>
<script src="js/data-table/bootstrap-table-export.js"></script>-->

<!--<script src="https://code.jquery.com/jquery-3.5.1.js"></script>-->
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>

<!-- switcher JS
		============================================ -->
<script src="js/switcher/styleswitch.js"></script>
<script src="js/switcher/switch-active.js"></script>
<!-- Tree Viewer JS
		============================================ -->
<!--<script src="js/tree-line/jstree.min.js"></script>
<script src="js/tree-line/jstree.active.js"></script>-->
<!-- touchspin JS
		============================================ -->
<script src="js/touchspin/jquery.bootstrap-touchspin.min.js"></script>
<script src="js/touchspin/touchspin-active.js"></script>
<!-- icheck JS
		============================================ -->
<script src="js/icheck/icheck.min.js"></script>
<script src="js/icheck/icheck-active.js"></script>
<!-- summernote JS
		============================================ -->
<script src="js/summernote.min.js"></script>
<script src="js/summernote-active.js"></script>
<!-- rangle-slider JS
		============================================ -->
<!--<script src="js/rangle-slider/jquery-ui-1.10.4.custom.min.js"></script>
<script src="js/rangle-slider/jquery-ui-touch-punch.min.js"></script>
<script src="js/rangle-slider/rangle-active.js"></script>-->
<!-- notification JS 
		============================================ -->
<script src="js/Lobibox.js"></script>
<script src="js/notification-active.js"></script>
<!-- main JS
		============================================ -->
<script src="js/main.js"></script>

<script>
$(document).ready(function() {
   
    $( ".openPopup" ).click(function() {
	 
	  var dataURL = $(this).attr('data-target');
	  var dataTitle = $(this).attr('data-title');
	  
	  $('#myModal').find('.modal-title').text(dataTitle);
      //$('#myModal').modal({show:true});  
		$('.modal-body').load(dataURL,function(){
            $('#myModal').modal({show:true});
        });
	});
	
	$('#tblListings').DataTable();
	
} );

function getDepartments()
{	
	$.ajax({
		type: "POST",
		url: "getDepartments.php",
		//data:'',
		success: function(data){
			$('#deptList').html(data);
		}
	});
}
</script>
</body>
</html>
