@extends('layouts.app')

@section('content') 

<!-- Sidebar Cart Item -->
<div class="xs-sidebar-group info-group">
		<div class="xs-overlay xs-bg-black"></div>
		<div class="xs-sidebar-widget">
			<div class="sidebar-widget-container">
				<div class="widget-heading">
					<a href="#" class="close-side-widget">
						X
					</a>
				</div>
				<div class="sidebar-textwidget">
					
					<!-- Sidebar Info Content -->
					<div class="sidebar-info-contents">
						<div class="content-inner">
							<div class="logo">
								<a href="index.html"><img src="images/logo-2.png" alt="" /></a>
							</div>
							<div class="content-box">
								<h2>About Us</h2>
								<p class="text">The argument in favor of using filler text goes something like this: If you use real content in the Consulting Process, anytime you reach a review point you’ll end up reviewing and negotiating the content itself and not the design.</p>
								<a href="#" class="theme-btn btn-style-two"><span class="txt">Consultation</span></a>
							</div>
							<div class="contact-info">
								<h2>Contact Info</h2>
								<ul class="list-style-two">
									<li><span class="icon fa fa-location-arrow"></span>Chicago 12, Melborne City, USA</li>
									<li><span class="icon fa fa-phone"></span>(111) 111-111-1111</li>
									<li><span class="icon fa fa-envelope"></span>lebari@gmail.com</li>
									<li><span class="icon fa fa-clock-o"></span>Week Days: 09.00 to 18.00 Sunday: Closed</li>
								</ul>
							</div>
							<!-- Social Box -->
							<ul class="social-box">
								<li class="facebook"><a href="#" class="fa fa-facebook-f"></a></li>
								<li class="twitter"><a href="#" class="fa fa-twitter"></a></li>
								<li class="linkedin"><a href="#" class="fa fa-linkedin"></a></li>
								<li class="instagram"><a href="#" class="fa fa-instagram"></a></li>
								<li class="youtube"><a href="#" class="fa fa-youtube"></a></li>
							</ul>
						</div>
					</div>
					
				</div>
			</div>
		</div>
	</div>
	<!-- END sidebar widget item -->
	
	<!-- Banner Section Three -->
    <section class="banner-section-three style-two">
		<div class="pattern-layer-two" style="background-image: url(images/background/pattern-21.png)"></div>
		<div class="auto-container">
			<!-- Page Breadcrumb -->
			<ul class="page-breadcrumb">
				<li><a href="index.html">Home</a></li>
				<li>Courses v1</li>
			</ul>
            <div class="row clearfix">
				
				<!-- Content Column -->
				<div class="content-column col-lg-8 col-md-12 col-sm-12">
					<div class="inner-column">
						<div class="pattern-layer-one" style="background-image: url(images/main-slider/pattern-1.png)"></div>
						<div class="icon-layer" style="background-image: url(images/icons/icon-2.png)"></div>
						<div class="icon-layer-two" style="background-image: url(images/icons/icon-5.png)"></div>
						<h2> Explore <br> Featured Courses</h2>
					</div>
				</div>
				
				<!-- Images Column -->
				<div class="image-column col-lg-4 col-md-12 col-sm-12">
					<div class="inner-column">
						<div class="icon-layer-three" style="background-image: url(images/icons/icon-3.png)"></div>
						<div class="icon-layer-four" style="background-image: url(images/icons/icon-2.png)"></div>
						<div class="icon-layer-five" style="background-image: url(images/icons/icon-4.png)"></div>
						<div class="image">
							<img src="images/resource/page-title-3.jpg" alt="" />
						</div>
						<div class="image-two">
							<img src="images/resource/page-title-4.jpg" alt="" />
						</div>
					</div>
				</div>
				
			</div>
		</div>
	</section>
	<!-- End Banner Section Three -->
	
	<!-- Courses Page Section -->
	<section class="courses-page-section">
		<div class="pattern-layer" style="background-image:url(images/background/pattern-22.png)"></div>
		<div class="pattern-layer-two" style="background-image:url(images/background/pattern-6.png)"></div>
		<div class="pattern-layer-three" style="background-image:url(images/background/pattern-19.png)"></div>
		<div class="pattern-layer-four" style="background-image:url(images/background/pattern-23.png)"></div>
		<div class="auto-container">
			<!-- Filter Box -->
			<div class="filter-box">
				<div class="box-inner">
					<div class="clearfix">
						
						<div class="pull-left clearfix">
							<div class="dropdown-outer">
								<div class="filter-dropdown">
									<span class="icon flaticon-filter-filled-tool-symbol"></span> Filter <span class="arrow fa fa-angle-down"></span>
									
									<!-- Filter Categories -->
									<div class="filter-categories">
										<div class="clearfix">
											
											<!-- Column -->
											<div class="column">
												<h6>Categories</h6>
												
												<!-- Form Group -->
												<div class="form-group">
													<div class="select-box">
														<input type="checkbox" name="payment-group" id="radio-one">
														<label for="radio-one">
															<span class="default-check"></span>
															<span class="check-icon fa fa-check"></span>
															Digital Marketing
														</label>
													</div>
												</div>
												
												<!-- Form Group -->
												<div class="form-group">
													<div class="select-box">
														<input type="checkbox" name="payment-group" id="radio-two">
														<label for="radio-two">
															<span class="default-check"></span>
															<span class="check-icon fa fa-check"></span>
															Business
														</label>
													</div>
												</div>
												
												<!-- Form Group -->
												<div class="form-group">
													<div class="select-box">
														<input type="checkbox" name="payment-group" id="radio-three">
														<label for="radio-three">
															<span class="default-check"></span>
															<span class="check-icon fa fa-check"></span>
															Social Media Marketing
														</label>
													</div>
												</div>
												
												<!-- Form Group -->
												<div class="form-group">
													<div class="select-box">
														<input type="checkbox" name="payment-group" id="radio-four">
														<label for="radio-four">
															<span class="default-check"></span>
															<span class="check-icon fa fa-check"></span>
															Design
														</label>
													</div>
												</div>
												
												<!-- Form Group -->
												<div class="form-group">
													<div class="select-box">
														<input type="checkbox" name="payment-group" id="radio-five">
														<label for="radio-five">
															<span class="default-check"></span>
															<span class="check-icon fa fa-check"></span>
															User experience
														</label>
													</div>
												</div>
												
												<!-- Form Group -->
												<div class="form-group">
													<div class="select-box">
														<input type="checkbox" name="payment-group" id="radio-six">
														<label for="radio-six">
															<span class="default-check"></span>
															<span class="check-icon fa fa-check"></span>
															User interface
														</label>
													</div>
												</div>
												
												<!-- Form Group -->
												<div class="form-group">
													<div class="select-box">
														<input type="checkbox" name="payment-group" id="radio-seven">
														<label for="radio-seven">
															<span class="default-check"></span>
															<span class="check-icon fa fa-check"></span>
															IT & Software Courses
														</label>
													</div>
												</div>
												
											</div>
											
											<!-- Column -->
											<div class="column">
												<h6>Instructor</h6>
												
												<!-- Form Group -->
												<div class="form-group">
													<div class="select-box">
														<input type="checkbox" name="payment-group" id="radio-eight">
														<label for="radio-eight">
															<span class="default-check"></span>
															<span class="check-icon fa fa-check"></span>
															Mahfuz Riad (15)
														</label>
													</div>
												</div>
												
												<!-- Form Group -->
												<div class="form-group">
													<div class="select-box">
														<input type="checkbox" name="payment-group" id="radio-nine">
														<label for="radio-nine">
															<span class="default-check"></span>
															<span class="check-icon fa fa-check"></span>
															Siful islam
														</label>
													</div>
												</div>
												
												<!-- Form Group -->
												<div class="form-group">
													<div class="select-box">
														<input type="checkbox" name="payment-group" id="radio-ten">
														<label for="radio-ten">
															<span class="default-check"></span>
															<span class="check-icon fa fa-check"></span>
															Foqrul Munna (12)
														</label>
													</div>
												</div>
												
												<!-- Form Group -->
												<div class="form-group">
													<div class="select-box">
														<input type="checkbox" name="payment-group" id="radio-eleven">
														<label for="radio-eleven">
															<span class="default-check"></span>
															<span class="check-icon fa fa-check"></span>
															Mahadi Shopnil (16)
														</label>
													</div>
												</div>
												
												<!-- Form Group -->
												<div class="form-group">
													<div class="select-box">
														<input type="checkbox" name="payment-group" id="radio-twelve">
														<label for="radio-twelve">
															<span class="default-check"></span>
															<span class="check-icon fa fa-check"></span>
															Instructor (8)
														</label>
													</div>
												</div>
												
												<!-- Form Group -->
												<div class="form-group">
													<div class="select-box">
														<input type="checkbox" name="payment-group" id="radio-thirteen">
														<label for="radio-thirteen">
															<span class="default-check"></span>
															<span class="check-icon fa fa-check"></span>
															Alex Saim (04)
														</label>
													</div>
												</div>
												
											</div>
											
											<!-- Column -->
											<div class="column">
												<h6>Sort by</h6>
												
												<!-- Form Group -->
												<div class="form-group">
													<div class="select-box">
														<input type="checkbox" name="payment-group" id="radio-fourteen">
														<label for="radio-fourteen">
															<span class="default-check"></span>
															<span class="check-icon fa fa-check"></span>
															New Courses
														</label>
													</div>
												</div>
												
												<!-- Form Group -->
												<div class="form-group">
													<div class="select-box">
														<input type="checkbox" name="payment-group" id="radio-fifteen">
														<label for="radio-fifteen">
															<span class="default-check"></span>
															<span class="check-icon fa fa-check"></span>
															Old Courses 
														</label>
													</div>
												</div>
												
												<!-- Form Group -->
												<div class="form-group">
													<div class="select-box">
														<input type="checkbox" name="payment-group" id="radio-sixteen">
														<label for="radio-sixteen">
															<span class="default-check"></span>
															<span class="check-icon fa fa-check"></span>
															Course 2019
														</label>
													</div>
												</div>
												
												<!-- Form Group -->
												<div class="form-group">
													<div class="select-box">
														<input type="checkbox" name="payment-group" id="radio-seventeen">
														<label for="radio-seventeen">
															<span class="default-check"></span>
															<span class="check-icon fa fa-check"></span>
															Course 2018
														</label>
													</div>
												</div>
												
												<!-- Form Group -->
												<div class="form-group">
													<div class="select-box">
														<input type="checkbox" name="payment-group" id="radio-eighteen">
														<label for="radio-eighteen">
															<span class="default-check"></span>
															<span class="check-icon fa fa-check"></span>
															Course 2017
														</label>
													</div>
												</div>
												
											</div>
											
											<!-- Column -->
											<div class="column">
												<h6>Language</h6>
												<!-- Form Group -->
												<div class="form-group">
													<div class="select-box">
														<input type="checkbox" name="payment-group" id="radio-nineteen">
														<label for="radio-nineteen">
															<span class="default-check"></span>
															<span class="check-icon fa fa-check"></span>
															English (10)
														</label>
													</div>
												</div>
												
												<!-- Form Group -->
												<div class="form-group">
													<div class="select-box">
														<input type="checkbox" name="payment-group" id="radio-twenty">
														<label for="radio-twenty">
															<span class="default-check"></span>
															<span class="check-icon fa fa-check"></span>
															French (4)
														</label>
													</div>
												</div>
												
												<!-- Form Group -->
												<div class="form-group">
													<div class="select-box">
														<input type="checkbox" name="payment-group" id="radio-twentyone">
														<label for="radio-twentyone">
															<span class="default-check"></span>
															<span class="check-icon fa fa-check"></span>
															German (5)
														</label>
													</div>
												</div>
												
												<!-- Form Group -->
												<div class="form-group">
													<div class="select-box">
														<input type="checkbox" name="payment-group" id="radio-twentytwo">
														<label for="radio-twentytwo">
															<span class="default-check"></span>
															<span class="check-icon fa fa-check"></span>
															Japanese (4)
														</label>
													</div>
												</div>
												
												<!-- Form Group -->
												<div class="form-group">
													<div class="select-box">
														<input type="checkbox" name="payment-group" id="radio-twentythree">
														<label for="radio-twentythree">
															<span class="default-check"></span>
															<span class="check-icon fa fa-check"></span>
															Russian (1)
														</label>
													</div>
												</div>
												
												<!-- Form Group -->
												<div class="form-group">
													<div class="select-box">
														<input type="checkbox" name="payment-group" id="radio-twentyfour">
														<label for="radio-twentyfour">
															<span class="default-check"></span>
															<span class="check-icon fa fa-check"></span>
															Spanish (6)
														</label>
													</div>
												</div>
												
											</div>
											
											<!-- Column -->
											<div class="column">
												<h6>Price</h6>
												<!-- Form Group -->
												<div class="form-group">
													<div class="select-box">
														<input type="checkbox" name="payment-group" id="radio-twentyfive">
														<label for="radio-twentyfive">
															<span class="default-check"></span>
															<span class="check-icon fa fa-check"></span>
															All (90)
														</label>
													</div>
												</div>
												
												<!-- Form Group -->
												<div class="form-group">
													<div class="select-box">
														<input type="checkbox" name="payment-group" id="radio-twentysix">
														<label for="radio-twentysix">
															<span class="default-check"></span>
															<span class="check-icon fa fa-check"></span>
															Paid (70)
														</label>
													</div>
												</div>
												
												<!-- Form Group -->
												<div class="form-group">
													<div class="select-box">
														<input type="checkbox" name="payment-group" id="radio-twentyseven">
														<label for="radio-twentyseven">
															<span class="default-check"></span>
															<span class="check-icon fa fa-check"></span>
															Free (12)
														</label>
													</div>
												</div>
												<br>
												<h6>Level</h6>
												<!-- Form Group -->
												<div class="form-group">
													<div class="select-box">
														<input type="checkbox" name="payment-group" id="radio-twentyeight">
														<label for="radio-twentyeight">
															<span class="default-check"></span>
															<span class="check-icon fa fa-check"></span>
															Beginner (21)
														</label>
													</div>
												</div>
												
												<!-- Form Group -->
												<div class="form-group">
													<div class="select-box">
														<input type="checkbox" name="payment-group" id="radio-twentynine">
														<label for="radio-twentynine">
															<span class="default-check"></span>
															<span class="check-icon fa fa-check"></span>
															Intermediate (10)
														</label>
													</div>
												</div>
												
												<!-- Form Group -->
												<div class="form-group">
													<div class="select-box">
														<input type="checkbox" name="payment-group" id="radio-thirty">
														<label for="radio-thirty">
															<span class="default-check"></span>
															<span class="check-icon fa fa-check"></span>
															Expert (4)
														</label>
													</div>
												</div>
												
											</div>
										</div>
									</div>
									
								</div>				
							</div>
							<ul class="view-list">
								<li class="active"><a href="course.html"><span class="icon flaticon-grid"></span></a></li>
								<li><a href="course-4.html"><span class="icon flaticon-list-1"></span></a></li>
							</ul>
						</div>
						<div class="pull-right">
							<div class="total-course">We found <span>39</span> courses available for you</div>
						</div>
						
					</div>
				</div>
				
			</div>
			
			<div class="row clearfix">
				
				@foreach($courseData as $course)

				<div class="course-block col-lg-4 col-md-6 col-sm-12">
					<div class="inner-box wow fadeInLeft" data-wow-delay="0ms" data-wow-duration="1500ms">
						<div class="image">
							<a href="course.{{$course->slug}}"><img src="{{$course->images}}" alt="" /></a>
						</div>
						<div class="lower-content">
							<h4><a href="course.{{$course->slug}}">{{$course->category}}</a></h4>
							<div class="uni-name">Let'S Learn Together</div>
							<div class="rating">
								<span class="fa fa-star"></span>
								<span class="fa fa-star"></span>
								<span class="fa fa-star"></span>
								<span class="fa fa-star"></span>
								<span class="fa fa-star-o"></span>
								<strong>4.9</strong>
								<i>(70 Review)</i>
							</div>
							<div class="price">
							<!--  
							{{$finalPrice}}
								<span>
									@if($course->disscount != 0)
										{{$course->price}}
									@endif
								</span> -->
							</div>
							<div class="clearfix">
								<div class="pull-left">
									<div class="hovers">11.5 total hours . All Levels  </div>
								</div>
								<div class="pull-right">
									<a href="course.{{$course->slug}}" class="enroll-now">ENROL NOW</a>
								</div>
							</div>
						</div>
					</div>
				</div>
				@endforeach
				
				
				
			</div>
			
			<!-- Post Share Options -->
			<div class="styled-pagination text-center">
				<ul class="clearfix">
					<li><a href="#">01</a></li>
					<li><a href="#">02</a></li>
					<li class="active"><a href="#">03</a></li>
					<li><a href="#">04</a></li>
					<li><a href="#">05</a></li>
					<li class="next"><a href="#"><span class="fa fa-angle-double-right"></span> </a></li>
				</ul>
			</div>
			
		</div>
	</section>
	<!-- End Courses Page Section -->
	

@endsection