@extends('layouts.app')

@section('content')
    <section class="page-section py-4">
        <div class="container">
            <!-- Encabezado mejorado -->
            <div class="text-center mb-4">
                <h2 class="display-5 text-primary mb-2">
                    <i class="fas fa-search me-2"></i>Resultados de Búsqueda
                </h2>
                <div class="alert alert-light d-inline-block">
                    <span class="fw-bold">Palabra buscado:</span> "{{ $query }}"
                </div>
                
            </div>

            @if($textos->isEmpty())
                <!-- Mensaje de no resultados mejorado -->
                <div class="text-center py-5 my-5">
                    <div class="empty-state">
                        <i class="fas fa-book-open fa-4x text-muted mb-4"></i>
                        <h3 class="h5">No se encontraron resultados</h3>
                        <p class="text-muted">Intenta con otros términos de búsqueda</p>
                        <a href="{{ url()->previous() }}" class="btn btn-primary mt-3">
                            <i class="fas fa-arrow-left me-2"></i>Volver atrás
                        </a>
                    </div>
                </div>
            @else
                <!-- Contador de resultados -->
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <small class="text-muted">
                        Mostrando {{ $textos->count() }} resultados
                    </small>
                    <!--<div class="dropdown">
                            <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" id="sortDropdown" data-bs-toggle="dropdown">
                                <i class="fas fa-sort me-1"></i>Ordenar
                            </button>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="#">Más recientes</a></li>
                                <li><a class="dropdown-item" href="#">A-Z</a></li>
                                <li><a class="dropdown-item" href="#">Autor</a></li>
                            </ul>
                        </div>-->
                </div>

                <!-- Grid de resultados con portadas ajustadas -->
                <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4">
                    @foreach($textos as $texto)
                        <div class="col">
                            <div class="card h-100 border-0 shadow-sm transition-all hover-shadow">
                                <!-- Contenedor de portada modificado para mostrar imagen completa -->
                                <div class="portada-container bg-light d-flex align-items-center justify-content-center p-3"
                                    style="height: 200px;">
                                    @if($texto->portada)
                                        <img class="img-fluid mh-100" src="{{ asset($texto->portada) }}"
                                            alt="Portada de {{ $texto->titulo }}"
                                            style="max-width: 100%; height: auto; object-fit: contain;">
                                    @else
                                        <i class="fas fa-book-open fa-3x text-secondary opacity-50"></i>
                                    @endif
                                    @if($texto->edicion)
                                        <div class="badge bg-primary position-absolute top-0 end-0 m-2">
                                            {{ $texto->edicion }}
                                        </div>
                                    @endif
                                </div>

                                <!-- Cuerpo de la tarjeta -->
                                <div class="card-body">
                                    <h5 class="card-title text-truncate">{{ $texto->titulo }}</h5>
                                    @if($texto->sub_titulo)
                                        <h6 class="text-muted small mb-2 text-truncate">{{ $texto->sub_titulo }}</h6>
                                    @endif

                                    <!-- Información del texto -->
                                    <p class="card-text small text-muted mb-3 line-clamp-2">
                                        {{ $texto->resumen ?? 'Sin descripción disponible' }}
                                    </p>

                                    <!-- Metadatos -->
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div>
                                            <small class="text-muted">
                                                <i class="fas fa-user me-1"></i>
                                                {{ $texto->autor->nombre ?? 'Anónimo' }}
                                            </small>
                                        </div>
                                        <div>
                                            <small class="text-muted">
                                                <i class="fas fa-calendar-alt me-1"></i>
                                                {{ $texto->año ?? 'N/A' }}
                                            </small>
                                        </div>
                                    </div>
                                </div>

                                <!-- Pie de tarjeta -->
                                <div class="card-footer bg-transparent border-0 pt-0">
                                    <div class="d-grid gap-2">
                                        @if($texto->archivo_pdf)
                                            <a href="{{ asset($texto->archivo_pdf) }}" class="btn btn-sm btn-primary" target="_blank">
                                                <i class="fas fa-file-pdf me-1"></i> Ver PDF
                                            </a>
                                        @else
                                            <button class="btn btn-sm btn-outline-secondary" disabled>
                                                <i class="fas fa-ban me-1"></i> No disponible
                                            </button>
                                        @endif

                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

                <!-- Paginación -->
                @if($textos->hasPages())
                    <div class="d-flex justify-content-center mt-5">
                        <nav aria-label="Page navigation">
                            {{ $textos->links() }}
                        </nav>
                    </div>
                @endif
            @endif
        </div>
    </section>

    <style>
        /* Estilos personalizados para las portadas */
        .portada-container {
            position: relative;
            border-radius: 5px 5px 0 0;
            overflow: hidden;
        }

        /* Efecto hover para la tarjeta */
        .hover-shadow:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

        /* Contenido de texto limitado */
        .line-clamp-2 {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        /* Transiciones suaves */
        .transition-all {
            transition: all 0.3s ease;
        }

        /* Asegurar que el título no se desborde */
        .text-truncate {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
@endsection