@extends('layouts.app')

@section('content')
<div class="container my-5">
    <div class="row justify-content-center">
        @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') !!}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        @php
            $video_id = $video->id;
        @endphp

        <div class="row mb-3">
            <div class="col-12 col-lg-8 mb-3 mb-lg-auto mt-lg-auto">
                <div class="video-content">
                    @if ($video->provider != 'tiktok')
                        @if(strpos(strtolower($video->embed_url), 'youtube.com'))
                            @include('video.youtube')
                        @else
                            <div class="" style="padding:56.25% 0 0 0;position:relative;">
                                <iframe
                                    id="video_iframe"
                                    src="{{ $video->embed_url }}" 
                                    style="position:absolute;top:0;left:0;width:100%;height:100%;"
                                    frameborder="0" allow="autoplay; fullscreen; picture-in-picture"
                                ></iframe>
                            </div>
                        @endif
                    @else
                        {{-- Tiktok Embed Video --}}
                        {!! $video->embed_url !!}
                        {{-- <!--?php $oembed_data = get_oembed_data($video->url, $video->provider) ?-->
                        {!! $oembed_data->html !!} --}}
                    @endif
                </div>
            </div>
            
            <div class="col-12 col-lg-4 my-auto position-relative">
                <div class="video-data">

                    <div class="row mb-2">
                        <div class="col-12">
                            <div class="video-title">{!! __($video->name) !!}</div>
                        </div>
                    </div>
                    <div class="row mb-2">
                            <div class="col-auto my-2">
                                <div class="video-category category_{{$video->category->id}}">{!! __($video->category->name) !!}</div>
                            </div>
                            <div class="col-auto my-2 video_creator">{{ $video->user->name }}</div>
                            <div class="col-auto my-2 video-click_counter">{{ $video->click_counter ?? 0 }}</div>
                            <div class="col-auto my-2 video-created_at">{{ $video->created_at->diffForHumans() }}</div>
                    </div>
                    {{-- <div class="row mb-2">
                        <div class="col-12 d-flex justify-content-start">
                            <div class="video-category category_{{$video->category->id}}">{!! __($video->category->name) !!}</div>
                        </div>
                    </div> --}}

                    {{-- Ha nem a felhasználóé a videó, akkor megjelenítjük a szavazást || Ha a felhasználóé a videó, és aktív a hozzátartozó verseny akkor megjelenítjük a szavazást, egyébként nem. --}}
                    @if (!isset($owner_video) || (isset($owner_video) && ($owner_video == false || ($owner_video == true && $video->competition->status == 'active'))))
                        <div class="video-vote-box mt-4 pt-4">
                            <div class="row mb-3">
                                <div class="col d-flex justify-content-center">
                                    <div class="video-vote_number"><span id="vote_number_{{$video->id}}"></span></div>
                                </div>
                                <div class="col d-flex justify-content-center">
                                    <div class="video-rank">{{ $video->get_rank($video->id)['rank'] ?? $video->rank }}</div>
                                </div>
                            </div>


                            {{-- Counter --}}
                            <div class="row mb-3">
                                @include('video/counter_small')
                            </div>
                            
                            {{-- Szavazás --}}
                            <div class="mb-3">
                                <div>
                                    {{-- {!! RecaptchaV3::field('register') !!} --}}
                                    
                                    <a href="javascript:void(0);" class="btn btn-primary w-100" onclick="@if (Auth::check()) 
                                        $(function() { send_vote('{{ route('user.vote.index', ['locale' => app()->getLocale(), 'id' => $video->id]) }}') }); 
                                        @else 
                                            formModalNew({
                                                'url': '{{ route('login', app()->getLocale()) }}',
                                                'title': '{!! __('link.login') !!}',
                                                'button': '{!! __('button.go') !!}',
                                                'modalFooterVisible': false,
                                                'sendButtonClass': '',
                                                'leftBgImage': '',
                                                'leftContent': false,
                                            },function () {}, function () {}, function () { location.reload(); } ); 
                                        @endif">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart-fill" viewBox="0 0 16 16">
                                                <path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/>
                                            </svg>
                                            {!! __('link.sendVote') !!}
                                        </a>
                                </div>
                        
                                {{-- Szavazás üzenetek --}}
                                <div id="success_vote_message_{{$video->id}}" class="vote_message alert alert-success alert-dismissible fade show d-none mt-3" role="alert">
                                    <span></span>
                                    <a href="javascript:void(0);" class="btn-close" onclick="hide_vote_message()"></a>
                                </div>
                                <div id="error_vote_message_{{$video->id}}" class="vote_message alert alert-danger alert-dismissible fade show d-none mt-3" role="alert">
                                    <span></span>
                                    <a href="javascript:void(0);" class="btn-close" onclick="hide_vote_message()"></a>
                                </div>
                                
                                @push('scripts')
                                    <script>
                                        $(document).ready( function () {
                                            vote_number({{ $video->id }}, "{{ route('vote.number', ['locale' => app()->getLocale(), 'id' => "$video->id"]) }}");
                                        });
                                    </script>
                                @endpush

                            </div>
                            
                            {{-- Copy To Clipboard --}}
                            <div class="mb-3">
                                <!-- The text field -->
                                <input id="video_sharing_url_{{$video->id}}" type="hidden" value="{{ route('video.index', ['locale' => app()->getLocale(), 'id' => $video->id, 'show_dashboard' => 'true']) }}">
                                <!-- The button used to copy the url -->
                                <button class="btn btn-secondary btn-share w-100" onclick="copy_to_clipboard('video_sharing_url_{{$video->id}}', {{$video->id}})">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-share-fill" viewBox="0 0 16 16">
                                        <path d="M11 2.5a2.5 2.5 0 1 1 .603 1.628l-6.718 3.12a2.499 2.499 0 0 1 0 1.504l6.718 3.12a2.5 2.5 0 1 1-.488.876l-6.718-3.12a2.5 2.5 0 1 1 0-3.256l6.718-3.12A2.5 2.5 0 0 1 11 2.5z"/>
                                    </svg>
                                    {!! __('button.copyToClipboard') !!}
                                </button>
                    
                                {{-- Copy To Clipboard üzenetek --}}
                                <div id="success_copyToClipboard_message_{{$video->id}}" class="copyToClipboard_message alert alert-success alert-dismissible fade show d-none mt-3" role="alert">
                                    <span>{!! __('message.success.copyToClipboard') !!}</span>
                                    <a href="javascript:void(0);" class="btn-close" onclick="hide_copyToClipboard_message()"></a>
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        {{-- Recently added videos --}}
        @if ($more_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' => $more_videos, 'carousel_id' => 'fresh_videos_carousel'])

            {{-- <div class="row row-cols-1 row-cols-md-2 row-cols-lg-4">
                @forelse ($more_videos as $more_video)
                    <div class="col">
                        @include('video.layout.card', ['video' => $more_video])
                    </div>
                @empty
                    @include('video.layout.empty', ['title' => __('video.notFoundSearch.title'), 'description' => __('video.notFoundSearch.description')])
                @endforelse
            </div> --}}
        </div>
        @endif

    </div>
</div>

@push('scripts')
<script>
     $(document).ready( function () {
        click_counter('{{ route('video.click_counter', ['locale' => app()->getLocale(), 'id' => $video_id]) }}');
     });
</script>
@endpush
@endsection