{{--
  Template Name: Home
--}}

@extends('layouts.app')

@section('content')

<div class="page__container page__container--no-padding">
    <div class="page__content">

<div class="home-carousel__wrapper">
  <div id="home-carousel" class="carousel carousel--home slide" data-ride="carousel">
    <div class="carousel-inner">
      @if ($cover_media)
        @foreach ($cover_media as $cover_medium)
          @php
            $background_color = '';
            if ($cover_medium['acf_fc_layout'] == 'video')
              $background_color = $cover_medium['background_color'];
          @endphp

          <div class="carousel-item @if ($loop->first) active @endif" @if (!empty($background_color)) style="background-color: {{ $background_color }}" @endif>
          @if ($cover_medium['acf_fc_layout'] == 'image')

            @if (!empty($cover_medium['link']))
            <a href="{{ $cover_medium['link'] }}">
            @endif

            {!! wp_get_attachment_image($cover_medium['desktop_image'], 'full', false, ['class' => 'd-none d-md-block']) !!}
            {!! wp_get_attachment_image($cover_medium['mobile_image'], 'full', false, ['class' => 'd-md-none']) !!}

            @if (!empty($cover_medium['link']))
            </a>
            @endif

          @elseif ($cover_medium['acf_fc_layout'] == 'video')
            @php 
              $has_mobile_video = false;

              if (strpos($cover_medium['desktop_video'], 'vimeo') === false) {
                $is_vimeo = false;
              } else {
                $is_vimeo = true;
              }
            @endphp
            @if (!empty($cover_medium['mobile_video']))
              @php $has_mobile_video = true;  @endphp
              @if ($is_vimeo) 
                <div class="vimeo-player vimeo-player--cover d-block d-md-none vimeo-player--{{ $cover_medium['aspect_ratio'] }}" data-video-id="{{ \App\get_vimeo_id_from_oembed( $cover_medium['mobile_video'] ) }}">
                </div>
              @else
                <div class="mobile-video__container">
                {!! \App\format_iframe($cover_medium['mobile_video'], 'Vídeo mobile') !!}
                </div>
              @endif
            @endif
            @if (!empty($cover_medium['desktop_video']))
              @if ($is_vimeo) 
                <div class="vimeo-player vimeo-player--cover vimeo-player--{{ $cover_medium['aspect_ratio'] }} @if ($has_mobile_video) d-none d-md-block @endif" data-video-id="{{ \App\get_vimeo_id_from_oembed( $cover_medium['desktop_video'] ) }}">
                </div>
              @else
                <div class="desktop-video__container @if (!$has_mobile_video) desktop-video__container--mobile @endif">
                {!! \App\format_iframe($cover_medium['desktop_video'], 'Vídeo desktop') !!}
                </div>
              @endif
            @endif

            @if (!empty($cover_medium['link']))
            <a href="{{ $cover_medium['link'] }}" class="video__link"></a>
            @endif

            @if (!empty($cover_medium['desktop_image']))
            {!! wp_get_attachment_image($cover_medium['desktop_image'], 'full', false, ['class' => 'd-none d-md-block video__poster']) !!}
            @endif

            @if (!empty($cover_medium['mobile_image']))
            {!! wp_get_attachment_image($cover_medium['mobile_image'], 'full', false, ['class' => 'd-md-none video__poster']) !!}
            @endif

            @if (!empty($cover_medium['desktop_image']) || !empty($cover_medium['mobile_image']))
              <img src="{{ Vite::asset('resources/images/play-button.svg') }}" class="video__play" alt="Botão para reproduzir"/>
            @endif

          @endif
          </div>
        @endforeach
      @endif
    </div>
  </div>
  <img class="down-arrow" src="{{ Vite::asset('resources/images/down-arrow.svg') }}" alt="Botão de seta para baixo"/>
</div>

