@extends('layouts.app')
@section('styles')
    <link rel="stylesheet" href="{{ asset("css/vehiculoSinOT.css") }}">
@endsection

@section('content')

    <div class="container">
        <div class="card px-0 pt-4 pb-0 mt-3 mb-3 rounded">
            <h2 class="text-center">
                <strong>Flujo Instalación sin OT</strong>
            </h2>
            <div class="row">
                <div class="col-md-12 mx-0">
                    <form
                        id="msform"
                        class="form"
                        action="javascript:0"
                    >

                        <!-- progressbar -->
                        <ul id="progressbar">
                            <li class="active" id="account"><strong>Tipo Instalación</strong></li>
                            <li class="active" id="personal"><strong>Datos Entidad</strong></li>
                            <li class="active" id="payment"><strong>Información Instalación</strong></li>
                            <li class="active" id="confirm"><strong>Dispositivo</strong></li>
                        </ul>
                        <!-- fieldsets -->
                        <fieldset>
                            <section id="formDispositivo">
                                <div class="row justify-content-center">
                                  <div class="col-md-10 col-sm-12">
                                    <div class="card icon-tab">
                                      <div class="card-content mt-2">
                                        <div class="card-body">
                                            <fieldset>
                                              <div class="row">
                                                <div class="col-12">
                                                  <h4 class="py-50"><center> <strong> Listado de Vehiculos </strong> </center></h4>
                                                </div>
                                                <div class="row col-12">
                                                  <div class="col-lg-4 col-md-12">
                                                      <input type="hidden" name="id" id="id">
                                                        <div class="input-group input-group-md mx-auto">

                                                            <button type="button" onclick="$('#vinImage').click()" class="btn btn-outline-primary btn-block btn-lg rounded mb-2">
                                                                <i class="fas fa-upload"></i>VIN
                                                            </button>
                                                            <div class="input-group-append">
                                                            <input
                                                                form=""
                                                                type="file"
                                                                accept="image/*;capture=camera"
                                                                class="form-control-sm"
                                                                name="vin_image"
                                                                id="vinImage"
                                                                hidden
                                                            >
                                                            </div>
                                                            <img
                                                            id="vinImagePreview"
                                                            class="w-100 mb-4 border border-primary rounded"
                                                            src="/images/no-image.jpg"
                                                            >
                                                            <div class="input-group-prepend">
                                                                <label for="vin" ><span class="input-group-text">VIN</span></label>
                                                            </div>
                                                            <input
                                                                form=""
                                                                type="text"
                                                                id="vin"
                                                                class="form-control-sm"
                                                                style="appearance: none"
                                                                aria-label="vin"
                                                                aria-describedby="vin"
                                                                required
                                                                onblur="handleVinChange()"
                                                                onchange="handleVinChange()"
                                                            >
                                                        </div>
                                                        <div class="input-group input-group-md mx-auto">
                                                            <div class="input-group-prepend">
                                                                <label for="patente"><span class="input-group-text">Patente</span></label>
                                                            </div>
                                                            <input
                                                                form=""
                                                                type="text"
                                                                id="patente"
                                                                class="form-control-sm"
                                                                style="text-transform: uppercase;"
                                                                placeholder="PATENTE"
                                                                aria-label="PATENTE"
                                                                aria-describedby="patente"
                                                                required
                                                                onblur="handlePatenteChange()"
                                                                onchange="handlePatenteChange()"
                                                            >
                                                        </div>


                                                      <div class="input-group input-group-md mx-auto">
                                                          <div class="input-group-prepend">
                                                              <label for="marca"><span class="input-group-text" >Marca</span></label>
                                                          </div>
                                                          <input
                                                            form=""
                                                            type="text"
                                                            id="marca"
                                                            class="form-control-sm"
                                                            placeholder="Marca"
                                                            aria-label="Marca"
                                                            aria-describedby="marca"
                                                            required
                                                          >
                                                      </div>
                                                      <div class="input-group input-group-md mx-auto">
                                                          <div class="input-group-prepend">
                                                              <label for="modelo" ><span class="input-group-text">Modelo</span></label>
                                                          </div>
                                                          <input
                                                            form=""
                                                            type="text"
                                                            id="modelo"
                                                            class="form-control-sm"
                                                            placeholder="Modelo"
                                                            aria-label="Modelo"
                                                            aria-describedby="modelo"
                                                            required
                                                          >
                                                      </div>
                                                      <div class="input-group input-group-md mx-auto">
                                                          <div class="input-group-prepend">
                                                              <label for="color" ><span class="input-group-text" >Color</span></label>
                                                          </div>
                                                          <input
                                                            form=""
                                                            type="text"
                                                            id="color"
                                                            class="form-control-sm"
                                                            placeholder="Color"
                                                            aria-label="Color"
                                                            aria-describedby="color"
                                                            required
                                                          >
                                                      </div>
                                                      <div class="input-group input-group-md mx-auto">
                                                          <div class="input-group-prepend">
                                                              <label for="anho" ><span class="input-group-text">Año</span></label>
                                                          </div>
                                                          <input
                                                            form=""
                                                            type="number"
                                                            id="anho"
                                                            min="1970"
                                                            max="{{ date('Y') }}"
                                                            class="form-control-sm w-auto"
                                                            placeholder="1970"
                                                            aria-label="1970"
                                                            aria-describedby="año"
                                                            required
                                                          >
                                                      </div>
                                                      <hr>
                                                      <div class="input-group input-group-md mx-auto " id = "realizaInstal">
                                                            <div class="input-group-prepend" style="width: 100%;">
                                                                <label for="instalado">
                                                                    <span class="input-group-text" style="width: 100%;">Se realiza la instalacion?</span>
                                                                </label>
                                                            </div>
                                                            <select
                                                                form=""
                                                                id="instalado"
                                                                class="form-control-sm disabled"
                                                                aria-label="instalado"
                                                                aria-describedby="instalado"
                                                                required
                                                            >
                                                                <option value="" disabled selected>Seleccione una opción</option>
                                                                <option value="SI">SI</option>
                                                                <option value="NO">NO</option>
                                                            </select>
                                                        </div>
                                                        <hr>
                                                        <div class="input-group input-group-md mx-auto" id="tipoDispositivo">
                                                            <div class="input-group-prepend" style="width: 100%;">
                                                                <label for="tipo_dispositivo" >
                                                                    <span class="input-group-text" style="width: 100%;">Tipo Dispositivo</span>
                                                                </label>
                                                            </div>
                                                            <select
                                                                form=""
                                                                id="tipo_dispositivo"
                                                                class="form-control-sm disabled"
                                                                aria-label="tipo_dispositivo"
                                                                aria-describedby="tipo_dispositivo"
                                                                required
                                                            >
                                                                <option value="" disabled selected>Seleccione una opción</option>
                                                                <option value="OBDII">OBDII</option>
                                                                <option value="CABLEADO">CABLEADO</option>
                                                                <option value="INMOVILIZADOR">INMOVILIZADOR</option>
                                                                <option value="OBDII+INMOVILIZADOR">OBDII+INMOVIL.</option>
                                                                <option value="OBDII+INMOVILIZADOR">CABLEADO+INMOVIL.</option>
                                                                <option value="CABLEADO+CORTA">CABLEADO+CORTA COMBUS</option>
                                                                <option value="CABLEADO+CORTA+INMO">CABLEADO+CORTA COMBUS+INMOVIL.</option>
                                                            </select>
                                                        </div>
                                                        <div class="input-group input-group-md mx-auto mt-5" id="imeiImg">
                                                            <div class="input-group-append">
                                                                <input
                                                                form=""
                                                                type="file"
                                                                accept="image/*;capture=camera"
                                                                class="form-control-sm"
                                                                name="imei_image"
                                                                id="imeiImage"
                                                                hidden
                                                                >
                                                            </div>
                                                            <button type="button" onclick="$('#imeiImage').click()" class="btn btn-outline-primary btn-block btn-lg rounded mb-2">
                                                                <i class="fas fa-upload"></i> IMEI
                                                            </button>
                                                            <img id="imeiImagePreview" class="w-100 mb-4 border border-primary rounded" src="/images/no-image.jpg">
                                                            <div class="input-group-prepend">
                                                              <label for="imei" ><span class="input-group-text">IMEI</span></label>
                                                            </div>
                                                            <input
                                                                form=""
                                                                type="text"
                                                                id="imei"
                                                                min="10000000000000"
                                                                max="999999999999999"
                                                                class="form-control-sm"
                                                                placeholder="1970"
                                                                aria-label="1970"
                                                                aria-describedby="imei"
                                                                required
                                                            >
                                                        </div>
                                                        <div class="input-group input-group-md mx-auto" id="idGPS">
                                                            <div class="input-group-prepend">
                                                                <label id="id_gps_label" for="id_gps"><span class="input-group-text">ID GPS</span></label>
                                                            </div>
                                                            <input
                                                                form=""
                                                                type="number"
                                                                id="id_gps"
                                                                min="1"
                                                                class="form-control-sm"
                                                                placeholder="1970"
                                                                aria-label="ID del gps"
                                                                required
                                                                onblur="handleIdGpsChange()"
                                                                onchange="handleIdGpsChange()"
                                                            >
                                                        </div>



                                                        <div class="input-group input-group-md mx-auto" id="cortaCorrienteBom">
                                                            <div class="input-group-prepend" style="width: 100%; margin-top: 12px;">
                                                                <label for="cortac_bombab">
                                                                    <span class="input-group-text" style="width: 100%;">Corta Corriente/Bomba</span>
                                                                </label>
                                                            </div>
                                                            <select
                                                                form=""
                                                                id="cortac_bombab"
                                                                class="form-control-sm disabled"
                                                                aria-label="cortac_bombab"
                                                                aria-describedby="cortac_bombab"
                                                                required
                                                            >
                                                                <option value="" disabled selected>Seleccione una opción</option>
                                                                <option value="SI">SI</option>
                                                                <option value="NO">NO</option>
                                                            </select>
                                                        </div>

                                                        <div class="input-group input-group-md mx-auto" id="idInmo">
                                                            <div class="input-group-prepend">
                                                                <label id="id_inmo_label" for="id_inmo"><span class="input-group-text" style="width: 100%; margin-top: 12px;">ID Inmobilizador</span></label>
                                                            </div>
                                                            <input
                                                                form=""
                                                                type="number"
                                                                id="id_inmo"
                                                                min="1"
                                                                class="form-control-sm"
                                                                placeholder="1970"
                                                                aria-label="ID del gps"
                                                                required
                                                            >
                                                        </div>



