<?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">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
                        <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>
                <!-- End Header Navigation -->

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

                    <img src="assets/img/logo.png" alt="Logo">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
                        <i class="fa fa-times"></i>
                    </button>
                    
                    <ul class="nav navbar-nav navbar-center" data-in="fadeInDown" data-out="fadeOutUp">
                      
                        <li><a href="index.php">Home</a></li>
                        <li><a href="about.php">About Us</a></li>


                        <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-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"><?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: 50px !important; margin-bottom: -16px; margin-top: -10px;"><?php echo $service['service_name']; ?></a></li>
                                <?php
                            }
                        } else {
                            ?>
                            <li><a href="#" class="dropdown-item">No Services Available</a></li>
                            <?php
                        }
                        ?>
                    </ul>
                </li>
                <?php
            }
        }
        ?>
    </ul>
</li>




                        <!-- <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Services</a>
                            <ul class="dropdown-menu">

                                        <?php
                                            $query = "SELECT * FROM categories";
                                            $query_run = mysqli_query($conn, $query);
                                        
                                            if (mysqli_num_rows($query_run) > 0) {
                                                foreach ($query_run as $row) {
                                                    // $id = $row['service_id'];  
                                            ?>
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle"><?php echo $row['cat_name'] ?></a>
                                    <ul class="dropdown-menu">


                                        <li><a href="service.php" class="dropdown-item">Product1</a></li>
                                        <li><a href="service.php" class="dropdown-item">Product2</a></li>
                                    </ul>
                                </li>

                                <?php }} ?>
                            </ul>
                        </li> -->

                        <!-- <style>
                            .dropdown-submenu{
                             float: left;
                             overflow: hidden;
                            }
                        </style> -->

                      
                        <!-- <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" >Services</a>
                            <ul class="dropdown-menu">
                                <li><a href="service.php">Service1</a>
                            <ul class="dropdown-menu">
                                <li><a href="">product1</a></li>
                                <li><a href="">product2</a></li>
                            </ul>
                            </li>
                               
                                
                            </ul>
                        </li> -->
                     
                        <li><a href="contact.php">contact Us</a></li>
                    </ul>
                </div><!-- /.navbar-collapse -->

                <div class="attr-right">
                    <!-- Start Atribute Navigation -->
                    <div class="attr-nav">
                        <ul>
                            <li class="button">
                                <a href="#">Get consultant</a>
                            </li>
                        </ul>
                    </div>
                    <!-- End Atribute Navigation -->


                </div>
                <!-- Main Nav -->
            </div>  

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

        </nav>
        <!-- End Navigation -->
    </header>