
<style>
    .nav-link.active {
        /* border-bottom: 2px solid #7E4555; */
        font-weight: 600;
        color: black !important;
        background-color: white;
        border-radius: 10px;
    }
   .menu_hover:hover {
        /* border-bottom: 2px solid #7E4555; */
        font-weight: 600;
        color: black !important;
        background-color: white;
        border-radius: 10px;
    }
    .nav_css {
        justify-content: space-between;
        width: 100%;
        display: flex;
    }
    .navbar-light .navbar-nav .nav-link {
    color: black;
    }

</style>
<nav class="navbar navbar-expand-lg navbar-light "
    style="background-color: #6ac3c7; border-top: 1px solid black; border-bottom: 1px solid black;">
    <div class="container">
        {{-- <a class="navbar-brand" href="#">Navbar</a> --}}
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav  nav_css me-auto mb-2 mb-lg-0">
                <li class="nav-item menu_css">
                    <a class="nav-link {{ Route::currentRouteName() == 'home' ? 'active' : '' }}" aria-current="page"
                        href="{{ route('home') }}" id="home-link"
                        style="font-weight: 1000 !important; font-size: 15px !important;">
                        {{ strtoupper('Home') }}
                    </a>

                </li>
                <li class="nav-item">
                    <a class="nav-link menu_hover {{ Route::currentRouteName() == 'services' ? 'active' : '' }}"
                        href="{{ route('services') }}"
                        style="font-weight: 1000 !important;font-size: 15px !important;">{{ strtoupper('SPONSORSHIPS') }}</a>
                </li>
                 <li class="nav-item  menu_hover dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                        data-bs-toggle="dropdown" aria-expanded="false"
                        style="font-weight: 1000 !important;font-size: 15px !important;">
                        {{ strtoupper('Donations') }}
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <li><a class="dropdown-item" href="{{ route('donations') }}">Gernal Donations</a></li>
                        <li>
                            <a class="dropdown-item"
                                href="{{ route('recurring-sponsor-now', 'recurring-donations') }}">
                                Recurring Donations</a>

                        </li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>
                    </ul>
                </li>
                 <li class="nav-item">
                    <a class="nav-link  menu_hover {{ Route::currentRouteName() == 'all-upcoming-events' ? 'active' : '' }} "
                        href="{{ route('all-upcoming-events') }}" tabindex="-1" aria-disabled="true"
                        style="font-weight: 1000 !important;font-size: 15px !important;">{{ strtoupper('Events') }}</a>
                </li>
                <li class="nav-item ">
                    <a class="nav-link menu_hover {{ Route::currentRouteName() == 'calendar' ? 'active' : '' }}"
                        href="{{ route('calendar') }}"
                        style="font-weight: 1000 !important;font-size: 15px !important;">{{ strtoupper('Calendar') }}</a>
                </li>

               
                {{-- <li class="nav-item">
                    <a class="nav-link  menu_hover " href="{{ route('facilities') }}" tabindex="-1" aria-disabled="true"
                        style="font-weight: 1000 !important;font-size: 15px !important;">{{ strtoupper('Facilities') }}</a>
                </li> --}}
               
                
                <li class="nav-item menu_hover dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                        data-bs-toggle="dropdown" aria-expanded="false"
                        style="font-weight: 1000 !important;font-size: 15px !important;">
                        {{ strtoupper('Forms') }}

                    </a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                        {{-- <li><a class="dropdown-item" href="{{ route('membership-form') }}">Membership Form</a></li> --}}
                        <li><a class="dropdown-item" href="{{ route('priest-request-form') }}">Priest Request Form</a>
                        </li>
                        <li><a class="dropdown-item" href="https://volunteer.vaaptech.com/#/4525">Volunteer Form</a>
                        </li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>

                    </ul>

                </li>
                <li class="nav-item menu_hover dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                        data-bs-toggle="dropdown" aria-expanded="false"
                        style="font-weight: 1000 !important;font-size: 15px !important;">
                        {{ strtoupper(' About Temple') }}

                    </a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <li><a class="dropdown-item" href="{{ route('about-temple') }}">About Temple</a></li>
                        <li><a class="dropdown-item" href="{{ route('about-deities') }}">About Dieties</a></li>
                        <li><a class="dropdown-item" href="{{ route('about-priest') }}">About Priests</a></li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>
                    </ul>
                </li>
               @php
                if (session('logged_in') == 1 ) {
                        $userSession = session('refDataName');
                    @endphp

                    <li class="nav-item">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                            data-bs-toggle="dropdown" aria-expanded="false"
                            style="font-weight: 1000 !important;font-size: 15px !important;">
                            {{ strtoupper('My Profile') }}
                        </a>
                        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                        @if(session('userType') == 'Devotee')
                          <li><a class="dropdown-item {{ Route::currentRouteName() == 'admin.dashboard' ? 'active' : '' }}" href="{{ route('admin.dashboard') }}">My Profile</a></li>
                          @elseif(session('userType') == 'Managements')
                            <li><a class="dropdown-item" href="#">My Profile</a></li>
                         @endif
                             <li><a class="dropdown-item" href="{{route('admin.logout')}}">Logout</a></li>
                            <li><hr class="dropdown-divider"></li>
                        </ul>
                    </li>

                    @php
                    } else {
                    @endphp
                <li class="nav-item menu_hover menu_css">
                                    <a class="nav-link {{ Route::currentRouteName() == 'he' ? 'active' : '' }}" aria-current="page"
                                        href="javascript:void(0);" id="home-link"  onclick="checkLoginStatus()"
                                        style="font-weight: 1000 !important; font-size: 15px !important;">
                                        {{ strtoupper('SIGN-IN') }}
                                    </a>

                </li>
                @php
                }
                @endphp

            </ul>
            {{-- <form class="d-flex">
                <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success" type="submit">Search</button>
            </form> --}}
        </div>
    </div>
