@extends('layouts.app')

@section('content')
<div class="welcome w-100 pb-4">
    <div class="container pt-4">
        <div class="row justify-content-center">
            <div class="col-md-12">
                <div class="card" style="background: unset !important; border: 0px !important;">
                    <div class="card-header" style="background: unset !important; border: 0px !important;">

                        @if(Session::has('verified'))
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            {!! Session::get('verified') !!}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                        @endif
    
                        @if(Session::has('success_message'))
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            {!! Session::get('success_message') !!}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                        @endif
                        @if(Session::has('error_message'))
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            {!! Session::get('error_message') !!}
                            {!! Session::forget('error_message') !!}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                        @endif 

                        <div class="app-name d-flex justify-content-center" style="font-size: 25px;">{!! __('welcome.title.1') !!}</div>
                        <div class="d-flex justify-content-center" style="font-size: 45px; font-weight:600;">{!! __('welcome.title.2') !!}</div>

                        @if (isset($active_competition) && $active_competition != null)
                            <div class="d-flex justify-content-center fw-bold font-size-h2 text-center">{!! __('welcome.title.3', [
                                'first_award' => json_decode($active_competition->award)[0],
                                'second_award' => json_decode($active_competition->award)[1],
                                'third_award' => json_decode($active_competition->award)[2],
                                'registration_fee' => json_decode($active_competition->registration_fee, true)['USD'],
                                'competition_start_date' => $active_competition->start_date,
                                'competition_end_date' => $active_competition->end_date,
                            ]) !!}</div>
                        @else
                            <div class="d-flex justify-content-center fw-bold font-size-h2 text-center">{!! __('welcome.title.3.default') !!}</div>
                        @endif
                        
                    </div>
                    <div class="card-body">
                        @include('video/instruction')
                        @include('video/counter')

                        <div class="container mt-4 mb-1 px-2 ms-1 me-3">
                            <div class="row">
                                <div class="col-12 col-md-6 col-lg-3 pb-3 pb-lg-0 ps-0 pe-lg-4">
                                    <div class="red-block px-3 py-4" data-link="{{ route('rules', app()->getLocale()) }}">
                                        <div class="text-center mb-2"><img src="{{asset('images/rules.png')}}" alt="" srcset=""></div>
                                        <div class="text-uppercase mb-2 text-center" style="font-weight: 600">{!! __('welcome.rules.title') !!}</div>
                                        <div class="text-center">{!! __('welcome.rules.description') !!}</div>
                                    </div>
                                </div>
                                <div class="col-12 col-md-6 col-lg-3 pb-3 pb-lg-0 ps-0 pe-lg-4">
                                    <div class="red-block px-3 py-4" data-link="{{ route('video.indexlist', app()->getLocale()) }}">
                                        <div class="text-center mb-2"><img src="{{asset('images/videos.png')}}" alt="" srcset=""></div>
                                        <div class="text-uppercase mb-2 text-center" style="font-weight: 600">{!! __('welcome.videos.title') !!}</div>
                                        <div class="text-center">{!! __('welcome.videos.description') !!}</div>
                                    </div>
                                </div>
                                <div class="col-12 col-md-6 col-lg-3 pb-3 pb-lg-0 ps-0 pe-lg-4">
                                    <div class="red-block px-3 py-4" data-link="{{ route('video.winner_indexlist', app()->getLocale()) }}">
                                        <div class="text-center mb-2"><img src="{{asset('images/winners.png')}}" alt="" srcset=""></div>
                                        <div class="text-uppercase mb-2 text-center" style="font-weight: 600">{!! __('welcome.winners.title') !!}</div>
                                        <div class="text-center">{!! __('welcome.winners.description') !!}</div>
                                    </div>
                                </div>
                                <div class="col-12 col-md-6 col-lg-3 pb-3 pb-lg-0 ps-0 pe-lg-2">
                                    <div class="red-block px-3 py-4" onclick="scrollToId('opinions');">
                                        <div class="text-center mb-2"><img src="{{asset('images/opinions.png')}}" alt="" srcset=""></div>
                                        <div class="text-uppercase mb-2 text-center" style="font-weight: 600">{!! __('welcome.opinions.title') !!}</div>
                                        <div class="text-center">{!! __('welcome.opinions.description') !!}</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@php
    $show_video_block = false;
    if($fresh_videos != null && $fresh_videos->count() >= 4) $show_video_block = true;
    if($winner_videos != null && $winner_videos->count() > 0) $show_video_block = true;
