@extends('layouts.simple.master')

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

<style>
.number-column {
    text-align: right !important;
}
.number-input {
    text-align: right !important;
}
</style>

<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="border rounded p-3 bg-white">

      <!-- Título y calculadora -->
      <div class="d-flex justify-content-between align-items-center mb-3">
          <h5>Puntuaciones Cuantitativas</h5>
          <!-- Botón de calculadora -->
          <button class="btn btn-outline-secondary" onclick="showCalculatorModal()">
              <i class="fas fa-calculator"></i> Calculadora
          </button>
      </div>

        <!-- Tabla de cuantitativas -->
        <div class="table-responsive">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>Competidor</th>
                        <th>Económico</th>
                        <th>Técnico</th>
                        <th>Obj. Real</th>
                        <th>Obj. Fake</th>
                        <th>Precio</th>
                    </tr>
                </thead>
                <tbody id="cuantitativasTableBody">
                    @forelse ($cuantitativas as $registro)
                        <tr data-id="{{ $registro->id }}">
                        <td>{{ $registro->competitor->competitor_nombre ?? 'Sin nombre' }}</td>
                        <td class="number-column">
                            <input type="number" 
                                class="form-control form-control-sm number-input"
                                value="{{ $registro->tecnico }}"
                                step="0.01"
                                onchange="updateField('{{ $registro->id }}', 'tecnico', this.value)">
                        </td>
                        <td class="number-column">
                            <input type="number" 
                                class="form-control form-control-sm number-input"
                                value="{{ $registro->economico }}"
                                step="0.01"
                                onchange="updateField('{{ $registro->id }}', 'economico', this.value)">
                        </td>
                        <td class="number-column">
                            <input type="number" 
                                class="form-control form-control-sm number-input"
                                value="{{ $registro->objetivo_real }}"
                                step="0.01"
                                onchange="updateField('{{ $registro->id }}', 'objetivo_real', this.value)">
                        </td>
                        <td class="number-column">
                            <input type="number" 
                                class="form-control form-control-sm number-input"
                                value="{{ $registro->objetivo_fake }}"
                                step="0.01"
                                onchange="updateField('{{ $registro->id }}', 'objetivo_fake', this.value)">
                        </td>
                        <td class="number-column">
                            <input type="number" 
                                class="form-control form-control-sm number-input"
                                value="{{ $registro->precio }}"
                                data-id="{{ $registro->id }}"
                                data-field="precio"
                                data-display="{{ number_format($registro->precio, 2, ',', '.') }}"
                                step="0.01"
                                onchange="updateFieldWithFormat('{{ $registro->id }}', 'precio', this.value)">
                        </td>

                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="text-center text-muted">No hay registros de cuantitativas.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Modal para Informar Razón de Exclusión -->
<div class="modal fade" id="exclusionModal" tabindex="-1" aria-labelledby="exclusionModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exclusionModalLabel">Motivo de Exclusión</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="exclusionForm">
                    @csrf
                    <input type="hidden" id="competitorId" name="competitor_id">
                    <div class="mb-3">
                        <label for="razonExclusion" class="form-label">Razón</label>
                        <select class="form-select" id="razonExclusion" name="razon_exclusion" required>
                            <option value="Administrativa">Administrativa</option>
                            <option value="Tecnica">Técnica</option>
                            <option value="Economica">Económica</option>
                            <option value="Desconocida">Desconocida</option>
                        </select>
                    </div>
                    <button type="button" class="btn btn-primary btn-sm" onclick="submitExclusion()">Guardar</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Modal para la calculadora -->
