@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')
@php
    $allImages = collect([]);
    if($post->featured_image){
        $allImages->push([
            'url' => asset($post->featured_image),
            'alt' => $post->title,
        ]);
    }
    if($post->images && $post->images->count()){
        foreach($post->images as $img){
            $allImages->push([
                'url' => asset($img->image_path),
                'alt' => $img->alt_text ?: $post->title,
            ]);
        }
    }

    $words = str_word_count(strip_tags($post->content));
    $readingTime = max(1, ceil($words / 200));
@endphp

<div class="dm-page-bg py-4 py-md-5">
    <div class="container">

        {{-- Migas de pan --}}
        <div class="mb-3 small text-muted">
            <a href="{{ route('home') }}" class="text-decoration-none text-muted">Inicio</a>
            @if($post->category)
                <span class="mx-1">/</span>
                <span>{{ $post->category->name }}</span>
            @endif
        </div>

        {{-- Hero tipo ficha proveedor --}}
        <div class="row g-4 mb-4 dm-hero-section">

            {{-- Columna imágenes --}}
            <div class="col-lg-8">
                <div class="dm-main-image-card rounded-3 overflow-hidden shadow-sm mb-3">
                    @if($allImages->count())
                        <img id="dm-main-image"
                             src="{{ $allImages[0]['url'] }}"
                             alt="{{ $allImages[0]['alt'] }}"
                             class="w-100 h-100 dm-main-image"
                             style="cursor:pointer;">
                    @endif
                </div>

                @if($allImages->count() > 1)
                    <div class="dm-thumbs-wrapper d-flex gap-2">
                        @foreach($allImages as $idx => $img)
                            <div class="dm-thumb {{ $idx === 0 ? 'active' : '' }}"
                                 data-index="{{ $idx }}"
                                 data-url="{{ $img['url'] }}"
                                 data-alt="{{ $img['alt'] }}">
                                <img src="{{ $img['url'] }}"
                                     alt="{{ $img['alt'] }}"
                                     class="w-100 h-100 object-fit-cover rounded-2">
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>

            {{-- Columna ficha info --}}
            <div class="col-lg-4">
                <div class="dm-info-card bg-white rounded-3 shadow-sm p-3 p-md-4 h-100">
                    @if($post->category)
                        <span class="badge rounded-pill dm-pill mb-3">
                            {{ $post->category->name }}
                        </span>
                    @endif

                    <h1 class="h3 mb-2 dm-title">{{ $post->title }}</h1>

                    @if($post->excerpt)
                        <p class="dm-excerpt text-muted mb-3">
                            {{ $post->excerpt }}
                        </p>
                    @endif

                    <div class="dm-meta mb-3">
                        <div class="d-flex align-items-center gap-2 mb-1">
                            <span class="dm-meta-label">Publicado</span>
                            <span class="dm-meta-value">
                                {{ $post->created_at->format('d \d\e F Y') }}
                            </span>
                        </div>
                        <div class="d-flex align-items-center gap-2 mb-1">
                            <span class="dm-meta-label">Tiempo de lectura</span>
                            <span class="dm-meta-value">
                                {{ $readingTime }} min aprox.
                            </span>
                        </div>
                        @if($post->category)
                            <div class="d-flex align-items-center gap-2">
                                <span class="dm-meta-label">Estilo</span>
                                <span class="dm-meta-value">
                                    {{ $post->category->name }}
                                </span>
                            </div>
                        @endif
                    </div>

                    <hr>

                    <div class="dm-badges mb-3">
                        <span class="dm-tag">Inspiración</span>
                        <span class="dm-tag">Decoración</span>
                        <span class="dm-tag">Ideas para novios</span>
                    </div>

                    <div class="d-flex flex-wrap gap-2 mt-3">
                        <a href="{{ route('home') }}" class="btn btn-primary dm-btn-main flex-grow-1">
                            Ver más ideas de matrimonio
                        </a>
                        <a href="#dm-info" class="btn btn-outline-secondary dm-btn-secondary">
                            Ver información
                        </a>
                    </div>
                </div>
            </div>
        </div>

        {{-- Tabs simples --}}
        <div class="dm-tabs mb-4">
            <a href="#dm-info" class="dm-tab active">Información</a>
            @if($post->images && $post->images->count())
                <a href="#dm-gallery" class="dm-tab">Galería</a>
            @endif
        </div>

        {{-- Contenido principal, ancho y alineado a la izquierda --}}
        <div id="dm-info" class="mb-5">
            <div class="bg-white rounded-3 shadow-sm p-4 p-md-5 dm-content-card">
                <h2 class="h4 mb-3 dm-section-title">Información del artículo</h2>
                <div class="dm-divider mb-4"></div>

                <div class="dm-post-body dm-left-text">
                    {!! $post->content !!}
                </div>
            </div>
        </div>

        {{-- Galería a ancho completo --}}
        @if($post->images && $post->images->count())
        <div id="dm-gallery" class="mb-5">
            <div class="bg-white rounded-3 shadow-sm p-4 p-md-5">
                <h2 class="h4 mb-3 dm-section-title">Galería de inspiración</h2>
                <p class="text-muted mb-4">
                    Fotografías adicionales que pueden ayudarte a visualizar ideas reales para bodas.
                </p>

                <div class="row g-3 g-md-4">
                    @foreach($post->images as $index => $image)
                        <div class="col-6 col-md-4 col-lg-3">
                            <div class="dm-gallery-item position-relative overflow-hidden rounded-3">
                                <img src="{{ asset($image->image_path) }}"
                                     alt="{{ $image->alt_text }}"
                                     class="w-100 h-100 object-fit-cover gallery-image"
                                     data-index="{{ $index }}"
                                     style="cursor:pointer;">
                                @if($image->alt_text)
                                    <div class="dm-gallery-caption">
                                        {{ $image->alt_text }}
                                    </div>
                                @endif
                            </div>
                        </div>
                    @endforeach
                </div>

            </div>
        </div>
        @endif

        {{-- CTA final alineada a la izquierda --}}
        <div class="mt-4">
            <a href="{{ route('home') }}" class="btn btn-link text-decoration-none dm-back-link ps-0">
                ← Volver a la inspiración de matrimonios
            </a>
        </div>

    </div>
