

<?php $__env->startSection('title', $event->titulo); ?>

<?php $__env->startPush('head'); ?>
<style>
  /* Tamaños del carrusel multi-imagen (más grandes) */
  .multi-slide img {
    aspect-ratio: 1/1;
    object-fit: cover;
    height: 220px; /* antes 180px */
  }
  @media (min-width: 768px) { .multi-slide img { height: 260px; } }
  @media (min-width: 992px) { .multi-slide img { height: 300px; } }

  /* Miniaturas inferiores más pequeñas con efecto hover */
  .mini-thumb img {
    aspect-ratio: 1/1;
    object-fit: cover;
    height: 70px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border 0.3s ease;
    border: 2px solid transparent;
  }
  @media (min-width: 768px) { .mini-thumb img { height: 80px; } }
  @media (min-width: 992px) { .mini-thumb img { height: 90px; } }

  /* Efecto hover */
  .mini-thumb img:hover {
    transform: scale(1.05);
    border-color: #fff;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
  }

  /* Caja con leve fondo para legibilidad sobre fondos muy vivos */
  .backdrop-pad { 
    background: rgba(0,0,0,.18); 
    border-radius: 1rem; 
    padding: 1rem; 
  }
</style>
<?php $__env->stopPush(); ?>

<?php $__env->startSection('content'); ?>
  <?php
    // Color de respaldo configurado por el admin (opcional)
    $bgStyle = $event->bg_color ? "--bg-fallback: {$event->bg_color};" : '';
    // Si hay imagen de fondo subida, úsala. Si no, usa el color de respaldo o el background del layout.
    $wrapperStyle = $bgStyle;
    if (!empty($event->bg_image_path)) {
        $wrapperStyle .= "background: url('".asset('storage/'.$event->bg_image_path)."') center/cover no-repeat fixed;";
    } elseif (!empty($event->bg_color)) {
        $wrapperStyle .= "background: var(--bg-fallback);";
    }
  ?>

  <div class="py-3" style="<?php echo e($wrapperStyle); ?>">
    <div class="container backdrop-pad">
      <div class="d-flex align-items-center justify-content-between mb-3">
        <h1 class="h4 m-0"><?php echo e($event->titulo); ?></h1>
        <div class="small text-muted">/p/<?php echo e($event->slug); ?></div>
      </div>

      <?php if(session('ok')): ?>
        <div class="alert alert-success"><?php echo e(session('ok')); ?></div>
      <?php endif; ?>

      <?php if($event->images->isEmpty()): ?>
        <div class="card card-surface p-4 rounded-4 mb-4">
          <p class="text-muted mb-0">Aún no hay imágenes subidas para este evento.</p>
        </div>
      <?php else: ?>
        
        <div id="multiCarousel"
             class="carousel slide mb-3"
             data-bs-ride="carousel"
             data-bs-interval="2500"
             data-bs-pause="hover">
          <div class="carousel-inner multi-slide">
            <?php $__currentLoopData = $event->images->sortBy(['order','id'])->values()->chunk(4); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $chunkIndex => $chunk): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
              <div class="carousel-item <?php echo e($chunkIndex === 0 ? 'active' : ''); ?>">
                <div class="row g-2 justify-content-center">
                  <?php $__currentLoopData = $chunk; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $img): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <div class="col-6 col-md-3">
                      <img
                        src="<?php echo e(asset('storage/'.$img->path)); ?>"
                        alt="<?php echo e($img->original_name ?? 'Imagen'); ?>"
                        class="d-block w-100 rounded-3"
                        loading="lazy">
                    </div>
                  <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </div>
              </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
          </div>

          
          <button class="carousel-control-prev" type="button" data-bs-target="#multiCarousel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Anterior</span>
          </button>
          <button class="carousel-control-next" type="button" data-bs-target="#multiCarousel" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Siguiente</span>
          </button>
        </div>

        
        <div class="row g-2 mb-4">
          <?php $__currentLoopData = $event->images->values(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $i => $thumb): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <div class="col-3 col-sm-2 col-md-2 col-lg-1-5 mini-thumb">
              <button class="btn p-0 w-100 border-0" type="button"
                      data-bs-target="#multiCarousel" data-bs-slide-to="<?php echo e(intdiv($i, 4)); ?>">
                <img src="<?php echo e(asset('storage/'.$thumb->path)); ?>"
                     alt="Miniatura <?php echo e($i+1); ?>"
                     class="w-100 rounded-2"
                     loading="lazy">
              </button>
            </div>
          <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>
      <?php endif; ?>

      
      <?php if(auth()->guard()->check()): ?>
        <?php if (app(\Illuminate\Contracts\Auth\Access\Gate::class)->check('upload', $event)): ?>
          <div class="card card-surface rounded-4 p-4 mt-3">
            <h3 class="h5 mb-3">Subir tus imágenes</h3>
            <form method="POST" action="<?php echo e(route('events.images.store', $event)); ?>" enctype="multipart/form-data">
              <?php echo csrf_field(); ?>
              <input type="file" name="images[]" multiple accept="image/*" class="form-control mb-2" required>
              <button class="btn btn-success">Subir</button>
            </form>
            <small class="text-muted">Formatos: jpg, jpeg, png, webp. Máx 8MB por archivo.</small>
          </div>
        <?php endif; ?>
      <?php else: ?>
        <div class="alert alert-info mt-3">
          Inicia sesión para subir imágenes.
          <?php if(Route::has('login')): ?> <a href="<?php echo e(route('login')); ?>" class="link-light">Ingresar</a> <?php endif; ?>
        </div>
      <?php endif; ?>
    </div>
  </div>
<?php $__env->stopSection(); ?>

<?php $__env->startPush('scripts'); ?>
<script>
  // Asegura autoplay por JS (por si el atributo data fallara)
  document.addEventListener('DOMContentLoaded', function() {
    const el = document.querySelector('#multiCarousel');
    if (el && window.bootstrap) {
      new bootstrap.Carousel(el, { interval: 2500, ride: 'carousel', pause: 'hover', wrap: true });
    }
  });
</script>
<?php $__env->stopPush(); ?>

<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\Users\jaran\Documents\Marketing Digital\Laravel\eventos\resources\views/preview/show.blade.php ENDPATH**/ ?>