<div class="modal fade" id="calculatorModal" tabindex="-1" aria-labelledby="calculatorModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="calculatorModalLabel">Calculadora</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <!-- Calculadora estilo suma -->
                <div class="row g-3">
                    <div class="col-12 text-end">
                        <label for="calcInput1" class="form-label visually-hidden">Número 1</label>
                        <input type="number" class="form-control text-end" id="calcInput1" placeholder="0">
                    </div>
                    <div class="col-12 text-end">
                        <label for="calcInput2" class="form-label visually-hidden">Número 2</label>
                        <input type="number" class="form-control text-end" id="calcInput2" placeholder="0">
                    </div>
                    <div class="col-12 text-end">
                        <label for="calcInput3" class="form-label visually-hidden">Número 3</label>
                        <input type="number" class="form-control text-end" id="calcInput3" placeholder="0">
                    </div>
                    <div class="col-12 text-end">
                        <label for="calcInput4" class="form-label visually-hidden">Número 4</label>
                        <input type="number" class="form-control text-end" id="calcInput4" placeholder="0">
                    </div>
                    <div class="col-12 text-end">
                        <label for="calcInput5" class="form-label visually-hidden">Número 5</label>
                        <input type="number" class="form-control text-end" id="calcInput5" placeholder="0">
                    </div>
                </div>
                <hr>
                <div class="row g-3">
                    <div class="col-12 text-end">
                        <label for="calcResult" class="form-label visually-hidden">Resultado</label>
                        <input type="text" class="form-control text-end fw-bold" id="calcResult" placeholder="Resultado" readonly>
                    </div>
                </div>
                <div class="row g-3 mt-3">
                    <div class="col-12 text-center">
                        <button class="btn btn-primary w-100" onclick="calculate()">Calcular</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function updateField(id, field, value) {
    const url = `{{ route('operations.comercial.ofertas.licitadores.update', ':id') }}`.replace(':id', id);

    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 {
            alert('Error al actualizar el campo: ' + data.message);
        }
    })
    .catch(error => console.error('Error al actualizar el campo:', error));
}

function updateAdmisión(id, value) {
    if (value === 'Excluido') {
        // Mostrar un pop-up para solicitar el motivo de exclusión
        const motivo = prompt('Indique el motivo de exclusión: Administrativa, Tecnica, Economica, Desconocida');
        if (motivo) {
            saveExclusionReason(id, motivo);
        } else {
            return; // No cambiar el valor si no se proporciona un motivo
        }
    }

    updateField(id, 'admision', value);
}

function saveExclusionReason(id, reason) {
    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({ id, reason }),
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            console.log('Motivo de exclusión guardado correctamente:', data.message);
        } else {
            alert('Error al guardar el motivo de exclusión: ' + data.message);
        }
    })
    .catch(error => console.error('Error al guardar el motivo de exclusión:', error));
}

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

    if (confirm('¿Está seguro de que desea eliminar este registro?')) {
        fetch(url, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
            },
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                const row = document.querySelector(`tr[data-id="${id}"]`);
                if (row) {
                    row.remove();
                }
            } else {
                alert('Error al eliminar el registro: ' + data.message);
            }
        })
        .catch(error => console.error('Error al eliminar el registro:', error));
    }
}
function openExclusionModal(competitorId) {
    document.getElementById('competitorId').value = competitorId; // Asignar el ID del competidor
    const modal = new bootstrap.Modal(document.getElementById('exclusionModal'));
    modal.show();
}

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('Exclusión registrada correctamente.');
            const modal = bootstrap.Modal.getInstance(document.getElementById('exclusionModal'));
            modal.hide();

            // Actualizar la tabla para reflejar el estado excluido
            const row = document.querySelector(`tr[data-id="${licitadorId}"]`);
            if (row) {
                row.querySelector('select').value = 'Excluido'; // Actualizar visualmente el combo
            }
        } 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 showCalculatorModal() {
    const modal = new bootstrap.Modal(document.getElementById('calculatorModal'));
    modal.show();
}

function calculate() {
    // Obtener los valores de los campos de entrada
    const input1 = parseFloat(document.getElementById('calcInput1').value) || 0;
    const input2 = parseFloat(document.getElementById('calcInput2').value) || 0;
    const input3 = parseFloat(document.getElementById('calcInput3').value) || 0;
    const input4 = parseFloat(document.getElementById('calcInput4').value) || 0;
    const input5 = parseFloat(document.getElementById('calcInput5').value) || 0;

    // Realiza el cálculo (suma de los 5 números)
    const result = (input1 + input2 + input3 + input4 + input5).toFixed(2); // Limitar a 2 decimales

    // Muestra el resultado en el campo de resultado
    document.getElementById('calcResult').value = result;
}
function formatNumber(number) {
    return new Intl.NumberFormat('es-ES', {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
    }).format(number);
}

function updateFieldWithFormat(id, field, value) {
    const input = document.querySelector(`input[data-id="${id}"][data-field="${field}"]`);
    if (field === 'precio') {
        input.value = value;
        input.setAttribute('data-display', formatNumber(value));
    }
    updateField(id, field, value);
}
</script>
@endsection