@extends('layouts.web')

@section('meta')
    <title>Plataforma de Agremiados - CAASAG</title>
    <meta name="description" content="Directorio oficial de organizaciones e instituciones agremiadas al Consejo de Acreditación de Ciencias Administrativas, Contables y Afines de América Latina y el Caribe (CAASAG).">
    <meta name="keywords" content="CAASAG, agremiados, instituciones, universidades, organizaciones, acreditación, educación superior, América Latina, Caribe">
@endsection

@section('styles')
    <link rel="stylesheet" href="{!! asset('web/assets/css/pages/plataforma.css') !!}">
@endsection

@section('content')
    <!-- Hero Section -->
    <section class="hero-section gradient-bg">
        <div class="container">
            <div class="row align-items-center min-vh-50">
                <div class="col-lg-8 mx-auto text-center">
                    <div class="hero-content" data-aos="fade-up">
                        <h1 class="hero-title">
                            <span class="text-white">Plataforma de</span>
                            <span class="text-caasag-golden">Agremiados</span>
                        </h1>
                        <p class="hero-subtitle text-light mb-4">
                            Descubre las organizaciones e instituciones que forman parte de la red CAASAG,
                            comprometidas con la excelencia en educación y acreditación.
                        </p>

                        <!-- Estadísticas Rápidas -->
                        <div class="stats-row">
                            <div class="stat-item" data-aos="fade-up" data-aos-delay="100">
                                <div class="stat-number">{{ count($agremiados) }}</div>
                                <div class="stat-label">Organizaciones</div>
                            </div>
                            <div class="stat-item" data-aos="fade-up" data-aos-delay="200">
                                <div class="stat-number">15+</div>
                                <div class="stat-label">Países</div>
                            </div>
                            <div class="stat-item" data-aos="fade-up" data-aos-delay="300">
                                <div class="stat-number">25+</div>
                                <div class="stat-label">Años</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Plataforma Content -->
    <section class="plataforma-section py-5">
        <div class="container">
            <!-- Búsqueda Simplificada -->
            <div class="search-section mb-5" data-aos="fade-up">
                <div class="row justify-content-center">
                    <div class="col-lg-8">
                        <div class="search-card">
                            <div class="search-header text-center mb-4">
                                <h3><i class="fas fa-search text-caasag-blue me-2"></i>Buscar Organizaciones</h3>
                                <p class="text-muted">Encuentra fácilmente las organizaciones agremiadas</p>
                            </div>

                            <div class="search-input-group">
                                <div class="input-group">
                                    <span class="input-group-text">
                                        <i class="fas fa-search"></i>
                                    </span>
                                    <input type="text"
                                           class="form-control"
                                           id="searchInput"
                                           placeholder="Buscar por nombre de organización...">
                                    <button class="btn btn-caasag-primary" type="button" id="clearSearch">
                                        <i class="fas fa-times"></i>
                                    </button>
                                </div>
                            </div>

                            <div class="search-results-count mt-3">
                                <span id="resultsCount">{{ count($agremiados) }}</span> organizaciones encontradas
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Grid de Tarjetas Simplificadas -->
            <div class="row g-4" id="agremiadosContainer">
                @foreach($agremiados as $index => $agremiado)
                    <div class="col-lg-3 col-md-4 col-sm-6 agremiado-item"
                         data-nombre="{{ strtolower($agremiado['nombre']) }}"
                         data-aos="fade-up"
                         data-aos-delay="{{ ($index % 8) * 100 }}">
                        <div class="simple-agremiado-card h-100">
                            <div class="card-logo-section">
                                <div class="logo-container">
                                    <img src="/web/assets/img/agremiados/{{ $agremiado['imagen'] }}"
                                         alt="Logo {{ $agremiado['nombre'] }}"
                                         class="agremiado-logo"
                                         onerror="this.src='/web/assets/img/placeholder-logo.svg'">
                                </div>
                            </div>

                            <div class="card-content p-4">
                                <h5 class="agremiado-name text-center mb-3">{{ $agremiado['nombre'] }}</h5>
                                <p class="agremiado-description text-center text-muted mb-4">{{ $agremiado['descripcion'] }}</p>

                                <div class="card-actions text-center">
                                    <a href="{{ $agremiado['url'] }}"
                                       target="_blank"
                                       rel="noopener noreferrer"
                                       class="btn btn-caasag-primary">
                                        <i class="fas fa-external-link-alt me-2"></i>
                                        Visitar Sitio
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <!-- No hay resultados -->
            <div id="noResults" class="text-center py-5" style="display: none;">
                <div class="no-results-content">
                    <i class="fas fa-search fa-3x text-muted mb-3"></i>
                    <h4 class="text-muted">No se encontraron resultados</h4>
                    <p class="text-muted">Intenta con otros términos de búsqueda</p>
                </div>
            </div>

            <!-- Paginación (si se necesita en el futuro) -->
            <nav aria-label="Navegación de agremiados" class="mt-5">
                <ul class="pagination justify-content-center">
                    <!-- La paginación se puede agregar aquí si es necesaria -->
                </ul>
            </nav>
        </div>
    </section>

    <!-- Script de datos para JavaScript -->
    <script>
        window.agremiadosData = @json($agremiados);
    </script>
@endsection

@section('scripts')
<!-- Plataforma Search Scripts -->
<script src="{!! asset('web/assets/js/plataforma-search-simple.js') !!}"></script>
@endsection