<?php require_once("header.php");?>

            <script language="javascript" type="text/javascript">
    		function call_validation()
    		{
    			if(document.getElementById('rname').value == "")
    			{
    				alert("Please enter name");
    				document.getElementById('rname').focus();
    				return false;
    			}
    			
    			if(document.getElementById('rphone').value == "")
    			{
    				alert("Please enter phone no.");
    				document.getElementById('rphone').focus();
    				return false;
    			}
    			
    			calldata();
    		}
    		
    		function calldata()
    		{
    			var rname = $('#rname').val();
    			var rphone = $('#rphone').val();
    			var remail = $('#remail').val();

    		   	var str = {rname:rname,rphone:rphone,remail:remail};
    			$.ajax({
    				type: "post",
    				url: "ajax_post_call_data.php",
    				data: str,
    				success: function(data) 
    				{
    				    $('#call_succ_msg').html('<img src="images/tick.png" alt=""> Your information posted successfully.');
    				}
    			});
    		}
    		</script>

			<!-- page template area start -->
			<div id="about">
			    <form action="search-result.php" method="GET">
				<div class="container mt-10 pb-10 pt-0">
				    <div class="col-md-12 col-sm-12 col-xs-12 pl-0 pr-0 ">
				        <div class="input-group">
                            <input type="text" name="search_string" id="search_string" class="form-control" placeholder="Search by service" style="height:42px; border-top-left-radius:10px; border-bottom-left-radius:10px;">
                            <span class="input-group-btn">
                                <button class="btn btn-flat btn-theme-colored border-left-theme-color-2-4px" type="submit" ><i class="fa fa-search" style="font-size:16px"></i></button>
                            </span>
                        </div>
				    </div>
			    </div>
			    </form>
			</div>
			
			<div class="banner">
			    <div class="slider-container" id="caption-slide">
					<div class="slider">
					<?php
					$sql_banner = "SELECT * FROM `sc_banners` WHERE `banner_status` = 'Active' ORDER BY `banner_id` ASC";
					$exe_banner = mysqli_query($connection,$sql_banner);
					while($arr_banner = mysqli_fetch_array($exe_banner))
					{
						?>								
						<div class="slide"> 
						    <a href="#"><img src="../uploads/banner/<?php echo $arr_banner['banner_image'];?>" alt=""></a> <span class="caption">&nbsp;</span>
						</div>
						<?php
					}
					?>
					</div>
				</div>
			</div>
			
			<section id="about" style="background:#fff;">
				<div class="container mt-0 pb-0 pt-10">
					<div class="col-lg-12">
    					<div class="row multi-row-clearfix">
    					    <div class="">
    							<div class="col-md-4 col-sm-6 col-xs-4 pl-5 pr-5" data-nav="false">
    								<div class="item" style="background:#2C89C9; border-radius:5px;">
    									<div class="p-0 pt-10 pb-10" style="text-align:center;">
    										    <p style="margin-bottom:0; font-size:14px; text-align:center; color:#fff;">COMMERCIAL SERVICES</p>
    									</div>	
    								</div>
    							</div>
    							<div class="col-md-4 col-sm-6 col-xs-4 pl-5 pr-5" data-nav="false">
    								<div class="item" style="background:#2C89C9; border-radius:5px;">
    									<div class="p-0 pt-10 pb-10" style="text-align:center;">
    										    <p style="margin-bottom:0; font-size:14px; text-align:center; color:#fff;">RESIDENTIAL SERVICES</p>
    									</div>	
    								</div>
    							</div>
    							<div class="col-md-4 col-sm-6 col-xs-4 pl-5 pr-5" data-nav="false">
    								<div class="item" style="background:#2C89C9; border-radius:5px;">
    									<div class="p-0 pt-10 pb-10" style="text-align:center;">
    										    <p style="margin-bottom:0; font-size:14px; text-align:center; color:#fff;">INDUSTRIAL SERVICES</p>
    									</div>	
    								</div>
    							</div>
    						</div>
    					</div>
					</div>
				</div>
			</section>
			
			<section id="about" style="background:#fff;">
				<div class="container mt-5 pb-5 pt-10">
					<div class="col-lg-12">
				        <div class="row">
				            <h1 class="title mt-0 mb-0" style="text-align:center;">Home services at your doorstep</h1>
				            <p style="color:#888888; text-align:center; margin-bottom:5px;">What are you looking for?</p>
    				    </div>
    					<div class="row" style="margin-top:10px;">
					    <?php
						$sql_category = "SELECT * FROM `sc_category` WHERE `category_status` = 'Active' ORDER BY `category_id` ASC LIMIT 0,4";
						$exe_category = mysqli_query($connection,$sql_category);
						while($arr_category = mysqli_fetch_array($exe_category))
						{
						?>	
    					    <a href="subcategory-list.php?category_id=<?php echo $arr_category['category_id'];?>" style="color:#333;">
							<div class="col-xs-6 pl-5 pr-5" data-nav="false">
								<div class="item">
									<div class="mb-15" style="border:1px solid #90caf9; border-radius:10px; background:#fff;">
										    <div class="thumb pt-10" style="border-radius:5px;">
											<img class="img-fullwidth" style="border-top-right-radius: 5px; border-top-left-radius: 5px;  padding:0 15px;" alt="" src="../uploads/category/<?php echo stripslashes($arr_category['category_icon']);?>">
										</div>
										<div class="p-0 pt-5 pb-10" style="text-align:center;  border-bottom-right-radius: 5px; border-bottom-left-radius: 5px;">
											<p style="margin-bottom:0; font-size:12px; text-align:center;"><?php echo stripslashes($arr_category['category_name']);?></p>  </div>	
									</div>
								</div>
    						</div>
							</a>
    							<?php
    						}
    						?>
    					</div>
    					<div>
    					    <button type="button" class="btn btn-flat btn-theme-colored border-left-theme-color-2-4px mb-10" onclick="window.location.href='category-list.php'">View All</button>
    				    </div>
					</div>
				</div>
			</section>

			<!--<section id="about">
				<div class="container mt-0 pb-0 pt-0">
					<div class="col-lg-12">
    					<div class="row ">
    					    <h1 class="title mt-0 mb-10" style="text-align:center;">Our Incomparable Services</h1>
    					    <div class="mb-15 p-10" style="border:1px solid #2C89C9; border-radius:5px; background:#2C89C9;">
        						    <h4 class="mt-0 mb-0 text-left text-white">Installation, Testing & Configuration</h4>
        						    <p style="color:#fff;">We provide a full range of services related to all types of networking system.</p>
    						</div>
    						<div class="mb-15 p-10" style="border:1px solid #2C89C9; border-radius:5px; background:#2C89C9;">
        						    <h4 class="mt-0 mb-0 text-left text-white">After Sales Services</h4>
        						    <p style="color:#fff;">We are committed to our customer by provide them after sale support.</p>
    						</div>
    						<div class="mb-15 p-10" style="border:1px solid #2C89C9; border-radius:5px; background:#2C89C9;">
        						    <h4 class="mt-0 mb-0 text-left text-white">Repairing & Technical Support</h4>
        						    <p style="color:#fff;">The most common issues that users face with their security systems be resolved by our highly trained technicians.</p>
    						</div>
    						<div class="mb-15 p-10" style="border:1px solid #2C89C9; border-radius:5px; background:#2C89C9;">
        						    <h4 class="mt-0 mb-0 text-left text-white">Annual Maintainance Service</h4>
        						    <p style="color:#fff;">Get your annual maintenance service from us. We will help you keep your equipment in top working condition.</p>
    						</div>
    					</div>
					</div>
				</div>
			</section>-->
			
			<section id="about">
				<div class="container mt-0 pb-10 pt-0">
    			    <h1 class="title mt-0 mb-10" style="text-align:center;">Our Popular Services</h1>
    			    <div class="">
    					<div class="owl-carousel-4col" data-nav="true">
    					<?php
						$sql_category = "SELECT * FROM `sc_subcategory` WHERE `is_popular` = 'Yes' AND `subcategory_status` = 'Active' ORDER BY `subcategory_id` ASC";
						$exe_category = mysqli_query($connection,$sql_category);
						while($arr_category = mysqli_fetch_array($exe_category))
						{
						    ?>
						    <a href="login.php?category_id=<?php echo $arr_category['category_id'];?>&subcategory_id=<?php echo $arr_category['subcategory_id'];?>" style="color:#333;">
    						<div class="item">
								<div class="mb-15" style="border:1px solid #90caf9; border-radius:10px; background:#fff;">
									    <div class="thumb pt-10" style="border-radius:5px;">
										<img class="img-fullwidth" style="border-top-right-radius: 5px; border-top-left-radius: 5px;  padding:0 15px;" alt="" src="../uploads/subcategory/<?php echo stripslashes($arr_category['subcategory_icon']);?>">
									</div>
									<div class="p-0 pt-5 pb-10" style="text-align:center;  border-bottom-right-radius: 5px; border-bottom-left-radius: 5px;">
										<p style="margin-bottom:0; font-size:12px; text-align:center;"><?php echo stripslashes($arr_category['subcategory_name']);?></p>       					
								    </div>	
								</div>
							</div>
							</a>
    						<?php
    					}
    					?>
    					</div>
    				</div>
				</div>
			</section>
			
			<section id="about">
				<div class="container mt-0 pb-20 pt-0">
    			    <h1 class="title mt-0 mb-10" style="text-align:center;">Our Portfolio</h1>
    			    <div class="">
    					<div class="owl-carousel-1col" data-nav="true">
    					<?php
    					$sql_work = "SELECT * FROM `sc_works` WHERE `work_status` = 'Active' ORDER BY `work_id` DESC LIMIT 0,6";
    					$exe_work = mysqli_query($connection,$sql_work);
    					while($arr_work = mysqli_fetch_array($exe_work))
    					{
    						?>								
    						<div class="item">
    						    <p><a href="#"><img src="../uploads/work/<?php echo $arr_work['work_photo'];?>" alt=""></a></p>
    						    <p style="text-align:center;"><b><?php echo stripslashes($arr_work['work_title']);?></b></p>
    						</div>
    						<?php
    					}
    					?>
    					</div>
    				</div>
    				<div>
					    <button type="button" class="btn btn-flat btn-theme-colored border-left-theme-color-2-4px mb-0 mt-10" onclick="window.location.href='work.php'">View All</button>
				    </div>
				</div>
			</section>
			
			<section id="about" style="background:#1565C0;">
			    <div class="container mt-0 pb-20 pt-10">	
				    <div class="row">
					    <div class="col-lg-12">
    				        <h1 class="text-white mt-0 mb-10" style="text-align:center;">REQUEST A FREE CALL</h1>
    				        <p style="text-align:center; color:#fff;" id="call_succ_msg"></p>
    						<div class="row">
    							<div class="col-lg-12 form-group">
    								<input name="rname" id="rname" placeholder="Enter Name *" class="common-input form-control" type="text">
    							</div>
    							<div class="col-lg-12 form-group">
    								<input name="rphone" id="rphone" placeholder="Enter Phone No. *" class="common-input form-control" type="tel" maxlength="10">
    							</div>
    							<div class="col-lg-12 form-group">
    								<input name="remail" id="remail" placeholder="Enter Email Address" class="common-input form-control" type="text">
    							</div>
    							<div class="col-lg-12 form-group">
    								<button class="btn btn-flat btn-theme-colored3 border-left-theme-color-2-4px" type="submit" style="float: left;" onclick="call_validation();">Submit</button>
    							</div>
    						</div>
    					</div>
    				</div>
    			</div>	
    		</section>
			
			<section id="about">
				<div class="container mt-0 pb-0 pt-20">
					<div class="col-lg-12">
    					<div class="row multi-row-clearfix">
    					    <div class="">
    							<div class="col-md-4 col-sm-6 col-xs-6 pl-5 pr-5" data-nav="false">
    								<div class="item" style="background:#7986cb; border-radius:5px;">
    									<div class="mb-10" style="">
    										    <div class="thumb pt-15 pb-10" style="background:#7986cb; text-align:center; border-radius:5px;">
    											<i class="fa fa-thumbs-up" aria-hidden="true" style="color:#fff; font-size:40px;"></i>
    										</div>									<div class="p-0 pt-0 pb-10" style="text-align:center;">
    										    <h2 class="mt-0 mb-0 text-white text-center">1000+</h2>
    											<p style="margin-bottom:0; font-size:14px; text-align:center; color:#fff;">Projects Delivered</p>       		    </div>	
    									</div>
    								</div>
    							</div>
    							<div class="col-md-4 col-sm-6 col-xs-6 pl-5 pr-5" data-nav="false">
    								<div class="item" style="background:#7986cb; border-radius:5px;">
    									<div class="mb-10" style="">
    										    <div class="thumb pt-15 pb-10" style="background:#7986cb; text-align:center; border-radius:5px;">
    											<i class="fa fa-gear" aria-hidden="true" style="color:#fff; font-size:40px;"></i>
    										</div>									<div class="p-0 pt-0 pb-10" style="text-align:center;">
    										    <h2 class="mt-0 mb-0 text-white text-center">50+</h2>
    											<p style="margin-bottom:0; font-size:14px; text-align:center; color:#fff;">Service & Features</p>       		    </div>	
    									</div>
    								</div>
    							</div>
    							<div class="col-md-4 col-sm-6 col-xs-6 pl-5 pr-5" data-nav="false">
    								<div class="item" style="background:#7986cb; border-radius:5px;">
    									<div class="mb-10" style="">
    										    <div class="thumb pt-15 pb-10" style="background:#7986cb; text-align:center; border-radius:5px;">
    											<i class="fa fa-users" aria-hidden="true" style="color:#fff; font-size:40px;"></i>
    										</div>									<div class="p-0 pt-0 pb-10" style="text-align:center;">
    										    <h2 class="mt-0 mb-0 text-white text-center">3000+</h2>
    											<p style="margin-bottom:0; font-size:14px; text-align:center; color:#fff;">Customers</p>       		    </div>	
    									</div>
    								</div>
    							</div>
    							<div class="col-md-4 col-sm-6 col-xs-6 pl-5 pr-5" data-nav="false">
    								<div class="item" style="background:#7986cb; border-radius:5px;">
    									<div class="mb-10" style="">
    										    <div class="thumb pt-15 pb-10" style="background:#7986cb; text-align:center; border-radius:5px;">
    											<i class="fa fa-trophy" aria-hidden="true" style="color:#fff; font-size:40px;"></i>
    										</div>									<div class="p-0 pt-0 pb-10" style="text-align:center;">
    										    <h2 class="mt-0 mb-0 text-white text-center">100%</h2>
    											<p style="margin-bottom:0; font-size:14px; text-align:center; color:#fff;">Satisfaction</p>       		    </div>	
    									</div>
    								</div>
    							</div>
    						</div>
    					</div>
					</div>
				</div>
			</section>
			<!-- page template area end -->
  
<?php require_once("footer.php");?>