<?php if(isset($techMessage) && $techMessage!=''){ ?>
<div class="container pt-3 text-center">
	<div class="alert alert-success" role="alert"><b><?php echo $techMessage; ?></b></div>
</div>
<?php } ?>
<script>
function showCategory(){
	$("#cat_list").toggle();
}
function showSubCategory(){
	$("#ajax_sub_list").toggle();
}

function submitSubscribe(){
	var email = $('#subscriber').val();
	//alert(email); exit;
	$.ajax({url:"ajax/ajax.php?action=add_subscriber&email="+email,success:function(result){
		//$("#ajax_res"+tech_id).html(result);
		if(result=='success'){
			$("#subscriber_res").html('<span style="color:yellow;">Thank you for subscribing us.</span>');
		} else {
			$("#subscriber_res").html(result);
		}
	}});
}

$(document).mouseup(function(e) {
    var containerCat = $("#cat_list");
    if (!containerCat.is(e.target) && containerCat.has(e.target).length === 0) {
        containerCat.hide();
    }
    var containerSubCat = $("#sub_cat_list");
    if (!containerSubCat.is(e.target) && containerSubCat.has(e.target).length === 0) {
        containerSubCat.hide();
    }
});
</script>
<script type="text/javascript" src="js/jquery.flexslider-min.js"></script>
<style>
.card .col-sm-12 {height: 148px;border:0;border-radius: 6px;}
.card{border:0;}
#rate_div ul{margin:0;padding:0;}
#rate_div li{list-style-type: none;display: inline-block;color: #F0F0F0;text-shadow: 0 0 1px #666666;font-size:20px;}
#rate_div .selected {color:#F4B30A;text-shadow: 0 0 1px #F48F0A;}
#rate_div .highlight{padding:0;background-color:#fff;}
.top_slide_left{margin:0;padding: 0;}
.top_slide_box {background-color: #7B0074;color: #fff;float: left;height: 220px;width: 100%;}
.top_slide_box_img_div{float:left;width:25%;}
.top_slide_box_img {float: right;margin-top: 18px;}
.top_slide_box_content{float:left;width:75%;}
.top_slide_box_content_title {float: left;font-size: 20px;font-weight: bold;padding-left: 10%;padding-top: 14%;width: 100%;}
.top_slide_box_content_list {float: left;font-size: 16px;padding-top: 5px;width: 100%;}
.top_slide_right{margin:0;padding: 0;}
.top_slide_main{background-color: #7B0074;margin:0;padding:0;}
</style>
<!-- Carousel1
================================================== -->
<?php //if($_SERVER['REMOTE_ADDR']=='202.88.237.77'){ ?>
<div class="col-12 row mt-2 mb-1"></div>
<!--<div class="col-12 row mt-2 mb-1"><div class="container text-center"><h2>Choose Your Service Requirement</h2></div></div>-->
<?php //} ?>
<!-- Carousel1 ================================================== -->
<!-- Carousel
================================================== -->
<div style="float: left;width:100%;">
	<!--<div>
			<img class="d-block w-100" src="images/slide_2.png" alt="">
	</div>-->
	<div id="myCarousel" class="carousel slide bg-inverse w-100 ml-auto mr-auto" data-ride="carousel">
		<div class="carousel-inner" role="listbox">
			<div class="carousel-item active">
				<img class="d-block w-100" src="images/slider_1.png" alt="">
			</div>
			<div class="carousel-item"><img class="d-block w-100" src="images/slide_2.png" alt=""></div>
			<div class="carousel-item"><img class="d-block w-100" src="images/slide_3.png" alt=""></div>
		</div>
		<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
			<span class="carousel-control-prev-icon" aria-hidden="true"></span>
			<span class="sr-only">Previous</span>
		</a>
		<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
			<span class="carousel-control-next-icon" aria-hidden="true"></span>
			<span class="sr-only">Next</span>
		</a>
	</div>
	<!-- Carousel================================================== -->
	<div class="absolute-wrapper mr-3">
		<div class="container col-9">
			
		</div>
	</div>
</div>
<div class="container">
	<!--<br><h2><center><a name="categories"></a>Service Quick Finder - Click To Explore</center></h1>-->
	<br>
	<?php /*if(mysqli_num_rows($catHomeRs)>0){ ?>
	<div class="row text-center">
		<?php
	while($catHomeRec = mysqli_fetch_array($catHomeRs)){
		$catImage = $catHomeRec['image'];
		//check if any sub cat added
		$subCatAddesRs = mysqli_query($con, "SELECT id FROM tbl_service_categories WHERE parent_id = '".$catHomeRec['id']."' AND status = 'Active' ORDER BY name");	
		if(mysqli_num_rows($subCatAddesRs)>0){ ?>
			<div class="col-sm-3 mb-4 p-2">
				<div class="card">										
					<a href="index.php?page=service_categories&cat_id=<?php echo $catHomeRec['id']; ?>"><img class="col-sm-12 pr-0 pl-0 border shadow" src="<?php echo SERVICE_IMG_URL.'thumb/'.$catImage; ?>" alt="" style="width: auto; height: auto;"></a>
				</div>
				<h4 class="card-title"><a href="index.php?page=service_categories&cat_id=<?php echo $catHomeRec['id']; ?>" style="color: #000000; font-weight: bold;"><?php echo $catHomeRec['name']; ?></a></h4>
			</div>
		<?php } else { ?>
			<div class="col-sm-3 mb-4 p-2">
				<div class="card">
					<?php if(isset($_SESSION['user_id']) && $_SESSION['user_id']!=''){ ?>
						<a href="index.php?page=service_categories&cat_id=<?php echo $catHomeRec['id']; ?>"><img class="col-sm-12 pr-0 pl-0 border shadow" src="<?php echo SERVICE_IMG_URL.'thumb/'.$catImage; ?>" alt="" style="width: auto; height: auto;"></a>
					<?php } else { ?>
						<a onclick="alert('You need to login to use our services');window.location='index.php?page=user_login';" href="#"><img class="col-sm-12 pr-0 pl-0 border shadow" src="<?php echo SERVICE_IMG_URL.'thumb/'.$catImage; ?>" alt="" style="width: auto; height: auto;"></a>
					<?php } ?>				
				</div>
				<?php if(isset($_SESSION['user_id']) && $_SESSION['user_id']!=''){ ?>
					<h4 class="card-title"><a href="index.php?page=service_categories&cat_id=<?php echo $catHomeRec['id']; ?>" style="color: #000000; font-weight: bold;"><?php echo $catHomeRec['name']; ?></a></h4>
				<?php } else { ?>
					<h4 class="card-title"><a onclick="alert('You need to login to use our services');window.location='index.php?page=user_login';" href="#" style="color: #000000; font-weight: bold;"><?php echo $catHomeRec['name']; ?></a></h4>
				<?php } ?>			
			</div>
		<?php } ?>
		<?php } ?>
	</div>
	<?php }*/ ?>
</div>
<?php /*if(mysqli_num_rows($popularRs)>0){ ?>
<div class="container"><br>
	<h2><center>POPULAR SERVICES</center></h2><br>
	<div class="col-12 text-center pb-3">
		<?php
	while($popularRec = mysqli_fetch_array($popularRs)){
		if($popularRec['parent_id']!='') {
			$res_parent = mysqli_fetch_array(mysqli_query($con, "SELECT `name` FROM `tbl_service_categories` WHERE id=".$popularRec['parent_id']));
			$parent_name = $res_parent['name'];
		} else {
			$parent_name = "";
		}
		?>
		<div class="btn btn-primary btn-lg btn_round w-auto">
			<?php if(isset($_SESSION['user_id']) && $_SESSION['user_id']!=''){ ?>
				<a class="popular_link" href="index.php?page=task_location&cat_id=<?php echo $popularRec['id']; ?>">
					<?php if($parent_name!='') { echo($parent_name." -> "); } echo $popularRec['name']; ?>
				</a>
			<?php } else { ?>
				<a onclick="alert('You need to login to use our services');window.location='index.php?page=user_login';" class="popular_link" href="#">
					<?php if($parent_name!='') { echo($parent_name." -> "); } echo $popularRec['name']; ?>
				</a>
			<?php } ?>			
		</div>
		<?php
	}
		?>
	</div>
</div>
<?php }*/ ?>
<!-- PAYMENT -->
<div class="bg-light mt-4 pt-3 pb-3">
	<section  id="payment">
		<div class="container">
			<div class="text-center title-font"><h4>PAYMENT AND PRICING</h4></div><br><br>
			<div class="row">
				<div class="feature-col col-lg-4 col-xs-12">
					<div class="text-center para-font ">
						<img class="pay-service" src="images/ico_pay1.svg"/>
						<h3 class="color-dark pt-2">Pay After Delivery</h3>
						<p>The payments can be made once the required product is delivered.</p>
					</div>
				</div>
				<div class="feature-col col-lg-4 col-xs-12">
					<div class="text-center para-font">
						<img class="pay-service" src="images/ico_pay2.svg"/>
						<h3 class="color-dark pt-2">Secure Online Payments</h3>
						<p>The payments are completely secure and fully encrypted.</p>
					</div>
				</div>
				<div class="feature-col col-lg-4 col-xs-12">
					<div class="text-center para-font">
						<img class="pay-service" src="images/ico_pay3.svg"/>
						<h3 class="color-dark pt-2">Pay With Cash</h3>
						<p>The payments are completely secure and fully encrypted.</p>
					</div>
				</div>
			</div>
		</div>
	</section>
	</div><!-- PAYMENT ends -->	
	<!-- newsletter -->
	<div class="mt-4 pt-5 pb-5 mb-0 color-bg" style="background-image: url('images/footer-element-bg.jpg');">
		<section id="news-letter">
			<div class="container">
				<!--<div class="text-center text-newsletter text-newsletter">
					<h3>Subscribe to our newsletter</h3><br>
					<h5>Subscribe to our news letter and get all updates, news and events from odp</h5></div>
				<center>
					<form name="subscribe-form" id="subscribe-form" action="" method="post">
						<div id="subscriber_res" style="width:100%;"></div>
						<input class="txt_subscribe" type="text" name="subscriber" id="subscriber" placeholder="Enter your Email address">
						<button type="button" class="btn-text btn-newsletter btn_subscribe" name="subscribe" onclick="submitSubscribe()" >SUBSCRIBE</button>
					</form>
				</center>-->
				<div class="row">
					<!--<div class="col count-box-outer">
						<div class="col count-box box-count" data-value="<?php echo($total_shops); ?>"><?php echo($total_shops); ?></div>
						<div class="clearfix"></div>
						<div class="total-text">Total Shops</div>
					</div>-->
					<div class="col count-box-outer">
				  		<div class="col count-box box-count" data-value="<?php echo($total_techs); ?>"><?php echo($total_techs); ?></div>
						<div class="clearfix"></div>
						<div class="total-text">Total Drivers</div>
					</div>
					<div class="col count-box-outer">
				  		<div class="col count-box box-count" data-value="<?php echo($total_users); ?>"><?php echo($total_users); ?></div>
						<div class="clearfix"></div>
						<div class="total-text">Total Users</div>
					</div>
					<div class="col count-box-outer">
						<div class="col count-box box-count" data-value="<?php echo($total_jobs); ?>"><?php echo($total_jobs); ?></div>
						<div class="clearfix"></div>
						<div class="total-text">Total Orders</div>
					</div>
				</div>
			</div>
		</section>
	</div><!-- newsletter -->
	<!-- customer reviews -->
	<div class="container mt-1 pt-3 pb-3"><br>
		<div class="text-center title-font"><h4>CUSTOMER REVIEWS</h4></div><br>
		<?php //if($_SERVER['REMOTE_ADDR']=='202.88.237.77'){
		//print_r($reviewsArray);
		if(count($reviewsArray)>=3){?>
		<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
			<div class="carousel-inner">
				<div class="carousel-item active">
					<div class="row">
						<?php for($rc=0;$rc<3;$rc++){ ?>
						<div class="feature-col col-lg-4 col-xs-12 mt-3 mb-3">
							<div class="text-center para-font ">
								<div class="rcorners m-auto">
									<p><?php echo $reviewsArray[$rc]['message']; ?><br> -<?php echo getUsername($reviewsArray[$rc]['user_id']); ?> </p>
									<div id="rate_div">
										<div id="tutorial">
											<ul>
												<?php
													 for($i=1;$i<=5;$i++) {
														 $selected = "";
														 if(!empty($reviewsArray[$rc]['rating']) && $i<=$reviewsArray[$rc]['rating']) {
															 $selected = "selected";
														 }
												?>
												<li class='<?php echo $selected; ?>'>&#9733;</li>
												<?php } ?>
											</ul>
										</div>
									</div>
								</div>
							</div>
						</div>
						<?php } ?>
					</div>
				</div>
				<?php if(count($reviewsArray)>=6){ ?>
				<div class="carousel-item">
					<div class="row">
						<?php for($rc=3;$rc<6;$rc++){ ?>
						<div class="feature-col col-lg-4 col-xs-12 mt-3 mb-3">
							<div class="text-center para-font ">
								<div class="rcorners m-auto">
									<p><?php echo $reviewsArray[$rc]['message']; ?><br> -<?php echo getUsername($reviewsArray[$rc]['user_id']); ?> </p>
									<div id="rate_div">
										<div id="tutorial">
											<ul>
												<?php
													 for($i=1;$i<=5;$i++) {
														 $selected = "";
														 if(!empty($reviewsArray[$rc]['rating']) && $i<=$reviewsArray[$rc]['rating']) {
															 $selected = "selected";
														 } ?>
												<li class='<?php echo $selected; ?>'>&#9733;</li>
												<?php } ?>
											</ul>
										</div>
									</div>
								</div>
							</div>
						</div>
						<?php } ?>
					</div>
				</div>
				<?php } ?>
				<?php if(count($reviewsArray)>=9){ ?>
				<div class="carousel-item">
					<div class="row">
						<?php for($rc=6;$rc<9;$rc++){ ?>
						<div class="feature-col col-lg-4 col-xs-12 mt-3 mb-3">
							<div class="text-center para-font ">
								<div class="rcorners m-auto">
									<p><?php echo $reviewsArray[$rc]['message']; ?><br> -<?php echo getUsername($reviewsArray[$rc]['user_id']); ?> </p>
									<div id="rate_div">
										<div id="tutorial">
											<ul>
												<?php
													 for($i=1;$i<=5;$i++) {
														 $selected = "";
														 if(!empty($reviewsArray[$rc]['rating']) && $i<=$reviewsArray[$rc]['rating']) {
															 $selected = "selected";
														 }
												?>
												<li class='<?php echo $selected; ?>'>&#9733;</li>
												<?php } ?>
											</ul>
										</div>
									</div>
								</div>
							</div>
						</div>
						<?php } ?>
					</div>
				</div>
				<?php } ?>
			</div>
			<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
				<span class="carousel-control-prev-icon" aria-hidden="true"></span>
				<span class="sr-only">Previous</span>
			</a>
			<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
				<span class="carousel-control-next-icon" aria-hidden="true"></span>
				<span class="sr-only">Next</span>
			</a>
		</div>
		<?php } //} ?>
	</div><br>
	<!-- customer reviews ends-->