<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
include 'includes/db.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sigal Laboratories</title>

<style>
body{margin:0;font-family:"Segoe UI",sans-serif}

/* HEADER */

.main-header{background:#25A9C2;position:sticky;top:0;z-index:1000}
.container{max-width:1500px;margin:auto;padding:8px 20px;display:flex;align-items:center;gap:15px}

/* LOGO */
.logo a{
    display:flex;
    align-items:center;
    gap:12px;
    color:#fff;
    text-decoration:none;
    font-weight:bold
}


.logo img{
    height:70px;        /* make it visually large */
    width:70;
    display:block;
    object-fit:contain;
}

.logo span{
    font-size:15px;
    line-height:1;     /* VERY IMPORTANT */
    white-space:nowrap;
}


.main-header{
    background:#25A9C2;
    position:sticky;
    top:0;
    z-index:1000;
}

.container{
    max-width:1500px;
    margin:auto;
    padding:4px 20px;   /* THIS fixes white space */
    display:flex;
    align-items:center;
    gap:15px;
}

@media(max-width:900px){
    .logo img{
        height:48px;
    }
}



/* NAV */
.navbar{flex:1}
.nav-links{list-style:none;display:flex;justify-content:center;gap:25px;margin:0;padding:0}
.nav-links li{position:relative}
.nav-links a{color:#fff;text-decoration:none;cursor:pointer}

/* DROPDOWN */
.dropdown-menu{
    position:absolute;top:100%;left:0;
    background:#fff;min-width:200px;
    list-style:none;padding:5px 0;
    border-radius:6px;
    box-shadow:0 4px 10px rgba(0,0,0,.15);
    display:none
}
.dropdown-menu a{color:#333;padding:10px 15px;display:block}
.dropdown-menu a:hover{background:#f2f2f2}

/* DESKTOP HOVER */
@media(min-width:901px){
    .dropdown:hover .dropdown-menu{display:block}
}

/* SEARCH */
.search-box{position:relative}
.search-box input{
    border:none;padding:6px 12px;border-radius:20px;
    outline:none;width:180px
}
#search-results-desktop{
    position:absolute;top:38px;left:0;
    background:#fff;width:250px;
    display:none;
    border-radius:6px;
    box-shadow:0 4px 10px rgba(0,0,0,.15);
    z-index:9999
}

/* DASHBOARD */
.dashboard-btn{
    background:#B82025;color:#fff;
    padding:8px 18px;border-radius:25px;
    text-decoration:none;font-weight:bold
}

/* MOBILE */
.menu-toggle,.mobile-search-icon{display:none;font-size:26px;color:#fff;cursor:pointer}

#mobile-search-box{
    display:none;
    background:#0058c0;
    padding:10px
}
#mobile-search-box input{
    width:100%;
    padding:8px 12px;
    border-radius:20px;
    border:none;
    outline:none
}

#search-results-mobile{
    background:#fff;
    margin-top:6px;
    border-radius:6px;
    display:none
}



#search-results-mobile{
    position: relative;
    background:#fff;
    margin-top:6px;
    border-radius:6px;
    display:none;
    max-height:300px;
    overflow-y:auto;
    box-shadow:0 4px 10px rgba(0,0,0,.15);
    z-index:9999;
}

#search-results-mobile ul{
    list-style:none;
    margin:0;
    padding:0;
}

#search-results-mobile li{
    padding:10px;
    border-bottom:1px solid #eee;
    cursor:pointer;
}

#search-results-mobile li:hover{
    background:#f2f2f2;
}


@media(max-width:900px){
    .menu-toggle,.mobile-search-icon{display:block}

    .navbar{
        position:absolute;top:60px;left:0;
        width:100%;background:#0058c0;display:none
    }
    .navbar.active{display:block}

    .nav-links{flex-direction:column;gap:0}
    .nav-links li{border-bottom:1px solid rgba(255,255,255,.2)}

    .dropdown-menu{
        position:static;
        box-shadow:none;
        background:#f7f7f7;
        margin-top:6px
    }
    .dropdown.active .dropdown-menu{display:block}
    .dropdown-menu a{padding-left:25px}

    .search-box{display:none}
}
</style>
</head>

<body>

