@extends('web.layout')
@section('contenidoWeb')
<!-- Hero Section de Proveedores -->
<section class="suppliers-hero" id="suppliers-hero">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-8 mx-auto text-center">
                <div class="suppliers-hero-content" data-aos="fade-up">
                    <div class="hero-badge mb-4">
                        <span class="badge-suppliers">
                            <i class="fas fa-truck me-2"></i>
                            Red de Proveedores CAASAG
                        </span>
                    </div>
                    <h1 class="suppliers-hero-title mb-4">
                        Conectamos <span class="text-caasag-golden">Instituciones</span>
                        <br>con <span class="text-caasag-blue">Proveedores</span> de Calidad
                    </h1>
                    <p class="suppliers-hero-subtitle mb-5">
                        Directorio especializado de proveedores de servicios educativos, tecnológicos
                        y administrativos para instituciones de educación superior.
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Sección de Búsqueda Principal -->
<section class="search-section" id="buscador">
    <div class="container">
        <div class="row">
            <div class="col-lg-10 mx-auto">
                <div class="search-header text-center mb-4">
                    <h2 class="section-title">Encuentra el Proveedor Ideal</h2>
                    <p class="section-subtitle">Busca por nombre o categoría de servicio</p>
                </div>

                <div class="suppliers-search-card">
                    <div class="row g-3 align-items-end">
                        <div class="col-md-6">
                            <label class="form-label fw-bold">Buscar Proveedor</label>
                            <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="Nombre de empresa o servicio...">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-bold">Categoría</label>
                            <select class="form-select" id="categoryFilter">
                                <option value="">Todas las categorías</option>
                                <option value="tecnologia">Tecnología Educativa</option>
                                <option value="capacitacion">Capacitación Docente</option>
                                <option value="consultoria">Consultoría</option>
                                <option value="servicios">Servicios Generales</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <button type="button" class="btn btn-caasag-primary w-100" id="clearFilters">
                                <i class="fas fa-times"></i> Limpiar
                            </button>
                        </div>
                    </div>

                    <div class="search-results-info mt-3 text-center">
                        <small class="text-muted">
                            <span id="resultsCount">{{ count($proveedores) }}</span> proveedores encontrados
                        </small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Directorio de Proveedores -->
<section class="suppliers-directory py-6" id="directorio">
    <div class="container">
        <!-- Lista de proveedores -->
        <div class="row" id="suppliersContainer">
            @foreach($proveedores as $index => $proveedor)
                <div class="col-lg-6 supplier-item"
                    data-nombre="{{ strtolower($proveedor['nombre']) }}"
                    data-categoria="{{ $proveedor['categoria'] }}"
                    data-servicios="{{ strtolower(implode(' ', $proveedor['servicios'])) }}"
                    data-aos="fade-up"
                    data-aos-delay="{{ ($index % 6) * 100 }}">
                    <div class="supplier-card h-100">
                        <div class="supplier-header">
                            <div class="supplier-logo">
                                <img src="{{ asset('web/assets/img/proveedores/' . $proveedor['logo']) }}"
                                    alt="{{ $proveedor['nombre'] }}"
                                    onerror="this.src='{{ asset('web/assets/img/proveedores/' . $proveedor['logo']) }}'" width="80" height="80">
                            </div>
                            <div class="supplier-info">
                                <h4 class="supplier-name">{{ $proveedor['nombre'] }}</h4>
                                <p class="supplier-category">
                                    @switch($proveedor['categoria'])
                                        @case('tecnologia')
                                            <i class="fas fa-laptop-code me-1"></i>Tecnología Educativa
                                            @break
                                        @case('capacitacion')
                                            <i class="fas fa-chalkboard-teacher me-1"></i>Capacitación Docente
                                            @break
                                        @case('consultoria')
                                            <i class="fas fa-chart-line me-1"></i>Consultoría
                                            @break
                                        @case('servicios')
                                            <i class="fas fa-cogs me-1"></i>Servicios Generales
                                            @break
                                    @endswitch
                                </p>
                                <div class="supplier-rating">
                                    <span class="rating-stars">
                                        @for($i = 1; $i <= 5; $i++)
                                            @if($i <= floor($proveedor['rating']))
                                                <i class="fas fa-star text-warning"></i>
                                            @elseif($i <= $proveedor['rating'])
                                                <i class="fas fa-star-half-alt text-warning"></i>
                                            @else
                                                <i class="far fa-star text-muted"></i>
                                            @endif
                                        @endfor
                                    </span>
                                    <span class="rating-text">{{ $proveedor['rating'] }} ({{ $proveedor['resenas'] }} reseñas)</span>
                                </div>
                            </div>
                        </div>

                        <div class="supplier-description">
                            <p>{{ $proveedor['descripcion'] }}</p>
                        </div>

                        <div class="supplier-services mb-3">
                            @foreach($proveedor['servicios'] as $servicio)
                                <span class="service-tag">{{ $servicio }}</span>
                            @endforeach
                        </div>

                        <div class="supplier-footer">
                            <div class="supplier-contact">
                                <div class="contact-item">
                                    <i class="fas fa-envelope text-caasag-blue"></i>
                                    <span>{{ $proveedor['email'] }}</span>
                                </div>
                                <div class="contact-item">
                                    <i class="fas fa-phone text-caasag-golden"></i>
                                    <span>{{ $proveedor['telefono'] }}</span>
                                </div>
                            </div>
                            <div class="supplier-actions mt-3">
                                <a href="{{ $proveedor['sitio_web'] }}" target="_blank"
                                   class="btn btn-sm btn-outline-primary me-2">
                                    <i class="fas fa-globe"></i> Sitio web
                                </a>
                                <a href="mailto:{{ $proveedor['email'] }}"
                                   class="btn btn-sm btn-caasag-primary">
                                    <i class="fas fa-envelope"></i> Contactar
                                </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 proveedores</h4>
                <p class="text-muted">Intenta con otros términos de búsqueda o selecciona una categoría diferente</p>
            </div>
        </div>
    </div>
