@extends('layouts.simple.master')

@section('main_content')
<div class="container-fluid">
    <h2 class="mb-3">Valoraciones Competidores</h2>

    <!-- Filtro -->
    <form method="GET" action="{{ route('operations.comercial.ofertas.valoracionescualitativas.index') }}" class="mb-4">
        <div class="row g-2 align-items-end">
            <!-- Campo de búsqueda de competidores -->
            <div class="col-md-4 position-relative">
                <label for="competidor" class="form-label">Buscar Competidor</label>
                <input type="text" id="competidor" class="form-control" placeholder="Escribe para buscar..." autocomplete="off">
                <ul id="competidor-list" class="list-group position-absolute w-100" style="z-index: 1000; display: none;"></ul>
            </div>
            <input type="hidden" name="competidor_id" id="competidor_id">

            <!-- Filtro de Área -->
            <div class="col-md-4">
                <label for="area_id" class="form-label">Área</label>
                <select name="area_id" id="area_id" class="form-select">
                    <option value="">Todas las Áreas</option>
                    @foreach($areas as $area)
                        <option value="{{ $area->id }}" {{ $areaId == $area->id ? 'selected' : '' }}>
                            {{ $area->nombre_area }}
                        </option>
                    @endforeach
                </select>
            </div>

            <!-- Filtro de Dimensión -->
            <div class="col-md-4">
                <label for="dimension_id" class="form-label">Dimensión</label>
                <select name="dimension_id" id="dimension_id" class="form-select">
                    <option value="">Todas las Dimensiones</option>
                    @foreach($dimensiones as $dimension)
                        <option value="{{ $dimension->id }}" {{ $dimensionId == $dimension->id ? 'selected' : '' }}>
                            {{ $dimension->dimension }}
                        </option>
                    @endforeach
                </select>
            </div>

            <!-- Botón de filtro -->
            <div class="col-md-2">
                <button type="submit" class="btn btn-primary w-100">Filtrar</button>
            </div>
        </div>
    </form>

    <!-- Tabla de resultados -->
    <div class="table-responsive">
        <table class="table table-striped table-hover">
            <thead>
                <tr>
                    <th>Área</th>
                    <th>Dimensión</th>
                    <th>Polaridad</th>
                    <th>Resumen</th>
                    <th>Citas</th>
                </tr>
            </thead>
            <tbody>
                @forelse($valoraciones as $valoracion)
                    <tr>
                        <td>{{ $valoracion->area }}</td>
                        <td>{{ $valoracion->dimension }}</td>
                        <td>{{ ucfirst($valoracion->polaridad) }}</td>
                        <td>{{ $valoracion->sumary }}</td>
                        <td>{{ $valoracion->citas ?? 'N/A' }}</td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="5" class="text-center">No hay resultados.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection

<script>
document.addEventListener('DOMContentLoaded', function() {
    const input = document.getElementById('competidor');
    const list = document.getElementById('competidor-list');
    const hiddenInput = document.getElementById('competidor_id');

    input.addEventListener('input', function() {
        const query = input.value.trim();

        if (query.length >= 2) {
          fetch(`/operations/comercial/ofertas/valoracionescualitativas/competidores/search?query=${query}`)
              .then(response => response.json())
              .then(data => {
                    list.innerHTML = '';
                    list.style.display = 'block';

                    if (data.length > 0) {
                        data.forEach(item => {
                            const li = document.createElement('li');
                            li.textContent = item.competitor_nombre;
                            li.className = 'list-group-item list-group-item-action';
                            li.dataset.id = item.id;

                            li.addEventListener('click', function() {
                                input.value = item.competitor_nombre;
                                hiddenInput.value = item.id; // Asegúrate de que aquí se asigna el ID correcto
                                list.style.display = 'none';
                            });

                            list.appendChild(li);
                        });
                    } else {
                        const li = document.createElement('li');
                        li.textContent = 'No se encontraron resultados';
                        li.className = 'list-group-item text-muted';
                        list.appendChild(li);
                    }
                })
                .catch(error => console.error('Error en la búsqueda:', error));
        } else {
            list.style.display = 'none';
        }
    });

    document.addEventListener('click', function(event) {
        if (!list.contains(event.target) && event.target !== input) {
            list.style.display = 'none';
        }
    });
});
</script>