@extends('layouts.frontend.master')

@section('title', 'BAU 2001–2002 Alumni Association')



@section('content')
    <!-- Photo Scrolling Section -->
    <div class="container mx-auto px-4 py-2">
        <div class="flex flex-col md:flex-row gap-6">
            <!-- Left Column (70%) -->
            <div class="w-full md:w-7/12">
                <h2 class="text-2xl font-bold mb-4">Featured Photo</h2>
                @if(isset($galleryPhotos))
                    {{--<div class="relative h-[24rem] overflow-hidden rounded-lg">
                        <div class="absolute inset-0 flex transition-transform duration-500 ease-in-out"
                             id="photoSlider" style="transform: translateX(0%);">
                            @foreach($galleryPhotos as $galleryPhoto)
                                <div class="relative w-full h-full flex-shrink-0">
                                    <img src="{{asset('storage/'.$galleryPhoto['file_path'])}}" alt="BAU Research"
                                         class="w-full h-full object-cover">
                                    <div
                                        class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 text-white p-4 h-20 flex flex-col justify-center">
                                        <h3 class="font-semibold text-lg leading-tight">{{$galleryPhoto['title']}}</h3>
                                        <p class="text-sm">{{ \Illuminate\Support\Str::limit($galleryPhoto['description'], 100, '...') }}</p>
                                    </div>
                                </div>
                            @endforeach

                        </div>
                        <button
                            class="absolute left-2 top-1/2 -translate-y-1/2 bg-white bg-opacity-75 rounded-full p-2 shadow-md hover:bg-opacity-100"
                            onclick="prevPhoto()">
                            <i class="fas fa-chevron-left text-gray-800"></i>
                        </button>
                        <button
                            class="absolute right-2 top-1/2 -translate-y-1/2 bg-white bg-opacity-75 rounded-full p-2 shadow-md hover:bg-opacity-100"
                            onclick="nextPhoto()">
                            <i class="fas fa-chevron-right text-gray-800"></i>
                        </button>
                    </div>--}}

                    <div class="relative h-[24rem] overflow-hidden rounded-lg group">
                        <div class="absolute inset-0 flex transition-transform duration-500 ease-in-out"
                             id="photoSlider" style="transform: translateX(0%);">

                            @foreach($galleryPhotos as $galleryPhoto)
                                <div class="relative w-full h-full flex-shrink-0">
                                    <img src="{{asset('storage/'.$galleryPhoto['file_path'])}}"
                                         alt="BAU Research"
                                         class="w-full h-full object-cover">
                                    <div
                                        class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 text-white p-4 h-20 flex flex-col justify-center">
                                        <h3 class="font-semibold text-lg leading-tight">{{$galleryPhoto['title']}}</h3>
                                        <p class="text-sm">{{ \Illuminate\Support\Str::limit($galleryPhoto['description'], 100, '...') }}</p>
                                    </div>
                                </div>
                            @endforeach

                        </div>

                        <!-- Left Arrow -->
                        <button
                            class="absolute left-2 top-1/2 -translate-y-1/2 bg-white bg-opacity-75 rounded-full p-2 shadow-md hover:bg-opacity-100 z-30"
                            onclick="prevPhoto()">
                            <i class="fas fa-chevron-left text-gray-800"></i>
                        </button>

                        <!-- Right Arrow -->
                        <button
                            class="absolute right-2 top-1/2 -translate-y-1/2 bg-white bg-opacity-75 rounded-full p-2 shadow-md hover:bg-opacity-100 z-30"
                            onclick="nextPhoto()">
                            <i class="fas fa-chevron-right text-gray-800"></i>
                        </button>

                        <!-- CENTER BUTTON (Hover Only, Dark Transparent) -->
                        <a href="{{ url('/media') }}"
                           class="absolute inset-0 flex items-center justify-center z-20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"
                           style="text-decoration: none;">
                            <div class="bg-black bg-opacity-50 text-white font-semibold px-6 py-3 rounded-full shadow-lg hover:bg-opacity-70 transition">
                                View All Media
                            </div>
                        </a>

                    </div>

                @endif
            </div>

            <!-- Right Column (30%) -->
            <div class="w-full md:w-5/12">
                <h2 class="text-2xl font-bold mb-4">Sponsored Content</h2>
                @if(isset($gallerySponsoredContent))
                    <div class="relative h-[24rem] overflow-hidden rounded-lg mb-6">
                        <div class="absolute inset-0 flex transition-transform duration-500 ease-in-out"
                             id="sponsoredSlider" style="transform: translateX(0%);">
                            @foreach($gallerySponsoredContent as $content)
                                <div class="relative w-full h-full flex-shrink-0">
                                    @if(!empty($content->redirect_url))
                                        <a href="{{ $content->redirect_url }}" target="_blank">
                                            @endif
                                            <img src="{{asset('storage/'.$content['file_path'])}}" alt="BAU Main Gate"
                                                 class="w-full h-full object-cover">
                                            <div
                                                class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 text-white p-4 h-20 flex flex-col justify-center">
                                                <h3 class="font-semibold text-lg leading-tight">

                                                    @if($content->sponsor)
                                                        {{$content->sponsor->company_name}}
                                                    @else
                                                        {{$content->title}}
                                                    @endif
                                                </h3>
                                                {{-- <p class="text-sm">{{ \Illuminate\Support\Str::limit($content['description'], 80, '...') }}</p> --}}
                                                @if(!empty($content->redirect_url))
                                                    <p href="{{ $content->redirect_url }}" target="_blank"
                                                       class="text-sm mb-0">
                                                        <i class="fas fa-external-link-alt"></i> {{ $content->redirect_url }}
                                                    </p>
                                                @endif
                                            </div>
                                            @if(!empty($content->redirect_url))
                                        </a>
                                    @endif
                                </div>
                            @endforeach
                        </div>
                        <button
                            class="absolute left-2 top-1/2 -translate-y-1/2 bg-white bg-opacity-75 rounded-full p-2 shadow-md hover:bg-opacity-100"
                            onclick="prevSponsored()">
                            <i class="fas fa-chevron-left text-gray-800"></i>
                        </button>
                        <button
                            class="absolute right-2 top-1/2 -translate-y-1/2 bg-white bg-opacity-75 rounded-full p-2 shadow-md hover:bg-opacity-100"
                            onclick="nextSponsored()">
                            <i class="fas fa-chevron-right text-gray-800"></i>
                        </button>
                    </div>
                @endif
            </div>
        </div>
    </div>

    <!-- Login Modal -->
    <div id="loginModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
        <div class="bg-white rounded-lg card-shadow w-full max-w-md">
            <div class="gradient-bg px-6 py-4 flex justify-between items-center">
                <h2 class="text-xl font-bold text-white">Alumni Login</h2>
                <button onclick="toggleLoginModal()" class="text-white hover:text-blue-200">
                    <i class="fas fa-times"></i>
                </button>
            </div>

            <div class="p-6">
                <div class="flex border-b mb-4">
                    <button id="tabPassword" class="px-4 py-2 font-medium border-b-2 border-blue-500 text-blue-600">
                        Password Login
                    </button>
                    <button id="tabOTP" class="px-4 py-2 font-medium text-gray-500">OTP Login</button>
                </div>

                <!-- Password Login Form -->
                <form id="passwordLoginForm" class="space-y-4">
                    <div>
                        <label for="loginEmailPhone" class="block text-sm font-medium text-gray-700 mb-1">Email or Phone
                            Number</label>
                        <input type="text" id="loginEmailPhone" name="loginEmailPhone" required=""
                               class="w-full rounded-md border-gray-300 shadow-sm input-focus py-2 border focus:ring-blue-500 focus:border-blue-500"
                               placeholder="Personal Email or Cell Number">
                    </div>

                    <div>
                        <label for="loginPassword" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
                        <div class="relative">
                            <input type="password" id="loginPassword" name="loginPassword" required=""
                                   class="w-full rounded-md border-gray-300 shadow-sm input-focus py-2 border focus:ring-blue-500 focus:border-blue-500"
                                   placeholder="Enter your password">
                            <button type="button" onclick="togglePasswordVisibility('loginPassword')"
                                    class="absolute right-3 top-2 text-gray-400 hover:text-gray-600">
                                <i class="fas fa-eye"></i>
                            </button>
                        </div>
                    </div>

                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <input id="rememberMe" name="rememberMe" type="checkbox"
                                   class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                            <label for="rememberMe" class="ml-2 block text-sm text-gray-700">Remember me</label>
                        </div>
                        <a href="#" class="text-sm text-blue-600 hover:text-blue-500">Forgot password?</a>
                    </div>

                    <button type="submit"
                            class="w-full px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                        Login
                    </button>
                    <p class="text-xs text-gray-500 mt-2">Use your personal email or cell number with password</p>
                </form>

                <!-- OTP Login Form -->
                <form id="otpLoginForm" class="space-y-4 hidden">
                    <div>
                        <label for="otpEmail" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
                        <input type="email" id="otpEmail" name="otpEmail" required=""
                               class="w-full rounded-md border-gray-300 shadow-sm input-focus py-2 border focus:ring-blue-500 focus:border-blue-500"
                               placeholder="Enter your personal email">
                    </div>

                    <div class="grid grid-cols-6 gap-2">
                        <input type="text" maxlength="1"
                               class="text-center py-2 border rounded-md focus:ring-blue-500 focus:border-blue-500">
                        <input type="text" maxlength="1"
                               class="text-center py-2 border rounded-md focus:ring-blue-500 focus:border-blue-500">
                        <input type="text" maxlength="1"
                               class="text-center py-2 border rounded-md focus:ring-blue-500 focus:border-blue-500">
                        <input type="text" maxlength="1"
                               class="text-center py-2 border rounded-md focus:ring-blue-500 focus:border-blue-500">
                        <input type="text" maxlength="1"
                               class="text-center py-2 border rounded-md focus:ring-blue-500 focus:border-blue-500">
                        <input type="text" maxlength="1"
                               class="text-center py-2 border rounded-md focus:ring-blue-500 focus:border-blue-500">
                    </div>

                    <div class="flex justify-between items-center">
                        <button type="button" onclick="resendOTP()"
                                class="text-sm text-blue-600 hover:text-blue-500 disabled:text-gray-400" id="resendOTP"
                                disabled="">
                            Resend OTP (60s)
                        </button>
                        <button type="submit"
                                class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                            Verify OTP
                        </button>
                    </div>
                </form>

                <div class="mt-4 text-center text-sm">
                    <p class="text-gray-600">Don't have an account?
                        <button
                            onclick="toggleLoginModal(); document.getElementById('registrationForm').scrollIntoView()"
                            class="text-blue-600 hover:text-blue-500">Register here
                        </button>
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- Join Alumni Section with Notice Board and Events -->
    <div class="bg-gray-100 pt-4 pb-2">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                <!-- Join Alumni Card -->
                <div class="bg-white rounded-lg shadow-md overflow-hidden h-full">
                    <div class="h-64 bg-blue-50 flex flex-col items-center justify-center">
                        <i class="fas fa-users fa-5x text-blue-500 mb-4"></i>
                        <h2 class="text-2xl font-bold text-center mb-2">Join Our Alumni</h2>
                        <p class="text-gray-600 text-center px-4">Register to become a member of our alumni network</p>
                    </div>
                    <div class="p-4">
                        <a href="{{asset('register')}}"
                           class="block w-full bg-blue-600 hover:bg-blue-700 text-white py-3 px-4 rounded-md transition duration-300 text-lg text-center">
                            Register Now
                        </a>
                        <div class="mt-3 text-sm text-gray-500 text-center">
                            Already a member? <a href="{{asset('login')}}" onclick="toggleLoginModal()"
                                                 class="text-blue-500 hover:underline">Sign In</a>
                        </div>
                    </div>
                </div>

                <!-- Notice Board Section -->
                <div class="bg-white rounded-lg shadow-md p-6 h-full">
                    <h2 class="text-2xl font-bold mb-4 text-center">Notice Board</h2>

                    @if(isset($notices) && $notices->count() > 0)
                        @php
                            // Future notices filter kore, max 4 ta notice
                            $futureNotices = $notices->filter(function($notice){
                                return \Carbon\Carbon::parse($notice->expiry_date)->isFuture();
                            })->take(4);
                        @endphp
                        <div class="space-y-4">
                            @foreach($futureNotices as $notice)
                                <div class="border-b pb-3">
                                    <a href="{{ route('notices.show', encrypt($notice->id)) }}">
                                        <h3 class="font-medium">{{ $notice->title }}</h3>
                                        <p class="text-sm text-gray-500">
                                            Expire
                                            on {{ \Carbon\Carbon::parse($notice->expiry_date)->format('F jS Y') }}
                                        </p>
                                    </a>
                                </div>
                            @endforeach
                        </div>

                        @if($futureNotices->count() >= 4)
                            <div class="mt-4 text-center">
                                <a href="{{url('notices')}}" class="text-sm text-blue-500 hover:underline">View All
                                    Notices →</a>
                            </div>
                        @endif
                    @else
                        <p class="text-center text-gray-400">No upcoming notices.</p>
                    @endif
                </div>

                <!-- Upcoming Events Section -->
                <div class="bg-white rounded-lg shadow-md p-6 h-full">
                    <h2 class="text-2xl font-bold mb-4 text-center">Upcoming Events</h2>

                    @if(isset($futureEvents) && $futureEvents->count() > 0)
                        {{--                        @php--}}
                        {{--                            $futureEvents = $events->filter(function($event) {--}}
                        {{--                                return isset($event->dates) && $event->dates->contains(function($e) {--}}
                        {{--                                    return isset($e->end_date_time) && \Carbon\Carbon::parse($e->end_date_time)->isFuture();--}}
                        {{--                                });--}}
                        {{--                            });--}}

                        {{--                        @endphp--}}

                        <div class="space-y-4">
                            @foreach($futureEvents->take(3) as $event)
                                <a href="{{ route('events.show', $event->slug) }}"
                                   class="event_details block border-b pb-3 no-underline text-inherit">

                                    {{-- Event Name --}}
                                    <h3 class="font-medium">{{ $event->name ?? 'Untitled Event' }}</h3>

                                    {{-- Event Dates --}}
                                    @php
                                        // filter only future dates
                                        $futureDates = $event->dates->filter(function($e) {
                                            return isset($e->end_date_time) && \Carbon\Carbon::parse($e->end_date_time)->isFuture();
                                        });

                                        if($futureDates->count() > 0){
                                            // first start_date_time
                                            $firstStart = \Carbon\Carbon::parse($futureDates->first()->start_date_time);
                                            // last end_date_time
                                            $lastEnd = \Carbon\Carbon::parse($futureDates->last()->end_date_time);
                                        }
                                    @endphp

                                    @if(isset($firstStart) && isset($lastEnd))
                                        <p class="event-dates text-sm text-gray-500 max-h-[27px] overflow-y-auto">
                                            @if($firstStart->isSameDay($lastEnd))
                                                {{-- Same day --}}
                                                {{ $firstStart->format('M j, Y') }} ({{ $firstStart->format('g:i A') }}
                                                - {{ $lastEnd->format('g:i A') }})
                                            @else
                                                {{-- Different days --}}
                                                {{ $firstStart->format('M j, Y g:i A') }}
                                                - {{ $lastEnd->format('M j, Y g:i A') }}
                                            @endif
                                        </p>
                                    @endif

                                    {{-- Venue --}}
                                    <p class="text-xs mt-1">{{ $event->venue ?? '' }}</p>
                                </a>
                            @endforeach
                        </div>
                        @if($futureEvents->count() > 3)
                            <div class="mt-4 text-center">
                                <a href="{{url('events')}}" class="text-sm text-blue-500 hover:underline">View All
                                    Events →</a>
                            </div>
                        @endif
                    @endif
                </div>

            </div>
        </div>
    </div>

    <!-- Advanced Search Panel -->
    <div class="container mx-auto px-4 py-6">
        <div class="bg-white rounded-lg shadow-md p-6 mb-8">
            <h2 class="text-2xl font-bold mb-4">Advanced Search</h2>

            <!-- Search Tabs -->
            <div class="flex border-b mb-6">
                <button id="basicSearchTab" class="px-4 py-2 font-medium text-gray-500 border-b-2"
                        onclick="switchSearchTab('basic')">Basic Search
                </button>
                <button id="advancedFiltersTab" class="px-4 py-2 font-medium border-b-2 border-blue-500 text-blue-600"
                        onclick="switchSearchTab('advanced')">Advanced Filters
                </button>
                <button id="savedSearchesTab" class="px-4 py-2 font-medium text-gray-500 border-b-2"
                        onclick="switchSearchTab('saved')">Saved Searches
                </button>
            </div>

            <!-- Tab Content -->
            <div id="basicSearchContent" class="space-y-4 hidden">
                <!-- Basic Search Content -->
                <div class="relative">
                    <input type="text" placeholder="Search by name..."
                           class="w-full p-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 pl-12">
                    <i class="fas fa-search absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                </div>

                <div class="flex justify-end gap-3 pt-4">
                    <button class="px-6 py-3 bg-gray-100 hover:bg-gray-200 rounded-lg transition">
                        Reset
                    </button>
                    <button
                        class="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition flex items-center">
                        <i class="fas fa-search mr-2"></i> Search
                    </button>
                </div>
            </div>

            <div id="advancedFiltersContent" class="space-y-4">
                <!-- Advanced Filters Content -->
                <div class="relative">
                    <input type="text" placeholder="Search by any criteria..."
                           class="w-full p-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 pl-12">
                    <i class="fas fa-search absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Department</label>
                        <select
                            class="w-full p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option value="">All Departments</option>
                            <option>Agriculture</option>
                            <option>Engineering</option>
                            <option>Science</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Graduation Year</label>
                        <select
                            class="w-full p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option value="">All Years</option>
                            <option>2000-2005</option>
                            <option>2006-2010</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Location</label>
                        <select
                            class="w-full p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option value="">All Locations</option>
                            <option>Bangladesh</option>
                            <option>International</option>
                        </select>
                    </div>
                </div>

                <div id="additionalFilters" class="hidden">
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Degree Type</label>
                            <select
                                class="w-full p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                                <option value="">All Degrees</option>
                                <option>Bachelor</option>
                                <option>Master</option>
                                <option>PhD</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Current Industry</label>
                            <select
                                class="w-full p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                                <option value="">All Industries</option>
                                <option>Agriculture</option>
                                <option>Technology</option>
                                <option>Education</option>
                                <option>Government</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Membership Status</label>
                            <select
                                class="w-full p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                                <option value="">All Statuses</option>
                                <option>Active</option>
                                <option>Inactive</option>
                                <option>Donor</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="flex justify-between items-center pt-4">
                    <button class="text-blue-600 hover:text-blue-800 text-sm" onclick="toggleAdditionalFilters()">
                        <i class="fas fa-plus-circle mr-1"></i> Add More Filters
                    </button>
                    <div class="flex gap-3">
                        <button class="px-6 py-3 bg-gray-100 hover:bg-gray-200 rounded-lg transition">
                            Reset
                        </button>
                        <button
                            class="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition flex items-center">
                            <i class="fas fa-search mr-2"></i> Search
                        </button>
                    </div>
                </div>
            </div>

            <div id="savedSearchesContent" class="hidden">
                <!-- Saved Searches Content -->
                <div class="space-y-4">
                    <div class="border rounded-lg p-4 hover:bg-gray-50 cursor-pointer">
                        <div class="flex justify-between items-center">
                            <h3 class="font-medium">Class of 2002 - Agriculture</h3>
                            <div class="flex gap-2">
                                <button class="text-blue-600 hover:text-blue-800">
                                    <i class="fas fa-search"></i>
                                </button>
                                <button class="text-gray-500 hover:text-gray-700">
                                    <i class="fas fa-trash-alt"></i>
                                </button>
                            </div>
                        </div>
                        <p class="text-sm text-gray-500 mt-1">Saved on June 15, 2023</p>
                    </div>

                    <div class="border rounded-lg p-4 hover:bg-gray-50 cursor-pointer">
                        <div class="flex justify-between items-center">
                            <h3 class="font-medium">Alumni in Dhaka</h3>
                            <div class="flex gap-2">
                                <button class="text-blue-600 hover:text-blue-800">
                                    <i class="fas fa-search"></i>
                                </button>
                                <button class="text-gray-500 hover:text-gray-700">
                                    <i class="fas fa-trash-alt"></i>
                                </button>
                            </div>
                        </div>
                        <p class="text-sm text-gray-500 mt-1">Saved on May 2, 2023</p>
                    </div>

                    <div class="text-center pt-4">
                        <button class="text-blue-600 hover:text-blue-800 font-medium">
                            <i class="fas fa-plus-circle mr-1"></i> Save Current Search
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Video Section -->
    @if(isset($galleryVideos))
        <div class="bg-gray-100 py-4">
            <div class="container mx-auto px-4">
                <h2 class="text-3xl font-bold text-center mb-8">Video Gallery</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                    @foreach($galleryVideos as $galleryVideo)
                        <!-- Video 1 -->
                        <div class="bg-white rounded-lg shadow-md overflow-hidden">
                            <div class="aspect-w-16 aspect-h-9">
                                @php
                                    $url = $galleryVideo->youtube_link; // database এ রাখা link
                                    preg_match('/(?:v=|\.be\/|shorts\/)([a-zA-Z0-9_-]+)/', $url, $matches);
                                    $videoId = $matches[1] ?? null;
                                @endphp

                                @if($videoId)
                                    <iframe class="w-full h-64"
                                            src="https://www.youtube.com/embed/{{ $videoId }}"
                                            frameborder="0"
                                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                            allowfullscreen>
                                    </iframe>
                                @else
                                    <p class="text-red-500">Invalid YouTube link</p>
                                @endif
                            </div>

                            {{--                            <div class="aspect-w-16 aspect-h-9">--}}
                            {{--                                <iframe class="w-full h-64" src="{{asset('storage/'.$galleryVideo->file_path)}}"--}}
                            {{--                                        frameborder="0"--}}
                            {{--                                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"--}}
                            {{--                                        allowfullscreen=""></iframe>--}}
                            {{--                            </div>--}}
                            <div class="p-4">
                                <h3 class="font-bold text-lg mb-2">{{$galleryVideo->title}}</h3>
                                <p class="text-gray-600 text-sm">{{ \Illuminate\Support\Str::limit($galleryVideo->description, 100, '...') }}</p>
                            </div>
                        </div>
                    @endforeach
                </div>
                @if($galleryVideo->count() > 3)
                    <div class="text-right mt-8">
                        <a href="{{route('all-videos')}}"
                           class="inline-block bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-md transition duration-300">
                            View All Videos
                        </a>
                    </div>
                @endif

            </div>
        </div>
    @endif

    <!-- Call to Action Columns -->

    <div class="bg-gray-100 pb-12">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <!-- Help Recruit Column -->
                <div class="bg-white rounded-lg shadow-md p-8 text-center">
                    <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fas fa-user-plus text-blue-600 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">Help Recruit and Welcome Prospective Students</h3>
                    <p class="text-gray-600 mb-4">Join our alumni ambassador program to help recruit and welcome the
                        next generation of BAU students.</p>
                    <button
                        class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-md transition duration-300">
                        Learn More
                    </button>
                </div>

                <!-- Share Talent Column -->
                <div class="bg-white rounded-lg shadow-md p-8 text-center">
                    <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fas fa-hands-helping text-blue-600 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">Share Your Time and Talent</h3>
                    <p class="text-gray-600 mb-4">Contribute your skills and expertise to strengthen our BAU 2001-2002
                        Alumni community.</p>
                    <button
                        class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-md transition duration-300">
                        Get Involved
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Stories Section -->
    @if(isset($blogs))
        <div class="bg-gray-100 py-4">
            <div class="container mx-auto px-4">
                <h2 class="text-3xl font-bold text-center mb-2">Stories</h2>
                <p class="text-lg text-gray-600 text-center mb-8">News, views, and perspectives from the BAU
                    Community</p>

                <!-- Grid container -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                    @foreach($blogs as $blog)
                        <div class="bg-white rounded-lg shadow-md overflow-hidden">
                            <img src="{{asset('storage/'.$blog->thumbnail_image)}}" alt="BAU Campus"
                                 class="w-full h-48 object-cover">
                            <div class="p-6">
                                <h3 class="font-bold text-lg mb-2">{{$blog->name}}</h3>
                                <p class="text-gray-600 text-sm mb-4">{!! \Illuminate\Support\Str::limit(strip_tags($blog->description), 100, '...') !!}</p>
                                @if(!empty($blog->slug))
                                    <a href="{{ route('blogs.single', ['slug' => $blog->slug]) }}"
                                       class="text-blue-600 hover:underline">Read More →</a>
                                @endif
                            </div>
                        </div>
                    @endforeach
                </div>

                @if($blogs->count() >= 4)
                    <div class="text-center mt-8">
                        <a href="{{ route('blogs') }}"
                           class="inline-block bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-md transition duration-300">
                            View All Stories
                        </a>
                    </div>
                @endif

            </div>
        </div>
    @endif

    <!-- Sponsors Section -->
    @if(isset($sponsors))
        <div class="bg-gray-100 py-4">
            <div class="container mx-auto px-4">
                <h2 class="text-3xl font-bold text-center mb-2">Sponsors</h2>
            </div>

            <div class="container-fluid">
                <div class="row">
                    <div class="sponsors-slider">
                        <ul>
                            @foreach($sponsors as $sponsor)
                                <li>
                                    <img src="{{ asset('storage/' . $sponsor->logo) }}" alt="1"/>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    @endif

@endsection


@push('css')
    <link rel="stylesheet" href="{{ asset('frontend/css/sponsors.css') }}">
@endpush

@push('js')
    <script>
        $(function () {

            $('.video-gallery .group').each(function () {
                const $container = $(this);
                const $video = $container.find('.video');
                const $playBtn = $container.find('.play-btn');
                const $stopBtn = $container.find('.stop-btn');

                // Play button click
                $playBtn.on('click', function () {
                    $video[0].play().catch(function (error) {
                        console.error('Video play failed:', error);
                    });
                    $playBtn.addClass('hidden');
                    $stopBtn.removeClass('hidden');
                });

                $stopBtn.on('click', function () {
                    $video[0].pause();
                    $video[0].load(); // Reload to show poster image
                    $stopBtn.addClass('hidden');
                    $playBtn.removeClass('hidden');
                });

                $video.on('pause', function () {
                    $video[0].load();
                    $stopBtn.addClass('hidden');
                    $playBtn.removeClass('hidden');
                });

                // When video ends
                $video.on('ended', function () {
                    $video[0].load();
                    $stopBtn.addClass('hidden');
                    $playBtn.removeClass('hidden');
                });
            });
        });
    </script>

    <script>
        // Sponsored Slider Functions
        let currentSponsored = 0;
        const totalSponsored = document.querySelectorAll('#sponsoredSlider > div').length;

        function updateSponsoredSlider() {
            const slider = document.getElementById('sponsoredSlider');
            slider.style.transform = `translateX(-${currentSponsored * 100}%)`;
        }

        function nextSponsored() {
            currentSponsored = (currentSponsored + 1) % totalSponsored;
            updateSponsoredSlider();
        }

        function prevSponsored() {
            currentSponsored = (currentSponsored - 1 + totalSponsored) % totalSponsored;
            updateSponsoredSlider();
        }

        // Auto-advance sponsored content every 10 seconds
        setInterval(nextSponsored, 5000);

        // Photo Slider Functions
        let currentPhoto = 0;
        const totalPhotos = document.querySelectorAll('#photoSlider > div').length;

        function updateSlider() {
            const slider = document.getElementById('photoSlider');
            slider.style.transform = `translateX(-${currentPhoto * 100}%)`;
        }

        function nextPhoto() {
            currentPhoto = (currentPhoto + 1) % totalPhotos;
            updateSlider();
        }

        function prevPhoto() {
            currentPhoto = (currentPhoto - 1 + totalPhotos) % totalPhotos;
            updateSlider();
        }

        // Auto-advance photos every 10 seconds
        setInterval(nextPhoto, 5000);

        // Login Modal Functions
        function toggleLoginModal() {
            const modal = document.getElementById('loginModal');
            modal.classList.toggle('hidden');
            // Reset to password login tab when opening
            if (!modal.classList.contains('hidden')) {
                switchLoginTab('password');
            }
        }

        function switchLoginTab(tab) {
            const passwordTab = document.getElementById('tabPassword');
            const otpTab = document.getElementById('tabOTP');
            const passwordForm = document.getElementById('passwordLoginForm');
            const otpForm = document.getElementById('otpLoginForm');

            if (tab === 'password') {
                passwordTab.classList.add('border-blue-500', 'text-blue-600');
                passwordTab.classList.remove('text-gray-500');
                otpTab.classList.remove('border-blue-500', 'text-blue-600');
                otpTab.classList.add('text-gray-500');
                passwordForm.classList.remove('hidden');
                otpForm.classList.add('hidden');
            } else {
                otpTab.classList.add('border-blue-500', 'text-blue-600');
                otpTab.classList.remove('text-gray-500');
                passwordTab.classList.remove('border-blue-500', 'text-blue-600');
                passwordTab.classList.add('text-gray-500');
                document.getElementById('otpEmail').value = '';
                otpForm.classList.remove('hidden');
                passwordForm.classList.add('hidden');
                startOTPTimer();
            }
        }

        function togglePasswordVisibility(inputId) {
            const input = document.getElementById(inputId);
            const icon = input.nextElementSibling.querySelector('i');
            if (input.type === 'password') {
                input.type = 'text';
                icon.classList.replace('fa-eye', 'fa-eye-slash');
            } else {
                input.type = 'password';
                icon.classList.replace('fa-eye-slash', 'fa-eye');
            }
        }

        let otpTimer;

        function startOTPTimer() {
            let seconds = 60;
            const resendButton = document.getElementById('resendOTP');
            resendButton.disabled = true;
            resendButton.textContent = `Resend OTP (${seconds}s)`;

            otpTimer = setInterval(() => {
                seconds--;
                resendButton.textContent = `Resend OTP (${seconds}s)`;
                if (seconds <= 0) {
                    clearInterval(otpTimer);
                    resendButton.disabled = false;
                    resendButton.textContent = 'Resend OTP';
                }
            }, 1000);
        }

        function switchSearchTab(tab) {
            const basicTab = document.getElementById('basicSearchTab');
            const advancedTab = document.getElementById('advancedFiltersTab');
            const savedTab = document.getElementById('savedSearchesTab');

            const basicContent = document.getElementById('basicSearchContent');
            const advancedContent = document.getElementById('advancedFiltersContent');
            const savedContent = document.getElementById('savedSearchesContent');

            // Reset all tabs and content
            [basicTab, advancedTab, savedTab].forEach(t => {
                t.classList.remove('border-blue-500', 'text-blue-600');
                t.classList.add('text-gray-500');
            });
            [basicContent, advancedContent, savedContent].forEach(c => {
                c.classList.add('hidden');
            });

            // Activate selected tab and show corresponding content
            if (tab === 'basic') {
                basicTab.classList.add('border-blue-500', 'text-blue-600');
                basicTab.classList.remove('text-gray-500');
                basicContent.classList.remove('hidden');
            } else if (tab === 'advanced') {
                advancedTab.classList.add('border-blue-500', 'text-blue-600');
                advancedTab.classList.remove('text-gray-500');
                advancedContent.classList.remove('hidden');
            } else if (tab === 'saved') {
                savedTab.classList.add('border-blue-500', 'text-blue-600');
                savedTab.classList.remove('text-gray-500');
                savedContent.classList.remove('hidden');
            }
        }

        function toggleAdditionalFilters() {
            const additionalFilters = document.getElementById('additionalFilters');
            additionalFilters.classList.toggle('hidden');
        }

        function resendOTP() {
            const email = document.getElementById('otpEmail').value;
            if (!email) {
                alert('Please enter your email address first');
                return;
            }
            // In a real app, this would send a new OTP to the user's email
            alert(`New OTP has been sent to ${email}`);
            startOTPTimer();
        }

        document.addEventListener('DOMContentLoaded', function () {
            // Tab switching
            document.getElementById('tabPassword').addEventListener('click', () => switchLoginTab('password'));
            document.getElementById('tabOTP').addEventListener('click', () => switchLoginTab('otp'));

            // Form submission
            const registrationForm = document.getElementById('registrationForm');
            const submitBtn = document.getElementById('submitBtn');

            registrationForm.addEventListener('submit', function (e) {
                e.preventDefault();

                // Show loading state
                submitBtn.disabled = true;
                submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Processing...';

                // Simulate API call
                setTimeout(() => {
                    // Show success message
                    alert('Registration submitted successfully! Welcome to our alumni network.');

                    // Reset form and button
                    registrationForm.reset();
                    studentIdSelect.innerHTML = '<option value="">Select Faculty first</option>';
                    submitBtn.disabled = false;
                    submitBtn.textContent = 'Submit Registration';
                }, 2000);
            });

            // Phone number formatting
            const phoneInput = document.getElementById('phone');
            phoneInput.addEventListener('input', function (e) {
                const x = e.target.value.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
                e.target.value = !x[2] ? x[1] : '(' + x[1] + ') ' + x[2] + (x[3] ? '-' + x[3] : '');
            });
        });
    </script>
@endpush