@endphp
@if ( $show_video_block )
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card" style="border: 0px !important">
                <div class="card-header my-4" style="background: unset !important; border: 0px !important;">
                    <div class="d-flex justify-content-center text-uppercase" style="font-size: 15px; color: #000000BF;">{!! __('welcome.videoList.title.1') !!}</div>
                    <div class="d-flex justify-content-center" style="z-index: 2; position: relative; font-size: 40px; font-weight:600;">{!! __('welcome.videoList.title.2') !!}</div>
                </div>
                <div class="card-body">


                    @if($fresh_videos->count() >= 4 || $top_videos->count() >= 4 || $winner_videos)
                        {{-- Recently added videos --}}
                        @if ($fresh_videos->count() >= 4)
                        <div class="video-list recently-video-list">
                            <div class="video-list-title">
                                {!! __('video.list.recentlyAddedList.title') !!}
                            </div>

                            @include('video.layout.slider', ['videos' => $fresh_videos, 'carousel_id' => 'fresh_videos_carousel'])

                            {{-- <div class="row row-cols-1 row-cols-md-2 row-cols-lg-4">
                                @forelse ($fresh_videos as $fresh_video)
                                    <div class="col">
                                        @include('video.layout.card', ['video' => $fresh_video])
                                    </div>
                                @empty
                                    @include('video.layout.empty', ['title' => __('video.notFoundSearch.title'), 'description' => __('video.notFoundSearch.description')])
                                @endforelse
                            </div> --}}
                        </div>
                        <div class="mb-4 pb-2">
                            <a href="{{ route('video.indexlist', app()->getLocale()) }}">{!! __('link.showAllVideo') !!}
                                <svg width="13" height="10" viewBox="0 0 13 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M7.71967 1.28033C7.42678 0.987437 7.42678 0.512563 7.71967 0.21967C8.01256 -0.0732233 8.48744 -0.0732233 8.78033 0.21967L12.7803 4.21967C13.0732 4.51256 13.0732 4.98744 12.7803 5.28033L8.78033 9.28033C8.48744 9.57322 8.01256 9.57322 7.71967 9.28033C7.42678 8.98744 7.42678 8.51256 7.71967 8.21967L10.4393 5.5H0.75C0.335787 5.5 0 5.16421 0 4.75C0 4.33579 0.335787 4 0.75 4H10.4393L7.71967 1.28033Z" fill="#2F4858"/>
                                </svg>
                            </a>
                        </div>
                        @endif
                

                        {{-- First 9 videos --}}
                        @if ($top_videos->count() >= 4)
                        <div class="video-list top-video-list">
                            <div class="video-list-title">
                                {!! __('video.list.topList.title') !!}
                            </div>

                            @include('video.layout.slider', ['videos' => $top_videos, 'carousel_id' => 'top_videos_carousel'])

                            {{-- <div class="row row-cols-1 row-cols-md-2 row-cols-lg-4">
                                @forelse ($top_videos as $top_video)
                                    <div class="col">
                                        @include('video.layout.card', ['video' => $top_video])
                                    </div>
                                @empty
                                    @include('video.layout.empty', ['title' => __('video.notFoundSearch.title'), 'description' => __('video.notFoundSearch.description')])
                                @endforelse
                            </div> --}}
                        </div>
                        <div class="mb-4 pb-2">
                            <a href="{{ route('video.indexlist', app()->getLocale()) }}">{!! __('link.showAllVideo') !!}
                                <svg width="13" height="10" viewBox="0 0 13 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M7.71967 1.28033C7.42678 0.987437 7.42678 0.512563 7.71967 0.21967C8.01256 -0.0732233 8.48744 -0.0732233 8.78033 0.21967L12.7803 4.21967C13.0732 4.51256 13.0732 4.98744 12.7803 5.28033L8.78033 9.28033C8.48744 9.57322 8.01256 9.57322 7.71967 9.28033C7.42678 8.98744 7.42678 8.51256 7.71967 8.21967L10.4393 5.5H0.75C0.335787 5.5 0 5.16421 0 4.75C0 4.33579 0.335787 4 0.75 4H10.4393L7.71967 1.28033Z" fill="#2F4858"/>
                                </svg>
                            </a>
                        </div>
                        @endif

                        {{-- Winner videos --}}
                        @if (isset($winner_videos))
                        <div class="video-list top-video-list">
                            <div class="video-list-title">
                                {!! __('video.list.prevWinnerVideoList.title') !!}
                            </div>
                            @if ($winner_videos->count() >= 4)
                                @include('video.layout.slider', ['videos' => $winner_videos, 'carousel_id' => 'winner_videos_carousel', 'winner' => true])
                            @else
                            <div class="row row-cols-1 row-cols-md-2 row-cols-lg-4">
                                @forelse ($winner_videos as $winner_video)
                                    <div class="col">
                                        @include('video.layout.card', ['video' => $winner_video, 'winner' => true])
                                    </div>
                                @empty
                                    @include('video.layout.empty', ['title' => __('video.notFoundSearch.title'), 'description' => __('video.notFoundSearch.description')])
                                @endforelse
                                <div class="col">
                                    <div class="video-upload-card">
                                        <div class="mb-3">
                                            {!! __('winner.video.uploadVideo.text') !!}
                                        </div>
                                        <a href="@if(auth()->user()) {{ route('user.registration.create', app()->getLocale()) }} @else javascript:void(0); @endif" class="btn btn-primary" @if(!auth()->user()) 
                                            onclick="formModalNew({
                                                'url': '{{ route('login_player', app()->getLocale()) }}',
                                                'title': '{!! __('link.login') !!}',
                                                'button': '{!! __('button.go') !!}',
                                                'modalFooterVisible': false,
                                                'sendButtonClass': '',
                                                'leftBgImage': '',
                                                'leftContent': false,
                                            },function () {}, function () {}, function () { window.location='{{ route('home', app()->getLocale())}}'; } );" @endif>{!! __('button.uploadVideo') !!}</a>                                   
                                    </div>
                                </div>
                            </div>
                            @endif
                        </div>
                        @endif
                    @else
                        @include('video.layout.empty', ['title' => __('video.notFoundSearch.title'), 'description' => __('video.notFoundSearch.description')])
                    @endif
                    
                </div>
            </div>
        </div>
    </div>
</div>
@endif

@if(!empty($messages))
    @include('video.layout.opinion')
@endif

@push('scripts')
<script>
    $( document ).ready(function() {
        @if(Session::has('show_video_page'))
            // Főoldal mutatása 5mp-ig
            setTimeout( function() {
                window.location = "{{ Session::get('show_video_page') }}";
            }, 5000);
        @endif 
    });
</script>
@endpush
@endsection