@extends('web.layouts.container')

@section('content')
    <header>
        <div class="container">
            <div class="row">
                <div class="col-lg-7 col-md-6 col-sm-12 col-xs-12">
                    <div class="text text-center">
                        <span class="circle"></span>
                        <h1>{{__('main.learn_with_us')}}</h1>
                        <h4>{{__('main.lead_new_generation')}}</h4>
                        <p>{{\Illuminate\Support\Str::limit($about ?? null ? $about->description['description_'.getCurrentLocale()] : '', 200)}}</p>
                        <a href="{{route('aboutUs.index')}}" class="link-btn">
                            {{__('main.teach_more')}}
                        </a>
                    </div>
                </div>
                <div class="col-lg-5 col-md-6 col-sm-12 col-xs-12">
                    @if($photo)
                        <img src="{{asset($photo)}}" class="header-img" alt="header-img">
                        @else
                        <img src="{{asset('assets/web/images/header-pic.png')}}" class="header-img" alt="header-img">
                    @endif

                </div>
            </div>
        </div>
    </header>
    <main>
        <!--start services-->
        <section class="services">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12 pr-0 pl-0">
                        <div class="text">
                            <div class="inner wow fadeInRight" data-wow-duration="2s">
                                <h4>{!! $firstServices ?? null ? $firstServices->title : '' !!}</h4>
                                <img src="{{asset('assets/web/images/services-icon.png')}}" alt="services-icon.png">
                                <p>{!! $firstServices ?? null ? $firstServices->description : '' !!}</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12 ">
                        <div class="services-cards">
                            <div class="row">
{{--                                @if($services->count())--}}
{{--                                    @foreach($services as $service)--}}
{{--                                        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">--}}
{{--                                            <div class="card text-center red-bg wow fadeInLeft" data-wow-duration="2s" data-wow-delay=".5s">--}}
{{--                                                <img src="{{asset('assets/web/')}}/images/services-icon-1.svg" alt="">--}}
{{--                                                <h6>الأعمال</h6>--}}
{{--                                                <p>52 كورس</p>--}}
{{--                                            </div>--}}
{{--                                        </div>--}}
{{--                                    @endforeach--}}
{{--                                @endif--}}

                                    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                                        <div class="card text-center red-bg wow fadeInLeft" data-wow-duration="2s" data-wow-delay=".5s">
                                            <img src="{{count($allServices) > 3 && $allServices[0]['image'] ? asset($allServices[0]['image']) : asset('assets/web/images/services-icon-1.svg')}}" alt="services-icon-1.svg">
                                            <h6>{{count($allServices) > 3 ? $allServices[0]['title'] : ''}}</h6>
                                            <p>{!! count($allServices) > 3 ? $allServices[0]['description'] : '' !!}</p>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                                        <div class="card text-center yellow-bg wow fadeInRight" data-wow-duration="2s" data-wow-delay="1s">
                                            <img src="{{count($allServices) > 3 && $allServices[1]['image'] ? asset($allServices[1]['image']) : asset('assets/web/images/services-icon-2.svg')}}" alt="services-icon-2.svg">
                                            <h6>{{count($allServices) > 3 ? $allServices[1]['title'] : ''}}</h6>
                                            <p>{!! count($allServices) > 3 ? $allServices[1]['description'] : '' !!}</p>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                                        <div class="card text-center green-bg wow fadeInLeft" data-wow-duration="2s" data-wow-delay="1.5s">
                                            <img src="{{count($allServices) > 3 && $allServices[2]['image'] ? asset($allServices[2]['image']) : asset('assets/web/images/services-icon-3.svg')}}" alt="services-icon-3.svg">
                                            <h6>{{count($allServices) > 3 ? $allServices[2]['title'] : ''}}</h6>
                                            <p>{!! count($allServices) > 3 ? $allServices[2]['description'] : '' !!}</p>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                                        <div class="card text-center blue-bg  wow fadeInRight" data-wow-duration="2s" data-wow-delay="2s">
                                            <img src="{{count($allServices) > 3 && $allServices[3]['image'] ? asset($allServices[3]['image']) : asset('assets/web/images/services-icon-4.svg')}}" alt="services-icon-4.svg">
                                            <h6>{{count($allServices) > 3 ? $allServices[3]['title'] : ''}}</h6>
                                            <p>{!! count($allServices) > 3 ? $allServices[3]['description'] : '' !!}</p>
                                        </div>
                                    </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!--start about-->
        <section class="about">
            <div class="container">
                <div class="about-inner">
                    <div class="row">
                        <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                            <div class="card wow fadeInUp" data-wow-duration="2s">
                                <div class="card-header text-center" style="background-color: #252628;">
                                    <h5>{{__('main.why_us')}}</h5>
                                    <span style="color: #252628;">
                          <i class="fas fa-caret-down"></i>
                        </span>
                                </div>
                                <div class="card-body" style="background-color: #F2F2F2;">
                                    <p>{!! \Illuminate\Support\Str::limit($about ?? null ? $about->description['description_'.getCurrentLocale()] : '', 600) !!}</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
                            <div class="card wow fadeInUp" data-wow-duration="2s" data-wow-delay=".7s">
                                <div class="card-header text-center" style="background-color: #2FB6F0;">
                                    <h5>{{__('main.what_we_do')}}</h5>
                                    <span style="color: #2FB6F0;">
                          <i class="fas fa-caret-down"></i>
                        </span>
                                </div>
                                <div class="card-body">
                                    <div class="about-carousel owl-carousel owl-theme">
                                        <div class="item">
                                            <div class="small-card">
                                                <img src="{{asset('assets/web/images/about-icon-1.svg')}}" alt="about-icon-1.svg">
                                                <h6>{{__('main.guaranteed_success')}}</h6>
                                                <p>{!! count($details) > 2 ? $details[0] : '' !!}</p>
{{--                                                <a href="#">--}}
{{--                                                    <i class="fas fa-long-arrow-alt-right"></i>--}}
{{--                                                </a>--}}
                                            </div>
                                        </div>
                                        <div class="item">
                                            <div class="small-card">
                                                <img src="{{asset('assets/web/images/about-icon-2.svg')}}" alt="about-icon-2.svg">
                                                <h6>{{__('main.special_courses')}}</h6>

                                                <p><p>{!! count($details) > 2 ? $details[1] : '' !!}</p></p>
{{--                                                <a href="#">--}}
{{--                                                    <i class="fas fa-long-arrow-alt-right"></i>--}}
{{--                                                </a>--}}
                                            </div>
                                        </div>
                                        <div class="item">
                                            <div class="small-card">
                                                <img src="{{asset('assets/web/images/about-icon-3.svg')}}" alt="about-icon-3.svg">
                                                <h6>{{__('main.best_teachers')}}</h6>
                                                <p><p>{!! count($details) > 2 ? $details[2] : '' !!}</p></p>
{{--                                                <a href="#">--}}
{{--                                                    <i class="fas fa-long-arrow-alt-right"></i>--}}
{{--                                                </a>--}}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!--start join-->
        <section class="join">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                        <div class="text-content">
                            <div class="inner wow fadeInRight" data-wow-duration="2s">
                                <span>{{__('main.join_us')}}</span>
                                <h4>{{__('main.register_now')}}</h4>
                                <img src="{{asset('assets/web/images/services-icon.png')}}" alt="about-icon.svg">
                                <p>
                                    خدمة تعليمية هنالك العديد من الأنواع المتوفرة لنصوص لوريم إيبسوم،<br>
                                    ولكن الغالبية تم تعديلها بشكل ما عبر إدخال بعض النوادر أو الكلمات العشوائية إلى النص.<br>
                                    خدمة تعليمية هنالك العديد من الأنواع المتوفرة لنصوص لوريم إيبسوم ولكن الغالبية تم تعديلها بشكل ما عبر إدخال بعض النوادر أو الكلمات العشوائية إلى النص
                                </p>
                            </div>
                            <!-- <div class="countdown" id="countdown">
                              <ul>
                                <li class="wow fadeInUp" data-wow-duration="2s" data-wow-delay=".5s">
                                  <span id="seconds"></span>
                                  <p style="background-color: #3D84C6;">ثانيه</p>
                                </li>
                                <li class="wow fadeInUp" data-wow-duration="2s" data-wow-delay="1s">
                                  <span id="minutes"></span>
                                  <p style="background-color: #4BC082;">دقيقه</p>
                                </li>
                                <li class="wow fadeInUp" data-wow-duration="2s" data-wow-delay="1.5s">
                                  <span id="hours"></span>
                                    <p style="background-color:#FCC73E;">ساعه</p>
                                </li>
                                <li class="wow fadeInUp" data-wow-duration="2s" data-wow-delay="2s">
                                  <span id="days"></span>
                                  <p style="background-color: #DA2D29;">يوم</p>
                                </li>
                              </ul>
                            </div> -->
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                        <div class="contact-us card wow fadeInUp" data-wow-duration="3s" data-wow-delay=".5s">
                            <div class="card-header">
                                <h5>{{__('main.contact_with_us')}}</h5>
                                <span style="color: #252628;">
                          <i class="fas fa-caret-down"></i>
                        </span>
                            </div>
                            <div class="card-body">
                                <div class="alert alert-danger text-center ajaxError d-none"></div>
                                <div class="alert alert-success text-center ajaxSuccess d-none"></div>
                                <form action="{{route('contactUs.store')}}" method="post" class="contact_us_form">
                                    @csrf()
                                    <div class="form-group">
                                        <input name="name" class="form-control" type="text" placeholder="{{__('main.name')}}">
                                    </div>
                                    <div class="form-group">
                                        <input name="email" class="form-control" type="text" placeholder="{{__('main.email')}}">
                                    </div>
                                    <div class="form-group">
                                        <input name="phone" class="form-control" type="tel" placeholder="{{__('main.phone')}}">
                                    </div>
                                    <div class="form-group">
                                        <input name="message_title" class="form-control" type="text" placeholder="{{__('main.message_subject')}}">
                                    </div>
                                    <div class="form-group">
                                        <textarea name="message" class="form-control" placeholder="{{__('main.message')}}"></textarea>
                                    </div>
                                    <button type="submit" class="submit-btn contact_us_button">{{__('main.send')}}</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
@endsection

@section('inner_js')
    <script>
        // $(document).ready(function () {
        //     $('.contact_us_button').click(async function (e) {
        //         e.preventDefault();
        //
        //         let interval = setInterval(function () {
        //             $('.ajaxError, .ajaxSuccess').slideUp(400);
        //             clearInterval(interval)
        //         }, 3000);
        //
        //         let form = $('.contact_us_form'),
        //             data = new FormData(form[0]),
        //             url = form.attr('action'),
        //             method = form.attr('method');
        //
        //         const response=await ajax({
        //             url,
        //             data,
        //             dataType: 'json',
        //             method
        //         });
        //
        //         if (response.errors) {
        //             console.log(response.errors)
        //             $('.ajaxError').removeClass('d-none').slideDown().html(response.errors);
        //             $('.ajaxSuccess').addClass('d-none');
        //         }
        //         if (response.message) {
        //             $('.ajaxSuccess').removeClass('d-none').slideDown().html(response.message);
        //             $('.ajaxError').addClass('d-none');
        //             $('.contact_us_form input, textarea').val('')
        //         }
        //     });
        //     $('.newsletter_button').click(async function (e) {
        //         e.preventDefault();
        //
        //         let interval = setInterval(function () {
        //             $('.newsletterAjaxError, .newsletterAjaxSuccess').slideUp(400);
        //             clearInterval(interval)
        //         }, 3000);
        //
        //         let  email = $('.newsletter_email');
        //
        //         let data = {email: email.val()},
        //             form = $('.newsletter_form'),
        //             url = form.attr('action'),
        //             method = form.attr('method');
        //
        //         const response=await ajax({
        //             url,
        //             data,
        //             dataType: 'json',
        //             method
        //         });
        //
        //         if (response.errors) {
        //             $('.newsletterAjaxError').removeClass('d-none').slideDown().html(response.errors);
        //             $('.newsletterAjaxSuccess').addClass('d-none');
        //         }
        //         if (response.message) {
        //             $('.newsletterAjaxSuccess').removeClass('d-none').slideDown().html(response.message);
        //             $('.newsletterAjaxError').addClass('d-none');
        //             email.val('')
        //         }
        //     });
        //
        // });
    </script>
@endsection