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

@section('wizard_content')
<div class="text-center mb-4">
    <h4>Paso 1: Detalles de la Oferta</h4>
</div>

<!-- Formulario -->
<form id="step1Form">
    @csrf

    <!-- Fila 1: Importe de Licitación, Importe Estimado y Duración -->
    <div class="row mb-3">
        <div class="col-md-4">
            <label for="importe_licitacion" class="form-label">Importe de Licitación (€)</label>
            <input type="text" name="importe_licitacion" id="importe_licitacion"
                   class="form-control text-end format-currency"
                   onblur="updateCurrencyField(this, '{{ route('operations.comercial.ofertas.apertura.save_field', ['ofertaId' => $oferta->id, 'field' => 'importe_licitacion']) }}')"
                   value="{{ $oferta->importe_licitacion !== null ? number_format($oferta->importe_licitacion, 2, ',', '.') : '' }}">
        </div>
        <div class="col-md-4">
            <label for="importe_estimado" class="form-label">Importe Estimado (€)</label>
            <input type="text" name="importe_estimado" id="importe_estimado"
                   class="form-control text-end format-currency"
                   onblur="updateCurrencyField(this, '{{ route('operations.comercial.ofertas.apertura.save_field', ['ofertaId' => $oferta->id, 'field' => 'importe_estimado']) }}')"
                   value="{{ $oferta->importe_estimado !== null ? number_format($oferta->importe_estimado, 2, ',', '.') : '' }}">
        </div>
        <div class="col-md-4">
            <label for="duracion_meses" class="form-label">Duración (Meses)</label>
            <input type="number" name="duracion_meses" id="duracion_meses"
                   class="form-control text-end"
                   onblur="updateField(this, '{{ route('operations.comercial.ofertas.apertura.save_field', ['ofertaId' => $oferta->id, 'field' => 'duracion_meses']) }}')"
                   value="{{ $oferta->duracion_meses ?? '' }}">
        </div>
    </div>

    <!-- Fila 2: Línea de Negocio, Renovable y Fidelización -->
    <div class="row mb-3">
        <div class="col-md-4">
            <label for="linea_negocio" class="form-label">Línea de Negocio</label>
            <select name="linea_negocio" id="linea_negocio"
                    class="form-control"
                    onchange="updateField(this, '{{ route('operations.comercial.ofertas.apertura.save_field', ['ofertaId' => $oferta->id, 'field' => 'linea_negocio']) }}')">
                <option value="">Seleccione una opción</option>
                @foreach(['Ads', 'Analitica', 'Consultoría', 'Contenidos', 'Formación', 'Inteligencia Artificial', 'Multimedia', 'Web'] as $opcion)
                    <option value="{{ $opcion }}" {{ optional($details)->linea_negocio == $opcion ? 'selected' : '' }}>
                        {{ $opcion }}
                    </option>
                @endforeach
            </select>
        </div>
        <div class="col-md-4">
            <label for="renovable" class="form-label">¿Es Renovable?</label>
            <select name="renovable" id="renovable"
                    class="form-control"
                    onchange="updateField(this, '{{ route('operations.comercial.ofertas.apertura.save_field', ['ofertaId' => $oferta->id, 'field' => 'renovable']) }}')">
                <option value="">Seleccione una opción</option>
                <option value="Si" {{ $details->renovable == 'Si' ? 'selected' : '' }}>Sí</option>
                <option value="No" {{ $details->renovable == 'No' ? 'selected' : '' }}>No</option>
            </select>
        </div>
        <div class="col-md-4">
            <label for="fidelizacion" class="form-label">Fidelización</label>
            <select name="fidelizacion" id="fidelizacion"
                    class="form-control"
                    onchange="updateField(this, '{{ route('operations.comercial.ofertas.apertura.save_field', ['ofertaId' => $oferta->id, 'field' => 'fidelizacion']) }}')">
                <option value="">Seleccione una opción</option>
                <option value="Nuevo" {{ $details->fidelizacion == 'Nuevo' ? 'selected' : '' }}>Nuevo</option>
                <option value="Cliente" {{ $details->fidelizacion == 'Cliente' ? 'selected' : '' }}>Cliente</option>
            </select>
        </div>
    </div>

    <!-- Fila 3: Actividad Cliente, Tarea Kanboard y Provincia -->
    <div class="row mb-3">
        <div class="col-md-4">
            <label for="actividad_cliente" class="form-label">Actividad del Cliente</label>
            <select name="actividad_cliente" id="actividad_cliente"
                    class="form-control"
                    onchange="updateField(this, '{{ route('operations.comercial.ofertas.apertura.save_field', ['ofertaId' => $oferta->id, 'field' => 'actividad_cliente']) }}')">
                <option value="">Seleccione una actividad</option>
                @foreach ($actividadesCliente as $actividad)
                    <option value="{{ $actividad }}" {{ optional($details)->actividad_cliente == $actividad ? 'selected' : '' }}>
                        {{ $actividad }}
                    </option>
                @endforeach
            </select>
        </div>
        <div class="col-md-4">
            <label for="kanboard_task" class="form-label">Tarea de Kanboard</label>
            <input list="kanboard_tasks" name="kanboard_task" id="kanboard_task"
                   class="form-control"
                   onblur="updateField(this, '{{ route('operations.comercial.ofertas.apertura.save_field', ['ofertaId' => $oferta->id, 'field' => 'kanboard_task']) }}')"
                   value="{{ optional($details)->kanboard_task }}">
            <datalist id="kanboard_tasks">
                @foreach ($kanboardTasks as $taskId => $taskTitle)
                    <option value="{{ $taskTitle }}">
                @endforeach
            </datalist>
        </div>
        <div class="col-md-4">
            <label for="provincia_oferta" class="form-label">Provincia de la Oferta</label>
            <input list="provincias" name="provincia_oferta" id="provincia_oferta"
                   class="form-control"
                   onblur="updateField(this, '{{ route('operations.comercial.ofertas.apertura.save_field', ['ofertaId' => $oferta->id, 'field' => 'provincia_oferta']) }}')"
                   value="{{ optional($details)->provincia_oferta }}">
            <datalist id="provincias">
                @foreach($provincias as $provincia)
                    <option value="{{ $provincia }}">
                @endforeach
            </datalist>
        </div>
    </div>

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

<!-- JavaScript -->
<script>
    function updateField(element, url) {
        const value = element.value || element.innerText.trim();

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

    function updateCurrencyField(element, url) {
        const rawValue = element.value || element.innerText.trim();
        const numericValue = parseFloat(rawValue.replace(/\./g, '').replace(',', '.'));

        if (isNaN(numericValue)) {
            alert('Por favor, introduce un valor numérico válido.');
            element.value = '0,00';
            return;
        }

        fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
            },
            body: JSON.stringify({ value: numericValue }),
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                element.value = numericValue.toLocaleString('es-ES', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
            } else {
                alert('Error al guardar el valor. Por favor, inténtalo de nuevo.');
            }
        })
        .catch(error => console.error('Error:', error));
    }
</script>

@endsection