<header class="main-header">
<div class="container">

    <!-- LOGO -->
    <div class="logo">
        <a href="index.php">
            <img src="Header-3 (2).png">
            <span>Sigal Laboratories</span>
        </a>
    </div>

    <!-- MOBILE ICONS -->
    <span class="mobile-search-icon" id="mobile-search-icon">🔍</span>
    <span class="menu-toggle" id="mobile-menu">☰</span>

    <!-- NAV -->
    <nav class="navbar" id="navbar">
        <ul class="nav-links">

            <li><a href="index.php">Home</a></li>

            <li class="dropdown">
                <a href="#" class="dropdown-toggle">About Us ▾</a>
                <ul class="dropdown-menu">
                    <li><a href="whoweare.php">Who We Are</a></li>
                    <li><a href="missionvission.php">Mission & Vision</a></li>
                    <li><a href="ceomessage.php">CEO Message</a></li>
                    <li><a href="team.php">Management & Medical Team </a></li>
                    <li><a href="quality.php">Quality & Accreditation</a></li>
                </ul>
            </li>

            <li><a href="career.php">Career</a></li>
            <li><a href="AllNews.php">News</a></li>
            <li><a href="AllBlogs.php">Blog</a></li>

            <li class="dropdown">
                <a href="#" class="dropdown-toggle">Departments ▾</a>
                <ul class="dropdown-menu">
                <?php
                $q=$conn->query("SELECT id,name FROM departments ORDER BY name");
                while($d=$q->fetch_assoc()){
                    echo '<li><a href="department-details.php?id='.$d['id'].'">'.$d['name'].'</a></li>';
                }
                ?>
                </ul>
            </li>

            <li class="dropdown">
                <a href="#" class="dropdown-toggle">Publications ▾</a>
                <ul class="dropdown-menu">
                    <li><a href="research.php">Research</a></li>
                </ul>
            </li>

            <li><a href="appointment.php">Appointment</a></li>
            <li><a href="home-sampling.php">Home Sampling</a></li>

        </ul>
    </nav>

    <!-- DESKTOP SEARCH -->
    <div class="search-box" id="desktop-search-box">
        <input type="text" id="service-search-desktop" placeholder="🔍 Search services...">
        <div id="search-results-desktop"></div>
    </div>

    <!-- DASHBOARD -->
    <a href="Dashboard/index.php" class="dashboard-btn mobile-dashboard">Dashboard</a>


</div>

<!-- MOBILE SEARCH -->
<div class="search-box" id="mobile-search-box">
    <input type="text" id="service-search-mobile" placeholder="🔍 Search services...">
    <div id="search-results-mobile"></div>
</div>

</header>

<script>
// Mobile menu toggle
document.getElementById('mobile-menu').onclick = function(){
    document.getElementById('navbar').classList.toggle('active');
};

// Mobile search toggle
document.getElementById('mobile-search-icon').onclick = function(){
    document.getElementById('mobile-search-box').classList.toggle('active');
};

// Live Search function (ORIGINAL LOGIC)
function liveSearch(inputId, resultsId) {
    const input = document.getElementById(inputId);
    const results = document.getElementById(resultsId);

    input.addEventListener('input', function(){
        let query = this.value.trim();
        if(query.length === 0){
            results.style.display = 'none';
            results.innerHTML = '';
            return;
        }
        fetch('includes/search_services.php?q=' + encodeURIComponent(query))
        .then(res => res.text())
        .then(data => {
            results.innerHTML = data;
            results.style.display = 'block';
        });
    });

    document.addEventListener('click', function(e){
        if(!input.contains(e.target) && !results.contains(e.target)){
            results.style.display = 'none';
        }
    });
}

// Init searches
liveSearch('service-search-desktop', 'search-results-desktop');
liveSearch('service-search-mobile', 'search-results-mobile');

// MOBILE DROPDOWNS
document.querySelectorAll('.dropdown-toggle').forEach(t=>{
    t.onclick=e=>{
        if(innerWidth<=900){
            e.preventDefault();
            const d=t.parentElement;
            document.querySelectorAll('.dropdown').forEach(x=>{
                if(x!==d)x.classList.remove('active');
            });
            d.classList.toggle('active');
        }
    }
});

document.getElementById('mobile-search-icon').onclick = function(){
    const box = document.getElementById('mobile-search-box');
    box.classList.toggle('active');
    box.style.display = box.classList.contains('active') ? 'block' : 'none';
};

</script>


</body>
</html>
