<?php
// [ux_banner]
function flatsome_ux_banner( $atts, $content = null ){

	extract( $atts = shortcode_atts( array(
		'_id'                => 'banner-' . rand(),
		'visibility'         => '',
		// Layout.
		'hover'              => '',
		'hover_alt'          => '',
		'alt'                => '',
		'class'              => '',
		'sticky'             => '',
		'height'             => '',
		'height__sm'         => '',
		'height__md'         => '',
		'container_width'    => '',
		'mob_height'         => '', // Deprecated.
		'tablet_height'      => '', // Deprecated.
		// Background.
		'bg'                 => '',
		'parallax'           => '',
		'parallax_style'     => '',
		'slide_effect'       => '',
		'bg_size'            => 'large',
		'bg_color'           => '',
		'bg_overlay'         => '',
		'bg_overlay__sm'     => '',
		'bg_overlay__md'     => '',
		'bg_pos'             => '',
		'effect'             => '',
		// Shape divider.
		'divider_top'            => '',
		'divider_top_height'     => '150px',
		'divider_top_height__sm' => null,
		'divider_top_height__md' => null,
		'divider_top_width'      => '100',
		'divider_top_width__sm'  => null,
		'divider_top_width__md'  => null,
		'divider_top_fill'       => '',
		'divider_top_flip'       => 'false',
		'divider_top_to_front'   => 'false',
		'divider'                => '',
		'divider_height'         => '150px',
		'divider_height__sm'     => null,
		'divider_height__md'     => null,
		'divider_width'          => '100',
		'divider_width__sm'      => null,
		'divider_width__md'      => null,
		'divider_fill'           => '',
		'divider_flip'           => 'false',
		'divider_to_front'       => 'false',
		// Video.
		'video_mp4'          => '',
		'video_ogg'          => '',
		'video_webm'         => '',
		'video_sound'        => 'false',
		'video_loop'         => 'true',
		'youtube'            => '',
		'video_visibility'   => 'hide-for-medium',
		// Border Control.
		'border'             => '',
		'border_color'       => '',
		'border_margin'      => '',
		'border_radius'      => '',
		'border_style'       => '',
		'border_hover'       => '',
		// Deprecated (This is added to Text Box shortcode).
		'animation'          => 'fadeIn',
		'animate'            => '',
		'loading'            => '',
		'animated'           => '',
		'animation_duration' => '',
		'text_width'         => '60%',
		'text_align'         => 'center',
		'text_color'         => 'light',
		'text_pos'           => 'center',
		'parallax_text'      => '',
		'text_bg'            => '',
		'padding'            => '',
		// Link.
		'link'               => '',
		'target'             => '',
		'rel'                => '',
	), $atts ) );

   // Stop if visibility is hidden.
   if($visibility == 'hidden') return;

   ob_start();

	$classes   = array( 'has-hover' );
	$link_atts = array(
		'target' => $target,
		'rel'    => array( $rel ),
	);

   // Custom Class.
   if($class) $classes[] = $class;

   if($animate) {$animation = $animate;}
   if($animated) {$animation = $animated;}

   /* Hover Class */
   if($hover) $classes[] = 'bg-'.$hover;
   if($hover_alt) $classes[] = 'bg-'.$hover_alt;

   /* Has video */
   if($video_mp4 || $video_webm || $video_ogg) { $classes[] = 'has-video'; }

   /* Sticky */
   if($sticky) $classes[] = 'sticky-section';

   /* Banner Effects */
   if($effect) wp_enqueue_style( 'flatsome-effects');

    /* Old bg fallback */
    $atts['bg_color'] = $bg_color;
    if(strpos($bg,'#') !== false){
      $atts['bg_color'] = $bg;
      $bg = false;
    }

    /* Mute if video_sound is 0 (should stay to support old versions have checkbox option for video sound) */
    if ( $video_sound == '0' ) $video_sound = 'false';

    if($bg_overlay && strpos($bg_overlay,'#') !== false){
      $atts['bg_overlay'] = flatsome_hex2rgba($bg_overlay,'0.15');
    }

   /* Full height banner */
   if(strpos($height, '100%') !== false) {
     $classes[] = 'is-full-height';
   }

   /* Slide Effects */
   if($slide_effect) $classes[] = 'has-slide-effect slide-'.$slide_effect;

   /* Visibility */
   if($visibility) $classes[] = $visibility;

   /* Links */
   $start_link = "";
   $end_link = "";

   if($link) {$start_link = '<a class="fill" href="'.$link.'"' . flatsome_parse_target_rel( $link_atts ) . '>'; $end_link = '</a>';};

   /* Parallax  */
   if($parallax){
      $classes[] = 'has-parallax';
      $parallax = 'data-parallax="-'.$parallax.'" data-parallax-container=".banner" data-parallax-background';
   }

   /* Lazy load */
   $lazy_load = get_theme_mod('lazy_load_backgrounds', 1) ? '' : 'bg-loaded';

   $classes = implode(" ", $classes);

  ?>

  <div class="banner <?php echo $classes; ?>" id="<?php echo $_id; ?>">
     <?php if($loading) echo '<div class="loading-spin dark centered"></div>'; ?>
     <div class="banner-inner fill">
        <div class="banner-bg fill" <?php echo $parallax; ?>>
            <div class="bg fill bg-fill <?php echo $lazy_load; ?>"></div>
            <?php require( __DIR__ . '/commons/video.php' ) ;?>
            <?php if($bg_overlay) echo '<div class="overlay"></div>' ?>
            <?php require( __DIR__ . '/commons/border.php' ) ;?>
            <?php if($effect) echo '<div class="effect-'.$effect.' bg-effect fill no-click"></div>'; ?>
        </div>
		<?php require __DIR__ . '/commons/shape-divider.php'; ?>
        <div class="banner-layers <?php if($container_width !== 'full-width') echo 'container'; ?>">
            <?php echo $start_link; ?><div class="fill banner-link"></div><?php echo $end_link; ?>
            <?php
            // Get Layers
            if (!get_theme_mod('flatsome_fallback', 1) || (has_shortcode( $content, 'text_box' ) || has_shortcode( $content, 'ux_hotspot' ) || has_shortcode( $content, 'ux_image' ))) {
              echo do_shortcode( $content );
            } else {
              $x = '50'; $y = '50';
              if($text_pos !== 'center'){
                $values = explode(' ', $text_pos);
                if($values[0] == 'left' || $values[1] == 'left'){$x = '10';}
                if($values[0] == 'right' || $values[1] == 'right'){$x = '90';}
                if($values[0] == 'far-left' || $values[1] == 'far-left'){$x = '0';}
                if($values[0] == 'far-right' || $values[1] == 'far-right'){$x = '100';}
                if($values[0] == 'top' || $values[1] == 'top'){$y = '10';}
                if($values[0] == 'bottom' || $values[1] == 'bottom'){$y = '90';}
              }
              if($text_bg && !$padding) $padding = '30px 30px 30px 30px';
              $depth = '';
              if($text_bg) $depth = '1';
              echo do_shortcode( '[text_box text_align="'.$text_align.'" parallax="'.$parallax_text.'" animate="'.$animation.'" depth="'.$depth.'" padding="'.$padding.'" bg="'.$text_bg.'" text_color="'.$text_color.'" width="'.intval($text_width).'" width__sm="60%" position_y="'.$y.'" position_x="'.$x.'"]'.$content.'[/text_box]' );
            } ?>
        </div>
      </div>

      <?php
       // Add invisible image if height is not set.
      if(!$height) { ?>
        <div class="height-fix is-invisible"><?php if($bg) echo flatsome_get_image($bg, $bg_size, $alt, true); ?></div>
      <?php } ?>
      <?php
        // Get custom CSS
        $args = array(
          'height' => array(
            'selector' => '',
            'property' => 'padding-top',
          ),
          'bg' => array(
            'selector' => '.bg.bg-loaded',
            'property' => 'background-image',
            'size' => $bg_size
          ),
          'bg_overlay' => array(
            'selector' => '.overlay',
            'property' => 'background-color',
          ),
          'bg_color' => array(
            'selector' => '',
            'property' => 'background-color',
          ),
          'bg_pos' => array(
            'selector' => '.bg',
            'property' => 'background-position',
          ),
		  'divider_top_height' => array(
			  'selector' => '.ux-shape-divider--top svg',
			  'property' => 'height',
		  ),
		  'divider_top_width'  => array(
			  'selector' => '.ux-shape-divider--top svg',
			  'property' => '--divider-top-width',
			  'unit'     => '%',
		  ),
		  'divider_top_fill'   => array(
			  'selector' => '.ux-shape-divider--top .ux-shape-fill',
			  'property' => 'fill',
		  ),
		  'divider_height'     => array(
			  'selector' => '.ux-shape-divider--bottom svg',
			  'property' => 'height',
		  ),
		  'divider_width'      => array(
			  'selector' => '.ux-shape-divider--bottom svg',
			  'property' => '--divider-width',
			  'unit'     => '%',
		  ),
		  'divider_fill'       => array(
			  'selector' => '.ux-shape-divider--bottom .ux-shape-fill',
			  'property' => 'fill',
		  ),
        );
        echo ux_builder_element_style_tag($_id, $args, $atts);
      ?>
  </div>

<?php
  $content = ob_get_contents();
  ob_end_clean();
  return $content;
}
add_shortcode('ux_banner', 'flatsome_ux_banner');