<?php
use App\Models\Role;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Str;
?>
@php
$configData = Helper::appClasses();
@endphp

@extends('layouts/guest')

@section('title', 'Benvenut@')

@section('vendor-style')
@vite([
'resources/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.scss',
'resources/assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.scss',
'resources/assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.scss',
'resources/assets/vendor/libs/flatpickr/flatpickr.scss',
'resources/assets/vendor/libs/@form-validation/form-validation.scss'
])
@endsection

<!-- Vendor Scripts -->
@section('vendor-script')
@vite([
'resources/assets/vendor/libs/moment/moment.js',
'resources/assets/vendor/libs/flatpickr/flatpickr.js',
'resources/assets/vendor/libs/@form-validation/popular.js',
'resources/assets/vendor/libs/@form-validation/bootstrap5.js',
'resources/assets/vendor/libs/@form-validation/auto-focus.js',
'resources/assets/vendor/libs/@form-validation/popular.js',
'resources/assets/vendor/libs/@form-validation/bootstrap5.js',
'resources/assets/vendor/libs/@form-validation/auto-focus.js',
'resources/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js'
])
@endsection

@section('content')
<style>
  body.layout-navbar-fixed,
  body {
    background-color: #cee2eb !important;
  }

  .menu-pattern-layer {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-color: #cee2eb;
    background-repeat: repeat;
    background-size: 48px 48px;
    background-position: center center;
    opacity: 1;
    transition: opacity .45s ease;
  }

  .menu-pattern-layer.is-fading {
    opacity: 0;
  }

  .menu-pattern-layer.pattern-1 {
    background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24 4L44 24L24 44L4 24Z' stroke='%2392b8c8' stroke-width='.7' fill='none'/%3E%3Cpath d='M24 10L38 24L24 38L10 24Z' stroke='%23bfd8e5' stroke-width='.55' fill='none'/%3E%3Ccircle cx='24' cy='24' r='1.5' fill='%23bfd8e5'/%3E%3C/svg%3E");
  }

  .menu-pattern-layer.pattern-2 {
    background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='24' cy='24' r='15.2' stroke='%2392b8c8' stroke-width='.8'/%3E%3Ccircle cx='24' cy='24' r='2.8' fill='%23bfd8e5'/%3E%3Ccircle cx='12' cy='12' r='1.1' fill='%23bfd8e5'/%3E%3Ccircle cx='36' cy='12' r='1.1' fill='%23bfd8e5'/%3E%3Ccircle cx='12' cy='36' r='1.1' fill='%23bfd8e5'/%3E%3Ccircle cx='36' cy='36' r='1.1' fill='%23bfd8e5'/%3E%3C/svg%3E");
  }

  .menu-pattern-layer.pattern-3 {
    background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24 3L42 14V34L24 45L6 34V14L24 3Z' stroke='%2392b8c8' stroke-width='.75' fill='none'/%3E%3Cpath d='M24 10L36 17V31L24 38L12 31V17L24 10Z' stroke='%23bfd8e5' stroke-width='.55' fill='none'/%3E%3Ccircle cx='24' cy='24' r='1.35' fill='%23bfd8e5'/%3E%3C/svg%3E");
  }

  .menu-pattern-layer.pattern-4 {
    background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='24' cy='24' r='1.15' fill='%23b7d6e4'/%3E%3Ccircle cx='12' cy='12' r='0.75' fill='%23b7d6e4'/%3E%3Ccircle cx='36' cy='12' r='0.75' fill='%23b7d6e4'/%3E%3Ccircle cx='12' cy='36' r='0.75' fill='%23b7d6e4'/%3E%3Ccircle cx='36' cy='36' r='0.75' fill='%23b7d6e4'/%3E%3Ccircle cx='24' cy='6' r='0.55' fill='%23b7d6e4'/%3E%3Ccircle cx='24' cy='42' r='0.55' fill='%23b7d6e4'/%3E%3C/svg%3E");
  }

  .menu-pattern-layer.pattern-5 {
    background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24 4L42 35H6L24 4Z' stroke='%2392b8c8' stroke-width='.75' fill='none'/%3E%3Cpath d='M24 13L35 32H13L24 13Z' stroke='%23bfd8e5' stroke-width='.55' fill='none'/%3E%3Ccircle cx='24' cy='24' r='1.15' fill='%23bfd8e5'/%3E%3C/svg%3E");
  }

  .menu-board-wrapper {
    position: relative;
    z-index: 1;
    background: transparent;
  }

  .menu-board {
    background-color: rgba(255, 255, 255, 0.82);
    border-radius: 1.5rem;
    padding: 2.5rem 3rem;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3);
    font-family: "Public Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }

  .menu-header {
    letter-spacing: .18em;
    font-size: 1.15rem;
    text-transform: uppercase;
    color: #0f627a;
  }

  .menu-subtitle {
    color: #3b6f82;
    font-style: italic;
    font-size: .85rem;
  }

  .menu-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-radius: 1rem;
    background: rgba(255,255,255,.72);
  }

  .menu-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.25rem 1rem rgba(0,0,0,.08) !important;
  }

  .menu-card-title {
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #084b5e;
  }

  .menu-card-date {
    color: #3b6f82;
    font-size: .82rem;
  }

  .menu-card-price {
    color: #0f627a;
    font-weight: 600;
  }
