@extends('adminlte::page')

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

@section('title', 'Intranet | Editar 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="contenedorDosCamposPorFilaEnLosFormularios">

                                        <div class="form-group">
                                            <label for="campoCorrelativoDeLaSolicitud">Correlativo</label>
                                            <input type="text" class="form-control" name="campoCorrelativoDeLaSolicitud" value="{{ old('correlativo', $solicitud->correlativo) }}" readonly="true">
                                        </div>

                                        <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', $solicitud->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', $solicitud->solicitante->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', fechaConFormatoDeUSA($solicitud->created_at)) }}" 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" style="display: none;">
                                                    <td colspan="14" class="text-center">No hay vehículo disponibles en la tabla</td>
                                                </tr>
                                                @php
                                                    $cantidadVehiculos = 0;
                                                @endphp
                                                @foreach ($solicitud->elementos as $vehiculo)
                                                    @php
                                                        $cantidadVehiculos++;
                                                    @endphp
                                                    <tr>
                                                        <td style="display: none;" class="tabla-id-unico-vehiculo"></td>
                                                        <td style="display: none;" class="tabla-tarifa-presupuestada-numero-vehiculo">{{ $vehiculo->tarifa_presupuestada_mes_numero }}</td>
                                                        <td style="display: none;" class="tabla-observacion-vehiculo">{{ $vehiculo->observacion }}</td>
                                                        <td style="display: none;" class="tabla-equipo-adicional-vehiculo">{{ $vehiculo->equipo_adicional }}</td>
                                                        <td class="tabla-contador-vehiculo">{{ $cantidadVehiculos }}</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">
                                                                    @isset($vehiculo->observacion)
                                                                        <a class="dropdown-item" href="#" onclick="detalleDelCampoObservacion(this)"><i class="fas fa-eye" aria-hidden="true"></i> Observación</a>
                                                                    @endisset

                                                                    @isset($vehiculo->equipo_adicional)
                                                                        <a class="dropdown-item" href="#" onclick="detalleDelCampoEquipamientoAdicional(this)"><i class="fas fa-tools" aria-hidden="true"></i> Equipamiento Adicional</a>
                                                                    @endisset

                                                                    <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">{{ $vehiculo->faena }}</td>
                                                        <td class="tabla-cantidad-vehiculo">{{ $vehiculo->cantidad }}</td>
                                                        <td class="tabla-traccion-vehiculo">{{ $vehiculo->traccion }}</td>
                                                        <td class="tabla-tipo-vehiculo">{{ $vehiculo->tipo_vehiculo }}</td>
                                                        @if ($vehiculo->llave_combustible == true)
                                                            <td class="tabla-llave-combustible-vehiculo">Si</td>
                                                        @else
                                                            <td class="tabla-llave-combustible-vehiculo">No</td>
                                                        @endif
                                                        <td class="tabla-kilometraje-mensual-vehiculo">{{ $vehiculo->kilometraje_mensual }}</td>
                                                        <td class="tabla-tipo-estandar-vehiculo">{{ $vehiculo->tipo_estandar }}</td>
                                                        <td class="tabla-tipo-moneda-vehiculo">{{ $vehiculo->tipo_moneda }}</td>
                                                        <td class="tabla-tarifa-presupuestada-texto-vehiculo">{{ $vehiculo->tarifa_presupuestada_mes_texto }}</td>
                                                        <td class="tabla-periodo-vehiculo">{{ $vehiculo->periodo }}</td>
                                                        <td class="tabla-fecha-tentativa-vehiculo">{{ $vehiculo->fecha_tentativa }}</td>
                                                        <td class="tabla-fecha-termino-contrato-comercial-vehiculo">{{ $vehiculo->fecha_termino_contrato_comercial }}</td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class=" card-footer">
                            <button type="button" class="btn btn-warning" id="botonDeCreacion" onclick="editarSolicitudDeNuevoVehiculo()"><i class="fas fa-edit" style="margin-right: 2px;"></i> Editar Solicitud De Nuevo Vehículo </button>
                            <a href="{{ route('solicitud-nuevo-vehiculo.index') }}" role="button" class="btn btn-secondary" id="botonVolver"><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 editarSolicitudDeNuevoVehiculo() {
            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('_method', "PUT");
                formData.append('id_centro_costo', centroDeCosto);
                formData.append('listado_vehiculos', listadoDeVehiculos);
                let csrf = '{{ csrf_token() }}';
                $.ajax({
                    url: "{{ route('solicitud-nuevo-vehiculo.update',$solicitud) }}",
                    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) => {
                                document.getElementById("botonVolver").click();
                            })
                            .catch((error) => {
                                document.getElementById("botonVolver").click();
                            });
                    },
                    error: function(data) {
                        console.log(data)
                        eliminarLoading()
                    }
                })

            }
        }
    </script>
@stop