@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', config('app.name'))

@section('page-meta')
  <script>document.documentElement.classList.add('welcome-bacheca-page');</script>
@endsection

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

@section('content')
  {{-- Prova sfondo: data-bg="soft" | "bold" | rimuovi attributo = colorato standard --}}
  <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__header">
      <div class="welcome-bacheca__brand">
        <img
          src="{{ asset('assets/img/logo_fest_L.png') }}"
          alt="{{ config('app.name') }}"
          class="welcome-bacheca__logo"
          width="240"
          height="72"
        >
      </div>
      <div class="welcome-bacheca__header-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">
          <i class="bx bx-user-plus"></i>
          Registrati
        </a>
      </div>
    </header>

    <section class="welcome-bacheca__intro">
      <h1 class="welcome-bacheca__title">Attività in corso</h1>
      <p class="welcome-bacheca__lead">
        Scegli un’attività per accedere ai servizi pubblici: ordini, prenotazioni ed eventi.
      </p>
    </section>

    @if($attivitaAttive->isEmpty())
      <div class="welcome-bacheca__empty">
        <i class="bx bx-store-alt"></i>
        <p>Nessuna attività attiva al momento.</p>
        <a href="{{ route('login') }}" class="welcome-bacheca__btn welcome-bacheca__btn--primary">
          Accedi come operatore
        </a>
      </div>
    @else
      <div class="welcome-bacheca__grid" role="list">
        @foreach($attivitaAttive as $attivita)
          @php
            $accent = $attivita->colore ?: '#f58220';
            $logoUrl = $attivita->logoUrl();
          @endphp
          <button
            type="button"
            class="welcome-bacheca__card"
            role="listitem"
            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-accent" aria-hidden="true"></span>
            <span class="welcome-bacheca__card-media">
              @if($logoUrl)
                <img
                  src="{{ $logoUrl }}"
                  alt=""
                  class="welcome-bacheca__card-logo"
                  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
            </span>
            <span class="welcome-bacheca__card-body">
              <span class="welcome-bacheca__card-badge">Attiva</span>
              <span class="welcome-bacheca__card-title">{{ $attivita->nome }}</span>
              @if(filled($attivita->descrizione))
                <span class="welcome-bacheca__card-desc">{{ Str::limit($attivita->descrizione, 100) }}</span>
              @endif
            </span>
            <span class="welcome-bacheca__card-cta" aria-hidden="true">
              <i class="bx bx-chevron-right"></i>
            </span>
          </button>
        @endforeach
      </div>
    @endif

    <footer class="welcome-bacheca__footer">
      {{ config('app.name') }} · gestionale 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').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
