@php
    if (auth('user')->check()){
        $user = auth('user')->user();
        $userName = $user->name;
    }
@endphp
<!--Header-->
<header class="header">

    <!--Desktop Header-->
    <div class="d-header">
        <div class="top-header container-fluid">
            <a class="logo" href="{{ route('student.dashboard') }}" aria-label="logo"><img
                    src="{{ asset('student-panel') }}/images/logo.svg" width="100%" height="100%" alt="logo"></a>

            <!--Desktop(nav) and Mobile (sidebar)-->
            <div class="sidebar">
                <div class="container">

                    <!--Mobile-->
                    <div class="user">
                        <a href="javascript:;"><img src="{{ asset('student-panel') }}/images/logo-small.svg"
                                alt="small-logo" width="100%" height="100%"></a>
                        <p class="user-name">Hi {{@$userName}}!</p>
                    </div>

                    <div class="nav-links">
                        <a id="dashboard" class="single-link" href="{{ route('student.dashboard') }}">
                            <img src="{{ asset('student-panel') }}/images/header/icon2.svg" alt="icon" width="100%"
                                    height="100%">Dashboard</a>
                        <a id="document" class="single-link" href="{{ route('student.document') }}"><img
                                src="{{ asset('student-panel') }}/images/header/icon2.svg" alt="icon" width="100%"
                                height="100%"><span id="step4">Documents</span></a>
                        {{-- <a id="application-manager" class="single-link"
                            href="{{ route('student.applicationManager') }}"><img
                                src="{{ asset('student-panel') }}/images/header/icon2.svg" alt="icon" width="100%"
                                height="100%">Application Manager</a> --}}
                        {{-- <a class="single-link" href="{{ route('student.document') }}"><img
                                src="{{asset('student-panel')}}/images/header/icon3.svg" alt="icon" width="100%"
                                height="100%">Finances</a>  --}}
                    </div>

                    {{-- <div class="head-dropdown">
                        <p class="drp-head">Services</p>
                        <div class="nav-list">
                            <a class="drp-link" href="javascript:;"><img
                                    src="{{asset('student-panel')}}/images/header/icon5.svg" alt="icon" width="100%"
                                    height="100%">Live Event
                                &
                                Webinars</a>
                            <a class="drp-link" href="javascript:;"><img
                                    src="{{asset('student-panel')}}/images/header/icon6.svg" alt="icon" width="100%"
                                    height="100%">University
                                Deadline</a>
                            <a class="drp-link" href="javascript:;"><img
                                    src="{{asset('student-panel')}}/images/header/icon7.svg" alt="icon" width="100%"
                                    height="100%">Exam
                                Prep</a>
                            <a class="drp-link" href="javascript:;"><img
                                    src="{{asset('student-panel')}}/images/header/icon8.svg" alt="icon" width="100%"
                                    height="100%">Countries</a>
                            <a class="drp-link" href="javascript:;"><img
                                    src="{{asset('student-panel')}}/images/header/icon9.svg"
                                    alt="icon" width="100%" height="100%">Accommodation</a>
                            <a class="drp-link" href="javascript:;"><img
                                    src="{{asset('student-panel')}}/images/header/icon10.svg" alt="icon" width="100%"
                                    height="100%">Scholarship</a>
                        </div>
                    </div> --}}

                    <div class="head-dropdown">
                        <p class="drp-head">Tools</p>
                        <div class="nav-list">
                            {{-- <a class="drp-link stopLoading"
                                href="{{ route('student.finder', ['slug' => 'university']) }}"><img
                                    src="{{ asset('student-panel') }}/images/header/icon4.svg" alt="icon"
                                    width="100%" height="100%">Unifinder</a> --}}
                            <a class="drp-link" href="{{ route('student.finder', ['slug' => 'course']) }}"><img
                                    src="{{ asset('student-panel') }}/images/header/icon7.svg" alt="icon"
                                    width="100%" height="100%">Course Finder</a>
                            {{-- <a class="drp-link" href="{{ route('student.finder') }}"><img
                                        src="{{asset('student-panel')}}/images/header/icon10.svg" alt="icon" width="100%"
                                        height="100%">Scholarship Finder</a> --}}
                        </div>
                    </div>

                    <div class="head-dropdown support">
                        <p class="drp-head">Support</p>
                        <div class="nav-list">
                            <a class="drp-link" href="tel:{{ @$website_setting->phone }}"><img
                                    src="{{ asset('student-panel') }}/images/header/icon14.svg" alt="icon"
                                    width="100%" height="100%">{{ @$website_setting->phone }}</a>
                            <a class="drp-link" target="_blank"
                                href="https://wa.me/{{ str_replace([' ', '+'], '', $website_setting->phone) }}"><img
                                    src="{{ asset('student-panel') }}/images/header/icon15.svg" alt="icon"
                                    width="100%" height="100%">{{ @$website_setting->phone }}</a>
                            <a class="drp-link" href="mailto:{{ @$setting->email }}"><img
                                    src="{{ asset('student-panel') }}/images/header/icon16.svg" alt="icon"
                                    width="100%" height="100%">{{ @$setting->email }}</a>
                            <a class="drp-link" href="{{ route('website.faq') }}"><img
                                    src="{{ asset('student-panel') }}/images/header/icon12.svg" alt="icon"
                                    width="100%" height="100%">FAQ’s</a>
                        </div>
                    </div>

                    <!--Mobile-->
                    
                    <a onclick="event.preventDefault(); document.getElementById('logout-form').submit();" href="{{ route('logout') }}" class="logout-btn">Logout
                        <img src="{{ asset('student-panel') }}/images/header/logout-icon.svg" alt="icon-logout"
                            width="100%" height="100%">
                    </a>
                    <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
                        @csrf
                    </form>
                </div>
            </div>

            <!--Desktop-->
            <div class="user-actions">
                {{-- <a href="javascript:;" class="user-btn search" aria-label="Search">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M11.5005 21C16.7472 21 21.0005 16.7467 21.0005 11.5C21.0005 6.2533 16.7472 2 11.5005 2C6.25378 2 2.00049 6.2533 2.00049 11.5C2.00049 16.7467 6.25378 21 11.5005 21Z"
                            stroke="#066AC9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                        <path d="M22.0005 22L20.0005 20" stroke="#066AC9" stroke-width="1.5" stroke-linecap="round"
                            stroke-linejoin="round" />
                    </svg>

                </a> --}}
                <div class="head-dropdown">
                    <a href="javascript:;" class="user-btn notification" aria-label="Notification">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M12.0206 2.90991C8.71058 2.90991 6.02058 5.59991 6.02058 8.90991V11.7999C6.02058 12.4099 5.76058 13.3399 5.45058 13.8599L4.30058 15.7699C3.59058 16.9499 4.08058 18.2599 5.38058 18.6999C9.69058 20.1399 14.3406 20.1399 18.6506 18.6999C19.8606 18.2999 20.3906 16.8699 19.7306 15.7699L18.5806 13.8599C18.2806 13.3399 18.0206 12.4099 18.0206 11.7999V8.90991C18.0206 5.60991 15.3206 2.90991 12.0206 2.90991Z"
                                stroke="#066AC9" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" />
                            <path
                                d="M13.8704 3.19994C13.5604 3.10994 13.2404 3.03994 12.9104 2.99994C11.9504 2.87994 11.0304 2.94994 10.1704 3.19994C10.4604 2.45994 11.1804 1.93994 12.0204 1.93994C12.8604 1.93994 13.5804 2.45994 13.8704 3.19994Z"
                                stroke="#066AC9" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"
                                stroke-linejoin="round" />
                            <path opacity="0.4"
                                d="M15.0205 19.0601C15.0205 20.7101 13.6705 22.0601 12.0205 22.0601C11.2005 22.0601 10.4405 21.7201 9.90051 21.1801C9.36051 20.6401 9.02051 19.8801 9.02051 19.0601"
                                stroke="#066AC9" stroke-width="1.5" stroke-miterlimit="10" />
                        </svg>

                    </a>
                    <div class="notification-popup">

                        <div class="popup-body">
                             <div class="box">
                                <p class="small-head"> No Notification Found
                                </p>
                                {{-- <span class="duration">5 days ago</span> --}}
                            </div>
                            {{-- <div class="box">
                                <p class="small-head"><span class="name">Brian Griffin</span> wants to collaborate
                                </p>
                                <span class="duration">5 days ago</span>
                            </div>
                            <div class="box">
                                <p class="small-head"><span class="name">Brian Griffin</span> wants to collaborate
                                </p>
                                <span class="duration">5 days ago</span>
                            </div>
                            <div class="box">
                                <p class="small-head"><span class="name">Brian Griffin</span> wants to collaborate
                                </p>
                                <span class="duration">5 days ago</span>
                            </div>
                            <div class="box">
                                <p class="small-head"><span class="name">Brian Griffin</span> wants to collaborate
                                </p>
                                <span class="duration">5 days ago</span>
                            </div>
                            <div class="box">
                                <p class="small-head"><span class="name">Brian Griffin</span> wants to collaborate
                                </p>
                                <span class="duration">5 days ago</span>
                            </div> --}}
                        </div>

                        {{-- <div class="popup-bottom">
                            <a href="javasctipt:;" class="view-all">View All</a>
                            <a href="javasctipt:;" class="clear-all">Clear All</a>
                        </div> --}}
                    </div>
                </div>
                <div class="head-dropdown">
                    <a href="javascript:;" class="user-btn" aria-label="User Profile">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M12.0005 12C14.7619 12 17.0005 9.76142 17.0005 7C17.0005 4.23858 14.7619 2 12.0005 2C9.23906 2 7.00049 4.23858 7.00049 7C7.00049 9.76142 9.23906 12 12.0005 12Z"
                                stroke="#066AC9" stroke-width="1.5" stroke-linecap="round"
                                stroke-linejoin="round" />
                            <path d="M20.5904 22C20.5904 18.13 16.7404 15 12.0004 15C7.2604 15 3.4104 18.13 3.4104 22"
                                stroke="#066AC9" stroke-width="1.5" stroke-linecap="round"
                                stroke-linejoin="round" />
                        </svg>

                    </a>
                    <div class="nav-list">
                        <a class="drp-link" href="{{ route('student.profile') }}"><img
                                src="{{ asset('student-panel') }}/images/header/icon17.svg" alt="icon"
                                width="100%" height="100%">My Profile</a>
                        <a class="drp-link" href="{{ route('student.transactionDetail') }}"><img
                                src="{{ asset('student-panel') }}/images/header/icon18.svg" alt="icon"
                                width="100%" height="100%">My Transaction</a>
                        <a class="drp-link" href="{{ route('student.loginDetails') }}"><img
                                src="{{ asset('student-panel') }}/images/header/icon19.svg" alt="icon"
                                width="100%" height="100%">Login Details</a>
                        <a class="drp-link"
                            onclick="event.preventDefault(); document.getElementById('logout-form').submit();"
                            href="{{ route('logout') }}"><img
                                src="{{ asset('student-panel') }}/images/header/icon20.svg" alt="icon"
                                width="100%" height="100%">Logout
                            <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
                                @csrf
                            </form>
                        </a>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <!--Mobile Header-->
    <div class="m-header">
        <div class="head-item">
            <a href="javascript:;" class="toggle-bar menu-btn" aria-label="toggle"><img
                    src="{{ asset('student-panel') }}/images/header/toggle.svg" alt="toggle" width="100%"
                    height="100%"></a>
            <a href="{{ route('student.dashboard') }}" class="logo" aria-label="logo"><img
                    src="{{ asset('student-panel') }}/images/logo.svg" alt="logo" width="100%"
                    height="100%"></a>
            <a href="javascript:;" class="toggle-bar user-btn" aria-label="user"><img
                    src="{{ asset('student-panel') }}/images/header/user-1.svg" alt="user" width="100%"
                    height="100%"></a>
        </div>

        <div class="profile-drp">
            <a class="single-link" href="{{ route('student.profile') }}"><img
                    src="{{ asset('student-panel') }}/images/header/icon17.svg" alt="icon" width="100%"
                    height="100%">My Profile</a>
            <a class="single-link" href="{{ route('student.transactionDetail') }}"><img
                    src="{{ asset('student-panel') }}/images/header/icon18.svg" alt="icon" width="100%"
                    height="100%">My
                Transaction</a>
            <a class="single-link" href="{{ route('student.loginDetails') }}"><img
                    src="{{ asset('student-panel') }}/images/header/icon19.svg" alt="icon" width="100%"
                    height="100%">Login Details</a>
            <a class="single-link" href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();"><img
                    src="{{ asset('student-panel') }}/images/header/icon20.svg" alt="icon" width="100%"
                    height="100%">Logout</a>
            <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
                @csrf
            </form>
        </div>
    </div>

    <div class="search-popup">
        <form class="search-form" method="" action="">
            <button class="search-btn" type="submit" aria-label="searchbutton"><svg width="22" height="22"
                    viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M10.5413 19.2499C15.3508 19.2499 19.2497 15.3511 19.2497 10.5416C19.2497 5.73211 15.3508 1.83325 10.5413 1.83325C5.73186 1.83325 1.83301 5.73211 1.83301 10.5416C1.83301 15.3511 5.73186 19.2499 10.5413 19.2499Z"
                        stroke="#066AC9" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M20.1663 20.1666L18.333 18.3333" stroke="#066AC9" stroke-width="1.8"
                        stroke-linecap="round" stroke-linejoin="round" />
                </svg>
            </button>
            <input class="search-field" id="" type="text"
                placeholder="Find Universities, courses, Exams and more." aria-label="Search" value=""
                name="search">
            <span class="close-popup">
                <svg width="25" height="24" viewBox="0 0 25 24" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <path d="M7.43652 7L17.4365 17" stroke="#2B3340" stroke-width="2" stroke-linecap="round" />
                    <path d="M17.4365 7L7.43652 17" stroke="#2B3340" stroke-width="2" stroke-linecap="round" />
                </svg>
            </span>
        </form>

        <div class="search-body">
            <div class="search-left">
                <div class="common-box">
                    <p class="head">Explore Universities in Top Destinations</p>

                    <div class="c-list">
                        <a href="javascript:;" class="single-country"><img
                                src="{{ asset('student-panel') }}/images/header/uk.svg" alt="uk" width="100%" height="100%">UK</a>
                        <a href="javascript:;" class="single-country"><img
                                src="{{ asset('student-panel') }}/images/header/usa.svg" alt="usa" width="100%" height="100%">USA</a>
                        <a href="javascript:;" class="single-country"><img
                                src="{{ asset('student-panel') }}/images/header/canada.svg" alt="canada" width="100%" height="100%">Canada</a>
                        <a href="javascript:;" class="single-country"><img
                                src="{{ asset('student-panel') }}/images/header/australia.svg"
                                alt="australia" width="100%" height="100%">Australia</a>
                    </div>
                </div>
                <div class="common-box">
                    <p class="head">Trending Searches</p>

                    <div class="trending-search">
                        <a href="javascript:;" class="small-badge">Data Science</a>
                        <a href="javascript:;" class="small-badge">Law</a>
                        <a href="javascript:;" class="small-badge">Mechanical Engineering</a>
                        <a href="javascript:;" class="small-badge">Law</a>
                    </div>
                </div>
            </div>
            <div class="search-right common-box">
                <p class="head">Popular Universities</p>

                <div class="uni-list">
                    <a href="javascript:;" class="link">
                        <img class="uni-logo" src="{{ asset('student-panel') }}/images/header/uni-logo.svg" alt="uni-logo" width="100%" height="100%">
                        <span class="uni-name">Indiana College of - Montreal</span>
                        <img class="arrow" src="{{ asset('student-panel') }}/images/header/right-arrow.svg" alt="right-arrow" width="100%" height="100%">
                    </a>
                    <a href="javascript:;" class="link">
                        <img class="uni-logo" src="{{ asset('student-panel') }}/images/header/uni-logo.svg" alt="uni-logo" width="100%" height="100%">
                        <span class="uni-name">Indiana College of - Montreal</span>
                        <img class="arrow" src="{{ asset('student-panel') }}/images/header/right-arrow.svg" alt="right-arrow" width="100%" height="100%">
                    </a>
                    <a href="javascript:;" class="link">
                        <img class="uni-logo" src="{{ asset('student-panel') }}/images/header/uni-logo.svg" alt="uni-logo" width="100%" height="100%">
                        <span class="uni-name">Indiana College of - Montreal</span>
                        <img class="arrow" src="{{ asset('student-panel') }}/images/header/right-arrow.svg" alt="right-arrow" width="100%" height="100%">
                    </a>
                    <a href="javascript:;" class="link">
                        <img class="uni-logo" src="{{ asset('student-panel') }}/images/header/uni-logo.svg" alt="uni-logo" width="100%" height="100%">
                        <span class="uni-name">Indiana College of - Montreal</span>
                        <img class="arrow" src="{{ asset('student-panel') }}/images/header/right-arrow.svg" alt="right-arrow" width="100%" height="100%">
                    </a>
                </div>
            </div>
        </div>
    </div>
</header>
<div class="sidebar-overlay"></div>
<div class="glass-overlay"></div>

<script>
    var path = location.pathname;
    if (path === "/student/dashboard") {
        document.getElementById('document').classList.remove('active');
        document.getElementById('dashboard').classList.add('active');
        document.getElementById('application-manager').classList.remove('active');

    }
    if (path === "/student/document") {
        document.getElementById('dashboard').classList.remove('active');
        document.getElementById('document').classList.add('active');
        document.getElementById('application-manager').classList.remove('active');
    }
    if (path === "/student/application-manager") {
        document.getElementById('dashboard').classList.remove('active');
        document.getElementById('document').classList.remove('active');
        document.getElementById('application-manager').classList.add('active');
        
    }
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"
integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>

@if(env('APP_MODE') == 'live')
<script type="text/javascript">
    (function(c,l,a,r,i,t,y){
        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
    })(window, document, "clarity", "script", "hrxmeqet4g");
</script>
@endif