@extends('layouts.welcome')

@section('content')
  {{-- @include('inc.slider') --}}
<section class="py-8 text-center">
    <img src="{{secure_asset('plugins/rs-plugin/demos/assets/images/slide1.svg')}}" width='600'>
</section>
<!--Section-->
<section class="sptb bg-white">
    <div class="container">
        <div class="section-title d-md-flex">
            <div>
                <h2>Education Systems</h2>
                <p class="fs-18 lead"></p>
            </div>
            {{-- <div class="ms-auto">
                <a class="btn btn-light mt-3" href="{{url('/home')}}"><i class="fe fe-arrow-right"></i> Explore Courses</a>
            </div> --}}
        </div>
        <div class="item-all-cat education-categories">
            <div class="row">
                @foreach ($education_systems as $item)
                <div class="col-lg-3 col-md-4 col-sm-6">
                    <div class="item-all-card text-dark item-hover-card p-6">
                        <a href="{{route('homePage.educationSuystemCourses',$item->esid)}}" class="absolute-link" target="_blank"></a>
                        <div class="iteam-all-icon">
                            <img src="{{$item->getImage($item->esimage)}}" class="thumbnail round"  width="100" alt="{{$item->esname}}">
                        </div>
                        <div class="item-all-text mt-3">
                            <h5 class="mb-0">{{$item->esname}}</h5>
                            <p class="mt-3"> {{ Str::limit($item->esdescription, 100, '.....')}}</p>
                            <a class="btn-link" href="{{route('homePage.educationSuystemCourses',$item->esid)}}" target="_blank"><i class="fe fe-chevron-right"></i> View More</a>
                        </div>
                    </div>
                </div>
                @endforeach

            </div>
        </div>
    </div>
</section>
<!--/Section-->

<section class="sptb py-9">
    <div class="container">
        <div class="row">
            <div class="col-md-12 col-lg-4">
                <img src="{{secure_asset('images/course.png')}}" width="450" alt="GAS-Courses" class="shadow-lg absolute-student thumbnail">
            </div>
            <div class="col-md-12 col-lg-8 ps-6">
                <div class="section-title ">
                    <h2>Current offered Courses</h2>
                    <p class="fs-18 lead">Eshra7ly provides many online courses in different fields, just pick what you like, and start learning now. </p>
                </div>
                <div class="text-wrap">
                    <div class="btn-list">
                        <a href="{{route('home.offeredCourses')}}" style=" color: white;background-color: #8c2828; border-color: #8c2828;" class="btn btn-lg mb-5 mb-lg-0"> View All Course</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!--Section-->
{{-- @if ($teachers->count() > 0)
<section class="sptb">
    <div class="container">
        <div class="section-title">
            <h2>Our Teachers</h2>
        </div>
        <div class="row">
            @foreach ($teachers as $teacher)
            <div class="col-sm-12 col-lg-4 col-md-4">
                <a href="{{ route('homePage.teacher_profile',$teacher->user_id) }}" class="overflow-hidden card">
                    <img src="{{$teacher->getImage($teacher->image)}}" alt="img" class="cover-image">
                    <div class="card-body d-flex">
                        <div>
                            <h4 class="font-weight-semibold text-primary fs-16">{{ $teacher->first_name.' '.$teacher->middle_name.' '.$teacher->last_name }}</h4>
                        </div>
                        <div class="ms-auto">
                            <div class="viewmore-btn-icon viewmore-btn-icon-lg mx-1" href="{{ route('homePage.teacher_profile',$teacher->user_id) }}"><i class="fa fa-chevron-right"></i></div>
                        </div>
                    </div>
                </a>
            </div>
            @endforeach
        </div>
        <a href="{{ route('homePage.allTeachers') }}" class="btn btn-primary mt-7 w-20 mx-auto d-block btn-lg">Show all teachers</a>
    </div>
</section>
@endif --}}
<!--/Section-->

<!--Section-->
<section class="about-1 pt-9 pb-9">
    <div class="content-text mb-0">
        <div class="container">
            <div class="row text-center">
                <div class="col-lg-3 col-md-6">
                    <div class="counter-status md-mb-0">
                        <div class="counter-icon bg-primary-light border-0 brround">
                            <i class="fa fa-leanpub pt-3 text-primary"></i>
                        </div>
                        <h5>Total Learners</h5>
                        <h2 class="counter mb-0">10,000</h2>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="counter-status status-1 md-mb-0">
                        <div class="counter-icon bg-primary-light border-0 brround">
                            <i class="fa fa-paste pt-4 text-primary"></i>
                        </div>
                        <h5>Total Courses</h5>
                        <h2 class="counter mb-0">80</h2>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="counter-status status md-mb-0">
                        <div class="counter-icon bg-primary-light border-0 brround">
                            <i class="fa fa-id-card-o pt-4 text-primary"></i>
                        </div>
                        <h5>Total Countries</h5>
                        <h2 class="counter mb-0">20</h2>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="counter-status status">
                        <div class="counter-icon bg-primary-light border-0 brround">
                            <i class="fa fa-users pt-4 text-primary"></i>
                        </div>
                        <h5>Total Teachers</h5>
                        <h2 class="counter mb-0">48</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!--/Section-->

@endsection