<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: "Task ID";}
td:nth-of-type(2):before {content: "User";}
td:nth-of-type(3):before {content: "Category";}
td:nth-of-type(4):before {content: "Date";}
td:nth-of-type(5):before {content: "Status";}
td:nth-of-type(6):before {content: "View";}
td:nth-of-type(7):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: "";
	}
}
.table-checkable tr > td:first-child, .table-checkable tr > th:first-child {
  max-width: 100px;  
}
</style>
<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 Tasks</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="index.php?page=manage_user">User</a>&nbsp;<i class="fa fa-angle-right"></i></li><li class="active">Manage Tasks</li>
                            </ol>
                        </div>
                    </div>
                    
	 <div class="row">
                        <div class="col-md-12">
                            <div class="card card-topline-red">
                                <div class="card-head">
                                    <header>Manage Tasks</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="col-12 mt-2 text-right">
	                                <form name="form" id="form" action="" method="post">
	                                	<div class="col-12 row">
	                                	<div class="col-7 row pl-0 pr-0">
	                                		<div class="col-4 pl-0 pr-0 text-center">  
			                                    <input style="width:150px;" placeholder="Task ID" name="task_id" id="task_id" value="<?php if(isset($_REQUEST['task_id'])){ echo $_REQUEST['task_id']; }?>" type="text">
		                                    </div>
		                                	<div class="col-4 pl-0 pr-0">                                        
		                                        <!--<label class="col-md-12 control-label text-left">From Date</label>-->
			                                            <div class="input-group date form_date col-12" data-date="<?php if(isset($_POST['from_date'])){ echo $_POST['from_date']; } ?>" data-date-format="dd-mm-yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
			                                                <input placeholder="From Date" class="form-control" size="16" value="<?php if(isset($_POST['from_date'])){ echo $_POST['from_date']; }?>" type="text">
			                                                <span class="input-group-addon"><span class="fa fa-remove"></span></span>
			                                                <span class="input-group-addon"><span class="fa fa-calendar"></span></span>
			                                            </div>
			                                            <input name="from_date" id="dtp_input2" value="<?php if(isset($_POST['from_date'])){ echo $_POST['from_date']; }?>" type="hidden">
		                                    </div>
		                                    <div class="col-4 pl-0 pr-0">                                        
	                                        	<!--<label class="col-md-12 control-label text-left">To Date</label>-->
		                                            <div class="input-group date form_date col-12" data-date="<?php if(isset($_POST['date_to'])){ echo $_POST['date_to']; }?>" data-date-format="dd-mm-yyyy" data-link-field="dtp_input3" data-link-format="yyyy-mm-dd">
		                                                <input placeholder="To Date" class="form-control" size="16" value="<?php if(isset($_POST['date_to'])){ echo $_POST['date_to']; }?>" type="text">
		                                                <span class="input-group-addon"><span class="fa fa-remove"></span></span>
		                                                <span class="input-group-addon"><span class="fa fa-calendar"></span></span>
		                                            </div>
		                                            <input name="date_to" id="dtp_input3" value="<?php if(isset($_POST['date_to'])){ echo $_POST['date_to']; }?>" type="hidden">
	                                        </div>
	                                    </div>	
                                        <div class="col-5 pl-0 pr-0" style="min-width:425px"> 
		                                	<select style="width: 160px;float: left;" name="task_status" id="task_status">
		                                		<option value="">--- Status --</option>
		                                		<?php while($statRec = mysqli_fetch_array($statRs)){ ?>
		                                			<option value="<?php echo $statRec['status']; ?>" <?php if(isset($_REQUEST['task_status']) && $_REQUEST['task_status']==$statRec['status']){ echo 'selected'; }?> ><?php echo getStatusText($statRec['status']); ?></option>
		                                		<?php } ?>
		                                	</select>
		                                	<select style="width: 100px;float: left;" name="task_type" id="task_type">
		                                		<option value="">- Type -</option>	                                		
		                                			<option value="task" <?php if(isset($_REQUEST['task_type']) && $_REQUEST['task_type']=='task'){ echo 'selected'; }?> >Task</option>
		                                			<option value="project" <?php if(isset($_REQUEST['task_type']) && $_REQUEST['task_type']=='project'){ echo 'selected'; }?> >Project</option>
		                                			<option value="service" <?php if(isset($_REQUEST['task_type']) && $_REQUEST['task_type']=='service'){ echo 'selected'; }?> >Service</option>
		                                	</select>									
											<button style="float: left; margin-left: 5px;" class="btn" name="search">Search</button>&nbsp;
											<button style="float: left; " class="btn" name="clear">Clear</button>	
										</div>					
									</form>
								</div>
                                <div class="card-body ">
                                    <div class="row p-b-20">                                       
                                        <!--<div class="col-md-6 col-sm-6 col-6">
                                            <div class="btn-group pull-right">
                                                <button class="btn deepPink-bgcolor  btn-outline dropdown-toggle" data-toggle="dropdown">Tools
                                                    <i class="fa fa-angle-down"></i>
                                                </button>
                                                <ul class="dropdown-menu pull-right">
                                                    <li>
                                                        <a href="javascript:;">
                                                            <i class="fa fa-print"></i> Print </a>
                                                    </li>
                                                    <li>
                                                        <a href="javascript:;">
                                                            <i class="fa fa-file-pdf-o"></i> Save as PDF </a>
                                                    </li>
                                                    <li>
                                                        <a href="javascript:;">
                                                            <i class="fa fa-file-excel-o"></i> Export to Excel </a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>-->
                                    </div>
                                    <?php if(isset($_REQUEST['success'])){ ?><div class="alert alert-success text-left"><?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>
                                                    <label class="rt-chkbox rt-chkbox-single rt-chkbox-outline">
                                                        <input type="checkbox" class="group-checkable" data-set="#sample_1 .checkboxes" />
                                                        <span></span>
                                                    </label>
                                                </th>-->
                                                <th> Task ID </th>
                                                <th> User </th>
                                                <th> Category </th>
                                                <th> Date </th>                                                
                                                <th> Status </th>
                                                <th> View </th>
                                                <th> 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)) {	?>
												
	                                            <tr <?php if($resDetails['is_project']=='yes'){ echo 'style="background-color: #c3d1f4;"'; } else if($resDetails['status']=='cancelled'){ echo 'style="background-color: #8f8f8f;"'; } ?> class="odd gradeX">
	                                                <td style="width: 70px;">
	                                                	<div style="float:left;">
	                                                		<?php echo '#'.$resDetails['id']; ?>
	                                                	</div>
	                                                	<?php if($resDetails['emergency']=='yes'){ ?>
															<div style="left: 0;width: auto;float:right;">
																<img title="Emergency Task" style="width:24px;" src="images/emr.png">
															</div>
														<?php } ?>														
	                                                </td>
	                                                <td><?php if($resDetails['user_id']>0){ ?>
	                                                	 <a target="_blank" href="index.php?page=view_user&id=<?php echo $resDetails['user_id']; ?>"><?php echo getUserName($resDetails['user_id']);?></a>
	                                                	 <?php } ?>
	                                                </td>
	                                                <td style="text-align:left;">
	                                                	<?php if($resDetails['category_id']>0){ ?>
	                                                		<?php $parentCategory = getParentCategory($resDetails['category_id']); 
		                                                	if($parentCategory!='NA'){
																echo $parentCategory.' -->';
															}
	                                                		 echo getCategory($resDetails['category_id']);
														}?>
	                                                </td>
	                                                <td><?php echo getFormattedDateTime($resDetails['date']); ?></td>   	                                                                                        
	                                                <td>
	                                                	<?php if($resDetails['status']=='Active'){?>
	                                                    <span class="label label-sm label-success"> <?php echo $resDetails['status'];?> </span>
	                                                    <?php } else { echo getStatusText($resDetails['status']); }?>
	                                                </td> 
	                                                <td>	                
	                                                	<?php if($resDetails['is_project']=='yes' || $resDetails['is_service']=='yes'){?> 
	                                                	<a class="btn btn-xs deepPink-bgcolor dropdown-toggle no-margin" target="_blank" href="index.php?page=view_task_project&id=<?php echo $resDetails['id']; ?>">View</a>
	                                                	<?php } else { ?>                               	
	                                                	<a class="btn btn-xs deepPink-bgcolor dropdown-toggle no-margin" target="_blank" href="index.php?page=view_task&id=<?php echo $resDetails['id']; ?>">View</a>
	                                                	<?php } ?>	                                                	
	                                                </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">	                                                        	 
	                                                            <?php //if($resDetails['is_project']!='yes' && $resDetails['status']=='discarded'){
	                                                            	if($resDetails['status']=='discarded'){ ?>
	                                                            <li>
	                                                                <a href="index.php?page=manage_user_tasks&id=<?php echo $resDetails['id']; ?>&action=copy">
	                                                                    <i class="icon-docs"></i> Replicate Task </a>
	                                                            </li>
	                                                            <?php } ?>
	                                                            <?php if($resDetails['status']!='discarded'){ ?>
	                                                            <li>
	                                                                <a  onclick="return confirm('Are you sure to discard this task?');" href="index.php?page=manage_user_tasks&id=<?php echo $resDetails['id']; ?>&action=discard&p=<?php echo $p;?>">
	                                                                    <i class="icon-docs"></i> Discard Task </a>
	                                                            </li>
	                                                            <?php } ?>	 	                                                        	       
	                                                            <li>
	                                                                <a  onclick="return confirm('Are you sure to delete this task?');" href="index.php?page=manage_user_tasks&action=delete&del_id=<?php echo $resDetails['id']; ?>&p=<?php echo $p;?>">
	                                                                    <i class="icon-docs"></i> Delete </a>
	                                                            </li>                                                           
	                                                        </ul>
	                                                    </div>
	                                                </td>
	                                            </tr>
                                            <?php ++$slNo; } ?>                                            
                                        </tbody>
                                    </table>
                                    <div style="float: left;"> <?php echo $pageNums; ?> </div>
                                    <?php } else { ?>
                                    	<div class="alert alert-danger">Sorry! No Results Found.</div>					        		
					        		<?php }	?> 
                                </div>
                            </div>
                        </div>
                    </div>
                    

</div>
</div>