@extends('frontend.layout.navbar')
@section('title', 'Amenities')
@section('content')
    <div class="relative w-full h-full">

        <video autoplay loop muted playsinline class="absolute inset-0 object-cover w-full h-full ">
            <source src="{{ asset('image/amenities/video/Village Amenities Banner.mp4') }}" type="video/mp4">
            Your browser does not support the video tag.
        </video>
        <div class="relative container mx-auto py-[25rem]">
            <div class="flex flex-col justify-center">

                {{-- <p class="md:text-6xl text-2xl text-[#3e4424] font-bold p-5">Reason to Invest</p> --}}


            </div>


        </div>
    </div>
    <div class="relative w-full h-full">

        <img src="{{ asset('image/home/background 1.png') }}" class="absolute inset-0 w-full h-full ">
        <div class="relative container mx-auto pb-[10rem]  z-30 border-zinc-300  p-5 max-w-screen-xl">
            <div class="grid grid-cols-1 gap-5 md:grid-cols-2 mt-10">
                <div class="flex justify-center ">
                    <p class="lg:text-5xl text-[#3f4424] font-bold text-2xl dancing-script">Village Amenities </p>
                </div>
                <div class="text-[#3f4424] leading-8 ">

                    The Garden at South Ridge offers premium amenities, including a clubhouse,
                    swimming pool, fitness gym, sports courts, playground, and scenic walkways,
                    all within a secure and peaceful community. Experience a festyle of
                    convenience, tranquil, and modern living, all within a vibrant, secure community.

                </div>
            </div>
            <div class="flex flex-col items-center justify-center gap-10 mt-20 text-nowrap md:flex-row">
                {{-- <div class="">
                    <select name="category" id="category" class="border-2 border-[#b5c47c] rounded-full p-2 px-5">
                        <option value="technology">Categories</option>
                        <option value="health">Health</option>
                        <option value="education">Education</option>
                        <option value="sports">Sports</option>
                    </select>
                </div> --}}


   <button onclick="toggleContent(4)" id="button4">Porte Cochere and Reception Area</button>
             <button onclick="toggleContent(6)" id="button6">Basketball Court</button>
                       <button onclick="toggleContent(5)" id="button5">Fully-Equipped Fitness Gym</button>
                <button onclick="toggleContent(0)" id="button0">Adult and Kiddie Pool</button>
                     <button onclick="toggleContent(2)" id="button2">Outdoor Children's Playgroud</button>
                                    <button onclick="toggleContent(8)" id="button8">The Grand Entrance Gate</button>
                                    
 

            </div>
             <div class="flex flex-col items-center justify-center gap-10 mt-10 text-nowrap md:flex-row">
                 <button onclick="toggleContent(9)" id="button9">Grand Function Hall</button>
                                 <button onclick="toggleContent(3)" id="button3">Open-Air Multipurpose</button>
                     
                <button onclick="toggleContent(1)" id="button1">Canopied Walkways</button>
         
    
             
               
      
                <button onclick="toggleContent(7)" id="button7">Administration Office and Commercial-Grade Kitchen</button>



            </div>
            <style>
                /* Tailwind by default doesn't include this, so adding a custom class to handle active states */
                .hidden-div {
                    display: none;
                }

                .active-div {
                    display: block;
                }

                .active-button {
    text-decoration: underline;
    font-weight: bold;
    color: #3f4424; /* Fixing the color syntax */
}

            </style>
            <script>
                // Function to toggle visibility of the content divs
                function toggleContent(index) {
                    // Hide all content divs
                    let contentDivs = document.querySelectorAll('.content-div');
                    contentDivs.forEach(function(div) {
                        div.classList.add('hidden-div');
                        div.classList.remove('active-div');
                    });

                    // Show the selected content div
                    let selectedContent = document.getElementById('video' + (index + 1));
                    selectedContent.classList.add('active-div');
                    selectedContent.classList.remove('hidden-div');

                    // Remove active class from all buttons
                    let buttons = document.querySelectorAll('button');
                    buttons.forEach(function(button) {
                        button.classList.remove('active-button');
                    });

                    // Add active class to the clicked button
                    document.getElementById('button' + index).classList.add('active-button');
                }
            </script>
            <div>
                @include('frontend.pages.amenities.divs.div')


            </div>
        </div>
    @endsection
    {{-- <img src="{{ asset('image/invest/Map.png') }}" class="absolute inset-0 "> --}}