<header class="main-header-top">
    <?php if (get_theme_mod('expert_ac_repair_top_header', true)) : ?>
        <div class="top-header">
          <div class="container">
            <div class="row m-0">
              <div class="time-txt col-lg-8 col-md-8 text-md-start text-center align-self-center">
                <div class="timebox">
                  <?php if( get_theme_mod( 'expert_ac_repair_timming','Our open service request times: Mon-Fri 08:00 to 16:00')) { ?>
                    <i class="far fa-clock"></i><span class="phone"><?php echo esc_html( get_theme_mod('expert_ac_repair_timming','Our open service request times: Mon-Fri 08:00 to 16:00')); ?></span>
                   <?php } ?>
                </div>
              </div>
              <div class="col-lg-4 col-md-4 text-lg-end text-md-end text-center calender">
                <div class="timebox date">
                    <?php if (get_theme_mod('expert_ac_repair_calender_link','#') || get_theme_mod('expert_ac_repair_calender','Schedule a Service')) : ?>
                        <a href="<?php echo esc_url(get_theme_mod('expert_ac_repair_calender_link','#')); ?>" class="text-end">
                            <i class="far fa-calendar-alt"></i><span class="head-btn text-capitalize phone"><?php echo esc_html(get_theme_mod('expert_ac_repair_calender','Schedule a Service I')); ?></span></a>
                    <?php endif; ?>
                </div>
              </div>
            </div>
          </div>
        </div>
    <?php endif; ?>

    <div class="headerbox wow fadeInUp" data-wow-delay="0.5s">
      <div class="container">
        <div class="row m-0">
            <div class="col-lg-5 col-md-3 align-self-center">
                <div class="logo mb-md-0 mb-4">
                    <?php 
                    if (has_custom_logo()) {
                        the_custom_logo();
                    } else {
                        // Check if both title and tagline settings are disabled
                        $expert_ac_repair_tagline_enabled = get_theme_mod('expert_ac_repair_tagline_setting', false);
                        $expert_ac_repair_title_enabled = get_theme_mod('expert_ac_repair_site_title_setting', true);

                        if (!$expert_ac_repair_tagline_enabled && !$expert_ac_repair_title_enabled) {
                            // Display the default logo
                            $expert_ac_repair_default_logo_url = get_template_directory_uri() . '/assets/images/logo.png'; // Replace with your default logo path
                            echo '<a href="' . esc_url(home_url('/')) . '">';
                            echo '<img src="' . esc_url($expert_ac_repair_default_logo_url) . '" alt="' . esc_attr(get_bloginfo('name')) . '">';
                            echo '</a>';
                        }

                        // Display tagline if the setting is enabled
                        if ($expert_ac_repair_tagline_enabled) :
                            $expert_ac_repair_site_desc = get_bloginfo('description'); ?>
                            <p class="site-description"><?php echo esc_html($expert_ac_repair_site_desc); ?></p>
                        <?php endif; ?>

                        <?php
                        // Display site title if the setting is enabled
                        if ($expert_ac_repair_title_enabled) : ?>
                            <p class="site-title">
                                <a href="<?php echo esc_url(home_url('/')); ?>">
                                    <?php echo esc_html(get_bloginfo('name')); ?>
                                </a>
                            </p>
                        <?php endif; ?>
                    <?php } ?>
                </div>
            </div>
            <div class="col-lg-7 col-md-9 align-self-center">
                <div class="row">
                    <div class="location col-lg-5 col-md-6 col-12 align-self-center">
                        <?php if( get_theme_mod( 'expert_ac_repair_location_text','Our Location' ) != '' || get_theme_mod( 'expert_ac_repair_location','Flat 201, Reynolds Neck Str.' ) != '') { ?>
                          <div class="row">
                            <div class="col-lg-2 col-md-2 col-2 align-self-center text-lg-end"><i class="fas fa-map-marker-alt"></i></div>
                            <div class="col-lg-10 col-md-10 col-10 align-self-center location-col">
                              <p class="infotext"><?php echo esc_html( get_theme_mod('expert_ac_repair_location_text','Our Location')); ?></p>
                              <p class="mb-0 simplex"><?php echo esc_html( get_theme_mod('expert_ac_repair_location','Flat 201, Reynolds Neck Str.') ); ?></p>
                            </div>
                          </div>
                        <?php } ?>
                    </div>
                    <div class="email col-lg-5 col-md-5 col-12 align-self-center">
                        <?php if( get_theme_mod( 'expert_ac_repair_mail_text','Mail Us On' ) != '' || get_theme_mod( 'expert_ac_repair_mail','example@example.com' ) != '') { ?>
                          <div class="row">
                            <div class="col-lg-2 col-md-3 col-2 align-self-center mail-icon text-lg-end"><i class="far fa-envelope"></i></div>
                            <div class="col-lg-10 col-md-9 col-10 align-self-center mail-text location-col">
                              <p class="infotext"><?php echo esc_html( get_theme_mod('expert_ac_repair_mail_text','Mail Us On')); ?></p>
                              <p class="mb-0 simplex"><a href="mailto:<?php echo esc_html( get_theme_mod('expert_ac_repair_mail','example@example.com') ); ?>"><?php echo esc_html( get_theme_mod('expert_ac_repair_mail','example@example.com') ); ?></a></p>
                            </div>
                          </div>
                        <?php } ?>
                    </div>
                    <div class="col-lg-2 col-md-1 col-12 align-self-center">
                        <span class="search-bar my-md-0 my-3">
                            <button type="button" class="open-search" aria-label="<?php esc_attr_e('Open Search', 'expert-ac-repair'); ?>">
                                <i class="fas fa-search"></i>
                            </button>
                        </span>
                    </div>   
                </div>
                <!-- Search Overlay -->
                <div class="search-outer">
                    <div class="inner_searchbox w-100 h-100">
                        <?php get_search_form(); ?>
                    </div>
                    <button type="button" class="search-close"><?php esc_html_e('X', 'expert-ac-repair'); ?></button>
                </div>
          </div>
          <div class="clear"></div>
        </div>
      </div>
    </div>
    <div class="main-navhead">
        <div class="menubar">
            <div class="container-fuild">
                <div class="row m-0">
                    <div class="col-lg-4 col-md-5 px-0">
                        <?php if( get_theme_mod( 'expert_ac_repair_call_text','Call Us' ) != '' || get_theme_mod( 'expert_ac_repair_call','+11234567890' ) != '') { ?>
                            <div class="call-detail">
                                <div class="row m-0">
                                    <div class="col-lg-9 col-md-8 col-10 align-self-center call">
                                      <span class="infotext pe-2"><?php echo esc_html( get_theme_mod('expert_ac_repair_call_text','Call Us') ); ?></span>
                                      <span class="mb-0"><a href="tel:<?php echo esc_html( get_theme_mod('expert_ac_repair_call','+11234567890') ); ?>"><?php echo esc_html( get_theme_mod('expert_ac_repair_call','+11234567890') ); ?></a></span>
                                    </div>
                                    <div class="col-lg-3 col-md-4 col-2 align-self-center phone-icon"><i class="<?php echo esc_attr(get_theme_mod('expert_ac_repair_call_icon','fas fa-phone')); ?>"></i></div>
                                </div>
                            </div>
                        <?php } ?>
                    </div>
                    <div class="col-lg-1 col-md-2"></div>
                    <div class="menubox col-lg-7 col-md-5 col-12 px-0">
                        <!-- Main menu -->
                        <div class="innermenubox navbar-menubar responsive-menu navigation_header">
                            <div class="toggle-nav mobile-menu">
                                <button onclick="expert_ac_repair_openNav()">
                                    <i class="fa-solid fa-bars"></i> <!-- Initial hamburger icon -->
                                </button>
                            </div>
                            <div id="mySidenav" class="nav sidenav">
                                <nav id="site-navigation" class="main-navigation navbar navbar-expand-xl" aria-label="<?php esc_attr_e( 'Top Menu', 'expert-ac-repair' ); ?>">

                                    <?php 
                                        wp_nav_menu(
                                            array(
                                                'theme_location' => 'primary',
                                                'container_class' => 'main-menu clearfix',
                                                'menu_class' => 'clearfix menu',
                                                'items_wrap' => '<ul id="%1$s" class="%2$s mobile_nav">%3$s</ul>',
                                                'fallback_cb' => 'wp_page_menu',
                                            )
                                        );
                                    ?>
                                    <a href="javascript:void(0)" class="closebtn mobile-menu" onclick="expert_ac_repair_closeNav()">
                                        <i class="fa-solid fa-times"></i> <!-- Close icon for the menu -->
                                    </a>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>