<!-- resources/views/patients/header.blade.php -->
@extends('patients.js.master') 

<style>


.navbar {
    position: sticky;
    top: 0;
    background-color: #d9edf7;
    z-index: 9999;
}
.fixed-header {
    position: fixed;
    /* background-color: #f4f4f4; Light background for contrast */
    background: url("{{ asset('img/background.png') }}") no-repeat center top;
    background-size: cover;
    background-attachment: fixed; 
    top: 0px;
    left: 380px;
    width: 100%;
    z-index: 1000;
    padding: 1px 0 38px 0;
    height: 122px;
}

/* Profile Image */
.profile-img {
    width: 40px;
    height: 40px;
    cursor: pointer;
    border-radius: 50%;
    border: 2px solid #ddd;
    transition: transform 0.3s ease;
}
.profile-img:hover {
    transform: scale(1.1);
}

/* Profile Popup */
.profile-popup {
    display: none;
    position: absolute;
    top: 54px;
    left: -170px;
    background: white;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
    padding: 15px;
    width: 220px;
    z-index: 1000;
}

/* Profile Header */
.profile-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
}
.user-icon {
    font-size: 40px;
    color: #007bff;
}

/* Name & Email Styling */
.profile-name, .profile-email {
    font-size: 14px;
    color: #333;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: bold;
}
.profile-name i, .profile-email i {
    color: #007bff;
}

/* Logout Button */
.logout-form {
    margin-top: 10px;
    text-align: center;
}
.logout-btn {
    background: none;
    border: none;
    color: #dc3545;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
}
.logout-btn i {
    margin-right: 5px;
}
.logout-btn:hover {
    color: #b02a37;
}

/* Show Popup */
.profile-popup.show {
    display: block;
}


/* Show Popup */
.profile-popup.show {
    display: block;
}


    .nav-item .nav-link{
        border: 1px solid rgb(222, 222, 222) !important;
        color: black !important; /* Default text color */
    }
    .nav-link {
        border-radius: 25px; /* Rounded corners */
        padding: 5px 10px; /* Spacing */
        margin: 5px; /* Spacing between items */
        
        transition: background-color 0.3s, color 0.3s;
    }

    .nav-link:hover {
        background-color:rgb(209, 209, 209); /* Light grey hover effect */
    }

    .nav-link.active {
        background-color: blue !important; /* Active link background */
        color: white !important; /* Active link text color */
        border-color: blue !important; /* Change border color */
    }
    .custom {
    margin-left: -294px; /* Default */
    margin-top: -13px;
}


@media screen and (max-width: 1540px) { /* Desktops */
    .custom {
        margin-left: -122px;
        margin-right:210px;
        margin-top: -13px;
    }
    .fixed-header {
    position: fixed;
        top: 0px;
        background-color: #f4f4f4; /* Light background for contrast */
        left: 380px;
        width: 100%;
        z-index: 1000;
        padding: 1px 0 38px 0;
        height: 170px;
}
}
@media screen and (min-width: 768px) and (max-width: 1340px){
    .custom {
        margin-left: -106px;
        margin-right:210px;
        margin-top: -13px;
    }
    .fixed-header {
    position: fixed;
        top: 0px;
        background-color: #f4f4f4; /* Light background for contrast */
        left: 380px;
        width: 100%;
        z-index: 1000;
        padding: 1px 0 38px 0;
        height: 170px;
}
}


