{{-- @extends('layouts.navbar') --}}
@extends('layouts.app')

@section('title', $noticia->titulo)

@section('contenido')

<div class="mb-3">
    <a href="{{ route('user.index') }}" class="btn btn-secondary">
        <i class="bi bi-arrow-left"></i> Regresar
    </a>
</div>

<div class="container my-5">
    <div class="bg-light p-4 rounded shadow-sm">
        <h2 class="text-center fw-bold mb-4">{{ $noticia->titulo }}</h2>

        <!-- Video o imagen -->
        <div class="container my-5">
            <div class="d-flex justify-content-center">
                @if($noticia->media_type === 'image')
                    <img src="{{ $noticia->media_url }}" class="img-fluid rounded shadow-sm" alt="{{ $noticia->titulo }}" style="max-width: 560px;">
                @elseif($noticia->media_type === 'youtube')
                    <div class="ratio ratio-16x9" style="max-width: 560px;">
                        <iframe width="560" height="315" src="{{ $noticia->media_url }}" frameborder="0" allowfullscreen></iframe>
                    </div>
                @else
                    <div class="ratio ratio-16x9" style="max-width: 560px;">
                        <iframe src="{{ $noticia->media_url }}" frameborder="0" allowfullscreen></iframe>
                    </div>
                @endif
            </div>
        </div>

        <!-- Información -->
        <div class="d-flex justify-content-center my-3">
            <div class="bg-light px-4 py-2 rounded shadow-sm d-flex align-items-center gap-4">
                <span class="text-muted">
                    <i class="bi bi-calendar"></i> {{ $noticia->created_at->diffForHumans() }}
                </span>

                <span class="text-muted">
                    <i class="bi bi-eye"></i> {{ $noticia->vistas }} vistas
                </span>

                <form action="{{ route('user.like', $noticia->id) }}" method="POST" id="likeForm" class="mb-0">
                    @csrf
                    <button type="submit" 
                            class="btn btn-link p-0 text-danger text-decoration-none"
                            data-id="{{ $noticia->id }}" 
                            id="likeBtn">
                        <i class="bi bi-record-circle me-1"></i> 
                        <span id="likeCount">{{ $noticia->likes->count() }}</span>
                    </button>
                </form>
            </div>
        </div>

        <!-- Script del botón Like -->
        <script>
        document.addEventListener("DOMContentLoaded", function () {
            const likeBtn   = document.getElementById("likeBtn");
            const likeForm  = document.getElementById("likeForm");
            const likeCount = document.getElementById("likeCount");
            const noticiaId = likeBtn.dataset.id;                       
            const storageKey = `like_noticia_${noticiaId}`;

            likeForm.addEventListener("submit", function (e) {
                e.preventDefault(); // evita redirección siempre

                @guest
                    // ⚠️ Mostrar alerta si no está logueado
                    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
                    // ✅ Usuario autenticado
                    fetch(likeForm.action, {
                        method: "POST",
                        headers: {
                            "X-CSRF-TOKEN": document.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>

        <!-- Descripción -->
        <div class="card-body">
            <div class="p-3 bg-light rounded">
                <p class="lead text-justify mb-0" style="line-height: 1.8; white-space: pre-line;">
                    {{ $noticia->descripcion }}
                </p>
            </div>
        </div>

        <hr class="border border-dark border-1 opacity-90 mb-4 w-100 mx-0">

        <!-- Comentarios -->
        <div class="card mt-4 shadow-sm border-0">
            <div class="card-header bg-dark text-white d-flex justify-content-between align-items-center">
                <h5 class="mb-0">Comentarios</h5>
                <span class="badge bg-light text-dark">{{ $noticia->comentarios->count() }}</span>
            </div>

            <div class="card-body">
                @auth
                    <form action="{{ route('comentario.store', $noticia->id) }}" method="POST" class="mb-3">
                        @csrf
                        <textarea name="comentario" class="form-control mb-2" rows="2" placeholder="Escribe un comentario..."></textarea>
                        <button type="submit" class="btn btn-secondary btn-sm">
                            <i class="bi bi-send"></i> Comentar
                        </button>
                    </form>
                @else
                    <p class="text-muted">Debes iniciar sesión para comentar.</p>
                @endauth
            </div>

            <ul class="list-group list-group-flush">
                @forelse($noticia->comentarios->where('parent_id', null) as $comentario)
                    <li class="list-group-item border-0 border-bottom">
                        <div class="d-flex justify-content-between">    
                            <strong>{{ $comentario->user->name ?? 'Usuario eliminado' }}</strong>
                            <span class="text-muted small">{{ $comentario->created_at->diffForHumans() }}</span>
                        </div>
                        <p class="mb-1">{{ $comentario->comentario }}</p>

                        @auth
                            <button class="btn btn-link btn-sm p-0" 
                                style="color: red; text-decoration: none;" 
                                data-bs-toggle="collapse" 
                                data-bs-target="#reply-{{ $comentario->id }}">
                                <i class="bi bi-reply"></i> Responder
                            </button>

                            <div class="collapse mt-2" id="reply-{{ $comentario->id }}">
                                <form action="{{ route('comentario.store', $noticia->id) }}" method="POST" class="ms-3">
                                    @csrf
                                    <input type="hidden" name="parent_id" value="{{ $comentario->id }}">
                                    <textarea name="comentario" class="form-control mb-2" rows="2" placeholder="Escribe una respuesta..."></textarea>
                                    <button type="submit" class="btn btn-secondary btn-sm">
                                        <i class="bi bi-send"></i> Responder
                                    </button>
                                </form>
                            </div>
                        @endauth

                        @if($comentario->replies->count())
                            <ul class="list-group mt-3 ms-4">
                                @foreach($comentario->replies as $reply)
                                    <li class="list-group-item bg-light border-0 border-bottom">
                                        <div class="d-flex justify-content-between">
                                            <strong>{{ $reply->user->name ?? 'Usuario eliminado' }}</strong>
                                            <span class="text-muted small">{{ $reply->created_at->diffForHumans() }}</span>
                                        </div>
                                        <p class="mb-1">{{ $reply->comentario }}</p>
                                    </li>
                                @endforeach
                            </ul>
                        @endif
                    </li>
                @empty
                    <li class="list-group-item text-muted text-center">No hay comentarios.</li>
                @endforelse
            </ul>
        </div>
    </div>
</div>

{{-- ⚠️ ALERTAS SWEETALERT2 --}}
@if(session('success'))
<script>
Swal.fire({
    icon: 'success',
    title: '¡Éxito!',
    text: "{{ session('success') }}",
    confirmButtonColor: '#198754',
    background: '#fff',
    color: '#333',
    showClass: { popup: 'animate__animated animate__fadeInDown' },
    hideClass: { popup: 'animate__animated animate__fadeOutUp' }
});
</script>
@endif

@if(session('error'))
<script>
Swal.fire({
    icon: 'error',
    title: 'Comentario rechazado',
    text: "{{ session('error') }}",
    confirmButtonColor: '#d33',
    background: '#fff',
    color: '#333',
    showClass: { popup: 'animate__animated animate__shakeX' },
    hideClass: { popup: 'animate__animated animate__fadeOutUp' }
});
</script>
@endif

@endsection