@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-contain md: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-[10rem] md: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-lg">
            <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 Gardens 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 lifestyle of
                    convenience, tranquility, and modern living, all within a vibrant, secure community.

                </div>
            </div>
            <div class="flex flex-col items-center justify-center gap-10 mt-20 font-bold text-[#3f4424]  xl:flex-row">


                <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 font-bold gap-10 mt-10 text-[#3f4424]  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 "> --}}