@php
  use Illuminate\Support\Facades\Route;
  use Illuminate\Support\Str;
  $configData = Helper::appClasses();
  $registerUrl = Route::has('register') ? route('register') : url('auth/register-cover');
@endphp

@extends('layouts/guest')

@section('title', 'Bacheca eventi')

@section('page-meta')
  <script>document.documentElement.classList.add('welcome-bacheca-page');</script>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap" rel="stylesheet" />
@endsection

@section('page-style')
  @vite(['resources/css/welcome.css'])
@endsection

@section('content')
  <div class="welcome-bacheca__bg" data-bg="bold" aria-hidden="true">
    <div class="welcome-bacheca__bg-stripe"></div>
    <div class="welcome-bacheca__bg-pattern"></div>
    <div class="welcome-bacheca__bg-glow welcome-bacheca__bg-glow--orange"></div>
    <div class="welcome-bacheca__bg-glow welcome-bacheca__bg-glow--purple"></div>
    <div class="welcome-bacheca__bg-glow welcome-bacheca__bg-glow--navy"></div>
  </div>

  <div class="welcome-bacheca">
    <header class="welcome-bacheca__masthead" aria-labelledby="bacheca-title">
      <div class="welcome-bacheca__masthead-row">
        <div class="welcome-bacheca__brand">
          <img
            src="{{ asset('assets/img/logo_fest_L.png') }}"
            alt="{{ config('app.name') }}"
            class="welcome-bacheca__logo"
            width="200"
            height="60"
          >
        </div>
        <div class="welcome-bacheca__masthead-actions">
          <a href="{{ route('login') }}" class="welcome-bacheca__btn welcome-bacheca__btn--ghost">
            <i class="bx bx-log-in"></i>
            Accedi
          </a>
          <a href="{{ $registerUrl }}" class="welcome-bacheca__btn welcome-bacheca__btn--primary">
            Registrati
          </a>
        </div>
      </div>
      <div class="welcome-bacheca__masthead-body">
        <p class="welcome-bacheca__eyebrow">
          <span class="welcome-bacheca__live-dot" aria-hidden="true"></span>
          Bacheca eventi
        </p>
        <h1 id="bacheca-title" class="welcome-bacheca__title">
          Scopri le attività in programma
        </h1>
        <p class="welcome-bacheca__lead">
          Sagre, feste e rassegne attive: tocca un’attività per ordini, prenotazioni e servizi dedicati.
        </p>
      </div>
    </header>
    @if($attivitaAttive->isEmpty())
      <div class="welcome-bacheca__empty">
        <div class="welcome-bacheca__empty-icon">
          <i class="bx bx-calendar-event"></i>
        </div>
        <h2 class="welcome-bacheca__empty-title">Nessuna attività in bacheca</h2>
        <p class="welcome-bacheca__empty-text">Al momento non ci sono eventi pubblicati. Torna a trovarci presto.</p>
        <a href="{{ route('login') }}" class="welcome-bacheca__btn welcome-bacheca__btn--primary">
          Area operatore
        </a>
      </div>
    @else
      <section class="welcome-bacheca__board" aria-label="Attività in programma">
        <div class="welcome-bacheca__board-head">
          <h2 class="welcome-bacheca__board-title">
            <i class="bx bx-pin"></i>
            In programma
          </h2>
        </div>

        <div class="welcome-bacheca__grid" role="list">
          @foreach($attivitaAttive as $index => $attivita)
            @php
              $accent = $attivita->colore ?: '#f58220';
              $logoUrl = $attivita->logoUrl();
              $coverUrl = $attivita->coverUrl();
              $isFeatured = $index === 0 && $attivitaAttive->count() > 1;
            @endphp
            <article
              class="welcome-bacheca__card {{ $isFeatured ? 'welcome-bacheca__card--featured' : '' }}"
              role="listitem"
            >
              <button
                type="button"
                class="welcome-bacheca__card-hit"
                data-attivita-id="{{ $attivita->id }}"
                data-attivita-nome="{{ $attivita->nome }}"
                data-attivita-descrizione="{{ $attivita->descrizione ?? '' }}"
                data-attivita-logo="{{ $logoUrl ?? '' }}"
                data-attivita-iniziali="{{ $attivita->iniziali() }}"
                data-attivita-accent="{{ $accent }}"
                data-saltacoda-url="{{ route('cliente.saltacoda.show', ['attivita_id' => $attivita->id]) }}"
                style="--card-accent: {{ $accent }}"
              >
                <span class="welcome-bacheca__card-pin" aria-hidden="true"><i class="bx bxs-pin"></i></span>

                <div class="welcome-bacheca__card-cover">
                  @if($coverUrl)
                    <img src="{{ $coverUrl }}" alt="" class="welcome-bacheca__card-cover-img" loading="lazy">
                  @endif
                  <div class="welcome-bacheca__card-cover-shade"></div>
                  <div class="welcome-bacheca__card-cover-logo">
                    @if($logoUrl)
                      <img
                        src="{{ $logoUrl }}"
                        alt=""
                        loading="lazy"
                        onerror="this.hidden=true; this.nextElementSibling.hidden=false;"
                      >
                      <span class="welcome-bacheca__card-avatar" hidden>{{ $attivita->iniziali() }}</span>
                    @else
                      <span class="welcome-bacheca__card-avatar">{{ $attivita->iniziali() }}</span>
                    @endif
                  </div>
                </div>

                <div class="welcome-bacheca__card-content">
                  <div class="welcome-bacheca__card-meta">
                    <span class="welcome-bacheca__card-badge">In programma</span>
