<?php
/**
 * The Header Utility site menu
 *
 * @package Reach
 */

use Reach\App\Fields\SiteOptions;
use Reach\App\Theme\ThemeStyles;

$menu_left  = has_nav_menu( 'utility-left' );
$menu_right = has_nav_menu( 'utility-right' );

// Check if there's a menu assigned to the 'utility-left' or 'utility-right' location.
if ( ! $menu_left && ! $menu_right ) {
    return;
}

$options = SiteOptions::getSiteOptions();

// get our color settings for this element
$background_color = ! empty( $options['header_utility_color'] ) ? $options['header_utility_color'] : '#000000';
$utility_mobile   = ! empty( $options['header_util_nav_mobile'] ) ? $options['header_util_nav_mobile'] : false;
$color_contrast   = ThemeStyles::colorLightOrDark( $background_color, 'dark', 'light' );
$menu_class       = 'header__utility-flex-';
$menu_class       .= $menu_left ? '-left' : '';
$menu_class       .= $menu_right ? '-right' : '';
?>

<nav class="header__utility <?php echo $utility_mobile ? 'header__utility-enable-mobile' : ''; ?> <?php echo 'text--' . $color_contrast; ?>"
     style="background: <?php echo $background_color; ?>">
    <div class="container header__utility-flex <?php echo $menu_class; ?>">
        <?php 
        $search = isset($options['search_field'][0]) ? true : false;
        $rootUrl = home_url();
        if ( $search ) {
            if( isset($options['mega_menu']) && !empty($options['mega_menu']) && isset($options['header_layout_mega']) ) {
                if ($options['header_layout_mega'] === 'default') {
                    echo "<form role='search' method='get' class='search-form' style='display:inline-block; width: 49%; text-align: left; position: relative;' action='$rootUrl'>";
                    echo '<label>';
                    echo '<span class="screen-reader-text">Search for:</span>';
                    echo '<input type="search" class="search-field search-autocomplete" placeholder="Search" value="" name="s" autocomplete="on">';
                    echo '<div style="position: absolute; width: 18px; height: 20px; top: 50%; left: 9px; bottom: 50%; margin: auto;">';
                    echo '<svg class="svg-icon search-icon" aria-labelledby="title desc" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.9 19.7"><g class="search-path" fill="none" stroke="#848F91" stroke-width="2.5"><path stroke-linecap="square" d="M18.5 18.3l-5.4-5.4"></path><circle cx="8" cy="8" r="7"></circle></g></svg>';
                    echo '</div>';
                    echo '</label>';
                    echo '<input type="submit" class="search-submit" value="Search">';
                    echo '</form>';
                }
                else {
                    if ( $menu_left ) {
                        wp_nav_menu( [
                            'container_class' => 'header__utility--left',
                            'theme_location'  => 'utility-left',
                            'depth'           => 1
                        ] );
                    }
                }
            } else {
                if ($options['header_layout'] === 'justified' || $options['header_layout'] === 'default' || $options['header_layout'] === 'below') {
                    echo "<form role='search' method='get' class='search-form' style='display:inline-block; width: 49%; text-align: left; position: relative;' action='$rootUrl'>";
                    echo '<label>';
                    echo '<span class="screen-reader-text">Search for:</span>';
                    echo '<input type="search" class="search-field search-autocomplete" placeholder="Search" value="" name="s" autocomplete="on">';
                    echo '<div style="position: absolute; width: 18px; height: 20px; top: 50%; left: 9px; bottom: 50%; margin: auto;">';
                    echo '<svg class="svg-icon search-icon" aria-labelledby="title desc" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.9 19.7"><g class="search-path" fill="none" stroke="#848F91" stroke-width="2.5"><path stroke-linecap="square" d="M18.5 18.3l-5.4-5.4"></path><circle cx="8" cy="8" r="7"></circle></g></svg>';
                    echo '</div>';
                    echo '</label>';
                    echo '<input type="submit" class="search-submit" value="Search">';
                    echo '</form>';
                }
                else {
                    if ( $menu_left ) {
                        wp_nav_menu( [
                            'container_class' => 'header__utility--left',
                            'theme_location'  => 'utility-left',
                            'depth'           => 1
                        ] );
                    }
                }
            }
        } 
        else {
            if ( $menu_left ) {
                wp_nav_menu( [
                    'container_class' => 'header__utility--left',
                    'theme_location'  => 'utility-left',
                    'depth'           => 1
                ] );
            }
        }

        if ( $menu_right ) {
            wp_nav_menu( [
                'container_class' => 'header__utility--right',
                'theme_location'  => 'utility-right',
                'depth'           => 1
            ] );
        }
        ?>
    </div>
</nav>