@extends('layouts.main')

@section('title', 'Videos Center - UFG')

@push('styles')
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" rel="stylesheet">

<style>
    /* Videos Page Specific Styles */
    .videos-hero {
        background-image: linear-gradient(rgba(3, 139, 185, 0.3), rgba(17, 107, 181, 0.3)), url('{{ asset("assets/2025/08/2d798430fc0e6ab7087749eab6eaa37312a3da9e-scaled.png") }}');
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
    }

    /* Missing Tailwind Classes */
    .bg-aufg-primary { background-color: #038BB9 !important; }
    .bg-aufg-primary-dark { background-color: #1169B5 !important; }
    .bg-aufg-primary\/10 { background-color: rgba(3, 139, 185, 0.1) !important; }
    .bg-aufg-bg-light { background-color: #F8F9FA !important; }
    .text-aufg-primary { color: #038BB9 !important; }
    .text-aufg-primary-dark { color: #1169B5 !important; }
    .text-aufg-text-primary { color: #112a3b !important; }
    .text-aufg-text-secondary { color: #7A7A7A !important; }
    .bg-aufg-gradient { background: linear-gradient(135deg, #038BB9 0%, #1169B5 100%) !important; }
    .bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)) !important; }
    .from-aufg-primary { --tw-gradient-from: #038BB9; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(3, 139, 185, 0)) !important; }
    .to-aufg-primary-dark { --tw-gradient-to: #1169B5 !important; }
    .animate-fade-in-up { animation: fadeInUp 0.6s ease-out; }
    .animate-bounce { animation: bounce 2s infinite; }
    .animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
    
    /* Border Radius Classes */
    .rounded-3xl { border-radius: 1.5rem !important; }
    .rounded-full { border-radius: 9999px !important; }
    .rounded-lg { border-radius: 0.5rem !important; }
    .rounded-t-3xl { border-top-left-radius: 1.5rem !important; border-top-right-radius: 1.5rem !important; }
    
    /* Negative Margin Classes */
    .-mt-\[123px\] { margin-top: -123px !important; }
    .pt-\[200px\] { padding-top: 200px !important; }
    .pb-\[100px\] { padding-bottom: 100px !important; }

    /* Layout Classes */
    .flex { display: flex !important; }
    .flex-col { flex-direction: column !important; }
    .items-center { align-items: center !important; }
    .justify-center { justify-content: center !important; }
    .justify-between { justify-content: space-between !important; }
    .text-center { text-align: center !important; }
    .mb-16 { margin-bottom: 4rem !important; }
    .mb-6 { margin-bottom: 1.5rem !important; }
    .mb-4 { margin-bottom: 1rem !important; }
    .mb-2 { margin-bottom: 0.5rem !important; }
    .mb-12 { margin-bottom: 3rem !important; }
    .mt-12 { margin-top: 3rem !important; }
    .ml-1 { margin-left: 0.25rem !important; }
    .mx-auto { margin-left: auto !important; margin-right: auto !important; }
    .py-20 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
    .px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
    .px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
    .px-8 { padding-left: 2rem !important; padding-right: 2rem !important; }
    .py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
    .py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
    .p-1 { padding: 0.25rem !important; }
    .p-3 { padding: 0.75rem !important; }
    .p-6 { padding: 1.5rem !important; }
    .p-8 { padding: 2rem !important; }
    .max-w-7xl { max-width: 80rem !important; }
    .max-w-6xl { max-width: 72rem !important; }
    .max-w-3xl { max-width: 48rem !important; }
    .w-6 { width: 1.5rem !important; }
    .h-6 { height: 1.5rem !important; }
    .w-4 { width: 1rem !important; }
    .h-4 { height: 1rem !important; }
    .w-5 { width: 1.25rem !important; }
    .h-5 { height: 1.25rem !important; }
    .w-8 { width: 2rem !important; }
    .h-8 { height: 2rem !important; }
    .w-16 { width: 4rem !important; }
    .h-16 { height: 4rem !important; }
    .w-20 { width: 5rem !important; }
    .h-20 { height: 5rem !important; }
    .w-full { width: 100% !important; }
    .h-full { height: 100% !important; }
    .min-h-screen { min-height: 100vh !important; }
    .transform { transform: var(--tw-transform) !important; }
    .-translate-x-1\/2 { --tw-translate-x: -50% !important; transform: translateX(-50%) !important; }
    .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important; }
    .shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important; }
    .shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important; }
    .transition-all { transition-property: all !important; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; transition-duration: 150ms !important; }
    .duration-300 { transition-duration: 300ms !important; }
    .absolute { position: absolute !important; }
    .relative { position: relative !important; }
    .left-1\/2 { left: 50% !important; }
    .bottom-8 { bottom: 2rem !important; }
    .inset-0 { top: 0; right: 0; bottom: 0; left: 0 !important; }
    .z-10 { z-index: 10 !important; }
    .bg-white { background-color: white !important; }
    .bg-gray-900 { background-color: #111827 !important; }
    .bg-red-50 { background-color: #fef2f2 !important; }
    .text-red-500 { color: #ef4444 !important; }
    .text-red-600 { color: #dc2626 !important; }
    .hover\:bg-red-500:hover { background-color: #ef4444 !important; }
    .hover\:text-red-600:hover { color: #dc2626 !important; }
    .bg-white\/20 { background-color: rgba(255, 255, 255, 0.2) !important; }
    .text-white\/70 { color: rgba(255, 255, 255, 0.7) !important; }
    .inline-block { display: inline-block !important; }
    .font-semibold { font-weight: 600 !important; }
    .font-bold { font-weight: 700 !important; }
    .text-xl { font-size: 1.25rem !important; line-height: 1.75rem !important; }
    .text-2xl { font-size: 1.5rem !important; line-height: 2rem !important; }
    .text-4xl { font-size: 2.25rem !important; line-height: 2.5rem !important; }
    .text-5xl { font-size: 3rem !important; line-height: 1 !important; }
    .text-white { color: white !important; }
    .text-sm { font-size: 0.875rem !important; line-height: 1.25rem !important; }
    .text-xs { font-size: 0.75rem !important; line-height: 1rem !important; }
    .text-lg { font-size: 1.125rem !important; line-height: 1.75rem !important; }
    .leading-relaxed { line-height: 1.625 !important; }
    .leading-tight { line-height: 1.25 !important; }
    .overflow-hidden { overflow: hidden !important; }
    .object-cover { object-fit: cover !important; }
    .opacity-60 { opacity: 0.6 !important; }
    .opacity-10 { opacity: 0.1 !important; }
    .grid { display: grid !important; }
    .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
    .gap-8 { gap: 2rem !important; }
    .gap-3 { gap: 0.75rem !important; }
    .gap-2 { gap: 0.5rem !important; }
    .aspect-video { aspect-ratio: 16 / 9 !important; }
    .backdrop-blur-sm { backdrop-filter: blur(4px) !important; }
    .backdrop-blur-\[1px\] { backdrop-filter: blur(1px) !important; }
    .hover\:shadow-xl:hover { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important; }
    .hover\:scale-105:hover { transform: scale(1.05) !important; }
    .hover\:-translate-y-2:hover { transform: translateY(-0.5rem) !important; }
    .hover\:text-aufg-primary-dark:hover { color: #1169B5 !important; }
    .hover\:bg-aufg-primary:hover { background-color: #038BB9 !important; }
    .hover\:text-white:hover { color: white !important; }

    /* Responsive Classes */
    @media (min-width: 768px) {
        .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
        .md\:text-5xl { font-size: 3rem !important; line-height: 1 !important; }
        .sm\:px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
    }

    @media (min-width: 1024px) {
        .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
        .lg\:text-6xl { font-size: 3.75rem !important; line-height: 1 !important; }
        .lg\:px-8 { padding-left: 2rem !important; padding-right: 2rem !important; }
    }

    @keyframes fadeInUp {
        0% { opacity: 0; transform: translateY(20px); }
        100% { opacity: 1; transform: translateY(0); }
    }

    @keyframes bounce {
        0%, 20%, 53%, 80%, 100% { transform: translateY(0); }
        40%, 43% { transform: translateY(-10px); }
        70% { transform: translateY(-5px); }
        90% { transform: translateY(-2px); }
    }

    @keyframes pulse {
        50% { opacity: .5; }
    }
    
    /* Video Modal Responsive Styles */
    @media (max-width: 768px) {
        #videoModal .modal-dialog {
            max-width: 95vw !important;
            width: 95vw !important;
            margin: 10px auto !important;
        }
        
        #videoModal .modal-title {
            font-size: 1rem !important;
        }
        
        #videoModal .close {
            font-size: 1.2rem !important;
        }
    }
    
    @media (max-width: 576px) {
        #videoModal .modal-dialog {
            max-width: 98vw !important;
            width: 98vw !important;
            margin: 5px auto !important;
        }
    }
    
    /* Ensure video iframe is responsive */
    .embed-responsive {
        position: relative;
        display: block;
        width: 100%;
        padding: 0;
        overflow: hidden;
    }
    
    .embed-responsive::before {
        content: "";
        display: block;
        padding-top: 56.25%; /* 16:9 aspect ratio */
    }
    
    .embed-responsive-item {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }
    
    /* Clickable thumbnail hover effects */
    .cursor-pointer:hover {
        opacity: 0.8 !important;
        transform: scale(1.02);
        transition: all 0.3s ease;
    }
    
    /* Remove unwanted underlines on hover */
    a, a:hover, a:focus, a:active, a:visited {
        text-decoration: none !important;
    }
    
    button, button:hover, button:focus, button:active {
        text-decoration: none !important;
    }
    
    /* Ensure no underlines on any interactive elements */
    .navbar-nav a, .navbar-nav a:hover,
    .navbar-brand, .navbar-brand:hover,
    .btn, .btn:hover,
    .nav-link, .nav-link:hover {
        text-decoration: none !important;
    }
    
    /* Override Bootstrap link styles */
    .nav-link:hover {
        text-decoration: none !important;
    }
    
    /* Remove underlines from all links globally */
    * {
        text-decoration: none !important;
    }
    
    *:hover {
        text-decoration: none !important;
    }
</style>
@endpush

@section('content')
<!-- Videos Hero Section -->
<section class="videos-hero relative min-h-screen flex items-center justify-center overflow-hidden bg-cover bg-center bg-fixed -mt-[123px] pt-[200px] pb-[100px]">
    <!-- Glass Effect Overlay -->
    <div class="absolute inset-0 bg-gradient-to-br from-aufg-primary/30 via-aufg-primary-dark/20 to-aufg-primary-darker/30 backdrop-blur-[1px]"></div>
    
    <!-- Background Pattern -->
    <div class="absolute inset-0 opacity-10">
        <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent animate-pulse"></div>
    </div>
    
    <!-- Content -->
    <div class="relative z-10 text-center px-4 max-w-6xl mx-auto">
        <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white font-poppins leading-tight animate-fade-in-up">
            Videos Center
        </h1>
    </div>
    
    <!-- Scroll Indicator -->
    <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce">
        <svg class="w-6 h-6 text-white/70" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
        </svg>
    </div>
</section>

<!-- Videos Center Section -->
<section id="videos" class="py-20 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Section Header -->
        <div class="text-center mb-16">
            <div class="inline-block bg-aufg-primary/10 rounded-full px-6 py-2 mb-4">
                <span class="text-aufg-primary font-semibold">Visual Content</span>
            </div>
            <h2 class="text-4xl md:text-5xl font-bold text-aufg-text-primary mb-6">
                Videos Center
            </h2>
            <p class="text-xl text-aufg-text-secondary max-w-3xl mx-auto">
                Explore our video library featuring company presentations, product demonstrations, and behind-the-scenes content.
            </p>
        </div>

        <!-- Featured Video -->
        @if($featuredVideo)
        <div class="mb-16">
            <div class="bg-gradient-to-br from-aufg-primary to-aufg-primary-dark rounded-3xl p-1 shadow-2xl">
                <div class="bg-white rounded-3xl overflow-hidden">
                    <div class="relative aspect-video bg-gray-900 rounded-t-3xl">
                        <!-- Video Placeholder -->
                        <div class="absolute inset-0 flex items-center justify-center">
                            <div class="text-center">
                                <button class="w-20 h-20 bg-white/20 rounded-full flex items-center justify-center mb-4 mx-auto backdrop-blur-sm hover:bg-white/30 transition-all" onclick="openVideoModal('{{ $featuredVideo->embed_url }}', '{{ $featuredVideo->title }}', {{ $featuredVideo->id }})">
                                    <svg class="w-8 h-8 text-white ml-1" fill="currentColor" viewBox="0 0 24 24">
                                        <path d="M8 5v14l11-7z"/>
                                    </svg>
                                </button>
                                <p class="text-white text-lg font-semibold">{{ $featuredVideo->title }}</p>
                            </div>
                        </div>
                        <img src="{{ $featuredVideo->thumbnail_url ?: asset('assets/2025/08/2d798430fc0e6ab7087749eab6eaa37312a3da9e-scaled.png') }}" 
                             alt="{{ $featuredVideo->title }}" 
                             class="w-full h-full object-cover opacity-60 cursor-pointer"
                             onclick="openVideoModal('{{ $featuredVideo->embed_url }}', '{{ $featuredVideo->title }}', {{ $featuredVideo->id }})">
                    </div>
                    <div class="p-8">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="text-2xl font-bold text-aufg-text-primary">
                                {{ $featuredVideo->title }}
                            </h3>
                            <div class="flex gap-3">
                                <button class="bg-aufg-primary/10 text-aufg-primary p-3 rounded-lg hover:bg-aufg-primary hover:text-white transition-all duration-300" onclick="openVideoModal('{{ $featuredVideo->embed_url }}', '{{ $featuredVideo->title }}', {{ $featuredVideo->id }})">
                                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                                        <path d="M8 5v14l11-7z"/>
                                    </svg>
                                </button>
                                <button class="bg-aufg-primary/10 text-aufg-primary p-3 rounded-lg hover:bg-aufg-primary hover:text-white transition-all duration-300" onclick="shareVideo('{{ $featuredVideo->title }}', '{{ $featuredVideo->watch_url }}')">
                                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                                        <path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/>
                                    </svg>
                                </button>
                                @if($featuredVideo->category)
                                <span class="bg-aufg-primary/10 text-aufg-primary px-3 py-2 rounded-lg text-sm font-medium">
                                    {{ $featuredVideo->category_name }}
                                </span>
                                @endif
                            </div>
                        </div>
                        @if($featuredVideo->description)
                        <p class="text-aufg-text-secondary leading-relaxed mb-4">
                            {{ $featuredVideo->description }}
                        </p>
                        @endif
                        <div class="flex items-center justify-between text-sm text-aufg-text-secondary">
                            @if($featuredVideo->formatted_duration)
                            <span>Duration: {{ $featuredVideo->formatted_duration }}</span>
                            @endif
                            <span>Published: {{ $featuredVideo->published_at->format('F j, Y') }}</span>
                            <span>Views: {{ number_format($featuredVideo->views_count) }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endif

        <!-- Video Grid -->
        @if($videos->count() > 0)
        <div id="videos-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            @foreach($videos->where('id', '!=', $featuredVideo?->id ?? 0) as $index => $video)
            <div class="video-item bg-white rounded-3xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-2 overflow-hidden {{ $index >= 6 ? 'hidden' : '' }}">
                <div class="relative aspect-video bg-gray-900">
                    <div class="absolute inset-0 flex items-center justify-center">
                        <button class="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center backdrop-blur-sm hover:bg-white/30 transition-all" onclick="openVideoModal('{{ $video->embed_url }}', '{{ $video->title }}', {{ $video->id }})">
                            <svg class="w-6 h-6 text-white ml-1" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M8 5v14l11-7z"/>
                            </svg>
                        </button>
                    </div>
                    <img src="{{ $video->thumbnail_url ?: asset('assets/2025/08/2d798430fc0e6ab7087749eab6eaa37312a3da9e-scaled.png') }}" 
                         alt="{{ $video->title }}" 
                         class="w-full h-full object-cover opacity-60 cursor-pointer"
                         onclick="openVideoModal('{{ $video->embed_url }}', '{{ $video->title }}', {{ $video->id }})">
                    @if($video->category)
                    <div class="absolute top-3 left-3">
                        <span class="bg-aufg-primary text-white px-2 py-1 rounded text-xs font-medium">
                            {{ $video->category_name }}
                        </span>
                    </div>
                    @endif
                </div>
                <div class="p-6">
                    <h4 class="text-lg font-bold text-aufg-text-primary mb-2">
                        {{ Str::limit($video->title, 40) }}
                    </h4>
                    @if($video->description)
                    <p class="text-aufg-text-secondary mb-4 text-sm">
                        {{ Str::limit($video->description, 80) }}
                    </p>
                    @endif
                    <div class="flex items-center justify-between">
                        <div class="flex items-center gap-3 text-xs text-aufg-text-secondary">
                            @if($video->formatted_duration)
                            <span>{{ $video->formatted_duration }}</span>
                            @endif
                            <span>{{ number_format($video->views_count) }} views</span>
                        </div>
                        <div class="flex gap-2">
                            <button class="text-aufg-primary hover:text-aufg-primary-dark" onclick="openVideoModal('{{ $video->embed_url }}', '{{ $video->title }}', {{ $video->id }})">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M8 5v14l11-7z"/>
                                </svg>
                            </button>
                            <button class="text-aufg-primary hover:text-aufg-primary-dark" onclick="shareVideo('{{ $video->title }}', '{{ $video->watch_url }}')">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/>
                                </svg>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        @else
        <!-- Empty State -->
        <div class="text-center py-16">
            <i class="material-icons mb-4" style="font-size: 64px; color: #ddd;">video_library</i>
            <h3 class="text-xl font-semibold text-aufg-text-primary mb-2">No Videos Available</h3>
            <p class="text-aufg-text-secondary">Check back soon for new video content.</p>
        </div>
        @endif

        <!-- Load More Button -->
        @php
            $totalVideos = $videos->where('id', '!=', $featuredVideo?->id ?? 0)->count();
        @endphp
        @if($totalVideos > 6)
        <div class="flex justify-center mt-12">
            <button id="load-more-videos-btn" 
                    class="bg-aufg-gradient text-white px-8 py-4 rounded-lg font-semibold hover:shadow-xl transition-all duration-300 transform hover:scale-105 flex items-center gap-3">
                <span>View More Videos</span>
                <svg class="w-5 h-5 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                </svg>
            </button>
        </div>
        
        <div class="justify-center mt-6" id="show-less-videos-container" style="display: none;">
            <button id="show-less-videos-btn" 
                    class="bg-white border-2 border-aufg-primary text-aufg-primary px-8 py-4 rounded-lg font-semibold hover:bg-aufg-primary hover:text-white transition-all duration-300 transform hover:scale-105 flex items-center gap-3">
                <span>Show Less</span>
                <svg class="w-5 h-5 transition-transform duration-300 rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                </svg>
            </button>
        </div>
        @endif
    </div>
</section>

<!-- Video Modal -->
<div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="videoModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document" style="max-width: 80vw; width: 80vw;">
        <div class="modal-content bg-dark border-0" style="border-radius: 10px;">
            <div class="modal-header border-0 pb-2" style="background: rgba(0,0,0,0.8); border-radius: 10px 10px 0 0;">
                <h5 class="modal-title text-white" id="videoModalLabel">Video Title</h5>
                <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close" style="opacity: 0.8; font-size: 1.5rem;">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body p-0" style="background: #000; border-radius: 0 0 10px 10px;">
                <div class="embed-responsive embed-responsive-16by9">
                    <iframe id="videoFrame" class="embed-responsive-item" src="" frameborder="0" 
                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
                            allowfullscreen style="border-radius: 0 0 10px 10px;"></iframe>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<!-- jQuery and Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>

<script>
function scrollToSection(sectionId) {
    const element = document.getElementById(sectionId);
    if (element) {
        element.scrollIntoView({
            behavior: 'smooth',
            block: 'start'
        });
    }
}

function shareVideo(title, url) {
    if (navigator.share) {
        navigator.share({
            title: title,
            url: url
        }).catch(err => console.log('Error sharing:', err));
    } else {
        // Fallback to copying URL to clipboard
        navigator.clipboard.writeText(url).then(() => {
            alert('Video URL copied to clipboard!');
        }).catch(() => {
            // Further fallback
            prompt('Copy this URL:', url);
        });
    }
}

function openVideoModal(embedUrl, title, videoId) {
    try {
        console.log('Opening video modal:', { embedUrl, title, videoId });
        
        // Set modal title
        document.getElementById('videoModalLabel').textContent = title;
        
        // Clear iframe first
        const iframe = document.getElementById('videoFrame');
        iframe.src = '';
        
        // Prepare the video URL with proper parameters
        let finalUrl = embedUrl;
        
        if (!finalUrl) {
            console.error('No embed URL provided');
            alert('Sorry, this video cannot be played.');
            return;
        }
        
        // Add autoplay and other parameters based on platform
        if (finalUrl.includes('youtube.com/embed/')) {
            // YouTube embed URL
            finalUrl += (finalUrl.includes('?') ? '&' : '?') + 'autoplay=1&rel=0&modestbranding=1&controls=1';
        } else if (finalUrl.includes('player.vimeo.com/video/')) {
            // Vimeo embed URL
            finalUrl += (finalUrl.includes('?') ? '&' : '?') + 'autoplay=1&color=038BB9';
        } else if (finalUrl.includes('youtube.com/watch?v=')) {
            // Convert YouTube watch URL to embed URL
            const videoId = finalUrl.match(/[?&]v=([^&]+)/)[1];
            finalUrl = `https://www.youtube.com/embed/${videoId}?autoplay=1&rel=0&modestbranding=1&controls=1`;
        } else if (finalUrl.includes('vimeo.com/') && !finalUrl.includes('player.vimeo.com')) {
            // Convert Vimeo URL to embed URL
            const videoId = finalUrl.match(/vimeo\.com\/(\d+)/)[1];
            finalUrl = `https://player.vimeo.com/video/${videoId}?autoplay=1&color=038BB9`;
        }
        
        console.log('Final video URL:', finalUrl);
        
        // Show modal first
        $('#videoModal').modal('show');
        
        // Set iframe source after a small delay to ensure modal is visible
        setTimeout(() => {
            iframe.src = finalUrl;
        }, 300);
        
        // Track video views
        incrementVideoViews(videoId);
        
    } catch (error) {
        console.error('Error opening video modal:', error);
        alert('Sorry, there was an error loading the video. Please try again.');
    }
}

function closeVideoModal() {
    // Stop video by clearing src
    const iframe = document.getElementById('videoFrame');
    iframe.src = '';
    $('#videoModal').modal('hide');
}

function incrementVideoViews(videoId) {
    // Track video views with AJAX call
    const csrfToken = document.querySelector('meta[name="csrf-token"]');
    
    if (!csrfToken) {
        console.warn('CSRF token not found, skipping view tracking');
        return;
    }
    
    fetch(`/api/videos/${videoId}/view`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': csrfToken.getAttribute('content'),
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        }
    }).then(response => {
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.json();
    }).then(data => {
        console.log('View tracked successfully:', data);
    }).catch(error => {
        console.warn('View tracking failed:', error);
    });
}

// Smooth scroll animations
document.addEventListener('DOMContentLoaded', function() {
    // Intersection Observer for animations
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    };
    
    const observer = new IntersectionObserver(function(entries) {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('animate-fade-in-up');
            }
        });
    }, observerOptions);
    
    // Observe all sections
    document.querySelectorAll('section').forEach(section => {
        observer.observe(section);
    });
    
    // Stop video when modal is closed
    $('#videoModal').on('hidden.bs.modal', function () {
        const iframe = document.getElementById('videoFrame');
        iframe.src = '';
        console.log('Video modal closed, iframe cleared');
    });
    
    // Also handle when modal is being hidden
    $('#videoModal').on('hide.bs.modal', function () {
        const iframe = document.getElementById('videoFrame');
        iframe.src = '';
        console.log('Video modal hiding, iframe cleared');
    });
    
    // Load More / Show Less functionality for videos
    const loadMoreVideosBtn = document.getElementById('load-more-videos-btn');
    const showLessVideosBtn = document.getElementById('show-less-videos-btn');
    const showLessVideosContainer = document.getElementById('show-less-videos-container');
    const videoItems = document.querySelectorAll('.video-item');
    
    if (loadMoreVideosBtn) {
        loadMoreVideosBtn.addEventListener('click', function() {
            // Show all hidden video items with animation
            const hiddenItems = document.querySelectorAll('.video-item.hidden');
            
            hiddenItems.forEach((item, index) => {
                setTimeout(() => {
                    item.classList.remove('hidden');
                    item.style.opacity = '0';
                    item.style.transform = 'translateY(20px)';
                    
                    // Animate in
                    setTimeout(() => {
                        item.style.transition = 'all 0.5s ease-out';
                        item.style.opacity = '1';
                        item.style.transform = 'translateY(0)';
                    }, 50);
                }, index * 100); // Stagger the animations
            });
            
            // Hide "Load More" button and show "Show Less" button
            setTimeout(() => {
                loadMoreVideosBtn.parentElement.style.display = 'none';
                showLessVideosContainer.style.display = 'flex';
                
                // Scroll to show the newly revealed content
                setTimeout(() => {
                    document.querySelector('.video-item:nth-child(7)')?.scrollIntoView({
                        behavior: 'smooth',
                        block: 'center'
                    });
                }, 300);
            }, hiddenItems.length * 100 + 200);
        });
    }
    
    if (showLessVideosBtn) {
        showLessVideosBtn.addEventListener('click', function() {
            // Hide items beyond the first 6
            const itemsToHide = Array.from(videoItems).slice(6);
            
            itemsToHide.forEach((item, index) => {
                setTimeout(() => {
                    item.style.transition = 'all 0.3s ease-out';
                    item.style.opacity = '0';
                    item.style.transform = 'translateY(-20px)';
                    
                    setTimeout(() => {
                        item.classList.add('hidden');
                        item.style.opacity = '';
                        item.style.transform = '';
                        item.style.transition = '';
                    }, 300);
                }, index * 50);
            });
            
            // Show "Load More" button and hide "Show Less" button
            setTimeout(() => {
                showLessVideosContainer.style.display = 'none';
                loadMoreVideosBtn.parentElement.style.display = 'flex';
                
                // Scroll back to the beginning of the videos grid
                document.getElementById('videos-grid').scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }, itemsToHide.length * 50 + 300);
        });
    }
});
</script>
@endpush