@extends('layouts.front')

@section('content')

    <section id="slider-part" class="slider-active">
        {{-- {{ asset('uploads/settings/' . getSetting('slider_1_image')) }} --}}
        <div class="single-slider bg_cover pt-150"
            style="background-image: url( {{ asset('uploads/settings/' . getSetting('slider_1_image')) }})" data-overlay="4">
            <div class="container">
                <div class="row">
                    <div class="col-xl-7 col-lg-9">
                        <div class="slider-cont">
                            <h1 data-animation="bounceInLeft" data-delay="1s">{{ getSetting('slider_1_name') }}</h1>
                            <p data-animation="fadeInUp" data-delay="1.3s">{{ getSetting('slider_1_text') }}</p>
                            <ul>
                                <li><a data-animation="fadeInUp" data-delay="1.6s" class="main-btn" href="#">Read
                                        More</a></li>
                                <li><a data-animation="fadeInUp" data-delay="1.9s" class="main-btn main-btn-2"
                                        href="#">Get Started</a></li>
                            </ul>
                        </div>
                    </div>
                </div> <!-- row -->
            </div> <!-- container -->
        </div> <!-- single slider -->

        <div class="single-slider bg_cover pt-150"
            style="background-image: url( {{ asset('uploads/settings/' . getSetting('slider_2_image')) }})"
            data-overlay="4">
            <div class="container">
                <div class="row">
                    <div class="col-xl-7 col-lg-9">
                        <div class="slider-cont">
                            <h1 data-animation="bounceInLeft" data-delay="1s">{{ getSetting('slider_2_name') }}</h1>
                            <p data-animation="fadeInUp" data-delay="1.3s">{{ getSetting('slider_2_text') }}</p>
                            <ul>
                                <li><a data-animation="fadeInUp" data-delay="1.6s" class="main-btn" href="#">Read
                                        More</a></li>
                                <li><a data-animation="fadeInUp" data-delay="1.9s" class="main-btn main-btn-2"
                                        href="#">Get Started</a></li>
                            </ul>
                        </div>
                    </div>
                </div> <!-- row -->
            </div> <!-- container -->
        </div> <!-- single slider -->

        <div class="single-slider bg_cover pt-150"
            style="background-image: url({{ asset('uploads/settings/' . getSetting('slider_3_image')) }})" data-overlay="4">
            <div class="container">
                <div class="row">
                    <div class="col-xl-7 col-lg-9">
                        <div class="slider-cont">
                            <h1 data-animation="bounceInLeft" data-delay="1s">{{ getSetting('slider_3_name') }}</h1>
                            <p data-animation="fadeInUp" data-delay="1.3s">{{ getSetting('slider_3_text') }}</p>
                            <ul>
                                <li><a data-animation="fadeInUp" data-delay="1.6s" class="main-btn" href="#">Read
                                        More</a></li>
                                <li><a data-animation="fadeInUp" data-delay="1.9s" class="main-btn main-btn-2"
                                        href="#">Get Started</a></li>
                            </ul>
                        </div>
                    </div>
                </div> <!-- row -->
            </div> <!-- container -->
        </div> <!-- single slider -->
    </section>

    <!--====== SLIDER PART ENDS ======-->

    <!--====== CATEGORY PART START ======-->

    <section id="category-part">
        <div class="container">
            <div class="category pt-40 pb-80">
                <div class="row">
                    <div class="col-lg-4">
                        <div class="category-text pt-40">
                            <h2>Best platform to learn everything</h2>
                        </div>
                    </div>
                    <div class="col-lg-6 offset-lg-1 col-md-8 offset-md-2 col-sm-8 offset-sm-2 col-8 offset-2">
                        <div class="row category-slied mt-40">
                            @foreach ($tags as $tag)
                                <div class="col-lg-4">
                                    <a href="#">
                                        <span class="singel-category text-center color-1">
                                            <span class="icon">
                                                <img src="{{ asset('assets/front/images/all-icon/ctg-1.png') }}"
                                                    alt="Icon">
                                            </span>
                                            <span class="cont">
                                                <span>{{ $tag->title }}</span>
                                            </span>
                                        </span> <!-- singel category -->
                                    </a>
                                </div>
                            @endforeach
                        </div> <!-- category slied -->
                    </div>
                </div> <!-- row -->
            </div> <!-- category -->
        </div> <!-- container -->
    </section>

    <!--====== CATEGORY PART ENDS ======-->

    <!--====== ABOUT PART START ======-->

    <section id="about-part" class="pt-65">
        <div class="container">
            <div class="row">
                <div class="col-lg-5">
                    <div class="section-title mt-50">
                        <h5>About us</h5>
                        <h2>{{ getSetting('about_us_title') }} </h2>
                    </div> <!-- section title -->
                    <div class="about-cont">
                        <p>{!! getSetting('about_us_description') !!}</p>
                        <a href="{{ route('front.about') }}" class="main-btn mt-55">Learn More</a>
                    </div>
                </div> <!-- about cont -->
                <div class="col-lg-6 offset-lg-1">
                    <div class="about-event mt-50">
                        <div class="event-title">
                            <h3>Top Topics</h3>
                        </div> <!-- event title -->
                        <ul>
                            @foreach ($topics_top as $ttop)
                                <li>
                                    <div class="singel-event">
                                        <span><i class="fa fa-calendar"></i> {{ $ttop->created_at }}</span>
                                        <a href="{{ route('front.topic', $ttop->slug) }}">
                                            <h4>{{ $ttop->title }}</h4>
                                        </a>
                                        <span><i class="fa fa-money" @if($ttop->is_paid == 1) style="background:red;color:white" @endif></i>
                                            {{ $ttop->is_paid == 1 ? 'premium' : 'Free' }}</span>
                                        <span><i class="fa fa-user"></i> {{ $ttop->getstudents()->count() }}</span>
                                    </div>
                                </li>
                            @endforeach
                        </ul>
                    </div> <!-- about event -->
                </div>
            </div> <!-- row -->
        </div> <!-- container -->
        <div class="about-bg">
            <img src="images/about/bg-1.png" alt="About">
        </div>
    </section>

    <!--====== ABOUT PART ENDS ======-->

    <!--====== APPLY PART START ======-->

    <section id="apply-aprt" class="pb-120">
        <div class="container">
            <div class="apply">
                <div class="row no-gutters">
                    <div class="col-lg-6">
                        <div class="apply-cont apply-color-1">
                            <h3>Register as a Student</h3>
                            <p>{{ getSetting('register_student_text') }}</p>
                            <a href="{{ route('front.students') }}" class="main-btn">Apply Now</a>
                        </div> <!-- apply cont -->
                    </div>
                    <div class="col-lg-6">
                        <div class="apply-cont apply-color-2">
                            <h3>Register as a Teacher</h3>
                            <p>{{ getSetting('register_teacher_text') }}</p>
                            <a href="#" class="main-btn">Apply Now</a>
                        </div> <!-- apply cont -->
                    </div>
                </div>
            </div> <!-- row -->
        </div> <!-- container -->
    </section>

    <!--====== APPLY PART ENDS ======-->

    <!--====== COURSE PART START ======-->

    <section id="course-part" class="pt-115 pb-120 gray-bg">
        <div class="container">
            <div class="row">
                <div class="col-lg-6">
                    <div class="section-title pb-45">
                        <h5>Our course</h5>
                        <h2>Featured courses </h2>
                    </div> <!-- section title -->
                </div>
            </div> <!-- row -->
            <div class="row course-slied mt-30">
                @foreach ($topics as $ttt)
                    <div class="col-lg-4">
                        <div class="singel-course">
                            <div class="thum">
                                <div class="image">
                                    <img src="{{ asset('banners/' . $ttt->banner) }}" alt="Course"
                                        style="height:300px">
                                </div>
                                <div class="price">
                                    <span @if($ttt->is_paid == 1) style="background:red;color:white" @endif>{{ $ttt->is_paid == 1 ? 'premium' : 'Free' }}</span>
                                </div>
                            </div>
                            <div class="cont">
                                <ul>
                                    <li><i class="fa fa-star"></i></li>
                                    <li><i class="fa fa-star"></i></li>
                                    <li><i class="fa fa-star"></i></li>
                                    <li><i class="fa fa-star"></i></li>
                                    <li><i class="fa fa-star"></i></li>
                                </ul>
                                {{-- <span>(20 Reviws)</span> --}}
                                <a href="{{ route('front.topic', $ttt->slug) }}">
                                    <h4>{{ $ttt->title }}</h4>
                                </a>
                                <div class="course-teacher">
                                    {{-- <div class="thum">
                                    <a href="#"><img src="images/course/teacher/t-1.jpg" alt="teacher"></a>
                                </div> --}}
                                    {{-- <div class="name">
                                    <a href="#"><h6>Mark anthem</h6></a>
                                </div> --}}
                                    <div class="admin">
                                        <ul>
                                            <li><a href="#"><i
                                                        class="fa fa-user"></i><span>{{ $ttt->getstudents()->count() }}</span></a>
                                            </li>
                                            <li><a href="#"><i
                                                        class="fa fa-heart"></i><span>{{ $ttt->grade->title ?? (null . '/' . $ttt->subject->title ?? null) }}</span></a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div> <!-- singel course -->
                    </div>
                @endforeach

                @if ($topics->count() < 5)
                    @foreach ($topics as $ttt)
                        <div class="col-lg-4">
                            <div class="singel-course">
                                <div class="thum">
                                    <div class="image">
                                        <img src="{{ asset('banners/' . $ttt->banner) }}" alt="Course"
                                            style="height:300px">
                                    </div>
                                    <div class="price">
                                        <span @if($ttt->is_paid == 1) style="background:red;color:white" @endif>{{ $ttt->is_paid == 1 ? 'premium' : 'Free' }}</span>
                                    </div>
                                </div>
                                <div class="cont">
                                    <ul>
                                        <li><i class="fa fa-star"></i></li>
                                        <li><i class="fa fa-star"></i></li>
                                        <li><i class="fa fa-star"></i></li>
                                        <li><i class="fa fa-star"></i></li>
                                        <li><i class="fa fa-star"></i></li>
                                    </ul>
                                    {{-- <span>(20 Reviws)</span> --}}
                                    <a href="{{ route('front.topic', $ttt->slug) }}">
                                        <h4>{{ $ttt->title }}</h4>
                                    </a>
                                    <div class="course-teacher">
                                        {{-- <div class="thum">
                                    <a href="#"><img src="images/course/teacher/t-1.jpg" alt="teacher"></a>
                                </div> --}}
                                        {{-- <div class="name">
                                    <a href="#"><h6>Mark anthem</h6></a>
                                </div> --}}
                                        <div class="admin">
                                            <ul>
                                                <li><a href="#"><i
                                                            class="fa fa-user"></i><span>{{ $ttt->getstudents()->count() }}</span></a>
                                                </li>
                                                <li><a href="#"><i
                                                            class="fa fa-heart"></i><span>{{ $ttt->grade->title ?? (null . '/' . $ttt->subject->title ?? null) }}</span></a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div> <!-- singel course -->
                        </div>
                    @endforeach
                @endif
            </div> <!-- course slied -->
        </div> <!-- container -->
    </section>




    <section id="course-part2" class="pt-115 pb-120 gray-bg">
        <div class="container">
            <div class="row">
                <div class="col-lg-6">
                    <div class="section-title pb-45">
                        <h5>Our Pricing</h5>
                        <h2>Best Packages </h2>
                    </div> <!-- section title -->
                </div>
            </div> <!-- row -->
            <div class="row mt-30">
                @foreach ($plans as $plan)
                    <div class="col-md-6">
                        <div class="card card-shadow border-0 mb-4">
                            <div class="card-body p-4">
                                <div class="d-flex align-items-center">
                                    <h5 class="font-weight-medium mb-0">{{ $plan->name }}</h5>
                                    @if($loop->iteration == 1)
                                    <div class="ml-auto"><span
                                            class="badge badge-danger font-weight-normal p-2">Popular</span></div>
                                            @endif
                                </div>
                                <div class="row">
                                    <div class="col-lg-5 text-center">
                                        <div class="price-box my-3">
                                            <span class="text-dark display-5">{{ $plan->price }}$ </span>
                                            <h6 class="font-weight-light">for {{ $plan->duration }} days</h6>
                                            <a class="btn btn-info font-14 border-0 text-white p-3 btn-block mt-3"
                                                href="#">CHOOSE PLAN </a>
                                        </div>
                                    </div>
                                    <div class="col-lg-7 align-self-center">
                                        {!! $plan->description !!}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach



            </div> <!-- course slied -->
        </div> <!-- container -->
    </section>

    <!--====== COURSE PART ENDS ======-->

    <!--====== VIDEO FEATURE PART START ======-->

    <section id="video-feature" class="bg_cover pt-60 pb-110"
        style="background-image: url({{ asset('assets/front/images/bg-1.jpg') }})">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6 order-last order-lg-first">
                    <div class="video text-lg-left text-center pt-50">
                        <a class="Video-popup" href="{{ getSetting('video_url') }}"><i class="fa fa-play"></i></a>
                    </div> <!-- row -->
                </div>
                <div class="col-lg-5 offset-lg-1 order-first order-lg-last">
                    <div class="feature pt-50">
                        <div class="feature-title">
                            <h3>Our Services</h3>
                        </div>
                        <ul>
                            <li>
                                <div class="singel-feature">
                                    <div class="icon">
                                        <img src="{{ asset('uploads/settings/' . getSetting('service_1_image')) }}"
                                            alt="icon">
                                    </div>
                                    <div class="cont">
                                        <h4>{{ getSetting('service_1_name') }}</h4>
                                        {{-- <p>{{ getSetting('service_1_name') }}</p> --}}
                                    </div>
                                </div> <!-- singel feature -->
                            </li>
                            <li>
                                <div class="singel-feature">
                                    <div class="icon">
                                        <img src="{{ asset('uploads/settings/' . getSetting('service_2_image')) }}"
                                            alt="icon">
                                    </div>
                                    <div class="cont">
                                        <h4>{{ getSetting('service_2_name') }}</h4>
                                        {{-- <p>Gravida nibh vel velit auctor aliquetn auci elit cons solliazcitudirem sem quibibendum sem nibhutis.</p> --}}
                                    </div>
                                </div> <!-- singel feature -->
                            </li>
                            <li>
                                <div class="singel-feature">
                                    <div class="icon">
                                        <img src="{{ asset('uploads/settings/' . getSetting('service_3_image')) }}"
                                            alt="icon">
                                    </div>
                                    <div class="cont">
                                        <h4>{{ getSetting('service_2_name') }}</h4>
                                        {{-- <p>Gravida nibh vel velit auctor aliquetn auci elit cons solliazcitudirem sem quibibendum sem nibhutis.</p> --}}
                                    </div>
                                </div> <!-- singel feature -->
                            </li>
                        </ul>
                    </div> <!-- feature -->
                </div>
            </div> <!-- row -->
        </div> <!-- container -->
        <div class="feature-bg"></div> <!-- feature bg -->
    </section>

    <!--====== VIDEO FEATURE PART ENDS ======-->



    <!--====== TEASTIMONIAL PART START ======-->

    {{-- <section id="testimonial" class="bg_cover pt-115 pb-115" data-overlay="8" style="background-image: url( {{ asset('assets/front/images/bg-2.jpg')}})">
        <div class="container">
            <div class="row">
                <div class="col-lg-6">
                    <div class="section-title pb-40">
                        <h5>Testimonial</h5>
                        <h2>What they say</h2>
                    </div> <!-- section title -->
                </div>
            </div> <!-- row -->
            <div class="row testimonial-slied mt-40">
                <div class="col-lg-6">
                    <div class="singel-testimonial">
                        <div class="testimonial-thum">
                            <img src="{{ asset('assets/front/images/testimonial/t-1.jpg')}}" alt="Testimonial">
                            <div class="quote">
                                <i class="fa fa-quote-right"></i>
                            </div>
                        </div>
                        <div class="testimonial-cont">
                            <p>Aliquetn sollicitudirem quibibendum auci elit cons equat ipsutis sem nibh id elit. Duis sed odio sit amet sem nibh id elit sollicitudirem </p>
                            <h6>Rubina Helen</h6>
                            <span>Bsc, Engineering</span>
                        </div>
                    </div> <!-- singel testimonial -->
                </div>
                <div class="col-lg-6">
                    <div class="singel-testimonial">
                        <div class="testimonial-thum">
                            <img src="{{ asset('assets/front/images/testimonial/t-2.jpg')}}" alt="Testimonial">
                            <div class="quote">
                                <i class="fa fa-quote-right"></i>
                            </div>
                        </div>
                        <div class="testimonial-cont">
                            <p>Aliquetn sollicitudirem quibibendum auci elit cons equat ipsutis sem nibh id elit. Duis sed odio sit amet sem nibh id elit sollicitudirem </p>
                            <h6>Rubina Helen</h6>
                            <span>Bsc, Engineering</span>
                        </div>
                    </div> <!-- singel testimonial -->
                </div>
                <div class="col-lg-6">
                    <div class="singel-testimonial">
                        <div class="testimonial-thum">
                            <img src="{{ asset('assets/front/images/testimonial/t-3.jpg')}}" alt="Testimonial">
                            <div class="quote">
                                <i class="fa fa-quote-right"></i>
                            </div>
                        </div>
                        <div class="testimonial-cont">
                            <p>Aliquetn sollicitudirem quibibendum auci elit cons equat ipsutis sem nibh id elit. Duis sed odio sit amet sem nibh id elit sollicitudirem </p>
                            <h6>Rubina Helen</h6>
                            <span>Bsc, Engineering</span>
                        </div>
                    </div> <!-- singel testimonial -->
                </div>
            </div> <!-- testimonial slied -->
        </div> <!-- container -->
    </section> --}}

    <!--====== TEASTIMONIAL PART ENDS ======-->


    <!--====== PATNAR LOGO PART START ======-->

    <div id="patnar-logo" class="pt-40 pb-80 gray-bg">
        <div class="container">
            <div class="row patnar-slied">
                @foreach (getBrands() as $brand)
                    <div class="col-lg-12">
                        <div class="singel-patnar text-center mt-40">
                            <img src="{{ asset('uploads/brands/' . $brand->logo) }}" alt="Logo">
                        </div>
                    </div>
                @endforeach
                {{-- <div class="col-lg-12">
                    <div class="singel-patnar text-center mt-40">
                        <img src="{{ asset('assets/front/images/patnar-logo/p-2.png')}}" alt="Logo">
                    </div>
                </div> --}}
                {{-- <div class="col-lg-12">
                    <div class="singel-patnar text-center mt-40">
                        <img src="{{ asset('assets/front/images/patnar-logo/p-3.png')}}" alt="Logo">
                    </div>
                </div>
                <div class="col-lg-12">
                    <div class="singel-patnar text-center mt-40">
                        <img src="{{ asset('assets/front/images/patnar-logo/p-4.png')}}" alt="Logo">
                    </div>
                </div>
                <div class="col-lg-12">
                    <div class="singel-patnar text-center mt-40">
                        <img src="{{ asset('assets/front/images/patnar-logo/p-2.png')}}" alt="Logo">
                    </div>
                </div>
                <div class="col-lg-12">
                    <div class="singel-patnar text-center mt-40">
                        <img src="{{ asset('assets/front/images/patnar-logo/p-3.png')}}" alt="Logo">
                    </div>
                </div> --}}
            </div> <!-- row -->
        </div> <!-- container -->
    </div>

@endsection

@section('scripts')
@endsection