@extends('adminlte::page')

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

@section('title', 'Intranet | Nueva Solicitud de Jornada Excepcional')

@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-8">
    
                <div class="card card-primary 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-home-tab" data-toggle="pill" href="#custom-tabs-one-home" role="tab" aria-controls="custom-tabs-one-home" aria-selected="true">Solicitud de Jornada Excepcional</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">Archivos</a>
                            </li>
                        </ul>
                    </div>
    
                    <form id="formularioDeSolicitudDeJornada">
                        @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-home" role="tabpanel" aria-labelledby="custom-tabs-one-home-tab">
                                    <div class="contenedorDosCamposPorFilaEnLosFormulario">
                                        <div class="form-group">
                                            <label for="campoCorrelativoDeLaSolicitud">Correlativo</label>
                                            <input type="text" class="form-control" id="campoCorrelativoDeLaSolicitud" name="correlativo" value="{{ old('correlativo') }}" readonly="true">
                                            <div class="invalid-feedback" id="validacionCampoCorrelativoDeLaSolicitud">
        
                                            </div>
                                        </div>
                                        
                                        <div class="form-group">
                                            <label>Centro de Costo</label>
                                            <select class="form-control listaDespegableConBuscador" id="campoCentroDeCostoDeLaSolicitud" name="id_centro_costo" data-live-search="true" onchange="establecerCorrelativoDeLaSolicitud(this)">
                                                <option value="">--Seleccionar Centro de Costo--</option>
                                                @foreach ($centrosCostos 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="campoNumeroContratoDeLaSolicitud">Número Contrato</label>
                                            <input type="text" class="form-control" id="campoNumeroContratoDeLaSolicitud" name="numero_contrato" value="{{ old('numero_contrato') }}">
                                            <div class="invalid-feedback" id="validacionCampoNumeroContratoDeLaSolicitud">
            
                                            </div>
                                        </div>
        
                                        <div class="form-group">
                                            <label for="campoNombreContratoDeLaSolicitud">Nombre Contrato</label>
                                            <input type="text" class="form-control" id="campoNombreContratoDeLaSolicitud" name="nombre_contrato" value="{{ old('nombre_contrato') }}">
                                            <div class="invalid-feedback" id="validacionCampoNombreContratoDeLaSolicitud">
            
                                            </div>
                                        </div>
        
                                        <div class="form-group">
                                            <label for="campoFechaDeInicioContratoDeLaSolicitud">Fecha de Inicio del Contrato</label>
                                            <input type="date" class="form-control" id="campoFechaDeInicioContratoDeLaSolicitud" name="fecha_inicio_contrato" value="{{ old('fecha_inicio_contrato') }}">
                                            <div class="invalid-feedback" id="validacionCampoFechaDeInicioContratoDeLaSolicitud">
        
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label>Vigencia del Servicio</label>
                                            <select class="form-control listaDespegableConBuscador" id="campoVigenciaDelServicioDeLaSolicitud" name="vigencia_servicio" data-live-search="true">
                                                <option value="">--Seleccionar Vigencia del Servicio--</option>
                                                @foreach ($vigenciasDelServicio as $vigencia)
                                                    @if (old('vigencia_servicio') == $vigencia)
                                                        <option selected value="{{ $vigencia }}">{{ $vigencia }}</option>
                                                    @else
                                                        <option value="{{ $vigencia }}">{{ $vigencia }}</option>
                                                    @endif
                                                @endforeach
                                            </select>
                                            <div class="invalid-feedback" id="validacionCampoVigenciaDelServicioDeLaSolicitud">
            
                                            </div>
                                        </div>
                                    </div>
        
                                    <fieldset class="fieldset-color-azul" id="fieldsetResolucion">
                                        <legend class="titulo-fieldset-color-azul" id="legendResolucion">Cargos y Descripción</legend>
        
                                        <div class="contenedorDosCamposPorFilaEnLosFormulario">
                                            <div class="form-group">
                                                <label>Cargo</label>
                                                <select class="form-control listaDespegableConBuscador" id="campoCargoDeLaSolicitud" name="id_cargo" data-live-search="true" onchange="obtenerDatosCompletosDelCargoSeleccionado(this)">
                                                    <option value="">--Seleccionar Cargo--</option>
                                                    @foreach ($cargos as $cargo)
                                                        @if (old('id_cargo') == $cargo->id)
                                                            <option selected value="{{ $cargo->id }}">{{ $cargo->cargo }}</option>
                                                        @else
                                                            <option value="{{ $cargo->id}}">{{ $cargo->cargo }}</option>
                                                        @endif
                                                    @endforeach
                                                    <option value="Otro">Otro</option>
                                                </select>
                                                <div class="invalid-feedback" id="validacionCampoCargoDeLaSolicitud">
                
                                                </div>
                                            </div>
    
                                            <div class="form-group" id="contenedorDelCampoNombreCargoOtro" style="display: none;">
                                                <label for="campoNombreDelCargoOtroDeLaSolicitud">Nombre del Cargo</label>
                                                <input type="text" class="form-control" id="campoNombreDelCargoOtroDeLaSolicitud">
                                                <div class="invalid-feedback" id="validacionCampoNombreDelCargoOtroDeLaSolicitud">
                
                                                </div>
                                            </div>
                                        </div>
        
                                        <div class="form-group">
                                            <label for="campoDescripcionDelCargoDeLaSolicitud">Descripción del Cargo</label>
                                            <textarea class="form-control" id="campoDescripcionDelCargoDeLaSolicitud" rows="3" readonly="true"></textarea>
                                            <div class="invalid-feedback" id="validacionCampoDescripcionDelCargoDeLaSolicitud">
            
                                            </div>
                                        </div>
        
                                        <button type="button" class="btn btn-primary" onclick="agregarCargos()">Añadir Cargo</button>
                                    </fieldset>
        
                                    <div class="alert alert-danger" role="alert" style="display: none;" id="errorCargos"> </div>
                                    <div class="dt-responsive table-responsive" id="contenedorDeTablasDeCargos">
                                        <table class="table table-striped table-bordered" role="grid" aria-describedby="base-style_info" id="tabla-cargos">
                                            <thead>
                                                <tr role="row">
                                                    <th>#</th>
                                                    <th>Cargo</th>
                                                    <th>Descripción</th>
                                                    <th>Acción</th>
                                                </tr>
                                            </thead>
                                            <tbody id="registroDeCargos">
                                                <tr id="cargosNoDisponibleEnLaTabla">
                                                    <td colspan="4" class="text-center">No hay cargos disponibles en la tabla</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
        
                                    <div class="form-group">
                                        <label for="campoProcesoProductivoDeLaSolicitud">Descripción Detallada del Proceso Productivo</label>
                                        <textarea class="form-control" id="campoProcesoProductivoDeLaSolicitud" name="proceso_productivo" rows="3"></textarea>
                                        <div class="invalid-feedback" id="validacionCampoProcesoProductivoDeLaSolicitud">
        
                                        </div>
                                    </div>
        
                                    <div class="form-group">
                                        <label for="campoFundamentoCasoCalificadoDeLaSolicitud">Fundamentación del Caso Calificado <span style="font-weight: 700; font-size:11px;">(Acreditación de que se trata de procesos de trabajo continuos y de especial complejidad técnica o tecnológica, que dificultan o hacen inviable la aplicación de las reglas generales sobre distribución de jornadas y de descansos)</span></label>
                                        <textarea class="form-control" id="campoFundamentoCasoCalificadoDeLaSolicitud" name="fundamento_caso_calificado" rows="3"></textarea>
                                        <div class="invalid-feedback" id="validacionCampoFundamentoCasoCalificadoDeLaSolicitud">
        
                                        </div>
                                    </div>
                                </div>
    
                                <div class="tab-pane fade" id="custom-tabs-one-profile" role="tabpanel" aria-labelledby="custom-tabs-one-profile-tab">
                                    <fieldset class="fieldset-color-azul" id="fieldsetResolucion">
                                        <legend class="titulo-fieldset-color-azul" id="legendResolucion">Archivo y Tipo</legend>
        
                                        <div class="contenedorDosCamposPorFilaEnLosFormulario">
                                            <div class="form-group" id="contenedorDelSeleccionadorDeArchivo">
                                                <label>Seleccionar Archivos</label>
                                                <input type="file" class="form-control-file visible" id="a93541">
                                                <div class="invalid-feedback" id="validacionCampoArchivoa93541">
                
                                                </div>
                                            </div>

                                            <div class="form-group">
                                                <label>Tipo de Archivo</label>
                                                <select class="form-control listaDespegableConBuscador" id="campoTipoDeArchivo"  data-live-search="true">
                                                    <option value="">--Seleccionar Tipo de Archivo--</option>
                                                    @foreach ($tiposDeArchivos as $tipoDeArchivo)
                                                        <option value="{{ $tipoDeArchivo }}">{{ $tipoDeArchivo }}</option>
                                                    @endforeach
                                                </select>
                                                <div class="invalid-feedback" id="validacionCampoTipoDeArchivo">
                
                                                </div>
                                            </div>
                                        </div>
        
                                        <button type="button" class="btn btn-primary" onclick="GuardarArchivoSeleccionado()">Añadir Archivo</button>
                                    </fieldset>
                                    
                                    <div class="alert alert-danger" role="alert" style="display: none;" id="errorArchivos"> </div>
                                    <div class="dt-responsive table-responsive">
                                        <table class="table table-striped table-bordered" role="grid" aria-describedby="base-style_info" id="tabla-archivos">
                                            <thead>
                                                <tr role="row">
                                                    <th>Acción</th>
                                                    <th>Archivo</th>
                                                    <th>Extensión</th>
                                                    <th>Tipo</th>
                                                </tr>
                                            </thead>
                                            <tbody id="registroDeArchivos">
                                                <tr id="archivosNoDisponibleEnLaTabla">
                                                    <td colspan="4" class="text-center">No hay archivos disponibles en la tabla</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
    
                        <div class=" card-footer">
                            <button type="button" class="btn btn-primary" id="botonDeCreacion" onclick="registrarSolicitudDeJornada()"><i class="fas fa-plus-circle" style="margin-right: 2px;"></i> Crear Solicitud de Jornada Excepcional</button>
                            <a href="{{ route('solicitud-jornada.index') }}" role="button" class="btn btn-secondary mt-1"><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="modalVisualizarArchivo" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <form>
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header" style="background-color: #007bff; color:white;">
                        <h5 class="modal-title" id="modalTituloVisualizarArchivo"></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 id="modalContenidoModalVisualizarArchivo" style="text-align: center;">

                        </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') }}">
    <style>
        .recurso-error-rojo {
            font-weight: 700;
            color: #dc3545;
        }

        .recurso-error-verde {
            font-weight: 700;
            color: #28a745;
        }

        .recurso-error-amarillo {
            font-weight: 700;
            color: #ffc107;
        }

        input[type=file] {
            width: 100%;
            max-width: 100%;
            color: #444;
            padding: 5px;
            background: #fff;
            border-radius: 3px;
            border: 1px solid #555;
        }
    </style>
@stop

@section('js')
    <script src="{{ asset('js/funcionalidades-genericas.js') }}"></script>
    <script>
        let numeroCorrelativo='{{$numeroCorrelativo}}';
        $('#campoCentroDeCostoDeLaSolicitud').selectpicker({
            dropupAuto: false,
        });
        $('#campoVigenciaDelServicioDeLaSolicitud').selectpicker({
            dropupAuto: false,
        });
        $('#campoCargoDeLaSolicitud').selectpicker({
            dropupAuto: false,
        });
        $('#campoTipoDeArchivo').selectpicker({
            dropupAuto: false,
        });

        function establecerCorrelativoDeLaSolicitud(campo){
            let selectedIndex = campo.selectedIndex;
            let selectedOptionText = campo.options[selectedIndex].text;
            let correlativo="ST-JD-"+selectedOptionText+"-"+numeroCorrelativo;
            document.getElementById("campoCorrelativoDeLaSolicitud").value=correlativo;
        }
    </script>

    <script>
        let indexCargos = 0;
    
        function uuid() {
            var dt = new Date().getTime();
            var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
                var r = (dt + Math.random() * 16) % 16 | 0;
                dt = Math.floor(dt / 16);
                return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
            });
            return uuid;
        }
    
        function agregarCargos() {
            let campoCargo = document.getElementById("campoCargoDeLaSolicitud").value.trim();
            let campoDescripcionDelCargo = document.getElementById("campoDescripcionDelCargoDeLaSolicitud").value.trim();
            let campoNombreDelCargoOtro = document.getElementById("campoNombreDelCargoOtroDeLaSolicitud").value.trim();
            let selectedIndex = document.getElementById("campoCargoDeLaSolicitud").selectedIndex;
            let campoNombreDelCargoOtroDeLaSolicitudListaDespegable = document.getElementById("campoCargoDeLaSolicitud").options[selectedIndex].text;
            if (campoCargo.length > 0 && campoDescripcionDelCargo.length > 0) {
                if(campoCargo=="Otro"){
                    if (campoNombreDelCargoOtro.length > 0) {
                        let filas = document.getElementById('tabla-cargos').tBodies[0].querySelectorAll("tr");
                        let cargoSeRepetoEnElTablaDeCargo=false;
                        filas.forEach(fila=> {
                            if (fila.querySelector(".tabla-contador-cargos")) {
                                let nombreCargo = fila.querySelector(".tabla-nombre-cargo-cargos").innerHTML.trim();
                                if(nombreCargo.toLowerCase()==campoNombreDelCargoOtro.toLowerCase()){
                                    cargoSeRepetoEnElTablaDeCargo=true;
                                }
                            }
                        });

                        if(cargoSeRepetoEnElTablaDeCargo==true){
                            if (campoCargo.length > 0) {
                                document.getElementById("campoCargoDeLaSolicitud").classList.remove('input-error-icon');
                                document.getElementById("campoCargoDeLaSolicitud").classList.add('input-success-icon');
                                document.getElementById("validacionCampoCargoDeLaSolicitud").innerHTML = "";
                                document.getElementById("validacionCampoCargoDeLaSolicitud").style.display = "none";
                            }else{
                                document.getElementById("campoCargoDeLaSolicitud").classList.remove('input-success-icon');
                                document.getElementById("campoCargoDeLaSolicitud").classList.add('input-error-icon');
                                document.getElementById("validacionCampoCargoDeLaSolicitud").innerHTML = "El campo cargo es obligatorio para agregarlo";
                                document.getElementById("validacionCampoCargoDeLaSolicitud").style.display = "block";
                            }

                            document.getElementById("campoNombreDelCargoOtroDeLaSolicitud").setAttribute("class", "form-control is-invalid");
                            document.getElementById("validacionCampoNombreDelCargoOtroDeLaSolicitud").innerHTML = "El campo nombre del cargo esta repetido en la tabla de cargos";
                            document.getElementById("validacionCampoNombreDelCargoOtroDeLaSolicitud").style.display="block";

                            if (campoDescripcionDelCargo.length > 0) {
                                document.getElementById("campoDescripcionDelCargoDeLaSolicitud").setAttribute("class", "form-control is-valid");
                                document.getElementById("validacionCampoDescripcionDelCargoDeLaSolicitud").innerHTML = "";
                                document.getElementById("validacionCampoDescripcionDelCargoDeLaSolicitud").style.display="none";
                            } else {
                                document.getElementById("campoDescripcionDelCargoDeLaSolicitud").setAttribute("class", "form-control is-invalid");
                                document.getElementById("validacionCampoDescripcionDelCargoDeLaSolicitud").innerHTML = "El campo descripción del cargo es obligatorio para agregarlo";
                                document.getElementById("validacionCampoDescripcionDelCargoDeLaSolicitud").style.display="block";
                            }
                        }else{
                            generarLoading('{{ asset('img/logo.png') }}')
                            indexCargos++;
                            let codigoUnico=uuid();
                            if (document.getElementById("cargosNoDisponibleEnLaTabla")) {
                                document.getElementById("cargosNoDisponibleEnLaTabla").remove();
                            }
        
                            document.getElementById("registroDeCargos").innerHTML +=
                                '<tr role="row" class="odd">' +
                                '<td style="display:none;" class="tabla-id-cargo-cargos">' + campoCargo + '</td>' +
                                '<td style="display:none;" class="tabla-codigo-unico-cargos">' + codigoUnico + '</td>' +
                                '<td style="display:none;" class="tabla-hay-error-cargos">No</td>' +
                                '<td class="tabla-contador-cargos">' + indexCargos+ '</td>' +
                                '<td class="tabla-nombre-cargo-cargos">' + campoNombreDelCargoOtro  + '</td>' +
                                '<td class="tabla-descripcion-cargos">'+campoDescripcionDelCargo+'</td>' +
                                '<td class="tabla-accion-cargos">' +
                                '<button onclick="habilitarBotonConfirmarEliminacionCargos(this)" type="button" class="btn btn-danger mr-1"><i class="fas fa-trash-alt"></i></button>' +
                                '<button onclick="eliminarFilaCargos(this)" style="display: none;" type="button" class="btn btn-danger boton-confirmar-cargo mr-1">Confirmar</button>' +
                                '</td>' +
                                '</tr>';

                            $('#campoCargoDeLaSolicitud').selectpicker('val', "");
                            document.getElementById("campoCargoDeLaSolicitud").classList.remove('input-success-icon');
                            document.getElementById("campoCargoDeLaSolicitud").classList.remove('input-error-icon');
                            document.getElementById("validacionCampoCargoDeLaSolicitud").innerHTML = "";
                            document.getElementById("validacionCampoCargoDeLaSolicitud").style.display = "none";
                    
                            document.getElementById("contenedorDelCampoNombreCargoOtro").style.display="none";
                            document.getElementById("campoNombreDelCargoOtroDeLaSolicitud").value = "";
                            document.getElementById("validacionCampoNombreDelCargoOtroDeLaSolicitud").innerHTML = "";
                            document.getElementById("campoNombreDelCargoOtroDeLaSolicitud").setAttribute("class", "form-control"); 
        
                            document.getElementById("campoDescripcionDelCargoDeLaSolicitud").setAttribute("readonly", "true");
                            document.getElementById("campoDescripcionDelCargoDeLaSolicitud").value = "";
                            document.getElementById("validacionCampoDescripcionDelCargoDeLaSolicitud").innerHTML = "";
                            document.getElementById("campoDescripcionDelCargoDeLaSolicitud").setAttribute("class", "form-control"); 
                            eliminarLoading()
                        }
                    }else{
                        if (campoCargo.length > 0) {
                            if(campoCargo=="Otro"){
                                document.getElementById("campoCargoDeLaSolicitud").classList.remove('input-error-icon');
                                document.getElementById("campoCargoDeLaSolicitud").classList.add('input-success-icon');
                                document.getElementById("validacionCampoCargoDeLaSolicitud").innerHTML = "";
                                document.getElementById("validacionCampoCargoDeLaSolicitud").style.display = "none";
        
                                if (campoNombreDelCargoOtro.length > 0) {
                                    document.getElementById("campoNombreDelCargoOtroDeLaSolicitud").setAttribute("class", "form-control is-valid");
                                    document.getElementById("validacionCampoNombreDelCargoOtroDeLaSolicitud").innerHTML = "";
                                    document.getElementById("validacionCampoNombreDelCargoOtroDeLaSolicitud").style.display="none";
                                } else {
                                    document.getElementById("campoNombreDelCargoOtroDeLaSolicitud").setAttribute("class", "form-control is-invalid");
                                    document.getElementById("validacionCampoNombreDelCargoOtroDeLaSolicitud").innerHTML = "El campo nombre del cargo es obligatorio para agregarlo";
                                    document.getElementById("validacionCampoNombreDelCargoOtroDeLaSolicitud").style.display="block";
                                }
                            }else{
                                document.getElementById("campoCargoDeLaSolicitud").classList.remove('input-error-icon');
                                document.getElementById("campoCargoDeLaSolicitud").classList.add('input-success-icon');
                                document.getElementById("validacionCampoCargoDeLaSolicitud").innerHTML = "";
                                document.getElementById("validacionCampoCargoDeLaSolicitud").style.display = "none";
                            }
                        }else{
                            document.getElementById("campoCargoDeLaSolicitud").classList.remove('input-success-icon');
                            document.getElementById("campoCargoDeLaSolicitud").classList.add('input-error-icon');
                            document.getElementById("validacionCampoCargoDeLaSolicitud").innerHTML = "El campo cargo es obligatorio para agregarlo";
                            document.getElementById("validacionCampoCargoDeLaSolicitud").style.display = "block";
                        }
        
                        if (campoDescripcionDelCargo.length > 0) {
                            document.getElementById("campoDescripcionDelCargoDeLaSolicitud").setAttribute("class", "form-control is-valid");
                            document.getElementById("validacionCampoDescripcionDelCargoDeLaSolicitud").innerHTML = "";
                            document.getElementById("validacionCampoDescripcionDelCargoDeLaSolicitud").style.display="none";
                        } else {
                            document.getElementById("campoDescripcionDelCargoDeLaSolicitud").setAttribute("class", "form-control is-invalid");
                            document.getElementById("validacionCampoDescripcionDelCargoDeLaSolicitud").innerHTML = "El campo descripción del cargo es obligatorio para agregarlo";
                            document.getElementById("validacionCampoDescripcionDelCargoDeLaSolicitud").style.display="block";
                        }
                    }
                }else{
                    let filas = document.getElementById('tabla-cargos').tBodies[0].querySelectorAll("tr");
                    let cargoSeRepetoEnElTablaDeCargo=false;
                    filas.forEach(fila=> {
                        if (fila.querySelector(".tabla-contador-cargos")) {
                            let nombreCargo = fila.querySelector(".tabla-nombre-cargo-cargos").innerHTML.trim();
                            if(nombreCargo.toLowerCase()==campoNombreDelCargoOtroDeLaSolicitudListaDespegable.toLowerCase()){
                                cargoSeRepetoEnElTablaDeCargo=true;
                            }
                        }
                    });

                    if(cargoSeRepetoEnElTablaDeCargo==true){
                        document.getElementById("campoCargoDeLaSolicitud").classList.remove('input-success-icon');
                        document.getElementById("campoCargoDeLaSolicitud").classList.add('input-error-icon');
                        document.getElementById("validacionCampoCargoDeLaSolicitud").innerHTML = "El campo cargo esta repetido en la tabla de cargos";
                        document.getElementById("validacionCampoCargoDeLaSolicitud").style.display = "block";

                        if (campoDescripcionDelCargo.length > 0) {
                            document.getElementById("campoDescripcionDelCargoDeLaSolicitud").setAttribute("class", "form-control is-valid");
                            document.getElementById("validacionCampoDescripcionDelCargoDeLaSolicitud").innerHTML = "";
                            document.getElementById("validacionCampoDescripcionDelCargoDeLaSolicitud").style.display="none";
                        } else {
                            document.getElementById("campoDescripcionDelCargoDeLaSolicitud").setAttribute("class", "form-control is-invalid");
                            document.getElementById("validacionCampoDescripcionDelCargoDeLaSolicitud").innerHTML = "El campo descripción del cargo es obligatorio para agregarlo";
                            document.getElementById("validacionCampoDescripcionDelCargoDeLaSolicitud").style.display="block";
                        }
                    }else{
                        generarLoading('{{ asset('img/logo.png') }}')
                        indexCargos++;
                        let codigoUnico=uuid();
                        if (document.getElementById("cargosNoDisponibleEnLaTabla")) {
                            document.getElementById("cargosNoDisponibleEnLaTabla").remove();
                        }
    
                        document.getElementById("registroDeCargos").innerHTML +=
                            '<tr role="row" class="odd">' +
                            '<td style="display:none;" class="tabla-id-cargo-cargos">' + campoCargo + '</td>' +
                            '<td style="display:none;" class="tabla-codigo-unico-cargos">' + codigoUnico + '</td>' +
                            '<td style="display:none;" class="tabla-hay-error-cargos">No</td>' +
                            '<td class="tabla-contador-cargos">' + indexCargos+ '</td>' +
                            '<td class="tabla-nombre-cargo-cargos">' + campoNombreDelCargoOtroDeLaSolicitudListaDespegable  + '</td>' +
                            '<td class="tabla-descripcion-cargos">'+campoDescripcionDelCargo+'</td>' +
                            '<td class="tabla-accion-cargos">' +
                            '<button onclick="habilitarBotonConfirmarEliminacionCargos(this)" type="button" class="btn btn-danger mr-1"><i class="fas fa-trash-alt"></i></button>' +
                            '<button onclick="eliminarFilaCargos(this)" style="display: none;" type="button" class="btn btn-danger boton-confirmar-cargo mr-1">Confirmar</button>' +
                            '</td>' +
                            '</tr>';
                
                        $('#campoCargoDeLaSolicitud').selectpicker('val', "");
                        document.getElementById("campoCargoDeLaSolicitud").classList.remove('input-success-icon');
                        document.getElementById("campoCargoDeLaSolicitud").classList.remove('input-error-icon');
                        document.getElementById("validacionCampoCargoDeLaSolicitud").innerHTML = "";
                        document.getElementById("validacionCampoCargoDeLaSolicitud").style.display = "none";
                    
                        document.getElementById("contenedorDelCampoNombreCargoOtro").style.display="none";
                        document.getElementById("campoNombreDelCargoOtroDeLaSolicitud").value = "";
                        document.getElementById("validacionCampoNombreDelCargoOtroDeLaSolicitud").innerHTML = "";
                        document.getElementById("campoNombreDelCargoOtroDeLaSolicitud").setAttribute("class", "form-control"); 
        
                        document.getElementById("campoDescripcionDelCargoDeLaSolicitud").setAttribute("readonly", "true");
                        document.getElementById("campoDescripcionDelCargoDeLaSolicitud").value = "";
                        document.getElementById("validacionCampoDescripcionDelCargoDeLaSolicitud").innerHTML = "";
                        document.getElementById("campoDescripcionDelCargoDeLaSolicitud").setAttribute("class", "form-control"); 
                        eliminarLoading()
                    }
                }
            }else{
                if (campoCargo.length > 0) {
                    if(campoCargo=="Otro"){
                        document.getElementById("campoCargoDeLaSolicitud").classList.remove('input-error-icon');
                        document.getElementById("campoCargoDeLaSolicitud").classList.add('input-success-icon');
                        document.getElementById("validacionCampoCargoDeLaSolicitud").innerHTML = "";
                        document.getElementById("validacionCampoCargoDeLaSolicitud").style.display = "none";

                        if (campoNombreDelCargoOtro.length > 0) {
                            document.getElementById("campoNombreDelCargoOtroDeLaSolicitud").setAttribute("class", "form-control is-valid");
                            document.getElementById("validacionCampoNombreDelCargoOtroDeLaSolicitud").innerHTML = "";
                            document.getElementById("validacionCampoNombreDelCargoOtroDeLaSolicitud").style.display="none";
                        } else {
                            document.getElementById("campoNombreDelCargoOtroDeLaSolicitud").setAttribute("class", "form-control is-invalid");
                            document.getElementById("validacionCampoNombreDelCargoOtroDeLaSolicitud").innerHTML = "El campo nombre del cargo es obligatorio para agregarlo";
                            document.getElementById("validacionCampoNombreDelCargoOtroDeLaSolicitud").style.display="block";
                        }
                    }else{
                        document.getElementById("campoCargoDeLaSolicitud").classList.remove('input-error-icon');
                        document.getElementById("campoCargoDeLaSolicitud").classList.add('input-success-icon');
                        document.getElementById("validacionCampoCargoDeLaSolicitud").innerHTML = "";
                        document.getElementById("validacionCampoCargoDeLaSolicitud").style.display = "none";
                    }
                }else{
                    document.getElementById("campoCargoDeLaSolicitud").classList.remove('input-success-icon');
                    document.getElementById("campoCargoDeLaSolicitud").classList.add('input-error-icon');
                    document.getElementById("validacionCampoCargoDeLaSolicitud").innerHTML = "El campo cargo es obligatorio para agregarlo";
                    document.getElementById("validacionCampoCargoDeLaSolicitud").style.display = "block";
                }

                if (campoDescripcionDelCargo.length > 0) {
                    document.getElementById("campoDescripcionDelCargoDeLaSolicitud").setAttribute("class", "form-control is-valid");
                    document.getElementById("validacionCampoDescripcionDelCargoDeLaSolicitud").innerHTML = "";
                    document.getElementById("validacionCampoDescripcionDelCargoDeLaSolicitud").style.display="none";
                } else {
                    document.getElementById("campoDescripcionDelCargoDeLaSolicitud").setAttribute("class", "form-control is-invalid");
                    document.getElementById("validacionCampoDescripcionDelCargoDeLaSolicitud").innerHTML = "El campo descripción del cargo es obligatorio para agregarlo";
                    document.getElementById("validacionCampoDescripcionDelCargoDeLaSolicitud").style.display="block";
                }
            }
        }
        
        function deshabilitarBotonesConfirmarEliminacionCargos() {
            let botones = document.querySelectorAll(".boton-confirmar-cargo");
            botones.forEach(elemento => {
                elemento.style.display = 'none';
            });
        }
        
        function habilitarBotonConfirmarEliminacionCargos(boton) {
        
            if (boton.nextElementSibling.style.display == 'none') {
                deshabilitarBotonesConfirmarEliminacionCargos();
                boton.nextElementSibling.style.display = 'inline-block';
            } else {
                if (boton.nextElementSibling.style.display == 'inline-block') {
                    deshabilitarBotonesConfirmarEliminacionCargos();
                }
            }
        
        }
        
        function eliminarFilaCargos(boton) {
            let elementoFila = boton.parentElement.parentElement;
            elementoFila.remove();
            indexCargos = 0;
            let filas = document.getElementById('tabla-cargos').tBodies[0].querySelectorAll("tr");
            if (filas.length > 0) {
                filas.forEach(elemento => {
                    indexCargos++;
                    elemento.querySelector(".tabla-contador-cargos").innerHTML = indexCargos;
                });
            } else {
                document.getElementById("registroDeCargos").innerHTML =
                    '<tr id="cargosNoDisponibleEnLaTabla">' +
                    '<td colspan="4" class="text-center">No hay cargos disponibles en la tabla</td>' +
                    '</tr>';
            }
        }

        function obtenerDatosCompletosDelCargoSeleccionado(campo) {
            if (campo.value != "") {
                if(campo.value=="Otro"){
                    document.getElementById("contenedorDelCampoNombreCargoOtro").style.display="block";
                    document.getElementById("campoNombreDelCargoOtroDeLaSolicitud").value = "";
                    document.getElementById("validacionCampoNombreDelCargoOtroDeLaSolicitud").innerHTML = "";
                    document.getElementById("campoNombreDelCargoOtroDeLaSolicitud").setAttribute("class", "form-control");
                    document.getElementById("campoDescripcionDelCargoDeLaSolicitud").removeAttribute("readonly");
                    document.getElementById("campoDescripcionDelCargoDeLaSolicitud").value = "";
                }else{
                    document.getElementById("contenedorDelCampoNombreCargoOtro").style.display="none";
                    document.getElementById("campoNombreDelCargoOtroDeLaSolicitud").value = "";
                    document.getElementById("validacionCampoNombreDelCargoOtroDeLaSolicitud").innerHTML = "";
                    document.getElementById("campoNombreDelCargoOtroDeLaSolicitud").setAttribute("class", "form-control");
                    document.getElementById("campoDescripcionDelCargoDeLaSolicitud").removeAttribute("readonly");
                    document.getElementById("campoDescripcionDelCargoDeLaSolicitud").setAttribute("readonly", "true");
                    document.getElementById("campoDescripcionDelCargoDeLaSolicitud").value = "";

                    let url = '{{ route('cargo.obtener-cargo', ':id') }}';
                    url = url.replace(':id', campo.value);
                    let csrf = '{{ csrf_token() }}';
    
                    $.ajax({
                        type: 'POST',
                        datatype: 'json',
                        url: url,
                        headers: {
                            'X-CSRF-TOKEN': csrf
                        },
                        success: function(data) {
                            console.log(data)
                            document.getElementById("campoDescripcionDelCargoDeLaSolicitud").value=data.cargo.descripcion;
                        },
                        error: function(data) {
                            console.log(data)
                        }
                    })
                }
            } else {
                document.getElementById("contenedorDelCampoNombreCargoOtro").style.display="none";
                document.getElementById("campoNombreDelCargoOtroDeLaSolicitud").value = "";
                document.getElementById("validacionCampoNombreDelCargoOtroDeLaSolicitud").innerHTML = "";
                document.getElementById("campoNombreDelCargoOtroDeLaSolicitud").setAttribute("class", "form-control");
                document.getElementById("campoDescripcionDelCargoDeLaSolicitud").removeAttribute("readonly");
                document.getElementById("campoDescripcionDelCargoDeLaSolicitud").setAttribute("readonly", "true");
                document.getElementById("campoDescripcionDelCargoDeLaSolicitud").value = "";
            }
        }
    </script>

    <script>    
        function visualizarUnArchivoAntesDeRegistrarloEnLaBaseDeDatos(archivo, tipo, nombreArchivo) {
            if (tipo.toLowerCase() == "png" ||
                tipo.toLowerCase() == "jpeg" ||
                tipo.toLowerCase() == "gif" ||
                tipo.toLowerCase() == "jpg" ||
                tipo.toLowerCase() == "bmp") {
                document.getElementById("modalContenidoModalVisualizarArchivo").innerHTML =
                '<img src="' + archivo + '" style="max-width: 100%;">';
            }else if(tipo == "pdf"){
                document.getElementById("modalContenidoModalVisualizarArchivo").innerHTML =
                    '<iframe src="' + archivo + '" style="width:95%; height:600px;"></iframe>';
            }else if(tipo == "txt"){
                document.getElementById("modalContenidoModalVisualizarArchivo").innerHTML =
                    '<iframe src="' + archivo + '" style="width:95%; height:600px;"></iframe>';
            }
            document.getElementById("modalTituloVisualizarArchivo").innerHTML = nombreArchivo;
            $("#modalVisualizarArchivo").modal("show");
        }
    
        function eliminarArchivo(registro, archivo) {
            document.getElementById(archivo).remove();
            registro.remove();
    
            if (document.getElementById("registroDeArchivos").innerHTML.trim().length == 0) {
                document.getElementById("registroDeArchivos").innerHTML =
                    '<tr id="archivosNoDisponibleEnLaTabla">' +
                    '<td colspan="4" class="text-center">No hay archivos disponibles en la tabla</td>' +
                    '</tr>';
            }
        }
    
        function obtenerAccionesDelArchivoGuardado(extensionDelArchivo, base64, archivo) {
            if (
                extensionDelArchivo.toLowerCase() == "png" ||
                extensionDelArchivo.toLowerCase() == "jpeg" ||
                extensionDelArchivo.toLowerCase() == "gif" ||
                extensionDelArchivo.toLowerCase() == "jpg" ||
                extensionDelArchivo.toLowerCase() == "bmp"
            ) {
                accionesDelArchivo =
                    '<a class="dropdown-item" href="#" onclick="visualizarUnArchivoAntesDeRegistrarloEnLaBaseDeDatos(\'' + base64 + '\',\'' + extensionDelArchivo + '\',\'' + archivo.files[0].name + '\')"><i class="fas fa-eye" aria-hidden="true"></i> Visualizar Archivo</a>' +
                    '<a class="dropdown-item" href="#" onclick="eliminarArchivo(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
            } else if (
                extensionDelArchivo.toLowerCase() == "mp3" ||
                extensionDelArchivo.toLowerCase() == "wav" ||
                extensionDelArchivo.toLowerCase() == "wma" ||
                extensionDelArchivo.toLowerCase() == "ogg"
            ) {
                accionesDelArchivo = '<a class="dropdown-item" href="#" onclick="eliminarArchivo(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
            } else if (
                extensionDelArchivo.toLowerCase() == "zip" ||
                extensionDelArchivo.toLowerCase() == "rar" ||
                extensionDelArchivo.toLowerCase() == "tgz" ||
                extensionDelArchivo.toLowerCase() == "tar"
            ) {
                accionesDelArchivo = '<a class="dropdown-item" href="#" onclick="eliminarArchivo(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
            } else if (extensionDelArchivo.toLowerCase() == "pdf") {
                accionesDelArchivo =
                    '<a class="dropdown-item" href="#" onclick="visualizarUnArchivoAntesDeRegistrarloEnLaBaseDeDatos(\'' + base64 + '\',\'' + extensionDelArchivo + '\',\'' + archivo.files[0].name + '\')"><i class="fas fa-eye" aria-hidden="true"></i> Visualizar Archivo</a>' +
                    '<a class="dropdown-item" href="#" onclick="eliminarArchivo(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
            } else if (
                extensionDelArchivo.toLowerCase() == "xlsx" ||
                extensionDelArchivo.toLowerCase() == "xls"
            ) {
                accionesDelArchivo = '<a class="dropdown-item" href="#" onclick="eliminarArchivo(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
            } else if (
                extensionDelArchivo.toLowerCase() == "pptx" ||
                extensionDelArchivo.toLowerCase() == "ppt"
            ) {
                accionesDelArchivo = '<a class="dropdown-item" href="#" onclick="eliminarArchivo(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
            } else if (
                extensionDelArchivo.toLowerCase() == "docx" ||
                extensionDelArchivo.toLowerCase() == "doc"
            ) {
                accionesDelArchivo = '<a class="dropdown-item" href="#" onclick="eliminarArchivo(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
            } else if (extensionDelArchivo.toLowerCase() == "txt") {
                accionesDelArchivo =
                    '<a class="dropdown-item" href="#" onclick="visualizarUnArchivoAntesDeRegistrarloEnLaBaseDeDatos(\'' + base64 + '\',\'' + extensionDelArchivo + '\',\'' + archivo.files[0].name + '\')"><i class="fas fa-eye" aria-hidden="true"></i> Visualizar Archivo</a>' +
                    '<a class="dropdown-item" href="#" onclick="eliminarArchivo(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
            } else if (
                extensionDelArchivo.toLowerCase() == "mp4" ||
                extensionDelArchivo.toLowerCase() == "webm" ||
                extensionDelArchivo.toLowerCase() == "avi" ||
                extensionDelArchivo.toLowerCase() == "asf" ||
                extensionDelArchivo.toLowerCase() == "dvd" ||
                extensionDelArchivo.toLowerCase() == "m1v" ||
                extensionDelArchivo.toLowerCase() == "movie" ||
                extensionDelArchivo.toLowerCase() == "mpeg" ||
                extensionDelArchivo.toLowerCase() == "wn" ||
                extensionDelArchivo.toLowerCase() == "wmv"
            ) {
                accionesDelArchivo = '<a class="dropdown-item" href="#" onclick="eliminarArchivo(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
            } else {
                accionesDelArchivo = '<a class="dropdown-item" href="#" onclick="eliminarArchivo(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
            }
    
            return accionesDelArchivo;
        }

        function obtenerNombreDelTipoArchivo(extensionDelArchivo) {
            if (
                extensionDelArchivo.toLowerCase() == "png" ||
                extensionDelArchivo.toLowerCase() == "jpeg" ||
                extensionDelArchivo.toLowerCase() == "gif" ||
                extensionDelArchivo.toLowerCase() == "jpg" ||
                extensionDelArchivo.toLowerCase() == "bmp"
            ) {
                NombreDeLaExtensionDelArchivo = "IMAGEN";
            } else if (
                extensionDelArchivo.toLowerCase() == "mp3" ||
                extensionDelArchivo.toLowerCase() == "wav" ||
                extensionDelArchivo.toLowerCase() == "wma" ||
                extensionDelArchivo.toLowerCase() == "ogg"
            ) {
                NombreDeLaExtensionDelArchivo = "ARCHIVO DE AUDIO";
            } else if (
                extensionDelArchivo.toLowerCase() == "zip" ||
                extensionDelArchivo.toLowerCase() == "rar" ||
                extensionDelArchivo.toLowerCase() == "tgz" ||
                extensionDelArchivo.toLowerCase() == "tar"
            ) {
                NombreDeLaExtensionDelArchivo = "ARCHIVO COMPRIMIDO";
            } else if (extensionDelArchivo.toLowerCase() == "pdf") {
                NombreDeLaExtensionDelArchivo = "PDF";
            } else if (
                extensionDelArchivo.toLowerCase() == "xlsx" ||
                extensionDelArchivo.toLowerCase() == "xls"
            ) {
                NombreDeLaExtensionDelArchivo = "OFFICE EXCEL";
            } else if (
                extensionDelArchivo.toLowerCase() == "pptx" ||
                extensionDelArchivo.toLowerCase() == "ppt"
            ) {
                NombreDeLaExtensionDelArchivo = "OFFICE POWER POINT";
            } else if (
                extensionDelArchivo.toLowerCase() == "docx" ||
                extensionDelArchivo.toLowerCase() == "doc"
            ) {
                NombreDeLaExtensionDelArchivo = "OFFICE WORD";
            } else if (extensionDelArchivo.toLowerCase() == "txt") {
                NombreDeLaExtensionDelArchivo = "ARCHIVO DE TEXTO";
            } else if (
                extensionDelArchivo.toLowerCase() == "mp4" ||
                extensionDelArchivo.toLowerCase() == "webm" ||
                extensionDelArchivo.toLowerCase() == "avi" ||
                extensionDelArchivo.toLowerCase() == "asf" ||
                extensionDelArchivo.toLowerCase() == "dvd" ||
                extensionDelArchivo.toLowerCase() == "m1v" ||
                extensionDelArchivo.toLowerCase() == "movie" ||
                extensionDelArchivo.toLowerCase() == "mpeg" ||
                extensionDelArchivo.toLowerCase() == "wn" ||
                extensionDelArchivo.toLowerCase() == "wmv"
            ) {
                NombreDeLaExtensionDelArchivo = "ARCHIVO DE VIDEO";
            } else {
                NombreDeLaExtensionDelArchivo = "ARCHIVO DESCONOCIDO";
            }
        
            return NombreDeLaExtensionDelArchivo;
        }
    
        function GuardarArchivoSeleccionado() {
            let archivo=document.querySelector('input[type="file"].visible');
            let tipoDeArchivo=document.getElementById("campoTipoDeArchivo").value.trim();

            if(archivo.files.length > 0 && tipoDeArchivo.length>0){
                let nombreArchivo = archivo.files[0].name;
                let extensionArchivo = nombreArchivo.split('.');
                extensionArchivo = extensionArchivo[extensionArchivo.length - 1];
                var accionesDelArchivoGuardado = "";

                if (document.getElementById("archivosNoDisponibleEnLaTabla")) {
                    document.getElementById("archivosNoDisponibleEnLaTabla").remove();
                }

                let reader = new FileReader();
                reader.readAsDataURL(archivo.files[0]);
                reader.onload = function() {
                    let base64 = reader.result;
                    let nombreTipoArchivo=obtenerNombreDelTipoArchivo(extensionArchivo);
                    let accionesDelArchivo = obtenerAccionesDelArchivoGuardado(extensionArchivo, base64, archivo);
        
                    document.getElementById("registroDeArchivos").innerHTML +=
                        '<tr>' +
                        '<td class="tabla-id-archivo" style="display:none;">' + archivo.id + '</td>' +
                        '<td>' +
                        '<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">' +
                            accionesDelArchivo +
                        '</div>' +
                        '</div>' +
                        '</td>' +
                        '<td class="tabla-nombre-archivo">' + nombreArchivo + '</td>' +
                        '<td class="tabla-extension-archivo">' + nombreTipoArchivo + '</td>' +
                        '<td class="tabla-tipo-archivo">' + tipoDeArchivo + '</td>' +
                        '</tr>';
        
                    archivo.style.display = "none";
                    archivo.classList.remove("visible");
                    archivo.classList.add("oculto");
                    let inputFile = document.createElement("input");
                    inputFile.setAttribute("type", "file");
                    inputFile.setAttribute("class", "form-control-file visible");
                    inputFile.setAttribute("id", uuid());
                    document.getElementById("contenedorDelSeleccionadorDeArchivo").appendChild(inputFile);
        
                    $('#campoTipoDeArchivo').selectpicker('val', "");
                    document.getElementById("validacionCampoTipoDeArchivo").innerHTML = "";
                    document.getElementById("campoTipoDeArchivo").classList.remove('input-success-icon');
                    document.getElementById("campoTipoDeArchivo").classList.remove('input-error-icon');
                    document.getElementById("validacionCampoTipoDeArchivo").style.display = "none";
                };
                reader.onerror = function(error) {
        
                };
            }else{
                if(tipoDeArchivo.length>0){
                    document.getElementById("campoTipoDeArchivo").classList.remove('input-error-icon');
                    document.getElementById("campoTipoDeArchivo").classList.add('input-success-icon');
                    document.getElementById("validacionCampoTipoDeArchivo").innerHTML = "";
                    document.getElementById("validacionCampoTipoDeArchivo").style.display = "none";
                }else{
                    document.getElementById("campoTipoDeArchivo").classList.remove('input-success-icon');
                    document.getElementById("campoTipoDeArchivo").classList.add('input-error-icon');
                    document.getElementById("validacionCampoTipoDeArchivo").innerHTML = "El campo tipo de archivo es obligatorio";
                    document.getElementById("validacionCampoTipoDeArchivo").style.display = "block";
                }

                if(archivo.files.length > 0){
                    document.getElementById("validacionCampoArchivo"+archivo.id).innerHTML = "";
                    document.getElementById("validacionCampoArchivo"+archivo.id).style.display = "none";
                }else{
                    document.getElementById("validacionCampoArchivo"+archivo.id).innerHTML = "El campo archivo es obligatorio";
                    document.getElementById("validacionCampoArchivo"+archivo.id).style.display = "block";
                }
            }
        }
    </script>

    <script>
        function validarCamposDelFormularioDeSolicitudDeJornada(data) {
            if (typeof data.responseJSON.errors.correlativo !== 'undefined') {
                document.getElementById("campoCorrelativoDeLaSolicitud").setAttribute("class", "form-control is-invalid");
                document.getElementById("validacionCampoCorrelativoDeLaSolicitud").innerHTML = data.responseJSON.errors.correlativo;
            } else {
                document.getElementById("campoCorrelativoDeLaSolicitud").setAttribute("class", "form-control is-valid");
                document.getElementById("validacionCampoCorrelativoDeLaSolicitud").innerHTML = "";
            }
            
            if (typeof data.responseJSON.errors.id_centro_costo !== 'undefined') {
                document.getElementById("campoCentroDeCostoDeLaSolicitud").classList.remove('input-success-icon');
                document.getElementById("campoCentroDeCostoDeLaSolicitud").classList.add('input-error-icon');
                document.getElementById("validacionCampoCentroDeCostoDeLaSolicitud").innerHTML = data.responseJSON.errors.id_centro_costo;
                document.getElementById("validacionCampoCentroDeCostoDeLaSolicitud").style.display = "block";
            } else {
                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";
            }

            if (typeof data.responseJSON.errors.vigencia_servicio !== 'undefined') {
                document.getElementById("campoVigenciaDelServicioDeLaSolicitud").classList.remove('input-success-icon');
                document.getElementById("campoVigenciaDelServicioDeLaSolicitud").classList.add('input-error-icon');
                document.getElementById("validacionCampoVigenciaDelServicioDeLaSolicitud").innerHTML = data.responseJSON.errors.vigencia_servicio;
                document.getElementById("validacionCampoVigenciaDelServicioDeLaSolicitud").style.display = "block";
            } else {
                document.getElementById("campoVigenciaDelServicioDeLaSolicitud").classList.remove('input-error-icon');
                document.getElementById("campoVigenciaDelServicioDeLaSolicitud").classList.add('input-success-icon');
                document.getElementById("validacionCampoVigenciaDelServicioDeLaSolicitud").innerHTML = "";
                document.getElementById("validacionCampoVigenciaDelServicioDeLaSolicitud").style.display = "none";
            }

            if (typeof data.responseJSON.errors.numero_contrato !== 'undefined') {
                document.getElementById("campoNumeroContratoDeLaSolicitud").setAttribute("class", "form-control is-invalid");
                document.getElementById("validacionCampoNumeroContratoDeLaSolicitud").innerHTML = data.responseJSON.errors.numero_contrato;
            } else {
                document.getElementById("campoNumeroContratoDeLaSolicitud").setAttribute("class", "form-control is-valid");
                document.getElementById("validacionCampoNumeroContratoDeLaSolicitud").innerHTML = "";
            }

            if (typeof data.responseJSON.errors.nombre_contrato !== 'undefined') {
                document.getElementById("campoNombreContratoDeLaSolicitud").setAttribute("class", "form-control is-invalid");
                document.getElementById("validacionCampoNombreContratoDeLaSolicitud").innerHTML = data.responseJSON.errors.nombre_contrato;
            } else {
                document.getElementById("campoNombreContratoDeLaSolicitud").setAttribute("class", "form-control is-valid");
                document.getElementById("validacionCampoNombreContratoDeLaSolicitud").innerHTML = "";
            }

            if (typeof data.responseJSON.errors.fecha_inicio_contrato !== 'undefined') {
                document.getElementById("campoFechaDeInicioContratoDeLaSolicitud").setAttribute("class", "form-control is-invalid");
                document.getElementById("validacionCampoFechaDeInicioContratoDeLaSolicitud").innerHTML = data.responseJSON.errors.fecha_inicio_contrato;
            } else {
                document.getElementById("campoFechaDeInicioContratoDeLaSolicitud").setAttribute("class", "form-control is-valid");
                document.getElementById("validacionCampoFechaDeInicioContratoDeLaSolicitud").innerHTML = "";
            }

            if (typeof data.responseJSON.errors.proceso_productivo !== 'undefined') {
                document.getElementById("campoProcesoProductivoDeLaSolicitud").setAttribute("class", "form-control is-invalid");
                document.getElementById("validacionCampoProcesoProductivoDeLaSolicitud").innerHTML = data.responseJSON.errors.proceso_productivo;
            } else {
                document.getElementById("campoProcesoProductivoDeLaSolicitud").setAttribute("class", "form-control is-valid");
                document.getElementById("validacionCampoProcesoProductivoDeLaSolicitud").innerHTML = "";
            }

            if (typeof data.responseJSON.errors.fundamento_caso_calificado !== 'undefined') {
                document.getElementById("campoFundamentoCasoCalificadoDeLaSolicitud").setAttribute("class", "form-control is-invalid");
                document.getElementById("validacionCampoFundamentoCasoCalificadoDeLaSolicitud").innerHTML = data.responseJSON.errors.fundamento_caso_calificado;
            } else {
                document.getElementById("campoFundamentoCasoCalificadoDeLaSolicitud").setAttribute("class", "form-control is-valid");
                document.getElementById("validacionCampoFundamentoCasoCalificadoDeLaSolicitud").innerHTML = "";
            }

            if (typeof data.responseJSON.errors.listado_cargos !== 'undefined') {
                document.getElementById("errorCargos").innerHTML="Debe tener al menos un cargo agregado para registrar la solicitud de jornada excepcional.";
                document.getElementById("errorCargos").style.display="block";
            } else {
                document.getElementById("errorCargos").innerHTML="";
                document.getElementById("errorCargos").style.display="none";
            }

            if (typeof data.responseJSON.errors.listado_archivos !== 'undefined') {
                document.getElementById("errorArchivos").innerHTML=data.responseJSON.errors.listado_archivos;
                document.getElementById("errorArchivos").style.display="block";
            } else {
                document.getElementById("errorArchivos").innerHTML="";
                document.getElementById("errorArchivos").style.display="none";
            }
        }

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

            document.getElementById("campoContratoComercialDeLaSolicitud").value = "";
            document.getElementById("campoIdContratoComercialDeLaSolicitud").value = "";
            document.getElementById("validacionCampoContratoComercialDeLaSolicitud").innerHTML = "";
            document.getElementById("campoContratoComercialDeLaSolicitud").setAttribute("class", "form-control");

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

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

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

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

            indexCargos = 0;
            document.getElementById("registroDeCargos").innerHTML=
            '<tr id="cargosNoDisponibleEnLaTabla">'+
            '<td colspan="5" class="text-center">No hay cargos disponibles en la tabla</td>'+
            '</tr>';
            document.getElementById("errorCargos").innerHTML="";
            document.getElementById("errorCargos").style.display="none";
        }

        function registrarSolicitudDeJornada(){
            document.getElementById("botonDeCreacion").setAttribute("disabled", true);
            generarLoading('{{ asset('img/logo.png') }}')

            let filas = document.getElementById('tabla-cargos').tBodies[0].querySelectorAll("tr");
            let listadoDeCargos = [];
            filas.forEach(fila=> {
                if (fila.querySelector(".tabla-contador-cargos")) {
                    let idCargo = fila.querySelector(".tabla-id-cargo-cargos").innerHTML.trim();
                    let nombreCargo = fila.querySelector(".tabla-nombre-cargo-cargos").innerHTML.trim();
                    let descripcionCargo = fila.querySelector(".tabla-descripcion-cargos").innerHTML.trim();
                    let codigoUnico = fila.querySelector(".tabla-codigo-unico-cargos").innerHTML.trim();
                    let error = fila.querySelector(".tabla-hay-error-cargos").innerHTML.trim();

                    let cargo= {
                        idCargo: idCargo,
                        cargo: nombreCargo,
                        descripcionCargo:descripcionCargo ,
                        codigoUnico:codigoUnico
                    };
                    listadoDeCargos.push(cargo);
                }
            });

            if(listadoDeCargos.length>0){
                listadoDeCargos = JSON.stringify(listadoDeCargos);
            }else{
                listadoDeCargos = "";
            }

            let filasArchivos = document.getElementById('tabla-archivos').tBodies[0].querySelectorAll("tr");
            let listadoDeArchivos = [];
            filasArchivos.forEach(fila=> {
                if (fila.querySelector(".tabla-id-archivo")) {
                    let idDelArchivo= fila.querySelector(".tabla-id-archivo").innerHTML.trim();
                    let nombreDelArchivo = fila.querySelector(".tabla-nombre-archivo").innerHTML.trim();
                    let extensionDelArchivo = fila.querySelector(".tabla-extension-archivo").innerHTML.trim();
                    let tipoDelArchivo = fila.querySelector(".tabla-tipo-archivo").innerHTML.trim();

                    let archivo= {
                        idDelArchivo: idDelArchivo,
                        nombreDelArchivo: nombreDelArchivo,
                        extensionDelArchivo: extensionDelArchivo,
                        tipoDelArchivo: tipoDelArchivo
                    };
                    listadoDeArchivos.push(archivo);
                }
            });

            if(listadoDeArchivos.length>0){
                listadoDeArchivos = JSON.stringify(listadoDeArchivos);
            }else{
                listadoDeArchivos = "";
            }

            let formData = new FormData();
            formData.append('correlativo', document.getElementById("campoCorrelativoDeLaSolicitud").value.trim());
            formData.append('id_centro_costo', document.getElementById("campoCentroDeCostoDeLaSolicitud").value.trim());
            formData.append('servicio_vigente', document.getElementById("campoVigenciaDelServicioDeLaSolicitud").value.trim());
            formData.append('numero_contrato', document.getElementById("campoNumeroContratoDeLaSolicitud").value.trim());
            formData.append('nombre_contrato', document.getElementById("campoNombreContratoDeLaSolicitud").value.trim());
            formData.append('fecha_inicio_contrato', document.getElementById("campoFechaDeInicioContratoDeLaSolicitud").value.trim());
            formData.append('vigencia_servicio', document.getElementById("campoVigenciaDelServicioDeLaSolicitud").value.trim());
            formData.append('proceso_productivo', document.getElementById("campoProcesoProductivoDeLaSolicitud").value.trim());
            formData.append('fundamento_caso_calificado', document.getElementById("campoFundamentoCasoCalificadoDeLaSolicitud").value.trim());
            formData.append('listado_cargos', listadoDeCargos);
            formData.append('listado_archivos', listadoDeArchivos);
            let totalDeArchivos = document.getElementsByClassName("form-control-file").length;
            let archivos = document.getElementsByClassName("form-control-file");
            let asignacionDeIdArchivo = 0;
            for (let i = 0; i < totalDeArchivos; i++) {
                if (archivos[i].files.length > 0) {
                    asignacionDeIdArchivo++;
                    formData.append(archivos[i].id, archivos[i].files[0]);
                }
            }
            formData.append('totalDeArchivos', asignacionDeIdArchivo);
            let csrf = '{{ csrf_token() }}';

            $.ajax({
                url: '{{ route('solicitud-jornada.store') }}',
                method: 'POST',
                data: formData,
                contentType: false,
                processData: false,
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': csrf
                },
                success: function(data) {
                    //limpiarCamposDelFormularioDeSolicitudDeJornada();

                    Swal.fire({
                        icon: 'success',
                        title: '¡Solicitud de Jornada Excepcional Creada!',
                        text: 'La solicitud de jornada excepcional se creo con éxito',
                        confirmButtonColor: "#448aff",
                        confirmButtonText: "Confirmar"
                    }).then((result) => {
                        location.reload();
                    })
                    .catch((error) => {
                        location.reload();
                    });

                    document.getElementById("botonDeCreacion").removeAttribute("disabled");
                    eliminarLoading()
                },
                error: function(data) {
                    console.log(data)
                    validarCamposDelFormularioDeSolicitudDeJornada(data)
                    Swal.fire({
                        icon: 'error',
                        title: '¡Errores en el Formulario!',
                        text: 'Revise los campos del formulario. Hay campos incompletos o que no cumple con los requisitos establecidos. Asegurase de completar todos los campos obligatorios y de corregir cualquier error señalado.',
                        confirmButtonColor: "#448aff",
                        confirmButtonText: "Confirmar"
                    })
                    document.getElementById("botonDeCreacion").removeAttribute("disabled");
                    eliminarLoading()
                }
            })
        }
    </script>
@stop