@extends('web.layout')
@section('contenidoWeb')
<!-- Hero Section de Plataforma -->
<section class="platform-hero py-8" id="platform-hero">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-8 mx-auto text-center">
                <div class="platform-hero-content" data-aos="fade-up">
                    <div class="hero-badge mb-4">
                        <span class="badge-platform">
                            <i class="fas fa-network-wired me-2"></i>
                            Directorio de Agremiados CAASAG
                        </span>
                    </div>
                    <h1 class="platform-hero-title mb-4">
                        Conecta con Nuestros
                        <span class="text-gradient-caasag">Socios Estratégicos</span>
                    </h1>
                    <p class="platform-hero-description mb-5">
                        Descubre la red de instituciones, empresas y organizaciones que forman parte
                        de la comunidad CAASAG. Una alianza global comprometida con la transformación educativa.
                    </p>
                    <!-- Estadísticas rápidas -->
                    <div class="quick-stats row g-4 mb-5">
                        <div class="col-6 col-md-4">
                            <div class="stat-mini">
                                <div class="stat-number" data-count="{{ count($agremiados) }}">0</div>
                                <div class="stat-label">Agremiados</div>
                            </div>
                        </div>
                        <div class="col-6 col-md-4">
                            <div class="stat-mini">
                                <div class="stat-number" data-count="8">0</div>
                                <div class="stat-label">Ciudades</div>
                            </div>
                        </div>
                        <div class="col-6 col-md-4">
                            <div class="stat-mini">
                                <div class="stat-number" data-count="2024">2025</div>
                                <div class="stat-label">Desde</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Sección del Buscador -->
<section class="search-section py-5 bg-light">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="search-card" data-aos="fade-up">
                    <div class="text-center mb-4">
                        <h3 class="search-title">Buscar Agremiados</h3>
                        <p class="search-subtitle text-muted">Encuentra la organización que buscas</p>
                    </div>
                    <div class="search-input-wrapper">
                        <div class="input-group">
                            <span class="input-group-text search-icon-wrapper">
                                <i class="fas fa-search text-caasag-blue"></i>
                            </span>
                            <input type="text" id="searchInput" class="form-control search-input-field"
                                placeholder="Buscar por nombre de organización..." autocomplete="off">
                            <button class="btn btn-outline-secondary" type="button" id="clearSearch"
                                style="display: none;">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                    </div>
                    <div class="text-center mt-3">
                        <small class="text-muted">
                            <span id="resultCount">{{ count($agremiados) }} agremiados encontrados</span>
                        </small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Sección de Resultados -->
<section class="results-section py-6">
    <div class="container">
        <!-- Header de Resultados -->
        <div class="results-header mb-4" data-aos="fade-up">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <h3 class="results-title">
                        <span id="resultsCount">{{ count($agremiados) }}</span> Agremiados Encontrados
                    </h3>
                </div>
                <div class="col-md-6 text-md-end">
                    <div class="sort-controls">
                        <label for="sortSelect" class="sort-label">Ordenar por:</label>
                        <select id="sortSelect" class="sort-select">
                            <option value="nombre">Nombre A-Z</option>
                            <option value="nombre-desc">Nombre Z-A</option>
                            <option value="fecha">Más Recientes</option>
                            <option value="fecha-desc">Más Antiguos</option>
                            <option value="pais">País</option>
                        </select>
                    </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>
                                Acceso
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        <!-- Estado sin resultados -->
        <div id="noResults" class="no-results d-none">
            <div class="no-results-content" data-aos="fade-up">
                <div class="no-results-icon">
                    <i class="fas fa-search"></i>
                </div>
                <h4>No se encontraron resultados</h4>
                <p>Intenta con otros términos de búsqueda o ajusta los filtros.</p>
                <button type="button" id="resetSearch" class="btn btn-golden-caasag">
                    <i class="fas fa-refresh me-2"></i>
                    Restablecer Búsqueda
                </button>
            </div>
        </div>

        <!-- Paginación (simulada) -->
        <div class="pagination-container mt-5 d-none" id="paginationContainer">
            <nav aria-label="Navegación de agremiados">
                <ul class="pagination justify-content-center">
                    <li class="page-item disabled">
                        <a class="page-link" href="#" tabindex="-1" aria-disabled="true">
                            <i class="fas fa-chevron-left"></i>
                        </a>
                    </li>
                    <li class="page-item active">
                        <a class="page-link" href="#">1</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="#">2</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="#">3</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="#">
                            <i class="fas fa-chevron-right"></i>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</section>

<!-- Modal de Contacto -->
<div class="modal fade" id="contactModal" tabindex="-1" aria-labelledby="contactModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="contactModalLabel">
                    <i class="fas fa-envelope text-caasag-blue me-2"></i>
                    Contactar Agremiado
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="contact-modal-content">
                    <div class="contact-intro mb-4">
                        <p>¿Estás interesado en establecer una conexión con <strong id="agremiadoName"></strong>?
                            Completa el formulario y te ayudaremos a establecer el contacto.</p>
                    </div>

                    <form id="contactAgremiadoForm">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="contactNombre">Nombre Completo</label>
                                    <input type="text" class="form-control" id="contactNombre" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="contactEmail">Correo Electrónico</label>
                                    <input type="email" class="form-control" id="contactEmail" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="contactOrganizacion">Organización</label>
                                    <input type="text" class="form-control" id="contactOrganizacion" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="contactTelefono">Teléfono</label>
                                    <input type="tel" class="form-control" id="contactTelefono">
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-group">
                                    <label for="contactMotivo">Motivo del Contacto</label>
                                    <select class="form-select" id="contactMotivo" required>
                                        <option value="">Selecciona un motivo</option>
                                        <option value="alianza">Propuesta de Alianza</option>
                                        <option value="colaboracion">Colaboración Académica</option>
                                        <option value="investigacion">Proyecto de Investigación</option>
                                        <option value="intercambio">Intercambio Estudiantil</option>
                                        <option value="consultoria">Servicios de Consultoría</option>
                                        <option value="otro">Otro</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-group">
                                    <label for="contactMensaje">Mensaje</label>
                                    <textarea class="form-control" id="contactMensaje" rows="4"
                                        placeholder="Describe brevemente tu propuesta o consulta..."
                                        required></textarea>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times me-2"></i>Cancelar
                </button>
                <button type="button" class="btn btn-golden-caasag" id="sendContactForm">
                    <i class="fas fa-paper-plane me-2"></i>Enviar Solicitud
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 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.js') !!}"></script>
@endsection