<?php
use App\Models\Role;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Storage;
?>
@php
$configData = Helper::appClasses();
$galleriaItems = is_array($galleria) ? $galleria : [];
@endphp

@extends('layouts/layoutMaster')

@section('title', 'Eventi')

@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',
'resources/assets/vendor/libs/swiper/swiper.scss',
])
@endsection

@section('page-style')
@vite(['resources/assets/vendor/scss/pages/ui-carousel.scss'])
@endsection

@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/datatables-bs5/datatables-bootstrap5.js',
'resources/assets/vendor/libs/swiper/swiper.js',
])
@endsection

@section('pageTitle')
<div class="d-flex flex-column">
  <h4 class="mb-1"><i class="bx bx-calendar-check"></i> Eventi</h4>
</div>
@endsection

@section('content')
<style>
  div.upload button:first-child{
    display: none !important;
  }
  .bx-chef-hat{
    --svg: url("data:image/svg+xml,%3csvg width='24' height='24' fill='currentColor' viewBox='0 0 24 24' transform='' xmlns='http://www.w3.org/2000/svg'%3e%3c!--Boxicons v3.0.8 https://boxicons.com %7c License https://docs.boxicons.com/free--%3e%3cpath d='M17.13 5.54C16.33 3.42 14.32 2 12 2S7.67 3.42 6.87 5.54A5.506 5.506 0 0 0 2 11c0 2.07 1.18 3.95 3 4.88V18c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-2.12c1.82-.93 3-2.81 3-4.88 0-2.82-2.13-5.15-4.87-5.46m.53 8.75c-.4.14-.67.52-.67.94v1.78H7v-1.78c0-.42-.27-.8-.67-.94-1.4-.5-2.33-1.82-2.33-3.28 0-1.93 1.57-3.5 3.42-3.5.04 0 .14.01.18.02.49 0 .9-.31 1-.78.36-1.61 1.76-2.73 3.41-2.73s3.05 1.12 3.41 2.73c.1.47.51.81 1 .78.06 0 .12 0 .09-.01 1.93 0 3.5 1.57 3.5 3.5 0 1.47-.94 2.79-2.33 3.28ZM5 20h14v2H5z'%3e%3c/path%3e%3c/svg%3e");
  }
</style>

@include('_partials.status')

<div class="row justify-content-center">
  <div class="col-xxl mb-4 mt-2">
    <div class="card">
      <div class="card-body">
        <div class="col-12">
          <h6 class="text-muted mt-4">Thumbs Gallery</h6>

          @if(count($galleriaItems) > 0)
          <div id="swiper-gallery">
            <div class="swiper gallery-top">
              <div class="swiper-wrapper">
                @foreach($galleriaItems as $key => $foto)
                  <div class="swiper-slide" style="background-image:url({{ Storage::disk('eventi')->url($foto['path']) }})">Slide {{ $key + 1 }}</div>
                @endforeach
              </div>
              <div class="swiper-button-next swiper-button-white"></div>
              <div class="swiper-button-prev swiper-button-white"></div>
            </div>
            <div class="swiper gallery-thumbs">
              <div class="swiper-wrapper">
                @foreach($galleriaItems as $key => $foto)
                  <div class="swiper-slide" style="background-image:url({{ Storage::disk('eventi')->url($foto['path']) }})">{{ $foto['nome'] ?? 'Foto '.($key + 1) }}</div>
                @endforeach
              </div>
            </div>
          </div>
          @else
          <div class="text-center py-5 text-muted border rounded">
            <p class="mb-3">Nessuna foto in galleria.</p>
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#uploadFotoModal">
              <i class="bx bx-plus"></i> Aggiungi la prima foto
            </button>
          </div>
          @endif

          @if(count($galleriaItems) > 0)
          <div class="text-center mt-3">
            <button type="button" class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#uploadFotoModal">
              <i class="bx bx-plus"></i> Aggiungi foto
            </button>
          </div>
          @endif
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Modal per caricare una nuova foto -->
<div class="modal fade" id="uploadFotoModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <form id="form-upload-foto" enctype="multipart/form-data" method="POST" action="{{ route('evento.gallery.upload', ['evento_id' => $evento->id]) }}">
      @csrf
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Carica una nuova foto</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Chiudi"></button>
        </div>
        <div class="modal-body">
          <div class="mb-3">
            <label for="uploadFotoFile" class="form-label">Seleziona una foto</label>
            <input class="form-control" type="file" id="uploadFotoFile" name="file" accept="image/*" required>
          </div>
          <div class="mb-3">
            <label for="uploadFotoNome" class="form-label">Nome foto <span class="text-muted">(opzionale)</span></label>
            <input type="text" id="uploadFotoNome" name="nome" class="form-control" placeholder="Nome descrittivo (facoltativo)">
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Annulla</button>
          <button type="submit" class="btn btn-primary">Carica foto</button>
        </div>
      </div>
    </form>
  </div>
</div>

@endsection

@section('page-script')
@if(count($galleriaItems) > 0)
@vite(['resources/assets/js/ui-carousel.js'])
@endif
@endsection
