@extends('layouts/base')

@section('title')
    {{ $page->title }} |
@endsection

@section('styles')
  <style>
    /* Container for the gallery */
    .gallery-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive grid layout */
        gap: 16px; /* Space between items */
        padding: 20px; /* Add some padding around the grid */
    }
    
    /* Individual gallery items */
    .gallery-item {
        overflow: hidden; /* Ensure content fits within the box */
        border-radius: 8px; /* Optional: Rounded corners */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: Add a subtle shadow */
    }
    
    /* Images inside the gallery */
    .gallery-image {
        width: 100%;
        height: 250px; /* Fixed height for images */
        object-fit: cover; /* Maintain aspect ratio and crop if needed */
        cursor: pointer;
        transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animation on hover */
    }
    
    /* Image hover effect */
    .gallery-image:hover {
        transform: scale(1.05); /* Slightly zoom in on hover */
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Increase shadow on hover */
    }
    
    /* Responsive adjustments */
    @media (max-width: 576px) {
        .gallery-container {
            grid-template-columns: repeat(auto-fit, minmax(100%, 1fr)); /* 1 column on small screens */
        }
    }
  </style>
@endsection

@section('content')
    <audio id="background-audio" loop>
      <source src="{{ asset('bg audio.mp3') }}" type="audio/mpeg">
      Your browser does not support the audio tag.
    </audio>

    <div class="home-hidden">
        {!! $page->content !!}
    </div>

    <div class="gallery-container">
        @foreach($images as $index => $image)
            <div class="gallery-item">
                <img src="{{ asset($image) }}" class="gallery-image" 
                     data-bs-toggle="modal" data-bs-target="#imageModal" 
                     data-src="{{ asset($image) }}" alt="Gallery Image" />
            </div>
        @endforeach
    </div>
@endsection

@section('scripts')
      <script>
        document.addEventListener('click', () => {
            const audio = document.getElementById('background-audio');
            audio.muted = false; // Unmute after user interaction
            audio.play().catch(error => {
                console.log('Autoplay was blocked:', error);
          });
        });
      </script>
@endsection