@extends('layouts.templade')

@section('title', 'Comentarios')

@section('contenido')
<div class="container">
    <h1 class="mb-4">Gestión de Comentarios</h1>

    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif

    @if(session('error'))
        <div class="alert alert-danger">{{ session('error') }}</div>
    @endif

    <!-- 🔍 Buscador -->
    <form method="GET" action="{{ route('comentarios.index') }}" class="mb-3">
        <input type="text" name="buscar" value="{{ $buscar ?? '' }}" 
               class="form-control" placeholder="Buscar por noticia, usuario o comentario...">
    </form>

    <!-- 🗑️ Botón eliminar múltiples -->
    <form action="{{ route('comentarios.deleteMultiple') }}" method="POST" id="form-multiple">
        @csrf
        @method('DELETE')

        <button type="submit" class="btn btn-danger mb-3"
                onclick="return confirm('¿Seguro que deseas eliminar los comentarios seleccionados?')">
            Eliminar seleccionados
        </button>

        <table class="table table-bordered">
            <thead>
                <tr>
                    <th><input type="checkbox" id="select-all"></th>
                    <th>Noticia</th>
                    <th>Usuario</th>
                    <th>Comentario</th>
                    <th>Acciones</th>
                </tr>
            </thead>
            <tbody>
                @foreach($comentarios as $comentario)
                    <tr>
                        <td>
                            <input type="checkbox" name="ids[]" value="{{ $comentario->id }}">
                        </td>
                        <td>{{ $comentario->noticia->titulo ?? 'Sin noticia' }}</td>
                        <td>{{ $comentario->user->name ?? $comentario->nombre }}</td>
                        <td>{{ $comentario->comentario }}</td>
                        <td>
                            <form action="{{ route('comentarios.destroy', $comentario->id) }}" 
                                  method="POST" 
                                  onsubmit="return confirm('¿Seguro que deseas eliminar este comentario?')">
                                @csrf
                                @method('DELETE')
                                <button class="btn btn-danger btn-sm">Eliminar</button>
                            </form>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </form>
</div>

<!-- Script para seleccionar todos -->
<script>
    document.getElementById('select-all').addEventListener('change', function() {
        let checkboxes = document.querySelectorAll('input[name="ids[]"]');
        checkboxes.forEach(c => c.checked = this.checked);
    });
</script>

@endsection