@php
  $configData = Helper::appClasses();
@endphp

@extends('layouts/blankLayout')

@section('title', 'FEST · Mosaico')

@section('page-style')
  <style>
    .fest-mosaic-page {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #05091e;
      overflow: hidden;
    }
    .fest-mosaic-grid {
      display: grid;
      grid-template-columns: repeat(5, minmax(60px, 1fr));
      grid-template-rows: repeat(5, minmax(60px, 1fr));
      gap: 4px;
      width: min(90vw, 640px);
      aspect-ratio: 1 / 1;
    }
    .fest-mosaic-cell {
      position: relative;
      overflow: hidden;
      border-radius: 10px;
      background-color: #0f1635;
      background-size: cover;
      background-position: center;
      transition: transform 0.4s ease, box-shadow 0.4s ease, opacity 0.4s ease;
      opacity: 0.72;
    }
    .fest-mosaic-cell::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at center, transparent 40%, rgba(5, 9, 30, 0.5) 100%);
      pointer-events: none;
    }
    .fest-mosaic-cell.fest-center {
      opacity: 1;
      background-color: #ffffff;
      box-shadow: 0 0 40px rgba(0, 0, 0, 0.55);
    }
    .fest-mosaic-cell.fest-center img {
      position: absolute;
      inset: 12%;
      width: 76%;
      height: auto;
      margin: auto;
      object-fit: contain;
      z-index: 2;
    }
    .fest-mosaic-cell.is-active {
      transform: scale(1.04);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
      opacity: 1;
    }
    @media (max-width: 768px) {
      .fest-mosaic-grid {
        width: min(92vw, 420px);
        gap: 3px;
      }
      .fest-mosaic-cell.fest-center img {
        inset: 16%;
        width: 78%;
      }
    }
  </style>
@endsection

@section('content')
  <div class="fest-mosaic-page">
    <div class="fest-mosaic-grid" id="festMosaicGrid">
      @for ($i = 0; $i < 25; $i++)
        @php $isCenter = $i === 12; @endphp
        <div
          class="fest-mosaic-cell {{ $isCenter ? 'fest-center' : '' }}"
          data-index="{{ $i }}"
        >
          @if ($isCenter)
            <img
              src="{{ asset('assets/img/logo_fest_L.png') }}"
              alt="FEST logo"
            >
          @endif
        </div>
      @endfor
    </div>
  </div>
@endsection

@section('page-script')
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      const grid = document.getElementById('festMosaicGrid');
      if (!grid) return;

      const cells = Array.from(grid.querySelectorAll('.fest-mosaic-cell'))
        .filter(cell => !cell.classList.contains('fest-center'));

      // Sorgenti immagini: aggiungi qui le tue immagini di festa
      const base = '{{ asset('assets/img') }}';
      const images = [
        base + '/cover_login.png',
        base + '/logo_fest_L.png',
      ];

      function randomImageUrl() {
        if (!images.length) return '';
        const idx = Math.floor(Math.random() * images.length);
        return images[idx];
      }

      // Inizializza tutte le celle
      cells.forEach(cell => {
        const url = randomImageUrl();
        if (url) {
          cell.style.backgroundImage = 'url(\"' + url + '\")';
        }
      });

      function tick() {
        if (!cells.length || !images.length) return;
        const cell = cells[Math.floor(Math.random() * cells.length)];
        cell.classList.add('is-active');
        const url = randomImageUrl();
        if (url) {
          cell.style.backgroundImage = 'url(\"' + url + '\")';
        }
        setTimeout(() => {
          cell.classList.remove('is-active');
        }, 450);
      }

      setInterval(tick, 800);
    });
  </script>
@endsection

