<?php
/*
/https://ddep6.cadintek.io/post_component/slider-main-variant-hidrotecno/
 */
$class_name = 'slider-main';
$class_card =  $class_name . '-card';
$main_slider = get_field($class_name);
if ($main_slider): ?>
    <section class="slider-main fade-in">
      <div class="js-slider">
        <?php
        while(have_rows($class_name)):the_row();
          get_template_part('cards/'.$class_card,NULL,[
            'class_card'=>$class_card,
            'class_name'=>$class_name,
          ]);
        endwhile;?>
      </div>
      <div class="carousel-arrows">
        <span class="js_gn_carousel__prev_arrow carousel-arrows__prev">
          <i class="carousel-arrows__arrow  arrow-left">￩</i>
        </span>
        <span class="js_gn_carousel__next_arrow carousel-arrows__next">
          <i class="carousel-arrows__arrow arrow-right">￫</i>
        </span>
      </div>
    </section>
  <?php endif ?>

<?php
extract($args);
$image = get_sub_field($class_name.'__image');
$title = get_sub_field($class_name.'__title');
$text = get_sub_field($class_name.'__text');
$cta = get_sub_field($class_name.'__cta');
?>
<div class="<?php echo $class_card; ?> co-white">
    <div class="<?php echo $class_card ?>__imagen m-0">
        <figure>
            <img src="<?php echo esc_url($image['url']); ?>"
            alt="<?php echo esc_attr($image['alt']) ?>">
        </figure>
    </div>
    <div class="<?php echo $class_card ?>__text-wrapper">
        <div class="<?php echo $class_card ?>__text-content d-flex flex-column justify-content-center justify-content-lg-end align-items-start">
            <?php if ($title) : ?>
                <h2 class="<?php echo $class_card ?>__title mb-5">
                    <?php echo $title; ?>
                </h2>
            <?php endif;
                if($text):?>
                <p class="<?php echo $class_card ?>__paragraph title-2 mb-5">
                <?php echo $text; ?>
                </p>
            <?php endif ?>
            <div class="<?php echo $class_card ?>__cta d-flex flex-wrap">
                <?php if($cta):?>
                    <a class="<?php echo $class_card ?>__cta button-primary me-3" href="<?php echo esc_url($cta['url']);?>" target="<?php echo esc_attr($cta['target']);?>">
                        <?php echo esc_html($cta['title']); ?>
                    </a>
                <?php endif; ?>
            </div>
        </div>
    </div>
</div>

.slider-main {
  height: auto;
  object-fit: cover;
  overflow: hidden;
  padding: 0;
  position: relative;

  .carousel-arrows {
    padding: 0 space(0.3);

    @include from(l){
      @include center('reset');
      padding:0 space(3.5);
      right: space(2.5);
      top: 80%;
      width: max-content;
    }

    @include from(xl){
      @include center('reset');
      right: space(2.5);
      top: 80%;
    }

    &__arrow {
      @include square(rem(35px));

      @include from(l){
        @include square(rem(50px));
        margin-left:space(1);
      }

      @include from(xl){
        @include center('reset');
        position: initial
      }
    }

    .arrow-left {
      @include imageBg("../img/icons/arrow_left.png");
    }

    .arrow-right {
      @include imageBg("../img/icons/arrow_right.png");
    }
  }
}

.slider-main-card {
  position: relative;

  &__imagen {
    padding-bottom: 0;
    figure {
      @include fluid-aspect(25 35, "img");
      @include from(s) {
        @include fluid-aspect(1 1, "img");
      }
      @include from(m) {
        @include fluid-aspect(10 6, "img");
      }
      @include from(l) {
        @include fluid-aspect(20 8, "img");
      }
      @include from(xl) {
        width: 100%;
        max-height: 600px;
      }
    }
  }

  &__text-wrapper {
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
  }
  &__text-content {
    @include center("vertical");
    height: 100%;
    padding: space(2);
    width: 100%;
    @include from(m){
      margin: 0 0 0 space(2);
      max-width: 65%;
      width: initial;
    }
    @include from(l) {
      max-width: 45%;
      bottom: space(1.5);
      padding-bottom: space(3);
    }
  }
  &__paragraph {
    font-weight: 400;
  }

}

import { GnCarousel } from "../libraries/slick";

const SELECTORS = {
  component: ".js-slider",
};

const sliderInstance = [...document.querySelectorAll(SELECTORS.component)];

if (sliderInstance) {
  const OPTIONS = {
    arrows: true,
    autoplay: true,
    autoplaySpeed: 5000,
    dots: false,
    infinite: true,
    slidesToShow: 1,
    slidesToScroll: 1,
  };

  sliderInstance.forEach((slider) => {
    const parent = slider.parentElement;
    const slickInstance = new GnCarousel(slider, OPTIONS, parent);

    slickInstance.initCarousel();
  });
}