{{-- ****************************************** NUEVO BLOQUE ****************************************** --}}
                                                      <div class="input-group input-group-md mx-auto mt-5" id="vinImei">

                                                        <button type="button" onclick="$('#vinImeiImage').click()" class="btn btn-outline-primary btn-block btn-lg rounded mb-2">
                                                            <i class="fas fa-upload"></i>VIN/IMEI/INMO
                                                        </button>
                                                        <div class="input-group-append">
                                                          <input
                                                            form=""
                                                            type="file"
                                                            accept="image/*;capture=camera"
                                                            class="form-control-sm"
                                                            name="vinImei_image"
                                                            id="vinImeiImage"
                                                            hidden
                                                          >
                                                        </div>
                                                        <img
                                                          id="vinImeiImagePreview"
                                                          class="w-100 mb-4 border border-primary rounded"
                                                          src="/images/no-image.jpg"
                                                        >
                                                      </div>

{{-- ****************************************** FIN NUEVO BLOQUE ****************************************** --}}
                                                      <hr>
                                                      <div class="input-group input-group-md mx-auto mt-5" id="supervisor">
                                                          <div class="input-group-prepend">
                                                              <label for="solicitante" ><span class="input-group-text">Supervisor</span></label>
                                                          </div>
                                                          <input
                                                            form=""
                                                            type="text"
                                                            id="solicitante"
                                                            class="form-control-sm"
                                                            placeholder="Nombre Supervisor"
                                                            aria-label="solicitante"
                                                            aria-describedby="solicitante"
                                                            required
                                                          >
                                                      </div>
                                                      <div class="input-group input-group-md mx-auto " id = "divutilizacion">
                                                            <div class="input-group-prepend">
                                                                <label for="utilizacion">
                                                                    <span class="input-group-text">Utilización</span>
                                                                </label>
                                                            </div>
                                                            <select
                                                                form=""
                                                                id="utilizacion"
                                                                class="form-control-sm disabled"
                                                                aria-label="utilizacion"
                                                                aria-describedby="utilizacion"
                                                                required
                                                            >
                                                                <option value="" disabled selected>Seleccione una opción</option>
                                                                <option value="LOP">LOP</option>
                                                                <option value="RAC">RAC</option>
                                                                <option value="USOINTERNO">USO INTERNO</option>
                                                            </select>
                                                        </div>


                                                        <div class="input-group input-group-md mx-auto " id = "instalVehiculo">
                                                            <div class="input-group-prepend">
                                                                <label for="utilizacion">
                                                                    <span class="input-group-text" style="width: 100%;">Instalacion en Vehiculo</span>
                                                                </label>
                                                            </div>
                                                            <select
                                                                form=""
                                                                id="insta_vehiculo"
                                                                class="form-control-sm disabled"
                                                                aria-label="insta_vehiculo"
                                                                aria-describedby="insta_vehiculo"
                                                                required
                                                            >
                                                                <option value="" disabled selected>Seleccione una opción</option>
                                                                <option value="Inst. abajo del sinóptico a un costado">Inst. abajo del sinóptico a un costado</option>
                                                                <option value="Inst. cajonera butaca conductor">Inst. cajonera butaca conductor</option>
                                                                <option value="Inst. bajo butaca conductor">Inst. bajo butaca conductor</option>
                                                                <option value="Inst. costado de pedal de embrague">Inst. costado de pedal de embrague</option>
                                                                <option value="Inst. arriba guantera">Inst. arriba guantera</option>
                                                                <option value="Inst. costado apoya pies copiloto">Inst. costado apoya pies copiloto</option>
                                                                <option value="Inst. costado pedal de embrague">Inst. costado pedal de embrague</option>
                                                                <option value="Inst. debajo de asiento conductor">Inst. debajo de asiento conductor</option>
                                                                <option value="Inst. debajo de asiento conductor fusilera motor">Inst. debajo de asiento conductor fus. motor</option>
                                                                <option value="Inst. atrás de la fusilera en cabina">Inst. atrás de la fus. en cabina</option>
                                                                <option value="Inst. dentro fusilera de motor">Inst. dentro fus. de motor</option>
                                                                <option value="Inst. dentro fusilera de motor (Debajo asiento conductor)">Inst. dentro fus. de motor (Debajo asiento cond)</option>
                                                                <option value="Inst. dentro fusilera de motor (Debajo Butaca)">Inst. dentro fus. de motor (Debajo Butaca)</option>
                                                                <option value="Inst. fusilera copiloto">Inst. fus. copiloto</option>
                                                                <option value="Inst. fusilera interna cabina">Inst. fus. interna cabina</option>
                                                                <option value="Inst. detrás de la radio">Inst. detrás de la radio</option>
                                                                <option value="Inst. detrás de panel de radio">Inst. detrás de panel de radio</option>
                                                                <option value="Inst. detrás de sinóptico">Inst. detrás de sinóptico</option>
                                                                <option value="Inst. detrás de sinóptico - arriba de torpedo">Inst. detrás de sinóptico - arriba de torpedo</option>
                                                                <option value="Inst. en pilar conductor">Inst. en pilar conductor</option>
                                                                <option value="Inst. en techo central inicio">Inst. en techo central inicio</option>
                                                                <option value="Inst. en torpedo Piloto">Inst. en torpedo Piloto</option>
                                                                <option value="Inst. interna cabina apoya pie">Inst. interna cabina apoya pie</option>
                                                                <option value="Inst. por debajo de alfombra conductor">Inst. por debajo de alfombra cond.</option>
                                                                <option value="Inst. por debajo de alfombra conductor lado butaca">Inst. por debajo de alfombra cond. lado butaca</option>
                                                                <option value="Inst. tablero conductor parte inferior">Inst. tablero conductor parte inferior</option>
                                                                <option value="Patente cambiada">Patente cambiada</option>
                                                                <option value="Unidad sin bateria">Unidad sin bateria</option>
                                                                <option value="Unidad no disponible">Unidad no disponible</option>
                                                                <option value="Unidad en taller externo">Unidad en taller externo</option>
                                                                <option value="Unidad ya tenia GPS instalado">Unidad ya tenia GPS instalado</option>
                                                                <option value="Otro">Otro</option>
                                                            </select>
                                                        </div>
                                                        <hr>

                                                        <div class="input-group input-group-md mx-auto " id = "Userinstalador">
                                                            <div class="input-group-prepend">
                                                                <label for="instalador">
                                                                    <span class="input-group-text" style="width: 100%;">Instalador</span>
                                                                </label>
                                                            </div>
                                                            <select
                                                                form=""
                                                                id="insta_user"
                                                                class="form-control-sm disabled"
                                                                aria-label="insta_user"
                                                                aria-describedby="insta_user"
                                                                required
                                                            >
                                                                <option value="" disabled selected>Seleccione una opción</option>
                                                                <option value="Jose Muñoz">Jose Muñoz</option>
                                                                <option value="Marcelo Sepulveda">Marcelo Sepulveda</option>
                                                                <option value="Jonathan Naranjo">Jonathan Naranjo</option>

                                                            </select>
                                                        </div>




                                                        <hr>


                                                        <div class="input-group input-group-md mx-auto " id = "obs">
                                                            <div class="input-group-prepend">
                                                                <label for="observacion">
                                                                    <span class="input-group-text" style="width: 100%;">Observaciones</span>
                                                                </label>
                                                            </div>
                                                            <textarea
                                                                form=""
                                                                id="observacion"
                                                                class="form-control-sm disabled"
                                                                aria-label="observacion"
                                                                aria-describedby="observacion"
                                                                required
                                                                rows="3"
                                                            ></textarea>
                                                        </div>






                                                      <div id="map"></div>
                                                        <div class="form-group">
                                                            <div id="confirmDeviceDataSection" class="confirm-device-data-section text-warning border border-warning rounded">
                                                                    <input form="" type="checkbox" name="confirm_device_data" id="confirmDeviceData" required>
                                                                <label for="agree">Estoy seguro de que los Datos estan Correctos</label>
                                                            </div>
                                                        </div>
                                                      <div class="input-group input-group-md mx-auto mb-3">
                                                        <button id="addVehicle"  type="button" class="btn btn-outline-success btn-block ">
                                                          <strong>Agregar</strong>
                                                        </button>
                                                        <button id="editVehicle" type="button" class="btn btn-outline-success btn-block d-none">
                                                          <strong>Confirmar</strong>
                                                        </button>
                                                      </div>
                                                  </div>
                                                  <div class="col-lg-8 col-md-12 table-responsive h-100" id="tvehiculosnok">
                                                    @include(
                                                      'vehiculo-sin-ot.partials.tabla-form-vehiculos-sin-ot',
                                                      [
                                                        'vehiculosSinOT' => $vehiculosSinOT ?? [],
                                                        'diaSinOT' => $diaSinOT
                                                      ]
                                                    )
                                                    @section('tvehiculosnok')
                                                    @show
                                                  </div>
                                                </div>

                                                <div class="col-sm-12 p-3 d-flex justify-content-end align-items-center">
                                                  <button type="button" data-toggle="modal" data-target="#modalFirma" class="btn btn-primary">Firmar</button>
                                                </div>
                                              </div>
                                            </fieldset>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                            </section>
                        </fieldset>
                    </form>
                </div>
            </div>
        </div>
    </div>
    @include('vehiculo-sin-ot.partials.modal-firma')
