<?php
session_start();
if(!isset ($_SESSION['user_id'])){
    header("Location:../login.php?msg=Log in first");
    exit();
}else{
	include('../Server/connection.php');
	include('includes/session.php');
	$st = 'add';
	if($st == 'add') { 
	echo "<div class='div-request div-hide'>add</div>";
      }		
?>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <?php
	include 'title.php';
	?>
	
	<link type = "image/png" rel="icon" href="images/brvision.png" />
	
	
	<!-- Datatable CSS -->
    <link href='DataTables/datatables.min.css' rel='stylesheet' type='text/css'>
    <link rel='stylesheet' href='https://cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css'>
    <!--<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">-->
	
	<!-- must-->
	<script src="assests/jquery/jquery.min.js"></script>
	
	<!-- jQuery Library -->
    <!--<script src="jquery-3.3.1.min.js"></script>-->
	
	<!-- Datatable JS -->
    <script src="DataTables/datatables.min.js"></script>
    <script src='https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js'></script>
    <script src='https://cdn.datatables.net/buttons/1.2.2/js/buttons.flash.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js'></script>
    <script src='https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js'></script>
    <script src='https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js'></script>
    <script src='https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js'></script>
    <script src='https://cdn.datatables.net/buttons/1.2.2/js/buttons.print.min.js'></script>
	
	
	

    <!-- Bootstrap must-->
    <link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
	
    <!-- Font Awesome must-->
    <link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
	
	<!-- custom css -->
    <link rel="stylesheet" href="custom/css/custom.css">
	
    <!-- NProgress must-->
    <link href="../vendors/nprogress/nprogress.css" rel="stylesheet">
	
    <!-- Custom Theme Style must-->
    <link href="../build/css/custom.min.css" rel="stylesheet">
	
	
	
  <!-- jquery ui -->  
  <link rel="stylesheet" href="assests/jquery-ui/jquery-ui.min.css">
  <script src="assests/jquery-ui/jquery-ui.min.js"></script>
	
  <!-- Must Bootstrap -->
    <script src="../vendors/bootstrap/dist/js/bootstrap.min.js"></script>
	
	
   <script src="js/tinymce/tinymce.min.js"></script>
<script>tinymce.init({ selector:'.pclu-textarea',branding: false });</script>
	
  </head>

  <body class="nav-md">
  
    <div class="container body">
	
      <div class="main_container">
        <div class="col-md-3 left_col">
          <div class="left_col scroll-view">
		  
            <?php  
		include 'includes/role.php';
               ?>

            <div class="clearfix"></div>
            
			<?php
            include 'includes/profile.php';
			print '</br></br>';
			include 'includes/menu.php';
			?>

           

        <!-- page content -->
        <div class="right_col" role="main">
          <div class="">
		  
			
			
            <div class="clearfix"></div>

            <div class="row">
              <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel">
                  <div class="x_title">
				  
                    <a href="dashboard.php">  <h2><span class="glyphicon glyphicon-step-backward"></span> Back</h2></a>
					</br></br>
					<font color="green">List Of Designations</font>
					
					
                    <ul class="nav navbar-right panel_toolbox">
                      <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                      </li>
                      
                      
                    </ul>
                    <div class="clearfix"></div>
                  </div>
				  
				
				  
                 <div class="x_content" style="overflow: auto;">
				 
			    <div class="remove-messages"></div>
				
		    <table Style="width:100%; padding:10px;">
			
            <tr> <th>Search Designation</th><th>Filter By Department</th><th>Filter By Section</th></tr>
			
			<tr> 
                <td>
                    <input type='text' id="searchByDesignation"  class="form-control " placeholder='Enter Designation'>
				</td>
				
				
                <td>
                    <select id='searchByDeptName' class="form-control ">

                        <option value="">All</option>
						
						<?php
			  			$productSql12 = "SELECT departments.dept_id,departments.depart_name FROM departments ORDER BY depart_name";
			  			$productData12 = $conn->query($productSql12);
			  			while($row12 = $productData12->fetch_array()){									 		
			  			  echo "<option value='".$row12['dept_id']."'>".$row12['depart_name']."</option>";
										 	} // /while 

			  			?>
                    </select>

                </td>
				
				<td>
                    <select id='searchBySectName' class="form-control ">

                        <option value="">All</option>
						
						<?php
			  			$productSql123 = "SELECT sections.sect_id,sections.sect_name FROM sections ORDER BY sect_name";
			  			$productData123 = $conn->query($productSql123);
			  			while($row123 = $productData123->fetch_array()){									 		
			  			  echo "<option value='".$row123['sect_id']."'>".$row123['sect_name']."</option>";
										 	} // /while 

			  			?>
                    </select>

                </td>
				
            </tr>
        </table>

                  
				   
					<br/>
        <div id="buttons"></div>
		
		<!-- Table -->
        <table id='manageCategoriesTable' class='display dataTable hoverable  table-striped'>
            <thead>
                <tr>
                    <th>No:</th>
					<th>List Of Designations</th>
                    <th>Short Name</th>
					<th></th>
					<th></th>
					<th></th>
                </tr>
            </thead>

        </table>
		
		  <!-- Script -->
    <script>
        $(document).ready(function () {
            var dataTable = $('#manageCategoriesTable').DataTable({
                'processing': true,
                'serverSide': true,
                'serverMethod': 'post',
                "lengthMenu": [[10, 25, 50, 100,500,1000], [10, 25, 50,100,500,1000]],
                'dom': 'Blfrtip',
        'buttons': [

									{
										"extend": 'pdf',
										"text": 'Export PDF',
										//"className": 'btn btn-primary btn-sm ml-1'
									},
									{
										"extend": 'csv',
										"text": 'Export CSV',
										//"className": 'btn btn-primary btn-sm ml-1'
									},


									{
										'extend': 'excel',
										"text": 'Export  Excel',
										//'className': 'btn btn-primary btn-sm ml-1'
									}, {
										'extend': 'print',
										"text": 'Print',
										//'className': 'btn btn-primary btn-sm ml-1'
									}

								], "language": 
{          
"processing": "<img style='width:300px; height:200px;' src='load.gif' />",
},
                
                'ajax': {
                    'url': 'php_action/designations.php',
                    'data': function (data) {
                        
                        var searchByDeptName = $('#searchByDeptName').val();
						var searchByDesignation=$('#searchByDesignation').val();
						var searchBySectName=$('#searchBySectName').val();

                       
                        data.searchByDeptName = searchByDeptName;
						data.searchByDesignation = searchByDesignation;
						data.searchBySectName = searchBySectName;
                    }
                },
                'columns': [
                    { data: 'des_id'},
                    { data: 'Designation'},
					{ data: 'ShortName'},
                    { data: 'view'},
                    { data: 'edit'},
					{ data: 'delete'},
                ]
                
            });

           $('#searchByDesignation').keyup(function () {
                dataTable.draw();
            }); 
			
           
            $('#searchByDeptName').change(function () {
                dataTable.draw();
            });
			
			$('#searchBySectName').change(function () {
                dataTable.draw();
            });
			
			
        });
       
    </script>
					
					
				</div>
                </div>
              </div>
            </div>
			
			
		<div id="MyModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
             <div class="modal-dialog"> 
                  <div class="modal-content"> 
                  
                       <!--<div id="printThis">-->
				  
                       <div class="modal-header"> 
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
                            <h4 class="modal-title">
                            	<center><i class="glyphicon glyphicon-user"></i> View Designation Details</center>
                            </h4> 
							
							
                       </div> 
                       <div class="modal-body"> 
                       
                       	   <div id="modal-loader" style="display: none; text-align: center;">
                       	   	<img src="ajax-loader.gif">
                       	   </div>
                            
                           <!-- content will be load here -->                          
                           <div id="dynamic-content"></div>
						   
						   <div class="well well-lg">
                          
                           </div>
                             
                        </div>

						<!--</div>-->
                        <div class="modal-footer"> 
                              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>  
							  <!--<button id="btnPrint" type="button" class="btn btn-default">Print</button>-->
							  
                        </div> 
                        
                 </div> 
              </div>
       </div><!-- /.modal -->	
	   
	   
	   <!-- edit categories brand -->
<div class="modal fade" id="editCategoriesModal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
    	
    	<form class="form-horizontal" id="editCategoriesForm" action="php_action/editDesignation.php" method="POST">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title"><i class="fa fa-edit"></i> Edit Designation Details</h4>
	      </div>
	      <div class="modal-body">

	      	<div id="edit-categories-messages"></div>

	      
		      <div class="edit-categories-result">
		      	<div class="form-group">
		        	<label for="editCategoriesName" class="col-sm-3 control-label">Designation: </label>
					    <div class="col-sm-9">
					      <input type="text" class="form-control" id="editDesignation" placeholder="Designation" name="editDesignation" style="width:100%;margin-left:0%;" autocomplete="off">
					    </div>
		        </div> <!-- /form-group-->
		      </div>         	        
		      <!-- /edit brand result -->
			  
			   <div class="edit-categories-result">
		      	<div class="form-group">
		        	<label for="editCategoriesName" class="col-sm-3 control-label">Designation ShortName: </label>
					    <div class="col-sm-9">
					      <input type="text" class="form-control" id="editShortName" placeholder="Designation ShortName" name="editShortName" style="width:100%;margin-left:0%;" autocomplete="off">
					    </div>
		        </div> <!-- /form-group-->
		      </div>         	        
		      <!-- /edit brand result -->
			  
								


	      </div> <!-- /modal-body -->
	      
	      <div class="modal-footer editCategoriesFooter">
	        <button type="button" class="btn btn-default" data-dismiss="modal"> <i class="glyphicon glyphicon-remove-sign"></i> Close</button>
	        
	        <button type="submit" class="btn btn-success" id="editCategoriesBtn" data-loading-text="Loading..." autocomplete="off"> <i class="glyphicon glyphicon-ok-sign"></i> Save Changes</button>
	      </div>
	      <!-- /modal-footer -->
     	</form>
	     <!-- /.form -->
    </div>
    <!-- /modal-content -->
  </div>
  <!-- /modal-dailog -->
</div>
<!-- /categories brand -->


<!-- categories brand -->
<div class="modal fade" tabindex="-1" role="dialog" id="removeCategoriesModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title"><i class="glyphicon glyphicon-trash"></i> Delete Designation</h4>
      </div>
      <div class="modal-body">
        <p>Do you really want to remove This Designation?</p>
      </div>
      <div class="modal-footer removeCategoriesFooter">
        <button type="button" class="btn btn-default" data-dismiss="modal"> <i class="glyphicon glyphicon-remove-sign"></i> Close</button>
        <button type="button" class="btn btn-primary" id="removeCategoriesBtn" data-loading-text="Loading..."> <i class="glyphicon glyphicon-ok-sign"></i> Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- /categories brand -->
			
			
          </div>
        </div>
        <!-- /page content -->
		
		
		<?php
		include 'includes/footer.php';
		?>
		
        
      </div>
    </div>

    <!-- Must -->
    <script src="custom/js/designations.js"></script>
  
	
    <!-- Must Custom Theme Scripts -->
    <script src="../build/js/custom.min.js"></script>
	
	<!-- file input -->
	<script src="assests/plugins/fileinput/js/plugins/canvas-to-blob.min.js'); ?>" type="text/javascript"></script>	
	<script src="assests/plugins/fileinput/js/plugins/sortable.min.js" type="text/javascript"></script>	
	<script src="assests/plugins/fileinput/js/plugins/purify.min.js" type="text/javascript"></script>
	<script src="assests/plugins/fileinput/js/fileinput.min.js"></script>	
	
					  <script>
$(document).ready(function(){
	
	
	
	$(document).on('click', '#getUser11', function(e){
		
		e.preventDefault();
		
		var uid = $(this).data('id');   // it will get id of clicked row
		//var uid1 = $(this).data('id1');   // it will get id of clicked row
		//var uid1 = $(this).data('leave');   // it will get id of clicked row
		
		$('#dynamic-content').html(''); // leave it blank before ajax call
		$('#modal-loader').show();      // load ajax loader
		
		$.ajax({
			url: 'get_designation_details.php',
			type: 'POST',
			//data: 'id='+uid+'&id1='+uid1,
			//data: 'id='+uid+'&id1='+uid1+'&date='+date,
			data: 'id='+uid,
			dataType: 'html'
		})
		.done(function(data){
			console.log(data);	
			$('#dynamic-content').html('');    
			$('#dynamic-content').html(data); // load response 
			$('#modal-loader').hide();		  // hide ajax loader	
		})
		.fail(function(){
			$('#dynamic-content').html('<i class="glyphicon glyphicon-info-sign"></i> Something went wrong, Please try again...');
			$('#modal-loader').hide();
		});
		
	});
	
});

</script>


	

  </body>
</html>



<?php
}
?>