</section>

<!-- Sección de Categorías (Movida abajo) -->
<section class="categories-section py-8 bg-light">
    <div class="container">
        <div class="row">
            <div class="col-12 text-center mb-5">
                <h2 class="section-title">Categorías de Servicios</h2>
                <p class="section-subtitle">Explora nuestras diferentes áreas de especialización</p>
            </div>
        </div>

        <div class="row g-4">
            <div class="col-lg-3 col-md-6">
                <div class="category-card" data-aos="fade-up" data-aos-delay="100">
                    <div class="category-icon">
                        <i class="fas fa-laptop-code"></i>
                    </div>
                    <h4>Tecnología Educativa</h4>
                    <p>Plataformas LMS, software académico, herramientas digitales</p>
                    <button class="btn btn-sm btn-outline-primary category-filter-btn" data-category="tecnologia">
                        Ver proveedores
                    </button>
                </div>
            </div>

            <div class="col-lg-3 col-md-6">
                <div class="category-card" data-aos="fade-up" data-aos-delay="200">
                    <div class="category-icon">
                        <i class="fas fa-chalkboard-teacher"></i>
                    </div>
                    <h4>Capacitación Docente</h4>
                    <p>Programas de formación, talleres, certificaciones</p>
                    <button class="btn btn-sm btn-outline-primary category-filter-btn" data-category="capacitacion">
                        Ver proveedores
                    </button>
                </div>
            </div>

            <div class="col-lg-3 col-md-6">
                <div class="category-card" data-aos="fade-up" data-aos-delay="300">
                    <div class="category-icon">
                        <i class="fas fa-chart-line"></i>
                    </div>
                    <h4>Consultoría</h4>
                    <p>Acreditación, calidad educativa, gestión institucional</p>
                    <button class="btn btn-sm btn-outline-primary category-filter-btn" data-category="consultoria">
                        Ver proveedores
                    </button>
                </div>
            </div>

            <div class="col-lg-3 col-md-6">
                <div class="category-card" data-aos="fade-up" data-aos-delay="400">
                    <div class="category-icon">
                        <i class="fas fa-cogs"></i>
                    </div>
                    <h4>Servicios Generales</h4>
                    <p>Mantenimiento, seguridad, limpieza, alimentación</p>
                    <button class="btn btn-sm btn-outline-primary category-filter-btn" data-category="servicios">
                        Ver proveedores
                    </button>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Sección para registrar empresa -->
<section class="register-supplier-section py-8" id="registrar">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 mx-auto text-center">
                <h2 class="section-title mb-4">¿Eres proveedor de servicios educativos?</h2>
                <p class="section-subtitle mb-5">
                    Únete a nuestra red de proveedores y conecta con más de 100 instituciones
                    educativas en América Latina y el Caribe.
                </p>
                <a href="#contacto" class="btn btn-caasag-primary btn-lg">
                    <i class="fas fa-user-plus me-2"></i>Registrar mi Empresa
                </a>
            </div>
        </div>
    </div>
</section>

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

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('searchInput');
    const categoryFilter = document.getElementById('categoryFilter');
    const clearButton = document.getElementById('clearFilters');
    const suppliersContainer = document.getElementById('suppliersContainer');
    const resultsCount = document.getElementById('resultsCount');
    const noResults = document.getElementById('noResults');
    const categoryFilterBtns = document.querySelectorAll('.category-filter-btn');

    const proveedoresData = window.proveedoresData || [];

    // Función para filtrar proveedores
    function filterSuppliers() {
        const searchTerm = searchInput.value.toLowerCase().trim();
        const selectedCategory = categoryFilter.value;
        const supplierItems = suppliersContainer.querySelectorAll('.supplier-item');

        let visibleCount = 0;

        supplierItems.forEach(item => {
            const nombre = item.dataset.nombre;
            const categoria = item.dataset.categoria;
            const servicios = item.dataset.servicios;

            const matchesSearch = !searchTerm ||
                                nombre.includes(searchTerm) ||
                                servicios.includes(searchTerm);
            const matchesCategory = !selectedCategory || categoria === selectedCategory;

            if (matchesSearch && matchesCategory) {
                item.style.display = '';
                visibleCount++;
            } else {
                item.style.display = 'none';
            }
        });

        // Actualizar contador
        resultsCount.textContent = visibleCount;

        // Mostrar/ocultar mensaje de no resultados
        if (visibleCount === 0) {
            noResults.style.display = 'block';
            suppliersContainer.style.display = 'none';
        } else {
            noResults.style.display = 'none';
            suppliersContainer.style.display = '';
        }
    }

    // Event listeners
    searchInput.addEventListener('input', filterSuppliers);
    categoryFilter.addEventListener('change', filterSuppliers);

    // Limpiar filtros
    clearButton.addEventListener('click', function() {
        searchInput.value = '';
        categoryFilter.value = '';
        filterSuppliers();
        searchInput.focus();
    });

    // Botones de categoría
    categoryFilterBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            const category = this.dataset.category;
            categoryFilter.value = category;
            searchInput.value = '';
            filterSuppliers();

            // Scroll al directorio
            document.getElementById('directorio').scrollIntoView({
                behavior: 'smooth',
                block: 'start'
            });
        });
    });

    // Scroll suave para enlaces
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                target.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }
        });
    });
});
</script>
@endsection