@extends('layouts.simple.master')

@section('main_content')
@include('operations.comercial.ofertas.navigation')

<div class="container mt-4">
    <form id="filterForm" method="GET" class="row g-3 mb-4">
        <div class="col-md-4">
            <select name="estado" id="estado" class="form-select" onchange="this.form.submit()">
                <option value="Pendiente" {{ $estado == 'Pendiente' ? 'selected' : '' }}>Pendiente</option>
                <option value="Ganado" {{ $estado == 'Ganado' ? 'selected' : '' }}>Ganado</option>
            </select>
        </div>
        <div class="col-md-6">
            <select name="oferta_id" id="oferta_id" class="form-select" onchange="this.form.submit()">
                <option value="">Seleccione una oferta</option>
                @foreach ($ofertas as $id => $cliente)
                    <option value="{{ $id }}" {{ $ofertaId == $id ? 'selected' : '' }}>{{ $cliente }}</option>
                @endforeach
            </select>
        </div>
    </form>



    <div class="d-flex justify-content-between mb-3">
        <!-- Botón "Licitador Nuevo" a la izquierda -->
        <button class="btn btn-secondary" onclick="showNewCompetitorModal()">
            Licitador Nuevo
        </button>

        <!-- Botón "Añadir Licitador Presentado" a la derecha -->
        <button class="btn btn-primary" onclick="addLicitador({{ $ofertaId }})">
            Añadir Licitador Presentado
        </button>
    </div>

    <div class="border rounded p-3 bg-white">
        <!-- Tabla existente -->
        <div class="table-responsive">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>Competidor</th>
                        <th>Admisión</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody id="licitadoresTableBody">
                    @forelse ($licitadores as $licitador)
                        <tr data-id="{{ $licitador->id }}">
                        <td>
                            <div class="input-group">
                                <!-- Campo para ingresar y buscar competidores -->
                                <input type="text" class="form-control" id="competitorInput" list="competitorList"
                                        onblur="validateCompetitor(this, '{{ $licitador->id }}')"
                                        value="{{ $licitador->competitor_nombre }}">
                                        <datalist id="competitorList">
                                            @foreach ($competitors as $competitor)
                                                <option value="{{ $competitor }}"></option>
                                            @endforeach
                                        </datalist>
                            </div>
                            <!-- Mensaje de error dinámico -->
                            <small class="text-danger" id="errorCompetitor-{{ $licitador->id }}" style="display: none;">
                                El competidor no está registrado. Por favor, elija uno válido o registre uno nuevo.
                            </small>
                        </td>
                            <td>
                            <select class="form-select" onchange="handleAdmissionChange('{{ $licitador->id }}', this.value)">
                                <option value="Pendiente" {{ $licitador->admision == 'Pendiente' ? 'selected' : '' }}>Pendiente</option>
                                <option value="Admitido" {{ $licitador->admision == 'Admitido' ? 'selected' : '' }}>Admitido</option>
                                <option value="Excluido" {{ $licitador->admision == 'Excluido' ? 'selected' : '' }}>Excluido</option>
                            </select>
                            </td>
                            <td>
                                <button class="btn btn-danger btn-sm" onclick="deleteLicitador('{{ $licitador->id }}')">Eliminar</button>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="3" class="text-center text-muted">No hay licitadores registrados.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>


</div>


<!-- Modal para Añadir un Nuevo Competidor -->
<div class="modal fade" id="newCompetitorModal" tabindex="-1" aria-labelledby="newCompetitorModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="newCompetitorModalLabel">Añadir Nuevo Competidor</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label for="competitorNameInput" class="form-label">Nombre del Competidor</label>
                    <input type="text" class="form-control" id="competitorNameInput" placeholder="Escriba el nombre del competidor">
                    <small class="text-danger d-none" id="competitorError">Por favor, ingrese un nombre válido.</small>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                <button type="button" class="btn btn-primary" onclick="saveNewCompetitor()">Añadir</button>
            </div>
        </div>
    </div>
</div>

