<?php

/**
 * Header Mobile Template
 *
 * @package Kubelio 
 */

$wishlist_count            = kubelio_get_wishlist_count();
$wishlist_count_visibility = ($wishlist_count >= 1) ? 'flex' : 'none';
$account_icon              = get_theme_mod('header_account_icon', true);
$cart_icon                 = get_theme_mod('header_cart_icon', true);
$search_icon               = get_theme_mod('header_search_icon', true);
$button                    = get_theme_mod('header_button', false);
$mobile_menu_style         = get_theme_mod('mobile_menu_style', 'slidepanel');
$sticky 		   		   = get_theme_mod('header_sticky', 'down');
$shop_navbar               = kubelio_get_shop_navbar();

?>

<header class="site-header-mobile mt-0 js-header border-bottom" data-sticky="<?php echo esc_attr($sticky); ?>">
	<div class="site-header-mobile__main has-global-padding has-background-background-color has-small-font-size has-body-color has-link-current-color py-30">
		<div class="site-container">
			<div class="wp-block-columns is-not-stacked-on-mobile is-layout-flex flex-nowrap">

				<div class="wp-block-column is-layout-flex flex-initial justify-center">
					<?php echo wp_kses_post(kubelio_get_logo('mobile')); ?>
				</div>

				<div class="wp-block-column is-layout-flex flex-1 justify-right" style="gap: 25px">

					<?php if ($account_icon && $shop_navbar === false) : ?>
						<a class="rt-popover" href="<?php echo esc_url(get_permalink(get_option('woocommerce_myaccount_page_id'))); ?>" role="button" aria-label="<?php esc_attr_e('open my account', 'kubelio'); ?>" data-popover="<?php esc_attr_e('Account', 'kubelio'); ?>">
							<i class="rt-icon has-interaction">
								<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 84 84">
									<path d="M0 0h83.333v83.333H0z" style="fill:none" />
									<path d="M22.917 54.912h37.5c5.753 0 10.416 4.664 10.416 10.417v16.615h8.334V65.329c0-10.356-8.395-18.75-18.75-18.75h-37.5c-10.356 0-18.75 8.394-18.75 18.75v16.615H12.5V65.329c0-5.753 4.664-10.417 10.417-10.417m18.75-52.083c-10.349 0-18.75 8.401-18.75 18.75s8.401 18.75 18.75 18.75 18.75-8.402 18.75-18.75-8.402-18.75-18.75-18.75m0 8.333c5.749 0 10.416 4.668 10.416 10.417s-4.667 10.417-10.416 10.417S31.25 27.328 31.25 21.579s4.668-10.417 10.417-10.417" />
								</svg>
							</i>
						</a>
					<?php endif ?>


					<?php if ($cart_icon && $shop_navbar === false) : ?>
						<?php
						$is_cart_page = kubelio_is_woocommerce(array('cart', 'checkout'));
						$cart_href    = $is_cart_page ? esc_url(get_permalink(get_option('woocommerce_cart_page_id'))) : '#mini-cart-panel';
						$cart_class   = $is_cart_page ? 'rt-cart-info rt-popover' : 'rt-cart-info rt-popover js-slidepanel';
						?>
						<a class="<?php echo esc_attr($cart_class); ?>" role="button" href="<?php echo esc_attr($cart_href); ?>" aria-label="<?php esc_attr_e('open mini cart', 'kubelio'); ?>" data-popover="<?php echo esc_attr__('Cart', 'kubelio'); ?>">
							<i class="rt-icon has-interaction">
								<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 20 20">
									<path d="M.035-.078h26.33v26.355H.035z" style="fill:none" transform="matrix(.7596 0 0 .75888 -.026 .06)" />
									<path d="M6.794 16.165c1.034 0 1.872.813 1.872 1.814s-.838 1.813-1.872 1.813c-1.033 0-1.871-.812-1.871-1.813s.838-1.814 1.871-1.814m9.982 0c1.033 0 1.872.813 1.872 1.814s-.84 1.813-1.872 1.813-1.872-.812-1.872-1.813.84-1.814 1.872-1.814M3.44 5.468l-.005-.024-.541-2.883H1.18c-.518 0-.936-.406-.936-.907S.662.747 1.18.747h2.495a.93.93 0 0 1 .921.745l.54 2.883h13.512c.27 0 .529.114.706.313a.89.89 0 0 1 .22.722l-1.248 8.465a.926.926 0 0 1-.926.778H6.17a.93.93 0 0 1-.916-.722zm2.066.72 1.426 6.652h9.656l.98-6.652z" />
								</svg>
							</i>
							<span class="rt-cart-info__badge"><span class="rt_cart_info_count"><?php echo esc_html(kubelio_get_cart_count()); ?></span></span>
						</a>
					<?php endif; ?>

					<?php if ($mobile_menu_style === 'dropdown') : ?>
						<a href="#offcanvas_menu" class="rt-menu-toggle rt-menu-toggle--point js-mobile-menu-toggle" role="button" aria-label="<?php echo esc_attr__('open menu', 'kubelio'); ?>"><span></span></a>
					<?php else : ?>
						<a href="#offcanvas_menu" class="rt-menu-toggle rt-menu-toggle--point js-slidepanel" role="button" aria-label="<?php echo esc_attr__('open menu', 'kubelio'); ?>"><span></span></a>
					<?php endif; ?>

				</div>

			</div>
		</div>
	</div>
	<?php if ($mobile_menu_style === 'dropdown') : ?>
		<div id="offcanvas_menu" class="rt-offcanvas-mobile-menu has-background-background-color has-body-color absolute is-style-offcanvas left-0 right-0" style="display: none;">
			<div class="py-30">

				<?php if ($search_icon) : ?>
					<div class="rt-search-form px-30">
						<form class="rt-search-form__inner" action="<?php echo esc_url(home_url('/')); ?>" method="get">
							<input class="rt-search-form__input" type="search" placeholder="<?php echo esc_attr(get_option('global_search_label', __('Search products', 'kubelio'))); ?>" name="s" id="s">
							<input type="hidden" name="post_type" value="<?php echo esc_attr(get_theme_mod('global_search_post_type', 'product')); ?>" />
							<button type="submit" class="rt-search-form__icon" aria-label="<?php echo esc_attr__('Search products', 'kubelio'); ?>">
								<i class="rt-icon has-interaction">
									<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 84 84">
										<path d="M0 0h83.333v83.333H0z" style="fill:none" />
										<path d="M35.183 3.102c17.831 0 32.419 14.589 32.419 32.42 0 7.565-2.701 14.589-7.024 19.992l20.533 20.532-5.944 5.944-20.532-20.532c-5.404 4.322-12.428 7.024-19.993 7.024-17.83 0-32.419-14.589-32.419-32.42s15.129-32.96 32.96-32.96m0 56.735a24.213 24.213 0 0 0 24.314-24.315 24.213 24.213 0 0 0-24.314-24.315 24.214 24.214 0 0 0-24.315 24.315 24.214 24.214 0 0 0 24.315 24.315" style="fill-rule:nonzero" />
									</svg>
								</i>
							</button>
						</form>
					</div>
				<?php endif ?>

				<nav id="menu-primary" class="rt-menu is-menu-vertical has-x-small-font-size js-menu mt-20">
					<?php
					wp_nav_menu(
						array(
							'container'      => '',
							'theme_location' => 'primary',
							'fallback_cb'    => 'rt_menu_default',
						)
					);
					?>
				</nav>

				<div class="rt-offcanvas-mobile-menu__footer flex flex-wrap gap-30 px-30 mt-40">
					<?php echo kubelio_get_template_part('global/currency-offcanvas'); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped 
					?>

					<?php if ($button) : ?>
						<a class="rt-btn is-style-primary is-size-sm flex-1" href="<?php echo esc_url(get_theme_mod('header_button_url', '#')); ?>" target="<?php echo esc_attr(get_theme_mod('header_button_new_tab', false) ? '_blank' : '_self'); ?>">
							<?php echo esc_html(get_theme_mod('header_button_text', esc_html__('Get Started', 'kubelio'))); ?>
						</a>
					<?php endif ?>
				</div>
			</div>
		</div>
	<?php endif ?>
</header>