.animated-text {
        font-size: 20px;
        color: #0000ff;
        white-space: nowrap;
        overflow: hidden;
        display: inline-block;
        border-right: 2px solid transparent; /* Cursor effect */
        font-weight:600;
        
    }

    @keyframes typing {
        0% { width: 0; }
        100% { width: 100%; }
    }

    @keyframes blink {
        50% { border-color: transparent; }
        100% { border-color: #0000ff; }
    }

  .notification-container {
        position: relative;
        display: inline-block;
    }

    .notification-bell {
        cursor: pointer;
        font-size: 24px;
        color: #333;
        transition: color 0.3s ease-in-out;
    }

    .notification-bell:hover {
        color: #007bff;
    }

    .count {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: red;
    color: white;
    font-size: 11px;
    font-weight: bold;
    padding: 0px 6px;
    border-radius: 50%;
    display: none;
}

    #notificationDropdown {
        display: none;
        position: absolute;
        right: -56px;
        top: 45px;
        background-color: white;
        border: 1px solid #ddd;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        width: 250px;
        max-height: 300px;
        overflow-y: auto;
        border-radius: 8px;
        z-index: 1000;
    }

    #notificationList {
        list-style: none;
        padding: 10px 15px;
        margin: 0;
    }

    #notificationList li {
        padding: 10px;
        border-bottom: 1px solid #eee;
        font-size: 13px;
        color: #333;
        transition: background 0.3s ease-in-out;
    }


    #notificationList li:last-child {
        border-bottom: none;
    }
    #clearNotifications::hover{
    color: #007bff;
    }
</style>

<header>
    @if(Auth::guard('hcp')->check())
        <div class="top bg-primary text-white text-center py-2">
            {{ $hcpData->first_name . ' ' . $hcpData->middle_name . ' ' . $hcpData->last_name }} 
            Logged In As: {{ $patient->first_name . ' ' . $patient->middle_name . ' ' . $patient->last_name }}
            <i onclick="favourite(this);" class="fa fa-heart favourite-icon ms-2" 
               data-patient-id="{{$patient->patient_id}}" 
               style="cursor: pointer; color: {{ $favouritePatient ? 'red' : 'grey' }};">
            </i>
        </div>
    @endif

    <nav class="navbar navbar-expand-lg shadow">
        <div class="container-fluid">
        <div class="d-flex align-items-center">
            <!-- Logo -->
            <a class="navbar-brand me-4" href="#">
                <img src="{{ asset('img/logo/BluHealth_Logo.png') }}" alt="BluHealth Logo" class="login-logo" style="height: 35px; width: 100px;"> 
            </a>
        
            <!-- Animated Text -->
            <span class="ms-2 animated-text" style="margin-top: 14px;">Manage. My Health. My Way</span>
        </div>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav mx-auto"></ul>
                <div class="d-flex align-items-center gap-3">
                <div class="position-relative">
                    <i class="fas fa-search position-absolute top-50 start-0 translate-middle-y ps-3 text-muted"></i>
                    <input class="form-control rounded-pill ps-5" type="search" placeholder="Search"  style="width: 400px;">
                </div>
                    <x-google-translate />
                    
                    
                    
                <div class="notification-container">
    <i class="fas fa-bell notification-bell" onclick="notificationBell()"></i>
    <span class="count" id="notificationCount">0</span>
    <div id="notificationDropdown">
        <ul id="notificationList"></ul>
    </div>
