<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: "Technician";}
td:nth-of-type(2):before {content: "Paid Date";}
td:nth-of-type(3):before {content: "Amount";}
td:nth-of-type(4):before {content: "Added By";}
td:nth-of-type(5):before {content: "Actions";}

.table-checkable tr > td:first-child, .table-checkable tr > th:first-child {
  max-width: 100%;  
}
td:nth-of-type(1)::before {
	  content: "";
}
}
@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>
<div class="page-content-wrapper">
                <div class="page-content">
                    <div class="page-bar">
                        <div class="page-title-breadcrumb">                            
                            <ol class="breadcrumb page-breadcrumb pull-right">
                                <li><i class="fa fa-home"></i>&nbsp;<a class="parent-item" href="index.html">Home</a>&nbsp;<i class="fa fa-angle-right"></i>
                                </li>
                                <li><a class="parent-item" href="">Reports</a>&nbsp;<i class="fa fa-angle-right"></i></li><li class="active">Tech. Paid Report</li>
                            </ol>
                        </div>
                    </div>
                    
	 <div class="row">
                        <div class="col-md-12">
                            <div class="card card-topline-red">
                                <div class="card-head">
                                    <header>Technician Paid Report</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 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"><?php echo urldecode($_REQUEST['success']); ?></div></div><?php } ?>
                                    
                                    <form action="" id="form_staff_add" class="form-horizontal" method="post">
                                        <div class="form-body">                                        
                                            <div class="form-group row">                                            
                                                <div class="col-md-3">                                                    
                                                    <select class="form-control" name="technician" id="technician" >
                                                        <option value="">Select Technician</option>
                                                        <?php if(mysqli_num_rows($techListRs)>0){
                                                        	while($techRec = mysqli_fetch_array($techListRs)){ ?>   
                                                        	<option value="<?php echo $techRec['id']; ?>" <?php if(isset($_REQUEST['technician']) && $_REQUEST['technician']==$techRec['id']){ echo 'selected';} ?> ><?php echo getTechnicianName($techRec['id']); ?></option>
                                                        <?php } } ?>                                                     
                                                    </select>                                                    
                                                </div> 
                                                <div class="col-3">  
				                                            <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 class="form-control" placeholder="From Date" 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-3">             
				                                            <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 class="form-control" placeholder="To Date" 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 class="col-md-3">             
                                                	<button type="submit" name="search" class="btn btn-info">Search</button>   
                                                	<button type="submit" name="clear" class="btn">Clear</button>                                  
                                            	</div>                                            	
                                            </div>
                                       </div> 
                                   </form>
                                            
                                            
                                    <?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> Technician </th>
                                                <th> Paid Date </th>
                                                <th> Amount </th>                                                
                                                <th> Added By </th>                                                
                                            </tr>
                                        </thead>
                                        <tbody>
                                        	<?php                                        	
												while($resDetails = mysqli_fetch_array($execDetails)) {	?>
                                            <tr class="odd gradeX">                                                
                                                <td>
                                                	<a target="_blank" href="index.php?page=view_technician&id=<?php echo $resDetails['technician_id']; ?>"><?php echo getTechnicianName($resDetails['technician_id']); ?></a>
                                                </td>
                                                <td><?php echo getFormattedDate($resDetails['date']); ?></td>
                                                <td><?php echo $resDetails['amount']; ?></td>
                                                <td><?php echo getAdminUserName($resDetails['added_by']); ?></td> 
                                            </tr>
                                            <?php } ?>                                            
                                        </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>