</div>

{{-- Modal galería --}}
<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 rounded-circle dm-modal-nav start-0" id="prevBtn">‹</button>
      <div class="position-relative w-100">
          <img id="modalImage" src="" class="img-fluid rounded-4 shadow-lg mx-auto d-block" alt="Imagen ampliada">
          <div id="imageCounter" class="dm-image-counter"></div>
      </div>
      <button class="btn btn-dark rounded-circle dm-modal-nav end-0" id="nextBtn">›</button>
    </div>
  </div>
</div>

<style>
    :root {
        --dm-bg: #f5f6f8;
        --dm-card: #ffffff;
        --dm-accent: #00a58a;
        --dm-accent-soft: #e0f3ef;
        --dm-text-main: #222;
        --dm-text-muted: #717171;
        --dm-border-soft: #e5e5e5;
    }

    .dm-page-bg {
        background: var(--dm-bg);
        min-height: 100vh;
    }

    .dm-hero-section {
        align-items: stretch;
    }

    .dm-main-image-card {
        background: #000;
        height: 360px;
    }

    .dm-main-image {
        object-fit: cover;
        width: 100%;
        height: 100%;
        transition: transform .3s ease;
    }

    .dm-main-image-card:hover .dm-main-image {
        transform: scale(1.01);
    }

    @media (max-width: 768px) {
        .dm-main-image-card {
            height: 260px;
        }
    }

    .dm-thumbs-wrapper {
        overflow-x: auto;
        padding-bottom: .25rem;
    }

    .dm-thumb {
        flex: 0 0 90px;
        height: 70px;
        border-radius: .5rem;
        border: 2px solid transparent;
        overflow: hidden;
        cursor: pointer;
    }

    .dm-thumb img {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }

    .dm-thumb.active {
        border-color: var(--dm-accent);
    }

    .dm-info-card {
        font-size: .95rem;
    }

    .dm-pill {
        background: var(--dm-accent-soft);
        color: var(--dm-accent);
        font-size: .75rem;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .dm-title {
        font-weight: 600;
        color: var(--dm-text-main);
    }

    .dm-excerpt {
        font-size: .92rem;
    }

    .dm-meta-label {
        font-size: .8rem;
        color: var(--dm-text-muted);
        text-transform: uppercase;
        letter-spacing: .08em;
    }

    .dm-meta-value {
        font-size: .9rem;
        color: var(--dm-text-main);
    }

    .dm-badges .dm-tag {
        display: inline-block;
        background: #f0f2f5;
        color: #555;
        font-size: .8rem;
        padding: .25rem .6rem;
        border-radius: 999px;
        margin-right: .25rem;
        margin-bottom: .25rem;
    }

    .dm-btn-main {
        border-radius: 999px;
        border: none;
        background: var(--dm-accent);
    }

    .dm-btn-main:hover {
        background: #008a73;
    }

    .dm-btn-secondary {
        border-radius: 999px;
        font-size: .85rem;
    }

    .dm-tabs {
        border-bottom: 1px solid var(--dm-border-soft);
        display: flex;
        gap: 1rem;
        font-size: .9rem;
    }

    .dm-tab {
        padding: .45rem .1rem;
        text-decoration: none;
        color: var(--dm-text-muted);
        position: relative;
        white-space: nowrap;
    }

    .dm-tab.active,
    .dm-tab:hover {
        color: var(--dm-accent);
    }

    .dm-tab.active::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -1px;
        width: 100%;
        height: 2px;
        background: var(--dm-accent);
    }

    .dm-content-card {
        border: none;
        max-width: 100%;
    }

    .dm-section-title {
        font-weight: 600;
        color: var(--dm-text-main);
    }

    .dm-divider {
        height: 2px;
        width: 80px;
        background: var(--dm-accent);
        border-radius: 999px;
    }

    .dm-post-body {
        font-size: .98rem;
        line-height: 1.8;
        color: var(--dm-text-main);
    }

    .dm-post-body h2,
    .dm-post-body h3,
    .dm-post-body h4 {
        margin-top: 1.6rem;
        margin-bottom: .7rem;
        font-weight: 600;
    }

    .dm-post-body p {
        margin-bottom: 1rem;
    }

    .dm-post-body ul,
    .dm-post-body ol {
        padding-left: 1.3rem;
        margin-bottom: 1.1rem;
    }

    .dm-left-text {
        text-align: left !important;
    }

    .dm-gallery-item {
        height: 210px;
        background: #000;
    }

    @media (max-width: 768px) {
        .dm-gallery-item {
            height: 160px;
        }
    }

    .dm-gallery-item img {
        transition: transform .3s ease;
    }

    .dm-gallery-item:hover img {
        transform: scale(1.05);
    }

    .dm-gallery-caption {
        position: absolute;
        left: .5rem;
        right: .5rem;
        bottom: .5rem;
        background: rgba(0,0,0,0.65);
        color: #fff;
        font-size: .8rem;
        padding: .3rem .5rem;
        border-radius: .5rem;
    }

    .dm-back-link {
        color: var(--dm-accent);
    }

    .dm-back-link:hover {
        color: #008a73;
    }

    .dm-modal-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        width: 40px;
        height: 40px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: .9;
    }

    .dm-image-counter {
        position: absolute;
        bottom: 1rem;
        right: 1.4rem;
        background: rgba(0,0,0,0.75);
        color: #fff;
        font-size: .85rem;
        padding: .3rem .75rem;
        border-radius: 999px;
    }
</style>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Thumbnails -> cambiar imagen principal
        const mainImage = document.getElementById('dm-main-image');
        const thumbs = document.querySelectorAll('.dm-thumb');

        thumbs.forEach(thumb => {
            thumb.addEventListener('click', function () {
                const url = this.dataset.url;
                const alt = this.dataset.alt || '';
                thumbs.forEach(t => t.classList.remove('active'));
                this.classList.add('active');
                if (mainImage) {
                    mainImage.src = url;
                    mainImage.alt = alt;
                }
            });
        });

        // Modal galería (solo imágenes de la galería inferior)
        const galleryImages = Array.from(document.querySelectorAll('.gallery-image'));
        if (!galleryImages.length) return;

        let currentIndex = 0;

        const modalElement = document.getElementById('imageModal');
        const modal = new bootstrap.Modal(modalElement);
        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();
        });

        modalElement.addEventListener('click', function (e) {
            if (e.target === this) {
                modal.hide();
            }
        });

        // Click en imagen principal -> abre modal en la primera imagen de galería si existe
        if (mainImage && galleryImages.length) {
            mainImage.addEventListener('click', () => showImageModal(0));
        }
    });
</script>
@endpush