@php
  /*
   * Nei template dei blocchi creati con ACF non sarà possibile usare blade
   * perchè non viene interpretato nella preview in admin
   */

  // Create id attribute allowing for custom "anchor" value.
  $random = wp_rand(0, 100000000);
  $id = 'muy-carousel-' . $block['id'] . '-' . $random;
  if (!empty($block['anchor'])) {
      $id = $block['anchor'];
  }

  // Create class attribute allowing for custom "className" and "align" values.
  $className = 'muy-' . $block['slug'];
  if (!empty($block['className'])) {
      $className .= ' ' . $block['className'];
  }
  if (!empty($block['align'])) {
      $className .= ' align' . $block['align'];
  }

  $default_slides = [
      [
          'text' => __('Insert first slide', 'muy-lindo'),
      ],
  ];

  // Load values and assign defaults.
  $slides = get_field('slides') ?: $default_slides;
  $overflow_hidden = get_field('overflow_hidden');

  $dots = get_field('dots') ?: false;
  $next_arrow = get_field('next_arrow');
  $pause_on_hover = get_field('pause_on_hover');
  $before_arrow = get_field('before_arrow');
  $autoplay_speed = get_field('autoplay_speed');
  $max_width_content = get_field('max_width_content');
  $infinite = get_field('infinite') ?: false;
  $carousel_color_theme = get_field('$carousel_color_theme');
  $dots_position = (int) get_field('dots_position');
  $autoplay = get_field('autoplay') ?: false;
  //slick slide crashes with infinite on false and slide to show on 0
  $slides_to_show = (int) get_field('slides_to_show');
  $arrows = get_field('arrows') ?: false;
  $slide_padding = get_field('slide_padding') ?: 20;
  $arrows_position_get = get_field('arrows_position');
  $arrows_position_mobile_get = get_field('arrows_position_mobile');
  $arrows_position = '';
  $arrows_position_mobile = '';

  $prova = '#muy-carousel-' . $block['id'] . ' .before-arrow';

  switch ($slides_to_show) {
      case 4:
          $slides_to_show_screen_lg = 3;
          $slides_to_show_screen_md = 2;
          $slides_to_show_screen_sm = 1;
          break;
      case 3:
          $slides_to_show_screen_lg = 3;
          $slides_to_show_screen_md = 2;
          $slides_to_show_screen_sm = 1;
          break;
      case 2:
          $slides_to_show_screen_lg = 2;
          $slides_to_show_screen_md = 1;
          $slides_to_show_screen_sm = 1;
          break;
      default:
          $slides_to_show_screen_lg = 1;
          $slides_to_show_screen_md = 1;
          $slides_to_show_screen_sm = 1;
          break;
  }

  switch ($max_width_content) {
      case 380:
          $max_width_content_xs = 'max_width_content_xs';
          break;
      case 500:
          $max_width_content_sm = 'max_width_content_sm';
      case 650:
          $max_width_content_md = 'max_width_content_md';
          break;
      case 768:
          $max_width_content_lg = 'max_width_content_lg';
          break;
      case 1024:
          $max_width_content_xl = 'max_width_content_xl';
          break;
      case 1280:
          $max_width_content_2xl = 'max_width_content_2xl';
          break;
      default:
          $max_width_content_default = '';
          break;
  }

  switch ($arrows_position_get) {
      case 'top_left':
          $arrows_position = 'top-left';
          break;
      case 'top_right':
          $arrows_position = 'top-right';
          break;
      case 'bottom_left':
          $arrows_position = 'bottom-left';
          break;
      case 'bottom_right':
          $arrows_position = 'bottom-right';
          break;
      case 'bottom_center':
          $arrows_position = 'bottom-center';
          break;
  }

  switch ($arrows_position_mobile_get) {
      case 'top_left':
          $arrows_position_mobile = 'top-left-mobile';
          break;
      case 'top_right':
          $arrows_position_mobile = 'top-right-mobile';
          break;
      case 'bottom_left':
          $arrows_position_mobile = 'bottom-left-mobile';
          break;
      case 'bottom_right':
          $arrows_position_mobile = 'bottom-right-mobile';
          break;
      case 'bottom_center':
          $arrows_position_mobile = 'bottom-center-mobile';
          break;
  }

  $carousel_options = [
      'dots' => $dots,
      'infinite' => $infinite,
      'autoplay' => $autoplay,
      'autoplaySpeed' => $autoplay_speed,
      'arrows' => $arrows,
      'pauseOnHover' => $pause_on_hover,
      'slidesToShow' => $slides_to_show,
      'spaceBetween' => $slide_padding,
      'prevArrow' => "#{$id} .before-arrow",
      'nextArrow' => "#{$id} .next-arrow",
      'responsive' => [
          'slidesToShowLg' => $slides_to_show_screen_lg,
          'slidesToShowMd' => $slides_to_show_screen_md,
          'slidesToShowSm' => $slides_to_show_screen_sm,
      ],
  ];

  $allowed_blocks = ['slide'];
@endphp

<div id="{{ esc_attr($id) }}" class="{{ esc_attr($className) }} {!! $overflow_hidden ? 'overflow-hidden' : '' !!}">
  <div class="carousel swiper"
    data-swiper="{!! esc_attr(json_encode($carousel_options)) !!}">
    <div class="swiper-wrapper">
      <InnerBlocks allowedBlocks={!! esc_attr(wp_json_encode($allowed_blocks)) !!} />
    </div>
    @if ($dots)
      <div class="swiper-pagination"></div>
    @endif

    @if ($arrows)
      <div class="buttons-wrapper {!! $arrows_position !!} {!! $arrows_position_mobile !!}">
        <div class="swiper-button-prev {{ $before_arrow ? 'mr-1 has-custom-arrow' : '' }}"></div>
        <div class="swiper-button-next {{ $next_arrow ? 'ml-1 has-custom-arrow' : '' }}"></div>
      </div>
    @endif
  </div>


  <style>
    #{{ esc_attr($id) }}.muy-carousel {
      @if ($carousel_color_theme)
      --swiper-theme-color: {!! $carousel_color_theme !!};
      @endif
    }

    #{{ esc_attr($id) }}.muy-carousel .swiper-pagination .swiper-pagination-bullet-active {
      background-color: {!! $carousel_color_theme !!};
    }

    #{{ esc_attr($id) }}.muy-carousel .swiper-pagination .swiper-pagination-bullet {
      border-color: {!! $carousel_color_theme !!};
    }

    #{{ esc_attr($id) }} .swiper-pagination {
      position: relative;
      bottom: {!! $dots_position !!}px;
    }

    #{{ esc_attr($id) }} .swiper-button-prev.has-custom-arrow::after {
      content: '';
      background-image: url('{!! $before_arrow['url'] !!}');
      background-size: cover;
      background-repeat: no-repeat;
      width: 100%;
      height: 100%;
      display: block;
    }

    #{{ esc_attr($id) }} .swiper-button-next.has-custom-arrow::after {
      content: '';
      background-image: url('{!! $next_arrow['url'] !!}');
      background-size: cover;
      background-repeat: no-repeat;
      width: 100%;
      height: 100%;
      display: block;
    }
  </style>

  {{-- @if ($slide_padding)
    <style>
      #{{ esc_attr($id) }} .swiper-slide {
        padding-left: {!! $slide_padding !!}px;
        padding-right: {!! $slide_padding !!}px;
      }
    </style>
  @endif --}}
</div>
