@extends('frontend.layout.navbar')
@section('title', 'Volunteer')
@section('content')
    <div class="relative w-full h-full">
        <img src="{{ asset('img/impact/banner-volunteer.webp') }}" class="absolute inset-0 object-cover w-full h-full">
        <div class="container relative inset-0 z-0 flex items-center mx-auto pt-[25rem] pb-[3rem] ">
            <div>
                <div class=" w-auto md:w-[30rem] h-36 p-4 bg-black bg-opacity-60 flex items-center justify-start border-l-4 "
                    style="border-color: #ffbd59;">
                    <div class="">
                        <p class="mb-3 text-3xl font-bold tracking-wider text-white lg:text-5xl">Get Involved</p>
                        <p class="text-xs text-white">Home > Get Involved > Volunteer</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container max-w-screen-xl p-5 mx-auto">
        <p class="mt-10 text-3xl font-semibold text-center">Join Our Cause</p>
        <p class="mt-5 text-center">Be a part of something meaningful - volunteer with our foundation and help us transform
            lives and
            communities</p>
        <div class="flex flex-col items-center justify-center gap-10 py-10 md:flex-row">
            <button onclick="toggleDiv('div1')">
                <div class="flex flex-col items-center justify-center">
                    <div class="relative flex flex-col items-center justify-center mb-10 w-auto md:w-[20rem] ">
                        <img src="{{ asset('img/impact/button-volunteer.png') }}" class="absolute inset-0 w-full h-full">
                        <div class="relative p-6"><a class="flex items-center gap-5 text-3xl text-white grace-font"><img
                                    src="{{ asset('img/contact/icon.webp') }}" class="w-20">
                                <p>Volunteer</p>
                            </a>
                        </div>
                    </div>
                </div>
            </button>
            <!--<button onclick="toggleDiv('div2')">-->
            <!--    <div class="flex flex-col items-center justify-center">-->
            <!--        <div class="relative flex flex-col items-center justify-center mb-10 w-auto md:w-[20rem]">-->
            <!--            <img src="{{ asset('img/new/btn.webp') }}" class="absolute inset-0 w-full h-full">-->
            <!--            <div class="relative p-6"><a-->
            <!--                    class="flex items-center justify-center gap-5 text-3xl text-white grace-font"><img-->
            <!--                        src="{{ asset('img/new/icon.webp') }}" class="w-20">-->
            <!--                    <p>Donate</p>-->
            <!--                </a>-->
            <!--            </div>-->
            <!--        </div>-->
            <!--    </div>-->
            <!--</button>-->
            
            
               <button onclick="toggleDiv('div3')">
               <div class="flex flex-col items-center justify-center">
                <div class="relative flex flex-col items-center justify-center mb-10 w-auto md:w-[20rem]">
                    <img src="{{ asset('img/new/btn.webp') }}" class="absolute inset-0 w-full h-full">
                    <div class="relative p-6"><a 
                            class="flex items-center justify-center gap-5 text-3xl text-white grace-font"><img
                                src="{{ asset('img/new/icon-spreadawareness.webp') }}" class="w-20">
                            <p>Spread Awareness</p>
                        </a>
                    </div>
                </div>
            </div
            </button>
            
              
        </div>


        <script>
            // Function to toggle divs
            function toggleDiv(divIdToShow) {
                const divs = document.querySelectorAll('.toggle-div');
                divs.forEach(div => {
                    if (div.id === divIdToShow) {
                        div.classList.remove('hidden'); // Show the targeted div
                    } else {
                        div.classList.add('hidden'); // Hide all other divs
                    }
                });
            }
        </script>




        <!-- Div 2 -->
@include('frontend.pages.course_forms')
        
    </div>

    @if (session('success'))
        <div id="successModal" class="fixed inset-0 z-50 flex items-center justify-center bg-gray-900 bg-opacity-50">
            <div class="flex flex-col items-center justify-center w-full max-w-2xl p-6 bg-white rounded-lg shadow-lg">

                <img src="{{ asset('img/logo-header.webp') }}" alt="Logo" class="object-cover w-auto mb-2">
                <p class="text-center text-[#81be00] text-lg md:text-3xl font-semibold mb-5">
                    {{ session('success') }}
                </p>
                <p class="text-xs">We'll review your application and contact you soon to discuss next
                    steps.</p>
            </div>
        </div>
        <script>
            // Automatically close the modal after 5 seconds
            setTimeout(function() {
                document.getElementById('successModal').style.display = 'none';
            }, 5000); // 5000 milliseconds = 5 seconds
        </script>
    @endif

@endsection