<?php
	include "../backend/connection.php";
	$configure = new DefaultDatabase();
	$conf = $configure->connect();

	//fetch documents
	$files = mysqli_query($conf,"SELECT * FROM material ORDER BY id DESC LIMIT 3");

	$schools = mysqli_query($conf,"SELECT COUNT(*) as total FROM schools");
    $school = mysqli_fetch_assoc($schools);

    //fetch participant details
    $pupils = mysqli_query($conf,"SELECT COUNT(*) as total FROM participants");
    $pupil = mysqli_fetch_assoc($pupils);

    //fetch districts details
    $admins = mysqli_query($conf,"SELECT COUNT(*) as total FROM districts");
    $admin = mysqli_fetch_assoc($admins);

	//fetch material details
	$materials = mysqli_query($conf,"SELECT COUNT(*) as total FROM material");
	$material = mysqli_fetch_assoc($materials);

	//fetch main blog
	$blogs = mysqli_query($conf,"SELECT * FROM events ORDER BY id DESC LIMIT 1");
	$blog = mysqli_fetch_assoc($blogs);

	//fetch side blogs limited to 4 latest
	$news = mysqli_query($conf,"SELECT * FROM events ORDER BY id DESC LIMIT 4");

?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>JETS MUCHINGA</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Unicat project">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="styles/bootstrap4/bootstrap.min.css">
<link href="plugins/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="plugins/OwlCarousel2-2.2.1/owl.carousel.css">
<link rel="stylesheet" type="text/css" href="plugins/OwlCarousel2-2.2.1/owl.theme.default.css">
<link rel="stylesheet" type="text/css" href="plugins/OwlCarousel2-2.2.1/animate.css">
<link rel="stylesheet" type="text/css" href="styles/main_styles.css">
<link rel="stylesheet" type="text/css" href="styles/responsive.css">
<link rel="icon" href="../images/logo.png">
</head>
<body>

