@section('title', __('site.page_videos_title'))

@section('head')
    <link rel="stylesheet" href="{{ assetv('/assets/css/pages/siteconfig.css') }}">
    <link rel="stylesheet" href="{{ assetv('/assets/css/pages/sitevideos.css') }}">
@endsection

@php
    $breadcrumb = [
        ['label' => __('site.menu_item_3')],
        ['label' => __('site.menu_item_3_sub_2')],
    ];

    $sources = ['0' => 'Embed', '1' => 'YouTube', '2' => 'Vimeo'];
    $sourceIcons = ['0' => 'fa-code', '1' => 'fa-brands fa-youtube', '2' => 'fa-brands fa-vimeo-v'];
@endphp

@include('includes/header-novo')

<main class="app-main">

    @include('includes.breadcrumb')

    <header class="page-head">
        <div>
            <h1 class="page-title">{{ __('site.page_videos_h1') }}</h1>
            <p class="page-sub">{{ __('site.page_videos_sub') }}</p>
        </div>
        <a class="btn btn--primary" href="{{ route('site.videos.c') }}">
            <i class="fa-solid fa-plus"></i> {{ __('site.page_videos_add_title') }}
        </a>
    </header>

    @include('includes.flash')

    <div class="vlist"
         data-url-remove="{{ route('site.videos.d') }}"
         data-url-remove-list="{{ route('site.videos.d.list') }}"
         data-msg-delete-title="{{ __('site.page_videos_alert_title_1') }}"
         data-msg-delete-text="{{ __('site.confirm_delete_text') }}"
         data-msg-delete-btn="{{ __('site.btn_remove') }}"
         data-msg-delete-many-one="{{ __('site.page_videos_alert_title_2') }}"
         data-msg-delete-many="{{ __('site.page_videos_alert_title_2_2') }} %n% {{ __('site.page_videos_alert_title_2_2_2') }}">

        <div class="ltools">
            <form class="ltools__search" method="GET" action="{{ route('site.videos.r') }}">
                <i class="fa-solid fa-magnifying-glass"></i>
                <input class="input" type="text" name="s" value="{{ $s }}" autocomplete="off"
                       placeholder="{{ __('site.page_videos_search') }}">
                @if($cat)
                    <input type="hidden" name="cat" value="{{ $cat }}">
                @endif
            </form>

            <form class="ltools__pick" method="GET" action="{{ route('site.videos.r') }}">
                @if($s)
                    <input type="hidden" name="s" value="{{ $s }}">
                @endif
                <select class="input" name="cat" onchange="this.form.submit()">
                    <option value="">{{ __('site.page_video_cat_all') }}</option>
                    @foreach($allCats as $c)
                        <option value="{{ $c->id }}" @selected($cat === $c->id)>{{ $c->name }}</option>
                    @endforeach
                    <option value="-1" @selected($cat === -1)>{{ __('site.page_video_cat_none') }}</option>
                </select>
            </form>

            <a class="btn btn--soft-blue" href="{{ route('site.videos.r.categories') }}">
                <i class="fa-solid fa-tags"></i> {{ __('site.page_video_cat_manage') }}
            </a>
        </div>

        @if($s || $cat)
            <div class="pfilter">
                <span>
                    {{ __('site.search_results') }}
                    <strong>{{ $s ?: ($cat === -1 ? __('site.page_video_cat_none') : optional($allCats->firstWhere('id', $cat))->name) }}</strong>
                </span>
                <a href="{{ route('site.videos.r') }}" title="{{ __('site.page_post_search_clear') }}">
                    <i class="fa-solid fa-xmark"></i>
                </a>
            </div>
        @endif

        @if($apiError)
            <div class="apierr">
                <span class="apierr__ico"><i class="fa-solid fa-plug-circle-xmark"></i></span>
                <p class="apierr__text">{{ $apiError }}</p>
            </div>
        @elseif($allVideos->count() == 0)
            <div class="cempty">
                <span class="apierr__ico"><i class="fa-solid fa-film"></i></span>
                <p class="apierr__text">{{ __('site.page_videos_search_noreg') }}</p>
            </div>
        @else
            <div class="lbulk" hidden>
                <span class="lbulk__n"></span>
                <button class="btn btn--danger lbulk__del" type="button">
                    <i class="fa-solid fa-trash"></i> {{ __('site.btn_remove') }}
                </button>
            </div>

            <div class="vgrid">
                @foreach($allVideos as $video)
                    <article class="vcard" data-id="{{ $video->id }}" data-title="{{ $video->title }}">
                        <label class="vcard__pick">
                            <input type="checkbox" class="vcard__box">
                            <span class="pickmark"><i class="fa-solid fa-check"></i></span>
                        </label>

                        @php
                            $thumb = video_thumb($video->type, $video->thumbnail);
                            $cover = $video->url ? 'a' : 'span';
                        @endphp

                        {{-- a capa abre o vídeo, que libera o rodapé para editar e remover --}}
                        <{{ $cover }} class="vcard__thumb"
                            @if($video->url) href="{{ $video->url }}" target="_blank" rel="noopener" title="{{ __('site.page_videos_open') }}" @endif>
                            @if($thumb)
                                <img src="{{ $thumb }}" alt="" loading="lazy">
                            @else
                                <i class="fa-solid fa-film vcard__ph"></i>
                            @endif

                            @if($video->url)
                                <span class="vcard__play"><i class="fa-solid fa-play"></i></span>
                            @endif

                            <span class="vcard__src" title="{{ $sources[$video->type] ?? '' }}">
                                <i class="{{ str_contains($sourceIcons[$video->type] ?? '', 'brands') ? $sourceIcons[$video->type] : 'fa-solid ' . ($sourceIcons[$video->type] ?? 'fa-code') }}"></i>
                            </span>
                        </{{ $cover }}>

                        <div class="vcard__body">
                            <strong class="vcard__title" title="{{ $video->title }}">{{ $video->title }}</strong>

                            <div class="vcard__meta">
                                @if($video->category_name)
                                    <span class="vpill"><i class="fa-solid fa-tag"></i> {{ $video->category_name }}</span>
                                @else
                                    <span class="vpill vpill--none">{{ __('site.page_video_cat_none') }}</span>
                                @endif
                                <span class="vcard__date">{{ \Carbon\Carbon::parse($video->created_at)->format('d/m/Y') }}</span>
                            </div>
                        </div>

                        <div class="cardacts">
                            <a class="cardact" href="{{ route('site.videos.u', $video->id) }}">
                                <i class="fa-solid fa-pen"></i> {{ __('site.action_edit') }}
                            </a>
                            <button class="cardact cardact--del vcard__del" type="button">
                                <i class="fa-solid fa-trash"></i> {{ __('site.btn_remove') }}
                            </button>
                        </div>
                    </article>
                @endforeach
            </div>

            {{ $allVideos->links('vendor.pagination.painel') }}
        @endif
    </div>

</main>

@section('scripts')
    <script src="{{ assetv('/assets/js/site-videos.js') }}"></script>
@endsection

@include('includes/footer-novo')