@extends('layouts.app')

@section('title', $post->title)

@section('meta-tags')
    <meta name="description" content="{{ $post->excerpt ?? Str::limit(strip_tags($post->content), 150) }}">
    <meta name="keywords" content="matrimonios, bodas, inspiración nupcial, {{ $post->category->name ?? '' }}, chile">
    <meta property="og:title" content="{{ $post->title }}">
    <meta property="og:description" content="{{ $post->excerpt ?? Str::limit(strip_tags($post->content), 150) }}">
    <meta property="og:image" content="{{ asset($post->featured_image) }}">
    <meta property="og:url" content="{{ url()->current() }}">
    <meta property="og:type" content="article">

    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "Article",
      "headline": "{{ $post->title }}",
      "description": "{{ $post->excerpt ?? Str::limit(strip_tags($post->content), 150) }}",
      "image": "{{ asset($post->featured_image) }}",
      "author": {
        "@type": "Organization",
        "name": "Datos Matrimonios",
        "url": "{{ url('/') }}"
      },
      "publisher": {
        "@type": "Organization",
        "name": "Datos Matrimonios",
        "logo": {
          "@type": "ImageObject",
          "url": "{{ asset('storage/images/logo.png') }}"
        }
      },
      "datePublished": "{{ $post->created_at->toIso8601String() }}",
      "dateModified": "{{ $post->updated_at->toIso8601String() }}"
    }
    </script>
@endsection

@section('content')
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-9">

            {{-- Imagen destacada --}}
            <div class="card shadow border-0 mb-4">
                @if($post->featured_image)
                    <img src="{{ asset($post->featured_image) }}" 
                        class="card-img-top rounded-top img-fluid" 
                        style="max-height: 400px; object-fit: cover; width: 100%;" 
                        alt="{{ $post->title }}">
                @endif

                <div class="card-body bg-white">
                    <h1 class="card-title text-center mb-3 text-primary display-5">{{ $post->title }}</h1>
                    @if($post->excerpt)
                        <p class="text-muted text-center fst-italic fs-5 mb-4">{{ $post->excerpt }}</p>
                    @endif
                    <div class="fs-5 lh-lg">
                        {!! $post->content !!}
                    </div>
                </div>
            </div>

            {{-- Galería de inspiración --}}
            @if($post->images && $post->images->count())
            <section class="py-5">
                <h2 class="text-center section-title mb-4 text-primary">Galería de inspiración</h2>
                <div class="row g-4">
                    @foreach($post->images as $index => $image)
                        <div class="col-md-6 col-lg-4">
                            <div class="card border-0 shadow-sm h-100 hover-zoom">
                                <img src="{{ asset($image->image_path) }}"
                                     alt="{{ $image->alt_text }}"
                                     class="img-fluid rounded gallery-image"
                                     style="cursor: pointer;"
                                     data-index="{{ $index }}">
                            </div>
                        </div>
                    @endforeach
                </div>
            </section>
            @endif

            {{-- CTA de navegación --}}
            <div class="text-center mt-5">
                <a href="{{ route('home') }}" class="btn btn-outline-primary">← Volver al inicio</a>
            </div>

        </div>
    </div>
</div>

{{-- Modal con navegación y contador --}}
<div class="modal fade" id="imageModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-centered">
    <div class="modal-content bg-transparent border-0 position-relative text-center">
      <button class="btn btn-dark position-absolute top-50 start-0 translate-middle-y" id="prevBtn" style="z-index: 10;">‹</button>
      <div class="position-relative w-100">
          <img id="modalImage" src="" class="img-fluid rounded shadow mx-auto d-block" alt="Imagen ampliada">
          <div id="imageCounter" class="text-white fw-bold position-absolute bottom-0 end-0 me-3 mb-2 bg-dark px-3 py-1 rounded">
              <!-- contador se actualiza por JS -->
          </div>
      </div>
      <button class="btn btn-dark position-absolute top-50 end-0 translate-middle-y" id="nextBtn" style="z-index: 10;">›</button>
    </div>
  </div>
</div>

<style>
    .section-title {
        font-weight: 600;
        font-size: 2rem;
    }
    .hover-zoom img {
        transition: transform .3s ease;
    }
    .hover-zoom:hover img {
        transform: scale(1.05);
    }
</style>
@endsection

@push('scripts')
<script>
    const galleryImages = Array.from(document.querySelectorAll('.gallery-image'));
    let currentIndex = 0;

    const modal = new bootstrap.Modal(document.getElementById('imageModal'));
    const modalImage = document.getElementById('modalImage');
    const imageCounter = document.getElementById('imageCounter');

    function updateModalImage() {
        modalImage.src = galleryImages[currentIndex].src;
        imageCounter.textContent = `${currentIndex + 1} de ${galleryImages.length}`;
    }

    function showImageModal(index) {
        currentIndex = index;
        updateModalImage();
        modal.show();
    }

    galleryImages.forEach((img, index) => {
        img.addEventListener('click', () => showImageModal(index));
    });

    document.getElementById('prevBtn').addEventListener('click', () => {
        currentIndex = (currentIndex - 1 + galleryImages.length) % galleryImages.length;
        updateModalImage();
    });

    document.getElementById('nextBtn').addEventListener('click', () => {
        currentIndex = (currentIndex + 1) % galleryImages.length;
        updateModalImage();
    });

    // Cerrar con tecla ESC automáticamente (ya lo hace Bootstrap), pero si quieres cerrar con click fuera:
    document.getElementById('imageModal').addEventListener('click', function (e) {
        if (e.target === this) {
            modal.hide();
        }
    });
</script>
@endpush