<script>
function addLicitador(ofertaId) {
    const url = `{{ route('operations.comercial.ofertas.licitadores.add', ':ofertaId') }}`.replace(':ofertaId', ofertaId);

    fetch(url, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
        },
        body: JSON.stringify({}),
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('Error al añadir el licitador.');
        }
        return response.json();
    })
    .then(data => {
        if (data.success) {
            // Buscar la tabla
            const tableBody = document.getElementById('licitadoresTableBody');

            // Verificar si existe un mensaje de "No hay licitadores registrados"
            const emptyRow = tableBody.querySelector('.text-muted');
            if (emptyRow) {
                emptyRow.remove();
            }

            // Crear una nueva fila con el registro recién creado
            const newRow = `
                <tr data-id="${data.licitador.id}">
                    <td>
                        <input type="text" list="competitor_list" class="form-control"
                               value=""
                               oninput="fetchCompetitors(this)"
                               onblur="saveCompetitor('${data.licitador.id}', this.value)">
                        <datalist id="competitor_list"></datalist>
                    </td>
                    <td>
                        <select class="form-select"
                                onchange="updateField('${data.licitador.id}', 'admision', this.value)">
                            <option value="Pendiente" selected>Pendiente</option>
                            <option value="Admitido">Admitido</option>
                            <option value="Excluido">Excluido</option>
                        </select>
                    </td>
                    <td>
                        <button class="btn btn-danger btn-sm" onclick="deleteLicitador('${data.licitador.id}')">Eliminar</button>
                    </td>
                </tr>`;
            tableBody.insertAdjacentHTML('beforeend', newRow);
        } else {
            alert(data.message);
        }
    })
    .catch(error => {
        console.error('Error al añadir el licitador:', error);
        alert('Ocurrió un error al añadir el licitador.');
    });
}
function fetchCompetitors(input) {
    const query = input.value;
    if (query.length < 2) return; // Buscar solo si hay al menos 2 caracteres

    fetch(`{{ route('operations.comercial.ofertas.licitadores.search') }}?q=${query}`, {
        method: 'GET',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    })
    .then(response => response.json())
    .then(data => {
        const dataList = document.getElementById('competitor_list');
        dataList.innerHTML = ''; // Limpiar opciones anteriores

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

function saveCompetitor(licitadorId, competitorName) {
    const url = `{{ route('operations.comercial.ofertas.licitadores.update', ':id') }}`.replace(':id', licitadorId);

    fetch(url, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
        },
        body: JSON.stringify({ field: 'competitor_nombre', value: competitorName }),
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            console.log('Competidor actualizado correctamente:', data.message);
        } else {
            alert('Error al actualizar el competidor: ' + data.message);
        }
    })
    .catch(error => console.error('Error al guardar el competidor:', error));
}

function deleteLicitador(licitadorId) {
    const url = `{{ route('operations.comercial.ofertas.licitadores.delete', ':id') }}`.replace(':id', licitadorId);

    if (confirm('¿Está seguro de que desea eliminar este licitador?')) {
        fetch(url, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
            },
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Eliminar la fila del licitador del DOM
                const row = document.querySelector(`tr[data-id="${licitadorId}"]`);
                if (row) {
                    row.remove();
                }
                alert(data.message);
            } else {
                alert('Error al eliminar el licitador: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error al eliminar el licitador:', error);
            alert('Ocurrió un error al intentar eliminar el licitador.');
        });
    }
}
function showNewCompetitorModal() {
    const modal = new bootstrap.Modal(document.getElementById('newCompetitorModal'));
    modal.show();
}

function saveNewCompetitor() {
    const nombre = document.getElementById('competitorNameInput').value;

    fetch("{{ route('operations.comercial.ofertas.licitadores.addcompetitor') }}", {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
        },
        body: JSON.stringify({ nombre }),
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert(data.message);
            const modal = bootstrap.Modal.getInstance(document.getElementById('newCompetitorModal'));
            modal.hide();
        } else {
            alert(data.message);
        }
    })
    .catch(error => {
        console.error('Error al guardar el competidor:', error);
        alert('Hubo un problema al guardar el competidor.');
    });
}
function updateField(licitadorId, field, value) {
    const url = `{{ route('operations.comercial.ofertas.licitadores.update', ':id') }}`.replace(':id', licitadorId);

    fetch(url, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
        },
        body: JSON.stringify({ field, value }),
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            console.log('Campo actualizado correctamente:', data.message);
        } else if (data.requiresExclusionReason) {
            // Mostrar el modal para motivo de exclusión
            document.getElementById('exclusionLicitadorId').value = licitadorId;
            const modal = new bootstrap.Modal(document.getElementById('exclusionModal'));
            modal.show();
        } else {
            alert('Error al actualizar el campo: ' + data.message);
        }
    })
    .catch(error => console.error('Error al actualizar el campo:', error));
}

function submitExclusion() {
    const licitadorId = document.getElementById('exclusionLicitadorId').value;
    const reason = document.getElementById('exclusionReason').value;

    const url = `{{ route('operations.comercial.ofertas.licitadores.addexclusion') }}`;

    fetch(url, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
        },
        body: JSON.stringify({ licitador_id: licitadorId, razon_exclusion: reason }),
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert(data.message);

            // Cerrar modal
            const modal = bootstrap.Modal.getInstance(document.getElementById('exclusionModal'));
            modal.hide();

            // Actualizar la fila del licitador en la tabla
            const row = document.querySelector(`tr[data-id="${licitadorId}"]`);
            if (row) {
                row.querySelector('select').value = 'Excluido'; // Cambiar el estado visual
            }
        } else {
            alert('Error al registrar la exclusión: ' + data.message);
        }
    })
    .catch(error => {
        console.error('Error al registrar la exclusión:', error);
        alert('Hubo un problema al registrar la exclusión.');
    });
}
function showExclusionModal(licitadorId) {
    document.getElementById('exclusionLicitadorId').value = licitadorId;

    const modal = new bootstrap.Modal(document.getElementById('exclusionModal'));
    modal.show();
}
function handleAdmissionChange(licitadorId, value) {
    const url = `{{ route('operations.comercial.ofertas.licitadores.update', ':id') }}`.replace(':id', licitadorId);

    fetch(url, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
        },
        body: JSON.stringify({ field: 'admision', value: value }),
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            console.log('Estado actualizado correctamente:', data.message);
        } else {
            alert('Error al actualizar el estado: ' + data.message);
        }
    })
    .catch(error => {
        console.error('Error al actualizar el estado:', error);
        alert('Hubo un problema al actualizar el estado. Intente nuevamente.');
    });
}
</script>
@endsection