<?php echo $header; ?>
<?php if(!$tipo_configuracao){ ?>

  <style>
    .banner-html .banner-product-details .banner-html-product-title {
      color: <?php echo $this->config->get('wg24_topcart_te_colo')?>;
    }
    .item-column.banner-html {
      background-color: <?php echo $this->config->get('wg24_top_cart_bgcol')?>;
    }
    .banner-html-price {
      color: <?php echo $this->config->get('wg24_mm_bgcol_center') != '' ? $this->config->get('wg24_mm_bgcol_center') : $this->config->get('wg24_mm_bgcol')?>;
    }

    <?php if(isset($banner_product_model[Type_ModelBannerProduct::Tp_Model_1])){ ?>
    /*============================= INICIO - Modelo-1 ============================*/
    .banner-html.model-1 .banner-product-details:before,/* background das informacoes do produto */
    .banner-html.model-1 .banner-product-image:after {/* faixa a esqueda da imagem do produto */
      background-color: <?php echo $this->config->get('wg24_top_cart_bgcol')?>;
    }
    /*============================= FINAL - Modelo-1 =============================*/
    <?php } ?>

    <?php if(isset($banner_product_model[Type_ModelBannerProduct::Tp_Model_2])){ ?>
    /*============================= INICIO - Modelo-2 ============================*/
    .banner-html.model-2 .banner-product-image:before {
      background-color: #FFF;
    }
    /*============================= FINAL - Modelo-2 =============================*/
    <?php } ?>

    <?php if(isset($banner_product_model[Type_ModelBannerProduct::Tp_Model_3])){ ?>
    /*============================= INICIO - Modelo-3 ============================*/
    .banner-html.model-3.item-column {
      background-color: <?php echo $this->config->get('wg24_top_cart_bgcol')?>!important;
    }
    .banner-html.model-3 .banner-product-image {
      background-color: <?php echo $this->config->get('wg24_mm_bgcol_center') != '' ? $this->config->get('wg24_mm_bgcol_center') : $this->config->get('wg24_mm_bgcol')?>;
    }
    .banner-html.model-3 .banner-product-details {
      color: <?php echo $this->config->get('wg24_top_cart_bgcol')?>!important;
    }
    .banner-html.model-3 .banner-product-image:before {/* background da imagem do produto */
      background-color: <?php echo $this->config->get('wg24_mm_bgcol_center') != '' ? $this->config->get('wg24_mm_bgcol_center') : $this->config->get('wg24_mm_bgcol')?>;
    }
    .banner-html.model-3 .banner-product-details .banner-html-product-title {
      border-top-color: <?php echo $this->config->get('wg24_mm_bgcol_center') != '' ? $this->config->get('wg24_mm_bgcol_center') : $this->config->get('wg24_mm_bgcol')?>;
      border-bottom-color: <?php echo $this->config->get('wg24_mm_bgcol_center') != '' ? $this->config->get('wg24_mm_bgcol_center') : $this->config->get('wg24_mm_bgcol')?>;
      color: <?php echo $this->config->get('wg24_mm_bgcol_center') != '' ? $this->config->get('wg24_mm_bgcol_center') : $this->config->get('wg24_mm_bgcol')?>;
    }
    /*============================= FINAL - Modelo-3 =============================*/
    <?php } ?>

    <?php if(isset($banner_product_model[Type_ModelBannerProduct::Tp_Model_4])){ ?>
    /*============================= INICIO - Modelo-4 ============================*/
    .banner-html.model-4 .banner-product-image a::before {
      border-top: 6px solid <?php echo $this->config->get('wg24_top_cart_bgcol')?>;
      border-left: 6px solid <?php echo $this->config->get('wg24_top_cart_bgcol')?>;
    }
    .banner-html.model-4 .banner-product-image a::after {
      border-bottom: 6px solid <?php echo $this->config->get('wg24_top_cart_bgcol')?>;
      border-right: 6px solid <?php echo $this->config->get('wg24_top_cart_bgcol')?>;
    }
    .banner-html.model-4 .banner-product-details {
      background-color: <?php echo $this->config->get('wg24_top_cart_bgcol')?>;
    }
    /*============================= FINAL - Modelo-4 ============================*/
    <?php } ?>
  </style>
<?php } ?>


