@extends('adminlte::page')

@section('plugins.Sweetalert2', true)
@section('plugins.Select1', true)

@section('title', 'Intranet | Nueva Solicitud De Nuevos Vehículos')

@section('content_header')
    <div class="container-fluid">

    </div>
@stop

@section('content')

    <div class="container-fluid">
        <div class="row justify-content-center">
            <div class="col-lg-10">

                <div class="card card-aspen card-tabs">

                    <div class="card-header p-0 pt-1">
                        <ul class="nav nav-tabs" id="custom-tabs-one-tab" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" id="custom-tabs-one-messages-tab" data-toggle="pill" href="#custom-tabs-one-messages" role="tab" aria-controls="custom-tabs-one-messages" aria-selected="false">Datos Generales</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="custom-tabs-one-home-tab" data-toggle="pill" href="#custom-tabs-one-home" role="tab" aria-controls="custom-tabs-one-home" aria-selected="true">Formulario Nuevos Vehículos</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="custom-tabs-one-profile-tab" data-toggle="pill" href="#custom-tabs-one-profile" role="tab" aria-controls="custom-tabs-one-profile" aria-selected="false">Vehículos</a>
                            </li>
                        </ul>
                    </div>

                    <form id="formularioDeSolicitudNuevoVehiculo">
                        @csrf
                        <div class="card-body">
                            <div class="tab-content" id="custom-tabs-one-tabContent">
                                <div class="tab-pane fade show active" id="custom-tabs-one-messages" role="tabpanel" aria-labelledby="custom-tabs-one-messages-tab">
                                    <div class="contenedorDosCamposPorFilaEnLosFormulario">

                                        <div class="form-group">
                                            <label for="campoCentroDeCostoDeLaSolicitud">Centro De Costo</label>
                                            <select aria-disabled="true" class="form-control listaDespegableConBuscador" id="campoCentroDeCostoDeLaSolicitud" name="id_centro_costo" data-live-search="true">
                                                <option value="">--Seleccionar Centro De Costo--</option>
                                                @foreach ($centrosDeCostos as $cc)
                                                    @if (old('id_centro_costo') == $cc->id)
                                                        <option selected value="{{ $cc->id }}">{{ $cc->centro_costo }}</option>
                                                    @else
                                                        <option value="{{ $cc->id }}">{{ $cc->centro_costo }}</option>
                                                    @endif
                                                @endforeach
                                            </select>
                                            <div class="invalid-feedback" id="validacionCampoCentroDeCostoDeLaSolicitud">

                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label for="campoNombreSolicitanteDeLaSolicitud">Nombre Solicitante</label>
                                            <input type="text" class="form-control" name="campoNombreSolicitanteDeLaSolicitud" value="{{ old('nombreSolicitante', auth()->user()->name) }}" readonly="true">
                                        </div>

                                        <div class="form-group">
                                            <label>Fecha Solicitud</label>
                                            <input type="date" class="form-control" name="fecha_solicitud" value="{{ old('fecha_solicitud', date('Y-m-d')) }}" readonly="true">
                                        </div>
                                    </div>
                                </div>

                                <div class="tab-pane fade" id="custom-tabs-one-home" role="tabpanel" aria-labelledby="custom-tabs-one-home-tab">
                                    <div class="contenedorDosCamposPorFilaEnLosFormulario">

                                        <div class="form-group">
                                            <label for="campoFaenaDeLaSolicitud">Faena</label>
                                            <select aria-disabled="true" class="form-control listaDespegableConBuscador" id="campoFaenaDelVehiculo" name="faena" data-live-search="true">
                                                <option value="">--Seleccionar Faena--</option>
                                                @foreach ($faenas as $faena)
                                                    @if (old('faena') == $faena)
                                                        <option selected value="{{ $faena }}">{{ $faena }}</option>
                                                    @else
                                                        <option value="{{ $faena }}">{{ $faena }}</option>
                                                    @endif
                                                @endforeach
                                            </select>
                                            <div class="invalid-feedback" id="validacionCampoFaenaDelVehiculo">

                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label for="cargo">Cantidad</label>
                                            <input type="number" class="form-control" id="campoCantidadDelVehiculo" name="cantidad" value="{{ old('cantidad') }}" onkeypress="return filtrarCamposParaQueSoloIngreseNumeros(event,this)">
                                            <div class="invalid-feedback" id="validacionCampoCantidadDelVehiculo">

                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label>Tracción</label>
                                            <select aria-disabled="true" class="form-control listaDespegableConBuscador" id="campoTraccionDelVehiculo" name="traccion" data-live-search="true">
                                                <option value="">--Seleccionar Tracción--</option>
                                                @foreach ($tracciones as $traccion)
                                                    @if (old('traccion') == $traccion)
                                                        <option selected value="{{ $traccion }}">{{ $traccion }}</option>
                                                    @else
                                                        <option value="{{ $traccion }}">{{ $traccion }}</option>
                                                    @endif
                                                @endforeach
                                            </select>
                                            <div class="invalid-feedback" id="validacionCampoTraccionDelVehiculo">

                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label>Tipo De Vehículo</label>
                                            <select aria-disabled="true" class="form-control listaDespegableConBuscador" id="campoTipoDeVehiculo" name="tipo_vehiculo" data-live-search="true">
                                                <option value="">--Seleccionar Tipo De Vehículo--</option>
                                                @foreach ($tiposVehiculos as $tipoVehiculo)
                                                    @if (old('tipo_vehiculo') == $tipoVehiculo)
                                                        <option selected value="{{ $tipoVehiculo }}">{{ $tipoVehiculo }}</option>
                                                    @else
                                                        <option value="{{ $tipoVehiculo }}">{{ $tipoVehiculo }}</option>
                                                    @endif
                                                @endforeach
                                            </select>
                                            <div class="invalid-feedback" id="validacionCampoTipoDeVehiculo">

                                            </div>
                                        </div>

                                        <div>
                                            <label for="campoLLaveConbustibleSiDeVehiculo">Llave de Combustible</label>
                                            <div class="form-group clearfix">
                                                <div class="icheck-primary d-inline" style="margin-right: 20px;">
                                                    <input type="radio" name="llave_combustible" id="campoLLaveConbustibleSiDeVehiculo">
                                                    <label for="campoLLaveConbustibleSiDeVehiculo">
                                                        Si
                                                    </label>
                                                </div>

                                                <div class="icheck-primary d-inline">
                                                    <input type="radio" name="llave_combustible" id="campoLLaveConbustibleNoDeVehiculo">
                                                    <label for="campoLLaveConbustibleNoDeVehiculo">
                                                        No
                                                    </label>
                                                </div>
                                                <div class="invalid-feedback" id="validacionCampoLLaveConbustibleDeVehiculo">

                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label for="cargo">KMS/Mensual <span style="font-weight:700; color:#17a2b8; cursor:pointer;" data-bs-toggle="tooltip" data-bs-placement="top" title="Importante evaluar correctamente el kilometraje estimado mensual, puesto que según lo estimado puede variar la tarifa, en menos kilometrajes mensuales, el costo es mucho menor, y por el contrario la tarifa incrementa. Considerar importante que indicar un kilometraje menor al indicado, nos significará un cobro por sobre kilometraje y tiene un costo elevado por KMS adicionales."><i class="fas fa-info-circle"></i></span></label>
                                            <input type="number" class="form-control" id="campoKilomtrajeMensualDelVehiculo" name="kilometraje_mensual" value="{{ old('kilometraje_mensual') }}" onkeypress="return filtrarCamposParaQueSoloIngreseNumeros(event,this)">
                                            <div class="invalid-feedback" id="validacionCampoKilomtrajeMensualDelVehiculo">

                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label>Tipo Estándar</label>
                                            <select class="form-control listaDespegableConBuscador" id="campoTipoEstandarVehiculo" name="tipo_estandar" data-live-search="true">
                                                <option value="">--Seleccionar Tipo Estandar--</option>
                                                @foreach ($tiposEntardares as $tipoEntardar)
                                                    @if (old('tipo_estandar') == $tipoEntardar)
                                                        <option selected value="{{ $tipoEntardar }}">{{ $tipoEntardar }}</option>
                                                    @else
                                                        <option value="{{ $tipoEntardar }}">{{ $tipoEntardar }}</option>
                                                    @endif
                                                @endforeach
                                            </select>
                                            <div class="invalid-feedback" id="validacionCampoTipoEstandarVehiculo">

                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label>Tipo De Moneda</label>
                                            <select class="form-control listaDespegableConBuscador" id="campoTipoDeMonedaVehiculo" name="tipo_moneda" data-live-search="true" onchange="deshabilitarElCampoTarifa(this)">
                                                <option value="">--Seleccionar Tipo De Moneda--</option>
                                                @foreach ($tiposModenas as $tipoModena)
                                                    @if (old('tipo_moneda') == $tipoModena)
                                                        <option selected value="{{ $tipoModena }}">{{ $tipoModena }}</option>
                                                    @else
                                                        <option value="{{ $tipoModena }}">{{ $tipoModena }}</option>
                                                    @endif
                                                @endforeach
                                            </select>
                                            <div class="invalid-feedback" id="validacionCampoTipoDeMonedaVehiculo">

                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label for="nombre">Tarifa Presupuestada (Mensual)</label>
                                            <input type="text" class="form-control" id="campoTarifaPresupuestadaMesVehiculoTexto" name="tarifa_presupuestada_mes_texto" value="{{ old('tarifa_presupuestada_mes_texto') }}" disabled="true" onfocus="convertirElValorDeCampoMonetarioHaNumero(this)" onblur="convertirElValorDeCampoMonetarioHaFormatoDeMonedaSegunSuTipo(this)" onkeypress="return filtrarCamposParaQueSoloIngreseMontosMonetario(event,this)" onpaste="return false;" onCopy="return false" onCut="return false">
                                            <div class="invalid-feedback" id="validacionCampoTarifaPresupuestadaMesVehiculoTexto">

                                            </div>
                                        </div>
                                        <input type="hidden" id="campoTarifaPresupuestadaMesVehiculoNumero" name="tarifa_presupuestada_mes_numero" value="{{ old('tarifa_presupuestada_mes_numero') }}">

                                        <div class="form-group">
                                            <label for="cargo">Período de arriendo - Plazo (meses)</label>
                                            <input type="text" class="form-control" id="campoPeriodoDelVehiculo" name="periodo" value="{{ old('periodo') }}">
                                            <div class="invalid-feedback" id="validacionCampoPeriodoDelVehiculo">

                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label for="cargo">Fecha tentativa inicio de arriendo</label>
                                            <input type="date" class="form-control" id="campoFechaTentativaDelVehiculo" name="fecha_tentativa" value="{{ old('fecha_tentativa') }}">
                                            <div class="invalid-feedback" id="validacionCampoFechaTentativaDelVehiculo">

                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label for="cargo">Fecha Termino Del Contrato Comercial</label>
                                            <input type="date" class="form-control" id="campoFechaTerminoContratoComercialDelVehiculo" name="fecha_termino_contrato_comercial" value="{{ old('fecha_termino_contrato_comercial') }}">
                                            <div class="invalid-feedback" id="validacionCampoFechaTerminoContratoComercialDelVehiculo">

                                            </div>
                                        </div>


                                        <input type="hidden" id="campoCodigoUnicoVehiculo">
                                    </div>

                                    <div class="contenedorDosCamposPorFilaEnLosFormulario">
                                        <div class="form-group">
                                            <label for="observacion">Observación <span style="font-weight: 700; font-size:11px;">(Opcional)</span></label>
                                            <textarea class="form-control" id="campoObservacionDelVehiculo" name="observacion" rows="3"></textarea>
                                            <div class="invalid-feedback" id="validacionCampoObservacionDelVehiculo">

                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label for="observacion">Equipamiento Adicional <span style="font-weight: 700; font-size:11px;">(Opcional)</span> <span style="font-weight:700; color:#17a2b8; cursor:pointer;" data-bs-toggle="tooltip" data-bs-placement="top" title="Agregar equipamento complementario para el vehículo. Ejemplo: Alarma de Retroceso, Sensor de Retroceso, Alarma, Caja Metálica, Equipo de invierno, Cortacorriente, 6to neumático (llanta+neu+porta), Porta Rueda, Tipo de neumático, GPS, Laminados de Vidrios Lateral, Laminados de Vidrios Parabrisas, Extintor (KG), Porta Extintor, Foco Faenero (UN), Velocidad Crucero, Parachoque Minero Tubo, Cámara Video Frontal, Cámara de Retroceso, Sensor de Somnolencia."><i class="fas fa-info-circle"></i></span></label>
                                            <textarea class="form-control" id="campoEquipamientoAdicionalDelVehiculo" name="observacion" rows="3"></textarea>
                                            <div class="invalid-feedback" id="validacionCampoquipamientoAdicionalDelVehiculo">

                                            </div>
                                        </div>
                                    </div>

                                    <button type="button" class="btn btn-aspen" id="botonDeAgregarVehiculo" onclick="agregarNuevoVehiculo()"><i class="fas fa-plus-circle" style="margin-right: 2px;"></i> Añadir Vehículo </button>
                                    <button type="button" class="btn btn-warning" id="botonDeEditarVehiculo" style="display: none;" onclick="editarNuevoVehiculo()"><i class="fas fa-edit" style="margin-right: 2px;"></i> Editar Vehículo </button>
                                </div>

                                <div class="tab-pane fade" id="custom-tabs-one-profile" role="tabpanel" aria-labelledby="custom-tabs-one-profile-tab">
                                    <div class="alert alert-danger" role="alert" style="display: none;" id="errorTablaVehiculos">

                                    </div>
                                    <div class="dt-responsive table-responsive">
                                        <table class="table table-bordered" role="grid" aria-describedby="base-style_info" id="tabla-vehiculos">
                                            <thead>
                                                <tr role="row">
                                                    <th>#</th>
                                                    <th>Acción</th>
                                                    <th>Faena</th>
                                                    <th>Cantidad</th>
                                                    <th>Tracción</th>
                                                    <th>Tipo De Vehículo</th>
                                                    <th>Llave de Combustible</th>
                                                    <th>KMS/Mensual</th>
                                                    <th>Tipo Estándar</th>
                                                    <th>Tipo De Moneda</th>
                                                    <th>Tarifa Presupuestada (Mensual)</th>
                                                    <th>Período de arriendo - Plazo (meses)</th>
                                                    <th>Fecha Tentativa Inicio De Arriendo</th>
                                                    <th>Fecha Termino Del Contrato Comercial</th>
                                                </tr>
                                            </thead>
                                            <tbody id="registroVehiculos">
                                                <tr id="vehiculosNoDisponibleEnLaTabla">
                                                    <td colspan="14" class="text-center">No hay vehículo disponibles en la tabla</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class=" card-footer">
                            <button type="button" class="btn btn-aspen" id="botonDeCreacion" onclick="registrarSolicitudDeNuevoVehiculo()"><i class="fas fa-plus-circle" style="margin-right: 2px;"></i> Registrar Solicitud De Nuevo Vehículo </button>
                            <a href="{{ route('solicitud-nuevo-vehiculo.index') }}" role="button" class="btn btn-secondary"><i class="fas fa-arrow-alt-circle-left" style="margin-right: 2px;"></i> Volver</a>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalObservacion" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <form>
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header" style="background-color: #B08C1C; color:white;">
                        <h5 class="modal-title" id="tituloModalObservacion">Detalle Observación</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color:white;">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="descripcion">Observación</label>
                            <textarea class="form-control" id="campoObservacionModal" rows="3" readonly="true"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <div class="modal fade" id="modalEquipoAdicional" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <form>
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header" style="background-color: #B08C1C; color:white;">
                        <h5 class="modal-title" id="tituloModalEquipoAdicional">Detalle Equipamiento Adicional</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color:white;">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="descripcion">Equipamiento Adicional</label>
                            <textarea class="form-control" id="campoEquipoAdicionalModal" rows="3" readonly="true"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
