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

@extends('layouts/guest')

@section('title', 'Menu - '.$menu->nome)

@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 {
    background-color: #cee2eb;
    background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%2390b5c4' stroke-width='1'%3E%3Ccircle cx='20' cy='20' r='18'/%3E%3Ccircle cx='60' cy='20' r='18'/%3E%3Ccircle cx='20' cy='60' r='18'/%3E%3Ccircle cx='60' cy='60' r='18'/%3E%3C/g%3E%3C/svg%3E");
  }

  .menu-board-wrapper {
    background: transparent;
  }

  .menu-board {
    background-color: rgba(255, 255, 255, 0.82);
    border-radius: 1.5rem;
    padding: 3rem 4rem;
    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-column-title {
    letter-spacing: .18em;
    font-size: 1.1rem;
    text-transform: uppercase;
    color: #0f627a;
  }

  .menu-section-title {
    font-size: .95rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    margin-bottom: .35rem;
    color: #0f627a;
  }

  .menu-item-name {
    font-size: .92rem;
    font-weight: 500;
    color: #084b5e;
  }

  .menu-item-note {
    font-size: .8rem;
    font-style: italic;
    color: #3b6f82;
  }

  .menu-item-price {
    font-size: .9rem;
    font-weight: 500;
    color: #0f627a;
    white-space: nowrap;
  }

  .menu-separator {
    border-left: 1px solid rgba(8, 75, 94, .12);
  }

  @media (max-width: 991.98px) {
    .menu-board {
      padding: 2rem 1.75rem;
    }

    .menu-separator {
      border-left: 0;
      border-top: 1px solid rgba(8, 75, 94, .12);
      margin-top: 1.5rem;
      padding-top: 1.5rem;
    }
  }

  body {
    background-color: #cce7f1 !important;
  }

  .footer-link {
    color: #084b5e !important;
  }

  .btn-primary {
    background-color: #084b5e !important;
    color: #fff !important;
  }

  /*
    Sfond elegante carta da parati, raffinato e fine:
    motivo geometrico molto sottile, rombi e puntini azzurro chiaro,
    motivo più piccolo per risultare più delicato.
  */
  body.layout-navbar-fixed,
  body {
    background-color: #e6f2fa !important;
    transition: background-image 1s linear;
    background-image: var(--dynamic-bg, url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='40' height='40' fill='none'/%3E%3Cpolygon points='20,2 38,20 20,38 2,20' stroke='%2390b5c4' stroke-width='0.5' fill='none'/%3E%3Ccircle cx='20' cy='20' r='1.1' fill='%23b6d3e4'/%3E%3Ccircle cx='10' cy='10' r='0.6' fill='%23b6d3e4'/%3E%3Ccircle cx='30' cy='10' r='0.6' fill='%23b6d3e4'/%3E%3Ccircle cx='10' cy='30' r='0.6' fill='%23b6d3e4'/%3E%3Ccircle cx='30' cy='30' r='0.6' fill='%23b6d3e4'/%3E%3C/svg%3E"));
    background-repeat: repeat;
    background-size: 48px 48px;
    background-attachment: fixed;
  }

  /* Animazione ciclica della forma degli elementi di sfondo via JS */
</style>

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

<div class="w-75 mx-auto container-xxl flex-grow-1 container-p-y menu-board-wrapper">
  <!-- <div class="row">
          <div class="col-md-12 text-center">
            <img src="{{ asset('assets/img/logoRSAPiccinelli.png') }}" class="img-fluid h-px-250 mb-2">
          </div>
        </div> -->

  <div class="w-60 mx-auto" style="justify-self: anchor-center;">
    @include('layouts/logo_svg')
  </div>
  <div class="w-60 menu-board mx-auto">
    @php
    $piattiPerCategoria = $menu->piatti->where('disponibile', true)->groupBy(fn($p) => $p->categoria?->nome ?? 'Senza
    categoria');
    @endphp

    <div class="row gy-4">
      <div class="col-12">
        <div class="text-center mb-4">
          <span class="menu-column-title d-block mb-1">{{ strtoupper($menu->nome) }}</span>
          @if(!empty($menu->descrizione))
          <p class="menu-item-note mb-1">{{ $menu->descrizione }}</p>
          @endif
          <div class="menu-item-note">
            @if($menu->fisso)
            @if($menu->data_inizio && $menu->data_fine && $menu->data_inizio->ne($menu->data_fine))
            Dal {{ $menu->data_inizio->format('d/m') }} al {{ $menu->data_fine->format('d/m') }}
            @elseif($menu->data_inizio)
            Valido il {{ $menu->data_inizio->format('d/m') }}
            @endif
            @endif
          </div>
        </div>
      </div>

      <div class="col-12 col-lg-10 offset-lg-1">
        @if($piattiPerCategoria->isEmpty())
        <p class="text-center text-muted mb-0">Nessun piatto associato a questo menu.</p>
        @else
        @foreach($piattiPerCategoria as $nomeCategoria => $piatti)
        <div class="mb-8">
          @if($nomeCategoria !== 'Senza categoria')
          <div class="menu-section-title mb-2 text-center text-lg-start" style="    font-weight: bolder;
    font-size: larger;">{{ $nomeCategoria }}</div>
          @endif
          <ul class="list-unstyled mb-0">
            @foreach($piatti as $piatto)
            <li class="d-flex justify-content-between align-items-baseline mb-3">
              <div class="w-70 row">
                <span class="menu-item-name" style="word-break: auto-phrase;">{{ $piatto->nome }}</span>
                @if(!empty($piatto->descrizione))
                <div class="small text-muted menu-item-description">{{ $piatto->descrizione }}</div>
                @endif
                @if($piatto->elencoAllergeni->isNotEmpty())

                <small>
                  <i class="bx bxs-info-circle" style="color: #0f627a;" title="Info allergeni"></i>
                  {{ $piatto->elencoAllergeni->pluck('nome')->implode(', ') }}
                  {{-- @include('menu/partials/allergeni') --}}
                  {{-- <i class="fas fa-info-circle" style="color: #0f627a;" title="Info allergeni"></i> --}}
                </small>
                @endif
              </div>
              <span class="menu-item-price">€ {{ number_format($piatto->prezzo, 2, ',', '') }}</span>
              <!-- <div class="menu-item-allergeni"> -->
              <!-- @if($piatto->elencoAllergeni->isNotEmpty())
                     <i class="fas fa-info-circle" style="color: #0f627a;" title="Info allergeni"></i>
                   @endif -->
              <!-- </div> -->
              <!-- @if($piatto->elencoAllergeni->isNotEmpty())
                      <div class="menu-item-allergeni">
                        @foreach($piatto->elencoAllergeni as $allergene)
                          <span class="badge bg-primary">{{ $allergene->nome }}</span>
                        @endforeach
</div>
                    @endif -->
            </li>
            @endforeach
          </ul>
        </div>
        @endforeach
        @endif
      </div>
    </div>

    <div class="text-center mt-4">
      <a href="{{ route('welcome') }}" class="btn btn-primary">
        <i class="bx bx-home me-1"></i>Torna alla home
      </a>
    </div>

  </div>

</div>




@endsection