<?php if (isset($fc_popup['status']) && isset($fc_popup['image']) && $fc_popup['image']) { ?>
  <div class="overlay overlay-black-3" style="z-index: 110;" onclick="this.remove()">
    <div class="full-width full-height flex center-xs middle-xs padding-medium">
      <div style="max-width:600px;max-height:530px;position:relative;">
        <button class="btn-default btn-white btn-small-square abs" style="top:.25rem;right:.25rem;background-color:rgba(0,0,0,.3);color:#fff;">
          <i class="fas fa-times"></i>
        </button>
        <?php if (isset($fc_popup['link']) && !empty($fc_popup['link'])) { ?>
          <a
            href="<?php echo $fc_popup['link'] ?>"
            <?php echo isset($fc_popup['new_tab']) ? 'target="_blank"' : '' ?>
          >
        <?php } ?>
          <img
            src="<?php echo $fc_popup['image'] ?>"
            alt="<?php echo $fc_popup['describe'] ?>"
            class="visible-block"

          >
        <?php if (isset($fc_popup['link']) && !empty($fc_popup['link'])) { ?>
          </a>
        <?php } ?>
      </div>
    </div>
  </div>
<?php } ?>

<?php if (isset($fc_newsletter['status']) && $fc_newsletter['status']) { ?>
<div id="newsletter-overlay" class="overlay overlay-black-3" style="z-index: 110;" onmousedown="this.remove()">
  <div class="full-width full-height flex center-xs middle-xs">
    <div style="max-width:600px;max-height:530px;position:relative;" onmousedown="event.stopPropagation();">
      <div id="fc-newsletter" class="module-newsletter">
        <div class="<?php if (isset($newsletter_name) && $newsletter_name == Type_Status::Tp_Habilitado) echo 'horizontal-padding-small'; ?> vertical-padding-x-large">
          <div class="row">
            <button class="btn-default btn-white btn-small-square abs" style="width:auto;background-color:rgba(0,0,0,.3);color:#fff;top:.25rem;right:.25rem" onmousedown="$('#newsletter-overlay').remove()">
              <i class="fas fa-times"></i>
            </button>
            <div class="col-xs-12">
              <div class="content-box text-center margin-x-large">
                <b class="text-medium text-uppercase visible-block text-dark">
                  <?php if(isset($fc_newsletter['mensagem'])) echo $fc_newsletter['mensagem']; ?>
                </b>
                <span class="text-small visible-block bottom-margin-large text-dark">
                  <?php if(isset($fc_newsletter['info'])) echo $fc_newsletter['info']; ?>
                </span>
                <?php if (isset($newsletter_name) && $newsletter_name == Type_Status::Tp_Habilitado) { ?>
                <div class="field-group field-group-inline field-newsletter margin-x-small vertical-top">
                  <input type="text" class="input-text field-entry field-entry-medium input-newsletter bottom-margin-x-small" name="newsletter_name" value="" placeholder="<?php if(isset($fc_newsletter['placeholder_name'])) echo $fc_newsletter['placeholder_name']; ?>">
                  <input type="text" class="input-text field-entry field-entry-medium input-newsletter bottom-margin-small" name="newsletter_email" value="" placeholder="<?php if(isset($fc_newsletter['placeholder_email'])) echo $fc_newsletter['placeholder_email']; ?>">
                  <button type="button" class="btn-default btn-medium full-width js-btn-inscrever" title="<?php if(isset($fc_newsletter['text_button'])) echo $fc_newsletter['text_button']; ?>">
                    <span><?php if(isset($fc_newsletter['text_button'])) echo $fc_newsletter['text_button']; ?></span>
                  </button>
                </div>
                <?php } else { ?>
                <div class="field-group field-group-inline field-newsletter margin-x-small vertical-top">
                  <input type="text" class="input-text field-entry field-entry-medium input-newsletter" name="newsletter_email" value="" placeholder="<?php if(isset($fc_newsletter['placeholder_email'])) echo $fc_newsletter['placeholder_email']; ?>">
                </div>
                <div class="field-group field-group-inline margin-x-small vertical-top">
                  <button type="button" class="btn-default btn-medium-square js-btn-inscrever" title="<?php if(isset($fc_newsletter['text_button'])) echo $fc_newsletter['text_button']; ?>">
                    <span><?php if(isset($fc_newsletter['text_button'])) echo $fc_newsletter['text_button']; ?></span>
                  </button>
                </div>
                <?php } ?>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<?php } ?>