</div>
                  <h3 class="welcome-bacheca__card-title">{{ $attivita->nome }}</h3>
                  @if(filled($attivita->descrizione))
                    <p class="welcome-bacheca__card-desc">{{ Str::limit($attivita->descrizione, 120) }}</p>
                  @else
                    <p class="welcome-bacheca__card-desc welcome-bacheca__card-desc--muted">Tocca per scoprire servizi e prenotazioni.</p>
                  @endif
                  <a class="welcome-bacheca__card-cta" href="{{ route('cliente.attivita.show', ['attivita_id' => $attivita->id]) }}">
                    Apri scheda
                    <i class="bx bx-right-arrow-alt"></i>
                  </a>
                </div>
              </button>
            </article>
          @endforeach
        </div>
      </section>
    @endif

    <footer class="welcome-bacheca__footer">
      {{ config('app.name') }} · la bacheca digitale per feste e sagre
    </footer>
  </div>

  <div class="modal fade" id="welcomeAttivitaModal" tabindex="-1" aria-labelledby="welcomeAttivitaModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content welcome-bacheca__modal">
        <div class="modal-header border-0 pb-0">
          <div class="welcome-bacheca__modal-head">
            <span class="welcome-bacheca__modal-media" id="welcomeModalMedia"></span>
            <div>
              <h5 class="modal-title welcome-bacheca__modal-title" id="welcomeAttivitaModalLabel"></h5>
              <p class="welcome-bacheca__modal-desc mb-0" id="welcomeModalDesc"></p>
            </div>
          </div>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Chiudi"></button>
        </div>
        <div class="modal-body pt-3">
          <p class="welcome-bacheca__modal-hint">Cosa vuoi fare?</p>
          <div class="welcome-bacheca__modal-actions">
            <a href="#" class="welcome-bacheca__action" id="welcomeActionSaltacoda" data-action="saltacoda">
              <span class="welcome-bacheca__action-icon welcome-bacheca__action-icon--orange">
                <i class="bx bx-food-menu"></i>
              </span>
              <span>
                <strong>Ordina (saltacoda)</strong>
                <small>Menu e ordine dal telefono</small>
              </span>
            </a>
            <button type="button" class="welcome-bacheca__action is-disabled" disabled data-action="prenotazione">
              <span class="welcome-bacheca__action-icon">
                <i class="bx bx-calendar-check"></i>
              </span>
              <span>
                <strong>Prenotazioni</strong>
                <small>Prossimamente</small>
              </span>
            </button>
            <button type="button" class="welcome-bacheca__action is-disabled" disabled data-action="evento">
              <span class="welcome-bacheca__action-icon welcome-bacheca__action-icon--purple">
                <i class="bx bx-party"></i>
              </span>
              <span>
                <strong>Eventi</strong>
                <small>Prossimamente</small>
              </span>
            </button>
            <a href="{{ route('login') }}" class="welcome-bacheca__action" data-action="login">
              <span class="welcome-bacheca__action-icon welcome-bacheca__action-icon--navy">
                <i class="bx bx-log-in"></i>
              </span>
              <span>
                <strong>Area operatore</strong>
                <small>Accedi per gestire l’attività</small>
              </span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection

@section('page-script')
<script>
(function () {
  const modalEl = document.getElementById('welcomeAttivitaModal');
  if (!modalEl) return;

  const modal = bootstrap.Modal.getOrCreateInstance(modalEl);
  const titleEl = document.getElementById('welcomeAttivitaModalLabel');
  const descEl = document.getElementById('welcomeModalDesc');
  const mediaEl = document.getElementById('welcomeModalMedia');
  const saltacodaLink = document.getElementById('welcomeActionSaltacoda');

  function renderAvatar(iniziali) {
    mediaEl.innerHTML = '';
    const span = document.createElement('span');
    span.className = 'welcome-bacheca__modal-avatar';
    span.textContent = iniziali || '?';
    mediaEl.appendChild(span);
  }

  function renderMedia(logo, iniziali, accent) {
    mediaEl.innerHTML = '';
    mediaEl.style.setProperty('--card-accent', accent || '#f58220');

    if (logo) {
      const img = document.createElement('img');
      img.src = logo;
      img.alt = '';
      img.className = 'welcome-bacheca__modal-logo';
      img.onerror = function () {
        renderAvatar(iniziali);
      };
      mediaEl.appendChild(img);
    } else {
      renderAvatar(iniziali);
    }
  }

  document.querySelectorAll('.welcome-bacheca__card-hit').forEach(function (card) {
    card.addEventListener('click', function () {
      const nome = card.dataset.attivitaNome || '';
      const descrizione = card.dataset.attivitaDescrizione || '';
      const logo = card.dataset.attivitaLogo || '';
      const iniziali = card.dataset.attivitaIniziali || '?';
      const accent = card.dataset.attivitaAccent || '#f58220';
      const saltacodaUrl = card.dataset.saltacodaUrl || '#';

      titleEl.textContent = nome;
      descEl.textContent = descrizione;
      descEl.hidden = !descrizione;

      renderMedia(logo, iniziali, accent);
      saltacodaLink.href = saltacodaUrl;

      modal.show();
    });
  });
})();
</script>
@endsection
