@extends('operations.comercial.ofertas.apertura.wizard')

@section('wizard_content')
<div class="text-center mb-4">
    <h4>Paso 3: Informar de Competidores</h4>
</div>

<form method="POST" action="{{ route('operations.comercial.ofertas.apertura.save.step', ['ofertaId' => $oferta->id, 'step' => 3]) }}">
    @csrf

    <!-- Pregunta inicial -->
    <div class="row justify-content-center mb-4">
        <div class="col-md-6 text-center">
            <label for="informan_competidores" class="form-label">¿Hay información de competidores?</label>
            <select name="informan_competidores" id="informan_competidores" class="form-control" onchange="toggleCompetitorsSection(this.value)">
                <option value="">Seleccione una opción</option>
                <option value="Sí" {{ $transparency->informan_competidores == 'Sí' ? 'selected' : '' }}>Sí</option>
                <option value="No" {{ $transparency->informan_competidores == 'No' ? 'selected' : '' }}>No</option>
            </select>
        </div>
    </div>

    <!-- Campo para añadir nuevo competidor (visible solo si se selecciona "Sí") -->
    <div id="competitors-section" class="{{ $transparency->informan_competidores == 'Sí' ? '' : 'd-none' }}">
      <div class="row justify-content-center mb-4">
          <div class="col-md-6">
              <label for="competitor_nombre" class="form-label">Añadir Competidor</label>
              <div class="input-group">
                  <input list="competitor_list" name="competitor_nombre" id="competitor_nombre" class="form-control" placeholder="Escriba el nombre del competidor">
                  <datalist id="competitor_list">
                      @foreach ($allCompetitors as $competitor)
                          <option value="{{ $competitor->nombre }}"></option>
                      @endforeach
                  </datalist>
                  <button type="button" class="btn btn-primary" id="addCompetitorButton">Añadir</button>
              </div>
          </div>
      </div>

        <!-- Tabla de competidores -->
        <div class="table-responsive">
            <table class="table table-bordered mt-4">
                <thead class="text-center">
                    <tr>
                        <th>Nombre del Competidor</th>
                        <th>Admisión</th>
                        <th>Razón Exclusión</th>
                        <th>Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @if(isset($competitors) && $competitors->count())
                        @foreach ($competitors as $competitor)
                            <tr>
                                <td>{{ $competitor->competitor_nombre }}</td>
                                <td>
                                    <select name="admission[{{ $competitor->id }}]" class="form-control">
                                        <option value="Admitido" {{ $competitor->admision == 'Admitido' ? 'selected' : '' }}>Admitido</option>
                                        <option value="Excluido" {{ $competitor->admision == 'Excluido' ? 'selected' : '' }}>Excluido</option>
                                        <option value="Pendiente" {{ $competitor->admision == 'Pendiente' ? 'selected' : '' }}>Pendiente</option>
                                    </select>
                                </td>
                                <td>
                                    <select name="razon_exclusion[{{ $competitor->id }}]" class="form-control" {{ $competitor->admision == 'Excluido' ? '' : 'disabled' }}>
                                        <option value="Administrativa" {{ $competitor->razon_exclusion == 'Administrativa' ? 'selected' : '' }}>Administrativa</option>
                                        <option value="Tecnica" {{ $competitor->razon_exclusion == 'Tecnica' ? 'selected' : '' }}>Técnica</option>
                                        <option value="Economica" {{ $competitor->razon_exclusion == 'Economica' ? 'selected' : '' }}>Económica</option>
                                        <option value="Desconocida" {{ $competitor->razon_exclusion == 'Desconocida' ? 'selected' : '' }}>Desconocida</option>
                                    </select>
                                </td>
                                <td class="text-center">
                                        <button type="button" class="btn btn-danger btn-sm" onclick="deleteCompetitor({{ $competitor->id }})">Eliminar</button>                            </td>
                            </tr>
                        @endforeach
                    @else
                        <tr>
                            <td colspan="4" class="text-center">No hay competidores registrados.</td>
                        </tr>
                    @endif
                </tbody>
            </table>
        </div>
    </div>

    <!-- Botones de navegación -->
    <div class="d-flex justify-content-between mt-4">
        <a href="{{ route('operations.comercial.ofertas.apertura.step', ['ofertaId' => $oferta->id, 'step' => 2]) }}" class="btn btn-secondary">Anterior</a>
        <button type="button" class="btn btn-danger">Cancelar</button>
        <button type="submit" class="btn btn-primary">Siguiente</button>
    </div>
