@extends('layouts.simple.master')

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

<div class="container-fluid mt-5"> <!-- Changed to container-fluid and added mt-5 -->
    <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header bg-danger text-white">
                        <h5 class="mb-0">Puntuaciones Cuantitativas - {{ $oferta->codigo_proyecto }}</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>Competidor</th>
                                    <th>Admisión</th>
                                    <th>Técnico</th>
                                    <th>Económico</th>
                                    <th>Objetivo Real</th>
                                    <th>Objetivo Fake</th>
                                    <th>Precio</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($oferta->competidores as $competidor)
                                    <tr data-competitor-id="{{ $competidor->id }}">
                                        <td>{{ $competidor->competitor_nombre }}</td>
                                        <td>
                                            <select class="form-select form-select-sm" 
                                                    onchange="updateAdmision(this, {{ $competidor->id }})">
                                                @foreach(['Admitido', 'Excluido', 'Pendiente'] as $status)
                                                    <option value="{{ $status }}" 
                                                        {{ $competidor->admision == $status ? 'selected' : '' }}>
                                                        {{ $status }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </td>
                                        @if($competidor->admision == 'Admitido')
                                            <td contenteditable="true" 
                                                class="number-cell"
                                                data-field="tecnico" 
                                                data-competitor-id="{{ $competidor->id }}"
                                                onblur="updateCuantitativas(this, {{ $competidor->id }}, 'tecnico')">
                                                {{ $competidor->cuantitativas?->tecnico !== null ? number_format($competidor->cuantitativas->tecnico, 2, ',', '.') : '' }}
                                            </td>
                                            <td contenteditable="true" 
                                                class="number-cell"
                                                data-field="economico" 
                                                data-competitor-id="{{ $competidor->id }}"
                                                onblur="updateCuantitativas(this, {{ $competidor->id }}, 'economico')">
                                                {{ $competidor->cuantitativas?->economico !== null ? number_format($competidor->cuantitativas->economico, 2, ',', '.') : '' }}
                                            </td>
                                            <td contenteditable="true" 
                                                class="number-cell"
                                                data-field="objetivo_real" 
                                                data-competitor-id="{{ $competidor->id }}"
                                                onblur="updateCuantitativas(this, {{ $competidor->id }}, 'objetivo_real')">
                                                {{ $competidor->cuantitativas?->objetivo_real !== null ? number_format($competidor->cuantitativas->objetivo_real, 2, ',', '.') : '' }}
                                            </td>
                                            <td contenteditable="true" 
                                                class="number-cell"
                                                data-field="objetivo_fake" 
                                                data-competitor-id="{{ $competidor->id }}"
                                                onblur="updateCuantitativas(this, {{ $competidor->id }}, 'objetivo_fake')">
                                                {{ $competidor->cuantitativas?->objetivo_fake ?? '' }}
                                            </td>
                                            <td contenteditable="true" 
                                                data-field="precio" 
                                                data-competitor-id="{{ $competidor->id }}"
                                                onblur="updateCuantitativas(this, {{ $competidor->id }}, 'precio')">
                                                {{ $competidor->cuantitativas?->precio ?? '' }}
                                            </td>
                                        @else
                                            <td colspan="5" class="text-center text-muted">
                                                {{ $competidor->admision == 'Pendiente' ? 'Pendiente de admisión' : 'Competidor excluido' }}
                                            </td>
                                        @endif
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="card-footer">
                    <a href="{{ route('operations.comercial.ofertas.cial_ofertas.index') . '?' . request()->getQueryString() }}" 
                       class="btn btn-secondary">
                        <i class="bi bi-arrow-left"></i> Volver
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
function updateAdmision(select, competitorId) {
    const newStatus = select.value;
    
    fetch(`/operations/comercial/ofertas/cial_ofertas/updateadmision/${competitorId}`, {
        method: 'PUT',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
        },
        body: JSON.stringify({ 
            admision: newStatus,
            oferta_id: {{ $oferta->id }}
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            window.location.reload();
        }
    });
}

function updateCuantitativas(cell, competitorId, field) {
    // Get raw value and clean it
    let value = cell.textContent.trim().replace(',', '.');
    
    console.log('Updating:', { competitorId, field, value }); // Debug log

    fetch(`/operations/comercial/ofertas/cial_ofertas/cuantitativas/${competitorId}`, {
        method: 'PUT',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
        },
        body: JSON.stringify({
            competitor_id: competitorId,
            field: field,
            value: value
        })
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(data => {
        if (data.success) {
            // Visual feedback of success
            cell.style.backgroundColor = '#e8f5e9';
            setTimeout(() => cell.style.backgroundColor = '', 500);
        } else {
            throw new Error(data.error || 'Error al guardar');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error al guardar el valor');
        window.location.reload();
    });
}

// Add input event listener to format numbers while typing
document.querySelectorAll('[contenteditable="true"]').forEach(cell => {
    cell.addEventListener('input', function() {
        let value = this.textContent.trim();
        if (value) {
            this.textContent = formatNumber(value);
        }
    });
});

// Add event listeners to all editable cells
document.addEventListener('DOMContentLoaded', function() {
    const editableCells = document.querySelectorAll('[contenteditable="true"]');
    editableCells.forEach(cell => {
        cell.addEventListener('blur', function() {
            const competitorId = this.closest('tr').dataset.competitorId;
            const field = this.dataset.field;
            updateCuantitativas(this, competitorId, field);
        });
    });
});
</script>
@endsection

<style>
.number-cell {
    text-align: right !important;
    width: 120px;
}
</style>