@extends('layouts.app')

@section('title', 'Video Gallery - Saba Remedies')

@section('content')
<div class="bg-gradient-to-r from-emerald-800 to-teal-900 text-white py-10">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h1 class="text-2xl sm:text-3xl font-extrabold">Video Gallery</h1>
        <p class="text-xs text-emerald-200 mt-1">Health talks, Unani herbal formulations guide, and doctor lectures</p>
    </div>
</div>

<section class="py-12 bg-slate-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <!-- Category Filter Tabs -->
        @if(isset($categories) && $categories->count() > 0)
            <div class="flex flex-wrap gap-2 mb-8 justify-center">
                <a href="{{ route('pages.video-gallery') }}" class="px-4 py-2 rounded-full text-xs font-bold transition-colors {{ !isset($category) ? 'bg-emerald-600 text-white' : 'bg-white border border-slate-200 text-slate-700 hover:bg-slate-50' }}">
                    All Videos
                </a>
                @foreach($categories as $cat)
                    <a href="{{ route('pages.video-gallery.cat', ['id' => $cat->id]) }}" class="px-4 py-2 rounded-full text-xs font-bold transition-colors {{ (isset($category) && $category->id == $cat->id) ? 'bg-emerald-600 text-white' : 'bg-white border border-slate-200 text-slate-700 hover:bg-slate-50' }}">
                        {{ $cat->vcat_name ?? $cat->name }}
                    </a>
                @endforeach
            </div>
        @endif

        <!-- Videos Grid -->
        @if(isset($videos) && $videos->count() > 0)
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                @foreach($videos as $vid)
                    @php
                        $videoUrl = $vid->video_link ?? $vid->video ?? '';
                        if (str_contains($videoUrl, 'watch?v=')) {
                            $parts = explode('watch?v=', $videoUrl);
                            $embedUrl = 'https://www.youtube.com/embed/' . explode('&', $parts[1])[0];
                        } elseif (str_contains($videoUrl, 'youtu.be/')) {
                            $parts = explode('youtu.be/', $videoUrl);
                            $embedUrl = 'https://www.youtube.com/embed/' . $parts[1];
                        } elseif (str_contains($videoUrl, 'embed/')) {
                            $embedUrl = $videoUrl;
                        } else {
                            $embedUrl = 'https://www.youtube.com/embed/' . $videoUrl;
                        }
                    @endphp
                    <div class="bg-white rounded-3xl border border-slate-200 overflow-hidden shadow-xs hover:shadow-md transition-all">
                        <div class="aspect-video bg-slate-900">
                            <iframe class="w-full h-full" src="{{ $embedUrl }}" title="Unani Video" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                        </div>
                    </div>
                @endforeach
            </div>

            <div class="mt-8">
                {{ $videos->links() }}
            </div>
        @else
            <div class="bg-white rounded-3xl p-12 text-center border border-slate-200 max-w-md mx-auto">
                <i class="fa-solid fa-video text-4xl text-slate-300 mb-3 block"></i>
                <h3 class="font-bold text-slate-800 text-sm">No videos found</h3>
                <p class="text-xs text-slate-500 mt-1">Videos will appear here once published.</p>
            </div>
        @endif

    </div>
</section>
@endsection