@extends('web.layouts.container')

@section('header')

    <style>
        header .video {
            object-fit: cover;
            width: 100%;
            height: 100% !important;
            object-position: bottom;
        }
    </style>
    
    <header style="background: url({{asset($home->header_image)}})">
        @if($home->header_video)
            <!--@if (app()->getLocale() == 'en')-->
            <!--<div class="l_text head_abs">-->
            <!--    IMAG <br> INE <br> THE <br> POS <br> SIBILI <br> TIES-->
            <!--</div>-->
            <!--@endif-->
            <!--@if (app()->getLocale() == 'ar')-->
            <!--<div class="l_text head_abs">-->
            <!--    <span>تخــ</span>-->
            <!--    <span>يل</span>-->
            <!--    <span>الأ</span>-->
            <!--    <span>مكا</span>-->
            <!--    <span>نيات</span>-->
            <!--</div>-->
            <!--@endif-->
            <video class="video" width="100%" height="100%"  autoplay="" muted="" loop="" __idm_id__="1996242945" playsinline="" style="position: relative; overflow: hidden;">
              <source src="{{asset($home->{'header_video_'.$lang})}}" type="video/mp4">
              <!--Your browser does not support the video tag.-->
            </video>
        @endif



        @if($home->header_image)
            <div class="container-fluid">
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="l_text">
                                @if (app()->getLocale() == 'en')
                                    {!! str_replace(' ', '<br>', $home->header_title) !!}
                                @endif

                                @if (app()->getLocale() == 'ar')
                                    
                                    @foreach($headerTitle as $headerTit)
                                        <span>{{$headerTit}}</span>
                                    @endforeach
{{--                                    <span>تخــ</span>--}}
{{--                                    <span>يل</span> --}}
{{--                                    <span>الأ</span> --}}
{{--                                    <span>مكا</span>--}}
{{--                                    <span>نيات</span>--}}
                                @endif
{{--                                {!! str_replace(' ', '<br>', $home->header_title) !!}--}}
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="info">
                                <p>{{stripText($home->header_description)}}</p>
                                <a href="{{LaravelLocalization::getLocalizedURL(getCurrentLocale(), route('whoWeAre.about'), [], true)}}">{{__('main.more_about_us')}} <i class="fas fa-caret-right mx-1"></i> </a>
                            </div>
                        </div>
                    </div>
                </div>
        @endif

    </header>
@endsection

@section('content')
    <!-- -------------- vision --------------- -->
    <section class="vision section_padding">
        <div class="content">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="items">
                            <div class="section_head">
                                <h3>{{$home->vision_title}}</h3>
                            </div>
                            <div class="cont">
                                <div class="row align-items-center">
                                    <div class="col-lg-5">
                                        <div class="img">
                                            <img src="{{asset($home->vision_image)}}" alt="">
                                        </div>
                                    </div>
                                    <div class="col-lg-7">
                                        <div class="info">
                                            <p>{!! $home->vision_description !!} </p>
                                            <a href="{{LaravelLocalization::getLocalizedURL(getCurrentLocale(), route('whoWeAre.drives'), [], true)}}">{{__('drives.click_here_to_know_more')}} <i class="fas fa-caret-right"></i></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="items">
                            <div class="section_head">
                                <h3>{{$home->impact_title}}</h3>
                            </div>
                            <div class="cont">
                                <div class="row align-items-center">
                                    <div class="col-lg-5">
                                        <div class="img">
                                            <img src="{{asset(asset($home->impact_image))}}" alt="">
                                        </div>
                                    </div>
                                    <div class="col-lg-7">
                                        <div class="info">
                                            <p>{!! $home->impact_description !!} </p>

                                            <a href="{{ $our_impact_url[$lang] ?? 'https://impact.nesma.com/' }}" target="_blank">{{__('main.click_here_to_read_report')}} <i class="fas fa-caret-right"></i></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- --------------  LEGACY --------------- -->
    <section class="legacy">
        <div class="container">
            <div class="section_head">
                <h3>{{__('legacies.head')}}</h3>
            </div>
            <div class="row align-items-center">
                <div class="col-lg-5">
                    <div class="img">
                        <img src="{{asset(asset($home->legacy_image))}}" alt="">
                    </div>
                </div>
                <div class="col-lg-7">
                    <div class="info">
                        <div class="inf_title">
                            {!! $home->legacy_title !!}
                        </div>
                        <div class="cont">
                            <div class="row">
                                <div class="col-lg-6">
                                    <p>{!! stripText($legacy_description[0] ?? null) !!}</p>
                                    <p>{!! stripText($legacy_description[1] ?? null) !!}</p>
                                </div>
                                <div class="col-lg-6">
                                    <p>{!! stripText($legacy_description[2] ?? null) !!}</p>
                                    <a href="{{LaravelLocalization::getLocalizedURL(getCurrentLocale(), route('home.legacy'), [], true)}}">{{__('legacies.open_full_bio')}} <i class="fas fa-caret-right"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- -------------- HIGHLIGHTS --------------- -->
    @if(count($sliders))
        <section class="highlights section_padding pb-0">
            <div class="container">
                <div class="section_head">
                    <h3>{{__('main.highlights')}}</h3>
                </div>
                <div class="swiper-container highlights_slider">
                    <div class="swiper-wrapper">
                        @foreach($sliders as $slider)
                            <div class="swiper-slide">
                                <div class="img">
                                    <img src="{{asset($slider->image)}}" alt="">
                                </div>
                                <div class="info">
                                    <p>{!! $slider->title !!}</p>
                                    <a href="{{LaravelLocalization::getLocalizedURL(getCurrentLocale(), route('home.projects'), [], true)}}">{{__('projects.go_to') . ' ' . __('projects.head')}} <i class="fas fa-caret-right"></i></a>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
            </div>
        </section>
    @endif

@endsection

@section('inner_js')
    <script>
        var swiper = new Swiper('.highlights_slider', {
            slidesPerView: 1,
            spaceBetween: 0,
            centeredSlides: true,
            speed: 1000,
            pagination: {
                el: '.swiper-pagination',
                clickable: 'true',
            },
            navigation: false,
            mousewheel: false,
            keyboard: true,
            autoplay: {
                delay: 5000,
            },
            loop: true,
        });
    </script>
@endsection