@extends('layouts.public')
@section('title', 'Videos')

@section('content')
@include('partials.page-header', ['title' => $settings?->videos_title ?: 'Videos'])

<section class="section">
    <div class="container">
        @if($categories->isNotEmpty())
            <div class="d-flex flex-wrap justify-content-center gap-2 mb-5" id="videoFilters">
                <button type="button" class="filter-btn active" data-filter="all">Todos</button>
                @foreach($categories as $category)
                    <button type="button" class="filter-btn" data-filter="{{ Str::slug($category->name) }}">{{ $category->name }}</button>
                @endforeach
            </div>
        @endif

        @if($videos->isEmpty())
            <div class="text-center text-muted py-5">No hay videos publicados.</div>
        @else
            <div class="row g-4" id="videoGrid">
                @foreach($videos as $video)
                    <div class="col-md-4 col-6 video-item-wrap" data-category="{{ $video->category ? Str::slug($video->category) : 'all' }}" data-aos="fade-up" data-aos-delay="{{ $loop->index * 80 }}">
                        <div class="video-thumb" data-embed="{{ youtube_embed($video->url) }}" data-title="{{ $video->title }}">
                            @if(youtube_thumb($video->url))
                                <img src="{{ youtube_thumb($video->url) }}" alt="{{ $video->title }}">
                            @endif
                            <div class="play-overlay"><i class="bi bi-play-circle-fill"></i></div>
                        </div>
                        <div class="mt-2">
                            <div class="fw-semibold">{{ $video->title }}</div>
                            @if($video->category)<div class="text-muted small">{{ $video->category }}</div>@endif
                        </div>
                    </div>
                @endforeach
            </div>
        @endif
    </div>
</section>
@endsection

@push('scripts')
<script>
    document.querySelectorAll('#videoFilters .filter-btn').forEach(function (btn) {
        btn.addEventListener('click', function () {
            document.querySelectorAll('#videoFilters .filter-btn').forEach(function (b) { b.classList.remove('active'); });
            btn.classList.add('active');
            var filter = btn.getAttribute('data-filter');
            document.querySelectorAll('#videoGrid .video-item-wrap').forEach(function (wrap) {
                var cat = wrap.getAttribute('data-category') || 'all';
                wrap.style.display = (filter === 'all' || cat === filter) ? '' : 'none';
            });
        });
    });
</script>
@endpush