</nav> 

{{-- Second menu --}}


<style>
    @import url("https://fonts.googleapis.com/css2?family=Pacifico&display=swap");
    @import url("https://fonts.googleapis.com/css2?family=Pacifico&family=Quicksand:wght@300..700&display=swap");

    header {
        width: 100vw;
        display: flex;
        justify-content: space-around;
        align-items: center;
        background: #e5b029c4;
        /* background: #f3f7fb; */
        top: 0;
        min-height: max-content;
        overflow-x: hidden;
        box-shadow: 0 1px 15px rgba(90, 90, 90, 0.2);
        height: 60px;
        ;
    }

    .logo {
        max-height: 120px;
        cursor: pointer;
        font-family: "Pacifico", cursive;
        font-weight: 400;
        font-style: normal;
        text-align: center;
    }

    .logo>h3 {
        padding: 0;
        margin: 0;
        font-size: 42px;
        color: rgb(36, 44, 86);
    }

    .logo>p {
        font-size: 12px;
    }

    ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 60px;
    }

    li {
        color: rgb(36, 44, 86);
        font-family: "Quicksand", sans-serif;
        font-optical-sizing: auto;
        font-weight: bold;
        cursor: pointer;
        padding: 1px 0;
    }

    li:hover {
        transform: scale(1);
    }

    li::after {
        content: " ";
        width: 60%;
        height: 2px;
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translate(-50%, 100%);
        /* background-color: rgb(36, 44, 86); */
        border-radius: 40%;
    }

    .signup {
        width: 130px;
        display: flex;
        justify-content: end;
    }

    button {
        background: #31363f;
        color: #fff;
        padding: 6px 25px;
        border-radius: 8px;
        border: 0;
        position: relative;
        font-size: 18px;
        font-weight: bold;
        font-family: "Quicksand", sans-serif;
        box-shadow: 10px 10px 5px rgba(51, 51, 51, 0.2);
        cursor: pointer;
        transition: transform 0.5s ease-in-out;
    }

    button:hover {
        background: #515763;
        box-shadow: 5px 5px 5px rgba(51, 51, 51, 0.2);
        transform: translate(5px, 5px);
    }

    svg,
    .navbar-sm {
        display: none;
        transition: transform 0.5s ease-in-out;
    }

    @media (max-width: 500px) {

        .signup,
        .links {
            display: none;
        }

        .logo>h3 {
            font-size: 32px;
        }

        .logo>p {
            font-size: 8px;
        }

        svg {
            display: block;
            cursor: pointer;
        }

        .navbar-sm.show {
            display: block;
            transition: transform 0.5s ease-in-out;
        }

        .navbar-sm {
            padding: 20px 0 20px 0;
            background: #f3f7fb;
            box-shadow: 0 15px 8px rgba(208, 207, 207, 0.2);
            transition: transform 0.5s ease-in-out;
        }

        .navbar-sm>ul {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 20px;
        }

        .svg2 {
            display: none;
        }

        .svg2.show {
            display: block;
        }

        .svg1 {
            display: block;
        }

        .svg1.show {
            display: none;
        }
    }
</style>
<header>
    <div class="logo">
        {{-- <img src="{{ ApiBaseUrl()['url'] . $header_data[0]['leftImage'] }}" style="height:80px;max-width:100px;" /> --}}

        {{-- <h3>Logo</h3>
        <p>Grow Your Business</p> --}}
    </div>
    <div class="links">
        <ul>
            <li>Home</li>
            <li>About</li>
            <li>Contact</li>
            <li>Contact</li>
            <li>Contact</li>
            <li>Contact</li>
            <li>Contact</li>
            <li>Contact</li>
            <li>Contact</li>

        </ul>
    </div>
    <div class="signup">
        <button>Sign Up</button>
    </div>

    <svg class="svg1" onclick="toggleNavbar()" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="35"
        height="35" viewBox="0,0,256,256">
        <g fill="#242c56" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt"
            stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none"
            font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal">
            <g transform="scale(10.66667,10.66667)">
                <path d="M2,5v2h20v-2zM2,11v2h20v-2zM2,17v2h20v-2z"></path>
            </g>
        </g>
    </svg>
    <svg class="svg2" onclick="toggleNavbar()" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="35"
        height="35" viewBox="0 0 24 24">
        <path
            d="M 4.7070312 3.2929688 L 3.2929688 4.7070312 L 10.585938 12 L 3.2929688 19.292969 L 4.7070312 20.707031 L 12 13.414062 L 19.292969 20.707031 L 20.707031 19.292969 L 13.414062 12 L 20.707031 4.7070312 L 19.292969 3.2929688 L 12 10.585938 L 4.7070312 3.2929688 z">
        </path>
    </svg>
</header>
<div class="navbar-sm">
    <ul>
        <li>Home</li>
        <li>About</li>
        <li>Contact</li>
        <li>Contact</li>
        <button>Signup</button>
    </ul>
</div>

<script>
    function toggleNavbar() {
        const navbar = document.querySelector(".navbar-sm");
        const svg1 = document.querySelector(".svg1");
        const svg2 = document.querySelector(".svg2");

        navbar.classList.toggle("show");
        svg1.classList.toggle("show");
        svg2.classList.toggle("show");
    }
</script>