@extends('layouts.landing')
@section('content')
 
	<!-- Breadcrumbs Start -->
	<div class="rs-breadcrumbs breadcrumbs-overlay">
			<div class="breadcrumbs-img">
					<img src="assets/images/lab-computer.jpg" alt="Breadcrumbs Image">
			</div>
			<div class="breadcrumbs-text white-color">
					<h1 class="page-title">{{ config('app.name') }} Courses</h1>
					<ul>
						<li>
							<a class="active" href="/">Home</a>
						</li>
						<li>Courses</li>
					</ul>
			</div>
	</div>
	<!-- Breadcrumbs End -->

	<!-- Categories Section Start -->
	<div id="rs-popular-courses" class="rs-popular-courses main-home event-bg pt-100 pb-100 md-pt-70 md-pb-70">
		<div class="container"> 
			<div class="row">  
				@php
					$categories = \App\Models\Category::where('status', 1)->orderBy('rank', 'ASC')->get();
				@endphp
				@forelse($categories as $category)
					
						@php
							$courses = $category->courses()->where('status', 1)->orderBy('rank', 'ASC')->get();;
						@endphp
						@forelse($courses as $course)
						<div class="col-lg-4 col-md-6 mb-30">
						   <div class="courses-item">
								<div class="courses-grid">
									<div class="img-part">
										<a href="/courses/{{ $course->id }}/{{ $course->slug }}"><img src="/{{ $course->image }}" alt=""></a>
									</div>
									<div class="content-part p-2">
										<div class="info-meta">
											<ul>                                                
												<li class="ratings">
													<i class="fa fa-star"></i>
													<i class="fa fa-star"></i>
													<i class="fa fa-star"></i>
													<i class="fa fa-star"></i>
													<i class="fa fa-star"></i> 
												</li>
											</ul>
										</div>
										@if($course->default_price)
											<div class="course-price">
												<span class="price">{{ config('app.currency') }} {{ number_format($course->default_price) }}</span>
											</div>
										@endif
										<h3 class="title"><a href="/courses/{{ $course->id }}/{{ $course->slug }}">{{ $course->name }}</a></h3>
									</div>
								</div>
						   </div>
						</div> 
						@empty 						
						@endforelse 
				@empty 						
				@endforelse  
			</div>
		</div>
	</div>
	<!-- Categories Section End --> 
 
 @endsection