@extends('layouts.frontend.master')

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

@php
    $leftCommittee = $committeeTypes->firstWhere('ordering', 'A');
    $rightCommittees = $committeeTypes->filter(fn($c) => in_array($c->ordering, ['B', 'C', 'D']));
@endphp

@push('css')
    <style>
        .video-gallery .video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block; /* Ensure video takes up space */
        }
        .video-gallery .play-buttons img {
            transition: opacity 0.3s ease;
        }
        .video-gallery .group:hover .play-buttons {
            opacity: 1;
        }
        .video-gallery .play-buttons {
            opacity: 0.7;
            transition: opacity 0.3s ease;
        }
        .video-gallery .video:not([src]) {
            background-color: #000; /* Fallback if video source is invalid */
        }
        .video-gallery .relative {
            background-color: #000; /* Fallback for container */
        }
        
        /* Event image styling for consistent aspect ratio */
        .event-image {
            width: 100%;
            height: auto;
            object-fit: contain;
            object-position: center;
            max-height: 250px;
        }
        
        /* Ensure event images maintain aspect ratio */
        .event-image-container {
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        /* Text truncation utilities */
        .line-clamp-2 {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
    </style>
@endpush

@section('content')
    @include('landing-components.banner')

    {{-- <section class="bg-[#F4FAF6] text-white font-karla">
        <div class="container mx-auto z-10 flex flex-col md:flex-row px-6 py-16 space-y-6 md:space-y-0 gap-8">
            <!-- Left: Image Section -->
            <div class="w-full md:w-[388px] flex flex-col">
                @if($presidentPhoto && $presidentPhoto->file_path)
                    <img src="{{ asset('storage/' . $presidentPhoto->file_path) }}"
                         alt="President Image"
                         class="w-[388px] h-[388px] rounded-lg shadow-lg object-cover">
                @else
                    <img src="{{ asset('frontend/president.jpg') }}"
                         alt="Default President Image"
                         class="w-[388px] h-[388px] rounded-lg shadow-lg object-cover">
                @endif

                <div class="mt-6 text-center">
                    @if($president && $president->user)
                        <h3 class="text-2xl font-bold text-gray-900">{{ $president->user->name }}</h3>
                        <p class="text-green-600 font-medium">
                            {{ \App\Models\CommitteeMember::getPositionName($president->user->id) ?? 'President' }}
                        </p>
                    @else
                        <h3 class="text-2xl font-bold text-gray-900">Unknown</h3>
                        <p class="text-green-600 font-medium">President</p>
                    @endif
                </div>
            </div>

            <!-- Right: Content Section -->
            <div class="w-full">
                @if($speech)
                    <p class="text-lg text-gray-600">
                        <span class="font-bold">{{ $speech->title ?? 'Untitled Speech' }}</span>
                    </p>
                    <p class="mt-4 text-gray-700 text-justify">
                        {!! $speech->speech ? nl2br(e($speech->speech)) : 'No speech available.' !!}
                    </p>
                @else
                    <p class="text-lg text-gray-600">
                        <span class="font-bold">Untitled Speech</span>
                    </p>
                    <p class="mt-4 text-gray-700 text-justify">
                        No speech available.
                    </p>
                @endif
            </div>
        </div>
    </section> --}}

    {{-- <section class="relative bg-white font-karla py-16">
        <div class="container mx-auto flex flex-col md:flex-row items-center gap-12 px-6">
            <!-- Left: Image Section -->
            <div class="relative w-full md:w-1/2">
                <img src="{{ asset('frontend/goal-main.png') }}" alt="Main Image"
                     class="w-full max-w-md rounded-lg shadow-lg object-cover">

                <!-- Overlay Small Image -->
                <div
                    class="absolute bottom-0 left-10 w-36 md:bottom-[-41px] md:left-[17.5rem] md:w-40 lg:w-48 shadow-lg">
                    <img src="{{ asset('frontend/goal-small.png') }}" alt="Small Image"
                         class="w-full h-full object-cover rounded-t-lg rounded-l-lg custom-bottom-right">
                </div>
            </div>

            <!-- Right: Content Section -->
            <div class="w-full md:w-1/2">
                <p class="text-green-600 font-bold text-lg">Our Goal</p>
                <h2 class="text-gray-900 font-bold text-4xl leading-[50px] mt-2">
                    Together, We Create Opportunities
                </h2>
                <p class="mt-4 text-[#494949] leading-relaxed text-justify">
                    At <span class="font-bold">BAU 2001–2002 Alumni Association</span>, our mission is to foster a strong, supportive
                    community where each member can achieve financial growth and security.
                    We are committed to empowering individuals by providing opportunities to save, invest, and build a
                    brighter future together.
                    Through collective strength and shared resources, we're creating an environment where financial
                    progress
                    is not only achievable but sustainable.
                </p>
                <p class="mt-4 text-[#494949] leading-relaxed text-justify">
                    By joining us, you become part of a trusted network dedicated to personal and community prosperity—
                    because we believe that when we grow together, we all reach new heights.
                </p>

                <!-- Bullet Points -->
                <ul class="mt-6 space-y-3">
                    <li class="flex items-center text-gray-900">
                        <img src="{{ asset('frontend/Vector.svg') }}" class="w-5 h-5 mr-2" alt="Check Icon">
                        <span class="font-semibold">Empower Financial Growth</span>
                    </li>
                    <li class="flex items-center text-gray-900">
                        <img src="{{ asset('frontend/Vector.svg') }}" class="w-5 h-5 mr-2" alt="Check Icon">
                        <span class="font-semibold">Foster Community Support</span>
                    </li>
                    <li class="flex items-center text-gray-900">
                        <img src="{{ asset('frontend/Vector.svg') }}" class="w-5 h-5 mr-2" alt="Check Icon">
                        <span class="font-semibold">Provide Accessible Savings Options</span>
                    </li>
                    <li class="flex items-center text-gray-900">
                        <img src="{{ asset('frontend/Vector.svg') }}" class="w-5 h-5 mr-2" alt="Check Icon">
                        <span class="font-semibold">Promote Smart Investments</span>
                    </li>
                    <li class="flex items-center text-gray-900">
                        <img src="{{ asset('frontend/Vector.svg') }}" class="w-5 h-5 mr-2" alt="Check Icon">
                        <span class="font-semibold">Build a Prosperous Future Together</span>
                    </li>
                </ul>
            </div>
        </div>
    </section> --}}

    <section class="bg-[#F4FAF6] text-gray-900 font-karla py-16">
        <div class="container mx-auto grid grid-cols-1 md:grid-cols-5 gap-12 px-6">
            <!-- Left Column (Description + Button) -->
            <div class="col-span-2 flex flex-col justify-between space-y-6">
                @if($leftCommittee)
                    <h4 class="text-green-500 text-2xl leading-[43px]">Our Committee</h4>
                    <h2 class="text-[3rem] font-bold leading-tight">
                        {{ $leftCommittee->name }}
                    </h2>
                    <p class="text-[#494949]">
                        {{ $leftCommittee->description }}
                    </p>

                    @auth
                        <a href="{{ route('member.committees.index') }}"
                           class="learn-more mt-4 bg-transparent border border-green-600 text-green-600 font-medium py-2 px-4 rounded transition-all duration-300 flex items-center">
                            Learn more
                            <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                                 xmlns="http://www.w3.org/2000/svg">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                      d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                            </svg>
                        </a>
                    @else
                        <a href="{{ route('login') }}"
                           class="learn-more mt-4 bg-transparent border border-green-600 text-green-600 font-medium py-2 px-4 rounded transition-all duration-300 flex items-center">
                            Learn more
                            <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                                 xmlns="http://www.w3.org/2000/svg">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                      d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                            </svg>
                        </a>
                    @endauth
                @endif

                <!-- Icons Section -->
                <div class="flex flex-wrap items-center gap-4 mt-4">
                    <div class="flex items-center">
                        <img src="{{ asset('frontend/Vector.svg') }}" class="w-5 h-5 mr-2" alt="Check Icon">
                        <span class="font-semibold">Integrity</span>
                    </div>
                    <div class="flex items-center">
                        <img src="{{ asset('frontend/Vector.svg') }}" class="w-5 h-5 mr-2" alt="Check Icon">
                        <span class="font-semibold">Collaboration</span>
                    </div>
                    <div class="flex items-center">
                        <img src="{{ asset('frontend/Vector.svg') }}" class="w-5 h-5 mr-2" alt="Check Icon">
                        <span class="font-semibold">Excellence</span>
                    </div>
                </div>
                <!-- Button -->
                <a href="{{ route('member.committees.index') }}"
                   class="mt-4 bg-green-600 hover:bg-gray-700 text-white font-medium py-3 px-6 rounded flex items-center transition-all duration-300 committee-button">
                    See all committees
                    <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                         xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                    </svg>
                </a>
            </div>

            {{-- <div class="col-span-1 flex">
                <img src="{{ asset('frontend/committee_landing.png') }}" alt="Committee Image"
                     class="rounded-lg shadow-lg object-cover w-full">
            </div> --}}

            <!-- Right Column (Committee Cards) -->
            <div class="col-span-2 flex flex-col justify-between space-y-6">
                @foreach($rightCommittees as $committee)
                    <div class="bg-white rounded-lg shadow-lg p-6 transition-all duration-300 hover:shadow-xl hover:border-green-600 hover:border">
                        <h3 class="font-bold text-lg">{{ $committee->name }}</h3>
                        <p class="text-gray-600 mt-2">
                            {{ $committee->description }}
                        </p>
                        @auth
                            <a href="{{ route('admin.committee-members.index') }}"
                               class="learn-more mt-4 bg-transparent border border-green-600 text-green-600 font-medium py-2 px-4 rounded transition-all duration-300 flex items-center">
                                Learn more
                                <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                                     xmlns="http://www.w3.org/2000/svg">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                                </svg>
                            </a>
                        @else
                            <a href="{{ route('login') }}"
                               class="learn-more mt-4 bg-transparent border border-green-600 text-green-600 font-medium py-2 px-4 rounded transition-all duration-300 flex items-center">
                                Learn more
                                <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                                     xmlns="http://www.w3.org/2000/svg">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                                </svg>
                            </a>
                        @endauth
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <section class="relative bg-gray-900 text-white font-karla h-[378px]">
        <!-- Background Image with Overlay -->
        <div class="absolute inset-0">
            {{-- <img src="{{ asset('frontend/community-banner.png') }}" alt="Community Banner"
                 class="w-full h-full object-cover"> --}}
            <div class="absolute inset-0 bg-gradient-to-b from-[#1C1C1C] to-[#1C1C1C] opacity-70"></div>
        </div>

        <!-- Content -->
        <div class="relative container mx-auto flex flex-col items-center text-center px-6 py-16 space-y-6">
            <h2 class="text-2xl md:text-3xl font-bold leading-tight md:mt-[100px]">
                With over <span class="text-green-500">{{$committeMembersCount}} members</span> and counting, we’re
                building a community focused on financial growth, support, and success
            </h2>

            <!-- CTA Button -->
            <a href="{{ route('register.form') }}">
                <button class="bg-green-600 hover:bg-green-700 text-white font-medium py-3 px-6 rounded flex items-center transition-all duration-300">
                    Join with us
                    <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                    </svg>
                </button>
            </a>
        </div>
    </section>

    <!-- Our Moment Section -->
    <section class="out-moment-section py-16 bg-white">
        <div class="container mx-auto px-4">
            <!-- Section Title -->
            <div class="section-title text-center">
                <h5 class="font-medium text-[#009245] text-[24px] md:text-[28px] lg:text-[32px]">Our Moments in
                    Action</h5>
                <h2 class="font-semibold text-[28px] md:text-[36px] lg:text-[45px]">Capturing Our Best Moments</h2>
            </div>

            <!-- Tab Buttons -->
            <div class="flex justify-center my-8">
                <div class="gallery-tabs-btn bg-[#E6F4EC] p-2 inline-block rounded-md">
                    <div class="flex justify-center space-x-2">
                        <button class="tab-btn bg-[#009245] px-6 py-3 text-white font-medium rounded-md"
                                data-target=".photo-gallery">
                            Photos
                        </button>
                        <button class="tab-btn px-6 py-3 rounded-md font-medium text-[#009245]"
                                data-target=".video-gallery">
                            Videos
                        </button>
                    </div>
                </div>
            </div>

            <!-- Photo Gallery Grid -->
            <div class="photo-gallery grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
                @forelse($galleryPhotos as $index => $photo)
                    <div
                        class="relative rounded-xl overflow-hidden group {{ $index === 0 ? 'col-span-1 sm:col-span-2' : '' }} h-[300px] lg:h-[432px]">
                        <img class="w-full h-full object-cover"
                             src="{{ $photo->file_path ? asset('storage/' . $photo->file_path) : asset('frontend/img/photo1.svg') }}"
                             alt="Gallery Image">
                        <div
                            class="absolute inset-0 bg-black bg-opacity-40 opacity-0 group-hover:opacity-100 transition-opacity duration-500 flex flex-col justify-end p-4 text-white">
                            <h3 class="text-lg md:text-2xl font-medium">{{ $photo->title }}</h3>
                            <p class="hidden md:block">{{ $photo->description }}</p>
                        </div>
                    </div>
                @empty
                    <!-- Fallback for when no photos are available -->
                    <div class="col-span-full text-center text-gray-600">
                        <p>No active gallery photos available at this time.</p>
                    </div>
                @endforelse
            </div>



            <div class="video-gallery grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 hidden">
                @forelse($galleryVideos as $index => $video)
                    <div
                        class="relative rounded-xl overflow-hidden group {{ $index === 0 ? 'col-span-1 sm:col-span-2' : '' }} h-[300px] lg:h-[432px]">
                        <div class="relative w-full h-full">
                            <video class="w-full h-full object-cover absolute inset-0 video"
                                   src="{{ $video->file_path ? asset('storage/' . $video->file_path) : asset('frontend/img/video.mp4') }}"
                                   poster="{{ asset('frontend/img/default-poster.jpg') }}"
                                   preload="metadata"
                                   loop>
                            </video>
                        </div>
                        <div
                            class="absolute inset-0 bg-black bg-opacity-40 opacity-0 group-hover:opacity-100 transition-opacity duration-500 flex flex-col justify-end p-4 text-white">
                            <h3 class="text-lg md:text-2xl font-medium">{{ $video->title }}</h3>
                            <p class="hidden md:block">{{ $video->description }}</p>
                        </div>
                        <div
                            class="play-buttons absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex gap-4">
                            <img class="w-16 h-16 play-btn cursor-pointer"
                                 src="{{ asset('frontend/img/playbutton.svg') }}" alt="Play">
                            <img class="w-16 h-16 stop-btn hidden cursor-pointer"
                                 src="{{ asset('frontend/img/pausebutton.svg') }}" alt="Pause">
                        </div>
                    </div>
                @empty
                    <div class="col-span-full text-center text-gray-600">
                        <p>No active gallery videos available at this time.</p>
                    </div>
                @endforelse

                    <div class="col-span-full text-center mt-8">
                        <a href="{{ route('videos.all') }}"
                           class="bg-green-600 hover:bg-green-700 text-white font-medium py-3 px-6 rounded inline-flex items-center transition-all duration-300">
                            Show all videos
                            <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                                 xmlns="http://www.w3.org/2000/svg">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                      d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                            </svg>
                        </a>
                    </div>

            </div>


        </div>


    </section>

    <section class="bg-[#F4FAF6] text-gray-900 font-karla py-16">
        <div class="container mx-auto p-6 flex flex-col items-center justify-center text-center">
            <h4 class="text-green-600 font-medium text-lg">Explore Our Events</h4>
            <h2 class="text-4xl font-bold leading-tight">Join Us and Be Part of the Experience</h2>
        </div>

        <div class="container mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 px-6">
            @forelse($events as $event)
                <!-- Consistent event card for all events -->
                <div class="bg-white rounded-lg shadow-lg overflow-hidden h-full flex flex-col">
                    <!-- Event Image -->
                    <div class="relative">
                        <img
                            src="{{ $event->files->first() ? asset('storage/' . $event->files->first()->file_path) : asset('frontend/event-banner.png') }}"
                            alt="{{ $event->name }}"
                            class="w-full h-48 object-cover">
                    </div>
                    
                    <!-- Event Content -->
                    <div class="p-4 flex flex-col flex-grow">
                        <h3 class="font-bold text-lg mb-2 line-clamp-2">{{ $event->name }}</h3>
                        <p class="text-gray-600 text-sm mb-3 line-clamp-2">{{ $event->description }}</p>
                        
                        <!-- Event Details -->
                        <div class="space-y-2 mb-4">
                            <div class="flex items-center text-gray-500">
                                <img src="{{ asset('frontend/icons/location-icon.svg') }}" class="w-4 h-4 mr-2" alt="Location">
                                <span class="text-sm">{{ $event->venue }}</span>
                            </div>
                            <div class="flex items-center text-gray-500">
                                <img src="{{ asset('frontend/icons/calendar-icon.svg') }}" class="w-4 h-4 mr-2" alt="Date">
                                <span class="text-sm">{{ $event->dates->first() ? $event->dates->first()->date->format('M d, Y') : 'Date TBD' }}</span>
                            </div>
                        </div>
                        
                        <!-- Details Button -->
                        @if($event->dates->first() && $event->dates->first()->date >= now())
                            <div class="mt-auto">
                                <a href="{{ route('events.show', $event->slug) }}">
                                    <button class="w-full bg-transparent border border-green-600 text-green-600 hover:bg-green-600 hover:text-white font-medium py-2 px-4 rounded transition-all duration-300 flex items-center justify-center">
                                        Details
                                        <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                                        </svg>
                                    </button>
                                </a>
                            </div>
                        @endif
                    </div>
                </div>
            @empty
                <div class="col-span-full text-center text-gray-600 py-8">
                    <p>No upcoming events found.</p>
                </div>
            @endforelse
        </div>
    </section>

    <section class="bg-white font-karla py-16">
        <div class="container mx-auto px-6">
            <!-- Left Side: Contact Info -->
            <div class="flex flex-col justify-center space-y-6">
                <h4 class="text-green-500 font-karla font-medium text-2xl md:text-2xl lg:text-2xl leading-[43px] md:leading-[50px] lg:leading-[55px] tracking-tighter">
                    Stay connect with us
                </h4>
                <h2 class="font-karla font-bold text-[32px] md:text-[48px] leading-[45px] md:leading-[65px] tracking-tighter max-w-[588px]">
                    We're here to answer your questions and help you join our community
                </h2>

                <!-- Contact Info Boxes -->
                <div class="flex flex-col lg:flex-row lg:items-center gap-4">
                    <!-- Email Box -->
                    <div
                        class="flex items-center bg-[#f8f8f8] shadow-md border border-gray-200 rounded-lg p-4 w-full sm:w-[280px] gap-4">
                        <div class="flex items-center justify-center w-12 h-12 bg-[#E8F5E9] rounded-lg shrink-0">
                            <img src="{{ asset('frontend/icons/Email.svg') }}" class="w-6 h-6" alt="Email Icon">
                        </div>
                        <div class="min-w-0">
                            <p class="font-karla text-[18px] leading-[24px] font-semibold text-gray-900">Email
                                Address</p>
                            <p class="font-karla text-[14px] leading-[20px] text-gray-500 break-words">
                                info@bau0102.org</p>
                        </div>
                    </div>

                    <!-- Phone Box -->
                    <div
                        class="flex items-center bg-[#f8f8f8] shadow-md border border-gray-200 rounded-lg p-4 w-full sm:w-[280px] gap-4">
                        <div class="flex items-center justify-center w-12 h-12 bg-[#E8F5E9] rounded-lg shrink-0">
                            <img src="{{ asset('frontend/icons/Phone.svg') }}" class="w-6 h-6" alt="Phone Icon">
                        </div>
                        <div class="min-w-0">
                            <p class="font-karla text-[18px] leading-[24px] font-semibold text-gray-900">Phone</p>
                            <p class="font-karla text-[14px] leading-[20px] text-gray-500 break-words">+8801712169769</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


@endsection


@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>
@endpush