@if ($highlights_rows)
  @foreach ($highlights_rows as $highlights_row)
    @if ($highlights_row['acf_fc_layout'] == 'four_highlights')
    <ul class="highlights">
      @if (!empty($highlights_row['highlights']))
        @foreach ($highlights_row['highlights'] as $highlight)
        <li class="highlight highlight--four" style="background-color: {{ $highlight['background_color'] }}">
          <div class="highlight__content">

          @include('partials.highlight-tag', ['highlight' => $highlight])
          @if ($highlight['image'])
            <div class="highlight__image">
            @if ($highlight['link'])
              <a href="{{ $highlight['link']['url'] }}" aria-label="Ver {{ \App\insert_nbsp_if_needed($highlight['title']) }}">
            @else
              <p>
            @endif
                {!! wp_get_attachment_image($highlight['image'], 'highlight_4') !!}
            @if ($highlight['link'])
              </a>
            @else
              </p>
            @endif
            </div>
          @endif

          <h2 class="highlight__title">
            {!! \App\insert_nbsp_if_needed($highlight['title']) !!}
          </h2>
        </li>
        @endforeach
      @endif
    </ul>
    @elseif ($highlights_row['acf_fc_layout'] == 'three_highlights')
    <ul class="highlights">
      @if (!empty($highlights_row['highlights']))
        @foreach ($highlights_row['highlights'] as $highlight)
        <li class="highlight highlight--three" style="background-color: {{ $highlight['background_color'] }}">
          <div class="highlight__content">

          @include('partials.highlight-tag', ['highlight' => $highlight])
          @if ($highlight['image'])
          <div class="highlight__image">
            @if ($highlight['link'])
            <a href="{{ $highlight['link']['url'] }}" aria-label="Ver {{ \App\insert_nbsp_if_needed($highlight['title']) }}">
            @endif
            {!! wp_get_attachment_image($highlight['image'], 'highlight_3') !!}
            @if ($highlight['link'])
            </a>
            @endif
          </div>
          @endif

          <h2 class="highlight__title">
            {!! \App\insert_nbsp_if_needed($highlight['title']) !!}
          </h2>
          @if (!empty($highlight['subtitle']))
          <p class="highlight__subtitle">
            {!! $highlight['subtitle'] !!}
          </p>
          @endif
        </li>
        @endforeach
      @endif
    </ul>
    @elseif ($highlights_row['acf_fc_layout'] == 'two_highlights')
    <ul class="highlights hightlighs--two">
      @if (!empty($highlights_row['highlights']))
        @foreach ($highlights_row['highlights'] as $highlight)
        <li class="highlight highlight--two" style="background-color: {{ $highlight['background_color'] }}">
          <div class="highlight__content">

          @include('partials.highlight-tag', ['highlight' => $highlight])
          @if ($highlight['image'])
          <div class="highlight__image">
            @if ($highlight['link'])
            <a href="{{ $highlight['link']['url'] }}" aria-label="Ver {{ \App\insert_nbsp_if_needed($highlight['title']) }}">
            @endif
            {!! wp_get_attachment_image($highlight['image'], 'highlight_2') !!}
            @if ($highlight['link'])
            </a>
            @endif
          </div>
          @endif

          <h2 class="highlight__title">
            {!! \App\insert_nbsp_if_needed($highlight['title']) !!}
          </h2>
          @if (!empty($highlight['subtitle']))
          <div class="highlight__subtitle">
            {!! $highlight['subtitle'] !!}
          </div>
          @endif
        </li>
        @endforeach
      @endif
    </ul>
    @endif
  @endforeach
@endif

</div>
</div>

@if (!empty($popup_info) && $popup_info['enabled'])
<div class="popup__container">
  <div class="popup__background"></div>
  <div class="popup" style="border-color: {{ $popup_info['border_color'] }}; background-color: {{ $popup_info['bg_color'] }};">
    <h1 class="popup__title" style="color: {{ $popup_info['text_color'] }};">{!! $popup_info['title'] !!}</h1>
    <div class="popup__text" style="color: {{ $popup_info['text_color'] }};">
      {!! $popup_info['text'] !!}
    </div>
    <a href="#" class="popup__close" aria-label="Fechar popup" style="color: {{ $popup_info['text_color'] }};"></a>
  </div>
</div>
@endif

@endsection