<?php
session_start();
include("admin/includes/config.php");
?>
<header>
    <!-- Start Navigation -->
    <nav class="navbar mobile-sidenav navbar-sticky navbar-default validnavs navbar-fixed dark no-background">
        <div class="container d-flex justify-content-between align-items-center">
            <!-- Start Header Navigation -->
            <div class="navbar-header">
                <!-- Mobile menu toggle button (visible only on mobile screens) -->
                <button class="navbar-toggler collapsed d-lg-none" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu" aria-expanded="false">
                    <i class="fa fa-bars"></i>
                </button>
                <a class="navbar-brand" href="index.php">
                    <img src="assets/img/logo.png" class="logo" alt="Logo">
                </a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="navbar-menu">
                <ul class="nav navbar-nav navbar-center">

                <li class="d-lg-none close-menu">
            <a href="javascript:void(0);" style="text-align:right;">
                <i class="fa fa-times" style="font-size: 24px; color: #32100f;"></i> <!-- Font Awesome icon for close -->
            </a>
        </li>
                    <li><a href="index.php">Home</a></li>
                    <li><a href="about.php">About Us</a></li>
                    
                    <!-- Dropdown for Services -->
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-bs-toggle="dropdown">Services</a>
                        <ul class="dropdown-menu">
                            <?php
                            // Fetch all categories
                            $query = "SELECT * FROM categories";
                            $query_run = mysqli_query($conn, $query);

                            if (mysqli_num_rows($query_run) > 0) {
                                foreach ($query_run as $category) {
                                    $category_id = $category['id'];
                                    ?>
                                    <li>
                                        <a href="#" class="dropdown-toggle" style="font-size: 15px; color: #32100f;"><?php echo $category['cat_name']; ?></a>
                                        <ul>
                                            <?php
                                            // Fetch services based on the category_id
                                            $service_query = "SELECT * FROM services WHERE category_id = '$category_id'";
                                            $service_run = mysqli_query($conn, $service_query);

                                            if (mysqli_num_rows($service_run) > 0) {
                                                foreach ($service_run as $service) {
                                                    ?>
                                                    <li><a href="service-detail.php?id=<?php echo $service['id']; ?>" style="font-size: 12px; padding-left: 18px !important; margin-bottom: -16px; margin-top: -10px;">○ <?php echo $service['service_name']; ?></a></li>
                                                    <?php
                                                }
                                            } 
                                        //   style="list-style-type: disc;"
                                            ?>
                                        </ul>
                                    </li>
                                    <?php
                                }
                            }
                            ?>
                        </ul>
                    </li>  
                    
                    <li><a href="career.php">Career</a></li>
                    <li><a href="enquiry.php">Enquiry Now</a></li>
                    <li><a href="contact.php">Contact Us</a></li>
                </ul>
            </div>

            <div class="attr-right">
                <div class="attr-nav">
                    <ul>
                        <li class="button">
                            <a href="#">Get Consultant</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- Overlay screen for menu -->
        <div class="overlay-screen"></div>
    </nav>
    <!-- End Navigation -->
</header>


<style>
    /* Close button for mobile menu */
.close-menu {
    display: block;
    padding: 10px; /* Add padding for better touch area */
    text-align: right; /* Align the text to the right */
}

.close-menu i {
    font-size: 24px; /* Adjust icon size */
    color: #32100f; /* Set icon color */
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<style>
/* General Styles */
.dropdown-menu {
    display: none; /* Hidden by default */
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Dropdown hover styles for desktop view */
@media (min-width: 768px) {
    .dropdown:hover > .dropdown-menu {
        display: block;
        opacity: 1;
    }

    .dropdown-menu li {
        margin: 0;
        padding: 0;
    }
}

/* Mobile styles */
@media (max-width: 767px) {
    .overlay-screen {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background: rgba(0, 0, 0, 0.7);
        z-index: 998;
        display: none; /* Initially hidden */
    }

    .navbar-toggler {
        display: block;
        cursor: pointer;
    }

    .navbar-collapse {
        background: #fff;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 999;
        height: 100%;
        padding: 20px;
    }

    .navbar-collapse .nav {
        display: block;
    }

    .navbar-collapse .nav > li {
        margin-bottom: 15px;
    }

    /* Mobile dropdown */
    .dropdown-menu.show {
        display: block;
    }

    /* Submenu styles */
    .dropdown-submenu .dropdown-menu {
        left: 100%;
        top: 0;
        display: none; /* Initially hidden */
    }

    .dropdown-submenu.show > .dropdown-menu {
        display: block;
    }
}
</style>

<!-- Bootstrap 5 CSS and JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

<script>
$(document).ready(function () {
    // Toggle menu button behavior
    $('.navbar-toggler').on('click', function () {
        if ($('#navbar-menu').hasClass('show')) {
            $('.overlay-screen').fadeOut();
            $('#navbar-menu').collapse('hide');
        } else {
            $('.overlay-screen').fadeIn();
        }
    });

    // Hide overlay and collapse the menu when clicking outside the menu
    $('.overlay-screen').on('click', function () {
        $('#navbar-menu').collapse('hide');
        $(this).fadeOut();
    });

    // Ensure overlay hides when the menu is collapsed
    $('#navbar-menu').on('hidden.bs.collapse', function () {
        $('.overlay-screen').fadeOut();
    });

    // Ensure overlay shows when the menu is expanded
    $('#navbar-menu').on('shown.bs.collapse', function () {
        $('.overlay-screen').fadeIn();
    });

    // Mobile dropdown toggle for services
    $('.dropdown-toggle').on('click', function (e) {
        // Check if it's a dropdown submenu
        if ($(this).parent().hasClass('dropdown-submenu')) {
            e.preventDefault(); // Prevent the default action
            $(this).parent().toggleClass('show'); // Toggle the show class
            $(this).siblings('.dropdown-menu').toggleClass('show'); // Toggle submenu visibility
        } else {
            // For top-level dropdowns
            $(this).next('.dropdown-menu').toggleClass('show');
        }
    });

    // Close menu button behavior
    $(document).on('click', '.close-menu', function () {
        $('#navbar-menu').collapse('hide');
        $('.overlay-screen').fadeOut();
    });
});
</script>