<style>
/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media only screen and (max-width: 560px), (min-device-width: 568px) and (max-device-width: 1024px) {
/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr {
	display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
thead tr {
	position: absolute;
	top: -9999px;
	left: -9999px;
}
tr {
	border: 0px solid #ccc;
}
td {
	/* Behave  like a "row" */
	border: none;
	/*border-bottom: 1px solid #eee; */
	position: relative;
	padding-left: 50%;
}
td:before {
	/* Now like a table header */
	position: unset; /*absolute causing issues*/
	/* Top/left values mimic padding */
	top: 6px;
	left: 6px;
	width: 45%;
	padding-right: 10px;
	white-space: nowrap;
}
/*
Label the data
*/
td:nth-of-type(1):before {content: "S.No";}
td:nth-of-type(2):before {content: "Category Name";}
td:nth-of-type(3):before {content: "Category Type";}
td:nth-of-type(4):before {content: "Actions";}
.table-checkable tr > td:first-child, .table-checkable tr > th:first-child {
  max-width: 20%;  
}
}
@media only screen and (max-width: 480px), (min-device-width: 300px) and (max-device-width: 480px) {
	.table-checkable tr > td:first-child, .table-checkable tr > th:first-child {
	  max-width: 100%;  
	}
	td:nth-of-type(1)::before {
	  content: "";
	}
}
</style>
<script src="js/ajax.js" ></script>
<div class="page-content-wrapper">
                <div class="page-content">
                    <div class="page-bar">
                        <div class="page-title-breadcrumb">
                            <div class=" pull-left">
                                <div class="page-title">Manage Category</div>
                            </div>
                            <ol class="breadcrumb page-breadcrumb pull-right">
                                <li><i class="fa fa-home"></i>&nbsp;<a class="parent-item" href="index.php?page=home">Home</a>&nbsp;<i class="fa fa-angle-right"></i>
                                </li>
                                <li><a class="parent-item" href="">Category</a>&nbsp;<i class="fa fa-angle-right"></i></li><li class="active">Manage Category</li>
                            </ol>
                        </div>
                    </div>
                    
	 <div class="row">
                        <div class="col-md-12">
                            <div class="card card-topline-red">
                                <div class="card-head">
                                    <header>Manage Category</header>
                                    <div class="tools">
                                        <!--<a class="fa fa-repeat btn-color box-refresh" href="javascript:;"></a>-->
	                                    <a class="t-collapse btn-color fa fa-chevron-down" href="javascript:;"></a>
	                                    <a class="t-close btn-color fa fa-times" href="javascript:;"></a>
                                    </div>
                                </div>
                                <div class="card-body ">
                                    <div class="row p-b-20">
                                        <div class="col-md-12 col-sm-12 col-12">
                                            <div class="btn-group">
                                                <button onclick="location.href = 'index.php?page=add_category';" id="addRow1" class="btn btn-info">
                                                    Add New <i class="fa fa-plus"></i>
                                                </button>
                                            </div>
                                        </div>                                        
                                    </div>
                                    <?php if(isset($_REQUEST['success'])){ ?><div class="alert alert-success"><?php echo urldecode($_REQUEST['success']); ?></div></div><?php } ?>
                                    <?php if(isset($execDetails) && mysqli_num_rows($execDetails)>0) { ?>
                                    <table class="table table-striped table-bordered table-hover table-checkable order-column" style="width: 100%" id="example4">
                                        <thead>
                                            <tr>                                                
                                                <th>&nbsp;  </th>                                                
                                                <th> Category Name </th>                                                   
                                                <th> Category Type </th>                                        
                                                <th colspan="2"> Actions </th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        	<?php
                                        	if(isset($_GET['p']) && is_numeric($_GET['p']) && ($_GET['p'] > 1)) {
												$slNo = ($_GET['p']*30-29);
											} else {
												$slNo = 1;
											}
												while($resDetails = mysqli_fetch_array($execDetails)) {	
													$subRs = mysqli_query($con, "SELECT * FROM tbl_service_categories WHERE parent_id = '".$resDetails['id']."'");
													//get category image
													if($resDetails['image']!=''){
														$catImage = SERVICE_IMG_URL.'thumb/'.$resDetails['image'];
													} else {
														$catImage = '';
													}
													?>
                                            <tr class="odd gradeX">                                                
                                                <!--<td><?php echo $slNo; ?></td>-->
                                                <td>
                                                	<?php if($catImage!=''){ ?>
                                                		<img src="<?php echo $catImage; ?>" style="width:60px;height:50px; ">
                                                	<?php } else { ?>
                                                		<img src="images/no-image-service.png" style="width:60px;">
                                                	<?php } ?>
                                                </td>
                                                <td><?php echo $resDetails['name']; ?></td>                                  
                                                <td>
													<input type="radio" name="cat_type<?php echo $resDetails['id']; ?>" id="cat_type1<?php echo $resDetails['id']; ?>" value="Task" <?php if($resDetails['cat_type']=='Task') { echo('checked'); } ?> onClick="return set_cat_type('<?php echo($resDetails['id']); ?>', 'Task')">
													<label for="cat_type1<?php echo $resDetails['id']; ?>">Task</label>
													<input type="radio" name="cat_type<?php echo $resDetails['id']; ?>" id="cat_type2<?php echo $resDetails['id']; ?>" value="Project" <?php if($resDetails['cat_type']=='Project') { echo('checked'); } ?> onClick="return set_cat_type('<?php echo($resDetails['id']); ?>', 'Project')">
													<label for="cat_type2<?php echo $resDetails['id']; ?>">Project</label>
													<?php /*?><input type="radio" name="cat_type<?php echo $resDetails['id']; ?>" id="cat_type3<?php echo $resDetails['id']; ?>" value="Service" <?php if($resDetails['cat_type']=='Service') { echo('checked'); } ?> onClick="return set_cat_type('<?php echo($resDetails['id']); ?>', 'Service')">
													<label for="cat_type3<?php echo $resDetails['id']; ?>">Service</label><?php */?>
												</td>                                                     
                                                <td>
                                                	<?php if($resDetails['status']=='Active'){?>
                                                    <span class="label label-sm label-success"> <?php echo $resDetails['status'];?> </span>
                                                    <?php } else { echo $resDetails['status']; }?>
                                                </td>                                                
                                                <td class="valigntop">
													
													<?php /*?><input type="radio" name="app_cat" id="app_cat<?php echo($resDetails['id']); ?>" onChange="setAppCat('<?php echo($resDetails['id']); ?>')" <?php if($app_cat==$resDetails['id']) { echo('checked'); } ?>>
														<label for="app_cat<?php echo($resDetails['id']); ?>">App category</label><?php */?>
													
                                                    <div class="btn-group">
                                                        <button class="btn btn-xs deepPink-bgcolor dropdown-toggle no-margin" type="button" data-toggle="dropdown" aria-expanded="false"> Actions
                                                            <i class="fa fa-angle-down"></i>
                                                        </button>
                                                        <ul class="dropdown-menu pull-left" role="menu"> 
                                                        	<?php if(mysqli_num_rows($subRs)>0){  /*hide rates*/ } else { ?>
                                                        	<li>
                                                                <a href="index.php?page=category_charge&id=<?php echo $resDetails['id']; ?>">
                                                                    <i class="icon-docs"></i> Manage Rates </a>
                                                            </li> 
                                                            <?php } ?>                                                     	                                                       
                                                            <li>
                                                                <a href="index.php?page=add_category&id=<?php echo $resDetails['id']; ?>">
                                                                    <i class="icon-user"></i> Edit Category </a>
                                                            </li>
                                                            <?php if($resDetails['status']=='Active'){?>
                                                            <li>
                                                                <a href="index.php?page=manage_category&action=disable&id=<?php echo $resDetails['id']; ?>">
                                                                    <i class="icon-docs"></i> Disable </a>
                                                            </li> 
															<?php } else { ?>    
															<li>
                                                                <a href="index.php?page=manage_category&action=activate&id=<?php echo $resDetails['id']; ?>">
                                                                    <i class="icon-docs"></i> Enable </a>
                                                            </li>	
															<?php } ?>                                                       
                                                            <li>
                                                                <a  onclick="return confirm('Are you sure to delete this item?');" href="index.php?page=manage_category&action=delete&del_id=<?php echo $resDetails['id']; ?>">
                                                                    <i class="icon-docs"></i> Delete </a>
                                                            </li>                                                           
                                                        </ul>
                                                    </div>
                                                </td>
                                            </tr>
                                            <?php if(mysqli_num_rows($subRs)>0){                                            	
                                            	while($resDetails = mysqli_fetch_array($subRs)) {
                                            		if($resDetails['image']!=''){
														$catImage = SERVICE_IMG_URL.'thumb/'.$resDetails['image'];
													} else {
														$catImage = '';
													}	
                                            		//++$slNo;?>
													<tr class="odd gradeX">                                                
	                                                <!--<td><?php //echo $slNo; ?></td>-->
	                                                <td>
	                                                	<?php if($catImage!=''){ ?>
	                                                		<img src="<?php echo $catImage; ?>" style="width:60px;height:50px; ">
	                                                	<?php } else { ?>
	                                                		<img src="images/no-image-service.png" style="width:60px;">
	                                                	<?php } ?>
	                                                </td>
	                                                <td><?php echo '-- '.$resDetails['name']; ?></td>	                    
	                                                <td>
														<input type="radio" name="cat_type<?php echo $resDetails['id']; ?>" id="cat_type1<?php echo $resDetails['id']; ?>" value="Task" <?php if($resDetails['cat_type']=='Task') { echo('checked'); } ?> onClick="return set_cat_type('<?php echo($resDetails['id']); ?>', 'Task')">
														<label for="cat_type1<?php echo $resDetails['id']; ?>">Task</label>
														<input type="radio" name="cat_type<?php echo $resDetails['id']; ?>" id="cat_type2<?php echo $resDetails['id']; ?>" value="Project" <?php if($resDetails['cat_type']=='Project') { echo('checked'); } ?> onClick="return set_cat_type('<?php echo($resDetails['id']); ?>', 'Project')">
														<label for="cat_type2<?php echo $resDetails['id']; ?>">Project</label>
														<?php /*?><input type="radio" name="cat_type<?php echo $resDetails['id']; ?>" id="cat_type3<?php echo $resDetails['id']; ?>" value="Service" <?php if($resDetails['cat_type']=='Service') { echo('checked'); } ?> onClick="return set_cat_type('<?php echo($resDetails['id']); ?>', 'Service')">
														<label for="cat_type3<?php echo $resDetails['id']; ?>">Service</label><?php */?>
													</td>                                                                    
	                                                <td>
	                                                	<?php if($resDetails['status']=='Active'){?>
	                                                    <span class="label label-sm label-success"> <?php echo $resDetails['status'];?> </span>
	                                                    <?php } else { echo $resDetails['status']; }?>
	                                                </td>                                                
	                                                <td class="valigntop">
														
														
														
														
	                                                    <div class="btn-group">
	                                                        <button class="btn btn-xs deepPink-bgcolor dropdown-toggle no-margin" type="button" data-toggle="dropdown" aria-expanded="false"> Actions
	                                                            <i class="fa fa-angle-down"></i>
	                                                        </button>
	                                                        <ul class="dropdown-menu pull-left" role="menu"> 
	                                                        	<li>
	                                                                <a href="index.php?page=category_charge&id=<?php echo $resDetails['id']; ?>">
	                                                                    <i class="icon-docs"></i> Manage Rates </a>
	                                                            </li>                                                      	                                                       
	                                                            <li>
	                                                                <a href="index.php?page=add_category&id=<?php echo $resDetails['id']; ?>">
	                                                                    <i class="icon-user"></i> Edit Category </a>
	                                                            </li>       
	                                                            <?php if($resDetails['status']=='Active'){?>
	                                                            <li>
	                                                                <a href="index.php?page=manage_category&action=disable&id=<?php echo $resDetails['id']; ?>">
	                                                                    <i class="icon-docs"></i> Disable </a>
	                                                            </li> 
																<?php } else { ?>    
																<li>
	                                                                <a href="index.php?page=manage_category&action=activate&id=<?php echo $resDetails['id']; ?>">
	                                                                    <i class="icon-docs"></i> Enable </a>
	                                                            </li>	
																<?php } ?>                                                       
	                                                            <li>
	                                                                <a  onclick="return confirm('Are you sure to delete this item?');" href="index.php?page=manage_category&action=delete&del_id=<?php echo $resDetails['id']; ?>">
	                                                                    <i class="icon-docs"></i> Delete </a>
	                                                            </li>                                                           
	                                                        </ul>
	                                                    </div>
	                                                </td>
	                                            </tr>
												
											<?php	}  }?>
                                            <?php ++$slNo; } ?>                                            
                                        </tbody>
                                    </table>
                                    <div style="float: left; width: auto;"> <?php echo $pageNums; ?> </div>
                                    <?php } else { ?>
                                    	<div class="alert alert-danger">Sorry! No Results Found.</div>					        		
					        		<?php }	?> 
                                </div>
                            </div>
                        </div>
                    </div>
                    

</div>
</div>
<script>
function setAppCat(id) {
	$.getJSON( "ajax/ajax.php", { id: id, action:"set_app_cat" } )
		.done(function( json ) {
		if(json.status=='success'){

		}			
	});
}
</script>