<?php
/**
 * The header for our theme
 *
 * This is the template that displays all of the <head> section and everything up until <div id="content">
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package relax_spa
 */

?>
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="profile" href="https://gmpg.org/xfn/11">
	<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
  <?php wp_body_open(); ?>
  <a class="skip-link screen-reader-text" href="#primary"><?php esc_html_e( 'Skip to content', 'relax-spa' ); ?></a>
  <header class="header">
    <?php 
    $general_section_display_option = get_theme_mod( 'general_section_display_option', true ); 
    if($general_section_display_option){
      ?>
      <div class="top-header">
        <div class="container">
          <div class="t-header-holder">
            <div class="phone-email">
              <div class="social-navigation">
                <?php $social_media_array = get_theme_mod( 'relax_spa_social_media', 'facebook' ); ?>

                <?php if ( ! empty( $social_media_array ) && is_array( $social_media_array ) ) : ?>

                <div class="social-icons">
                  <ul class="list-inline">
                    <?php
                    foreach ( $social_media_array as $value ) {
                      $key_classes = $value['social_media_repeater_class'];
                      $class = str_replace( " ", "-", strtolower( $key_classes ) );
                      $i_tag_class = 'icon-' . $class;
                      ?>
                      <li class="<?php echo esc_attr( strtolower( $class ) ); ?>">
                        <a href="<?php echo esc_url( $value['social_media_link'] ); ?>" target="_blank">
                          <i class="<?php echo esc_attr( $i_tag_class ); ?>"></i>
                        </a>
                      </li>
                    <?php } ?>
                  </ul>
                </div>

              <?php endif; ?>
            </div>
              <?php 
              $relax_spa_contact_number = get_theme_mod( 'relax_spa_contact_number' ); 
              if($relax_spa_contact_number){
                ?>
                <a href="tel:<?php echo esc_attr($relax_spa_contact_number); ?>" class="phone">
                  <span class="icon-phone" aria-hidden="true"></span> <?php echo esc_html($relax_spa_contact_number); ?></a>
                <?php } ?>  
                <?php 
                $relax_spa_email_address = get_theme_mod( 'relax_spa_email_address', '' ); 
                if($relax_spa_email_address){
                  ?>
                  <a class="email" href="mailto:<?php echo esc_attr($relax_spa_email_address); ?>">
                    <span class="icon-mail" aria-hidden="true"></span>
                    <?php echo esc_html($relax_spa_email_address); ?>
                  </a>
                <?php } ?> 
              </div>
            <?php
                $bs_header_cta_label = get_theme_mod( 'bs_header_cta_label', '' ); 
                $bs_header_cta_link = get_theme_mod( 'bs_header_cta_link', '' ); 
                if( $bs_header_cta_label && $bs_header_cta_link ){
            ?>
              <a href="<?php echo esc_url( $bs_header_cta_link); ?>" class="btn book-btn"><?php echo esc_html( $bs_header_cta_label); ?></a>
            <?php } ?>
          </div>
        </div>
      </div>
    <?php } ?>  

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

        <div class="header-wrapper d-flex flex-column flex-md-row gap-4 gap-md-0">

          <div class="site-title-description flex-fill d-flex flex-column flex-md-row justify-content-start align-items-center">
            <?php
            $siteTitleShow = get_theme_mod('sitetitle_showhide', 'true');
            $siteDescShow = get_theme_mod('tagline_showhide', 'true');
            if ($siteTitleShow or $siteDescShow) {
              $logo_class = "col-5 me-2";
              $logo_style = "max-width: 100px; max-height: 100px;";
              $title_class = "flex-fill";
            } else {
              $logo_class = "flex-fill";
              $logo_style = "max-width: fit-content; max-height: 100px;";
              $title_class = "";
            }
            ?>
            <?php if ( function_exists( 'has_custom_logo' ) && has_custom_logo() ) { ?>
            <div class="site-logo overflow-hidden <?php echo $logo_class; ?>" style="<?php echo $logo_style; ?>">
              <?php the_custom_logo(); ?>
            </div>
            <?php } ?>
            <div class="<?php echo $title_class; ?>">
            <?php 
            if ($siteTitleShow) { ?>
              <div class="site-title">
                <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
                  <?php bloginfo( 'name' ); ?>
                </a>
              </div>
            <?php } ?>
            <?php 
            if ($siteDescShow) {
              $relax_spa_description = get_bloginfo( 'description', 'display' );
              if ( $relax_spa_description || is_customize_preview() ) : ?>
                <p class="site-description"><?php echo $relax_spa_description; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></p>
              <?php endif;
              } ?>
            </div>
          </div>

          <nav id="site-navigation" class="main-navigation">
            <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><!-- <?php esc_html_e( 'Primary Menu', 'relax-spa' ); ?> -->
              <div id="nav-icon">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
              </div>
            </button>
            <?php
            wp_nav_menu(
              array(
                'theme_location' => 'main-menu',
                'menu_id'        => 'primary-menu',
              )
            );
            ?>
          </nav><!-- #site-navigation -->

        </div>
      </div>
    </div>
  </header>


  <?php if ( class_exists( 'Breadcrumb_Trail' ) && ! is_home() && ! is_front_page() ) : ?>               
  <div class="breadcrumb-holder">
   <div class="container"><?php breadcrumb_trail(); ?></div> 
 </div>
</div>
<?php endif; ?>