@endsection('content')

@section('scripts')
    {{-- GOOGLE MAPS --}}
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default" type="application/javascript"></script>
    <script src="{{ asset('js/googleMap.js') }}" type="application/javascript"></script>
    {{-- GOOGLE MAPS --}}

    <script src="{{ asset('js/vehiculoSinOT.js') }}" type="module"></script>
@endsection('scripts')

{{-- <form-tipo-instalacion />

<script src="{{ asset('js/vue/app.js') }}" type="module"></script> --}}


<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    $('#tipo_dispositivo').change(function() {
        var selectedValue = $(this).val();

        // Ocultar o mostrar según el valor seleccionado
        if (selectedValue === "INMOVILIZADOR") {
            $('#imeiImg').hide();  // Ocultar solo el div con id "div-imei"
            $('#idGPS').hide();
            $('#map').hide();
        } else {
            $('#imeiImg').show();  // Mostrarlo nuevamente si cambia a otro valor
            $('#idGPS').show();
            $('#map').show();
        }


    });
});
</script>
<script>
$(document).ready(function() {
    $('#instalado').change(function() {
        var selectedValue = $(this).val();

        // Ocultar o mostrar según el valor seleccionado
        if (selectedValue === "NO") {
            $('#tipoDispositivo').hide();  // Ocultar solo el div con id "div-imei"
            $('#imeiImg').hide();
            $('#idGPS').hide();
            $('#cortaCorrienteBom').hide();
            $('#idInmo').hide();
            $('#vinImei').hide();
            $('#supervisor').hide();
            $('#divutilizacion').hide();
            $('#instalVehiculo').hide();

            $('#map').hide();


        } else {
            $('#tipoDispositivo').show();  // Ocultar solo el div con id "div-imei"
            $('#imeiImg').show();
            $('#idGPS').show();
            $('#cortaCorrienteBom').show();
            $('#idInmo').show();
            $('#vinImei').show();
            $('#supervisor').show();
            $('#divutilizacion').show();
            $('#instalVehiculo').show();

            $('#map').show();

        }


    });
});
</script>