</form>

<script>
    // Función para alternar visibilidad de la sección
    function toggleCompetitorsSection(value) {
        const section = document.getElementById('competitors-section');
        section.classList.toggle('d-none', value !== 'Sí');
    }

    // Función para buscar competidores
    document.getElementById('competitor_nombre').addEventListener('input', function () {
        const query = this.value;

        fetch("{{ route('operations.comercial.ofertas.apertura.search_competitors') }}?q=" + query)
            .then(response => response.json())
            .then(data => {
                const dataList = document.getElementById('competitor_list');
                dataList.innerHTML = ''; // Limpiar opciones anteriores

                data.forEach(item => {
                    const option = document.createElement('option');
                    option.value = item.nombre;
                    dataList.appendChild(option);
                });
            })
            .catch(error => {
                console.error('Error al buscar competidores:', error);
            });
    });

    // Función para añadir un nuevo competidor
    document.getElementById('addCompetitorButton').addEventListener('click', function () {
        const inputField = document.getElementById('competitor_nombre');
        const competitorName = inputField.value.trim();

        if (!competitorName) {
            alert('Por favor, introduzca un nombre de competidor.');
            return;
        }

        fetch("{{ route('operations.comercial.ofertas.apertura.save_competitor', ['ofertaId' => $oferta->id]) }}", {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
            },
            body: JSON.stringify({ nombre: competitorName })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                const tableBody = document.querySelector('table tbody');

                // Crear fila dinámicamente
                const newRow = document.createElement('tr');
                newRow.id = `competitor-row-${data.competitor.id}`;
                newRow.innerHTML = `
                    <td>${data.competitor.competitor_nombre}</td>
                    <td>
                        <select name="admission[${data.competitor.id}]" class="form-control">
                            <option value="Admitido">Admitido</option>
                            <option value="Excluido">Excluido</option>
                            <option value="Pendiente" selected>Pendiente</option>
                        </select>
                    </td>
                    <td>
                        <select name="razon_exclusion[${data.competitor.id}]" class="form-control" disabled>
                            <option value="Administrativa">Administrativa</option>
                            <option value="Tecnica">Técnica</option>
                            <option value="Economica">Económica</option>
                            <option value="Desconocida">Desconocida</option>
                        </select>
                    </td>
                    <td class="text-center">
                        <button type="button" class="btn btn-danger btn-sm" onclick="deleteCompetitor(${data.competitor.id})">Eliminar</button>
                    </td>
                `;

                tableBody.appendChild(newRow);

                // Limpiar campo de entrada
                inputField.value = '';
            } else {
                alert('Error al añadir el competidor: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error al procesar la solicitud:', error);
            alert('Hubo un problema al añadir el competidor.');
        });
    });

    // Función para eliminar un competidor
    function deleteCompetitor(competitorId) {
        if (!confirm('¿Estás seguro de que deseas eliminar este competidor?')) {
            return;
        }

        const url = `{{ route('operations.comercial.ofertas.apertura.delete_competitor', ['ofertaId' => $oferta->id, 'competitorId' => ':competitorId']) }}`.replace(':competitorId', competitorId);

        fetch(url, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
            },
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                const row = document.getElementById(`competitor-row-${competitorId}`);
                if (row) {
                    row.remove();
                }
                alert(data.message);
            } else {
                alert('Error al eliminar el competidor: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Hubo un problema al procesar la solicitud.');
        });
    }
</script>

@endsection