@php
    use Illuminate\Support\Str;

    $preventa = $preventa ?? null;
    $uuid = ($preventa && $preventa->uuid) ? $preventa->uuid : (string) Str::uuid();
@endphp
<x-app-layout>
    <div class="w-full 2xl:w-10/12 mx-auto">
        <div class="w-full flex flex-row">
            <div class="w-full mx-auto p-4 bg-white">
                <div class="flex flex-row items-center justify-between mb-4">
                    <div class="flex flex-row items-center">
                        <div class="w-10 h-10 flex flex-row items-center justify-center bg-caixa/20 rounded-full">
                            <i class="fa-solid fa-phone-arrow-down-left text-caixa"></i>
                        </div>
                        <h3 class="ml-2 text-lg text-caixa font-bold">
                            Llamada entrante
                        </h3>
                    </div>


                  {{--  <button id="open-popup-btn" class="px-4 h-8 bg-caixa text-white rounded-full mr-4">Popup</button> --}}
                    <div id="popup" class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 hidden">
                        <div class="w-[700px] bg-white p-6 rounded-lg relative transform transition-all duration-500 ease-in-out">
                            <span id="close-popup-btn" class="absolute top-2 right-3 text-xl cursor-pointer"><i class="fa-regular fa-circle-xmark text-caixa"></i></span>
                            <h2 class="text-xl font-semibold mb-4">Crear nueva oficina</h2>
                            <div class="flex flex-col">
                                <label class="mt-4 ml-2">Código oficina (*)</label>
                                <input class="w-full rounded-full" type="text">
                                <label class="mt-4 ml-2">DT</label>
                                <input class="w-full rounded-full" type="text">
                                <button class="h-8 w-24 px-2 mt-6 bg-caixa text-blue-50 rounded-full transition ease-in-out duration-500 hover:bg-caixa/70">Crear</button>
                            </div>
                        </div>
                    </div>
                </div>
                <form action="/llamada" method="post" id="frm_llamada">
                    @csrf
                    <input type="hidden" id="nuevo_prospecto" name="nuevo_prospecto" value="" />
                    <input type="hidden" id="external_customer_id" name="external_customer_id" value="{{old('external_customer_id')}}" />
                    <input type="hidden" id="id_preventa" name="id_preventa" value="{{old('id_preventa', $idPreventa)}}" />
                    <input type="hidden" id="uuid" name="uuid" value="{{ old('uuid',$uuid )}}" />
                    <div class="w-full flex flex-col px-6 py-8 bg-caixa rounded-xl">
                        <h3 class="flex flex-row items-center -mt-2 mb-2 font-bold text-lg text-white"><img src="/img/logo-cb.png" class="bg-white rounded-full px-1 py-1 mr-2" width="45" />Oficina CaixaBank</h3>
                        <div class="w-full flex flex-row gap-2">
                            <div class="w-1/12 flex flex-col mr-2">
                                <label for="co_oficina" class="text-base ml-2 text-white font-extrabold">Oficina (*)</label>
                                <input type="text" name="co_oficina" id="co_oficina" value="{{old('co_oficina')}}" class="w-full h-8 text-sm text-black font-semibold text-center px-2 py-0.5 rounded-full border border-caixa transition ease-in-out duration-500 focus:border-blue-800 focus:transition focus:ease-in-out focus:duration-500 focus:outline-none focus:ring-0 focus:shadow-outline"/>
                                @error('co_oficina')
                                <div class="ml-2 font-bold text-red-500 text-xs mt-1"> {{ $message }} </div>
                                @enderror
                            </div>
                            <div class="w-4/12 flex flex-col mr-2">
                                <label for="no_oficina" class="text-base ml-2 text-white font-bold">Desc. Oficina</label>
                                <input type="text" name="no_oficina" id="no_oficina" value="{{old('no_oficina')}}" class="w-full h-8 text-sm text-black font-semibold px-4 py-0.5 rounded-full border border-caixa transition ease-in-out duration-500 focus:border-blue-800 focus:transition focus:ease-in-out focus:duration-500 focus:outline-none focus:ring-0 focus:shadow-outline"/>
                                @error('no_oficina')
                                <div class="ml-2 font-bold text-red-500 text-xs mt-1"> {{ $message }} </div>
                                @enderror
                            </div>
                            <div class="w-1/12 flex flex-col mr-2">
                                <label for="co_dan" class="text-base ml-2 text-white font-bold">DAN</label>
                                <input type="text" name="co_dan" id="co_dan" value="{{old('co_dan')}}" class="w-full h-8 text-sm text-black font-semibold px-4 py-0.5 rounded-full border border-caixa transition ease-in-out duration-500 focus:border-blue-800 focus:transition focus:ease-in-out focus:duration-500 focus:outline-none focus:ring-0 focus:shadow-outline"/>
                                @error('co_dan')
                                <div class="ml-2 font-bold text-red-500 text-xs mt-1"> {{ $message }} </div>
                                @enderror
                            </div>
                            <div class="w-3/12 flex flex-col mr-2">
                                <label for="no_dan" class="text-base ml-2 text-white font-bold">Desc. DAN</label>
                                <input type="text" name="no_dan" id="no_dan" value="{{old('no_dan')}}" class="w-full h-8 text-sm text-black font-semibold px-4 py-0.5 rounded-full border border-caixa transition ease-in-out duration-500 focus:border-blue-800 focus:transition focus:ease-in-out focus:duration-500 focus:outline-none focus:ring-0 focus:shadow-outline"/>
                                @error('no_dan')
                                <div class="ml-2 font-bold text-red-500 text-xs mt-1"> {{ $message }} </div>
                                @enderror
                            </div>
                            <div class="w-3/12 flex flex-col mr-2">
                                <label for="no_dt" class="text-base ml-2 text-white font-bold">DT</label>
                                <input type="text" name="no_dt" id="no_dt" value="{{old('no_dt')}}" class="w-full h-8 text-sm text-black font-semibold px-4 py-0.5 rounded-full border border-caixa transition ease-in-out duration-500 focus:border-blue-800 focus:transition focus:ease-in-out focus:duration-500 focus:outline-none focus:ring-0 focus:shadow-outline"/>
                                @error('no_dt')
                                <div class="ml-2 font-bold text-red-500 text-xs mt-1"> {{ $message }} </div>
                                @enderror
                            </div>
                        </div>
                        <div class="w-full flex flex-row mt-2 gap-2">
                            <div class="w-2/12 flex flex-col mr-2">
                                <label for="telefono_gestor" class="text-base ml-2 text-white font-bold">Telf. Gestor (*)</label>
                                <input type="text" name="telefono_gestor" id="telefono_gestor" value="{{old('telefono_gestor')}}" class="w-full h-8 text-sm text-black font-semibold px-4 py-0.5 rounded-full border border-caixa transition ease-in-out duration-500 focus:border-blue-800 focus:transition focus:ease-in-out focus:duration-500 focus:outline-none focus:ring-0 focus:shadow-outline"/>
                                @error('telefono_gestor')
                                <div class="ml-2 font-bold text-red-500 text-xs mt-1"> {{ $message }} </div>
                                @enderror
                            </div>
                            <div class="w-5/12 flex flex-col mr-2">
                                <label for="nombre_gestor" class="text-base ml-2 text-white font-bold">Nombre Gestor (*)</label>
                                <input type="text" name="nombre_gestor" id="nombre_gestor" value="{{old('nombre_gestor')}}" class="w-full h-8 text-sm text-black font-semibold px-4 py-0.5 rounded-full border border-caixa transition ease-in-out duration-500 focus:border-blue-800 focus:transition focus:ease-in-out focus:duration-500 focus:outline-none focus:ring-0 focus:shadow-outline"/>
                                @error('nombre_gestor')
                                <div class="text-red-500 text-xs mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="w-5/12 flex flex-col mr-2">
                                <label for="email_gestor" class="text-base ml-2 text-white font-bold">Email Gestor</label>
                                <input type="text" name="email_gestor" id="email_gestor" value="{{old('email_gestor')}}" class="w-full h-8 text-sm text-black font-semibold px-4 py-0.5 rounded-full border border-caixa transition ease-in-out duration-500 focus:border-blue-800 focus:transition focus:ease-in-out focus:duration-500 focus:outline-none focus:ring-0 focus:shadow-outline"/>
                                @error('email_gestor')
                                <div class="ml-2 font-bold text-red-500 text-xs mt-1"> {{ $message }} </div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="flex flex-col bg-gray-200 px-6 py-8 mt-4 rounded-xl font-bold">
                        <h3 class="flex flex-row items-center mb-2 font-bold text-base text-black"><i class="fa-solid fa-user text-xl mr-2"></i>Cliente CaixaBank</h3>
                        <div class="flex flex-row items-center mt-4 ml-2">
                            <div class=" flex flex-row mr-6 items-center">
                                <label for="id_idioma" class="mr-2 text-base font-bold text-black">Idioma (*)</label>
                                <select id="id_idioma" name="id_idioma" class="w-32 h-8 text-sm text-black px-4 py-0.5 rounded-full border border-gray-400 transition ease-in-out duration-500 focus:border-gray-800 focus:transition focus:ease-in-out focus:duration-500 focus:outline-none focus:ring-0 focus:shadow-outline">
                                    <option value="" {{ (old("id_idioma") == null ? "selected":"") }}>Seleccionar...</option>
                                    @foreach($idiomas as $i)
                                        <option value="{{$i->id}}" {{ (old("id_idioma") == $i->id ? "selected":"") }}>{{$i->idioma}}</option>
                                    @endforeach
                                </select>
                                @error('id_idioma')
                                <div class="ml-2 font-bold text-red-500 text-sm mt-1"> {{ $message }} </div>
                                @enderror
                            </div>
                            <div class=" flex flex-row mr-6 items-center">
                                <label for="persona_empresa" class="mr-1 text-base font-bold text-black">Persona / Empresa (*)</label>
                                <select id="persona_empresa" name="persona_empresa" class="w-32 h-8 text-sm text-black px-4 py-0.5 rounded-full border border-gray-400 transition ease-in-out duration-500 focus:border-gray-800 focus:transition focus:ease-in-out focus:duration-500 focus:outline-none focus:ring-0 focus:shadow-outline">
                                 {{--   <option value="" disabled {{ (old("persona_empresa") != "P" && (old("persona_empresa") != "E") ? "selected":"") }}>Seleccionar...</option> --}}
                                    <option value="P" {{ (old("persona_empresa") !== "E" ? "selected":"") }}>Persona</option>
                                    <option value="E" {{ (old("persona_empresa") == "E" ? "selected":"") }}>Empresa</option>
                                </select>
                                @error('persona_empresa')
                                <div class="ml-2 font-bold text-red-500 text-sm mt-1"> {{ $message }} </div>
                                @enderror
                            </div>
                            <div class="flex flex-row items-center">
                                <label for="sel_proactivo" class="text-base mr-1 font-bold text-black">¿Cliente proactivo?</label>
                                <select name="sel_proactivo" id="sel_proactivo" class="h-8 text-sm text-black px-4 py-0.5 rounded-full border border-gray-400 transition ease-in-out duration-500 focus:border-gray-800 focus:transition focus:ease-in-out focus:duration-500 focus:outline-none focus:ring-0 focus:shadow-outline" onchange="cargaOrdenTrabajo()">
                                    <option value="" {{ (old("sel_proactivo") == null ? "selected":"") }}>Seleccionar...</option>
                                    <option value="1">Sí</option>
                                    <option value="0">No</option>
                                    <option value="2">No procede</option>

                                </select>
                                @error('sel_proactivo')
                                <div class="ml-2 font-bold text-red-500 text-sm mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="w-full flex flex-row gap-2 mt-4" id="cont_persona" {{ (old("dni") == null ? "style=display:none;":"") }}>
                            <div class="w-3/12 flex flex-col mr-2">
                                <label for="nombre" class="text-base ml-2 font-bold text-black">Nombre (*)</label>
                                <input type="text" name="nombre" id="nombre" value="{{old('nombre')}}" class="w-full h-8 text-sm text-black px-4 py-0.5 rounded-full border border-gray-400 transition ease-in-out duration-500 focus:border-gray-800 focus:transition focus:ease-in-out focus:duration-500 focus:outline-none focus:ring-0 focus:shadow-outline"/>
                                @error('nombre')
                                <div class="ml-2 font-bold text-red-500 text-xs mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="w-3/12 flex flex-col mr-2">
                                <label for="apellidos" class="text-base ml-2 font-bold text-black">Apellido 1</label>
                                <input type="text" name="apellidos" id="apellidos" value="{{old('apellidos')}}" class="w-full h-8 text-sm text-black px-4 py-0.5 rounded-full border border-gray-400 transition ease-in-out duration-500 focus:border-gray-800 focus:transition focus:ease-in-out focus:duration-500 focus:outline-none focus:ring-0 focus:shadow-outline"/>
                                @error('apellidos')
                                <div class="ml-2 font-bold text-red-500 text-xs mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="w-3/12 flex flex-col mr-2">
                                <label for="apellido_2" class="text-base ml-2 font-bold text-black">Apellido 2</label>
                                <input type="text" name="apellido_2" id="apellido_2" value="{{old('apellido_2')}}" class="w-full h-8 text-sm text-black px-4 py-0.5 rounded-full border border-gray-400 transition ease-in-out duration-500 focus:border-gray-800 focus:transition focus:ease-in-out focus:duration-500 focus:outline-none focus:ring-0 focus:shadow-outline"/>
                                @error('apellido_2')
                                <div class="ml-2 font-bold text-red-500 text-xs mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="w-3/12 flex flex-col mr-2">
                                <label for="dni" class="text-base ml-2 font-bold text-black">DNI/NIE</label>
                                <input type="text" name="dni" id="dni" value="{{old('dni')}}" class="w-full h-8 text-sm text-black px-4 py-0.5 rounded-full border border-gray-400 transition ease-in-out duration-500 focus:border-gray-800 focus:transition focus:ease-in-out focus:duration-500 focus:outline-none focus:ring-0 focus:shadow-outline"/>
                                @error('dni')
                                <div class="ml-2 font-bold text-red-500 text-xs mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="w-full flex flex-row gap-2 mt-4" id="cont_empresa" {{ (old("cif") == null ? "style=display:none;":"") }}>
                            <div class="w-3/12 flex flex-col mr-2">
                                <label for="nombre_empresa" class="text-base ml-2 font-bold text-black">Nombre empresa (*)</label>
                                <input type="text" name="nombre_empresa" id="nombre_empresa" value="{{old('nombre_empresa')}}" class="w-full h-8 text-sm text-black px-4 py-0.5 rounded-full border border-gray-400 transition ease-in-out duration-500 focus:border-gray-800 focus:transition focus:ease-in-out focus:duration-500 focus:outline-none focus:ring-0 focus:shadow-outline"/>
                                @error('nombre_empresa')
                                <div class="ml-2 font-bold text-red-500 text-xs mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="w-2/12 flex flex-col mr-2">
                                <label for="cif" class="text-base ml-2 font-bold text-black">CIF (*)</label>
                                <input type="text" name="cif" id="cif" value="{{old('cif')}}" class="w-full h-8 text-sm text-black px-4 py-0.5 rounded-full border border-gray-400 transition ease-in-out duration-500 focus:border-gray-800 focus:transition focus:ease-in-out focus:duration-500 focus:outline-none focus:ring-0 focus:shadow-outline"/>
                                @error('cif')
                                <div class="ml-2 font-bold text-red-500 text-xs mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="w-2/12 flex flex-col mr-2">
                                <label for="representante_legal" class="text-base ml-2 font-bold text-black">Representante legal (*)</label>
                                <input type="text" name="representante_legal" id="representante_legal" value="{{old('representante_legal')}}" class="w-full h-8 text-sm text-black px-4 py-0.5 rounded-full border border-gray-400 transition ease-in-out duration-500 focus:border-gray-800 focus:transition focus:ease-in-out focus:duration-500 focus:outline-none focus:ring-0 focus:shadow-outline"/>
                                @error('representante_legal')
                                <div class="ml-2 font-bold text-red-500 text-xs mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="w-2/12 flex flex-col mr-2">
                                <label for="apellido_1_representante_legal" class="text-base ml-2 font-bold text-black">Apellido 1</label>
                                <input type="text" name="apellido_1_representante_legal" id="apellido_1_representante_legal" value="{{old('apellido_1_representante_legal')}}" class="w-full h-8 text-sm text-black px-4 py-0.5 rounded-full border border-gray-400 transition ease-in-out duration-500 focus:border-gray-800 focus:transition focus:ease-in-out focus:duration-500 focus:outline-none focus:ring-0 focus:shadow-outline"/>
                                @error('apellido_1_representante_legal')
                                <div class="ml-2 font-bold text-red-500 text-xs mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="w-2/12 flex flex-col mr-2">
                                <label for="apellido_2_representante_legal" class="text-base ml-2 font-bold text-black">Apellido 2</label>
                                <input type="text" name="apellido_2_representante_legal" id="apellido_2_representante_legal" value="{{old('apellido_2_representante_legal')}}" class="w-full h-8 text-sm text-black px-4 py-0.5 rounded-full border border-gray-400 transition ease-in-out duration-500 focus:border-gray-800 focus:transition focus:ease-in-out focus:duration-500 focus:outline-none focus:ring-0 focus:shadow-outline"/>
                                @error('apellido_2_representante_legal')
                                <div class="ml-2 font-bold text-red-500 text-xs mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="w-2/12 flex flex-col mr-2">
                                <label for="dni_representante_legal" class="text-base ml-2 font-bold text-black">DNI Representante (*)</label>
                                <input type="text" name="dni_representante_legal" id="dni_representante_legal" value="{{old('dni_representante_legal')}}" class="w-full h-8 text-sm text-black px-4 py-0.5 rounded-full border border-gray-400 transition ease-in-out duration-500 focus:border-gray-800 focus:transition focus:ease-in-out focus:duration-500 focus:outline-none focus:ring-0 focus:shadow-outline"/>
                                @error('dni_representante_legal')
                                <div class="ml-2 font-bold text-red-500 text-xs mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="w-full flex flex-row gap-2 mt-4">
                            <div class="w-3/12 flex flex-col mr-2">
                                <label for="telefono_1" class="text-base ml-2 font-bold text-black">Telefono 1 </label>
                                <input type="text" name="telefono_1" id="telefono_1" value="{{old('telefono_1')}}" class="w-full h-8 text-sm text-black px-4 py-0.5 rounded-full border border-gray-400 transition ease-in-out duration-500 focus:border-gray-800 focus:transition focus:ease-in-out focus:duration-500 focus:outline-none focus:ring-0 focus:shadow-outline"/>
                                @error('telefono_1')
                                <div class="ml-2 font-bold text-red-500 text-xs mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="w-3/12 flex flex-col mr-2">
                                <label for="telefono_2" class="text-base ml-2 font-bold text-black">Telefono 2</label>
                                <input type="text" name="telefono_2" id="telefono_2" value="{{old('telefono_2')}}" class="w-full h-8 text-sm text-black px-4 py-0.5 rounded-full border border-gray-400 transition ease-in-out duration-500 focus:border-gray-800 focus:transition focus:ease-in-out focus:duration-500 focus:outline-none focus:ring-0 focus:shadow-outline"/>
                                @error('telefono_2')
                                <div class="ml-2 font-bold text-red-500 text-sm mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="w-6/12 flex flex-col mr-2">
                                <label for="email" class="text-base ml-2 font-bold text-black">Correo electrónico</label>
                                <input type="text" name="email" id="email" value="{{old('email')}}" class="w-full h-8 text-sm text-black px-4 py-0.5 rounded-full border border-gray-400 transition ease-in-out duration-500 focus:border-gray-800 focus:transition focus:ease-in-out focus:duration-500 focus:outline-none focus:ring-0 focus:shadow-outline"/>
                                @error('email')
                                <div class="ml-2 font-bold text-red-500 text-xs mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="w-full flex flex-row gap-2 mt-4">
                            <div class="w-6/12 flex flex-col mr-2">
                                <label for="direccion" class="text-base ml-2 font-bold text-black">Dirección</label>
                                <input type="text" name="direccion" id="direccion" value="{{old('direccion')}}" class="placeholder:text-black h-8 text-sm text-black px-4 py-0.5 rounded-full border border-gray-400 transition ease-in-out duration-500 focus:border-gray-800 focus:transition focus:ease-in-out focus:duration-500 focus:outline-none focus:ring-0 focus:shadow-outline"/>
                                @error('direccion')
                                <div class="ml-2 font-bold text-red-500 text-xs mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="w-2/12 flex flex-col mr-2">
                                <label for="localidad" class="text-base ml-2 font-bold text-black">Localidad</label>
                                <input type="text" name="localidad" id="localidad" value="{{old('localidad')}}" class="h-8 text-sm text-black px-4 py-0.5 rounded-full border border-gray-400 transition ease-in-out duration-500 focus:border-gray-800 focus:transition focus:ease-in-out focus:duration-500 focus:outline-none focus:ring-0 focus:shadow-outline"/>
                                @error('localidad')
                                <div class="ml-2 font-bold text-red-500 text-xs mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="w-2/12 flex flex-col mr-2">
                                <label for="provincia" class="text-base ml-2 font-bold text-black">Provincia</label>
                                <input type="text" name="provincia" id="provincia" value="{{old('provincia')}}" class="h-8 text-sm text-black px-4 py-0.5 rounded-full border border-gray-400 transition ease-in-out duration-500 focus:border-gray-800 focus:transition focus:ease-in-out focus:duration-500 focus:outline-none focus:ring-0 focus:shadow-outline"/>
                                @error('provincia')
                                <div class="ml-2 font-bold text-red-500 text-xs mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="w-1/12 flex flex-col mr-2">
                                <label for="codpos" class="text-base ml-2 font-bold text-black">CP</label>
                                <input type="text" name="codpos" id="codpos" value="{{old('codpos')}}"
                                       oninput="if(this.value.length > 5) this.value = this.value.slice(0, 5)"
                                       class="h-8 text-sm text-black px-4 py-0.5 rounded-full border border-gray-400 transition ease-in-out duration-500 focus:border-gray-800 focus:transition focus:ease-in-out focus:duration-500 focus:outline-none focus:ring-0 focus:shadow-outline"/>
                                @error('codpos')
                                <div class="ml-2 font-bold text-red-500 text-xs mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="w-1/12 flex flex-col mr-2">
                                <label for="centro_coste" class="text-base ml-2 font-bold text-black">Centro coste</label>
                                <input type="text" name="centro_coste" id="centro_coste" class="h-8 text-sm text-black px-4 py-0.5 rounded-full border border-gray-400 transition ease-in-out duration-500 focus:border-gray-800 focus:transition focus:ease-in-out focus:duration-500 focus:outline-none focus:ring-0 focus:shadow-outline"/>
                                @error('centro_coste')
                                <div class="ml-2 font-bold text-red-500 text-xs mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="w-full flex flex-row mt-4 gap-2">
                            <div class="w-1/12 flex flex-col mr-2">
                                <label for="sel_luz" class="text-base ml-2 font-bold text-black">¿Electricidad?</label>
                                <select name="sel_luz" id="sel_luz" class="h-8 text-sm text-black px-4 py-0.5 rounded-full border border-gray-400 transition ease-in-out duration-500 focus:border-gray-800 focus:transition focus:ease-in-out focus:duration-500 focus:outline-none focus:ring-0 focus:shadow-outline" onchange="cargaOrdenTrabajo()">
                                    <option value="" {{ (old("sel_luz") === null ? "selected":"") }}>Seleccionar...</option>
                                    <option {{old("sel_luz") === 1 ? "selected":""}} value="1">Sí</option>
                                    <option {{old("sel_luz") === 0 ? "selected":""}} value="0">No</option>
                                </select>
                                @error('sel_luz')
                                <div class="ml-2 font-bold text-red-500 text-sm mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="w-1/12 flex flex-col mr-2">
                                <label for="sel_obras" class="text-base ml-2 font-bold text-black">¿Obras?</label>
                                <select name="sel_obras" id="sel_obras" class="h-8 text-sm text-black px-4 py-0.5 rounded-full border border-gray-400 transition ease-in-out duration-500 focus:border-gray-800 focus:transition focus:ease-in-out focus:duration-500 focus:outline-none focus:ring-0 focus:shadow-outline" onchange="cargaOrdenTrabajo()">
                                    <option value="" {{ (old("sel_obras") === null ? "selected":"") }}>Seleccionar...</option>
                                    <option {{old("sel_obras") === 1 ? "selected":""}} value="1">Sí</option>
                                    <option {{old("sel_obras") === 0 ? "selected":""}} value="0">No</option>
                                </select>
                                @error('sel_obras')
                                <div class="ml-2 font-bold text-red-500 text-sm mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="w-1/12 flex flex-col mr-2">
                                <label for="sel_internet" class="text-base ml-2 font-bold text-black">¿Internet?</label>
                                <select name="sel_internet" id="sel_internet" class="h-8 text-sm text-black px-4 py-0.5 rounded-full border border-gray-400 transition ease-in-out duration-500 focus:border-gray-800 focus:transition focus:ease-in-out focus:duration-500 focus:outline-none focus:ring-0 focus:shadow-outline">
                                    <option value="" {{ (old("sel_internet") === null ? "selected":"") }}>Seleccionar...</option>
                                    <option {{old("sel_internet") === 1 ? "selected":""}} value="1">Sí</option>
                                    <option {{old("sel_internet") === 0 ? "selected":""}} value="0">No</option>
                                </select>
                                @error('sel_internet')
                                <div class="ml-2 font-bold text-red-500 text-sm mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="w-1/12 flex flex-col mr-2">
                                <label for="sel_mascotas" class="text-base ml-2 font-bold text-black">¿Mascotas?</label>
                                <select name="sel_mascotas" id="sel_mascotas" class="h-8 text-sm text-black px-4 py-0.5 rounded-full border border-gray-400 transition ease-in-out duration-500 focus:border-gray-800 focus:transition focus:ease-in-out focus:duration-500 focus:outline-none focus:ring-0 focus:shadow-outline">
                                    <option value="" {{ (old("sel_mascotas") === null ? "selected" :"") }}>Seleccionar...</option>
                                    <option {{old("sel_mascotas") === 1 ? "selected":""}} value="1">Sí</option>
                                    <option {{old("sel_mascotas") === 0 ? "selected":""}} value="0">No</option>
                                </select>
                                @error('sel_mascotas')
                                <div class="ml-2 font-bold text-red-500 text-sm mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="w-3/12 flex flex-col mr-2">
                                <label for="sel_competencia" class="text-base ml-2 font-bold text-black">¿Alarma con otra compañía?</label>
                                <select name="sel_competencia" id="sel_competencia" class="h-8 text-sm text-black px-4 py-0.5 rounded-full border border-gray-400 transition ease-in-out duration-500 focus:border-gray-800 focus:transition focus:ease-in-out focus:duration-500 focus:outline-none focus:ring-0 focus:shadow-outline" onchange="cargaOrdenTrabajo()">
                                    <option value="" {{ (old("sel_competencia") === null ? "selected":"") }}>Seleccionar...</option>
                                    <option {{old("sel_competencia") === 1 ? "selected":""}} value="1">Sí</option>
                                    <option {{old("sel_competencia") === 0 ? "selected":""}} value="0">No</option>
                                </select>
                                @error('sel_competencia')
                                <div class="ml-2 font-bold text-red-500 text-sm mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="w-5/12 flex flex-col mr-2">
                                <label for="id_competencia" class="text-base ml-2 font-bold text-black">Compañía</label>
                                <select @if(old("id_competencia") == null) disabled @endif name="id_competencia" id="id_competencia" class="h-8 text-sm text-black px-4 py-0.5 rounded-full border border-gray-400 transition ease-in-out duration-500 focus:border-gray-800 focus:transition focus:ease-in-out focus:duration-500 focus:outline-none focus:ring-0 focus:shadow-outline" onchange="cargaOrdenTrabajo()">
                                <option value="" {{ (old("id_competencia") == null ? "selected":"") }}>Seleccionar...</option>
                                @foreach($competencias as $c)
                                    <option {{old("id_competencia") == $c->id ? "selected":""}} value="{{$c->id}}">{{$c->nombre}}</option>
                                @endforeach
                                </select>
                                @error('competencia')
                                <div class="ml-2 font-bold text-red-500 text-sm mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="w-2/12 flex flex-col mr-2">
                                <label for="sel_baja" class="text-base ml-2 font-bold text-black">¿Baja y desmontaje?</label>
                                <select disabled name="sel_baja" id="sel_baja" class="h-8 text-sm text-black px-4 py-0.5 rounded-full border border-gray-400 transition ease-in-out duration-500 focus:border-gray-800 focus:transition focus:ease-in-out focus:duration-500 focus:outline-none focus:ring-0 focus:shadow-outline" onchange="cargaOrdenTrabajo()">
                                    <option value="" {{ (old("sel_baja") === null ? "selected":"") }}>Seleccionar...</option>
                                    @foreach($bajaDesmontajes as $b)
                                        <option value="{{$b->id}}" {{ (old("sel_baja") == $b->id ? "selected":"") }}>{{$b->baja}}</option>
                                    @endforeach
                                </select>
                                @error('sel_baja')
                                <div class="ml-2 font-bold text-red-500 text-sm mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="flex flex-row gap-2 mt-4">
                            <div class="w-1/12 flex flex-col mr-2">
                                <label for="sel_alarma_sd" class="text-base ml-2 font-bold text-black">¿Alarma SD?</label>
                                <select name="sel_alarma_sd" id="sel_alarma_sd" class="h-8 text-sm text-black px-4 py-0.5 rounded-full border border-gray-400 transition ease-in-out duration-500 focus:border-gray-800 focus:transition focus:ease-in-out focus:duration-500 focus:outline-none focus:ring-0 focus:shadow-outline">
                                    <option value="" {{ (old("sel_alarma_sd") === null ? "selected" :"") }}>Seleccionar...</option>
                                    <option {{old("sel_alarma_sd") === 1 ? "selected":""}} value="1">Sí</option>
                                    <option {{old("sel_alarma_sd") === 0 ? "selected":""}} value="0">No</option>
                                </select>
                                @error('sel_alarma_sd')
                                <div class="ml-2 font-bold text-red-500 text-sm mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="w-2/12 flex flex-col mr-2">
                                <label for="tipo_instalacion" class="text-base ml-2 font-bold text-black">Tipo instalación</label>
                                <select name="tipo_instalacion" id="tipo_instalacion" class="h-8 text-sm text-black px-4 py-0.5 rounded-full border border-gray-400 transition ease-in-out duration-500 focus:border-gray-800 focus:transition focus:ease-in-out focus:duration-500 focus:outline-none focus:ring-0 focus:shadow-outline">
                                    <option value="" {{ (old("tipo_instalacion") == null ? 'selected':"") }}>Seleccionar...</option>
                                    @foreach($tiposInstalacion as $i)
                                        <option value="{{$i}}" {{ (old("tipo_instalacion") == $i ? 'selected':"") }}>{{$i}}</option>
                                    @endforeach
                                </select>
                                @error('tipo_instalacion')
                                <div class="ml-2 font-bold text-red-500 text-xs mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="w-2/12 flex flex-col mr-2">
                                <label for="id_subtipo" class="text-base ml-2 font-bold text-black">Tipo vivienda/negocio</label>
                                <select name="id_subtipo" id="id_subtipo" class="h-8 text-sm text-black px-4 py-0.5 rounded-full border border-gray-400 transition ease-in-out duration-500 focus:border-gray-800 focus:transition focus:ease-in-out focus:duration-500 focus:outline-none focus:ring-0 focus:shadow-outline">
                                </select>
                                @error('id_subtipo')
                                <div class="ml-2 font-bold text-red-500 text-xs mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="w-1/12 flex flex-col mr-2">
                                <label for="metros" class="text-base ml-2 font-bold text-black">Metros</label>
                                <input type="text" name="metros" id="metros" value="{{old('metros')}}" class="h-8 text-sm text-black px-4 py-0.5 rounded-full border border-gray-400 transition ease-in-out duration-500 focus:border-gray-800 focus:transition focus:ease-in-out focus:duration-500 focus:outline-none focus:ring-0 focus:shadow-outline"/>
                                @error('metros')
                                <div class="ml-2 font-bold text-red-500 text-xs mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="w-3/12 flex flex-col">
                                <label for="id_motivo_compra" class="text-base ml-2 font-bold text-black">Motivo Compra</label>
                                <select name="id_motivo_compra" id="id_motivo_compra" class="h-8 text-sm text-black px-4 py-0.5 rounded-full border border-gray-400 transition ease-in-out duration-500 focus:border-gray-800 focus:transition focus:ease-in-out focus:duration-500 focus:outline-none focus:ring-0 focus:shadow-outline">
                                    <option value="" {{ (old("id_motivo_compra") == null ? "selected":"") }}>Seleccionar...</option>
                                    @foreach($motivos as $m)
                                        <option value="{{$m->id}}" {{ (old("id_motivo_compra") == $m->id ? "selected":"") }}>{{$m->motivo}}</option>
                                    @endforeach
                                </select>
                                @error('id_motivo_compra')
                                <div class="ml-2 font-bold text-red-500 text-xs mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="w-3/12 flex flex-col">
                                <label for="compara" class="text-base ml-2 font-bold text-black">Compara</label>
                                <select name="compara" id="compara" class="h-8 text-sm text-black px-4 py-0.5 rounded-full border border-gray-400 transition ease-in-out duration-500 focus:border-gray-800 focus:transition focus:ease-in-out focus:duration-500 focus:outline-none focus:ring-0 focus:shadow-outline">
                                    <option value="" {{ (old("compara") == null ? "selected":"") }}>Seleccionar...</option>
                                    <option value="SI" {{ (old("compara") == "SI" ? "selected":"") }}>SI</option>
                                    <option value="NO" {{ (old("compara") == "NO" ? "selected":"") }}>NO</option>
                                    <option value="NO PROCEDE" {{ (old("compara") == "NO PROCEDE" ? "selected":"") }}>NO PROCEDE</option>
                                </select>
                                @error('compara')
                                <div class="ml-2 font-bold text-red-500 text-xs mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="w-full flex flex-row mt-4 gap-4">
                            <div class="w-6/12 flex flex-col">
                                <label for="id_oferta" class="text-base ml-2 font-bold text-black">Tipo de oferta</label>
                                <select name="id_oferta" id="id_oferta" class="h-8 text-sm text-black px-4 py-0.5 rounded-full border border-gray-400 transition ease-in-out duration-500 focus:border-gray-800 focus:transition focus:ease-in-out focus:duration-500 focus:outline-none focus:ring-0 focus:shadow-outline" onchange="cargaOrdenTrabajo()">
                                </select>
                                @error('id_oferta')
                                <div class="ml-2 font-bold text-red-500 text-xs mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="w-6/12 flex flex-col">
                                <label for="origen" class="text-base ml-2 font-bold text-black">Origen</label>
                                <input type="text" name="origen" id="origen" value="{{old('origen')}}" class="h-8 text-sm text-black px-4 py-0.5 rounded-full border border-gray-400 transition ease-in-out duration-500 focus:border-gray-800 focus:transition focus:ease-in-out focus:duration-500 focus:outline-none focus:ring-0 focus:shadow-outline"/>
                            </div>
                            @error('origen')
                            <div class="ml-2 font-bold text-red-500 text-xs mt-1">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="flex flex-col">
                            <div class="flex flex-col mr-2 w-full mt-4">
                                <label class="text-base ml-2 font-bold text-black" for="observaciones_preventa">Observaciones adicionales</label>
                                <textarea rows="3" name="observaciones_preventa" id="observaciones_preventa" onchange="cargaOrdenTrabajo()" class="text-sm text-black px-4 py-2 w-full rounded-xl border border-gray-400 transition ease-in-out duration-500 focus:border-gray-800 focus:transition focus:ease-in-out focus:duration-500 focus:outline-none focus:ring-0 focus:shadow-outline">{{old('observaciones_preventa')}}</textarea>
                            </div>
                            <div class="flex flex-col mr-2 w-full mt-4">
                                <label class="text-base ml-2 font-bold text-black" for="orden_trabajo">Orden de trabajo</label>
                                <textarea readonly rows="8" name="orden_trabajo" id="orden_trabajo" class="text-sm text-black px-4 py-2 w-full rounded-xl border border-gray-400 transition ease-in-out duration-500 focus:border-gray-800 focus:transition focus:ease-in-out focus:duration-500 focus:outline-none focus:ring-0 focus:shadow-outline">{{old('orden_trabajo')}}</textarea>
                            </div>
                            {{-- Campos llamada --}}
                            <div class="flex flex-row w-full mt-4 gap-4">
                                <div class="flex flex-col w-full">
                                    <label class="text-base ml-2 font-bold text-black" for="tipo_llamada">Tipo llamada</label>
                                    <select type="text" name="tipo_llamada" id="tipo_llamada" class="h-8 text-sm text-black px-4 py-0.5 rounded-full border border-gray-400 transition ease-in-out duration-500 focus:border-gray-800 focus:transition focus:ease-in-out focus:duration-500 focus:outline-none focus:ring-0 focus:shadow-outline">
                                        <option selected disabled value="">Seleccionar</option>
                                        @foreach($tipoLlamada as $c=>$t)
                                            @if($c !== 'G' && $c !== 'SMS' && $c !== 'C' && $c !== 'I')
                                                <option value={{$c}} {{ old('tipo_llamada') == $c ? 'selected' : '' }}>{{$t}}</option>
                                            @endif
                                        @endforeach
                                    </select>
                                    @error('tipo_llamada')
                                    <div class="ml-2 font-bold text-red-500 text-sm mt-1">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="flex flex-col w-full">
                                    <label class="text-base ml-2 font-bold text-black" for="id_estado">Estado</label>
                                    <select type="text" name="id_estado" id="id_estado" class="h-8 text-sm text-black px-4 py-0.5 rounded-full border border-gray-400 transition ease-in-out duration-500 focus:border-gray-800 focus:transition focus:ease-in-out focus:duration-500 focus:outline-none focus:ring-0 focus:shadow-outline">
                                        <option selected disabled value="">Seleccionar</option>
                                        @foreach($estados as $e)
                                            <option value="{{ $e->id }}" {{ old('id_estado') == $e->id ? 'selected' : '' }}>{{$e->estado}}</option>
                                        @endforeach
                                    </select>
                                    @error('id_estado')
                                    <div class="ml-2 font-bold text-red-500 text-sm mt-1">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="flex flex-col w-full">
                                    <label class="text-base ml-2 font-bold text-black" for="id_sub_estado">Subestado</label>
                                    <select type="text" name="id_sub_estado" id="id_sub_estado" class="h-8 text-sm text-black px-4 py-0.5 rounded-full border border-gray-400 transition ease-in-out duration-500 focus:border-gray-800 focus:transition focus:ease-in-out focus:duration-500 focus:outline-none focus:ring-0 focus:shadow-outline">
                                        <option selected disabled value="">Seleccionar</option>
                                        @foreach($subestados as $s)
                                            <option id_estado="{{$s->estado_id}}" value="{{ $s->id }}" {{ old('id_sub_estado') == $s->id ? 'selected' : '' }}>{{$s->subestado}}</option>
                                        @endforeach
                                    </select>
                                    @error('id_sub_estado')
                                    <div class="ml-2 font-bold text-red-500 text-sm mt-1">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="w-full flex flex-col">
                                    <label for="fePedido" class="text-base ml-2 font-bold text-black">Fecha pedido</label>
                                    <p id="fePedido" class="h-8 pt-1 text-sm text-black px-4 py-0.5 rounded-full border border-gray-400 transition ease-in-out duration-500 focus:border-gray-800 focus:transition focus:ease-in-out focus:duration-500 focus:outline-none focus:ring-0 focus:shadow-outline"> @if($fePedido == null)  @else {{$fePedido}} @endif </p>
                                </div>
                                {{--<div class="w-full flex flex-col">
                                    <label for="gestorPedido" class="text-base ml-2 font-bold text-black">Gestor pedido</label>
                                    <p id="gestorPedido" class="h-8 pt-1 text-sm text-black px-4 py-0.5 rounded-full border border-gray-400 transition ease-in-out duration-500 focus:border-gray-800 focus:transition focus:ease-in-out focus:duration-500 focus:outline-none focus:ring-0 focus:shadow-outline"> @if($gestorPedido == null)  @else {{$gestorPedido->name}} @endif </p>
                                </div>--}}
                                <div class="w-full flex flex-col">
                                    <label for="gestorPreventa" class="text-base ml-2 font-bold text-black">Gestor preventa</label>
                                    <p id="gestorPreventa" class="h-8 pt-1 text-sm text-black px-4 py-0.5 rounded-full border border-gray-400 transition ease-in-out duration-500 focus:border-gray-800 focus:transition focus:ease-in-out focus:duration-500 focus:outline-none focus:ring-0 focus:shadow-outline"> @if($gestorPreventa == null)  @else {{$gestorPreventa[0]->name}} @endif </p>
                                </div>
                            </div>
                            <div class="flex flex-row items-center mt-4 gap-4">
                                <div class="flex flex-col w-full">
                                    <label class="text-base ml-2 font-bold text-black" for="prospecto">Prospecto</label>
                                    <input type="text" name="prospecto" id="prospecto" value="{{old('prospecto')}}" class="h-8 text-sm text-black px-4 py-0.5 rounded-full border border-gray-400 transition ease-in-out duration-500 focus:border-gray-800 focus:transition focus:ease-in-out focus:duration-500 focus:outline-none focus:ring-0 focus:shadow-outline"/>
                                    @error('prospecto')
                                    <div class="ml-2 font-bold text-red-500 text-sm mt-1">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="flex flex-col w-full">
                                    <label class="text-base ml-2 font-bold text-black" for="pedido">Pedido</label>
                                    @if(env('ORIGN_ENABLED',false) == true && env('ORIGN_BUTTON_ENABLED',false) == true)
                                        <div class="flex items-center gap-2">
                                            <input type="text" name="pedido" id="pedido" maxlength="8" value="{{old('pedido')}}" class="h-8 text-sm text-black px-4 py-0.5 rounded-l-full border border-gray-400 transition ease-in-out duration-500 focus:border-gray-800 focus:transition focus:ease-in-out focus:duration-500 focus:outline-none focus:ring-0 focus:shadow-outline"/>
                                            <button id="send-pedido" type="button" onclick="sendPedido()" class="px-4 py-1 bg-gray-800 text-white rounded-r-full">ORIGN</button>
                                        </div>
                                    @else
                                        <input type="text" name="pedido" id="pedido" maxlength="8" value="{{old('pedido')}}" class="h-8 text-sm text-black px-4 py-0.5 rounded-full border border-gray-400 transition ease-in-out duration-500 focus:border-gray-800 focus:transition focus:ease-in-out focus:duration-500 focus:outline-none focus:ring-0 focus:shadow-outline"/>
                                    @endif
                                    @error('pedido')
                                    <div class="ml-2 font-bold text-red-500 text-sm mt-1">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="flex flex-col w-full">
                                    <label class="text-base ml-2 font-bold text-black" for="fe_seguimiento">Fecha seguimiento</label>
                                    <input type="date" name="fe_seguimiento" id="fe_seguimiento" value="{{old('fe_seguimiento')}}" class="h-8 text-sm text-black px-4 py-0.5 rounded-full border border-gray-400 transition ease-in-out duration-500 focus:border-gray-800 focus:transition focus:ease-in-out focus:duration-500 focus:outline-none focus:ring-0 focus:shadow-outline"/>
                                    @error('fe_seguimiento')
                                    <div class="ml-2 font-bold text-red-500 text-sm mt-1">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="flex flex-col w-full">
                                    <label class="text-base ml-2 font-bold text-black" for="fe_instalacion">Fecha instalación</label>
                                    <input type="date" name="fe_instalacion" id="fe_instalacion" value="{{old('fe_instalacion')}}" class="h-8 text-sm text-black px-4 py-0.5 rounded-full border border-gray-400 transition ease-in-out duration-500 focus:border-gray-800 focus:transition focus:ease-in-out focus:duration-500 focus:outline-none focus:ring-0 focus:shadow-outline"/>
                                    @error('fe_instalacion')
                                    <div class="ml-2 font-bold text-red-500 text-sm mt-1">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="flex flex-col w-full">
                                    <label class="text-base ml-2 font-bold text-black" for="ho_instalacion">Hora instalación</label>
                                    <select type="text" name="ho_instalacion" id="ho_instalacion" class="h-8 text-sm text-black px-4 py-0.5 rounded-full border border-gray-400 transition ease-in-out duration-500 focus:border-gray-800 focus:transition focus:ease-in-out focus:duration-500 focus:outline-none focus:ring-0 focus:shadow-outline">
                                        <option selected value="">Seleccionar</option>
                                        @foreach($horas as $h)
                                            <option value="{{$h}}" {{ old('ho_instalacion') == $h ? 'selected' : '' }}>{{$h}}</option>
                                        @endforeach
                                    </select>
                                    @error('ho_instalacion')
                                    <div class="ml-2 font-bold text-red-500 text-sm mt-1">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="flex flex-col mt-4">
                                <div class="flex flex-col mr-2 w-full">
                                    <label class="text-base ml-2 font-bold text-black" for="observaciones_llamada">Observaciones llamada</label>
                                    <textarea rows="6" name="observaciones_llamada" id="observaciones_llamada" class="text-sm text-black px-4 py-2 w-full rounded-xl border border-gray-400 transition ease-in-out duration-500 focus:border-gray-800 focus:transition focus:ease-in-out focus:duration-500 focus:outline-none focus:ring-0 focus:shadow-outline">{{old('observaciones_llamada')}}</textarea>
                                </div>
                                @error('observaciones_llamada')
                                <div class="ml-2 font-bold text-red-500 text-sm mt-1">{{ $message }}</div>
                                @enderror
                                <div class="flex justify-end space-x-6 mt-4">
                                    <button id="gen_prospecto" class="w-[200px] bg-green-600 rounded-full text-blue-50 text-sm transition ease-in-out duration-500 hover:bg-green-400">
                                        Generar prospecto y Enviar
                                    </button>
                                    <button class="w-24 h-8 bg-caixa rounded-full text-blue-50 text-sm transition ease-in-out duration-500 hover:bg-caixa/70" id="btn_enviar" type="submit">
                                        Enviar
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
                @if(\App\Classes\CaixaV3::userAllowEdit() && $preventa !== null)
                    <div class="flex flex-row items-center mt-4">
                        <div class="w-10 h-10 flex flex-row items-center justify-center bg-red-300 rounded-full">
                            <i class="fa-solid fa-calendar-exclamation text-red-600"></i>
                        </div>
                        <h3 class="ml-2 text-lg text-red-600 font-bold">
                            Caducidad de preventa
                        </h3>

                    @if($llamadas[count($llamadas) -1]->pedido !== null)
                        <div class="ml-4 font-bold">
                            La preventa tiene pedido y no puede caducarse
                        </div>
                    @else
                        <div class="ml-4">
                            <input type="date" id="fe_caducidad" value="{{$preventa->caducidad_at}}" class="h-8 text-sm text-black px-4 py-0.5 rounded-full border border-gray-400 transition ease-in-out duration-500 focus:border-gray-800 focus:transition focus:ease-in-out focus:duration-500 focus:outline-none focus:ring-0 focus:shadow-outline">
                            <button onclick="establecerCaducidad()" class="ml-4 w-32 h-8 bg-red-700 rounded-full text-white text-sm transition ease-in-out duration-500 hover:bg-red-700/70">Establecer</button>
                        </div>
                    @endif
                    </div>
                @endif
                @if(isset($preventa->id))
                    <div class="flex flex-row items-center mt-4">
                        <div class="w-10 h-10 flex flex-row items-center justify-center bg-orange-200 rounded-full">
                            <i class="fa-regular fa-list-tree text-orange-700"></i>
                        </div>
                        <h3 class="ml-2 text-lg text-orange-700 font-bold">
                            Histórico de llamadas
                        </h3>
                    </div>
                    <div class="w-full mx-auto ml-12 xl:ml-0">
                        @foreach($llamadas as $ll)
                            <div class="flex flex-row text-sm">
                                <div class="w-[2px] rounded-xl"></div>
                                @if(\App\Classes\CaixaV3::userAllowEdit())
                                    <div id="llamada-card-{{$ll->id}}" class="w-full flex flex-col px-6 py-4 mt-4 bg-orange-100 rounded-xl border border-orange-600 transition ease-in-out duration-500 hover:bg-orange-100/60">
                                        <div class="w-full flex flex-row items-center pb-2 ">
                                            <div class="w-2/12 flex flex-row items-center gap-2">
                                                <div>
                                                    <i class="fa-regular fa-calendar text-lg text-black"></i>
                                                </div>
                                                <div class="flex flex-col mr-2">
                                                    <p class="font-bold text-orange-800">Fecha / Hora</p>
                                                    <p class="text-black font-semibold">{{date('d/m/Y H:i', strtotime($ll->created_at))}}</p>
                                                </div>
                                            </div>
                                            <div class="w-2/12 flex flex-row items-center gap-2">
                                                <div>
                                                    <i class="fa-regular fa-phone text-lg text-black"></i>
                                                </div>
                                                <div class="edit-block hidden flex flex-row mr-2 gap-1">
                                                    <div class="flex flex-col">
                                                        <p class="font-bold text-orange-800">Tipo llamada</p>
                                                        <select id="tipo_llamada_edit_{{$ll->id}}"
                                                                type="text"
                                                                class="h-8 text-sm text-black px-4 py-0.5 rounded-full border border-gray-400 transition ease-in-out duration-500 focus:border-gray-800 focus:transition focus:ease-in-out focus:duration-500 focus:outline-none focus:ring-0 focus:shadow-outline">
                                                            <option selected value="{{$ll->tipo_llamada}}">{{ $tipoLlamada[$ll->tipo_llamada] ?? '' }}</option>
                                                            @foreach($tipoLlamada as $c=>$t)
                                                                @if($c !== 'G' && $c !== 'SMS' && $c !== 'C' && $c !== 'I' && $c !== $ll->tipo_llamada)
                                                                    <option value="{{ $c }}">{{$t}}</option>
                                                                @endif
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="non-edit-block flex flex-row mr-2 gap-1">
                                                    <p class="font-bold text-orange-800">Tipo llamada</p>
                                                    <p class="text-black font-semibold">{{ $tipoLlamada[$ll->tipo_llamada] ?? '' }}</p>
                                                </div>
                                            </div>
                                            <div class="w-2/12 flex flex-row items-center gap-2">
                                                <div>
                                                    <i class="fa-regular fa-list-ul text-lg text-black"></i>
                                                </div>
                                                <div class="edit-block hidden flex flex-row mr-2 gap-2">
                                                    <div class="flex flex-col">
                                                        <p class="font-bold text-orange-800">Estado</p>
                                                        <select id="id_estado_edit_{{ $ll->id }}"
                                                                onchange="cambioEstadoEdit({{ $ll->id }})"
                                                                class="h-8 text-sm text-black px-4 py-0.5 rounded-full border border-gray-400 transition ease-in-out duration-500 focus:border-gray-800 focus:transition focus:ease-in-out focus:duration-500 focus:outline-none focus:ring-0 focus:shadow-outline"
                                                                type="text">
                                                            <option disabled value="">Seleccionar</option>
                                                            <option selected value="{{ $ll->id_estado }}">{{ $ll->estado }}</option>
                                                            @foreach($estados as $e)
                                                                <option value="{{ $e->id }}"
                                                                    {{ $ll->id_estado == $e->id ? 'selected' : '' }}>
                                                                    {{ $e->estado }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="non-edit-block flex flex-row items-center mr-2 gap-2">
                                                    <p class="font-bold text-orange-800">Estado</p>
                                                    <p class="text-black font-semibold">{{$ll->estado}}</p>
                                                </div>
                                            </div>
                                            <div class="w-4/12 flex flex-row items-center gap-2">
                                                <div>
                                                    <i class="fa-regular fa-list-ul text-lg text-black"></i>
                                                </div>
                                                <div class="edit-block hidden flex flex-row mr-2 gap-2">
                                                    <div class="flex flex-col">
                                                        <p class="font-bold text-orange-800">Subestado</p>
                                                        <select id="id_sub_estado_edit_{{ $ll->id }}"
                                                                type="text"
                                                                class="h-8 text-sm text-black px-4 py-0.5 rounded-full border border-gray-400 transition ease-in-out duration-500 focus:border-gray-800 focus:transition focus:ease-in-out focus:duration-500 focus:outline-none focus:ring-0 focus:shadow-outline">
                                                            <option disabled value="">Seleccionar</option>
                                                            <option selected value="{{ $ll->id_sub_estado }}">{{ $ll->subestado }}</option>
                                                            @foreach($subestados as $s)
                                                                <option value="{{ $s->id }}"
                                                                        data-estado="{{ $s->estado_id }}"
                                                                    {{ $ll->id_sub_estado == $s->id ? 'selected' : '' }}>
                                                                    {{ $s->subestado }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="non-edit-block flex flex-row mr-2 gap-2">
                                                    <p class="font-bold text-orange-800">Subestado</p>
                                                    <p class="text-black font-semibold">{{$ll->subestado}}</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="w-full flex flex-row items-center pt-2 border-t border-dotted border-orange-400">

                                            <div class="w-2/12 flex flex-row items-center gap-2">
                                                <div>
                                                    <i class="fa-regular fa-user text-lg text-black"></i>
                                                </div>
                                                <div class="flex flex-col mr-2">
                                                    <p class="font-bold text-orange-800">Usuario</p>
                                                    <p class="text-black font-semibold">{{$ll->name}}</p>
                                                </div>
                                            </div>
                                            <div class="w-2/12 flex flex-row items-center gap-2">
                                                <div>
                                                    <i class="fa-regular fa-input-numeric text-lg text-black"></i>
                                                </div>
                                                <div class="flex flex-col mr-2">
                                                    <p class="font-bold text-orange-800">Prospecto</p>
                                                    <p class="text-black font-semibold">{{$ll->prospecto}}</p>
                                                </div>
                                            </div>
                                            <div class="w-2/12 flex flex-row items-center gap-2">
                                                <div>
                                                    <i class="fa-regular fa-box-circle-check text-lg text-black"></i>
                                                </div>
                                                <div class="edit-block hidden flex flex-col mr-2">
                                                    <p class="font-bold text-orange-800">Pedido</p>
                                                    <input id="pedido_edit_{{$ll->id}}" type="number" maxlength="8" value="{{$ll->pedido}}" class="w-32 h-8 text-sm text-black px-4 py-0.5 rounded-full border border-gray-400 transition ease-in-out duration-500 focus:border-gray-800 focus:transition focus:ease-in-out focus:duration-500 focus:outline-none focus:ring-0 focus:shadow-outline"/>
                                                </div>
                                                <div class="non-edit-block flex flex-col mr-2">
                                                    <p class="font-bold text-orange-800">Pedido</p>
                                                    <p class="text-black font-semibold">{{$ll->pedido}}</p>
                                                </div>
                                            </div>
                                            <div class="w-2/12 flex flex-row items-center gap-2">
                                                <div>
                                                    <i class="fa-regular fa-calendar-day text-lg text-black"></i>
                                                </div>
                                                <div class="flex flex-col mr-2">
                                                    <p class="font-bold text-orange-800">Fecha instalación</p>
                                                    <p class="text-black font-semibold">{{$ll->fe_instalacion}}</p>
                                                </div>
                                            </div>
                                            <div class="w-2/12 flex flex-row items-center gap-2">
                                                <div>
                                                    <i class="fa-regular fa-calendar-clock text-lg text-black"></i>
                                                </div>
                                                <div class="flex flex-col mr-2">
                                                    <p class="font-bold text-orange-800">Hora instalación</p>
                                                    <p class="text-black font-semibold">{{$ll->ho_instalacion}}</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="flex flex-col mt-2 pt-2 border-t border-dotted border-orange-400">
                                            <div class="flex flex-row items-center w-full gap-2">
                                                <div class="flex flex-col">
                                                    <p class="class flex flex-row items-center mb-0.5 font-black text-orange-800 gap-1">
                                                        <i class="fa-regular fa-comment text-lg text-black"></i>Observaciones llamada</p>
                                                    <p class="text-black font-semibold">{{$ll->observaciones}}</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="flex justify-between items-center mt-4">
                                            <div class="flex space-x-2">
                                                <button id="edit-button" data-mode="view"
                                                        class="w-32 h-8 bg-caixa rounded-full text-blue-50 text-sm transition ease-in-out duration-500 hover:bg-caixa/70"
                                                        onclick="showEdit({{$ll->id}})">Editar Llamada</button>
                                                <button class="edit-block hidden w-32 h-8 bg-green-600 rounded-full text-blue-50 text-sm transition ease-in-out duration-500 hover:bg-green-500"
                                                        onclick="editLlamada({{$ll->id}})">Guardar cambios</button>
                                            </div>
                                            <button class="edit-block hidden w-24 h-8 bg-red-500 rounded-full text-blue-50 text-sm transition ease-in-out duration-500 hover:bg-red-400"
                                                    onclick="deleteLlamada({{$ll->id}})">Eliminar</button>
                                        </div>
                                    </div>
                                @else
                                    <div class="w-full flex flex-col px-6 py-4 mt-4 bg-orange-100 rounded-xl border border-orange-600 transition ease-in-out duration-500 hover:bg-orange-100/60">
                                        <div class="w-full flex flex-row items-center pb-2 ">
                                            <div class="w-2/12 flex flex-row items-center gap-2">
                                                <div>
                                                    <i class="fa-regular fa-calendar text-lg text-black"></i>
                                                </div>
                                                <div class="flex flex-col mr-2">
                                                    <p class="font-bold text-orange-800">Fecha / Hora</p>
                                                    <p class="text-black font-semibold">{{date('d/m/Y H:i', strtotime($ll->created_at))}}</p>
                                                </div>
                                            </div>
                                            <div class="w-2/12 flex flex-row items-center gap-2">
                                                <div>
                                                    <i class="fa-regular fa-phone text-lg text-black"></i>
                                                </div>
                                                <div class="flex flex-row mr-2 gap-1">
                                                    <p class="font-bold text-orange-800">Tipo llamada</p>
                                                    <p class="text-black font-semibold">{{ $tipoLlamada[$ll->tipo_llamada] ?? '' }}</p>
                                                </div>
                                            </div>
                                            <div class="w-2/12 flex flex-row items-center gap-2">
                                                <div>
                                                    <i class="fa-regular fa-list-ul text-lg text-black"></i>
                                                </div>
                                                <div class="flex flex-row items-center mr-2 gap-2">
                                                    <p class="font-bold text-orange-800">Estado</p>
                                                    <p class="text-black font-semibold">{{$ll->estado}}</p>
                                                </div>
                                            </div>
                                            <div class="w-4/12 flex flex-row items-center gap-2">
                                                <div>
                                                    <i class="fa-regular fa-list-ul text-lg text-black"></i>
                                                </div>
                                                <div class="flex flex-row mr-2 gap-2">
                                                    <p class="font-bold text-orange-800">Subestado</p>
                                                    <p class="text-black font-semibold">{{$ll->subestado}}</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="w-full flex flex-row items-center pt-2 border-t border-dotted border-orange-400">

                                            <div class="w-2/12 flex flex-row items-center gap-2">
                                                <div>
                                                    <i class="fa-regular fa-user text-lg text-black"></i>
                                                </div>
                                                <div class="flex flex-col mr-2">
                                                    <p class="font-bold text-orange-800">Usuario</p>
                                                    <p class="text-black font-semibold">{{$ll->name}}</p>
                                                </div>
                                            </div>
                                            <div class="w-2/12 flex flex-row items-center gap-2">
                                                <div>
                                                    <i class="fa-regular fa-input-numeric text-lg text-black"></i>
                                                </div>
                                                <div class="flex flex-col mr-2">
                                                    <p class="font-bold text-orange-800">Prospecto</p>
                                                    <p class="text-black font-semibold">{{$ll->prospecto}}</p>
                                                </div>
                                            </div>
                                            <div class="w-2/12 flex flex-row items-center gap-2">
                                                <div>
                                                    <i class="fa-regular fa-box-circle-check text-lg text-black"></i>
                                                </div>
                                                <div class="flex flex-col mr-2">
                                                    <p class="font-bold text-orange-800">Pedido</p>
                                                    <p class="text-black font-semibold">{{$ll->pedido}}</p>
                                                </div>
                                            </div>
                                    {{--    <div class="w-2/12 flex flex-row items-center mr-2 gap-2">
                                                <div>
                                                    <i class="fa-regular fa-calendar text-lg text-black"></i>
                                                </div>
                                                <div class="flex flex-col mr-2">
                                                    <p class="font-bold text-orange-800">Fecha pedido</p>
                                                    <p class="text-black font-semibold">{{$fePedido}}</p>
                                                </div>
                                            </div> --}}
                                            <div class="w-2/12 flex flex-row items-center gap-2">
                                                <div>
                                                    <i class="fa-regular fa-calendar-day text-lg text-black"></i>
                                                </div>
                                                <div class="flex flex-col mr-2">
                                                    <p class="font-bold text-orange-800">Fecha instalación</p>
                                                    <p class="text-black font-semibold">{{$ll->fe_instalacion}}</p>
                                                </div>
                                            </div>
                                            <div class="w-2/12 flex flex-row items-center gap-2">
                                                <div>
                                                    <i class="fa-regular fa-calendar-clock text-lg text-black"></i>
                                                </div>
                                                <div class="flex flex-col mr-2">
                                                    <p class="font-bold text-orange-800">Hora instalación</p>
                                                    <p class="text-black font-semibold">{{$ll->ho_instalacion}}</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="flex flex-col mt-2 pt-2 border-t border-dotted border-orange-400">
                                            <div class="flex flex-row items-center w-full gap-2">
                                                <div class="flex flex-col">
                                                    <p class="class flex flex-row items-center mb-0.5 font-black text-orange-800 gap-1">
                                                        <i class="fa-regular fa-comment text-lg text-black"></i>Observaciones llamada</p>
                                                    <p class="text-black font-semibold">{{$ll->observaciones}}</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>
        </div>
        {{-- Mostrar los errores --}}
        @if($errors->any())
            <div class="p-5">
                <strong>Se han producido los siguientes errores:</strong>
                <ul>
                    @foreach($errors->all() as $err)
                        <li>{{ $err }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        {{-- Mostrar alert preventa cerrada --}}
        @if(session('alert'))
            <script>
                document.addEventListener('DOMContentLoaded', function() {
                    alert("{{ session('alert') }}");
                });
            </script>
        @endif
    </div>
</x-app-layout>

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key={{env('GOOGLE_API_KEY')}}&libraries=places"></script>

<script>
    var ofertas = @json($ofertas);
    var preventa = @json($preventa);
    var llamadas = @json($llamadas);
    var subtipos = @json($subtipos);
    var errors = @json($errors->all());
    var oldIdOferta = @json(old('id_oferta'));
    var oldIdSubTipo = @json(old('id_subtipo'));
    var trace = false;
    var ordenTrabajo = "";
    var creacionProspectosActivado = @json(env("CRM41_GENERATE_PROSPECTS", false));
    var canUserCreatePropects = @json($canUserCreatePropects);
    var prospecto = @json($prospecto);
    var fechaPrimeraPedidoUltima = @json($fechaPrimeraPedidoUltima);
    console.log(document.getElementById('uuid').value)
    /*******************************************************************************************************************
     *                                           CARGA INICIAL
     *******************************************************************************************************************/
    window.addEventListener('DOMContentLoaded', () => {
        document.getElementById('btn_enviar').addEventListener('click', (e)=>{enviar(e)})
        document.getElementById('gen_prospecto').addEventListener('click', (e)=>{crearProspectoEnviar(e)})
        document.getElementById('co_oficina').addEventListener('change', async ()=>{cambioOficina()});
        document.getElementById('no_oficina').addEventListener('change', async ()=>{cambioDatosOficina()});
        document.getElementById('co_dan').addEventListener('change', async ()=>{cambioDatosOficina()});
        document.getElementById('no_dan').addEventListener('change', async ()=>{cambioDatosOficina()});
        document.getElementById('no_dt').addEventListener('change', async ()=>{cambioDatosOficina()});
        document.getElementById('frm_llamada').addEventListener('keypress', async (e)=>{enterForm(e)});
        document.getElementById('persona_empresa').addEventListener('change', async ()=>{cambioPersonaEmpresa()});
        document.getElementById('codpos').addEventListener('change', async ()=>{cambioCodigoPostal()});
        document.getElementById('tipo_instalacion').addEventListener('change', async ()=>{cargaOfertas()});
        document.getElementById('tipo_instalacion').addEventListener('change', async ()=>{cargaViviendaNegocio()});
        document.getElementById('id_oferta').addEventListener('change', async ()=>{cambioOferta()});
        document.getElementById('sel_competencia').addEventListener('change', async ()=>{cambioCheckCompetencia()});
        document.getElementById('id_competencia').addEventListener('change', async ()=>{cargaOrdenTrabajo() });
        document.getElementById('sel_luz').addEventListener('change', async ()=>{cargaOrdenTrabajo()});
        document.getElementById('sel_obras').addEventListener('change', async ()=>{cargaOrdenTrabajo()});
        document.getElementById('sel_internet').addEventListener('change', async ()=>{cargaOrdenTrabajo()});
        document.getElementById('sel_mascotas').addEventListener('change', async ()=>{cargaOrdenTrabajo()});
        document.getElementById('id_estado').addEventListener('change', async ()=>{cambioEstado()});
        document.getElementById('telefono_1').addEventListener('change', async ()=>{checkTelefono('telefono_1')});
        document.getElementById('telefono_2').addEventListener('change', async ()=>{checkTelefono('telefono_2')});
        document.getElementById('dni').addEventListener('change', async ()=>{checkDni()});
        document.getElementById('direccion').addEventListener('change', async ()=>{checkDireccion()});
        document.getElementById('pedido').addEventListener('change', async ()=>{checkCrearProspecto()});
        document.getElementById('prospecto').addEventListener('change', async ()=>{checkCrearProspecto()});

        //Si estamos en pruebas de desarrollo, cargamos valores ficticios en los elementos
        //loadDefaultValues();

        //Si la información de preventa viene informada, cargarla en los elementos de pantalla
        if(preventa !== null){
            const hoy = new Date().toISOString().split('T')[0];
            const caducidad = preventa.caducidad_at;

            loadPreventaValues();
            if(llamadas[llamadas.length-1].id_estado == 5){
                alert("Esta preventa ya está cerrada y no va a poder ser modificada. Utiliza esta pantalla únicamente a efectos de consulta.");
            }else if(llamadas[llamadas.length-1].id_estado == 13){
                alert("Esta preventa es de tipo gestión y no va a poder ser modificada. Utiliza esta pantalla únicamente a efectos de consulta.");
            }else if(llamadas[llamadas.length-1].id_estado == 6){
                alert("Esta preventa es de tipo transfiero compañero y no va a poder ser modificada. Utiliza esta pantalla únicamente a efectos de consulta.");
            }else if((caducidad !== null) && (hoy > caducidad) && (llamadas[llamadas.length-1].pedido == null)){
                checkCaducidad();
                alert("Esta preventa ha caducado y no va a poder ser modificada. Sólo es posible agregar observaciones.")
            }
        }else{
            //Comprobar si hay datos sin guardar
            checkForUnsaved();
        }
        //Gestión de cambios no salvados
        setGenericListeners();

        //Elementos adicionales de GUI
        //setupPopup();
        cargaOfertas();

        cargaViviendaNegocio();

        cambioPersonaEmpresa();

        checkCrearProspecto();

        checkTipoLlamada();

        if(prospecto !== null){
            alert('Se ha generado el prospecto ' + prospecto + ' y se ha grabado la llamada automáticamente. Si no deseas hacer más cambios en esta preventa pulsa la opción de menú Llamadas.')
        }
        if(preventa !== null){
            @if(\App\Classes\CaixaV3::userAllowEdit() && $preventa !== null)
            @foreach($llamadas as $ll)
            filtrarSubestados({{ $ll->id }}, false);
            @endforeach
            @endif
        }
    });

    /*******************************************************************************************************************
     *                                  EVENTOS PROPIOS DE CADA ELEMENTO
    *******************************************************************************************************************/
    async function enterForm(e){
        if(e.keyCode == 13){
            e.preventDefault();
        }
    }

    async function checkTipoLlamada(){
        if(preventa !== null){
            document.getElementById('tipo_llamada').classList.add('pointer-events-none');
            document.getElementById('tipo_llamada').classList.add('bg-gray-200');
        }else{
            document.getElementById('tipo_llamada').classList.remove('pointer-events-none');
            document.getElementById('tipo_llamada').classList.remove('bg-gray-200');
        }
    }

    async function cambioCheckCompetencia(){
        if(document.getElementById('sel_competencia').value == true){
            document.getElementById('id_competencia').disabled = false;
            document.getElementById('sel_baja').disabled = false;
        }else{
            document.getElementById('id_competencia').value = "";
            document.getElementById('id_competencia').options[0].selected = true
            document.getElementById('sel_baja').options[0].selected = true
            document.getElementById('id_competencia').disabled = true;
            document.getElementById('sel_baja').disabled = true;
        }
        cargaOrdenTrabajo();
    }

    async function checkCaducidad(){
        const hoy = new Date().toISOString().split('T')[0];
        const caducidad = preventa.caducidad_at;

        //LLAMADA
        let arrayLlamada = ['id_estado', 'id_sub_estado', 'prospecto', 'pedido', 'fe_seguimiento', 'fe_instalacion', 'ho_instalacion'];
        const camposLlamada = arrayLlamada.map(id => document.getElementById(id)).filter(el => el !== null);
        //PREVENTA
        let arrayPreventa = ['id_idioma', 'persona_empresa', 'sel_proactivo', 'nombre', 'apellidos', 'apellido_2', 'dni', 'nombre_empresa',
                             'cif', 'representante_legal', 'apellido_1_representante_legal', 'apellido_2_representante_legal', 'dni_representante_legal',
                             'telefono_1', 'telefono_2', 'email', 'direccion', 'localidad', 'provincia', 'codpos', 'centro_coste', 'sel_luz',
                             'sel_obras', 'sel_internet', 'sel_mascotas', 'sel_competencia', 'id_competencia', 'sel_baja', 'sel_alarma_sd',
                             'tipo_instalacion', 'id_subtipo', 'metros', 'id_motivo_compra', 'compara', 'id_oferta', 'origen', 'observaciones_preventa',
                             'orden_trabajo'];
        const camposPreventa = arrayPreventa.map(id => document.getElementById(id)).filter(el => el !== null);

        //OFICINA DEJARLOS SIN BLOQUEAR
        //let arrayOficina = ['co_oficina', 'no_oficina', 'co_dan', 'no_dan', 'no_dt', 'telefono_gestor', 'nombre_gestor', 'email_gestor'];
        //const camposOficina = arrayLlamada.map(id => document.getElementById(id)).filter(el => el !== null);

        if((caducidad !== null) && (hoy > caducidad) && (llamadas[llamadas.length-1].pedido == null)){
            camposLlamada.forEach(el => {
                el.classList.add('pointer-events-none', 'bg-gray-200');
            });
            camposPreventa.forEach(el => {
                el.classList.add('pointer-events-none', 'bg-gray-200');
            });
        }else{
            camposLlamada.forEach(el => {
                el.classList.remove('pointer-events-none', 'bg-gray-200');
            });
            camposPreventa.forEach(el => {
                el.classList.remove('pointer-events-none', 'bg-gray-200');
            });
        }
    }

    async function cambioOferta(){
        if(trace) console.log('cambioOferta');
        let idOferta = document.getElementById('id_oferta').value;
        //console.log(idOferta)
        let oferta = getOfertaById(idOferta);
        if(oferta == undefined){
            return;
        }
        document.getElementById('origen').value = oferta.origen;
        ordenTrabajo = oferta.orden_trabajo;
        cargaOrdenTrabajo();
    }

    async function checkCrearProspecto(){
        let pedido = document.getElementById('pedido').value;
        let prospecto = document.getElementById('prospecto').value;
        document.getElementById('gen_prospecto').disabled = !(pedido != "" && prospecto == "" && creacionProspectosActivado == true && canUserCreatePropects == 1);
        if(creacionProspectosActivado == false || canUserCreatePropects == 0){
            document.getElementById('gen_prospecto').style.display = 'none';
        }
    }

    async function cambioCodigoPostal(){
        if(trace) console.log('cambioCodigoPostal');
        let codpos = document.getElementById('codpos').value;
        if(codpos == ""){
            return;
        }
        let centroCoste = await axios.get('/centro-coste/' + codpos);
        document.getElementById('centro_coste').value = centroCoste.data.centro_coste;
    }

    async function cambioOficina(){
        if(trace) console.log('cambioOficina');
        document.getElementById('co_oficina').style.backgroundColor = "#ffffff";
        if(document.getElementById('co_oficina').value == ""){
            return;
        }
        let oficina = await axios.get('/oficina/' + document.getElementById('co_oficina').value);
        if(oficina.data.no_oficina == undefined){
            alert("La oficina no se ha encontrado.");
        }else{
            document.getElementById('no_oficina').value = oficina.data.no_oficina == '' ? null : oficina.data.no_oficina;
            document.getElementById('no_dt').value = oficina.data.no_dt == '' ? null : oficina.data.no_dt;
            document.getElementById('co_dan').value = oficina.data.co_dan == '' ? null : oficina.data.co_dan;
            document.getElementById('no_dan').value = oficina.data.no_dan == '' ? null : oficina.data.no_dan;
            //if(oficina.data.piloto == true){
                document.getElementById('co_oficina').style.backgroundColor = "#aff5ae";
            // }else{
            //     document.getElementById('co_oficina').style.backgroundColor = "#fc8b8b";
            // }
        }
    }

    async function cambioDatosOficina(){
        if(trace) console.log('cambioDatosOficina');
        let co_oficina = document.getElementById('co_oficina').value;
        let no_oficina = document.getElementById('no_oficina').value;
        let co_dan = document.getElementById('co_dan').value;
        let no_dan = document.getElementById('no_dan').value;
        let no_dt = document.getElementById('no_dt').value;
        let oficina = await axios.post('/grabar-oficina', {co_oficina, no_oficina, co_dan, no_dan, no_dt});
    }

/*    async function cambioTelefonoGestor(){
        if(trace) console.log('cambioTelefonoGestor');
        let telefono = document.getElementById('telefono_gestor').value
        let gestor = await axios.post('/gestor/buscar', {telefono});
        if(gestor.data.nombre !== undefined){
            document.getElementById('nombre_gestor').value = gestor.data.nombre;
            document.getElementById('email_gestor').value = gestor.data.email;
        }
    }
    async function cambioDatosGestor(){
        if(trace) console.log('cambioDatosGestor');
        let telefono = document.getElementById('telefono_gestor').value;
        let nombre = document.getElementById('nombre_gestor').value;
        let email = document.getElementById('email_gestor').value;
        let gestor = await axios.post('/gestor', {telefono, nombre, email});
    }

*/

    async function cambioPersonaEmpresa(){
        if(trace) console.log('cambioPersonaEmpresa');
        let contPersona = document.getElementById('cont_persona');
        let contEmpresa = document.getElementById('cont_empresa');
        if(document.getElementById('persona_empresa').value == "P"){
            contPersona.style.display = "inherit";
            contEmpresa.style.display = "none";
        }else{
            contPersona.style.display = "none";
            contEmpresa.style.display = "inherit ";
        }
    }
    function cambioEstado(){
        let estadoObj = document.getElementById('id_estado');
        let subestadoObj = document.getElementById('id_sub_estado');
        if(estadoObj.value == "Seleccionar"){
            subestadoObj.disabled = true;
        }else{
            let options = subestadoObj.options;
            for(let i = 0; i < options.length; i++){
                if(options[i].getAttribute('id_estado') == estadoObj.value || options[i].text == "Seleccionar"){
                    options[i].hidden = false;
                }else{
                    options[i].hidden = true;
                }
            }
            subestadoObj.value="*";
            subestadoObj.disabled = false;
        }
    }
    function filtrarSubestados(id, resetSubestado) {
        const estadoSelect = document.getElementById('id_estado_edit_' + id);
        const subestadoSelect = document.getElementById('id_sub_estado_edit_' + id);

        if (!estadoSelect || !subestadoSelect) return;

        const estadoValue = estadoSelect.value;
        const options = subestadoSelect.options;

        for (let i = 0; i < options.length; i++) {
            const opt = options[i];

            if (opt.value === "") {
                opt.hidden = false;
                continue;
            }
            const optEstado = opt.getAttribute('data-estado');
            opt.hidden = (optEstado !== estadoValue);
        }

        if (resetSubestado) {
            subestadoSelect.value = "";
        } else {
            const selectedOpt = subestadoSelect.options[subestadoSelect.selectedIndex];
            if (selectedOpt && selectedOpt.hidden) {
                subestadoSelect.value = "";
            }
        }
    }

    function cambioEstadoEdit(id) {
        filtrarSubestados(id, true);
    }


    function showEdit(id) {
        const card = document.getElementById('llamada-card-' + id);
        const btn = card.querySelector('[onclick^="showEdit"]');

        let isEditing = btn.dataset.mode === "edit";

        const editBlocks = card.querySelectorAll('.edit-block');
        const nonEditBlocks = card.querySelectorAll('.non-edit-block');

        if (isEditing) {
            editBlocks.forEach(el => el.classList.add('hidden'));
            nonEditBlocks.forEach(el => el.classList.remove('hidden'));

            btn.innerText = "Editar Llamada";
            btn.dataset.mode = "view";
        } else {
            editBlocks.forEach(el => el.classList.remove('hidden'));
            nonEditBlocks.forEach(el => el.classList.add('hidden'));

            btn.innerText = "Deshacer cambios";
            btn.dataset.mode = "edit";
        }
    }



    async function checkTelefono(id){
        let telefonoObj = document.getElementById(id);
        let telefono = telefonoObj.value;
        let existe = await existeTelefono(telefono);
        if(existe > 0){
            telefonoObj.style.backgroundColor = "#f29ba4";
        }else{
            telefonoObj.style.backgroundColor = "#ffffff";
        }
    }

    async function checkDni(){
        let dniObj = document.getElementById('dni');
        let dni = dniObj.value;
        let existe = await existeDni(dni);
        if(existe > 0){
            dniObj.style.backgroundColor = "#f29ba4";
        }else{
            dniObj.style.backgroundColor = "#ffffff";
        }
    }

    async function checkDireccion(){
        let direccionObj = document.getElementById('direccion');
        let direccion = direccionObj.value;
        let existe = await existeDireccion(direccion);
        if(existe > 0){
            direccionObj.style.backgroundColor = "#f29ba4";
        }else{
            direccionObj.style.backgroundColor = "#ffffff";
        }
    }

    window.addEventListener('pageshow', (event) => {
        if (event.persisted || performance.getEntriesByType("navigation")[0]?.type === "back_forward") {
            restaurarEstadoBoton();
        }
    });
    function restaurarEstadoBoton() {
        const btn = document.getElementById('btn_enviar');
        const btn2 = document.getElementById('gen_prospecto');
        btn.disabled = false;
        btn2.disabled = false;
    }

    async function establecerCaducidad(){
        let fechaCaducidad = document.getElementById('fe_caducidad').value;
        let idPreventa = preventa.id;
        const confirmar = confirm(`¿Seguro que deseas cambiar la fecha de caducidad?`);
        if (!confirmar) {
            return;
        }

        try{
            const response = await axios.post(`/change-caducidad/${idPreventa}`, {
                caducidad_at : fechaCaducidad
            });

            const result = response.data;

            console.error(result);
            if (result.success === true) {
                alert(`La caducidad de la preventa ${idPreventa} se ha actualizado correctamente`);
                location.reload();
            } else {
                alert(`La caducidad de la preventa ${idPreventa} no se ha actualizado`);
            }
        }catch (error){
            console.error(error);
            alert('Error al actualizar la caducidad');
        }
    }

    /*******************************************************************************************************************
     *                                       ENVIO DE PEIDDO A ORIGN
     *******************************************************************************************************************/
    async function sendPedido(){
        let pedido = document.getElementById('pedido').value;
        let uuid = document.getElementById('uuid').value;
        console.log(uuid)
        const confirmar = confirm(`¿Seguro que deseas enviar el pedido ${pedido}?`);
        if (!confirmar) {
            return;
        }

        if (!/^\d{8}$/.test(pedido)) {
            alert('El pedido no tiene el formato correcto (debe tener 8 números).');
            return;
        }

        try{
            const response = await axios.post(`/send-pedido/${pedido}/${uuid}`, {
                uuid: uuid
            });

            const result = response.data;

            console.error(result);
            if (result.success === true) {
                alert(`El pedido ${pedido} se ha enviado correctamente`);
            } else {
                alert(`El pedido ${pedido} ya fue enviado previamente a ORGIN`);
            }
        }catch (error){
            console.error(error);
            alert('Error al enviar el pedido');
        }
    }
    /*******************************************************************************************************************
     *                                       MODULO DE EDICIÓN Y BORRRADO
     *******************************************************************************************************************/
    async function deleteLlamada(idLlamada){
        let confirmar = null;
        if(llamadas.length === 1){
            let preventa = llamadas[0].id_preventa
            confirmar = confirm(`ESTA ACCIÓN NO ES REVERSIBLE.\n¿Seguro que deseas eliminar la Preventa con ID ${preventa} con la llamada ID ${idLlamada}`);
        }else{
            confirmar = confirm(`ESTA ACCIÓN NO ES REVERSIBLE.\n¿Seguro que deseas eliminar la llamada con ID ${idLlamada}`);
        }

        if (!confirmar) {
            return;
        }
        try{
            let response = await axios.post(`/delete-llamada/${idLlamada}`)
            let result = response.data;
            if (result.success === true) {
                if(llamadas.length === 1){
                    alert(`La Preventa y la llamada han sido eliminadas correctamente`);
                    window.location.href = '/';
                }else{
                    alert(`La llamada ha sido eliminada correctamente`);
                    location.reload();
                }
            } else {
                alert('No se pudo eliminar la llamada');
            }
        }catch (error){
            console.error(error);
            alert('Error al eliminar la llamada');
        }
    }

    async function editLlamada(id){
        const confirmar = confirm(`¿Seguro que deseas editar la llamada con ID ${id}?`);
        if (!confirmar) {
            return;
        }

        let tipoLlamadaEdit = document.getElementById('tipo_llamada_edit_' + id).value;
        let estadoEdit = document.getElementById('id_estado_edit_' + id).value;
        let subEstadoEdit = document.getElementById('id_sub_estado_edit_' + id).value;
        let pedidoEdit = document.getElementById('pedido_edit_' + id).value;

        if (pedidoEdit !== "" && !/^\d{8}$/.test(pedidoEdit)) {
            alert('El pedido no tiene el formato correcto (debe tener 8 números o estar vacío).');
            return;
        }

        if (tipoLlamadaEdit === "") {
            alert('Tipo de llamada no puede estar vacío');
            return;
        }

        if (estadoEdit === "") {
            alert('El estado no puede estar vacío');
            return;
        }

        if (subEstadoEdit === "") {
            alert('El subestado no puede estar vacío');
            return;
        }

        let data = {
            tipo_llamada_edit : tipoLlamadaEdit,
            id_estado_edit : estadoEdit,
            id_sub_estado_edit : subEstadoEdit,
            pedido_edit : pedidoEdit
        }
        console.error(data);
        try{
            let response = await axios.post(`/edit-llamada/${id}`, data)
            let result = response.data;
            console.error(result);
            if (result.success === true) {
                alert(`La llamada ${id} ha sido editada correctamente`);
                location.reload();
            } else {
                alert('No se pudo editar la llamada');
            }
        }catch (error){
            console.error(error);
            alert('Error al editar la llamada');
        }
    }
    /*******************************************************************************************************************
     *                                       CARGAS DE ELEMENTOS
     *******************************************************************************************************************/
    async function cargaOfertas(){
        if(trace) console.log('cargaOfertas');
        let tipoInstalacion = document.getElementById('tipo_instalacion').value;
        html = `<option value="" ${oldIdOferta == null ? 'selected' : ''}>Seleccionar...</option>`;
        console.log(oldIdOferta)
        for(let i = 0;i < ofertas.length; i++){
            //console.log(ofertas[i].tipo_instalacion)
            if(ofertas[i].tipo_instalacion == tipoInstalacion){
                html += `<option value="${ofertas[i].id}" ${ofertas[i].id == parseInt(oldIdOferta) ? 'selected' : ''}>${ofertas[i].nombre}</option>`;
            }
        }
        document.getElementById('id_oferta').innerHTML = html;
    }

    async function cargaViviendaNegocio(){
        if(trace) console.log('cargaViviendaNegocio');
        let tipoInstalacion = document.getElementById('tipo_instalacion').value;
        html = `<option value="" disabled ${oldIdSubTipo == null ? 'selected' : ''}>Seleccionar...</option>`;
        console.log(oldIdSubTipo)
        for(let i = 0;i < subtipos.length; i++){
            if(subtipos[i].tipo_instalacion == tipoInstalacion){
                html += `<option value="${subtipos[i].id}" ${subtipos[i].id == parseInt(oldIdSubTipo) ? 'selected' : ''}>${subtipos[i].subtipo}</option>`;
            }
        }
        document.getElementById('id_subtipo').innerHTML = html;
    }

    function getOfertaById(id){
        for(let i = 0;i < ofertas.length; i++){
            if(ofertas[i].id == id){
                return ofertas[i];
            }
        }
    }

    function getSubtiposById(id){
        for(let i = 0;i < subtipos.length; i++){
            if(subtipos[i].id == id){
                return subtipos[i];
            }
        }
    }

    function cargaOrdenTrabajo() {
        let comentarios = document.getElementById('observaciones_preventa').value;
        let obras = "";
        let obrasObj = document.getElementById('sel_obras');
        if (obrasObj.value === "1"){
            obras = "Obras: Sí";
        } else if (obrasObj.value === "0"){
            obras = "Obras: No";
        } else if (obrasObj.value === "") {
            obras = "Obras: ";
        }
        let luz = "";
        let luzObj = document.getElementById('sel_luz');
        if (luzObj.value == "1"){
            luz = "Luz: Sí";
        } else if(luzObj.value === "0"){
            luz = "Luz: No";
        } else if(luzObj.value === "") {
            luz = "Luz: ";
        }
        let internet = "";
        let internetObj = document.getElementById('sel_internet');
        if (internetObj.value === "1"){
            internet = "Internet: Sí";
        } else if(internetObj.value === "0"){
            internet = "Internet: No";
        } else if(internetObj.value === ""){
            internet = "Internet: ";
        }
        let mascotas = "";
        let mascotasObj = document.getElementById('sel_mascotas');
        if (mascotasObj.value === "1"){
            mascotas = "Mascotas: Sí";
        } else if(mascotasObj.value === "0"){
            mascotas = "Mascotas: No";
        } else if(mascotasObj.value === ""){
            mascotas = "Mascotas: ";
        }
        let bajaObj = document.getElementById('sel_baja');
        let baja = "";
        if (bajaObj.value === "1") {
            baja = "GESTIONAR ÚNICAMENTE 2 EN 1";
        }else if(bajaObj.value === "2"){
            baja = "GESTIONAR 2 EN 1 Y DESMONTAJE ALARMA ANTERIOR";
        }else if(bajaObj.value === "3"){
            baja = "ÚNICAMENTE DESMONTAJE ALARMA ANTIGUA";
        }else if(bajaObj.value === "4"){
            baja = "NO MODIFICA";
        }
        if (baja == "Seleccionar...") {
            baja = "";
        }
        let competencia = "";  // Inicializa la variable fuera del bloque

        let competenciaObj = document.getElementById('id_competencia');
        if (competenciaObj.selectedIndex !== -1) {
            competencia = competenciaObj.options[competenciaObj.selectedIndex].text;  // Asigna el valor a la variable correcta
            if (competencia == "Seleccionar...") {
                competencia = "";
            }
        }
        let ofertaObj = document.getElementById('id_oferta');
        let oferta = "";
        if (ofertaObj.options[ofertaObj.selectedIndex] !== undefined) {
            oferta = ofertaObj.options[ofertaObj.selectedIndex].text;
        }
        if (oferta == "Seleccionar...") {
            oferta = "";
            ordenTrabajo = "";
        }
        if (oferta === '' && obrasObj.value === '' && luzObj.value === '' && internetObj.value === '' && mascotasObj.value === '' && baja === '' && competenciaObj.value === '' && comentarios === '') {
            document.getElementById('orden_trabajo').innerHTML = "";
            return;
        }

        let txt = baja + "\n";
        txt += oferta + "\n";
        txt += ordenTrabajo + "\n";
        txt += obras + "\n";
        txt += luz + "\n";
        txt += internet + "\n";
        txt += mascotas + "\n";
        txt += "Competencia: " + competencia + "\n";
        txt += "Observaciones: " + comentarios + "\n";
        //console.log(txt);
        document.getElementById('orden_trabajo').innerHTML = txt;
        //console.log({comentarios, obras, luz, internet, mascotas, baja, competencia, oferta});
    }


    /*******************************************************************************************************************
     *                                        ENVIO DEL FORMULARIO
     *******************************************************************************************************************/
    function enviar(e){
        e.preventDefault();
        //Hacer validaciones locales
        let valido = validate();
        // let valido = true;
        //Enviar formulario si validación OK
        if(valido == true){
            document.getElementById('frm_llamada').submit();
        }
    }

    /*******************************************************************************************************************
     *                                        CREACION DE PROSPECTO
     *******************************************************************************************************************/
    async function crearProspectoEnviar(e){
        e.preventDefault();
        let valido = validate();
        if(valido == true){
            if(validateProspect()){
                let result = await createProspect();
                if(result == false){
                    alert("No se ha podido crear el prospecto. Tampoco se ha grabado la llamada.");
                }else{
                    let id = result.external_customer_id;
                    let prospect = result.turpin_response.prospectId;
                    document.getElementById('external_customer_id').value = id;
                    document.getElementById('prospecto').value = prospect;
                    document.getElementById('nuevo_prospecto').value = 'S';
                    document.getElementById('frm_llamada').submit();
                }
            }
        }
    }
    async function createProspect(){
        let result = false;
        let p = Turpin.prospectObject();
        p.ExternalCustomerId = null;
        if(document.getElementById('persona_empresa').value == 'P'){
            p.Name = document.getElementById('nombre').value;
            p.MiddleName = document.getElementById('apellidos').value;
            p.Surname = document.getElementById('apellido_2').value;
            p.DocumentId = document.getElementById('dni').value;
        }else{
            p.CompanyName = document.getElementById('nombre_empresa').value;
            p.Name = document.getElementById('representante_legal').value;
            p.MiddleName = document.getElementById('apellido_1_representante_legal').value;
            p.Surname = document.getElementById('apellido_2_representante_legal').value;
            p.DocumentId = document.getElementById('cif').value;
        }
        p.DocumentIdType = "1";
        p.Phone1 = document.getElementById('telefono_1').value;
        p.Burgled = '0';
        p.ReferenceCode = document.getElementById('pedido').value;
        p.ACDGroup = '67';
        p.SupportChannel = '3';
        p.Source = ofertas.find((el)=>el.id == document.getElementById('id_oferta').value).crm41_origin_id;
        p.ManagementGroup = '2';
        p.Resource = '1';
        p.CreationUser = 'CAIXA';
        p.InstallationType = subtipos.find((el)=>el.id == document.getElementById('id_subtipo').value).crm41_installation_type_id;
        p.ProductType = 'ALARM';
        if(document.getElementById('sel_baja').value == 1 || document.getElementById('sel_baja').value == 2){
            p.SalesType = '1';
        }else{
            p.SalesType = '0';
        }
        p.ProspectStatus = 'VASIG';
        p.Comments = '';
        p.StreetType = '';
        p.StreetName = document.getElementById('direccion').value;
        p.StreetNumber = '';
        p.State = ("0" + document.getElementById('codpos').value).slice(-5).substring(0, 2);
        p.City = document.getElementById('localidad').value;
        p.ZipCode = ("0" + document.getElementById('codpos').value).slice(-5);
        p.BookingPriority = '2';
        p.BookingDate = _getProspectDateTime();
        p.BookingSalesmanId = 'CAIXA';
        p.BookingCostCenter = document.getElementById('centro_coste').value;
        p.SalesmanAssignedCostCenter = document.getElementById('centro_coste').value;
        p.AdditionalBookingData = '';
        try{
            result = await Turpin.createProspect(p);
            console.log(result);
        }catch(e){
            console.log(e);
        }
        return result;
    }
    function _getProspectDateTime(){
        const now = new Date();
        const formatted = now.getFullYear() + '-' +
            String(now.getMonth() + 1).padStart(2, '0') + '-' +
            String(now.getDate()).padStart(2, '0') + ' ' +
            String(now.getHours()).padStart(2, '0') + ':' +
            String(now.getMinutes()).padStart(2, '0');
        return formatted;
    }
    function validateProspect(){
        if(preventa !== null){
            const hoy = new Date().toISOString().split('T')[0];
            const caducidad = preventa.caducidad_at;

            if(llamadas[llamadas.length-1].id_estado == 5){
                alert("Esta preventa ya está cerrada y no va a poder ser modificada. Utiliza esta pantalla únicamente a efectos de consulta.");
                return false;
            }else if(llamadas[llamadas.length-1].id_estado == 13){
                alert("Esta preventa es de tipo gestión y no va a poder ser modificada. Utiliza esta pantalla únicamente a efectos de consulta.");
                return false;
            }else if(llamadas[llamadas.length-1].id_estado == 6){
                alert("Esta preventa es de tipo transfiero compañero y no va a poder ser modificada. Utiliza esta pantalla únicamente a efectos de consulta.");
                return false;
            }else if((caducidad !== null) && (hoy > caducidad) && (llamadas[llamadas.length-1].pedido == null)){
                alert("Esta preventa ha caducado y no va a poder ser modificada. Sólo es posible agregar observaciones.")
                return false;
            }
        }

        let personaEmpresa = document.getElementById('persona_empresa').value;
        let subestado = document.getElementById('id_sub_estado').value;
        let nombreEmpresa = document.getElementById('nombre_empresa').value;
        let nombre = document.getElementById('nombre').value;
        let telefono1 = document.getElementById('telefono_1').value;
        let direccion = document.getElementById('direccion').value;
        let localidad = document.getElementById('localidad').value;
        let codigoPostal = document.getElementById('codpos').value;
        let centroCoste = document.getElementById('centro_coste').value;
        let oferta = document.getElementById('id_oferta').value;
        let cif = document.getElementById('cif').value;
        let dni = document.getElementById('dni').value;
        let subTipo = document.getElementById('id_subtipo').value;
        let pedido = document.getElementById('pedido').value;
        const button = document.getElementById('btn_enviar');
        const button2 = document.getElementById('gen_prospecto');
        //Determina si Persona/Empresa es "P"
        let isNotPersona = personaEmpresa !== 'P';

        let schema = Joi.object({
            "Nombre empresa": isNotPersona ?
                Joi.string().required().label("Nombre empresa") :
                Joi.string().allow('').label("Nombre empresa"),
            "Nombre": isNotPersona ?
                Joi.string().allow('').label("Nombre") :
                Joi.string().required().label("Nombre"),
            "CIF/NIF": isNotPersona ?
                Joi.string().required().label("CIF/NIF") :
                Joi.string().allow('').label("CIF/NIF"),
            "DNI/NIE": isNotPersona ?
                Joi.string().allow('').label("DNI/NIE") :
                Joi.string().required().label("DNI/NIE"),
            "Subestado" : Joi.valid('1').required().label("Subestado").messages({'any.only':'Solo se puede crear un prospecto en el subestado "Pedido Agendado"'}),
            "Telefono 1": Joi.string().required().label("Telefono 1"),
            "Direccion": Joi.string().required().label("Direccion"),
            "Localidad": Joi.string().required().label("Localidad"),
            "Codigo Postal": Joi.string().required().label("Codigo Postal"),
            "Centro coste": Joi.string().pattern(/^\d{1,3}$/).required().label("Centro coste").messages({"string.pattern.base": "El Centro coste debe contener entre 1 y 3 dígitos"}),
            "Oferta": Joi.string().required().label("Oferta"),
            "Subtipo": Joi.string().required().label("Subtipo"),
            "Pedido": Joi.string().pattern(/^\d{8}$/).required().label("Pedido").messages({"string.pattern.base": "El Pedido debe contener exactamente 8 números"}),
        });
        const {error} = schema.validate({
            "Nombre empresa": nombreEmpresa,
            "Nombre": nombre,
            "Telefono 1" : telefono1,
            "Direccion" : direccion,
            "Localidad" : localidad,
            "Codigo Postal" : codigoPostal,
            "Centro coste" : centroCoste,
            "Oferta" : oferta,
            "Subestado": subestado,
            "CIF/NIF": cif,
            "DNI/NIE": dni,
            "Subtipo" : subTipo,
            "Pedido" : pedido,
        }, {abortEarly: false});

        // Si hay errores, muéstralos y prevén el envío del formulario
        if (error) {
            alert(error.details.map(detail => detail.message).join("\n"));
            button.disabled = false;
            button2.disabled = false;
            return false;
        }
        button.disabled = true;
        button2.disabled = true;
        return true;
    }

    /*******************************************************************************************************************
     *                                      VALIDACION DE ELEMENTOS
     *******************************************************************************************************************/
    async function existeTelefono(telefono){
        if (!telefono || telefono.trim() === '') {
            return 0;
        }
        let response = await axios.get('/telefonos/' + telefono);
        let ocurrencias = response.data.ocurrencias;
        return ocurrencias;
    }

    async function existeDni(dni){
        if (!dni || dni.trim() === '') {
            return 0;
        }
        let response = await axios.get('/dni/' + dni);
        let ocurrencias = response.data.ocurrencias;
        return ocurrencias;
    }

    async function existeDireccion(direccion){
        if (!direccion || direccion.trim() === '') {
            return 0;
        }
        let response = await axios.get('/direccion/' + direccion);
        let ocurrencias = response.data.ocurrencias;
        return ocurrencias;
    }

    function validate()
    {
        if(preventa !== null){
            if(llamadas[llamadas.length-1].id_estado == 5){
                alert("Esta preventa ya está cerrada y no va a poder ser modificada. Utiliza esta pantalla únicamente a efectos de consulta.");
                return false;
            }else if(llamadas[llamadas.length-1].id_estado == 13){
                alert("Esta preventa es de tipo gestión y no va a poder ser modificada. Utiliza esta pantalla únicamente a efectos de consulta.");
                return false;
            }else if(llamadas[llamadas.length-1].id_estado == 6){
                alert("Esta preventa es de tipo transfiero compañero y no va a poder ser modificada. Utiliza esta pantalla únicamente a efectos de consulta.");
                return false;
            }
        }

        // Obtén los valores de los campos
        let generarProspecto = document.getElementById('gen_prospecto').value;
        let personaEmpresa = document.getElementById('persona_empresa').value;
        let prospecto = document.getElementById('prospecto').value;
        let pedido = document.getElementById('pedido').value;
        let motivoCompra = document.getElementById('id_motivo_compra').value;
        let compara = document.getElementById('compara').value;
        let estado = document.getElementById('id_estado').value;
        let subestado = document.getElementById('id_sub_estado').value;
        let tipoLlamada = document.getElementById('tipo_llamada').value;
        let feInstalacion = document.getElementById('fe_instalacion').value;
        let hoInstalacion = document.getElementById('ho_instalacion').value;
        let observacionesLlamada = document.getElementById('observaciones_llamada').value;
        let metros = document.getElementById('metros').value;
        let luz = document.getElementById('sel_luz').value;
        let obras = document.getElementById('sel_obras').value;
        let internet = document.getElementById('sel_internet').value;
        let selCompetencia = document.getElementById('sel_competencia').value;
        let coOficina = document.getElementById('co_oficina').value;
        let tipoInstalacion = document.getElementById('tipo_instalacion').value;
        let telefonoGestor = document.getElementById('telefono_gestor').value;
        let nombreGestor = document.getElementById('nombre_gestor').value;
        let nombreEmpresa = document.getElementById('nombre_empresa').value;
        let cif = document.getElementById('cif').value;
        let representanteLegal = document.getElementById('representante_legal').value;
        let dniRepresentanteLegal = document.getElementById('dni_representante_legal').value;
        let nombre = document.getElementById('nombre').value;
        let apellidos = document.getElementById('apellidos').value;
        let apellido2 = document.getElementById('apellido_2').value;
        let apellido1representante = document.getElementById('apellido_1_representante_legal').value;
        let apellido2representante = document.getElementById('apellido_2_representante_legal').value;
        let dni = document.getElementById('dni').value;
        let idioma = document.getElementById('id_idioma').value;
        let proactivo = document.getElementById('sel_proactivo').value;
        let emailGestor = document.getElementById('email_gestor').value;
        let telefono1 = document.getElementById('telefono_1').value;
        let telefono2 = document.getElementById('telefono_2').value;
        let direccion = document.getElementById('direccion').value;
        let email = document.getElementById('email').value;
        let mascotas = document.getElementById('sel_mascotas').value;
        let alarmaSD = document.getElementById('sel_alarma_sd').value;
        let subTipo = document.getElementById('id_subtipo').value;
        let observacionesPreventa = document.getElementById('observaciones_preventa').value;
        let ordenTrabajo = document.getElementById('orden_trabajo').value;
        let localidad = document.getElementById('localidad').value;
        let provincia = document.getElementById('provincia').value;
        let codigoPostal = document.getElementById('codpos').value;
        let centroCoste = document.getElementById('centro_coste').value;
        let oferta = document.getElementById('id_oferta').value;
        let idCompetencia = document.getElementById('id_competencia').value;
        let baja = document.getElementById('sel_baja').value;
        let feSeguimiento = document.getElementById('fe_seguimiento').value;
        const button = document.getElementById('btn_enviar');
        const button2 = document.getElementById('gen_prospecto');
        button.disabled = false;

        //Determina si Persona/Empresa es "P"
        let isNotPersona = personaEmpresa !== 'P';
        //Determina si tiene alarma con otra compañia
        let isCompetencia = selCompetencia === '1';

        let schema = Joi.object({
            "Idioma" : Joi.string().required().label("Idioma"),
            "Pedido" : Joi.string().pattern(/^\d{8}$/).allow('').label("Pedido").messages({"string.pattern.base": "El Pedido debe contener exactamente 8 números"}),
            "Generar prospecto" : Joi.string().allow('').label("Generar prospecto"),
        });
        //VALIDACIONES SIN NUMERO DE PEDIDO
        if(pedido ===""){
            //VALIDACIONES POR ESTADOS
            //7 - Anulado, 8 - Cruce
            if(estado ==='7' || estado ==='8'){
                schema = schema.append({
                    "Codigo oficina" : Joi.string().allow('').label("Código de oficina"),
                    "Telefono gestor" : Joi.string().allow('').label("Telefono gestor"),
                    "Nombre gestor" : Joi.string().allow('').label("Nombre gestor"),
                    "Persona / Empresa": Joi.string().allow('').label("Persona / Empresa"),
                    "Nombre empresa": Joi.string().allow('').label("Nombre empresa"),
                    "Cif": Joi.string().allow('').label("Cif"),
                    "Representante legal": Joi.string().allow('').label("Representante legal"),
                    "Apellido 1 Representante": Joi.string().allow('').label("Apellido 1 Representante"),
                    "Apellido 2 Representante": Joi.string().allow('').label("Apellido 2 Representante"),
                    "Dni representante legal": Joi.string().allow('').label("Dni representante legal"),
                    "Nombre": Joi.string().allow('').label("Nombre") ,
                    "Apellidos": Joi.string().allow('').label("Apellidos"),
                    "Apellido 2": Joi.string().allow('').label("Apellido 2"),
                    "Dni": Joi.string().allow('').label("Dni"),
                    "Proactivo" : Joi.string().required().label("Proactivo"),
                    "Email gestor": Joi.string().allow('').label("Email gestor"),
                    "Telefono 1": Joi.string().allow('').label("telefono 1"),
                    "Telefono 2": Joi.string().allow('').label("telefono 2"),
                    "Email": Joi.string().allow('').label("Email"),
                    "Direccion" : Joi.string().allow('').label("Direccion"),
                    "Metros": Joi.string().allow('').label("Metros"),
                    "Luz": Joi.string().allow('').label("Luz"),
                    "Obras": Joi.string().allow('').label("Obras"),
                    "Internet": Joi.string().allow('').label("Internet"),
                    "Mascotas": Joi.string().allow('').label("Mascotas"),
                    "Alarma SD": Joi.string().allow('').label("Alarma SD"),
                    "Tipo instalacion": Joi.string().allow('').label("Tipo Instalacion"),
                    "Subtipo": Joi.string().allow('').label("Subtipo"),
                    "Observaciones preventa": Joi.string().allow('').label("Observaciones preventa"),
                    "Orden trabajo": Joi.string().allow('').label("Orden trabajo"),
                    "Localidad": Joi.string().allow('').label("Localidad"),
                    "Provincia": Joi.string().allow('').label("Provincia"),
                    "Codigo postal": Joi.string().allow('').label("Codigo postal"),
                    "Centro coste": Joi.string().pattern(/^\d{1,3}$/).allow('').label("Centro coste").messages({"string.pattern.base": "El Centro coste debe contener entre 1 y 3 dígitos"}),
                    "Oferta": Joi.string().allow('').label("Oferta"),
                    "Id competencia": Joi.string().allow('').label("Id competencia"),
                    "SelCompetencia": Joi.string().allow('').label("Alarma con otra compañia"),
                    "Baja": Joi.string().allow('').label("Baja"),
                    "Prospecto":Joi.string().allow('').label("Prospecto"),
                    "Fecha instalacion":Joi.string().allow('').label("Fecha instalacion"),
                    "Hora instalacion":Joi.string().allow('').label("Hora instalacion"),
                    "Observaciones llamada": Joi.string().required().label("Observaciones llamada"),
                    "Estado": Joi.string().required().label("Estado"),
                    "Subestado": Joi.string().required().label("Subestado"),
                    "Tipo llamada": Joi.string().required().label("Tipo llamada"),
                    "Motivo compra": Joi.string().allow('').label("Motivo compra"),
                    "Compara": Joi.string().allow('').label("Compara"),
                    "Fecha seguimiento": Joi.string().allow('').label("Fecha seguimiento"),
                });
            //4 - No interesa, 6 - Transfiero a Compañero
            }else if(estado ==='4' || estado ==='6'){
                schema = schema.append({
                    "Codigo oficina" : Joi.string().required().label("Código de oficina"),
                    "Telefono gestor" : Joi.string().required().label("Telefono gestor"),
                    "Nombre gestor" : Joi.string().allow('').label("Nombre gestor"),
                    "Persona / Empresa": Joi.string().allow('').label("Persona / Empresa"),
                    "Nombre empresa": Joi.string().allow('').label("Nombre empresa"),
                    "Cif": Joi.string().allow('').label("Cif"),
                    "Representante legal": Joi.string().allow('').label("Representante legal"),
                    "Apellido 1 Representante": Joi.string().allow('').label("Apellido 1 Representante"),
                    "Apellido 2 Representante": Joi.string().allow('').label("Apellido 2 Representante"),
                    "Dni representante legal": Joi.string().allow('').label("Dni representante legal"),
                    "Nombre": Joi.string().allow('').label("Nombre") ,
                    "Apellidos": Joi.string().allow('').label("Apellidos"),
                    "Apellido 2": Joi.string().allow('').label("Apellido 2"),
                    "Dni": Joi.string().allow('').label("Dni"),
                    "Proactivo" : Joi.string().required().label("Proactivo"),
                    "Email gestor": Joi.string().allow('').label("Email gestor"),
                    "Telefono 1": Joi.string().allow('').label("telefono 1"),
                    "Telefono 2": Joi.string().allow('').label("telefono 2"),
                    "Email": Joi.string().allow('').label("Email"),
                    "Direccion" : Joi.string().allow('').label("Direccion"),
                    "Metros": Joi.string().allow('').label("Metros"),
                    "Luz": Joi.string().allow('').label("Luz"),
                    "Obras": Joi.string().allow('').label("Obras"),
                    "Internet": Joi.string().allow('').label("Internet"),
                    "Mascotas": Joi.string().allow('').label("Mascotas"),
                    "Alarma SD": Joi.string().allow('').label("Alarma SD"),
                    "Tipo instalacion": Joi.string().allow('').label("Tipo Instalacion"),
                    "Subtipo": Joi.string().allow('').label("Subtipo"),
                    "Observaciones preventa": Joi.string().allow('').label("Observaciones preventa"),
                    "Orden trabajo": Joi.string().allow('').label("Orden trabajo"),
                    "Localidad": Joi.string().allow('').label("Localidad"),
                    "Provincia": Joi.string().allow('').label("Provincia"),
                    "Codigo postal": Joi.string().allow('').label("Codigo postal"),
                    "Centro coste": Joi.string().pattern(/^\d{1,3}$/).allow('').label("Centro coste").messages({"string.pattern.base": "El Centro coste debe contener entre 1 y 3 dígitos"}),
                    "Oferta": Joi.string().allow('').label("Oferta"),
                    "Id competencia": Joi.string().allow('').label("Id competencia"),
                    "SelCompetencia": Joi.string().allow('').label("Alarma con otra compañia"),
                    "Baja": Joi.string().allow('').label("Baja"),
                    "Prospecto":Joi.string().allow('').label("Prospecto"),
                    "Fecha instalacion":Joi.string().allow('').label("Fecha instalacion"),
                    "Hora instalacion":Joi.string().allow('').label("Hora instalacion"),
                    "Observaciones llamada": Joi.string().required().label("Observaciones llamada"),
                    "Estado": Joi.string().required().label("Estado"),
                    "Subestado": Joi.string().required().label("Subestado"),
                    "Tipo llamada": Joi.string().required().label("Tipo llamada"),
                    "Fecha seguimiento": Joi.string().allow('').label("Fecha seguimiento"),
                });
                //Motivo de compra nullable para estados: Transfiero compañero y Cerrado
                if(estado === '6'){
                    schema = schema.append({
                        "Motivo compra": Joi.string().allow('').label("Motivo compra"),
                        "Compara": Joi.string().allow('').label("Compara"),
                    });
                }else{
                    schema = schema.append({
                        "Motivo compra": Joi.string().allow('').label("Motivo compra"),
                        "Compara": Joi.string().required().label("Compara"),
                    });
                }
            //3 - Seguimiento, 11 - Inviable
            }else if(estado ==='3' || estado ==='11'){
                schema = schema.append({
                    "Codigo oficina" : Joi.string().required().label("Código de oficina"),
                    "Telefono gestor" : Joi.string().required().label("Telefono gestor"),
                    "Nombre gestor" : Joi.string().required().label("Nombre gestor"),
                    "Persona / Empresa": Joi.string().allow('').label("Persona / Empresa"),
                    "Nombre empresa": isNotPersona ?
                        Joi.string().required().label("Nombre empresa") :
                        Joi.string().allow('').label("Nombre empresa"),
                    "Cif": Joi.string().allow('').label("Cif"),
                    "Representante legal": Joi.string().allow('').label("Representante legal"),
                    "Apellido 1 Representante": Joi.string().allow('').label("Apellido 1 Representante"),
                    "Apellido 2 Representante": Joi.string().allow('').label("Apellido 2 Representante"),
                    "Dni representante legal": Joi.string().allow('').label("Dni representante legal"),
                    "Nombre": isNotPersona ?
                        Joi.string().allow('').label("Nombre") :
                        Joi.string().required().label("Nombre"),
                    "Apellidos": Joi.string().allow('').label("Apellidos"),
                    "Apellido 2": Joi.string().allow('').label("Apellido 2"),
                    "Dni": Joi.string().allow('').label("Dni"),
                    "Motivo compra": Joi.string().allow('').label("Motivo compra"),
                    "Proactivo" : Joi.string().required().label("Proactivo"),
                    "Email gestor": Joi.string().allow('').label("Email gestor"),
                    "Telefono 1": Joi.string().allow('').label("telefono 1"),
                    "Telefono 2": Joi.string().allow('').label("telefono 2"),
                    "Email": Joi.string().allow('').label("Email"),
                    "Direccion" : Joi.string().allow('').label("Direccion"),
                    "Metros": Joi.string().allow('').label("Metros"),
                    "Luz": Joi.string().allow('').label("Luz"),
                    "Obras": Joi.string().allow('').label("Obras"),
                    "Internet": Joi.string().allow('').label("Internet"),
                    "Mascotas": Joi.string().allow('').label("Mascotas"),
                    "Alarma SD": Joi.string().allow('').label("Alarma SD"),
                    "Tipo instalacion": Joi.string().allow('').label("Tipo Instalacion"),
                    "Subtipo": Joi.string().allow('').label("Subtipo"),
                    "Observaciones preventa": Joi.string().allow('').label("Observaciones preventa"),
                    "Orden trabajo": Joi.string().allow('').label("Orden trabajo"),
                    "Localidad": Joi.string().allow('').label("Localidad"),
                    "Provincia": Joi.string().allow('').label("Provincia"),
                    "Codigo postal": Joi.string().allow('').label("Codigo postal"),
                    "Centro coste": Joi.string().pattern(/^\d{1,3}$/).allow('').label("Centro coste").messages({"string.pattern.base": "El Centro coste debe contener entre 1 y 3 dígitos"}),
                    "Oferta": Joi.string().allow('').label("Oferta"),
                    "Id competencia": Joi.string().allow('').label("Id competencia"),
                    "SelCompetencia": Joi.string().allow('').label("Alarma con otra compañia"),
                    "Baja": Joi.string().allow('').label("Baja"),
                    "Prospecto":Joi.string().allow('').label("Prospecto"),
                    "Fecha instalacion":Joi.string().allow('').label("Fecha instalacion"),
                    "Hora instalacion":Joi.string().allow('').label("Hora instalacion"),
                    "Observaciones llamada": Joi.string().required().label("Observaciones llamada"),
                    "Estado": Joi.string().required().label("Estado"),
                    "Subestado": Joi.string().required().label("Subestado"),
                    "Tipo llamada": Joi.string().required().label("Tipo llamada"),
                });
                //En seguimiento obligatorio fecha de seguimiento
                if(estado === '3'){
                    schema = schema.append({
                        "Fecha seguimiento": Joi.string().required().label("Fecha seguimiento"),
                        "Compara": Joi.string().required().label("Compara"),
                    });
                }else{
                    schema = schema.append({
                        "Fecha seguimiento": Joi.string().allow('').label("Fecha seguimiento"),
                        "Compara": Joi.string().allow('').label("Compara"),
                    });
                }
                //10 - Preparar llamada
            }else if(estado ==='10'){
                schema = schema.append({
                    "Codigo oficina" : Joi.string().required().label("Código de oficina"),
                    "Telefono gestor" : Joi.string().allow('').label("Telefono gestor"),
                    "Nombre gestor" : Joi.string().allow('').label("Nombre gestor"),
                    "Persona / Empresa": Joi.string().allow('').label("Persona / Empresa"),
                    "Nombre empresa": Joi.string().allow('').label("Nombre empresa"),
                    "Cif": Joi.string().allow('').label("Cif"),
                    "Representante legal": Joi.string().allow('').label("Representante legal"),
                    "Apellido 1 Representante": Joi.string().allow('').label("Apellido 1 Representante"),
                    "Apellido 2 Representante": Joi.string().allow('').label("Apellido 2 Representante"),
                    "Dni representante legal": Joi.string().allow('').label("Dni representante legal"),
                    "Nombre": Joi.string().allow('').label("Nombre") ,
                    "Apellidos": Joi.string().allow('').label("Apellidos"),
                    "Apellido 2": Joi.string().allow('').label("Apellido 2"),
                    "Dni": Joi.string().allow('').label("Dni"),
                    "Motivo compra": Joi.string().allow('').label("Motivo compra"),
                    "Compara": Joi.string().allow('').label("Compara"),
                    "Proactivo" : Joi.string().required().label("Proactivo"),
                    "Email gestor": Joi.string().allow('').label("Email gestor"),
                    "Telefono 1": Joi.string().allow('').label("telefono 1"),
                    "Telefono 2": Joi.string().allow('').label("telefono 2"),
                    "Email": Joi.string().allow('').label("Email"),
                    "Direccion" : Joi.string().allow('').label("Direccion"),
                    "Metros": Joi.string().allow('').label("Metros"),
                    "Luz": Joi.string().allow('').label("Luz"),
                    "Obras": Joi.string().allow('').label("Obras"),
                    "Internet": Joi.string().allow('').label("Internet"),
                    "Mascotas": Joi.string().allow('').label("Mascotas"),
                    "Alarma SD": Joi.string().allow('').label("Alarma SD"),
                    "Tipo instalacion": Joi.string().allow('').label("Tipo Instalacion"),
                    "Subtipo": Joi.string().allow('').label("Subtipo"),
                    "Observaciones preventa": Joi.string().allow('').label("Observaciones preventa"),
                    "Orden trabajo": Joi.string().allow('').label("Orden trabajo"),
                    "Localidad": Joi.string().allow('').label("Localidad"),
                    "Provincia": Joi.string().allow('').label("Provincia"),
                    "Codigo postal": Joi.string().allow('').label("Codigo postal"),
                    "Centro coste": Joi.string().pattern(/^\d{1,3}$/).allow('').label("Centro coste").messages({"string.pattern.base": "El Centro coste debe contener entre 1 y 3 dígitos"}),
                    "Oferta": Joi.string().allow('').label("Oferta"),
                    "Id competencia": Joi.string().allow('').label("Id competencia"),
                    "SelCompetencia": Joi.string().allow('').label("Alarma con otra compañia"),
                    "Baja": Joi.string().allow('').label("Baja"),
                    "Prospecto":Joi.string().allow('').label("Prospecto"),
                    "Fecha instalacion":Joi.string().allow('').label("Fecha instalacion"),
                    "Hora instalacion":Joi.string().allow('').label("Hora instalacion"),
                    "Observaciones llamada": Joi.string().required().label("Observaciones llamada"),
                    "Estado": Joi.string().required().label("Estado"),
                    "Subestado": Joi.string().required().label("Subestado"),
                    "Tipo llamada": Joi.string().required().label("Tipo llamada"),
                    "Fecha seguimiento": Joi.string().allow('').label("Fecha seguimiento"),
                });
                //13 - Gestión
            }else if(estado ==='13'){
                schema = schema.append({
                    "Pedido" : Joi.string().valid('').label("Pedido").messages({'any.only': 'El campo "Pedido" debe estar vacío'}),
                    "Codigo oficina": Joi.string().required().label("Código de oficina"),
                    "Telefono gestor": Joi.string().required().label("Telefono gestor"),
                    "Nombre gestor": Joi.string().required().label("Nombre gestor"),
                    "Persona / Empresa": Joi.string().allow('').label("Persona / Empresa"),
                    "Nombre empresa": Joi.string().allow('').label("Nombre empresa"),
                    "Cif": Joi.string().allow('').label("Cif"),
                    "Representante legal": Joi.string().allow('').label("Representante legal"),
                    "Apellido 1 Representante": Joi.string().allow('').label("Apellido 1 Representante"),
                    "Apellido 2 Representante": Joi.string().allow('').label("Apellido 2 Representante"),
                    "Dni representante legal": Joi.string().allow('').label("Dni representante legal"),
                    "Nombre": Joi.string().allow('').label("Nombre"),
                    "Apellidos": Joi.string().allow('').label("Apellidos"),
                    "Apellido 2": Joi.string().allow('').label("Apellido 2"),
                    "Dni": Joi.string().allow('').label("Dni"),
                    "Motivo compra": Joi.string().allow('').label("Motivo compra"),
                    "Compara": Joi.string().allow('').label("Compara"),
                    "Proactivo": Joi.string().allow('').label("Proactivo"),
                    "Email gestor": Joi.string().allow(''),
                    "Telefono 1": Joi.string().allow('').label("telefono 1"),
                    "Telefono 2": Joi.string().allow('').label("telefono 2"),
                    "Email": Joi.string().allow('').label("Email"),
                    "Direccion": Joi.string().allow('').label("Direccion"),
                    "Metros": Joi.string().allow('').label("Metros"),
                    "Luz": Joi.string().allow('').label("Luz"),
                    "Obras": Joi.string().allow('').label("Obras"),
                    "Internet": Joi.string().allow('').label("Internet"),
                    "Mascotas": Joi.string().allow('').label("Mascotas"),
                    "Alarma SD": Joi.string().allow('').label("Alarma SD"),
                    "Tipo instalacion": Joi.string().allow('').label("Tipo Instalacion"),
                    "Subtipo": Joi.string().allow('').label("Subtipo"),
                    "Observaciones preventa": Joi.string().allow('').label("Observaciones preventa"),
                    "Orden trabajo": Joi.string().allow('').label("Orden trabajo"),
                    "Localidad": Joi.string().allow('').label("Localidad"),
                    "Provincia": Joi.string().allow('').label("Provincia"),
                    "Codigo postal": Joi.string().allow('').label("Codigo postal"),
                    "Centro coste": Joi.string().allow('').label("Centro coste"),
                    "Oferta": Joi.string().allow('').label("Oferta"),
                    "Id competencia": Joi.string().allow('').label("Id competencia"),
                    "SelCompetencia": Joi.string().allow('').label("Alarma con otra compañia"),
                    "Baja": Joi.string().allow('').label("Baja"),
                    "Prospecto": Joi.string().allow('').label("Prospecto"),
                    "Fecha instalacion": Joi.string().allow('').label("Fecha instalacion"),
                    "Hora instalacion": Joi.string().allow('').label("Hora instalacion"),
                    "Observaciones llamada": Joi.string().required().label("Observaciones llamada"),
                    "Estado": Joi.string().required().label("Estado"),
                    "Subestado": Joi.string().required().label("Subestado"),
                    "Tipo llamada": Joi.string().required().label("Tipo llamada"),
                    "Fecha seguimiento": Joi.string().allow('').label("Fecha seguimiento"),
                });
                //Cerrado
            }else if(estado ==='5'){
                if(subestado === '22'){
                    schema = schema.append({
                        "Codigo oficina" : Joi.string().allow('').label("Código de oficina"),
                        "Telefono gestor" : Joi.string().allow('').label("Telefono gestor"),
                        "Nombre gestor" : Joi.string().allow('').label("Nombre gestor"),
                    });
                }else{
                    schema = schema.append({
                        "Codigo oficina" : Joi.string().required().label("Código de oficina"),
                        "Telefono gestor" : Joi.string().required().label("Telefono gestor"),
                        "Nombre gestor" : Joi.string().required().label("Nombre gestor"),
                    });
                }
                schema = schema.append({
                    "Persona / Empresa": Joi.string().allow('').label("Persona / Empresa"),
                    "Nombre empresa": Joi.string().allow('').label("Nombre empresa"),
                    "Cif": Joi.string().allow('').label("Cif"),
                    "Representante legal": Joi.string().allow('').label("Representante legal"),
                    "Apellido 1 Representante": Joi.string().allow('').label("Apellido 1 Representante"),
                    "Apellido 2 Representante": Joi.string().allow('').label("Apellido 2 Representante"),
                    "Dni representante legal": Joi.string().allow('').label("Dni representante legal"),
                    "Nombre": Joi.string().allow('').label("Nombre") ,
                    "Apellidos": Joi.string().allow('').label("Apellidos"),
                    "Apellido 2": Joi.string().allow('').label("Apellido 2"),
                    "Dni": Joi.string().allow('').label("Dni"),
                    "Proactivo" : Joi.string().allow('').label("Proactivo"),
                    "Email gestor": Joi.string().allow('').label("Email gestor"),
                    "Telefono 1": Joi.string().allow('').label("telefono 1"),
                    "Telefono 2": Joi.string().allow('').label("telefono 2"),
                    "Email": Joi.string().allow('').label("Email"),
                    "Direccion" : Joi.string().allow('').label("Direccion"),
                    "Metros": Joi.string().allow('').label("Metros"),
                    "Luz": Joi.string().allow('').label("Luz"),
                    "Obras": Joi.string().allow('').label("Obras"),
                    "Internet": Joi.string().allow('').label("Internet"),
                    "Mascotas": Joi.string().allow('').label("Mascotas"),
                    "Alarma SD": Joi.string().allow('').label("Alarma SD"),
                    "Tipo instalacion": Joi.string().allow('').label("Tipo Instalacion"),
                    "Subtipo": Joi.string().allow('').label("Subtipo"),
                    "Observaciones preventa": Joi.string().allow('').label("Observaciones preventa"),
                    "Orden trabajo": Joi.string().allow('').label("Orden trabajo"),
                    "Localidad": Joi.string().allow('').label("Localidad"),
                    "Provincia": Joi.string().allow('').label("Provincia"),
                    "Codigo postal": Joi.string().allow('').label("Codigo postal"),
                    "Centro coste": Joi.string().pattern(/^\d{1,3}$/).allow('').label("Centro coste").messages({"string.pattern.base": "El Centro coste debe contener entre 1 y 3 dígitos"}),
                    "Oferta": Joi.string().allow('').label("Oferta"),
                    "Id competencia": Joi.string().allow('').label("Id competencia"),
                    "SelCompetencia": Joi.string().allow('').label("Alarma con otra compañia"),
                    "Baja": Joi.string().allow('').label("Baja"),
                    "Prospecto":Joi.string().allow('').label("Prospecto"),
                    "Fecha instalacion":Joi.string().allow('').label("Fecha instalacion"),
                    "Hora instalacion":Joi.string().allow('').label("Hora instalacion"),
                    "Observaciones llamada": Joi.string().required().label("Observaciones llamada"),
                    "Estado": Joi.string().required().label("Estado"),
                    "Subestado": Joi.string().required().label("Subestado"),
                    "Tipo llamada": Joi.string().required().label("Tipo llamada"),
                    "Motivo compra": Joi.string().allow('').label("Motivo compra"),
                    "Compara": Joi.string().allow('').label("Compara"),
                    "Fecha seguimiento": Joi.string().allow('').label("Fecha seguimiento"),
                });
            }else{
                //1 - Pedido agendado, 2 - Pedido no agendado, 9 - Instalada
                schema = schema.append({
                    "Codigo oficina" : Joi.string().required().label("Código de oficina"),
                    "Telefono gestor" : Joi.string().required().label("Telefono gestor"),
                    "Nombre gestor" : Joi.string().required().label("Nombre gestor"),
                    "Persona / Empresa": Joi.string().required().label("Persona / Empresa"),
                    "Nombre empresa": isNotPersona ?
                        Joi.string().required().label("Nombre empresa") :
                        Joi.string().allow('').label("Nombre empresa"),
                    "Cif": isNotPersona ?
                        Joi.string().required().label("Cif") :
                        Joi.string().allow('').label("Cif"),
                    "Representante legal": isNotPersona ?
                        Joi.string().required().label("Representante legal") :
                        Joi.string().allow('').label("Representante legal"),
                    "Apellido 1 Representante": Joi.string().allow('').label("Apellido 1 Representante"),
                    "Apellido 2 Representante": Joi.string().allow('').label("Apellido 2 Representante"),
                    "Dni representante legal": isNotPersona ?
                        Joi.string().required().label("Dni representante legal") :
                        Joi.string().allow('').label("Dni representante legal"),
                    "Nombre": isNotPersona ?
                        Joi.string().allow('').label("Nombre") :
                        Joi.string().required().label("Nombre"),
                    "Apellidos": isNotPersona  ?
                        Joi.string().allow('').label("Apellidos") :
                        Joi.string().required().label("Apellidos"),
                    "Apellido 2": Joi.string().allow('').label("Apellido 2"),
                    "Dni": isNotPersona  ?
                        Joi.string().allow('').label("Dni") :
                        Joi.string().required().label("Dni"),
                    "Motivo compra": Joi.string().allow('').label("Motivo compra"),
                    "Proactivo" : Joi.string().required().label("Proactivo"),
                    "Email gestor": Joi.string().allow('').label("Email gestor"),
                    "Telefono 1": Joi.string().allow('').label("telefono 1"),
                    "Telefono 2": Joi.string().allow('').label("telefono 2"),
                    "Email": Joi.string().allow('').label("Email"),
                    "Direccion" : Joi.string().allow('').label("Direccion"),
                    "Metros": Joi.string().allow('').label("Metros"),
                    "Luz": Joi.string().allow('').label("Luz"),
                    "Obras": Joi.string().allow('').label("Obras"),
                    "Internet": Joi.string().allow('').label("Internet"),
                    "Mascotas": Joi.string().allow('').label("Mascotas"),
                    "Alarma SD": Joi.string().allow('').label("Alarma SD"),
                    "Tipo instalacion": Joi.string().allow('').label("Tipo Instalacion"),
                    "Subtipo": Joi.string().allow('').label("Subtipo"),
                    "Observaciones preventa": Joi.string().allow('').label("Observaciones preventa"),
                    "Orden trabajo": Joi.string().allow('').label("Orden trabajo"),
                    "Localidad": Joi.string().allow('').label("Localidad"),
                    "Provincia": Joi.string().allow('').label("Provincia"),
                    "Codigo postal": Joi.string().allow('').label("Codigo postal"),
                    "Centro coste": Joi.string().pattern(/^\d{1,3}$/).allow('').label("Centro coste").messages({"string.pattern.base": "El Centro coste debe contener entre 1 y 3 dígitos"}),
                    "Oferta": Joi.string().allow('').label("Oferta"),
                    "Id competencia": Joi.string().allow('').label("Id competencia"),
                    "SelCompetencia": Joi.string().allow('').label("Alarma con otra compañia"),
                    "Baja": Joi.string().allow('').label("Baja"),
                    "Prospecto":Joi.string().allow('').label("Prospecto"),
                    "Fecha instalacion":Joi.string().allow('').label("Fecha instalacion"),
                    "Hora instalacion":Joi.string().allow('').label("Hora instalacion"),
                    "Observaciones llamada": Joi.string().required().label("Observaciones llamada"),
                    "Estado": Joi.string().required().label("Estado"),
                    "Subestado": Joi.string().required().label("Subestado"),
                    "Tipo llamada": Joi.string().required().label("Tipo llamada"),
                });
                //En pedido no agendado obligatorio fecha de seguimiento
                if(estado === '2'){
                    schema = schema.append({
                        "Fecha seguimiento": Joi.string().required().label("Fecha seguimiento"),
                    });
                }else{
                    schema = schema.append({
                        "Fecha seguimiento": Joi.string().allow('').label("Fecha seguimiento"),
                    });
                }
            }
        //VALIDACIONES CON NUMERO DE PEDIDO
        }else{
            schema = schema.append({
                "Codigo oficina" : Joi.string().required().label("Código de oficina"),
                "Telefono gestor" : Joi.string().required().label("Telefono gestor"),
                "Nombre gestor" : Joi.string().required().label("Nombre gestor"),
                "Persona / Empresa": Joi.string().required().label("Persona / Empresa"),
                "Nombre empresa": isNotPersona ?
                    Joi.string().required().label("Nombre empresa") :
                    Joi.string().allow('').label("Nombre empresa"),
                "Cif": isNotPersona ?
                    Joi.string().required().label("Cif") :
                    Joi.string().allow('').label("Cif"),
                "Representante legal": isNotPersona ?
                    Joi.string().required().label("Representante legal") :
                    Joi.string().allow('').label("Representante legal"),
                "Apellido 1 Representante": Joi.string().allow('').label("Apellido 1 Representante"),
                "Apellido 2 Representante": Joi.string().allow('').label("Apellido 2 Representante"),
                "Dni representante legal": isNotPersona ?
                    Joi.string().required().label("Dni representante legal") :
                    Joi.string().allow('').label("Dni representante legal"),
                "Nombre": isNotPersona ?
                    Joi.string().allow('').label("Nombre") :
                    Joi.string().required().label("Nombre"),
                "Apellidos": isNotPersona  ?
                    Joi.string().allow('').label("Apellidos") :
                    Joi.string().required().label("Apellidos"),
                "Apellido 2": Joi.string().allow('').label("Apellido 2"),
                "Dni": isNotPersona  ?
                    Joi.string().allow('').label("Dni") :
                    Joi.string().required().label("Dni"),
                "Email gestor": Joi.string().allow('').label("Email gestor"),
                "Telefono 1": Joi.string().required().label("Telefono 1"),
                "Telefono 2": Joi.string().allow('').label("Telefono 2"),
                "Email": Joi.string().allow('').label("Email"),
                "Direccion" : Joi.string().required().label("Direccion"),
                "Motivo compra": Joi.string().required().label("Motivo compra"),
                "Metros": Joi.string().required().label("Metros"),
                "Luz": Joi.string().required().label("Luz"),
                "Obras": Joi.string().required().label("Obras"),
                "Compara": Joi.string().required().label("Compara"),
                "Internet": Joi.string().required().label("Internet"),
                "Mascotas": Joi.string().required().label("Mascotas"),
                "Alarma SD": Joi.string().allow('').label("Alarma SD"),
                "Tipo instalacion": Joi.string().required().label("Tipo Instalacion"),
                "Subtipo": Joi.string().allow('').label("Subtipo"),
                "Observaciones preventa": Joi.string().allow('').label("Observaciones preventa"),
                "Orden trabajo": Joi.string().allow('').label("Orden trabajo"),
                "Localidad": Joi.string().allow('').label("Localidad"),
                "Provincia": Joi.string().allow('').label("Provincia"),
                "Codigo postal": Joi.string().allow('').label("Codigo postal"),
                "Centro coste": Joi.string().pattern(/^\d{1,3}$/).allow('').label("Centro coste").messages({"string.pattern.base": "El Centro coste debe contener entre 1 y 3 dígitos"}),
                "Oferta": Joi.string().allow('').label("Oferta"),
                "SelCompetencia": Joi.string().required().label("Alarma con otra compañia"),
                "Id competencia": isCompetencia ?
                    Joi.string().required().label("Compañia"):
                    Joi.string().allow('').label("Compañia"),
                "Baja": isCompetencia ?
                    Joi.string().required().label("Baja"):
                    Joi.string().allow('').label("Baja"),
                "Prospecto":Joi.string().allow('').label("Prospecto"),
                "Fecha instalacion":Joi.string().allow('').label("Fecha instalacion"),
                "Hora instalacion":Joi.string().allow('').label("Hora instalacion"),
                "Observaciones llamada": Joi.string().required().label("Observaciones llamada"),
                "Estado": Joi.string().required().label("Estado"),
                "Subestado": Joi.string().required().label("Subestado"),
                "Tipo llamada": Joi.string().required().label("Tipo llamada"),
                "Proactivo" : Joi.string().required().label("Proactivo"),
                "Fecha seguimiento": Joi.string().allow('').label("Fecha seguimiento"),
            });
            if(estado ==='13'){
                schema = schema.append({
                    "Pedido" : Joi.string().valid('').label("Pedido").messages({'any.only': 'El campo "Pedido" debe estar vacío'}),
                    "Codigo oficina": Joi.string().required().label("Código de oficina"),
                    "Telefono gestor": Joi.string().required().label("Telefono gestor"),
                    "Nombre gestor": Joi.string().required().label("Nombre gestor"),
                    "Persona / Empresa": Joi.string().allow('').label("Persona / Empresa"),
                    "Nombre empresa": Joi.string().allow('').label("Nombre empresa"),
                    "Cif": Joi.string().allow('').label("Cif"),
                    "Representante legal": Joi.string().allow('').label("Representante legal"),
                    "Apellido 1 Representante": Joi.string().allow('').label("Apellido 1 Representante"),
                    "Apellido 2 Representante": Joi.string().allow('').label("Apellido 2 Representante"),
                    "Dni representante legal": Joi.string().allow('').label("Dni representante legal"),
                    "Nombre": Joi.string().allow('').label("Nombre"),
                    "Apellidos": Joi.string().allow('').label("Apellidos"),
                    "Apellido 2": Joi.string().allow('').label("Apellido 2"),
                    "Dni": Joi.string().allow('').label("Dni"),
                    "Motivo compra": Joi.string().allow('').label("Motivo compra"),
                    "Compara": Joi.string().allow('').label("Compara"),
                    "Proactivo": Joi.string().allow('').label("Proactivo"),
                    "Email gestor": Joi.string().allow(''),
                    "Telefono 1": Joi.string().allow('').label("telefono 1"),
                    "Telefono 2": Joi.string().allow('').label("telefono 2"),
                    "Email": Joi.string().allow('').label("Email"),
                    "Direccion": Joi.string().allow('').label("Direccion"),
                    "Metros": Joi.string().allow('').label("Metros"),
                    "Luz": Joi.string().allow('').label("Luz"),
                    "Obras": Joi.string().allow('').label("Obras"),
                    "Internet": Joi.string().allow('').label("Internet"),
                    "Mascotas": Joi.string().allow('').label("Mascotas"),
                    "Alarma SD": Joi.string().allow('').label("Alarma SD"),
                    "Tipo instalacion": Joi.string().allow('').label("Tipo Instalacion"),
                    "Subtipo": Joi.string().allow('').label("Subtipo"),
                    "Observaciones preventa": Joi.string().allow('').label("Observaciones preventa"),
                    "Orden trabajo": Joi.string().allow('').label("Orden trabajo"),
                    "Localidad": Joi.string().allow('').label("Localidad"),
                    "Provincia": Joi.string().allow('').label("Provincia"),
                    "Codigo postal": Joi.string().allow('').label("Codigo postal"),
                    "Centro coste": Joi.string().allow('').label("Centro coste"),
                    "Oferta": Joi.string().allow('').label("Oferta"),
                    "Id competencia": Joi.string().allow('').label("Id competencia"),
                    "SelCompetencia": Joi.string().allow('').label("Alarma con otra compañia"),
                    "Baja": Joi.string().allow('').label("Baja"),
                    "Prospecto": Joi.string().allow('').label("Prospecto"),
                    "Fecha instalacion": Joi.string().allow('').label("Fecha instalacion"),
                    "Hora instalacion": Joi.string().allow('').label("Hora instalacion"),
                    "Observaciones llamada": Joi.string().required().label("Observaciones llamada"),
                    "Estado": Joi.string().required().label("Estado"),
                    "Subestado": Joi.string().required().label("Subestado"),
                    "Tipo llamada": Joi.string().required().label("Tipo llamada"),
                    "Fecha seguimiento": Joi.string().allow('').label("Fecha seguimiento"),
                });
                if(pedido !== ""){
                    schema = schema.append({
                        "Generar prospecto" : Joi.string().allow('').label("Generar prospecto"),
                    });
                }
            }
        }
        if(estado === '1' || estado === '2' || estado === '3' || estado === '4'){
            schema = schema.append({
                "Compara": Joi.string().required().label("Compara"),
            });
        }else{
            schema = schema.append({
                "Compara": Joi.string().allow('').label("Compara"),
            });
        }

        // Valida los valores del formulario
        const {error} = schema.validate({
            "Generar prospecto" : generarProspecto,
            "Pedido" : pedido,
            "Idioma" : idioma,
            "Persona / Empresa": personaEmpresa,
            "Estado": estado,
            "Subestado": subestado,
            "Motivo compra": motivoCompra,
            "Compara": compara,
            "Tipo llamada": tipoLlamada,
            "Observaciones llamada": observacionesLlamada,
            "Metros": metros,
            "Luz": luz,
            "Obras": obras,
            "Internet": internet,
            "SelCompetencia": selCompetencia,
            "Codigo oficina": coOficina,
            "Tipo instalacion": tipoInstalacion,
            "Telefono gestor": telefonoGestor,
            "Nombre gestor": nombreGestor,
            "Nombre empresa": nombreEmpresa,
            "Cif": cif,
            "Representante legal": representanteLegal,
            "Apellido 1 Representante" : apellido1representante,
            "Apellido 2 Representante" : apellido2representante,
            "Dni representante legal": dniRepresentanteLegal,
            "Nombre": nombre,
            "Apellidos": apellidos,
            "Apellido 2" : apellido2,
            "Dni": dni,
            "Proactivo" : proactivo,
            "Email gestor" : emailGestor,
            "Telefono 1" : telefono1,
            "Telefono 2" : telefono2,
            "Email" : email,
            "Direccion" : direccion,
            "Mascotas" : mascotas,
            "Alarma SD" : alarmaSD,
            "Subtipo" : subTipo,
            "Observaciones preventa" : observacionesPreventa,
            "Orden trabajo" : ordenTrabajo,
            "Localidad" : localidad,
            "Provincia" : provincia,
            "Codigo postal" : codigoPostal,
            "Centro coste" : centroCoste,
            "Id competencia" : idCompetencia,
            "Baja" : baja,
            "Oferta" : oferta,
            "Prospecto" : prospecto,
            "Fecha instalacion" : feInstalacion,
            "Hora instalacion" : hoInstalacion,
            "Fecha seguimiento" : feSeguimiento,
        }, {abortEarly: false});

        // Si hay errores, muéstralos y prevén el envío del formulario
        if (error) {
            alert(error.details.map(detail => detail.message).join("\n"));
            button2.disabled = false;
            button.disabled = false;
            return false;
        }
        button.disabled = true;
        button2.disabled = true;
        return true; // Envía el formulario si la validación pasa
    }

    /*******************************************************************************************************************
     *                                    CARGA DESDE BASE DE DATOS
     *******************************************************************************************************************/
    async function loadPreventaValues(){
        document.getElementById('id_idioma').value = preventa.id_idioma == null ? 1 : preventa.id_idioma;
        document.getElementById('sel_proactivo').value = preventa.proactivo;
        document.getElementById('co_oficina').value = preventa.co_oficina;
        cambioOficina();
        //document.getElementById('no_oficina').value = preventa.no_oficina;
        //document.getElementById('no_dt').value = preventa.no_dt;
        document.getElementById('telefono_gestor').value = preventa.telefono_gestor;
       // cambioTelefonoGestor();
        document.getElementById('nombre_gestor').value = preventa.nombre_gestor;
        document.getElementById('email_gestor').value = preventa.email_gestor;
        if(preventa.nombre_empresa == null && preventa.nombre == null){
            document.getElementById('persona_empresa').value = "P";
        }else if(preventa.nombre_empresa !== null){
            document.getElementById('persona_empresa').value = "E";
        } else {
            document.getElementById('persona_empresa').value = "P";
        }
        cambioPersonaEmpresa();
        document.getElementById('nombre').value = preventa.nombre;
        document.getElementById('apellidos').value = preventa.apellidos;
        document.getElementById('apellido_2').value = preventa.apellido_2;
        document.getElementById('dni').value = preventa.dni;
        document.getElementById('nombre_empresa').value = preventa.nombre_empresa;
        document.getElementById('cif').value = preventa.cif;
        document.getElementById('representante_legal').value = preventa.representante_legal;
        document.getElementById('apellido_1_representante_legal').value = preventa.apellido_1_representante_legal;
        document.getElementById('apellido_2_representante_legal').value = preventa.apellido_2_representante_legal;
        document.getElementById('dni_representante_legal').value = preventa.dni_representante_legal;
        document.getElementById('telefono_1').value = preventa.telefono_1;
        document.getElementById('telefono_2').value = preventa.telefono_2;
        document.getElementById('email').value = preventa.email;
        document.getElementById('direccion').value = preventa.direccion;
        document.getElementById('localidad').value = preventa.localidad;
        document.getElementById('provincia').value = preventa.provincia;
        document.getElementById('codpos').value = preventa.codpos;
        if(preventa.codpos !== null){
            cambioCodigoPostal();
        }
        //document.getElementById('centro_coste').value = preventa.xxx;

        if(preventa.metros === undefined || preventa.metros === null){
            preventa.metros = "";
        } else {
            document.getElementById('metros').value = preventa.metros;
        }

        if(preventa.id_subtipo !== null){
            document.getElementById('tipo_instalacion').value = getSubtiposById(preventa.id_subtipo).tipo_instalacion;
            await cargaViviendaNegocio();
        }else{
            document.getElementById('tipo_instalacion').value = "";
        }

        document.getElementById('id_subtipo').value = preventa.id_subtipo;

        if(preventa.id_oferta !== null){
            document.getElementById('tipo_instalacion').value = getOfertaById(preventa.id_oferta).tipo_instalacion;
            await cargaOfertas();
        }else{
            document.getElementById('tipo_instalacion').value = "";
        }

        document.getElementById('id_oferta').value = preventa.id_oferta;
        document.getElementById('observaciones_preventa').value = preventa.observaciones_preventa;
        cambioCheckCompetencia();
        if(preventa.obras === null){
            document.getElementById('sel_obras').value = "";
        }else{
            document.getElementById('sel_obras').value = preventa.obras;
        }
        if(preventa.luz === null){
            document.getElementById('sel_luz').value = "";
        }else{
            document.getElementById('sel_luz').value = preventa.luz;
        }
        if(preventa.internet === null){
            document.getElementById('sel_internet').value = "";
        }else{
            document.getElementById('sel_internet').value = preventa.internet;
        }
        if(preventa.mascotas === null){
            document.getElementById('sel_mascotas').value = "";
        }else{
            document.getElementById('sel_mascotas').value = preventa.mascotas;
        }
        if(preventa.alarma_sd === null){
            document.getElementById('sel_alarma_sd').value = "";
        }else{
            document.getElementById('sel_alarma_sd').value = preventa.alarma_sd;
        }
        if(preventa.competencia === null){
            document.getElementById('sel_competencia').value = "";
        }else{
            document.getElementById('sel_competencia').value = preventa.competencia;
        }
        cambioCheckCompetencia();
        if(preventa.id_competencia === null){
            document.getElementById('id_competencia').value = "";
        }else{
            document.getElementById('id_competencia').value = preventa.id_competencia;
        }
        if(preventa.baja === null){
            document.getElementById('sel_baja').value = "";
        }else{
            document.getElementById('sel_baja').value = preventa.baja;
        }
        if(preventa.id_motivo_compra === null){
            document.getElementById('id_motivo_compra').value = "";
        }else{
            //console.log(preventa.id_motivo_compra)
            document.getElementById('id_motivo_compra').value = preventa.id_motivo_compra;
        }
        if(preventa.compara === null){
            document.getElementById('compara').value = "";
        }else{
            //console.log(preventa.id_motivo_compra)
            document.getElementById('compara').value = preventa.compara;
        }
        if(document.getElementById('id_oferta').value !== ""){
            cambioOferta();
        }
        //document.getElementById('origen').value = preventa.origen;
        document.getElementById('id_estado').value = llamadas[llamadas.length-1].id_estado == null ? "*" : llamadas[llamadas.length-1].id_estado;
        cambioEstado();
        document.getElementById('id_sub_estado').value = llamadas[llamadas.length-1].id_sub_estado == null ? "*" : llamadas[llamadas.length-1].id_sub_estado;

        document.getElementById('observaciones_preventa').value = preventa.observaciones_preventa;
        document.getElementById('prospecto').value = llamadas[llamadas.length-1].prospecto;
        document.getElementById('pedido').value = llamadas[llamadas.length-1].pedido;
        document.getElementById('fe_seguimiento').value = llamadas[llamadas.length-1].fe_seguimiento;
        document.getElementById('fe_instalacion').value = llamadas[llamadas.length-1].fe_instalacion;
        if(llamadas[llamadas.length-1].ho_instalacion !== null){
            document.getElementById('ho_instalacion').value = llamadas[llamadas.length-1].ho_instalacion;
        }
        document.getElementById('tipo_llamada').value = llamadas[0].tipo_llamada;
        //document.getElementById('observaciones_llamada').value = llamada[llamadas.length-1].observaciones_llamada;
        cargaOrdenTrabajo();
        checkCrearProspecto();
    }

    /*******************************************************************************************************************
     *                                         GOOGLE DIRECTIONS
     *******************************************************************************************************************/
    window.addEventListener('load', ()=>{
        const input = document.getElementById('direccion');
        const options = {
            componentRestrictions: { country: "es" },
            language: "es",
            types: ["address"]
        }
        const autoCompleteBox = new google.maps.places.Autocomplete(input, options);
        autoCompleteBox.addListener('place_changed', function () {
            const place = autoCompleteBox.getPlace();
            const placeComponents = getPlaceComponents(place);
            //console.log(placeComponents)
            document.getElementById('localidad').value = placeComponents.localidad;
            document.getElementById('provincia').value = placeComponents.provincia;
            document.getElementById('codpos').value = placeComponents.cod_postal;
            cambioCodigoPostal();
        });
    })
    function getPlaceComponents(place){
        const trans = {
            'street_number' : 'numero',
            'route' : 'calle',
            'locality' : 'localidad',
            'administrative_area_level_2' : 'provincia',
            'postal_code' : 'cod_postal'
        };
        let components = {
            provincia : "",
            localidad : "",
            cod_postal : "",
            calle : "",
            numero : "",
            direccion_completa : "",
            lat : "",
            lng : ""
        };
        place.address_components.forEach(c=>{
            let compName = trans[c.types[0]];
            if(compName !== undefined){
                components[compName] = c.long_name;
            }
        })
        components.direccion_completa = place.formatted_address;
        components.lat = place.geometry.location.lat();
        components.lng = place.geometry.location.lng();
        return components;
    }

    /*******************************************************************************************************************
     *                                      ELEMENTOS GUI ADICIONALES
     *******************************************************************************************************************/
    function setupPopup(){
        // POP UP
        const openPopupBtn = document.getElementById('open-popup-btn');
        const popup = document.getElementById('popup');
        const closePopupBtn = document.getElementById('close-popup-btn');
        const popupContent = popup.querySelector('div');

        openPopupBtn.addEventListener('click', () => {
            popup.classList.remove('hidden');
            popupContent.classList.remove('opacity-0', 'translate-y-4');
            popupContent.classList.add('opacity-100', 'translate-y-0');
        });

        const closePopup = () => {
            popupContent.classList.remove('opacity-100', 'translate-y-0');
            popupContent.classList.add('opacity-0', 'translate-y-4');
            setTimeout(() => {
                popup.classList.add('hidden');
            }, 500);
        };

        closePopupBtn.addEventListener('click', closePopup);
        // BORRAR ESTE FRAGMENTO SI NO QUEREMOS QUE SE CIERRE SI PINCHAN FUERA DEL POP UP
        window.addEventListener('click', (e) => {
            if (e.target === popup) {
                closePopup();
            }
        });
    }

    /*******************************************************************************************************************
     *                                   GESTION DE CAMBIOS NO SALVADOS
     *******************************************************************************************************************/
    function checkForUnsaved(){
        if(localStorage.length > 1 && localStorage.getItem('preventa') !== null && errors.length == 0){
            if(confirm("Se han encontrado valores sin salvar. ¿Desea cargarlos en pantalla?")){
                loadFromStore();
            }else{
                localStorage.clear();
                localStorage.setItem('preventa', true);
            }
        }
    }
    function setGenericListeners(){
        setTagGenericListeners('input');
        setTagGenericListeners('select');
        setTagGenericListeners('textarea');
    }
    function setTagGenericListeners(tag){
        let elements = document.getElementsByTagName(tag);
        for(let i = 0; i < elements.length; i++){
            elements[i].addEventListener('change', (e)=>{cambioGenerico(e)});
        }
    }
    function cambioGenerico(e){
        localStorage.setItem(e.target.id, e.target.value);
    }
    async function loadFromStore(){
        for(let i = 0; i < localStorage.length; i++){
            let elementId = localStorage.key(i);
            if(document.getElementById(elementId) !== null){
                document.getElementById(elementId).value = localStorage.getItem(elementId);
                if(elementId == 'id_oferta'){
                    oldIdOferta = localStorage.getItem(elementId);
                }
                if(elementId == 'tipo_instalacion'){
                    await cargaOfertas();
                    cambioOferta();
                }
            }
        }
        cambioOficina();
        cambioPersonaEmpresa();
        cambioCodigoPostal();
        cambioOferta();
        cambioCheckCompetencia();
    }

    /*******************************************************************************************************************
     *                                                 TESTS
     *******************************************************************************************************************/
    function loadDefaultValues(){
        document.getElementById('co_oficina').value = "5852";
        cambioOficina();
        //document.getElementById('no_oficina').value = "5852";
        //document.getElementById('no_dt').value = "5852";
        document.getElementById('telefono_gestor').value = "935664432";
        cambioTelefonoGestor();
        //document.getElementById('nombre_gestor').value = "5852";
        //document.getElementById('email_gestor').value = "5852";
        document.getElementById('persona_empresa').value = "P";
        cambioPersonaEmpresa();
        document.getElementById('nombre').value = "Pepe";
        document.getElementById('apellidos').value = "Persona";
        document.getElementById('dni').value = "00123456U";
        document.getElementById('nombre_empresa').value = "Empresa Cualquiera";
        document.getElementById('cif').value = "B12345683";
        document.getElementById('representante_legal').value = "Representante X";
        document.getElementById('dni_representante').value = "50009876F";
        document.getElementById('telefono_1').value = "911234569";
        document.getElementById('telefono_2').value = "660654321";
        document.getElementById('email').value = "pepe@gmail.com";
        document.getElementById('direccion').value = "Calle de la Huerta, 3";
        document.getElementById('localidad').value = "Villalpardo";
        document.getElementById('provincia').value = "Madrid";
        document.getElementById('codpos').value = "28224";
        cambioCodigoPostal();
        //document.getElementById('centro_coste').value = "674523";
        document.getElementById('id_subtipo').value = 2;
        document.getElementById('id_motivo_compra').value = 4;
        document.getElementById('tipo_instalacion').value = "Hogar";
        cargaOfertas();
        document.getElementById('id_oferta').value = "2";
        cambioOferta();
        //document.getElementById('origen').value = "5852";
        //document.getElementById('observaciones_preventa').value = "5852";
        document.getElementById('prospecto').value = "6827364";
        document.getElementById('pedido').value = "7662524";
        document.getElementById('fe_instalacion').value = "2024-11-12";
        document.getElementById('ho_instalacion').value = "12:35:00";
        document.getElementById('observaciones_llamada').value = "Observaciones llamada";
    }
</script>