<script>
function handleIdGpsChange() {

    const idGpsValue = document.getElementById("id_gps").value;

    if (idGpsValue) {
        // Aquí puedes realizar la acción que necesitas
        console.log("El valor del ID ha cambiado o perdió el foco:", idGpsValue);

        var settings = {
            "url": "https://admin.gpsimple.cl/api/get-imei/" + idGpsValue + "/",
            "method": "GET",
            "timeout": 0,
            "headers": {
                "Cookie": "sessionid=2bywgluzgpkt0p0f9ormq7oshc7551on"
            }
        };

        $.ajax(settings).done(function (response) {
            console.log(response);
            // Verifica si la respuesta tiene el campo imei
            if (response && response.imei) {
                // Asigna el valor de imei al input
                document.getElementById("imei").value = response.imei || '';
            } else {
                // Manejo de error en caso de que no se obtengan datos
                console.error("No se encontró el IMEI para el ID proporcionado.");
            }
        }).fail(function (jqXHR, textStatus, errorThrown) {
            console.error("Error en la solicitud:", textStatus, errorThrown);
        });
    }
}
</script>
<script>
async function handleVinChange() {
    const vinValue = document.getElementById("vin").value;

    if (vinValue) {
        console.log("El valor del VIN ha cambiado o perdió el foco:", vinValue);

        const loginEndpoint = "https://api.carcloud.cl/login/";
        const dataEndpoint = "https://api.carcloud.cl/get-vin-information/";
        const backupEndpoint = "https://apiempresa.europcar.cl/api/PAE/GET_flota_SAP_VIN_NIV";

        try {
            // Realiza la solicitud de inicio de sesión para obtener el token
            const loginResponse = await $.ajax({
                url: loginEndpoint,
                method: "POST",
                contentType: "application/json",
                data: JSON.stringify({
                    email: "osvaldo@stech.guru", // Reemplaza con tu email
                    password: "OAbn_3004" // Reemplaza con tu contraseña
                }),
            });

            const token = loginResponse.token;

            try {
                // Realiza la solicitud de datos del VIN en el primer endpoint
                const carcloudResponse = await $.ajax({
                    url: dataEndpoint,
                    method: "POST",
                    contentType: "application/json",
                    headers: {
                        "token": token
                    },
                    data: JSON.stringify({ vin: vinValue })
                });

                // Asigna los valores a los inputs
                document.querySelector('label[for="marca"] span').textContent = 'Marca' + ' - C';
                document.getElementById("patente").value = carcloudResponse.patente || '';
                document.getElementById("marca").value = carcloudResponse.marca || '';
                document.getElementById("modelo").value = carcloudResponse.version_modelo || '';
                document.getElementById("anho").value = carcloudResponse.anio || '';
                document.getElementById("color").value = carcloudResponse.color || '';

            } catch (error) {
                // Si ocurre un error 404 o similar
                if (error.status === 404 || (error.responseJSON && !error.responseJSON.success)) {
                    // Realiza la solicitud al endpoint de respaldo
                    const backupResponse = await $.ajax({
                        url: backupEndpoint,
                        method: "POST",
                        contentType: "application/json",
                        data: JSON.stringify({
                            parametro_vin: vinValue,
                            parametro_patente: "",
                            parametro_niv: ""
                        }),
                    });

                    if (backupResponse && backupResponse.items && backupResponse.items.length > 0) {
                        const item = backupResponse.items[0];

                        // Asigna los valores a los inputs desde Europcar
                        document.querySelector('label[for="marca"] span').textContent = 'Marca' + ' - E';
                        document.getElementById("patente").value = item.ZVLC_PATENTE || '';
                        document.getElementById("marca").value = item.ZVLC_MARCA_VEHI || '';
                        document.getElementById("modelo").value = item.ZVLC_MODELO || '';
                        document.getElementById("anho").value = item.ZVLC_ANO_MODELO || '';
                        document.getElementById("color").value = item.ZVLC_COLOR_COMER || '';
                    } else {
                        console.error("No se encontraron datos para el VIN proporcionado.");
                    }
                } else {
                    console.error("Error en la solicitud a Carcloud:", error);
                }
            }
        } catch (error) {
            console.error("Error en la solicitud de login:", error);
        }
    }
}
</script>


