@extends('layouts.app')

@section('content')

<div class="container">
    <div class="row mx-1 justify-content-center">
        
        <div class="mt-4">
            @include('video/counter')
        </div>

        <div>
            @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
        </div>

        @if (!$videos->isEmpty() || app('request')->input('filter') || isset($selected_category))
            {{-- 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>
            @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>
            @endif

            {{-- All videos --}}
            <div class="video-list all-video-list">

                <div class="video-list-title">
                    {!! __('video.list.allList.title') !!}
                </div>

                <div class="row mb-3">
                    {{-- Kategóriák --}}
                    <div class="col-12 col-md-4 col-lg-5 d-flex justify-content-start mb-3 mb-md-0">
                        <div class="my-auto me-2" style="white-space: nowrap;">{!! __('Categories') !!}:</div>
                        <div class="my-auto select-width">
                            <select class="video-list-category-select form-select @error('category') is-invalid @enderror" id="category_id" name="category_id" onchange="window.location=$(this).val()">
                                <option value="{{ route('video.indexlist', app()->getLocale()) }}">...</option>
                                @foreach ($categories as $competition_category)
                                    <option value="{{ route('video.list_category', ['locale' => app()->getLocale(), 'category_id' => $competition_category['id']])}}" @if(isset($selected_category) && $selected_category->id == $competition_category['id']) selected @endif>{!! __($competition_category['name']) !!}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
        
        
                    {{-- Szűrő --}}
                    <div class="col-12 col-md-4 col-lg-4 order-last order-md-1 mt-3 mt-md-0 d-flex justify-content-end">
                        <form class="search-form my-auto w-100" action="@if(isset($selected_category)) {{ route('video.list_category', ['locale' => app()->getLocale(), 'category_id' => $selected_category->id]) }} @else {{ route('video.list_filter', app()->getLocale()) }} @endif" method="GET">
                            <input type="text" name="filter" value="{{$filter ?? ''}}" class="search-input w-100" placeholder="{!! __('button.search') !!}" required/>
                            <span class="search-input-icon"></span>
                            {{-- <button type="submit">{!! __('button.search') !!}</button> --}}
                        </form>
                    </div>

                    {{-- Rendezés --}}
                    @php
                        $order = app('request')->input('order') ?? '';
                        $filter = app('request')->input('filter') ?? '';
                    @endphp
                    <div class="col-12 col-md-4 col-lg-3 order-md-2 d-flex justify-content-md-end">
                        <div class="my-auto me-2" style="white-space: nowrap;">{!! __('order.title') !!}</div>
                        <div class="form-group my-auto select-width">
                            <select class="form-select video-list-order-picker" id="video-list-order-picker" name="video-list-order-picker">
                                <option value="{{ route('video.indexlist', ['locale' => app()->getLocale(), 'order' => 'none']) }}" @if( $order == '' ) selected @endif>{!! __('order.type.all_video') !!}</option>
                                <option value="{{ route('video.indexlist', ['locale' => app()->getLocale(), 'order' => 'top_first']) }}" @if( $order == 'top_first' ) selected @endif>{!! __('order.type.top_first') !!}</option>
                                <option value="{{ route('video.indexlist', ['locale' => app()->getLocale(), 'order' => 'fresh_first']) }}" @if( $order == 'fresh_first' ) selected @endif>{!! __('order.type.fresh_first') !!}</option>
                                <option value="{{ route('video.indexlist', ['locale' => app()->getLocale(), 'order' => 'old_frist']) }}" @if( $order == 'old_frist' ) selected @endif>{!! __('order.type.old_frist') !!}</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4">
                    @forelse ($videos as $video)
                        <div class="col">
                            @include('video.layout.card', ['video' => $video])
                        </div>
                    @empty
                        @php
                            if(isset($filter))
                                $description = __('message.error.notFoundSearchedVideo', ['filter' => ($filter != '') ? $filter : __($selected_category->name)]);
                            elseif(isset($selected_category->name))
                                $description = __('message.error.notFoundSearchedVideo', ['filter' => __($selected_category->name)]);
                            else
                                $description = __('message.error.notFoundVideo');
                        @endphp

                        @include('video.layout.empty', ['title' => __('video.notFoundSearch.title'), 'description' => $description])
                    @endforelse
                </div>
                {{-- Paginate --}}
                @if (isset($video_list_data['query']) && $video_list_data['max_page'] > 1)
                        <div class="row paginate">
                            <div class="col d-flex justify-content-start">
                                @if ($video_list_data['prev_page'] >= 1)
                                    @if (isset($selected_category))
                                        <a class="btn btn-primary" href="{{ route('video.list_category', ['locale' => app()->getLocale(), 'category_id' => $selected_category, 'current_page' => $video_list_data['prev_page']]) }}">{!! __('button.prev') !!}</a>
                                    @elseif (!isset($selected_category) && $filter != '')
                                        <a class="btn btn-primary" href="{{ route('video.list_filter', ['locale' => app()->getLocale(), 'filter' => $filter, 'current_page' => $video_list_data['prev_page']]) }}">{!! __('button.prev') !!}</a>
                                    @else
                                        <a class="btn btn-primary" href="{{ route('video.indexlist', ['locale' => app()->getLocale(), 'current_page' => $video_list_data['prev_page']]) }}">{!! __('button.prev') !!}</a>
                                    @endif
                                @endif
                            </div>
                            <div class="col d-flex justify-content-center">
                                {{ $video_list_data['current_page'].'/'.$video_list_data['max_page'] }}
                            </div>
                            <div class="col d-flex justify-content-end">
                                @if ($video_list_data['next_page'] <= $video_list_data['max_page'])
                                    @if (isset($selected_category))
                                        <a class="btn btn-primary" href="{{ route('video.list_category', ['locale' => app()->getLocale(), 'current_page' => $video_list_data['next_page'], 'category_id' => $selected_category]) }}">{!! __('button.next') !!}</a>
                                    @elseif (!isset($selected_category) && $filter != '')
                                        <a class="btn btn-primary" href="{{ route('video.list_filter', ['locale' => app()->getLocale(), 'filter' => $filter, 'current_page' => $video_list_data['next_page']]) }}">{!! __('button.next') !!}</a>
                                    @else
                                        <a class="btn btn-primary" href="{{ route('video.indexlist', ['locale' => app()->getLocale(), 'current_page' => $video_list_data['next_page']]) }}">{!! __('button.next') !!}</a>
                                    @endif
                                @endif
                            </div>
                        </div>
                @endif
            </div>
        @else
            @include('video.layout.empty', ['title' => __('video.notFound.title'), 'description' => __('video.notFound.description')])
        @endif
    </div>
</div>
@push('scripts')

@if ( (isset($order) && $order != '') || (isset($filter) && $filter != '') || (isset($selected_category) && $selected_category != ''))
<script>
$(document).ready(function() {
    $('html, body').animate({
        scrollTop: $(".all-video-list").offset().top
    }, 500);
});
</script>
@endif
    
@endpush
@endsection