@extends('layout.app')
@push('css')
@endpush

@section('content')
    <div class="section-wrapper mb-0">
        <div id="heroswiper" class="basic-swiper swiper-initialized swiper-horizontal swiper-backface-hidden">
            <div class="slider swiper-wrapper"
                 style="
                        cursor: grab;
                        transition-duration: 0ms;
                        transform: translate3d(-1905px, 0px, 0px);
                        transition-delay: 0ms;
                      ">
                @foreach ($banners as $banner)
                    <div class="hero-slide-wrapper swiper-slide swiper-slide-active" style="width: 1905px"
                         data-swiper-slide-index="1">
                        @if(str_ends_with($banner->banner, 'mp4'))
                            <video
                                id="a98f1fef-2e7d-8c90-2027-f9482078760d-video"
                                autoplay=""
                                loop=""
                                style="width: 1905px; height: inherit"
                                muted=""
                                playsinline=""
                                data-wf-ignore="true"
                                data-object-fit="cover"
                            >
                                <source
                                    src="{{ \Illuminate\Support\Facades\Storage::url($banner->banner) }}"
                                    data-wf-ignore="true"
                                />
                            </video>
                        @else
                            <img src="{{ \Illuminate\Support\Facades\Storage::url($banner->banner) }}" loading="lazy"
                                 sizes="100vw"
                                 srcset="
                            {{ Storage::url($banner->banner) }} 500w,
                            {{ Storage::url($banner->banner) }} 800w,
                            {{ Storage::url($banner->banner) }} 1080w,
                            {{ Storage::url($banner->banner) }} 1600w,
                            {{ Storage::url($banner->banner) }} 1920w
                            "
                                 alt="" class="slide-image desktop-slide"/>
                        @endif
                    </div>
                @endforeach
            </div>
            <div
                class="slider-pagination hero-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal">
                <span class="swiper-pagination-bullet"></span><span
                    class="swiper-pagination-bullet swiper-pagination-bullet-active"></span><span
                    class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span
                    class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span
                    class="swiper-pagination-bullet"></span>
            </div>
        </div>
    </div>

    {{-- What's on Start --}}

    <div class="section-wrapper">
        <div class="content-wrapper mb-25">
            <div class="section-heading-wrapper">
                <div class="section-heading-line"></div>
                <h3 class="section-heading">{{ __('messages.whats_on') }}<br/></h3>
                <div class="section-heading-line"></div>
            </div>
        </div>
        <div class="content-wrapper pt-pb-0">
            <div class="outlet-gallery-wrapper">
                <div id="basic-swiper"
                     class="basic-swiper w-dyn-list swiper-initialized swiper-horizontal swiper-backface-hidden">
                    <div role="list" class="swiper-wrapper basic-slider-list w-dyn-items"
                         style="
                cursor: grab;
                transition-duration: 0ms;
                transform: translate3d(-2940px, 0px, 0px);
                transition-delay: 0ms;
              ">

                        @foreach ($events as $event)
                            <div role="listitem" class="swiper-slide basic-swiperr-item w-dyn-item swiper-slide-active"
                                 style="width: 568px; margin-right: 20px" data-swiper-slide-index="2">
                                <div class="whatson-card">
                                    <img alt="" loading="lazy"
                                         src="{{ Storage::url($event->logo) }} "
                                         class="whatson-image"/>
                                    <div class="whats-on-details-wrapper">
                                        <div class="whats-on-details-text">
                                            @if ($event->start_date || $event->end_date)
                                                <div class="whatson-card-date-wrapper">
                                                    @if ($event->start_date)
                                                        <div
                                                            class="event-dates-text">{{ Carbon\Carbon::parse($event->start_date)->format('m/d/Y')}}</div>
                                                        <div class="event-dates-text date-separator">-</div>
                                                    @endif
                                                    @if($event->end_date)
                                                        <div
                                                            class="event-dates-text">{{ Carbon\Carbon::parse($event->end_date)->format('m/d/Y')}}</div>
                                                    @endif
                                                </div>
                                            @endif
                                            <h6 class="small-heading whatson-small-heading">
                                                {{ app()->getLocale() == 'ar' ? $event->title_ar : $event->title_en }}
                                            </h6>
                                        </div>
                                        <a href="{{ route('whats-on-details',[$event->id]) }}"
                                           class="button w-inline-block">
                                            <div>{{ __('messages.know_more') }}</div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        @endforeach


                    </div>
                </div>
                <div
                    class="slider-pagination slider__pagination-whatson swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal">
                    <span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span
                        class="swiper-pagination-bullet swiper-pagination-bullet-active"></span><span
                        class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span
                        class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span
                        class="swiper-pagination-bullet"></span>
                </div>
            </div>
        </div>
    </div>
    {{-- What's on Ends --}}

    {{-- Projects Start --}}
    <div class="section-wrapper">
        <div class="content-wrapper mb-25">
            <div class="section-heading-wrapper">
                <div class="section-heading-line"></div>
                <h3 class="section-heading">{{ __('messages.about_us') }}<br/></h3>
                <div class="section-heading-line"></div>
            </div>
        </div>
        @foreach ($projects as $index => $project)
            @if ($index % 2 == 0)
                <div class="w-layout-grid _2-col-grid cc-about-2">
                    <div id="w-node-cb791c0c-0e62-1d55-3e06-4a96b34bafae-b34bafad"
                         class="content-wrapper _2-col-content">
                        <div class="home-section-wrap">
                            @if($project->logo)
                                <div class="project-logo">
                                    <img src="{{ \Illuminate\Support\Facades\Storage::url($project->logo) }}"
                                         loading="lazy"
                                         style="height: 100%"/>
                                </div>
                            @endif
                            <h4 class="block-heading">
                                {{ app()->getLocale() == 'ar' ? $project->title_ar : $project->title_en }}
                            </h4>
                            <p class="paragraph-light">
                                {!! app()->getLocale() == 'ar' ? $project->description_ar : $project->description_en !!}
                            </p>
                        </div>
                    </div>
                    <img src="{{ \Illuminate\Support\Facades\Storage::url($project->image) }}"
                         id="w-node-cb791c0c-0e62-1d55-3e06-4a96b34bafb8-b34bafad" alt="" sizes="100vw"
                         srcset="{{ Storage::url($project->image) }} 500w,
            {{ Storage::url($project->image) }} 800w,
            {{ Storage::url($project->image) }} 964w"
                         class="_2-col-img" loading="lazy"/>
                </div>
            @else
                <div class="w-layout-grid _2-col-grid">
                    <div id="w-node-_298bb1e9-e71b-6cd0-599f-13ffdcb67891-dcb67890"
                         class="content-wrapper _2-col-content">
                        <div class="home-section-wrap">
                            @if($project->logo)
                                <div class="project-logo">
                                    <img src="{{ \Illuminate\Support\Facades\Storage::url($project->logo) }}"
                                         loading="lazy"
                                         style="height: 100%"/>
                                </div>
                            @endif
                            <h4 class="block-heading">{{ app()->getLocale() == 'ar' ? $project->title_ar : $project->title_en }}</h4>
                            <p class="paragraph-light">
                                {!! app()->getLocale() == 'ar' ? $project->description_ar : $project->description_en !!}
                            </p>
                        </div>
                    </div>
                    <img src="{{ \Illuminate\Support\Facades\Storage::url($project->image) }}"
                         id="w-node-_298bb1e9-e71b-6cd0-599f-13ffdcb6789b-dcb67890" alt="" sizes="100vw"
                         srcset="
            {{ Storage::url($project->image) }} 500w,
            {{ Storage::url($project->image) }} 800w,
            {{ Storage::url($project->image) }} 964w "
                         class="_2-col-img" loading="lazy"/>
                </div>
            @endif
        @endforeach

    </div>
    {{-- Projects End --}}
@endsection


@push('js')
    <script src="{{ asset('frontend-assets/js/swiper-bundle.min.js') }}"></script>
    <script>
        //HERO SLIDER
        var heroSwiper = new Swiper("#heroswiper", {
            slidesPerView: 1,
            slidesPerGroup: 1,
            grabCursor: true,
            a11y: false,
            loop: true,
            autoplay: {
                delay: 5000,
            },
            spaceBetween: 0,
            allowTouchMove: true,
            pagination: {
                el: ".slider-pagination",
                clickable: true,
            },
        });

        //EVENTS SLIDER
        var mySwiper = new Swiper("#basic-swiper", {
            slidesPerView: 3,
            slidesPerGroup: 1,
            grabCursor: true,
            a11y: false,
            loop: true,
            //autoplay:false,
            autoplay: {
                delay: 3000,
            },
            spaceBetween: 20,
            allowTouchMove: true,
            pagination: {
                el: ".slider__pagination-whatson",
                clickable: true,
            },
            breakpoints: {
                0: {
                    /* when window >=0px - webflow mobile landscape/portriat */
                    slidesPerView: 1,
                    slidesPerGroup: 1,
                    spaceBetween: 20,
                },
                480: {
                    /* when window >=0px - webflow mobile landscape/portriat */
                    slidesPerView: 1.4,
                    slidesPerGroup: 1,
                    spaceBetween: 20,
                },
                767: {
                    /* when window >= 767px - webflow tablet */
                    slidesPerView: 3,
                    slidesPerGroup: 1,
                    spaceBetween: 20,
                },
                992: {
                    /* when window >= 988px - webflow desktop */
                    slidesPerView: 3,
                    slidesPerGroup: 1,
                    spaceBetween: 20,
                },
            },
        });
    </script>
@endpush