@extends('layouts.app')
@section('metades')
    <meta name="description" content="Smart Education - An Education Website" />
    <meta name="author" content="Smart Education" />
    <meta name="keywords" content="smart,education" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@endsection
@section('title')
    <title>Smart Education</title>
@endsection
@section('css')
    <link rel="stylesheet" href="{{ asset('css/home.css') }}" />
@endsection
@section('content')
    <section class="Intro-Details">
        <h1 class="Highlight">{{$data['shortDescription']}}</h1>
        <p>{{$data['longDescription']}}</p>
        <div class="Banner-Links">
            <a href="{{ url('/take-a-test-1') }}">
                <img src="{{ asset('assets/image/intro/Degree-01.png') }}" loading="lazy" />
                <p>Take A Test</p>
            </a>
            <a href="{{ url('/courses-1') }}">
                <img src="{{ asset('assets/image/intro/Graduation-01.png') }}" loading="lazy" />
                <p>Select Your Course</p>
            </a>
        </div>
        <div class="Mobile-Only">
            <div>
                <a class="Login" href="{{ url('/') }}">Login/Register</a>
            </div>
            <div>
                <a href="{{ url('/') }}"><img src="{{ asset('assets/image/common/Facebook.png') }}" alt="Facebook" loading="lazy" /></a>
                <a href="{{ url('/') }}"><img src="{{ asset('assets/image/common/Instagram-02.png') }}" alt="Instagram" loading="lazy" /></a>
                <a href="{{ url('/') }}"><img src="{{ asset('assets/image/common/YouTube.png') }}" alt="YouTube" loading="lazy" /></a>
            </div>
        </div>
    </section>
    <section class="Intro-Contact">
        <div class="Mobile">
            <img src="{{ asset('assets/image/intro/Mobile.png') }}" loading="lazy" />
            <p>(+91) 9932053428 <br>(+91) 9832153428</p>
        </div>
        <div class="Email">
            <img src="{{ asset('assets/image/intro/Email.png') }}" loading="lazy" />
            <p><span class="Black Medium">Email</span><br>director@smarteducation.org.in</p>
        </div>
    </section>
    @foreach($data['moduleItems'] as $item)
        @if($item['title'] =='Our Courses')
            <section class="Course">
                <div class="Heading">
                    <h1>{{$item['title']}}</h1>
                    <p>{{$item['shortDescription']}}</p>
                </div>
                @if(count($item['dynamicSections']) > 0)
                    <div class="Slider-Arrow">
                        <img class="Prev" src="{{ asset('assets/image/common/Arrow-Black.png') }}" loading="lazy" />
                        <img class="Next" src="{{ asset('assets/image/common/Arrow-Black.png') }}" loading="lazy" />
                    </div>
                    <div class="Course-Items-Wrapper swiper">
                        <div class="swiper-wrapper">
                            @foreach($item['dynamicSections'] as $dynamicSection)
                                <div class="swiper-slide Course-Item">
                                    <a href="{{url('/our-courses')}}/{{$dynamicSection['slug']}}">
                                        <img src="{{ $dynamicSection['image'] }}" loading="lazy" />
                                        <h3>{{$dynamicSection['title']}}</h3>
                                        <h5>{!! $dynamicSection['description'] !!}</h5>
                                        <div class="Arrow">
                                            <img src="{{ asset('assets/image/common/Arrow-Black.png') }}" loading="lazy" />
                                        </div>
                                    </a>
                                </div>
                            @endforeach;
                        </div>
                    </div>
                @endif
            </section>
        @endif;
        @if($item['title']=='About Us')
            <section class="About-Us">
                <div class="Image">
                    <img src="{{ $item['image'] }}" alt="About Us" loading="lazy" />
                </div>
                <div class="Details">
                    <p class="Highlight">{{$item['title']}}</p>
                    <h1>{{$item['shortDescription']}}</h1>
                    <h4>{{$item['longDescription']}}.</h4>
                    <div class="Checks">
                        <div>
                            <img src="{{ asset('assets/image/about/Tick-01.png') }}" loading="lazy" />
                            <h4>World Class</h4>
                        </div>
                        <div>
                            <img src="{{ asset('assets/image/about/Tick-01.png') }}" loading="lazy" />
                            <h4>100% Preparation</h4>
                        </div>
                        <div>
                            <img src="{{ asset('assets/image/about/Tick-01.png') }}" loading="lazy" />
                            <h4>Affordable</h4>
                        </div>
                        <div>
                            <img src="{{ asset('assets/image/about/Tick-01.png') }}" loading="lazy" />
                            <h4>Always Available</h4>
                        </div>
                    </div>
                    <a class="btn-More" href="{{ url('/about-us') }}">Know More</a>
                </div>
            </section>
        @endif;
        @if($item['title']=='Take A Test')
            <section class="Test" id="Test">
                <div class="Heading">
                    <h1>{{$item['title']}}t</h1>
                    <p>{{$item['shortDescription']}}</p>
                </div>
                @if(count($item['dynamicSections']) > 0)
                    <div class="Slider-Arrow">
                        <img class="Prev" src="{{ asset('assets/image/common/Arrow-Black.png') }}" loading="lazy" />
                        <img class="Next" src="{{ asset('assets/image/common/Arrow-Black.png') }}" loading="lazy" />
                    </div>
                    <div class="Test-Items-Wrapper swiper">
                        <div class="swiper-wrapper">
                            @foreach($item['dynamicSections'] as $dynamicSection)
                                <div class="swiper-slide Test-Item">
                                    <a href="{{ url('/take-a-tests') }}/{{$dynamicSection['slug']}}">
                                        <img src="{{ $dynamicSection['image'] }}" loading="lazy" />
                                        <h2 class="Yellow">{{$dynamicSection['title']}}</h2>
                                        <h5>{!! $dynamicSection['description'] !!}</h5>
                                        <div class="Arrow">
                                            <h4 class="Yellow">View Details</h4>
                                            <img src="{{ asset('assets/image/common/Arrow-Yellow.png') }}" loading="lazy" />
                                        </div>
                                    </a>
                                </div>
                            @endforeach;
                        </div>
                    </div>
                @endif;
            </section>
        @endif;
        @if($item['title']=='For College/University & Corporate Sector')
            <section class="CTA-Banner Corporate">
                <img class="Line" src="{{ asset('assets/image/banners/Line.png') }}" loading="lazy" />
                <div class="Text">
                    <h1>{{$item['title']}}</h1>
                    <h4>{{$item['shortDescription']}}</h4>
                </div>
                <div class="Contact" onclick="callBackOpen()">
                    <p>Contact Us</p>
                    <img src="{{ asset('assets/image/common/Arrow-Red-Hollow.png') }}" loading="lazy" />
                </div>
            </section>
            <section class="Offer-Banner">
                <img src="{{ asset('assets/image/banners/Banner.jpg') }}" alt="Offer" loading="lazy" />
            </section>
        @endif;
        @if($item['title']=='Testimonial')
            <section class="Testimonial">
                <div class="Heading">
                    <h1 class="White">{{$item['title']}}</h1>
                    <p class="White">{{$item['shortDescription']}}</p>
                </div>
                 @if(count($item['dynamicSections']) > 0)
                    <div class="Testimonial-Items-Wrapper">
                        @foreach($item['dynamicSections'] as $dynamicSection)
                            <div class="Item">
                                <img class="User" src="{{ $dynamicSection['image'] }}" alt="Testimonial" loading="lazy" />
                                <div class="Details">
                                    <img class="Rating" src="{{ asset('assets/image/testimonial/Rating.png') }}" alt="Rating" loading="lazy" />
                                    <h2>{{$dynamicSection['title']}}</h2>
                                    <h5 class="Review">{!! $dynamicSection['description'] !!}.</h5>
                                    <h4>Sounak Kundu</h4>
                                    <h5>Student, Midnapore</h5>
                                </div>
                            </div>
                        @endforeach;
                    </div>
                @endif;
            </section>
        @endif;
        @if($item['title']=='Our Principles')
            <section class="Our-Principle">
                <div class="Heading">
                    <h1>{{$item['title']}}</h1>
                    <p>{{$item['shortDescription']}}</p>
                </div>
                @if(count($item['dynamicSections']) > 0)
                    <div class="Our-Principle-Items-Wrapper">
                        @foreach($item['dynamicSections'] as $dynamicSection)
                            <div class="Item">
                                <div class="Image-Wrapper">
                                    <img class="Image" src="{{ $dynamicSection['image'] }}" loading="lazy" />
                                </div>
                                <div class="Details">
                                    <h2>{{$dynamicSection['title']}}</h2>
                                    <h4>{!! $dynamicSection['description'] !!}</h4>
                                    <a href="{{ url('/our-principles') }}/{{$dynamicSection['slug']}}">
                                        <h4>Know More</h4>
                                        <img src="{{ asset('assets/image/common/Arrow-Black.png') }}" loading="lazy" />
                                    </a>
                                </div>
                            </div>
                        @endforeach;
                    </div>
                @endif;
            </section>
        @endif;
        @if($item['title']=='Become A Part Of Our Team')
            <section class="CTA-Banner Join-Us">
                <img class="Line" src="{{ asset('assets/image/banners/Line.png') }}" loading="lazy" />
                <div class="Text">
                    <h1>{{$item['title']}}</h1>
                    <h4>{{$item['shortDescription']}}.</h4>
                </div>
                <div class="Contact" onclick="callBackOpen()">
                    <p>Contact Us</p>
                    <img src="{{ asset('assets/image/Common/arrow-Green.png') }}" loading="lazy" />
                </div>
            </section>
        @endif;
    @endforeach;