<div class="super_container">

	<!-- Header -->

	<header class="header">
			
		<!-- Top Bar -->
		<div class="top_bar">
			<div class="top_bar_container">
				<div class="container">
					<div class="row">
						<div class="col">
							<div class="top_bar_content d-flex flex-row align-items-center justify-content-start">
								<ul class="top_bar_contact_list">
									<li>
										<i class="fa fa-envelope-o" aria-hidden="true"></i>
										<div>info@jetsmuchinga.com</div>
									</li>
									<li>
										<i class="fa fa-phone" aria-hidden="true"></i>
										<div>260-1234-88888</div>
									</li>
								</ul>
								<div class="top_bar_login ml-auto">
									<div class="login_button"><a href="../school-admin/index.php">Login</a></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>				
		</div>

		<!-- Header Content -->
		<div class="header_container">
			<div class="container">
				<div class="row">
					<div class="col">
						<div class="header_content d-flex flex-row align-items-center justify-content-start">
							<div class="logo_container">
								<a href="#">
									<div class="logo_text"><img src="./images/logo.png" width="70" alt="logo">MUCHINGA REGION JE<span>TS</span></div>
								</a>
							</div>
							<nav class="main_nav_contaner ml-auto">
								<ul class="main_nav">
									<li class="active"><a href="#">Home</a></li>
									<li><a href="courses.php">Material</a></li>
									<li><a href="blog.php">News</a></li>
									<li><a href="results.php">Results</a></li>
									<li><a href="library.php">Library</a></li>
								</ul>

								<!-- Hamburger -->

								<div class="hamburger menu_mm">
									<i class="fa fa-bars menu_mm" aria-hidden="true"></i>
								</div>
							</nav>

						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- Header Search Panel -->
		<div class="header_search_container">
			<div class="container">
				<div class="row">
					<div class="col">
						<div class="header_search_content d-flex flex-row align-items-center justify-content-end">
							<form action="#" class="header_search_form">
								<input type="search" class="search_input" placeholder="Search" required="required">
								<button class="header_search_button d-flex flex-column align-items-center justify-content-center">
									<i class="fa fa-search" aria-hidden="true"></i>
								</button>
							</form>
						</div>
					</div>
				</div>
			</div>			
		</div>			
	</header>

	<!-- Menu -->

	<div class="menu d-flex flex-column align-items-end justify-content-start text-right menu_mm trans_400">
		<div class="menu_close_container"><div class="menu_close"><div></div><div></div></div></div>
		<div class="search">
			<form action="#" class="header_search_form menu_mm">
				<input type="search" class="search_input menu_mm" placeholder="Search" required="required">
				<button class="header_search_button d-flex flex-column align-items-center justify-content-center menu_mm">
					<i class="fa fa-search menu_mm" aria-hidden="true"></i>
				</button>
			</form>
		</div>
		<nav class="menu_nav">
			<ul class="menu_mm">
				<li class="menu_mm"><a href="#">Home</a></li>
				<li><a href="courses.html">Material</a></li>
				<li><a href="blog.html">News</a></li>
				<li><a href="results.html">Results</a></li>
				<li><a href="library.php">Library</a></li>
				
			</ul>
		</nav>
	</div>
	
	<!-- Home -->

	<div class="home">
		<div class="home_slider_container">
			
			<!-- Home Slider -->
			<div class="owl-carousel owl-theme home_slider">
				
				<!-- Home Slider Item -->
				<div class="owl-item">
					<div class="home_slider_background" style="background-image:url(images/home_slider_1.jpg)"></div>
					<div class="home_slider_content">
						<div class="container">
							<div class="row">
								<div class="col text-center">
									<div class="home_slider_title">Muchinga JETS Platform</div>
									<div class="home_slider_subtitle">Future Of STEM Education</div>
									<div class="home_slider_form_container">
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- Home Slider Item -->
				<div class="owl-item">
					<div class="home_slider_background" style="background-image:url(images/home_slider_2.jpg)"></div>
					<div class="home_slider_content">
						<div class="container">
							<div class="row">
								<div class="col text-center">
									<div class="home_slider_title">Muchinga JETS Platform</div>
									<div class="home_slider_subtitle">Future Of STEM Education</div>
									<div class="home_slider_form_container">
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- Home Slider Nav -->

		<div class="home_slider_nav home_slider_prev"><i class="fa fa-angle-left" aria-hidden="true"></i></div>
		<div class="home_slider_nav home_slider_next"><i class="fa fa-angle-right" aria-hidden="true"></i></div>
	</div>

	<!-- Features -->

	<div class="features">
		<div class="container">
			<div class="row">
				<div class="col">
					<div class="section_title_container text-center">
						<h2 class="section_title">Welcome To Muchinga Jets Platform</h2>
						<div class="section_subtitle"><p>A one stop site for Muchinga Jets resources, updates as well as a hub for great minds to contribute, interact and enhance the stature of Jets Muchinga</p></div>
					</div>
				</div>
			</div>
			<div class="row features_row">
				
				<!-- Features Item -->
				<div class="col-lg-3 feature_col">
					<div class="feature text-center trans_400">
						<div class="feature_icon"><img src="images/icon_1.png" alt=""></div>
						<h3 class="feature_title">The Experts</h3>
						<div class="feature_text"><p>Industrial Experts Available for Assistance</p></div>
					</div>
				</div>

				<!-- Features Item -->
				<div class="col-lg-3 feature_col">
					<div class="feature text-center trans_400">
						<div class="feature_icon"><img src="images/icon_2.png" alt=""></div>
						<h3 class="feature_title">Book & Library</h3>
						<div class="feature_text"><p>Explore our vast library for JETS study Materials</p></div>
					</div>
				</div>

				<!-- Features Item -->
				<div class="col-lg-3 feature_col">
					<div class="feature text-center trans_400">
						<div class="feature_icon"><img src="images/icon_3.png" alt=""></div>
						<h3 class="feature_title">Best Teachers</h3>
						<div class="feature_text"><p>Learn from qualifies and experienced Teachers</p></div>
					</div>
				</div>

				<!-- Features Item -->
				<div class="col-lg-3 feature_col">
					<div class="feature text-center trans_400">
						<div class="feature_icon"><img src="images/icon_4.png" alt=""></div>
						<h3 class="feature_title">Award & Reward</h3>
						<div class="feature_text"><p>Award winning participants from different districts</p></div>
					</div>
				</div>

			</div>
		</div>
	</div>

	<!-- Popular Courses -->

	<div class="courses">
		<div class="section_background parallax-window" data-parallax="scroll" data-image-src="images/courses_background.jpg" data-speed="0.8"></div>
		<div class="container">
			<div class="row">
				<div class="col">
					<div class="section_title_container text-center">
						<h2 class="section_title">Latest Documents</h2>
						<div class="section_subtitle"><p>Get acquinted with our latest Jets Study Material from the district and provincial experts</p></div>
					</div>
				</div>
			</div>
			<div class="row courses_row">
				
				<!-- Course -->
				 <?php
					while($courses = mysqli_fetch_array($files))
					{
				 ?>
					<div class="col-lg-4 course_col">
						<div class="course">
							<div class="course_image"><img src="images/pdf.jpg" alt=""></div>
							<div class="course_body">
								<h3 class="course_title"><a href="<?php echo $courses["material_location"] ?>"><?php echo $courses["material_name"] ?></a></h3>
								<div class="course_teacher">By: <?php echo $courses["posted_by"] ?></div>
								<div class="course_text">
									<p><?php echo $courses["material_category"] ?></p>
								</div>
							</div>
							<div class="course_footer">
								<div class="course_footer_content d-flex flex-row align-items-center justify-content-start">
									<div class="course_info">
										<i class="fa fa-graduation-cap" aria-hidden="true"></i>
										<span>Students</span>
									</div>
									<div class="course_info">
										<i class="fa fa-star" aria-hidden="true"></i>
										<span>5 Ratings</span>
									</div>
									<div class="course_price ml-auto">Free</div>
								</div>
							</div>
						</div>
					</div>
				<?php
					}
				?>
			</div>
			<div class="row">
				<div class="col">
					<div class="courses_button trans_200"><a href="courses.php">view all Materials</a></div>
				</div>
			</div>
		</div>
	</div>

	<!-- Counter -->

	<div class="counter">
		<div class="counter_background" style="background-image:url(images/counter_background.jpg)"></div>
		<div class="container">
			<div class="row">
				<div class="col-lg-6">
					<div class="counter_content">
						<h2 class="counter_title">Register Now</h2>
						<div class="counter_text"><p>Become one of us today by registering your school with us whether public or private and beging the journey of promoting STEM through JETS</p></div>

						<!-- Milestones -->

						<div class="milestones d-flex flex-md-row flex-column align-items-center justify-content-between">
							
							<!-- Milestone -->
							<div class="milestone">
								<div class="milestone_counter" data-end-value="<?php echo $school["total"] ?>">0</div>
								<div class="milestone_text">Schools</div>
							</div>

							<!-- Milestone -->
							<div class="milestone">
								<div class="milestone_counter" data-end-value="<?php echo $admin["total"] ?>" data-sign-after="">0</div>
								<div class="milestone_text">Districts</div>
							</div>

							<!-- Milestone -->
							<div class="milestone">
								<div class="milestone_counter" data-end-value="<?php echo $material["total"] ?>" data-sign-after="+">0</div>
								<div class="milestone_text">Materials</div>
							</div>

							<!-- Milestone -->
							<div class="milestone">
								<div class="milestone_counter" data-end-value="<?php echo $pupil["total"] ?>">0</div>
								<div class="milestone_text">Participants</div>
							</div>

						</div>
					</div>

				</div>
			</div>

			<div class="counter_form">
				<div class="row fill_height">
					<div class="col fill_height">
						<form class="counter_form_content d-flex flex-column align-items-center justify-content-center" action="#">
							<div class="counter_form_title">Register School</div>
							<input type="text" class="counter_input" placeholder="School Name:" required="required">
							<input type="tel" class="counter_input" placeholder="Phone:" required="required">
							<select name="counter_select" id="counter_select" class="counter_input counter_options">
								<option>Choose District</option>
								<option>Chinsali</option>
								<option>Isoka</option>
								<option>Nakonde</option>
								<option>Mpika</option>
								<option>Lavushimanda</option>
								<option>Mafinga</option>
								<option>Shiwangándu</option>
								<option>Kanchibiya</option>
							</select>
							<textarea class="counter_input counter_text_input" placeholder="Brief description:" required="required"></textarea>
							<button type="submit" class="counter_form_button">submit now</button>
						</form>
					</div>
				</div>
			</div>

		</div>
	</div>

	<!-- Events -->

	<div class="events">
		<div class="container">
			<div class="row">
				<div class="col">
					<div class="section_title_container text-center">
						<h2 class="section_title">Why Join Jets Today?</h2>
						<div class="section_subtitle"><p>Here are some of the few reasons why you should register and join the Junior Engineers, Technicians and Scientists</p></div>
					</div>
				</div>
			</div>
			<div class="row events_row">

				<!-- Event -->
				<div class="col-lg-4 event_col">
					<div class="event event_left">
						<div class="event_image"><img src="images/chemistry.jpg" alt=""></div>
						<div class="event_body d-flex flex-row align-items-start justify-content-start">
							<div class="event_date">
								<div class="d-flex flex-column align-items-center justify-content-center trans_200">
									<div class="event_day trans_200">#1</div>
									
								</div>
							</div>
							<div class="event_content">
								<div class="event_title"><a href="#">Objective</a></div>
								<div class="event_info_container">
									<div class="event_text">
										<p style="text-align: justify;">promote creativity and innovation in Science, Mathematics, Engineering and Technology 
											among learners in schools, students in Colleges of Education and teachers;</p>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

				<!-- Event -->
				<div class="col-lg-4 event_col">
					<div class="event event_mid">
						<div class="event_image"><img src="images/agriculture.jpg" alt=""></div>
						<div class="event_body d-flex flex-row align-items-start justify-content-start">
							<div class="event_date">
								<div class="d-flex flex-column align-items-center justify-content-center trans_200">
									<div class="event_day trans_200">#2</div>
								</div>
							</div>
							<div class="event_content">
								<div class="event_title"><a href="#">Objective</a></div>
								<div class="event_info_container">
									<div class="event_text">
										<p style="text-align: justify;">help learners in Schools and Colleges of Education and out-of-school youth get a better 
											foundation to meet the increasing demands of engineering and technical services;</p>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

				<!-- Event -->
				<div class="col-lg-4 event_col">
					<div class="event event_right">
						<div class="event_image"><img src="images/physics.jpg" alt=""></div>
						<div class="event_body d-flex flex-row align-items-start justify-content-start">
							<div class="event_date">
								<div class="d-flex flex-column align-items-center justify-content-center trans_200">
									<div class="event_day trans_200">#3</div>
								</div>
							</div>
							<div class="event_content">
								<div class="event_title"><a href="#">Objective</a></div>
								<div class="event_info_container">
									<div class="event_text">
										<p style="text-align: justify;">give learners in Schools and Colleges of Education and youths an opportunity to learn and apply scientific 
											principles in the design and construction of technical innovations and preparation of technical reports;</p>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

			</div>
		</div>
	</div>

	<!-- Latest News -->

	<div class="news">
		<div class="container">
			<div class="row">
				<div class="col">
					<div class="section_title_container text-center">
						<h2 class="section_title">Latest News</h2>
						<div class="section_subtitle"><p>Catch our latest Muchinga Regionn Jets Activities and news to stay updated with our programs and events that are taking place in Muchinga province</p></div>
					</div>
				</div>
			</div>

		</div>
	</div>

	<!-- Newsletter -->

	<div class="newsletter">
		<div class="newsletter_background parallax-window" data-parallax="scroll" data-image-src="images/newsletter.jpg" data-speed="0.8"></div>
		<div class="container">
			<div class="row">
				<div class="col">
					<div class="newsletter_container d-flex flex-lg-row flex-column align-items-center justify-content-start">

						<!-- Newsletter Content -->
						<div class="newsletter_content text-lg-left text-center">
							<div class="newsletter_title">sign up for news and updates</div>
							<div class="newsletter_subtitle">Subcribe to lastest muchinga news updates</div>
						</div>

						<!-- Newsletter Form -->
						<div class="newsletter_form_container ml-lg-auto">
							<form action="#" id="newsletter_form" class="newsletter_form d-flex flex-row align-items-center justify-content-center">
								<input type="email" class="newsletter_input" placeholder="Your Email" required="required">
								<button type="submit" class="newsletter_button">subscribe</button>
							</form>
						</div>

					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- Footer -->

	<footer class="footer">
		<div class="footer_background" style="background-image:url(images/footer_background.png)"></div>
		<div class="container">
			<div class="row footer_row">
				<div class="col">
					<div class="footer_content">
						<div class="row">

							<div class="col-lg-3 footer_col">
					
								
							</div>

							<div class="col-lg-3 footer_col">
					
								
							</div>

							<div class="col-lg-3 footer_col">
					
								
							</div>

							<div class="col-lg-3 footer_col clearfix">
					
								
							</div>

						</div>
					</div>
				</div>
			</div>

			<div class="row copyright_row">
				<div class="col">
					<div class="copyright d-flex flex-lg-row flex-column align-items-center justify-content-start">
						<div class="cr_text">
Copyright &copy;<script>document.write(new Date().getFullYear());</script> All rights reserved | Developed by <a href="https://fb.me/therealsamuelmk" target="_blank">Microlasan Technologies</a>
</div>
						<div class="ml-lg-auto cr_links">
							<ul class="cr_list">
								<li><a href="#">Copyright notification</a></li>
								<li><a href="#">Terms of Use</a></li>
								<li><a href="#">Privacy Policy</a></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	</footer>
</div>

<script src="js/jquery-3.2.1.min.js"></script>
<script src="styles/bootstrap4/popper.js"></script>
<script src="styles/bootstrap4/bootstrap.min.js"></script>
<script src="plugins/greensock/TweenMax.min.js"></script>
<script src="plugins/greensock/TimelineMax.min.js"></script>
<script src="plugins/scrollmagic/ScrollMagic.min.js"></script>
<script src="plugins/greensock/animation.gsap.min.js"></script>
<script src="plugins/greensock/ScrollToPlugin.min.js"></script>
<script src="plugins/OwlCarousel2-2.2.1/owl.carousel.js"></script>
<script src="plugins/easing/easing.js"></script>
<script src="plugins/parallax-js-master/parallax.min.js"></script>
<script src="js/custom.js"></script>
</body>
</html>