<header class="main-header">
    <div class="container">
        <div class="topbar">
            <div class="container">
                <div class="row">
                    <div class="col-lg-4 col-md-4 col-sm-3 align-self-center">
                        <?php if (get_theme_mod('solar_system_company_mail','support@example.com')) : ?>
                            <p class="mb-0 email-text">
                                <a href="mailto:<?php echo esc_attr(get_theme_mod('solar_system_company_mail','support@example.com')); ?>">
                                    <i class="fas fa-envelope px-2"></i>
                                    <?php echo esc_html(get_theme_mod('solar_system_company_mail','support@example.com')); ?>
                                </a>
                            </p>
                        <?php endif; ?>
                    </div>
                    <div class="col-lg-6 col-md-5 col-sm-6 align-self-center">
                        <?php if (get_theme_mod('solar_system_company_location','85 Ketch Harbour RoadBensalem, PA 19020')) : ?>
                            <p class="my-md-0 my-2">
                                <i class="fas fa-map-marker-alt px-2"></i>
                                <?php echo esc_html(get_theme_mod('solar_system_company_location','85 Ketch Harbour RoadBensalem, PA 19020')); ?>
                            </p>
                        <?php endif; ?>
                    </div>
                    <div class="col-lg-2 col-md-3 col-sm-3 align-self-center text-lg-end">
                        <div class="social-media pe-lg-4">
                            <?php if (get_theme_mod('solar_system_company_facebook_url','#')) : ?>
                                <a target="_blank" rel="noopener noreferrer" href="<?php echo esc_url(get_theme_mod('solar_system_company_facebook_url','#')); ?>">
                                    <i class="fab fa-facebook-f me-2"></i>
                                </a>
                            <?php endif; ?>
                            <?php if (get_theme_mod('solar_system_company_instagram_url','#')) : ?>
                                <a target="_blank" rel="noopener noreferrer" href="<?php echo esc_url(get_theme_mod('solar_system_company_instagram_url','#')); ?>">
                                    <i class="fab fa-instagram me-2"></i>
                                </a>
                            <?php endif; ?>
                            <?php if (get_theme_mod('solar_system_company_twitter_url','#')) : ?>
                                <a target="_blank" rel="noopener noreferrer" href="<?php echo esc_url(get_theme_mod('solar_system_company_twitter_url','#')); ?>">
                                    <i class="fab fa-twitter me-2"></i>
                                </a>
                            <?php endif; ?>
                            <?php if (get_theme_mod('solar_system_company_linkedin_url','#')) : ?>
                                <a target="_blank" rel="noopener noreferrer" href="<?php echo esc_url(get_theme_mod('solar_system_company_linkedin_url','#')); ?>">
                                    <i class="fab fa-linkedin me-2"></i>
                                </a>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="<?php if( get_theme_mod( 'solar_system_company_sticky_header', '0')) { ?>sticky-header<?php } else { ?>close-sticky<?php } ?>">
            <div class="middle-header-area mx-md-5">
                <div class="row">
                    <div class="col-lg-3 col-md-12 logo-col text-md-start text-center align-self-center">
                        <div class="logo mb-3 mb-md-0 text-center">
                            <?php 
                            if (has_custom_logo()) {
                                the_custom_logo();
                            } else {
                                // Check if both title and tagline settings are disabled
                                $solar_system_company_tagline_enabled = get_theme_mod('solar_system_company_tagline_setting', false);
                                $solar_system_company_title_enabled = get_theme_mod('solar_system_company_site_title_setting', false);

                                if (!$solar_system_company_tagline_enabled && !$solar_system_company_title_enabled) {
                                    // Display the default logo
                                    $solar_system_company_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($solar_system_company_default_logo_url) . '" alt="' . esc_attr(get_bloginfo('name')) . '">';
                                    echo '</a>';
                                }

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

                                <?php
                                // Display site title if the setting is enabled
                                if ($solar_system_company_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-9 col-md-12 menu-col align-self-center menu-col">
                        <div class="row">
                            <div class="col-lg-12 col-md-12">
                                <div class="menubox">
                                    <div class="navbar-menubar responsive-menu navigation_header">
                                        <div class="toggle-nav mobile-menu">
                                            <button onclick="solar_system_company_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', 'solar-system-company' ); ?>">

                                                <?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="solar_system_company_closeNav()">
                                                    <i class="fa-solid fa-times"></i> <!-- Close icon for the menu -->
                                                </a>
                                            </nav>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row m-0 bottom-head">
                            <div class="col-lg-5 col-md-4 text-center text-md-start align-self-center phone-col">
                                <?php if (get_theme_mod('solar_system_company_phone_no','+81 9876 54 3210')) : ?>
                                    <p class="mb-0 phone-box">
                                        <a href="tel:<?php echo esc_attr(get_theme_mod('solar_system_company_phone_no','+81 9876 54 3210')); ?>">
                                            <i class="fas fa-phone-volume me-2"></i>
                                            <?php esc_html_e('Emergency Contact No ', 'solar-system-company'); ?>
                                            <?php echo esc_html(get_theme_mod('solar_system_company_phone_no','+81 9876 54 3210')); ?>
                                        </a>
                                    </p>
                                <?php endif; ?>
                            </div>
                            <div class="col-lg-4 col-md-4 p-0 text-md-end text-center align-self-center">
                                <div class="search-block">
                                    <?php get_search_form(); ?>
                                </div>
                            </div>
                            <?php 
                                $solar_system_company_header_button = get_theme_mod('solar_system_company_header_button', 'GET A QUOTE');
                                $solar_system_company_header_link = get_theme_mod('solar_system_company_header_link', '#');

                                if (!empty($solar_system_company_header_button) || !empty($solar_system_company_header_link)) : ?>
                                <div class="col-lg-3 col-md-4 head-btn-col text-center align-self-center">
                                    <span class="header-btn text-center">
                                        <a target="_blank" rel="noopener noreferrer" href="<?php echo esc_url($solar_system_company_header_link); ?>" class="offer-text">
                                            <?php echo esc_html($solar_system_company_header_button); ?>
                                        </a>
                                    </span>
                                </div>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>