@endsection
@push('scripts')
    <script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
    <script type="text/javascript">
        const courseSlider = new Swiper('.Course-Items-Wrapper', {
            spaceBetween:15,
            slidesPerView: 1,
            breakpoints: {
                768: {
                slidesPerView: 2,
                },
                1200: {
                slidesPerView: 3,
                },
            },
            autoplay: {
                delay: 3000,
            },
            loop: true,
            navigation: {
                prevEl: '.Slider-Arrow .Prev',
                nextEl: '.Slider-Arrow .Next',
            },
        });
    </script>
    <script type="text/javascript">
        const testSlider = new Swiper('.Test-Items-Wrapper', {
            spaceBetween:15,
            slidesPerView: 1,
            breakpoints: {
                600: {
                slidesPerView: 2,
                },
                1000: {
                slidesPerView: 3,
                },
                1200: {
                slidesPerView: 4,
                },
            },
            autoplay: {
                delay: 3000,
            },
            loop: true,
            navigation: {
                prevEl: '.Slider-Arrow .Prev',
                nextEl: '.Slider-Arrow .Next',
            },
        });
    </script>
    <script type="text/javascript">
        $(document).ready(function(){
            setTimeout(function() {
                $('#NavBarIudyogTop ul li a#home-top').attr('class', 'Active');
            },2000);
        });
    </script>
@endpush