{{-- @extends('layouts.navbar') --}}
@extends('layouts.app')
@section('title', 'Noticias')

@section('contenido')
<div class="row my-5">
    <!-- Columna izquierda -->
    <div class="col-md-8">
        <div class="bg-light p-4 rounded shadow-sm h-100">
            <h2 class="fw-bold mb-4">Noticias y Actualidad</h2>
            <p class="text-muted">Mantente informado sobre las últimas noticias - Centro Textil y de Gestión Industrial</p>
            <hr class="border border-dark border-3 opacity-100 mb-4 w-100 mx-0">

            <div class="row">
                @foreach($noticias as $noticia)
                <div class="col-md-12 mb-4" id="noticia-{{ $noticia->id }}">
                    <div class="card shadow-sm h-100">
                        {{-- Portada --}}
                        @if($noticia->portada_type === 'image')
                            <img src="{{ $noticia->portada_url }}" class="card-img-top" alt="{{ $noticia->titulo }}">
                        @elseif($noticia->portada_type === 'youtube' || $noticia->portada_type === 'iframe')
                            <div class="ratio ratio-16x9">
                                <iframe src="{{ $noticia->portada_url }}" class="card-img-top" frameborder="0" allowfullscreen></iframe>
                            </div>
                        @endif

                        <div class="card-body">
                            <!-- Título -->
                            <h5 class="card-title fw-bold">{{ $noticia->titulo }}</h5>
                            
                            @php
                                $partes = explode('"', $noticia->subtitulo);
                            @endphp
                            <div class="card-subtitle">
                                <h6 class="fw-bold text-success mb-0">
                                    {{ trim($partes[0]) }}
                                </h6>
                                @if(isset($partes[1]))
                                    <p class="fst-italic text-secondary mb-0">
                                        "{{ $partes[1] }}"
                                    </p>
                                @endif
                            </div>

                            <!-- Descripción -->
                            <p class="card-text">{{ Str::limit($noticia->descripcion, 120) }}</p>

                            <!-- Autor y fecha -->
                            <p class="text-muted small d-flex">
                                <span>Posted by : CTGI</span>
                                <span class="ms-3">{{ \Carbon\Carbon::parse($noticia->fecha)->locale('es')->isoFormat('D [de] MMMM [de] YYYY') }}</span>
                            </p>

                            <div class="bg-light px-4 py-2 rounded shadow-sm d-flex justify-content-between align-items-center">
                                <!-- Métricas -->
                                <div class="d-flex align-items-center gap-4 text-muted small">
                                    <span><i class="bi bi-eye"></i> {{ $noticia->vistas }} vistas</span>
                                    <span><i class="bi bi-chat-left-text"></i> {{ $noticia->comentarios->count() }} comentarios</span>
                                    <span><i class="bi bi-clock-history"></i> {{ $noticia->created_at->diffForHumans() }}</span>

                                    <!-- Like -->
                                     <form action="/noticias/{{ $noticia->id }}/like" method="POST" class="likeForm m-0" data-id="{{ $noticia->id }}">
                                        @csrf
                                        <button type="submit" class="likeBtn btn btn-link p-0 text-danger text-decoration-none d-flex align-items-center gap-1" data-id="{{ $noticia->id }}">
                                            <i class="bi bi-record-circle{{ $noticia->likes->contains('user_id', auth()->id()) ? '-fill' : '' }} me-1"></i>
                                            <span class="likeCount">{{ $noticia->likes->count() }}</span>
                                        </button>
                                    </form>
                                </div>

                                <!-- Botón Leer más -->
                                <a href="{{ route('user.show', $noticia->id) }}" class="btn btn-danger btn-sm">Leer más</a>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>

            <!-- Paginador -->
            <div class="d-flex justify-content-center mt-4">
                {{ $noticias->links('vendor.pagination.custom') }}
            </div>
        </div>
    </div>

    <!-- Columna derecha -->
    <div class="col-md-4">
        <!-- Noticias recientes -->
        <div class="card mb-4">
            <div class="card-header bg-secondary text-white">
                <h5 class="mb-0">Noticias recientes</h5>
            </div>
            <ul class="list-group">
                @forelse($recent_news as $news)
                    <li class="list-group-item bg-light">
                        <a href="{{ request()->url() }}?noticia={{ $news->id }}" class="text-decoration-none text-dark">
                            {{ $news->titulo }}
                        </a>
                        <span class="text-muted d-block">{{ $news->fecha_formateada }}</span>
                    </li>
                @empty
                    <li class="list-group-item text-muted">No hay noticias recientes.</li>
                @endforelse
            </ul>
        </div>

        <!-- Enlaces de interés -->
        <div class="card mb-4">
            <div class="card-header bg-secondary text-white">
                <h5 class="mb-0">Enlaces de interés</h5>
            </div>
            <ul class="list-group">
                @forelse($enlaces as $enlace)
                    <li class="list-group-item bg-light">
                        <a href="{{ $enlace->url }}" 
                           class="text-decoration-none text-dark" 
                           target="_blank" 
                           rel="noopener noreferrer">
                            {{ $enlace->nombre }}
                        </a>
                    </li>
                @empty
                    <li class="list-group-item text-muted">No hay enlaces disponibles.</li>
                @endforelse
            </ul>
        </div>

        <!-- Noticias más populares -->
        <div class="card mb-4">
            <div class="card-header bg-secondary text-white">
                <h5 class="mb-0">Noticias más populares</h5>
            </div>
            <ul class="list-group">
                @forelse($popular_news as $news)
                    <li class="list-group-item bg-light">
                        <a href="{{ route('user.show', $news->id) }}" class="text-decoration-none text-dark">
                            {{ $news->titulo }}
                        </a>
                        <span class="text-muted d-block">{{ $news->fecha_formateada }}</span>
                    </li>
                @empty
                    <li class="list-group-item text-muted">No hay noticias más populares.</li>
                @endforelse
            </ul>
        </div>

        <!-- Portadas -->
        <div class="mb-4">
            <img src="{{ asset('portada.png') }}" class="img-fluid rounded shadow-sm" alt="Portada">
        </div>
        <div class="mb-4">
           <a href="https://drive.google.com/file/d/1aM4w5yTJhXREXfZt-IU2zVd4UE41SmN5/view" target="_blank">
    <img src="{{ asset('manual.png') }}" class="img-fluid rounded shadow-sm" alt="Manual">
