@extends('front.master')

@section('title', 'Generation Z Education')

@section('content')
<style>
    .watsapp-logo {
        width: 50px;
    }
    .watsapp-icons {
        position: fixed;
        bottom: 100px;
        right: 50px;
        z-index: 9999999;
    }
</style>

    <section class="slider-area slider-03 slider-active" style="padding-top:2px">
        <div class="single-slider d-flex align-items-center bg_cover" style="background-image:url('{{ asset('front/img/Arabesque2.jpg') }}'); height: 80vh">
            <div class="container">
                <div class="row">
                    @if (count($home_banners) > 0)
                        @foreach ($home_banners as $home_banner)
                            <div class="col-lg-6 slider-content slider-content-3 text-center" style="position:relative;margin:auto">
                                <h2 class="title" data-animation="fadeInUp" data-delay="0.2s" style="color:black">{{ $home_banner->title}} </h2>
                                <ul class="slider-btn">
                                    <li>
                                        <a data-animation="fadeInUp" data-delay="1s" class="main-btn" href="{{ route('about') }}">  {{ __('messages.learn_more') }}</a></li>
                                </ul>
                            </div>
                            <div class="col-lg-6">
                                <img src="{{ $home_banner->image }}" />
                            </div>
                        @endforeach
                    @else
                        <h3 class="text-center">No Data Found</h3>
                    @endif

                </div>
            </div>
        </div>
    </section>

    <section class="servicesSection">
        <div class="container">
            <div class="row">
                @if (count($home_services) > 0)
                    @foreach ($home_services as $home_service)
                        <div class="col-lg-4 col-sm-6 iconBanner">
                            <a href="{{ url('service') }}?categorye={{ $home_service->title }}">
                                <div class="single-event text-center">
                                    <div style="display: flex">
                                        <div style="display: flex; margin: auto">
                                            <img src="{{$home_service->image}}"
                                                 width="80" height="50" alt="" style="margin-right: 15px">
                                            <h4 class="event-title" style="margin: auto">
                                                {{ $home_service->title ?? '' }}
                                            </h4>
                                        </div>
                                    </div>
                                    <div style="margin-top: 10px">
                                        <span class="time serviceHome">
                                            {!! $home_service->description ?? '' !!}
                                        </span>
                                    </div>
                                </div>
                            </a>
                        </div>
                    @endforeach
                @else
                    <h3 class="text-center">No Data Found</h3>
                @endif
            </div>
        </div>
    </section>

    <section class="about-area pt-0">
        <div class="container">
            <div class="row">
                <div class="col-lg-5">
                    <div class="about-content">
                        <div class="text-center lineTitle">
                            <h2 class="about-title" style="color:black">  {!! __('messages.our_unique_vision') !!}</h2>
                            <span class="line"></span>
                        </div>
                        <p>{{__('messages.about_generation_z')}} </p>
                        <a href="{{ route('about') }}" class="main-btn" style="margin-top:20px">{{__('messages.read_more')}}</a>
                    </div>
                </div>
                <div class="col-lg-7">
                    <div class="about-image">
                        <div class="single-image image-1">
                            <img src="{{ asset('front/bo.generationz.education/Uploads/HomeGeneral/GenZ%20(Website%20Icons)_About%20Section%20in%20the%20home%20page%20(2).png') }}"
                                width="290" height="290" alt="about">
                        </div>
                        <div class="single-image image-2">
                            <img src="{{ asset('front/bo.generationz.education/Uploads/HomeGeneral/AboutSection2.png') }}"
                                width="225" height="225" alt="about">
                        </div>
                        <div class="single-image image-3">
                            <img src="{{ asset('front/bo.generationz.education/Uploads/HomeGeneral/AboutSection3.png') }}"
                                width="190" height="190" alt="about">
                        </div>


                        <div class="about-icon icon-1">
                            <img src="{{ asset('front/Content/Assets/GenerationZImages/icon-1.png') }}" width="46"
                                height="46" alt="icon">
                        </div>
                        <div class="about-icon icon-2">
                            <img src="{{ asset('front/Content/Assets/GenerationZImages/icon-2.png') }}" width="46"
                                height="46" alt="icon">
                        </div>
                        <div class="about-icon icon-3">
                            <img src="{{ asset('front/Content/Assets/GenerationZImages/icon-3.png') }}" width="46"
                                height="46" alt="icon">
                        </div>
                        <div class="about-icon icon-4">
                            <img src="{{ asset('front/Content/Assets/GenerationZImages/icon-4.png') }}" width="46"
                                height="46" alt="icon">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="page-banner" style="padding-top:0">
        <div class="page-banner-bg bg_cover parallax"
            style="background-image: url('{{ asset('front/img/Arabesque.jpg') }}');">
            <div class="container">
                <div class="banner-content text-center">
                    <h2 class="title mb-40" style="color:black">
                        {{ __('messages.curated_courses') }}
                    </h2>
                    <a data-animation="fadeInUp" data-delay="0.6s" class="main-btn main-btn-2"
                        href="{{ route('training') }}">{{ __('messages.explore') }}</a>
                </div>
            </div>
        </div>
    </section>


    <section class="features-area-2" style="background:#e7f1f1">
        <div class="container">
            <div class="row">
                <div class="section-title-2 text-center lineTitle">
                    <h2 class="title" style="color:black">{{ __('messages.training') }}</h2>
                    <span class="line"></span>
                </div>
            </div>
        
 
         @if (count($home_trainings) > 0)
            <div class="row align-items-center">
                <div class="col-lg-5">
                    <div class="features-image-2">
                        <img class="wow fadeInLeft" data-wow-duration="1s" data-wow-delay="0.3s"
                            src="{{ $defaultImage->image}}" alt="Features">
                    </div>
                </div>
                <div class="col-lg-7">
                    <div class="features-items">
                        @foreach ($home_trainings as $key => $training)
                       
                            @if ($key % 2 == 0)
                                <div class="features-items-wrapper">
                            @endif
                          
                            <div class="single-features-item d-flex align-items-center wow fadeInUpBig"
                                data-wow-duration="1s" data-wow-delay="0.2s">
                                <div class="item-icon">
                                    <img src="{{ $training->image }}" width="100" height="100" alt="Icon">
                                </div>
                                <div class="item-content media-body">
                                    <p>{{ $training->title }}</p>
                                </div>
                            </div>
                            
                            @if ($key % 2 == 1 || $key == count($home_trainings) - 1)
                                </div>
                            @endif
                            
                        @endforeach
                    </div>
                </div>
                <div style="text-align:center">
                    <a href="{{ route('training') }}" class="main-btn" style="margin-top:20px;width:260px">
                        {{ __('messages.explore_our_courses') }}
                    </a>
                </div>
            </div>
        @else
            <h3 class="text-center">No Data Found</h3>
        @endif  


            </div>
        </section>

    <section class="blog-page" style="padding:40px 0">
        <div class="container">
            <div class="row">
                <div class="section-title-2 text-center lineTitle">
                    <h2 class="title" style="color:black">{{__('messages.blogs')}}</h2>
                    <span class="line"></span>
                </div>
            </div>
            <div class="row">
                @if (count($blogs) > 0)
                    @foreach ($blogs as $blog)
                        <div class="col-lg-4 col-md-6">
                            <div class="single-blog mobileBlog">
                                <div class="blog-image">
                                    <a href="{{ url('blog-details/'.base64_encode($blog->id)) }}">
                                        <img src="{{$blog->image}}" style="width:380px; height:250px;" alt="blog">
                                    </a>
                                </div>
                                <div class="blog-content text-center">
                                    <ul class="meta">
                                        <li>{{ $blog->created_at ? $blog->created_at->format('d/m/Y') : '' }}</li>
                                    </ul>
                                    <h4 class="blog-title" style="min-height:100px;display:flex">
                                        <a href="{{ url('blog-details/'.base64_encode($blog->id)) }}" >{{ $blog->title}}</a></h4>
                                        <a href="{{ url('blog-details/'.base64_encode($blog->id)) }}" class="more">{{__('messages.read_more')}} <i class="fa fa-chevron-right"></i></a>
                                </div>
                            </div>
                        </div>
                    @endforeach
                @endif

            </div>
        </div>
    </section>
    <br>

    <section class="newsletter-area" style="background-color: #e7f1f1">
        <div class="container">
            <div class="newsletter-wrapper bg_cover wow zoomIn" data-wow-duration="1s" data-wow-delay="0.2s">
                <div class="row align-items-center">
                    <div class="col-lg-5">
                        <div class="section-title-2">
                            <h2 class="title" style="color:black">{{__('messages.join_community')}}!</h2>
                            <span class="line"></span>
                            <p>{{__('messages.stay_up_to_date')}}.</p>
                        </div>
                    </div>
                    <div class="col-lg-7">
                        <div class="newsletter-form mt-30">
                            <div id="success-form" class="mx-0 text-center alert alert-success" style="display:none;">
                                Thank you for your subscription</div>
                            <div id="error-form" class="mx-0 text-center alert alert-danger" style="display:none;">An
                                error occured, please try again later</div>
                            <div class="newsletter-form mt-30">
                                <form action="Javascript:void(0);" id="subscribenewsletter">
                                    <input type="text" placeholder="{{ __('messages.enter_your_email') }}" id="email" required
                                        style="background-color: white !important;font-family:Arial;">
                                    <button class="main-btn main-btn-2" onclick="subcscibeNewsletter();">{{ __('messages.subscribe_now') }}</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    


@endsection