{{--
  Template Name: Benevole
--}}

@extends('layouts.app')

@push('vite-head')
  @vite(['resources/css/pages/benevole.scss', 'resources/js/pages/benevole.ts'])
@endpush

@section('content')
  <section>
    <x-top-content />
  </section>

  @php
    $rejoindreAventure = get_field('section_rejoindre_laventure');

    $liste = $rejoindreAventure['icone_et_texte'];

    $listHtml = '';
    if (count($liste) > 0) {
      $listHtml .= '<ul class="list-icone-texte">';
      foreach ($liste as $item) {
        $listHtml .= '<li>';
        if (! empty($item['icone'])) {
          $listHtml .= '<img src="' . esc_url($item['icone']['url']) . '" alt="' . esc_attr($item['icone']['alt'] ?? '') . '">';
        }
        if (! empty($item['texte'])) {
          $listHtml .= '<span>' . esc_html($item['texte']) . '</span>';
        }
        $listHtml .= '</li>';
      }
      $listHtml .= '</ul>';
    }
  @endphp

  @if (! empty($rejoindreAventure))
    <section class="container">
      <x-columns
        :col_elements="[
          'img'     => $rejoindreAventure['image'] ?? null,
          'titre'   => $rejoindreAventure['titre'] ?? '',
          'texte'   => $rejoindreAventure['texte'] . $listHtml ?? '',
          'boutons' => $rejoindreAventure['boutons'] ?? [],
        ]"
        img_position="img-right"
      />
    </section>
  @endif

  @php
    $missionPossible = get_field('section_missions_possibles');
  @endphp

  @if (! empty($missionPossible))
    <section class="mission bg-secondary container text-light center">
      <h2>{{ $missionPossible['titre'] }}</h2>
      <p>{{ $missionPossible['texte_1'] }}</p>
      <div class="missions-icons">
        @foreach ($missionPossible['icone_et_texte'] as $mission)
          <div class="mission-item">
            @if (! empty($mission['icone']))
              <img
                src="{{ $mission['icone']['url'] }}"
                alt="{{ $mission['icone']['alt'] ?? '' }}"
              />
            @endif

            @if (! empty($mission['texte']))
              <span>{{ $mission['texte'] }}</span>
            @endif
          </div>
        @endforeach
      </div>
      <p>{{ $missionPossible['texte_2'] }}</p>
    </section>
  @endif

  @php
    $rejoindreLequipe = get_field('rejoindre_lequipe');
  @endphp

  @if (! empty($rejoindreLequipe))
    <section class="container bg-primary text-light">
      <div class="mb">
        <x-columns
          :col_elements="[
            'img'     => $rejoindreLequipe['image'] ?? null,
            'titre'   => $rejoindreLequipe['titre'] ?? '',
            'texte'   => $rejoindreLequipe['texte'] ?? '',
            'boutons' => $rejoindreLequipe['boutons'] ?? [],
          ]"
          btn_1_class="bg-secondary arrow-primary"
          img_position="img-right"
        />
      </div>
    </section>
  @endif

  <section class="top-wave container">
    <x-instagram-feed />
  </section>

  <div
    id="devenir-benevole"
    class="partner-modal"
    aria-hidden="true"
    role="dialog"
    aria-modal="true"
  >
    <div class="partner-modal__backdrop" data-benevole-modal-close></div>
    <div class="partner-modal__content" role="document">
      <button
        type="button"
        class="partner-modal__close"
        aria-label="{{ __('Fermer le formulaire', 'anes-tetues') }}"
        data-benevole-modal-close
      >
        &times;
      </button>
      <h2 class="partner-modal__title">{{ __('Devenir bénévole', 'anes-tetues') }}</h2>
      <div class="partner-modal__form">
        {!! do_shortcode('[contact-form-7 id="d260b66" title="Devenir Benevole"]') !!}
      </div>
    </div>
  </div>
@endsection