</a>
        </div>
    </div>
</div>

<style>
html {
  scroll-behavior: smooth;
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function () {
    // 🔹 Scroll automático si existe ?noticia en la URL
    const params = new URLSearchParams(window.location.search);
    const noticiaId = params.get("noticia");

    if (noticiaId) {
        const element = document.getElementById("noticia-" + noticiaId);
        if (element) {
            element.scrollIntoView({ behavior: "smooth" });
            // ✨ Resalta temporalmente la noticia
            element.classList.add("border", "border-3", "border-danger");
            setTimeout(() => {
                element.classList.remove("border", "border-3", "border-danger");
            }, 2000);
        }
    }

    // 🔹 Likes con SweetAlert si no ha iniciado sesión
    document.querySelectorAll(".likeForm").forEach(form => {
        const likeBtn   = form.querySelector(".likeBtn");
        const likeCount = form.querySelector(".likeCount");

        form.addEventListener("submit", function (e) {
            e.preventDefault();

            @guest
                Swal.fire({
                    icon: 'info',
                    title: 'Inicia sesión',
                    text: 'Debes iniciar sesión para dar like.',
                    confirmButtonText: 'Entendido',
                    confirmButtonColor: '#d33',
                    background: '#fff',
                    color: '#333',
                    showClass: { popup: 'animate__animated animate__fadeInDown' },
                    hideClass: { popup: 'animate__animated animate__fadeOutUp' }
                });
                return;
            @else
                fetch(form.action, {
                    method: "POST",
                    headers: {
                        "X-CSRF-TOKEN": form.querySelector('input[name="_token"]').value,
                        "Accept": "application/json"
                    }
                })
                .then(res => res.json())
                .then(data => {
                    if (data.liked) {
                        likeBtn.classList.add("text-success");
                    } else {
                        likeBtn.classList.remove("text-success");
                    }
                    likeCount.textContent = data.count;
                })
                .catch(err => console.error(err));
            @endguest
        });
    });
});
</script>

<!-- <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> -->
<script src=" {{ asset('assets/js/sweetalert2@11.js') }}"></script>

@endsection