</div>

                    <div class="position-relative d-inline-block">
                        <!-- Profile Image -->
                        <img src="{{ Auth::guard('hcp')->check() ? (isset($hcpData->image) ? asset('hcpImage/' . $hcpData->image) : asset('storage/photos/default-user.png')) : (isset($patient->photo) ? asset('storage/photos/' . $patient->photo) : asset('storage/photos/default-user.png')) }}" 
                             alt="Profile Picture" 
                             class="rounded-circle profile-img" 
                             onclick="togglePopup()">
                    
                        <!-- Profile Popup -->
                        <div id="popup" class="profile-popup">
                            <div class="profile-header">
                                <div>
                                    <p class="profile-name">
                                        <i class="fas fa-user"></i> 
                                        {{ Auth::guard('hcp')->check() ? $hcpData->first_name . ' ' . $hcpData->last_name : $patient->first_name . ' ' . $patient->last_name }}
                                    </p>
                                    <p class="profile-email">
                                        <i class="fas fa-envelope"></i> 
                                        {{ Auth::guard('hcp')->check() ? $hcpData->email : $patient->email }}
                                    </p>
                                </div>
                            </div>
                    
                            <!-- Logout -->
                            <form action="{{ route('patient-logout') }}" method="POST" class="logout-form">
                                @csrf
                                <button type="submit" class="logout-btn">
                                    <i class="fas fa-sign-out-alt"></i> Logout
                                </button>
                            </form>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </nav>
    
    
    
    <header class="fixed-header">
    <main class="container mt-6">
    <div class="p-4 mt-6 custom">
        <ul class="nav border-0" id="myTab" role="tablist" style="border-radius: 10px; overflow: hidden;">
            <li class="nav-item" role="presentation">
               <a class="nav-link {{ request()->is('patient-portal') || request()->is('patients/notesetting') ? 'active' : '' }}" 
                   id="home-tab" 
                   href="{{ Auth::guard('hcp')->check() ? route('patients.notesetting') : route('show-patient-portal') }}" 
                   role="tab" aria-controls="home-tab-pane" aria-selected="false">
                   <i class="fas fa-notes-medical"></i> Encounters/Notes
               </a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link {{ request()->is('labs') ? 'active' : '' }}" 
                   id="profile-tab" href="{{ route('patients.labs') }}" 
                   role="tab" aria-controls="profile-tab-pane" aria-selected="false">
                   <i class="fas fa-vial"></i> Labs
                </a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link {{ request()->is('radiology') ? 'active' : '' }}" 
                   id="contact-tab" href="{{ route('patients.radiology') }}" 
                   role="tab" aria-controls="contact-tab-pane" aria-selected="false">
                   <i class="fas fa-x-ray"></i> Radiology
                </a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link" data-bs-toggle="tab" data-bs-target="#cardiology-tab-pane" 
                        type="button" role="tab" aria-controls="cardiology-tab-pane" aria-selected="false">
                    <i class="fas fa-heartbeat"></i> Cardiology
                </a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link" data-bs-toggle="tab" data-bs-target="#procedures-tab-pane" 
                        type="button" role="tab" aria-controls="procedures-tab-pane" aria-selected="false">
                    <i class="fas fa-procedures"></i> Procedures
                </a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link" data-bs-toggle="tab" data-bs-target="#plan-tab-pane" 
                        type="button" role="tab" aria-controls="plan-tab-pane" aria-selected="false">
                    <i class="fas fa-list-alt"></i> Plan
                </a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link" data-bs-toggle="tab" data-bs-target="#wrapup-tab-pane" 
                        type="button" role="tab" aria-controls="wrapup-tab-pane" aria-selected="false">
                    <i class="fas fa-clipboard-check"></i> Wrap-Up
                </a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link {{ request()->is('patients/vitals') ? 'active' : '' }}" 
                   id="home-tab" href="{{ route('patients.vitals') }}" 
                   role="tab" aria-controls="home-tab-pane" aria-selected="false">
                   <i class="fas fa-heart"></i> Vitals
                </a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link {{ request()->is('patients/tests') ? 'active' : '' }}" 
                   id="home-tab" href="{{ route('patients.tests') }}" 
                   role="tab" aria-controls="home-tab-pane" aria-selected="false">
                   <i class="fas fa-flask"></i> Tests
                </a>
            </li>
            
             <li class="nav-item" role="presentation">
                <a class="nav-link {{ request()->is('patient-near-labs') ? 'active' : '' }}" 
                   id="home-tab" href="{{ route('near_labs') }}" 
                   role="tab" aria-controls="home-tab-pane" aria-selected="false">
                   <i class="fas fa-vial"></i> Near Labs
                </a>
            </li>
            
            <li class="nav-item" role="presentation">
                <a class="nav-link {{ request()->is('patient-ecg') ? 'active' : '' }}" 
                   id="home-tab" href="{{ route('patient.ecg') }}" 
                   role="tab" aria-controls="home-tab-pane" aria-selected="false">
                   <i class="fas fa-heartbeat"></i> ECG
                </a>
            </li>
        </ul>
    </div>    
</main>
</header>

</header>



