@extends('layout.master')

@section('title', 'Educa Auge | Repositorio de Documentos')

@section('styles')
    <link rel="stylesheet" href="{{ asset('assets/css/login.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/css/politicas.css') }}" />
    <style>
        .repositorio-section {
            padding: 30px 0;
        }

        .document-card {
            transition: all 0.3s ease;
            border-radius: 10px;
            background: #fff;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
            overflow: hidden;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .titulo {
            font-size: 1.5rem;
            font-weight: 600;
        }

        .document-card h4 {
            font-size: 1rem;
            font-weight: 600;
            color: #1a202c;
            margin: 0 0 8px 0;
        }

        .document-card p {
            color: #555;
            font-size: 0.95rem;
            line-height: 1.5;
            margin: 0
        }

        .btn-ver {
            display: inline-block;
            background-color: #1e87f0;
            color: white;
            border-radius: 6px;
            padding: 8px 14px;
            text-decoration: none;
            font-weight: 500;
            transition: background 0.3s;
            font-size: 14px
        }

        .btn-ver:hover {
            background-color: #0f6ecd;
            text-decoration: none;
            color: #fff;
        }

        .pdf-icon {
            color: #dc3545;
            font-size: 1.5rem;
            margin-right: 8px;
        }

        .doc-description {
            min-height: 60px;
        }

        @media (max-width: 760px) {
            .titulo {
                font-size: 18px;
                font-weight: 600;
            }

            .document-card h4 {
                font-size: 14px;
                margin: 0 0 5px 0;
            }

            .document-card p {
                font-size: 13px;
                line-height: 1.2;
                min-height: 40px;
            }

            .btn-ver {
                font-size: 13px
            }

            .repositorio-section {
                padding: 0;
            }
        }
    </style>
@endsection

@section('content')
    <main class="page-main">
        <section class="uk-section repositorio-section">
            <div class="uk-container">
                <h2 class="uk-text-center titulo">
                    📚 Repositorio de Documentos y Resoluciones
                </h2>

                @if ($documentos->count() > 0)
                    <div class="uk-grid-small uk-child-width-1-2@s uk-child-width-1-3@m uk-grid-match"
                        uk-grid>
                        @foreach ($documentos as $doc)
                            <div>
                                <div class="document-card uk-padding-small">
                                    <div>
                                        <div class="d-flex align-items-center mb-2">
                                            <h4 class="titulo-resolucion">{{ $doc->name }}</h4>
                                        </div>
                                        <p class="doc-description">
                                            {{ $doc->description ? Str::limit($doc->description, 120) : 'Sin descripción disponible.' }}
                                        </p>
                                    </div>
                                    <div class="mt-3">
                                        <a href="{{ env('URL_ARCHIVOS') . '/docs/' . $doc->file_path }}" target="_blank"
                                            rel="noopener noreferrer" class="btn-ver">
                                            <i class="fa fa-external-link"></i> Ver documento
                                        </a>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <p class="uk-text-center text-muted mt-4">
                        No hay documentos disponibles por el momento.
                    </p>
                @endif
            </div>
        </section>
    </main>
@endsection