@extends('layouts.templade')

@section('title', 'Administrador de Noticias')

@section('contenido')

<style>
    /* Ajustes generales para evitar que se corte el contenido */
    .table-responsive {
        overflow-x: auto;
        white-space: nowrap;
    }

    td {
        white-space: normal !important;
        word-wrap: break-word;
        vertical-align: middle !important;
    }

    td.descripcion {
        max-width: 400px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Mejor visibilidad de botones en pantallas pequeñas */
    .btn-sm {
        font-size: 0.85rem;
    }

    /* Oculta columnas menos importantes en móviles */
    @media (max-width: 768px) {
        th:nth-child(5), td:nth-child(5), /* Descripción */
        th:nth-child(6), td:nth-child(6), /* URL Portada */
        th:nth-child(7), td:nth-child(7)  /* URL Leer más */ {
            display: none;
        }

        .btn {
            width: 100%;
            margin-bottom: 5px;
        }
    }
</style>

<div class="container mt-4">
    <h1 class="mb-4 text-center">Administrador de Noticias</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  

    <div class="mb-3">
        <a href="{{ route('admin.create') }}" class="btn btn-danger">
            <i class="bi bi-plus-circle"></i> Crear noticia
        </a>
    </div>

    <div class="table-responsive shadow-sm rounded">
        <table class="table table-bordered table-striped table-hover align-middle">
            <thead class="table-dark text-center">
                <tr>
                    <th>ID</th>
                    <th>Título</th>
                    <th>Subtítulo</th>
                    <th>Fecha</th>
                    <th>Descripción</th>
                    <th>URL Portada</th>
                    <th>URL leer más</th>
                    <th>Acciones</th>
                </tr>
            </thead>
            <tbody>
                @forelse($noticias as $noticia)
                    <tr>
                        <td class="text-center">{{ $noticia->id }}</td>
                        <td>{{ $noticia->titulo }}</td>
                        <td>{{ $noticia->subtitulo }}</td>
                        <td>{{ $noticia->fecha }}</td>
                        <td class="descripcion">{{ Str::limit($noticia->descripcion, 300) }}</td>

                        <td style="min-width: 180px; text-align: center;">
                            <a href="{{ $noticia->url_iframe }}" target="_blank" class="btn btn-link btn-sm">
                                Ver Url de Portada
                            </a>
                        </td>

                        <td style="min-width: 180px; text-align: center;">
                            <a href="{{ $noticia->url_portada }}" target="_blank" class="btn btn-link btn-sm">
                                Ver url de leer más
                            </a>
                        </td>

                        <td class="text-center">
                            <div class="d-flex justify-content-center gap-2 flex-wrap">
                                <a href="{{ route('admin.edit', $noticia->id) }}" class="btn btn-secondary btn-sm">✏ Editar</a>
                                <a href="{{ route('admin.show', $noticia->id) }}" class="btn btn-dark btn-sm">👁 Ver</a>
                                <form action="{{ route('admin.destroy', $noticia->id) }}" method="POST" onsubmit="return confirm('¿Seguro que quieres eliminar esta noticia?')">
                                    @csrf
                                    @method('DELETE')
                                    <button class="btn btn-danger btn-sm">🗑 Eliminar</button>
                                </form>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="8" class="text-center text-muted">No hay noticias registradas</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

@endsection