<script>
async function handlePatenteChange() {
    const patenteValue = document.getElementById("patente").value;

    if (patenteValue) {
        console.log("El valor de Patente ha cambiado o perdió el foco:", patenteValue);

        const loginEndpoint = "https://api.carcloud.cl/login/";
        const dataEndpoint = "https://api.carcloud.cl/get-patent-information/";
        const backupEndpoint = "https://apiempresa.europcar.cl/api/PAE/GET_flota_SAP_VIN_NIV";

        try {
            // Realiza la solicitud de inicio de sesión para obtener el token
            const loginResponse = await $.ajax({
                url: loginEndpoint,
                method: "POST",
                contentType: "application/json",
                data: JSON.stringify({
                    email: "osvaldo@stech.guru", // Reemplaza con tu email
                    password: "OAbn_3004" // Reemplaza con tu contraseña
                }),
            });

            const token = loginResponse.token;

            try {
                // Realiza la solicitud de datos del VIN en el primer endpoint
                const carcloudResponse = await $.ajax({
                    url: dataEndpoint,
                    method: "POST",
                    contentType: "application/json",
                    headers: {
                        "token": token
                    },
                    data: JSON.stringify({ patent: patenteValue })
                });

                // Asigna los valores a los inputs
                document.querySelector('label[for="marca"] span').textContent = 'Marca' + ' - C';
                //document.getElementById("patente").value = carcloudResponse.patente || '';
                document.getElementById("vin").value = carcloudResponse.chasis || carcloudResponse.vin || '';
                document.getElementById("marca").value = carcloudResponse.marca || '';
                document.getElementById("modelo").value = carcloudResponse.version_modelo || '';
                document.getElementById("anho").value = carcloudResponse.anio || '';
                document.getElementById("color").value = carcloudResponse.color || '';

            } catch (error) {
                // Si ocurre un error 404 o similar
                if (error.status === 404 || (error.responseJSON && !error.responseJSON.success)) {
                    // Realiza la solicitud al endpoint de respaldo
                    const backupResponse = await $.ajax({
                        url: backupEndpoint,
                        method: "POST",
                        contentType: "application/json",
                        data: JSON.stringify({
                            parametro_vin: "",
                            parametro_patente: patenteValue,
                            parametro_niv: ""
                        }),
                    });

                    if (backupResponse && backupResponse.items && backupResponse.items.length > 0) {
                        const item = backupResponse.items[0];

                        // Asigna los valores a los inputs desde Europcar
                        document.querySelector('label[for="marca"] span').textContent = 'Marca' + ' - E';
                        document.getElementById("vin").value = item.VHVIN || '';
                        document.getElementById("marca").value = item.ZVLC_MARCA_VEHI || '';
                        document.getElementById("modelo").value = item.ZVLC_MODELO || '';
                        document.getElementById("anho").value = item.ZVLC_ANO_MODELO || '';
                        document.getElementById("color").value = item.ZVLC_COLOR_COMER || '';
                    } else {
                        console.error("No se encontraron datos para patente proporcionada.");
                    }
                } else {
                    console.error("Error en la solicitud a Carcloud:", error);
                }
            }
        } catch (error) {
            console.error("Error en la solicitud de login:", error);
        }
    }
}
</script>




<script>
    document.addEventListener('DOMContentLoaded', function() {
        document.getElementById('tipo_dispositivo').addEventListener('change', function() {
            console.log('Tipo de dispositivo cambiado:', this.value);
            const cortaCorrienteBom = document.getElementById('cortac_bombab');
            if (this.value === 'CABLEADO+CORTA' || this.value === 'CABLEADO+CORTA+INMO') {
                cortaCorrienteBom.value = 'SI';
            } else {
                cortaCorrienteBom.value = 'NO'; // Restablecer la selección si cambia a otro valor
            }
        });
    });
</script>