<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <link href="{{ asset('css/Header.css') }}" rel="stylesheet">

    </head>
    <body>
    
    <div class="toolbar-container">
        <header>
            <div class="left-links">
                <p class="small-text">Have any question?</p>
                <span class="icon">&#128222;</span>
                <a href="tel:+442034750264">+442034750264</a>
                <span class="icon">&#9993;</span>
                <a href="mailto:info@edtechplus.com">info@edtechplus.com</a>
            </div>
            <div class="right-links">

    @if (session('logged_in'))
   
        <div class="user-container">
            <img src="{{ asset(Auth::user()->ProfilePicture) }}" alt="User Profile Picture" class="profile-image">
            <a href="{{ route('profile') }}"><span>{{ Auth::user()->Username }}</span></a>
            <a href="{{ route('logout') }}">Logout</a>
        </div>
    @else
     
        <a href="{{ route('register') }}">Register</a>
        <a href="{{ route('login') }}">Login</a>
    @endif

</div>



      
        </header>
    </div>


    <a href="https://wa.me/447389775445" target="_blank" class="whatsapp-icon">
        <i class="fab fa-whatsapp"></i>
    </a>

    
    <div class="navbar" id="navbar">

    <div class="side-menu" id="side-menu">
    @if (session('logged_in'))
   
   <div class="user-container">
       <img src="{{ asset(Auth::user()->ProfilePicture) }}" alt="User Profile Picture" class="profile-image">
       <a href="{{ route('profile') }}"><span>{{ Auth::user()->Username }}</span></a>
       <a href="{{ route('logout') }}">Logout</a>
   </div>
@else

   <a href="{{ route('register') }}">Register</a>
   <a href="{{ route('login') }}">Login</a>
@endif

<a href="{{ route('courses') }}">COURSES</a>
            <a href="{{ route('ownafranchise') }}">OWN A FRANCHISE</a>
            <a href="{{ route('home') }}">HOME</a>
            <a href="{{ route('contact') }}">CONTACT</a>

          <!-- <div class="dropdown">
        <button class="dropbtn">
            <span class="selected-icon">
                <img src="{{ asset('images/uk.png') }}" alt="English" class="flag">
            </span>
            <span class="selected-language"><div class="selected-text">ENGLISH</div></span>
            <div class="dropdown-icon"><i class="fa fa-caret-down"></i></div>
        </button>
        <ul class="dropdown-content">
            <li><a href="{{ route('homear') }}" class="flag">
            <img src="{{ asset('images/lebanon.jpg') }}" alt="Arabic" class="flag">
            <span class="selected-language">ARABIC</span></a></li>
            <li><a href="{{ route('home') }}" class="flag">
            <img src="{{ asset('images/uk.png') }}" alt="English" class="flag">
            <span class="selected-language">ENGLISH</span></a></li>
            <li><a href="{{ route('homefr') }}" class="flag">
            <img src="{{ asset('images/france.png') }}" alt="French" class="flag">
            <span class="selected-language">FRANCAIS</span></a></li>
        </ul>
    </div>-->
    <span class="search-icon">&#128269;</span>
