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

@section('wizard_content')
<div class="container">
    <!-- Título -->
    <h4 class="text-center mb-4">Paso 2: Criterios de Clasificación</h4>

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

        <!-- Pregunta inicial -->
        <div class="row justify-content-center mb-4">
            <div class="col-md-6">
                <label for="has_criterios" class="form-label fw-bold text-center d-block">¿Tiene Criterios de Clasificación?</label>
                <select name="has_criterios" id="has_criterios" class="form-control text-center" onchange="toggleCriteriosSection(this.value)">
                    <option value="">Seleccione una opción</option>
                    <option value="Sí" {{ $transparency->has_criterios == 'Sí' ? 'selected' : '' }}>Sí</option>
                    <option value="No" {{ $transparency->has_criterios == 'No' ? 'selected' : '' }}>No</option>
                </select>
            </div>
        </div>

        <!-- Sección de Criterios -->
        <div id="criterios-section" class="{{ $transparency->has_criterios == 'Sí' ? '' : 'd-none' }}">
            <!-- Pesos -->
            <div class="row mb-4">
                <div class="col-md-3">
                    <label for="peso_economica" class="form-label">Peso Económica</label>
                    <input type="number" step="0.01" name="peso_economica" id="peso_economica" class="form-control text-end" value="{{ $criterios->peso_economica ?? '' }}">
                </div>
                <div class="col-md-3">
                    <label for="peso_tecnica" class="form-label">Peso Técnica</label>
                    <input type="number" step="0.01" name="peso_tecnica" id="peso_tecnica" class="form-control text-end" value="{{ $criterios->peso_tecnica ?? '' }}">
                </div>
                <div class="col-md-3">
                    <label for="peso_objetiva_real" class="form-label">Peso Objetivo Real</label>
                    <input type="number" step="0.01" name="peso_objetiva_real" id="peso_objetiva_real" class="form-control text-end" value="{{ $criterios->peso_objetiva_real ?? '' }}">
                </div>
                <div class="col-md-3">
                    <label for="peso_objetiva_fake" class="form-label">Peso Objetivo Fake</label>
                    <input type="number" step="0.01" name="peso_objetiva_fake" id="peso_objetiva_fake" class="form-control text-end" value="{{ $criterios->peso_objetiva_fake ?? '' }}">
                </div>
            </div>

            <!-- Selección de Fórmula -->
            <div class="row mb-4">
                <div class="col-12 d-flex align-items-center">
                    <label for="formula_id" class="form-label me-3">Fórmula</label>
                    <select name="formula_id" id="formula_id" class="form-control flex-grow-1 me-3">
                        <option value="">Seleccione una fórmula</option>
                        @foreach ($formulas as $formula)
                            <option value="{{ $formula->id }}" {{ $criterios->formula_id == $formula->id ? 'selected' : '' }}>
                                {{ $formula->formula_display }}
                            </option>
                        @endforeach
                    </select>
                    <button type="button" class="btn btn-primary px-4 text-nowrap" data-bs-toggle="modal" data-bs-target="#modalFormulas">
                        Añadir Nueva Fórmula
                    </button>
                </div>
            </div>
        </div>

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

@include('operations.comercial.ofertas.apertura.modals.add_formula_modal')

<script>
    // Mostrar u ocultar criterios según la selección
    function toggleCriteriosSection(value) {
        const section = document.getElementById('criterios-section');
        if (value === 'Sí') {
            section.classList.remove('d-none');
        } else {
            section.classList.add('d-none');
        }
    }
</script>
@endsection