</style>

@if(session('status'))
<div class="alert alert-success">
  {{ session('status') }}
</div>
@endif

@php
  $menus = \App\Models\Menu::where('disponibile', true)
    ->with(['piatti' => fn($q) => $q->where('disponibile', true)->with('categoria')])
    ->get();
@endphp

<div class="menu-pattern-layer pattern-1" aria-hidden="true"></div>

<div class="container-xxl flex-grow-1 container-p-y menu-board-wrapper">
  <div class="menu-board mx-auto">
    <div class="text-center mb-4">
      <div class="w-60 mx-auto mb-3" style="justify-self: anchor-center;">
        @include('layouts/logo_svg')
      </div>
      <h4 class="menu-header mb-2">Benvenut@</h4>
      <p class="menu-subtitle mb-0">Seleziona un menu per vedere i dettagli.</p>
    </div>

  @if($menus->isEmpty())
    <div class="card border-0 shadow-sm">
      <div class="card-body text-center py-5">
        <i class="bx bx-restaurant bx-lg text-muted mb-3 d-block"></i>
        <p class="text-muted mb-0">Nessun menu disponibile al momento.</p>
      </div>
    </div>
  @else
    <div class="row g-4">
      @foreach($menus as $menu)
        <div class="col-12 col-sm-6 col-lg-4 col-xxl-3">
          <a href="{{ route('menu.show', ['menu_id' => $menu->id]) }}" class="text-decoration-none text-body">
            <div class="card h-100 border-0 shadow-sm menu-card">
              <div class="card-body d-flex flex-column justify-content-between">
                <div class="mb-3">
                  <h5 class="card-title mb-2 menu-card-title">{{ $menu->nome }}</h5>
                  @if(!empty($menu->descrizione))
                    <p class="text-muted small mb-0">{{ Str::limit($menu->descrizione, 80) }}</p>
                  @endif
                </div>

                <div class="d-flex justify-content-between align-items-center">
                  <small class="menu-card-date">
                    <!-- @if($menu->data_inizio && $menu->data_fine && $menu->data_inizio->ne($menu->data_fine))
                      {{ $menu->data_inizio->format('d/m') }} – {{ $menu->data_fine->format('d/m') }}
                    @elseif($menu->data_inizio)
                      {{ $menu->data_inizio->format('d/m/Y') }}
                    @endif -->
                  </small>
                  @if(isset($menu->prezzo) &&  $menu->fisso)
                    <span class="badge bg-label-success rounded-pill menu-card-price">da € {{ number_format($menu->prezzo, 2, ',', '') }}</span>
                  <!-- @elseif($menu->fisso && isset($menu->prezzo))
                    <span class="badge bg-label-primary rounded-pill menu-card-price">€ {{ number_format($menu->prezzo, 2, ',', '') }}</span> -->
                  @endif
                </div>
              </div>
            </div>
          </a>
        </div>
      @endforeach
    </div>
  @endif
  </div>
</div>

@section('page-script')
<script>
  document.addEventListener('DOMContentLoaded', function () {
    const layer = document.querySelector('.menu-pattern-layer');

    if (!layer) {
      return;
    }

    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
      return;
    }

    const patterns = ['pattern-1', 'pattern-2', 'pattern-3', 'pattern-4', 'pattern-5'];
    let activePattern = 0;

    window.setInterval(function () {
      layer.classList.add('is-fading');

      window.setTimeout(function () {
        layer.classList.remove(patterns[activePattern]);
        activePattern = (activePattern + 1) % patterns.length;
        layer.classList.add(patterns[activePattern]);
        layer.classList.remove('is-fading');
      }, 450);
    }, 12000);
  });
</script>
@endsection



@endsection