</div>


       <div class="logo"> 
       <img src="{{ asset('images/Edtech-logo-white-01-768x151-1.png') }}" alt="Logo" id="navbar-logo">
       </div>

        <div class="right-links">


            <!-- <a href="{{ route('courses') }}" class="nav-link">COURSES</a>
            <a href="{{ route('ownafranchise') }}" class="nav-link">OWN A FRANCHISE</a>
            <a href="{{ route('home') }}" id="active" class="nav-link active">HOME</a>
            <a href="{{ route('contact') }}" class="nav-link">CONTACT</a> -->


            <a href="{{ route('courses') }}">COURSES</a>
            <a href="{{ route('ownafranchise') }}">OWN A FRANCHISE</a>
            <a href="{{ route('home') }}">HOME</a>
            <a href="{{ route('contact') }}">CONTACT</a>



             <!-- <div class="dropdown">
        <button class="dropbtn">
            <span class="selected-icon">
                <img src="{{ asset('images/uk.png') }}" alt="English" class="flag">
            </span>
            <span class="selected-language"><div class="selected-text">ENGLISH</div></span>
            <div class="dropdown-icon"><i class="fa fa-caret-down"></i></div>
        </button>
        <ul class="dropdown-content">
            <li><a href="{{ route('homear') }}" class="flag">
            <img src="{{ asset('images/lebanon.jpg') }}" alt="Arabic" class="flag">
            <span class="selected-language">ARABIC</span></a></li>
            <li><a href="{{ route('home') }}" class="flag">
            <img src="{{ asset('images/uk.png') }}" alt="English" class="flag">
            <span class="selected-language">ENGLISH</span></a></li>
            <li><a href="{{ route('homefr') }}" class="flag">
            <img src="{{ asset('images/france.png') }}" alt="French" class="flag">
            <span class="selected-language">FRANCAIS</span></a></li>
        </ul>
    </div>-->
            <span class="search-icon">&#128269;</span>
        

</div>
<button class="hamburger-menu" id="hamburger-btn" onclick="toggleMenu()">
    &#9776;
</button>

       
    </div>

   

    <script>
      function toggleMenu() {
    var sideMenu = document.getElementById("side-menu");
    var hamburgerBtn = document.getElementById("hamburger-btn");
    if (sideMenu.style.right === "-300px" || sideMenu.style.right === "") {
        sideMenu.style.right = "0";
        hamburgerBtn.innerHTML = "&#10005;";
    } else {
        sideMenu.style.right = "-300px";
        hamburgerBtn.innerHTML = "&#9776;";
    }


    window.addEventListener("scroll", function() {
    var navbar = document.getElementById("navbar");
    var scrollPosition = window.scrollY;

    if (scrollPosition > 50) {  
        navbar.classList.add("white-menu");
    } else {
        navbar.classList.remove("white-menu");
    }
});

}


    </script>


<script>
 document.addEventListener('DOMContentLoaded', function () {
    var navbar = document.getElementById('navbar');
    var navLinks = document.querySelectorAll('.navbar a');
    var logoImage = document.getElementById('navbar-logo');
    var hamburgerBtn = document.getElementById('hamburger-btn');
    var sideMenu = document.getElementById('side-menu');
    var languageLinks = document.querySelectorAll('.dropdown-content a');
    var languageText = document.querySelectorAll('.selected-text');
    var dropdownIcon = document.querySelector('.dropdown-icon');
    var initialLogoSrc = '{{ asset('images/Edtech-logo-white-01-768x151-1.png') }}';
    var scrolledLogoSrc = '{{ asset('images/Edtech-logo.png') }}';

    window.addEventListener('scroll', function () {
        if (window.scrollY > 0) {
            navbar.style.backgroundColor = 'white';
            navbar.style.color = 'black';

            navLinks.forEach(function (link) {
                link.style.color = 'black';
            });

            languageLinks.forEach(function (link) {
                link.style.color = 'black';
            });

            dropdownIcon.classList.add('scrolled-dropdown-icon');
            languageText.forEach(function (text) {
                text.classList.add('scrolled-selected-text');
            });

            hamburgerBtn.classList.add('scrolled-hamburger');
            sideMenu.classList.add('scrolled-side-menu');
            logoImage.src = scrolledLogoSrc;
        } else {
            navbar.style.backgroundColor = 'black';
            navbar.style.color = 'white';
            navLinks.forEach(function (link) {
                link.style.color = 'white';
            });

            languageLinks.forEach(function (link) {
                link.style.color = 'black';
            });

            dropdownIcon.classList.remove('scrolled-dropdown-icon');
            languageText.forEach(function (text) {
                text.classList.remove('scrolled-selected-text');
            });

            hamburgerBtn.classList.remove('scrolled-hamburger');
            sideMenu.classList.remove('scrolled-side-menu');
            logoImage.src = initialLogoSrc;
        }
    });
});


</script>


</body>
</html>