@extends('site.master', [ 'view' => 't-gradient-bg' ])

@section('title', $page->translation->meta_title)
@section('meta_description', $page->translation->meta_description)

@section('content')

    <div class="t-webinars  ">


        <div class="l-grid">
            <div>

                @if($page->languageImages() !== null)
                    <div class="t-webinars__image">
                        @include('site.components.image', [
                            'images' => $page->languageImages()
                        ])
                    </div>
                @endif

                <div class="t-webinars__heading">
                    @include('site.components.heading', [
                        'headingType' => 'h1',
                        'headingTitle' => $page->translation->visual_name,
                        'headingSubTitle' => $page->translation->description
                    ])
                </div>

            </div>
        </div>

        <div class="t-webinars__body  o-blocks">
            @include('site.organisms.components')
        </div>


        <div class="t-webinars__main l-grid js-webinar-tabs">
            <div>
                <div class="c-heading ">
                    <h2 class="t-webinars__title">@lang('site/global.featured_webinars')</h2>
                </div>
                <div class="t-webinars__tabs">
                    <div>


                        @foreach($tabs as $index => $tab)


                            <a class="t-webinars__tabs-tab js-tab
                                        @if($index === 0) active @endif"
                                 data-tab="{{$index}}"
                               href="{{'#'.\Illuminate\Support\Str::slug($tab->translation->name)}}"
                            >{{$tab->translation->name}}
                            </a>

                        @endforeach

                        <a class="t-webinars__tabs-tab js-tab" href="{{'#'.\Illuminate\Support\Str::slug(__('site/global.all'))}}" data-tab="{{count($tabs)}}">@lang('site/global.all')</a>

                    </div>
                </div>
                @foreach($tabs as $index => $tab)

                    <div class="t-webinars__items t-webinars__items--tabs js-tab-blocks l-matrix @if($index === 0) active @endif"
                         data-tab="{{$index}}">

                        @foreach($tab->webinars as $webinar)
                            @if($webinar->translation->active === 1)
                            <div class="l-matrix__item ">
                                <div class="c-card  c-card--shadow  js-youtube-modal-button"
                                     data-youtube="{{ $webinar->translation->url }}">

                                    @if($webinar->languageImages() !== null)
                                        <div class="c-card__image">
                                            <div class="c-card__img"
                                                 style="background-image: url('{{ str_replace('\\', '/', $webinar->languageImages()->first()->medium_image_url) }}');"></div>
                                            <img alt="{{ $webinar->languageImages()->first()->name }}"
                                                 src="{{ str_replace('\\', '/', $webinar->languageImages()->first()->medium_image_url) }}"/>
                                        </div>
                                    @endif

                                    <div class="c-card__body">
                                        <h4 class="c-card__title">{{ $webinar->translation->name }}</h4>

                                        <div class="c-card__description">
                                            {!! $webinar->translation->description !!}
                                        </div>

                                        <div class="c-card__action">
                                            <p class="c-text-button  c-text-button--icon ">
                                                <span class="c-text-button__text">@lang('site/global.watch_now')</span>
                                                <i class="c-text-button__icon">@include('site.components.icons.longArrow')</i>
                                            </p>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            @endif
                        @endforeach

                    </div>

                @endforeach

                <div class="t-webinars__items t-webinars__items--tabs js-tab-blocks l-matrix"
                     data-tab="{{count($tabs)}}">

                    @foreach($allTabs as $webinar)
                        @if($webinar->translation->active === 1)
                        <div class="l-matrix__item ">
                            <div class="c-card  c-card--shadow  js-youtube-modal-button"
                                 data-youtube="{{ $webinar->translation->url }}">

                                @if($webinar->languageImages() !== null)
                                    <div class="c-card__image">
                                        <div class="c-card__img"
                                             style="background-image: url('{{ str_replace('\\', '/', $webinar->languageImages()->first()->medium_image_url) }}');"></div>
                                        <img alt="{{ $webinar->languageImages()->first()->name }}"
                                             src="{{ str_replace('\\', '/', $webinar->languageImages()->first()->medium_image_url) }}"/>
                                    </div>
                                @endif

                                <div class="c-card__body">
                                    <h4 class="c-card__title">{{ $webinar->translation->name }}</h4>

                                    <div class="c-card__description">
                                        {!! $webinar->translation->description !!}
                                    </div>

                                    <div class="c-card__action">
                                        <p class="c-text-button  c-text-button--icon ">
                                            <span class="c-text-button__text">@lang('site/global.watch_now')</span>
                                            <i class="c-text-button__icon">@include('site.components.icons.longArrow')</i>
                                        </p>
                                    </div>
                                </div>

                            </div>
                        </div>
                        @endif
                    @endforeach

                </div>

            </div>
        </div>

    </div>

    @include('site.components.youtubeModalOverlay')

@endsection