@stop

@section('footer')
    <div class="float-right d-none d-sm-inline">
        Intranet
    </div>
    <strong>Copyright © 2021 <a href="http://guinezingenieria.cl/">GuiñezIngeniería.cl</a>.</strong>
@stop

@section('css')
    <link rel="stylesheet" href="{{ asset('css/estilo-generico.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/icheck-bootstrap/3.0.1/icheck-bootstrap.min.css">
@stop

@section('js')
    <script src="{{ asset('js/funcionalidades-genericas.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/icheck-bootstrap/3.0.1/icheck-bootstrap.css"></script>
    <script>
        $('#campoCentroDeCostoDeLaSolicitud').selectpicker({
            dropupAuto: false
        });
        $('#campoFaenaDelVehiculo').selectpicker({
            dropupAuto: false
        });
        $('#campoTraccionDelVehiculo').selectpicker({
            dropupAuto: false
        });
        $('#campoTipoDeVehiculo').selectpicker({
            dropupAuto: false
        });
        $('#campoTipoEstandarVehiculo').selectpicker({
            dropupAuto: false
        });
        $('#campoTipoDeMonedaVehiculo').selectpicker({
            dropupAuto: false
        });
    </script>

    <script>
        function deshabilitarElCampoTarifa(tipoDeMoneda) {
            switch (tipoDeMoneda.value) {
                case "UF":
                    document.getElementById("campoTarifaPresupuestadaMesVehiculoTexto").removeAttribute("disabled");
                    document.getElementById("campoTarifaPresupuestadaMesVehiculoTexto").value = "";
                    document.getElementById("campoTarifaPresupuestadaMesVehiculoNumero").value = "";
                    break;
                case "CLP":
                    document.getElementById("campoTarifaPresupuestadaMesVehiculoTexto").removeAttribute("disabled");
                    document.getElementById("campoTarifaPresupuestadaMesVehiculoTexto").value = "";
                    document.getElementById("campoTarifaPresupuestadaMesVehiculoNumero").value = "";
                    break;
                default:
                    document.getElementById("campoTarifaPresupuestadaMesVehiculoTexto").setAttribute("disabled", true);
                    document.getElementById("campoTarifaPresupuestadaMesVehiculoTexto").value = "";
                    document.getElementById("campoTarifaPresupuestadaMesVehiculoNumero").value = "";
                    break;
            }
        }

        function filtrarCamposParaQueSoloIngreseNumeros(event, cantidad) {
            if (event.key != 1 && event.key != 2 && event.key != 3 && event.key != 4 && event.key != 5 && event.key != 6 && event.key != 7 && event.key != 8 && event.key != 9 && event.key != 0) {
                return false;
            } else {
                return true;
            }
        }

        function filtrarCamposParaQueSoloIngreseMontosMonetario(event, campo) {
            if (event.key == "." || event.key == ",") {
                var cantidadDePuntos = 0;
                var cantidadDeComas = 0;
                for (var i = 0; i < campo.value.length; i++) {
                    if (campo.value[i].toLowerCase() === ".") cantidadDePuntos++;
                    if (campo.value[i].toLowerCase() === ",") cantidadDeComas++;
                }

                if (cantidadDePuntos > 0 || cantidadDeComas > 0) {
                    return false;
                } else {
                    if (campo.value.length > 0) {
                        return true;
                    } else {
                        return false;
                    }
                }
            } else {
                if (event.key != 1 && event.key != 2 && event.key != 3 && event.key != 4 && event.key != 5 && event.key != 6 && event.key != 7 && event.key != 8 && event.key != 9 && event.key != 0) {
                    return false;
                } else {
                    return true;
                }
            }
        }

        function convertirElValorDeCampoMonetarioHaNumero(campo) {
            if (campo.value.length > 0) {
                campo.value = document.getElementById("campoTarifaPresupuestadaMesVehiculoNumero").value;
            }
        }

        function convertirElValorDeCampoMonetarioHaFormatoDeMonedaSegunSuTipo(campo) {
            let valorCampoTipoMoneda = document.getElementById("campoTipoDeMonedaVehiculo").value;
            if (campo.value.trim() != "") {
                switch (valorCampoTipoMoneda) {
                    case "UF":
                        if (campo.value.substr(0, 1) == "." || campo.value.substr(0, 1) == ",") {
                            campo.value = campo.value.substr(1);
                        }

                        let valorParaParsearHaIntegerUF = campo.value.replace(",", ".");
                        document.getElementById("campoTarifaPresupuestadaMesVehiculoNumero").value = parseFloat(valorParaParsearHaIntegerUF);
                        campo.value = campo.value.replace(",", ".");
                        let formatoMonedaUF = new Intl.NumberFormat("es-CL", {
                            style: "currency",
                            currency: "CLP",
                            minimumFractionDigits: 2,
                        })

                        let valorUF = formatoMonedaUF.format(campo.value);
                        valorUF = valorUF.replace("$", "");
                        valorUF = valorUF.replace("CLP", "");
                        campo.value = valorUF + " UF";
                        break;
                    case "CLP":
                        if (campo.value.substr(0, 1) == "." || campo.value.substr(0, 1) == ",") {
                            campo.value = campo.value.substr(1);
                        }

                        let valorParaParsearHaIntegerCLP = campo.value.replace(",", ".");
                        document.getElementById("campoTarifaPresupuestadaMesVehiculoNumero").value = parseInt(valorParaParsearHaIntegerCLP);
                        campo.value = campo.value.replace(",", ".");
                        let formatoMonedaCLP = new Intl.NumberFormat("es-CL", {
                            style: "currency",
                            currency: "CLP",
                        })

                        let valorCLP = formatoMonedaCLP.format(campo.value);
                        valorCLP = valorCLP.replace("$", "");
                        valorCLP = valorCLP.replace("CLP", "");
                        campo.value = "CLP $ " + valorCLP;
                        break;
                }
            }
        }
    </script>

    <script>
        let cantidadVehiculo = 0;

        function uuidv4() {
            return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
                (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
            );
        }

        function validarCamposDelFormularioDeNuevoVehiculo() {
            let error = false;
            if (document.getElementById("campoFaenaDelVehiculo").value.trim().length > 0) {
                document.getElementById("campoFaenaDelVehiculo").classList.remove('input-error-icon');
                document.getElementById("campoFaenaDelVehiculo").classList.add('input-success-icon');
                document.getElementById("validacionCampoFaenaDelVehiculo").innerHTML = "";
                document.getElementById("validacionCampoFaenaDelVehiculo").style.display = "none";
            } else {
                document.getElementById("campoFaenaDelVehiculo").classList.remove('input-success-icon');
                document.getElementById("campoFaenaDelVehiculo").classList.add('input-error-icon');
                document.getElementById("validacionCampoFaenaDelVehiculo").innerHTML = "El campo faena es obligatorio";
                document.getElementById("validacionCampoFaenaDelVehiculo").style.display = "block";
                error = true;
            }

            if (document.getElementById("campoCantidadDelVehiculo").value.trim().length > 0) {
                document.getElementById("campoCantidadDelVehiculo").setAttribute("class", "form-control is-valid");
                document.getElementById("validacionCampoCantidadDelVehiculo").innerHTML = "";
            } else {
                document.getElementById("campoCantidadDelVehiculo").setAttribute("class", "form-control is-invalid");
                document.getElementById("validacionCampoCantidadDelVehiculo").innerHTML = "El campo cantidad es obligatorio";
                error = true;
            }

            if (document.getElementById("campoTraccionDelVehiculo").value.trim().length > 0) {
                document.getElementById("campoTraccionDelVehiculo").classList.remove('input-error-icon');
                document.getElementById("campoTraccionDelVehiculo").classList.add('input-success-icon');
                document.getElementById("validacionCampoTraccionDelVehiculo").innerHTML = "";
                document.getElementById("validacionCampoTraccionDelVehiculo").style.display = "none";
            } else {
                document.getElementById("campoTraccionDelVehiculo").classList.remove('input-success-icon');
                document.getElementById("campoTraccionDelVehiculo").classList.add('input-error-icon');
                document.getElementById("validacionCampoTraccionDelVehiculo").innerHTML = "El campo faena es obligatorio";
                document.getElementById("validacionCampoTraccionDelVehiculo").style.display = "block";
                error = true;
            }

            if (document.getElementById("campoTipoDeVehiculo").value.trim().length > 0) {
                document.getElementById("campoTipoDeVehiculo").classList.remove('input-error-icon');
                document.getElementById("campoTipoDeVehiculo").classList.add('input-success-icon');
                document.getElementById("validacionCampoTipoDeVehiculo").innerHTML = "";
                document.getElementById("validacionCampoTipoDeVehiculo").style.display = "none";
            } else {
                document.getElementById("campoTipoDeVehiculo").classList.remove('input-success-icon');
                document.getElementById("campoTipoDeVehiculo").classList.add('input-error-icon');
                document.getElementById("validacionCampoTipoDeVehiculo").innerHTML = "El campo tipo de vehículo es obligatorio";
                document.getElementById("validacionCampoTipoDeVehiculo").style.display = "block";
                error = true;
            }

            if (document.getElementById('campoLLaveConbustibleSiDeVehiculo').checked == false && document.getElementById('campoLLaveConbustibleNoDeVehiculo').checked == false) {
                document.getElementById("validacionCampoLLaveConbustibleDeVehiculo").innerHTML = "El campo llave de combustible es obligatorio";
                document.getElementById("validacionCampoLLaveConbustibleDeVehiculo").style.display = "block";
                error = true;
            } else {
                document.getElementById("validacionCampoLLaveConbustibleDeVehiculo").innerHTML = "";
                document.getElementById("validacionCampoLLaveConbustibleDeVehiculo").style.display = "none";
            }

            if (document.getElementById("campoKilomtrajeMensualDelVehiculo").value.trim().length > 0) {
                document.getElementById("campoKilomtrajeMensualDelVehiculo").setAttribute("class", "form-control is-valid");
                document.getElementById("validacionCampoKilomtrajeMensualDelVehiculo").innerHTML = "";
            } else {
                document.getElementById("campoKilomtrajeMensualDelVehiculo").setAttribute("class", "form-control is-invalid");
                document.getElementById("validacionCampoKilomtrajeMensualDelVehiculo").innerHTML = "El campo kms/mensual es obligatorio";
                error = true;
            }

            if (document.getElementById("campoTipoEstandarVehiculo").value.trim().length > 0) {
                document.getElementById("campoTipoEstandarVehiculo").classList.remove('input-error-icon');
                document.getElementById("campoTipoEstandarVehiculo").classList.add('input-success-icon');
                document.getElementById("validacionCampoTipoEstandarVehiculo").innerHTML = "";
                document.getElementById("validacionCampoTipoEstandarVehiculo").style.display = "none";
            } else {
                document.getElementById("campoTipoEstandarVehiculo").classList.remove('input-success-icon');
                document.getElementById("campoTipoEstandarVehiculo").classList.add('input-error-icon');
                document.getElementById("validacionCampoTipoEstandarVehiculo").innerHTML = "El campo tipo de estandar es obligatorio";
                document.getElementById("validacionCampoTipoEstandarVehiculo").style.display = "block";
                error = true;
            }

            if (document.getElementById("campoTipoDeMonedaVehiculo").value.trim().length > 0) {
                document.getElementById("campoTipoDeMonedaVehiculo").classList.remove('input-error-icon');
                document.getElementById("campoTipoDeMonedaVehiculo").classList.add('input-success-icon');
                document.getElementById("validacionCampoTipoDeMonedaVehiculo").innerHTML = "";
                document.getElementById("validacionCampoTipoDeMonedaVehiculo").style.display = "none";
            } else {
                document.getElementById("campoTipoDeMonedaVehiculo").classList.remove('input-success-icon');
                document.getElementById("campoTipoDeMonedaVehiculo").classList.add('input-error-icon');
                document.getElementById("validacionCampoTipoDeMonedaVehiculo").innerHTML = "El campo tipo de moneda es obligatorio";
                document.getElementById("validacionCampoTipoDeMonedaVehiculo").style.display = "block";
                error = true;
            }

            if (document.getElementById("campoTarifaPresupuestadaMesVehiculoTexto").value.trim().length > 0) {
                if (parseInt(document.getElementById("campoTarifaPresupuestadaMesVehiculoNumero").value) > 0) {
                    document.getElementById("campoTarifaPresupuestadaMesVehiculoTexto").setAttribute("class", "form-control is-valid");
                    document.getElementById("validacionCampoTarifaPresupuestadaMesVehiculoTexto").innerHTML = "";
                } else {
                    document.getElementById("campoTarifaPresupuestadaMesVehiculoTexto").setAttribute("class", "form-control is-invalid");
                    document.getElementById("validacionCampoTarifaPresupuestadaMesVehiculoTexto").innerHTML = "El campo terifa presupuestada debe ser mayor que cero";
                }
            } else {
                document.getElementById("campoTarifaPresupuestadaMesVehiculoTexto").setAttribute("class", "form-control is-invalid");
                document.getElementById("validacionCampoTarifaPresupuestadaMesVehiculoTexto").innerHTML = "El campo terifa presupuestada es obligatorio";
                error = true;
            }

            if (document.getElementById("campoPeriodoDelVehiculo").value.trim().length > 0) {
                document.getElementById("campoPeriodoDelVehiculo").setAttribute("class", "form-control is-valid");
                document.getElementById("validacionCampoPeriodoDelVehiculo").innerHTML = "";
            } else {
                document.getElementById("campoPeriodoDelVehiculo").setAttribute("class", "form-control is-invalid");
                document.getElementById("validacionCampoPeriodoDelVehiculo").innerHTML = "El campo período de arriendo es obligatorio";
                error = true;
            }

            if (document.getElementById("campoFechaTentativaDelVehiculo").value.trim().length > 0) {
                document.getElementById("campoFechaTentativaDelVehiculo").setAttribute("class", "form-control is-valid");
                document.getElementById("validacionCampoFechaTentativaDelVehiculo").innerHTML = "";
            } else {
                document.getElementById("campoFechaTentativaDelVehiculo").setAttribute("class", "form-control is-invalid");
                document.getElementById("validacionCampoFechaTentativaDelVehiculo").innerHTML = "El campo fecha tentativa es obligatorio";
                error = true;
            }

            if (document.getElementById("campoFechaTerminoContratoComercialDelVehiculo").value.trim().length > 0) {
                document.getElementById("campoFechaTerminoContratoComercialDelVehiculo").setAttribute("class", "form-control is-valid");
                document.getElementById("validacionCampoFechaTerminoContratoComercialDelVehiculo").innerHTML = "";
            } else {
                document.getElementById("campoFechaTerminoContratoComercialDelVehiculo").setAttribute("class", "form-control is-invalid");
                document.getElementById("validacionCampoFechaTerminoContratoComercialDelVehiculo").innerHTML = "El campo fecha termino del contrato comercial es obligatorio";
                error = true;
            }
            return error;
        }

        function limpiarCamposDelFormularioDeNuevoVehiculo() {
            $('#campoFaenaDelVehiculo').selectpicker('val', "");
            document.getElementById("validacionCampoFaenaDelVehiculo").innerHTML = "";
            document.getElementById("campoFaenaDelVehiculo").classList.remove('input-success-icon');
            document.getElementById("campoFaenaDelVehiculo").classList.remove('input-error-icon');
            document.getElementById("validacionCampoFaenaDelVehiculo").style.display = "none";

            document.getElementById("campoCantidadDelVehiculo").value = "";
            document.getElementById("validacionCampoCantidadDelVehiculo").innerHTML = "";
            document.getElementById("campoCantidadDelVehiculo").setAttribute("class", "form-control");

            $('#campoTraccionDelVehiculo').selectpicker('val', "");
            document.getElementById("validacionCampoTraccionDelVehiculo").innerHTML = "";
            document.getElementById("campoTraccionDelVehiculo").classList.remove('input-success-icon');
            document.getElementById("campoTraccionDelVehiculo").classList.remove('input-error-icon');
            document.getElementById("validacionCampoTraccionDelVehiculo").style.display = "none";

            $('#campoTipoDeVehiculo').selectpicker('val', "");
            document.getElementById("validacionCampoTipoDeVehiculo").innerHTML = "";
            document.getElementById("campoTipoDeVehiculo").classList.remove('input-success-icon');
            document.getElementById("campoTipoDeVehiculo").classList.remove('input-error-icon');
            document.getElementById("validacionCampoTipoDeVehiculo").style.display = "none";

            document.getElementById('campoLLaveConbustibleSiDeVehiculo').checked = false
            document.getElementById('campoLLaveConbustibleNoDeVehiculo').checked = false
            document.getElementById("validacionCampoLLaveConbustibleDeVehiculo").innerHTML = "";
            document.getElementById("validacionCampoLLaveConbustibleDeVehiculo").style.display = "none";

            document.getElementById("campoKilomtrajeMensualDelVehiculo").value = "";
            document.getElementById("validacionCampoKilomtrajeMensualDelVehiculo").innerHTML = "";
            document.getElementById("campoKilomtrajeMensualDelVehiculo").setAttribute("class", "form-control");

            $('#campoTipoEstandarVehiculo').selectpicker('val', "");
            document.getElementById("validacionCampoTipoEstandarVehiculo").innerHTML = "";
            document.getElementById("campoTipoEstandarVehiculo").classList.remove('input-success-icon');
            document.getElementById("campoTipoEstandarVehiculo").classList.remove('input-error-icon');
            document.getElementById("validacionCampoTipoEstandarVehiculo").style.display = "none";

            $('#campoTipoDeMonedaVehiculo').selectpicker('val', "");
            document.getElementById("validacionCampoTipoDeMonedaVehiculo").innerHTML = "";
            document.getElementById("campoTipoDeMonedaVehiculo").classList.remove('input-success-icon');
            document.getElementById("campoTipoDeMonedaVehiculo").classList.remove('input-error-icon');
            document.getElementById("validacionCampoTipoDeMonedaVehiculo").style.display = "none";

            document.getElementById("campoTarifaPresupuestadaMesVehiculoTexto").value = "";
            document.getElementById("campoTarifaPresupuestadaMesVehiculoNumero").value = "";
            document.getElementById("validacionCampoTarifaPresupuestadaMesVehiculoTexto").innerHTML = "";
            document.getElementById("campoTarifaPresupuestadaMesVehiculoTexto").setAttribute("class", "form-control");

            document.getElementById("campoPeriodoDelVehiculo").value = "";
            document.getElementById("validacionCampoPeriodoDelVehiculo").innerHTML = "";
            document.getElementById("campoPeriodoDelVehiculo").setAttribute("class", "form-control");

            document.getElementById("campoFechaTentativaDelVehiculo").value = "";
            document.getElementById("validacionCampoFechaTentativaDelVehiculo").innerHTML = "";
            document.getElementById("campoFechaTentativaDelVehiculo").setAttribute("class", "form-control");

            document.getElementById("campoFechaTerminoContratoComercialDelVehiculo").value = "";
            document.getElementById("validacionCampoFechaTerminoContratoComercialDelVehiculo").innerHTML = "";
            document.getElementById("campoFechaTerminoContratoComercialDelVehiculo").setAttribute("class", "form-control");

            document.getElementById("campoObservacionDelVehiculo").value = "";
            document.getElementById("validacionCampoObservacionDelVehiculo").innerHTML = "";
            document.getElementById("campoObservacionDelVehiculo").setAttribute("class", "form-control");

            document.getElementById("campoEquipamientoAdicionalDelVehiculo").value = "";
            document.getElementById("validacionCampoquipamientoAdicionalDelVehiculo").innerHTML = "";
            document.getElementById("campoEquipamientoAdicionalDelVehiculo").setAttribute("class", "form-control");
        }

        function detalleDelCampoObservacion(fila) {
            let elementoPadre = fila.parentElement.parentElement.parentElement.parentElement;
            document.getElementById("campoObservacionModal").value = elementoPadre.querySelector(".tabla-observacion-vehiculo").innerHTML;
            $("#modalObservacion").modal("show");
        }

        function detalleDelCampoEquipamientoAdicional(fila) {
            let elementoPadre = fila.parentElement.parentElement.parentElement.parentElement;
            document.getElementById("campoEquipoAdicionalModal").value = elementoPadre.querySelector(".tabla-equipo-adicional-vehiculo").innerHTML;
            $("#modalEquipoAdicional").modal("show");
        }

        function agregarNuevoVehiculo() {
            if (validarCamposDelFormularioDeNuevoVehiculo() == false) {
                document.getElementById("botonDeAgregarVehiculo").setAttribute("disabled", true);
                let faena = document.getElementById("campoFaenaDelVehiculo").value.trim();
                let cantidad = document.getElementById("campoCantidadDelVehiculo").value.trim();
                let traccion = document.getElementById("campoTraccionDelVehiculo").value.trim();
                let tipoDeVehiculo = document.getElementById("campoTipoDeVehiculo").value.trim();
                let llaveDeConbustible = "";
                if (document.getElementById('campoLLaveConbustibleSiDeVehiculo').checked == true) {
                    llaveDeConbustible = "Si";
                } else if (document.getElementById('campoLLaveConbustibleNoDeVehiculo').checked == true) {
                    llaveDeConbustible = "No";
                }
                let kilomtraje = document.getElementById("campoKilomtrajeMensualDelVehiculo").value.trim();
                let tipoEstandar = document.getElementById("campoTipoEstandarVehiculo").value.trim();
                let tipoDeMoneda = document.getElementById("campoTipoDeMonedaVehiculo").value.trim();
                let tarifaPresupuestadaMesTexto = document.getElementById("campoTarifaPresupuestadaMesVehiculoTexto").value.trim();
                let tarifaPresupuestadaMesNumero = document.getElementById("campoTarifaPresupuestadaMesVehiculoNumero").value.trim();
                let periodo = document.getElementById("campoPeriodoDelVehiculo").value.trim();
                let fechaTentativa = document.getElementById("campoFechaTentativaDelVehiculo").value.trim();
                let fechaTerminoContratoComercial = document.getElementById("campoFechaTerminoContratoComercialDelVehiculo").value.trim();
                let observacion = document.getElementById("campoObservacionDelVehiculo").value.trim();
                let equipamientoAdicional = document.getElementById("campoEquipamientoAdicionalDelVehiculo").value.trim();
                let codigoUnico = uuidv4();
                cantidadVehiculo++;

                let itemDropdowObservacion = '';
                let itemDropdowEquipamientoAdicional = '';

                if (observacion.length > 0) {
                    itemDropdowObservacion = '<a class="dropdown-item" href="#" onclick="detalleDelCampoObservacion(this)"><i class="fas fa-eye" aria-hidden="true"></i> Observación</a>';
                }

                if (equipamientoAdicional.length > 0) {
                    itemDropdowEquipamientoAdicional = '<a class="dropdown-item" href="#" onclick="detalleDelCampoEquipamientoAdicional(this)"><i class="fas fa-tools" aria-hidden="true"></i> Equipamiento Adicional</a>';
                }

                document.getElementById("vehiculosNoDisponibleEnLaTabla").style.display = "none";
                document.getElementById("registroVehiculos").innerHTML +=
                    '<tr role="row" class="odd">' +
                    '<td style="display: none;" class="tabla-id-unico-vehiculo">' + codigoUnico + '</td>' +
                    '<td style="display: none;" class="tabla-tarifa-presupuestada-numero-vehiculo">' + tarifaPresupuestadaMesNumero + '</td>' +
                    '<td style="display: none;" class="tabla-observacion-vehiculo">' + observacion + '</td>' +
                    '<td style="display: none;" class="tabla-equipo-adicional-vehiculo">' + equipamientoAdicional + '</td>' +
                    '<td class="tabla-contador-vehiculo">' + cantidadVehiculo + '</td>' +
                    '<td class="tabla-accion-vehiculo">' +
                    '<div class="btn-group ">' +
                    '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Acciones</button>' +
                    '<div class="dropdown-menu">' +
                    itemDropdowObservacion +
                    itemDropdowEquipamientoAdicional +
                    '<a class="dropdown-item" href="#" onclick="establecerFormularioParaEditarVehiculo(this)"><i class="fas fa-edit" aria-hidden="true"></i> Editar Fila</a>' +
                    '<a class="dropdown-item" href="#" onclick="eliminarFila(this)"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Fila</a>' +
                    '</div>' +
                    '</div>' +
                    '</td>' +
                    '<td class="tabla-faena-vehiculo">' + faena + '</td>' +
                    '<td class="tabla-cantidad-vehiculo">' + cantidad + '</td>' +
                    '<td class="tabla-traccion-vehiculo">' + traccion + '</td>' +
                    '<td class="tabla-tipo-vehiculo">' + tipoDeVehiculo + '</td>' +
                    '<td class="tabla-llave-combustible-vehiculo">' + llaveDeConbustible + '</td>' +
                    '<td class="tabla-kilometraje-mensual-vehiculo">' + kilomtraje + '</td>' +
                    '<td class="tabla-tipo-estandar-vehiculo">' + tipoEstandar + '</td>' +
                    '<td class="tabla-tipo-moneda-vehiculo">' + tipoDeMoneda + '</td>' +
                    '<td class="tabla-tarifa-presupuestada-texto-vehiculo">' + tarifaPresupuestadaMesTexto + '</td>' +
                    '<td class="tabla-periodo-vehiculo">' + periodo + '</td>' +
                    '<td class="tabla-fecha-tentativa-vehiculo">' + fechaTentativa + '</td>' +
                    '<td class="tabla-fecha-termino-contrato-comercial-vehiculo">' + fechaTerminoContratoComercial + '</td>' +
                    '</tr>';
                limpiarCamposDelFormularioDeNuevoVehiculo();

                Swal.fire({
                    icon: 'success',
                    title: '¡Agregado!',
                    text: 'El vehículo se agrego con éxito',
                    confirmButtonColor: "#448aff",
                    confirmButtonText: "Confirmar"
                })

                document.getElementById("botonDeAgregarVehiculo").removeAttribute("disabled");
                document.getElementById("custom-tabs-one-profile-tab").click();
            }
        }

        function eliminarFila(fila) {
            Swal.fire({
                title: '¿Esta seguro?',
                text: "Se borraba todos los datos que tenga relación al con el vehículo",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: '¡Si, borrar!',
                cancelButtonText: 'Cancelar'
            }).then((result) => {
                if (result.isConfirmed) {
                    let elementoPadre = fila.parentElement.parentElement.parentElement.parentElement;
                    cantidadVehiculo = 0;
                    elementoPadre.remove();
                    let filas = document.getElementById('tabla-vehiculos').tBodies[0].querySelectorAll("tr");
                    filas.forEach(elemento => {
                        if (elemento.querySelector(".tabla-contador-vehiculo")) {
                            cantidadVehiculo++;
                            elemento.querySelector(".tabla-contador-vehiculo").innerHTML = cantidadVehiculo;
                        }
                    });

                    if (filas.length <= 1) {
                        document.getElementById("vehiculosNoDisponibleEnLaTabla").style.display = "table-row";
                    }
                }
            })
        }

        function establecerFormularioParaEditarVehiculo(fila) {
            limpiarCamposDelFormularioDeNuevoVehiculo()
            let elementoPadre = fila.parentElement.parentElement.parentElement.parentElement;
            let faena = elementoPadre.querySelector(".tabla-faena-vehiculo").innerHTML;
            let cantidad = elementoPadre.querySelector(".tabla-cantidad-vehiculo").innerHTML;
            let traccion = elementoPadre.querySelector(".tabla-traccion-vehiculo").innerHTML;
            let tipoDeVehiculo = elementoPadre.querySelector(".tabla-tipo-vehiculo").innerHTML;
            let llaveCombustible = elementoPadre.querySelector(".tabla-llave-combustible-vehiculo").innerHTML;
            let kilometrajeMensual = elementoPadre.querySelector(".tabla-kilometraje-mensual-vehiculo").innerHTML;
            let tipoEstandar = elementoPadre.querySelector(".tabla-tipo-estandar-vehiculo").innerHTML;
            let tipoMoneda = elementoPadre.querySelector(".tabla-tipo-moneda-vehiculo").innerHTML;
            let tarifaPresupuestadaTexto = elementoPadre.querySelector(".tabla-tarifa-presupuestada-texto-vehiculo").innerHTML;
            let tarifaPresupuestadaNumero = elementoPadre.querySelector(".tabla-tarifa-presupuestada-numero-vehiculo").innerHTML;
            let periodo = elementoPadre.querySelector(".tabla-periodo-vehiculo").innerHTML;
            let fechaTentativa = elementoPadre.querySelector(".tabla-fecha-tentativa-vehiculo").innerHTML;
            let fechaTerminoContratoComercial = elementoPadre.querySelector(".tabla-fecha-termino-contrato-comercial-vehiculo").innerHTML;
            let codigoUnico = elementoPadre.querySelector(".tabla-id-unico-vehiculo").innerHTML;

            document.getElementById("campoCodigoUnicoVehiculo").value = codigoUnico;
            $('#campoFaenaDelVehiculo').selectpicker('val', faena);
            document.getElementById("campoCantidadDelVehiculo").value = cantidad;
            $('#campoTraccionDelVehiculo').selectpicker('val', traccion);
            $('#campoTipoDeVehiculo').selectpicker('val', tipoDeVehiculo);
            if (llaveCombustible == "Si") {
                document.getElementById('campoLLaveConbustibleSiDeVehiculo').checked = true;
            } else if (llaveCombustible == "No") {
                document.getElementById('campoLLaveConbustibleNoDeVehiculo').checked = true;
            }
            document.getElementById("campoKilomtrajeMensualDelVehiculo").value = kilometrajeMensual;
            $('#campoTipoEstandarVehiculo').selectpicker('val', tipoEstandar);
            $('#campoTipoDeMonedaVehiculo').selectpicker('val', tipoMoneda);
            document.getElementById("campoTarifaPresupuestadaMesVehiculoTexto").value = tarifaPresupuestadaTexto;
            document.getElementById("campoTarifaPresupuestadaMesVehiculoNumero").value = tarifaPresupuestadaNumero;
            document.getElementById("campoPeriodoDelVehiculo").value = periodo;
            document.getElementById("campoFechaTentativaDelVehiculo").value = fechaTentativa;
            document.getElementById("campoFechaTerminoContratoComercialDelVehiculo").value = fechaTerminoContratoComercial;

            document.getElementById("botonDeAgregarVehiculo").style.display = "none";
            document.getElementById("botonDeEditarVehiculo").style.display = "inline-block";
            document.getElementById("custom-tabs-one-home-tab").click();
        }

        function editarNuevoVehiculo() {
            if (validarCamposDelFormularioDeNuevoVehiculo() == false) {
                document.getElementById("botonDeEditarVehiculo").setAttribute("disabled", true);
                let faena = document.getElementById("campoFaenaDelVehiculo").value.trim();
                let cantidad = document.getElementById("campoCantidadDelVehiculo").value.trim();
                let traccion = document.getElementById("campoTraccionDelVehiculo").value.trim();
                let tipoDeVehiculo = document.getElementById("campoTipoDeVehiculo").value.trim();
                let llaveDeConbustible = "";
                if (document.getElementById('campoLLaveConbustibleSiDeVehiculo').checked == true) {
                    llaveDeConbustible = "Si";
                } else if (document.getElementById('campoLLaveConbustibleNoDeVehiculo').checked == true) {
                    llaveDeConbustible = "No";
                }
                let kilomtraje = document.getElementById("campoKilomtrajeMensualDelVehiculo").value.trim();
                let tipoEstandar = document.getElementById("campoTipoEstandarVehiculo").value.trim();
                let tipoDeMoneda = document.getElementById("campoTipoDeMonedaVehiculo").value.trim();
                let tarifaPresupuestadaMesTexto = document.getElementById("campoTarifaPresupuestadaMesVehiculoTexto").value.trim();
                let tarifaPresupuestadaMesNumero = document.getElementById("campoTarifaPresupuestadaMesVehiculoNumero").value.trim();
                let periodo = document.getElementById("campoPeriodoDelVehiculo").value.trim();
                let fechaTentativa = document.getElementById("campoFechaTentativaDelVehiculo").value.trim();
                let fechaTerminoContratoComercial = document.getElementById("campoFechaTerminoContratoComercialDelVehiculo").value.trim();
                let observacion = document.getElementById("campoObservacionDelVehiculo").value.trim();
                let equipamientoAdicional = document.getElementById("campoEquipamientoAdicionalDelVehiculo").value.trim();
                let codigoUnico = document.getElementById("campoCodigoUnicoVehiculo").value.trim();
                let filas = document.getElementById('tabla-vehiculos').tBodies[0].querySelectorAll("tr");
                filas.forEach(elementoPadre => {
                    if (elementoPadre.querySelector(".tabla-contador-vehiculo")) {
                        if (elementoPadre.querySelector(".tabla-id-unico-vehiculo").innerHTML == codigoUnico) {
                            elementoPadre.querySelector(".tabla-faena-vehiculo").innerHTML = faena;
                            elementoPadre.querySelector(".tabla-cantidad-vehiculo").innerHTML = cantidad;
                            elementoPadre.querySelector(".tabla-traccion-vehiculo").innerHTML = traccion;
                            elementoPadre.querySelector(".tabla-tipo-vehiculo").innerHTML = tipoDeVehiculo;
                            elementoPadre.querySelector(".tabla-llave-combustible-vehiculo").innerHTML = llaveDeConbustible;
                            elementoPadre.querySelector(".tabla-kilometraje-mensual-vehiculo").innerHTML = kilomtraje;
                            elementoPadre.querySelector(".tabla-tipo-estandar-vehiculo").innerHTML = tipoEstandar;
                            elementoPadre.querySelector(".tabla-tipo-moneda-vehiculo").innerHTML = tipoDeMoneda;
                            elementoPadre.querySelector(".tabla-tarifa-presupuestada-texto-vehiculo").innerHTML = tarifaPresupuestadaMesTexto;
                            elementoPadre.querySelector(".tabla-tarifa-presupuestada-numero-vehiculo").innerHTML = tarifaPresupuestadaMesNumero;
                            elementoPadre.querySelector(".tabla-periodo-vehiculo").innerHTML = periodo;
                            elementoPadre.querySelector(".tabla-fecha-tentativa-vehiculo").innerHTML = fechaTentativa;
                            elementoPadre.querySelector(".tabla-fecha-termino-contrato-comercial-vehiculo").innerHTML = fechaTerminoContratoComercial;
                            elementoPadre.querySelector(".tabla-observacion-vehiculo").innerHTML = observacion;
                            elementoPadre.querySelector(".tabla-equipo-adicional-vehiculo").innerHTML = equipamientoAdicional;

                            let itemDropdowObservacion = '';
                            let itemDropdowEquipamientoAdicional = '';

                            if (observacion.length > 0) {
                                itemDropdowObservacion = '<a class="dropdown-item" href="#" onclick="detalleDelCampoObservacion(this)"><i class="fas fa-eye" aria-hidden="true"></i> Observación</a>';
                            }

                            if (equipamientoAdicional.length > 0) {
                                itemDropdowEquipamientoAdicional = '<a class="dropdown-item" href="#" onclick="detalleDelCampoEquipamientoAdicional(this)"><i class="fas fa-tools" aria-hidden="true"></i> Equipamiento Adicional</a>';
                            }

                            elementoPadre.querySelector(".tabla-accion-vehiculo").innerHTML =
                                '<div class="btn-group ">' +
                                '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Acciones</button>' +
                                '<div class="dropdown-menu">' +
                                itemDropdowObservacion +
                                itemDropdowEquipamientoAdicional +
                                '<a class="dropdown-item" href="#" onclick="establecerFormularioParaEditarVehiculo(this)"><i class="fas fa-edit" aria-hidden="true"></i> Editar Fila</a>' +
                                '<a class="dropdown-item" href="#" onclick="eliminarFila(this)"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Fila</a>' +
                                '</div>' +
                                '</div>';
                        }
                    }
                });

                Swal.fire({
                    icon: 'success',
                    title: '¡Editado!',
                    text: 'El vehículo se edito con éxito',
                    confirmButtonColor: "#448aff",
                    confirmButtonText: "Confirmar"
                })

                document.getElementById("custom-tabs-one-profile-tab").click();
                limpiarCamposDelFormularioDeNuevoVehiculo()
                document.getElementById("botonDeEditarVehiculo").removeAttribute("disabled");
                document.getElementById("botonDeAgregarVehiculo").style.display = "inline-block";
                document.getElementById("botonDeEditarVehiculo").style.display = "none";
            }
        }
    </script>

    <script>
        function validarCamposDelFormualrioDeSolicitudDeNuevoVehiculo() {
            let error = false;
            let tabIdError = "";
            let filas = document.getElementById('tabla-vehiculos').tBodies[0].querySelectorAll("tr");
            if (filas.length <= 1) {
                document.getElementById("errorTablaVehiculos").innerHTML = "Debe añadir al menos un vehículo para registrar la solicitud en la plataforma";
                document.getElementById("errorTablaVehiculos").style.display = "block";
                error = true;
                tabIdError = "custom-tabs-one-profile-tab";
            } else {
                document.getElementById("errorTablaVehiculos").innerHTML = "";
                document.getElementById("errorTablaVehiculos").style.display = "none";
            }

            if (document.getElementById("campoCentroDeCostoDeLaSolicitud").value.trim().length > 0) {
                document.getElementById("campoCentroDeCostoDeLaSolicitud").classList.remove('input-error-icon');
                document.getElementById("campoCentroDeCostoDeLaSolicitud").classList.add('input-success-icon');
                document.getElementById("validacionCampoCentroDeCostoDeLaSolicitud").innerHTML = "";
                document.getElementById("validacionCampoCentroDeCostoDeLaSolicitud").style.display = "none";
            } else {
                document.getElementById("campoCentroDeCostoDeLaSolicitud").classList.remove('input-success-icon');
                document.getElementById("campoCentroDeCostoDeLaSolicitud").classList.add('input-error-icon');
                document.getElementById("validacionCampoCentroDeCostoDeLaSolicitud").innerHTML = "El campo centro de costo es obligatorio";
                document.getElementById("validacionCampoCentroDeCostoDeLaSolicitud").style.display = "block";
                error = true;
                tabIdError = "custom-tabs-one-messages-tab";
            }

            if (tabIdError != "") {
                document.getElementById(tabIdError).click();
            }

            return error;
        }

        function registrarSolicitudDeNuevoVehiculo() {
            if (validarCamposDelFormualrioDeSolicitudDeNuevoVehiculo() == false) {
                document.getElementById("botonDeCreacion").setAttribute("disabled", true);
                generarLoading('{{asset('img/logo.png')}}')

                let centroDeCosto = document.getElementById("campoCentroDeCostoDeLaSolicitud").value.trim();

                let listadoDeVehiculos = [];
                let filas = document.getElementById('tabla-vehiculos').tBodies[0].querySelectorAll("tr");
                filas.forEach(elementoPadre => {
                    if (elementoPadre.querySelector(".tabla-contador-vehiculo")) {
                        let vehiculo = {
                            faena: elementoPadre.querySelector(".tabla-faena-vehiculo").innerHTML,
                            cantidad: elementoPadre.querySelector(".tabla-cantidad-vehiculo").innerHTML,
                            traccion: elementoPadre.querySelector(".tabla-traccion-vehiculo").innerHTML,
                            tipo_vehiculo: elementoPadre.querySelector(".tabla-tipo-vehiculo").innerHTML,
                            llave_combustible: elementoPadre.querySelector(".tabla-llave-combustible-vehiculo").innerHTML,
                            kilometraje_mensual: elementoPadre.querySelector(".tabla-kilometraje-mensual-vehiculo").innerHTML,
                            tipo_estandar: elementoPadre.querySelector(".tabla-tipo-estandar-vehiculo").innerHTML,
                            tipo_moneda: elementoPadre.querySelector(".tabla-tipo-moneda-vehiculo").innerHTML,
                            tarifa_presupuestada_mes_numero: elementoPadre.querySelector(".tabla-tarifa-presupuestada-numero-vehiculo").innerHTML,
                            tarifa_presupuestada_mes_texto: elementoPadre.querySelector(".tabla-tarifa-presupuestada-texto-vehiculo").innerHTML,
                            periodo: elementoPadre.querySelector(".tabla-periodo-vehiculo").innerHTML,
                            fecha_tentativa: elementoPadre.querySelector(".tabla-fecha-tentativa-vehiculo").innerHTML,
                            fecha_termino_contrato_comercial: elementoPadre.querySelector(".tabla-fecha-termino-contrato-comercial-vehiculo").innerHTML,
                            observacion: elementoPadre.querySelector(".tabla-observacion-vehiculo").innerHTML,
                            equipo_adicional: elementoPadre.querySelector(".tabla-equipo-adicional-vehiculo").innerHTML,
                            estado: "Abierta"
                        };
                        listadoDeVehiculos.push(vehiculo);
                    }
                });
                listadoDeVehiculos = JSON.stringify(listadoDeVehiculos);

                let formData = new FormData();
                formData.append('id_centro_costo', centroDeCosto);
                formData.append('listado_vehiculos', listadoDeVehiculos);
                let csrf = '{{ csrf_token() }}';
                $.ajax({
                    url: "{{ route('solicitud-nuevo-vehiculo.store') }}",
                    method: 'POST',
                    data: formData,
                    contentType: false,
                    processData: false,
                    dataType: 'json',
                    headers: {
                        'X-CSRF-TOKEN': csrf
                    },
                    success: function(data) {
                        eliminarLoading()
                        Swal.fire({
                                icon: 'success',
                                title: '¡Creado!',
                                text: 'La solicitud de nuevo vehículo se generó con éxito',
                                confirmButtonColor: "#448aff",
                                confirmButtonText: "Confirmar"
                            }).then((result) => {
                                location.reload();
                            })
                            .catch((error) => {
                                location.reload();
                            });
                    },
                    error: function(data) {
                        console.log(data)
                        eliminarLoading()
                    }
                })

            }
        }
    </script>
@stop