<div id="content" class="fix-height">

  <?php if($habilita_banner <> '0'){ ?>
    <section>
      <div class="carousel-container slide-home slide-image <?php echo $hide_responsive; ?>">
        <div class="hidden-overflow">
          <div class="carousel-wrapper">
            <?php if($aspect_ratio && $banner_height) { ?>
              <ul class="carousel-list clearfix" <?php echo 'data-aspect-ratio="'.$aspect_ratio.'" data-banner-height="'.$banner_height.'"'; ?>>
            <?php } elseif($aspect_ratio) { ?>
              <ul class="carousel-list clearfix" <?php echo 'data-aspect-ratio="'.$aspect_ratio.'"'; ?>>
            <?php } else { ?>
              <ul class="carousel-list clearfix">
            <?php } ?>
              <?php if($tipo_configuracao == 'simples'){ ?>

                <?php if(isset($banners)){ ?>
                  <?php foreach ($banners as $banner) { ?>
                    <?php if ($banner['link']) { ?>
                      <li class="item-column">
                        <a href="<?php echo $banner['link']; ?>">
                          <picture>
                            <source style="display: none" srcset="" data-src="<?php echo $banner['image']['webp']; ?>">
                            <img style="display: none" class="img-principal"  alt="banner" src="" data-src="<?php echo $banner['image']['jpg']; ?>" title="<?php echo $banner['title']; ?>">
                          </picture>
                          <img class="img-loading" alt="banner" src="assets/img/loading-black.svg" width="40" height="40"/>
                        </a>
                      </li>
                    <?php } else { ?>
                      <li class="item-column">
                        <picture>
                          <source style="display: none" srcset="" data-src="<?php echo $banner['image']['webp']; ?>">
                          <img style="display: none" class="img-principal"  alt="banner" src="" data-src="<?php echo $banner['image']['jpg']; ?>" title="<?php echo $banner['title']; ?>">
                        </picture>
                        <img class="img-loading" alt="banner" src="assets/img/loading-black.svg" width="40" height="40"/>
                      </li>
                    <?php } ?>
                  <?php } ?>
                <?php } ?>

              <?php } else { ?>

                <?php if (isset($products)) {
                  $image_row = 0;
                  $first_img = true;
                  foreach ($products as $product) {
                    if($product['status']){ ?>

                    <?php if (isset($product['banner_image_description'])) { ?>
                      <li class="item-column banner-html">
                        <?php if ($product['link']) { ?>
                          <a href="<?php echo $product['link']; ?>" target="<?php echo $product['target']; ?>">
                            <picture>
                              <?php if (isset($product['thumb_responsive']) && $product['thumb_responsive'] && strpos($product['thumb_responsive']['jpg'], 'no_image') === false) { ?>
                                <source class="<?php echo ($first_img) ? 'first-src' : ''; ?>" media="(max-width: 559px)" srcset="" data-src="<?php echo str_replace(' ', '%20', $product['thumb_responsive']['webp']); ?>">
                                <source class="<?php echo ($first_img) ? 'first-src' : ''; ?>" media="(max-width: 559px)" srcset="" data-src="<?php echo str_replace(' ', '%20', $product['thumb_responsive']['jpg']); ?>">
                              <?php } ?>
                              <source class="<?php echo ($first_img) ? 'first-src' : ''; ?>" srcset="" data-src="<?php echo str_replace(' ', '%20', $product['thumb']['webp']); ?>">
                              <img style="display: none" class="img-principal <?php echo ($first_img) ? 'first-img' : ''; ?>" src data-src="<?php echo str_replace(' ', '%20', $product['thumb']['jpg']); ?>" alt="<?php echo $product['banner_image_description'] ?>" title="<?php echo $product['banner_image_description'] ?>" />
                            </picture>
                            <img class="img-loading" alt="Banner" src="assets/img/loading-black.svg" width="40" height="40">
                          </a>
                        <?php } else { ?>
                          <picture>
                            <?php if (isset($product['thumb_responsive']) && $product['thumb_responsive'] && strpos($product['thumb_responsive']['jpg'], 'no_image') === false) { ?>
                              <source class="<?php echo ($first_img) ? 'first-src' : ''; ?>" media="(max-width: 559px)" srcset="" data-src="<?php echo str_replace(' ', '%20', $product['thumb_responsive']['webp']); ?>">
                              <source class="<?php echo ($first_img) ? 'first-src' : ''; ?>" media="(max-width: 559px)" srcset="" data-src="<?php echo str_replace(' ', '%20', $product['thumb_responsive']['jpg']); ?>">
                            <?php } ?>
                            <source class="<?php echo ($first_img) ? 'first-src' : ''; ?>" srcset="" data-src="<?php echo str_replace(' ', '%20', $product['thumb']['webp']); ?>">
                            <img style="display: none" class="img-principal <?php echo ($first_img) ? 'first-img' : ''; ?>" src data-src="<?php echo str_replace(' ', '%20', $product['thumb']['jpg']); ?>" alt="<?php echo $product['banner_image_description'] ?>" title="<?php echo $product['banner_image_description'] ?>" />
                          </picture>
                          <img class="img-loading" alt="Banner" src="assets/img/loading-black.svg" width="40" height="40">
                        <?php } ?>
                        <?php $first_img = false; ?>
                      </li>

  						        <?php $image_row++; ?>

                    <?php } else { ?>
                      <li class="item-column banner-html <?php echo $product['banner_model'] ?>">

                        <div class="container-banner-html">

                          <div class="banner-product-image">
                            <!-- <div class="background-img"></div> -->

                            <?php if ($product['thumb']) { ?>
                              <a href="<?php echo $product['href']; ?>" title="<?php echo $product['name']; ?>" />
                                <picture>
                                  <source style="display: none" class="thumbnail" srcset="" data-src="<?php echo $product['thumb']['webp']; ?>">
                                  <img style="display: none" class="thumbnail img-principal" src="" data-src="<?php echo $product['thumb']['jpg']; ?>" alt="<?php echo $product['name']; ?>">
                                </picture>
                                <img class="img-loading" alt="Banner" src="assets/img/loading-black.svg" width="40" height="40"/>
                              </a>
                            <?php } ?>

                            <?php if ($product['price'] && $product['special']) { ?>
                              <div class="sale-off-label hidden-sm-down">
                                <?php echo $product['porcentagemDesconto']; ?>
                              </div>
                            <?php } ?>

                          </div>
                          <div class="banner-product-details">
                            <div class="prod_image_detail">
                              <div class="inner">
                                <a class="banner-html-product-title heading-1" href="<?php echo $product['href']; ?>" title="<?php echo $product['name']; ?>">
                                  <?php echo$product['name'];?>
                                </a>
                                <div>
                                  <?php if ($product['price']) { ?>
                                    <?php if (!$product['special']) { ?>
                                      <div class="banner-html-price clearfix">
                                        <?php echo $product['price']; ?>
                                      </div>
                                    <?php } else { ?>
                                      <div class="banner-html-price clearfix">
                                        <span class="normal-price-container">
                                          <span class="prefix-price">De:</span>
                                          <span class="normal-price"><?php echo $product['price']; ?></span>
                                        </span>
                                        <span class="promotional-price-container">
                                          <span class="prefix-price">Por:</span>
                                          <span class="promotional-price"><?php echo $product['special']; ?></span>
                                        </span>
                                      </div>
                                    <?php } ?>
                                  <?php } ?>
                                  <div class="flex center-xs top-padding-small">
                                    <?php if ($config_show_cronometer && $product['promotion_id']) { ?>
                                      <div class="flex center-xs right-margin-large">
                                        <div class="flex middle-xs">
                                          <i class="fas fa-stopwatch right-margin-small promotion-cronometer" style="font-size:30px;"></i>
                                          <div>
                                            <span class="text-x-small visible-block text-uppercase" style="color:#fff";>Oferta termina</span>
                                            <span class="text-bold text-large promotion-cronometer js-promotion-id-<?php echo $product['promotion_id'];?>"></span>
                                          </div>
                                        </div>
                                      </div>
                                    <?php } ?>
                                    <a class="btn-banner btn-default btn-medium" href="<?php echo $product['href']; ?>" title="<?php echo $button_cart; ?>">
                                      <span>Aproveite</span>
                                    </a>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>

                        </div>
                      </li>
                    <?php } ?>
                    <?php } ?>
                  <?php } ?>
                <?php } ?>
              <?php } ?>
            </ul>
          </div>
        </div>
      </div>
    </section>
    <?php if ($tipo_banner == 1 && $tipo_configuracao == 0) { ?>
        <style>
        .banner-product-details {
          margin-right: 0;
        }

        .banner-html.model-1 .banner-product-details:before {/* background das informacoes do produto */
          left: 50%;
        }
        .banner-html.model-1 .banner-product-image:after {/* faixa a esqueda da imagem do produto */
          left: -34%;
        }
        .banner-html.model-1 .banner-product-image img {
          left: 60%;
        }
        </style>
    <?php } ?>

    <?php $posicionamento = ($this->config->get('tipo_posicionamento') == 1) ? 'responsive' : 'full'; ?>

  <script>
    window.waitEvent('scripts_window', function() {
      $(".slide-home").carousel({
        autoScroll: true,
        autoScrollTime: <?php echo $banner_time; ?>,
        infinityScroll: true,
        typeScroll: 'single',// single / block
        hoverPause: true,
        itemsToShow: 1,
        sliderImage: '<?php echo ($tipo_banner == 1) ? 'center' : $posicionamento ; ?>'// center / full / responsive
      });
    });
  </script>
  <script>
    window.waitEvent('scripts_window', function() {
      $('#fc-newsletter .js-btn-inscrever').on('click', function (event) {

        event.preventDefault();
        $.ajax({
          url: 'index.php?route=common/module_newsletter/newsletter',
          type: 'POST',
          data: {
            email: $("#fc-newsletter input[name='newsletter_email']").val(),
            name: $("#fc-newsletter input[name='newsletter_name']").val() ?? ''

          },
          dataType: 'json',
          beforeSend: function () {
            $('#fc-newsletter .js-btn-inscrever').addClass('btn-loading');
            $('#fc-newsletter .js-btn-inscrever').attr('disabled', true);
          },
          complete: function () {
            $('#fc-newsletter .js-btn-inscrever').removeClass('btn-loading');
            $('#fc-newsletter .js-btn-inscrever').attr('disabled', false);
          },
          success: function (json) {

            $('#fc-newsletter .input-newsletter').removeClass('field-entry-error');
            $('#fc-newsletter .field-newsletter').removeClass('field-valid');

            if (json['error']) {
              $('#fc-newsletter .input-newsletter').addClass('field-entry-error');
              <?php if (isset($newsletter_name) && $newsletter_name == Type_Status::Tp_Habilitado) { ?>
                $("#fc-newsletter input[name='newsletter_name']").before('<span class="text-error visible-block">' + json['error'] + '</span>');
              <?php } else { ?>
                $("#fc-newsletter input[name='newsletter_email']").after('<span class="text-error visible-block">' + json['error'] + '</span>');
              <?php } ?>
            }

            if (json['success']) {
              $('#fc-newsletter .field-newsletter').addClass('field-valid');
              <?php if (isset($newsletter_name) && $newsletter_name == Type_Status::Tp_Habilitado) { ?>
                $("#fc-newsletter input[name='newsletter_name']").before('<span class="text-success visible-block">' + json['success'] + '</span>');
              <?php } else { ?>
                $("#fc-newsletter input[name='newsletter_email']").after('<span class="text-success visible-block">' + json['success'] + '</span>');
              <?php } ?>

              $('#fc-newsletter .text-success').delay(5000).fadeOut(400, function () {
                $('#newsletter-overlay').remove();
              });
            }

            $('#fc-newsletter .text-error, #fc-newsletter .text-success').delay(5000).fadeOut(400, function () {
              $('#fc-newsletter .text-error, #fc-newsletter .text-success').remove();
              $('#fc-newsletter .input-newsletter').removeClass('field-entry-error');
              $('#fc-newsletter .field-newsletter').removeClass('field-valid');
            });

          }
        });

      });
    });
  </script>
  <?php } ?>

  <div class="container-fluid">
    <?php if($this->config->get('wg24_home_f_box')=="enable") { ?>
      <section>
        <div class="our-features-box">
          <?php
            $default_lang=$this->config->get('config_language_id');
            $fetured_box=$this->config->get('wg24_home_s_b_f_box');
            echo html_entity_decode($fetured_box[$default_lang]);
          ?>
        </div>
      </section>
    <?php } ?>
    <div class="row">
      <?php if (isset($categories) || $column_left) { ?>
        <div class="col-xs-3 hide-mobile">
          <?php if ($column_left) { ?>
            <?php echo $column_left; ?>
          <?php } ?>
        </div>
        <div class="col-xs-12 col-sm-9 <?php if (isset($categories)) { echo ($position_categories_sidebar_home == Type_Position::Tp_Left) ? '' : 'first-xs'; } ?>">
      <?php } else { ?>
        <div class="col-xs-12">
      <?php } ?>
        <div class="content-box content-home">
          <?php echo $content_top; ?>
        </div>
      </div>
      <div class="col-xs-12">
        <div class="content-box content-home">
          <?php echo $content_bottom; ?>
        </div>
      </div>
    </div>
  </div>

</div>
<style>
.icon-cotegory-accordion {
  position: absolute;
  right: 1px;
  top: 0;
  height: calc(100% - 3px);
  width: 40px;
  text-align: center;
  -webkit-transition: .3s linear;
  -moz-transition: .3s linear;
  -ms-transition: .3s linear;
  transition: .3s linear;
  box-shadow: -1px 0 0 0 rgba(0,0,0,.2)
}
.icon-cotegory-accordion:after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  width: 0;
}
.open {
  -webkit-transform: rotateX(180deg);
  -moz-transform: rotateX(180deg);
  -ms-transform: rotateX(180deg);
  transform: rotateX(180deg);
}
</style>
<?php echo $footer; ?>
