@extends('front.master')

@section('title', 'About')

@section('content')

    <section class="event-details">
        <div class="container">
            @if ($abouts->count() > 0)
                @foreach ($abouts as $about)
                    <div class="row">
                        <div class="col-lg-6" style="margin:auto">
                            <div class="event-details-content">
                                <div class="text-center lineTitle">
                                    <h2 class="title" style="color:black">{{ $about->title ?? ""}} </h2>
                                    <span class="line"></span>
                                </div>
                                <p>{!! $about->description ?? "" !!} </p>
                            </div>
                        </div>
                        <div class="col-lg-6" style="margin:auto">
                            <div class="event-details-content">
                                <img src="{{asset('uploads/abouts/'.$about->image)}}" width="845" height="533" alt="Event Details">
                            </div>
                        </div>
                    </div>
                @endforeach
            @else
                <h3 class="text-center">No Data found.</h3>
            @endif

            <div class="row" style="padding-top:20px">
                <div class="col-lg-6">
                    <div class="event-wrapper-2">
                        <div class="single-event-2  wow fadeInUpBig" data-wow-duration="1s" data-wow-delay="0.2s" style="display:flex">
                            <div style="display: flex">
                                <img src="{{asset('front/bo.generationz.education/Uploads/AboutGeneral/Mission.png')}}" width="80" height="80" alt="" style="margin:auto">
                            </div>
                            <div class="event-content" style="padding-left:20px">
                                <h4 class="event-title-2 mb-10" style="color:black">Our Mission </h4>
                                <p class="place">Our mission is to inspire professionals and students by bringing new styles of teaching and learning to educational institutions worldwide. </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="event-wrapper-2 ml-lg-auto">
                        <div class="single-event-2  wow fadeInUpBig" data-wow-duration="1s" data-wow-delay="0.2s" style="display:flex">
                            <div style="display:flex">
                                <img src="{{asset('front/bo.generationz.education/Uploads/AboutGeneral/Vision.png')}}" width="80" height="80" alt="" style="margin:auto">
                            </div>
                            <div class="event-content" style="padding-left:20px">
                                <h4 class="event-title-2 mb-10" style="color:black">Our Vision </h4>
                                <p class="place">Our vision is to bridge the gap between traditional approaches to education, the “now”, and its future.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="page-banner" style="padding:40px 0;background-color:#e7f1f1">
        <div class="container">
            <div class="row lineTitle">
                <div class="section-title-2 text-center">
                    <h2 class="title" style="color:black">Join Our Growing <br /> List of Success Stories</h2>
                    <span class="line"></span>
                </div>
            </div>
            <div class="row">
                @if ($clients->count() > 0)
                    @foreach ($clients as $client)
                        <div class="col-6 col-md-3 col-sm-6">
                            <div class="single-specialty" style="display:flex">
                                <div class="specialty-box">
                                    <div class="box-icon">
                                        <img src="{{asset('uploads/client/'.$client->image)}}" width="130" height="130" alt="icon">
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                @else
                    <h3 class="text-center">No clients image found.</h3>
                @endif
            </div>
        </div>
    </section>

    <section class="teachers-page">
        <div class="container">
            <div class="text-center lineTitle">
                <div class="section-title-2">
                    <h2 class="title" style="color:black">Meet the <br /> Generation Z Founders</h2>
                    <span class="line"></span>
                </div>
            </div>
            <div class="row teachers-row teachers" style="margin:auto">
                @if ($aboutsMeets->count() > 0)
                    @foreach ($aboutsMeets as $aboutsMeet)
                        <div class="col-md-3 col-sm-6 teachers-col">
                            <div class="single-teacher text-center">
                                <div class="teacher-social">
                                    <ul class="social">
                                        <li>
                                            <a href="mailto:{{ $aboutsMeet->email ?? '' }}">
                                                <i class="fa fa-envelope"></i>
                                            </a>
                                        </li>

                                        <li><a target="_blank" href="#"><i class="fa fa-calendar-alt"></i></a></li>
                                    </ul>
                                </div>
                                <div class="teacher-image">
                                    <a href="{{ url('team-details/' . base64_encode($aboutsMeet->id)) }}">
                                        <img src="{{ asset('uploads/meetabouts/' . $aboutsMeet->image) }}" alt="" class="teachers-img"
                                             style="width: 200px; height: 200px; object-fit: cover; border-radius: 50%;">
                                    </a>

                                </div>
                                <div class="teacher-content" style="padding:20px 25px">
                                    <h4 class="name" style="padding-bottom:10px"><a href="#">{{ $aboutsMeet->name ?? ""}}</a></h4>

                                </div>
                            </div>
                        </div>
                    @endforeach
                @else
                    <h3 class="text-center">No Team found.</h3>
                @endif
            </div>
        </div>
    </section>


    <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">Join Our Community!</h2>
                            <span class="line"></span>
                            <p>Stay up to date on the latest news and developments in the world of education.</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="Enter your email here" id="email" required style="background-color: white !important;font-family:Arial;">
                                    <button class="main-btn main-btn-2" onclick="subcscibeNewsletter();">Subscribe Now</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

@endsection