@extends('adminlte::page')

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

@section('title', 'Intranet | Aprobación de la 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">Datos de Aprobación</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',$solicitud->correlativo) }}" readonly="true">
                                    </div>
                                    
                                    <div class="form-group">
                                        <label for="campoSolicitanteDeLaSolicitud">Nombre Solicitante</label>
                                        <input type="text" class="form-control" id="campoSolicitanteDeLaSolicitud" name="id_usuario" value="{{ old('id_usuario',$solicitud->solicitante->name) }}" readonly="true">
                                    </div>
    
                                    <div class="form-group">
                                        <label for="campoCentroDeCostoDeLaSolicitud">Centro de Costo</label>
                                        <input type="text" class="form-control" id="campoCentroDeCostoDeLaSolicitud" name="id_centro_costo" value="{{ old('id_centro_costo',$solicitud->centroDeCosto->centro_costo) }}" readonly="true">
                                    </div>
    
                                    <div class="form-group">
                                        <label for="campoContratoComercialDeLaSolicitud">Número Contrato</label>
                                        <input type="text" class="form-control" id="campoContratoComercialDeLaSolicitud" name="numero_contrato" value="{{ old('numero_contrato',$solicitud->numero_contrato) }}" readonly="true">
                                    </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',$solicitud->nombre_contrato) }}" readonly="true">
                                    </div>

                                    @if ($solicitud->servicio_vigente==true)
                                        <div class="form-group">
                                            <label for="campoVigenciaDelServicioDeLaSolicitud">Vigencia del Servicio</label>
                                            <input type="text" class="form-control" id="campoVigenciaDelServicioDeLaSolicitud" name="servicio_vigente" value="{{ old('servicio_vigente','Servicio Vigente') }}" readonly="true">
                                        </div>
                                    @else
                                        <div class="form-group">
                                            <label for="campoVigenciaDelServicioDeLaSolicitud">Vigencia del Servicio</label>
                                            <input type="text" class="form-control" id="campoVigenciaDelServicioDeLaSolicitud" name="servicio_vigente" value="{{ old('servicio_vigente','Servicio Nuevo') }}" readonly="true">
                                        </div>
                                    @endif
    
                                    <div class="form-group">
                                        <label for="campoFechaInicioaDeLaSolicitud">Fecha de Inicio del Contrato</label>
                                        <input type="date" class="form-control" id="campoFechaInicioaDeLaSolicitud" name="fecha_inicio_contrato" value="{{ old('fecha_inicio_contrato',$solicitud->fecha_inicio_contrato) }}" readonly="true">
                                    </div>

                                    <div class="form-group">
                                        <label for="campoFechaDireccionDeTrabajoDeLaSolicitud">Fecha DT</label>
                                        <input type="date" class="form-control" id="campoFechaDireccionDeTrabajoDeLaSolicitud" name="fecha_direccion_trabajo" value="{{ old('fecha_direccion_trabajo',$solicitud->fecha_direccion_trabajo) }}" readonly="true">
                                    </div>

                                    @isset($solicitud->id_usuario_ingreso_direccion_trabajo)
                                        <div class="form-group">
                                            <label for="campoUsuarioQueIngresoFechaDireccionDeTrabajoDeLaSolicitud">Nombre del Usuario Que Ingreso la Fecha de Dirección de Trabajo</label>
                                            <input type="text" class="form-control" id="campoUsuarioQueIngresoFechaDireccionDeTrabajoDeLaSolicitud" name="id_usuario_ingreso_direccion_trabajo" value="{{ old('	id_usuario_ingreso_direccion_trabajo',$solicitud->usuarioQueIngresoFechaDeDireccionDeTrabajo->name) }}" readonly="true">
                                        </div>
                                    @endisset

                                    @if ($solicitud->estado_aprobacion != 'Pendiente')
                                        @isset($solicitud->id_aprovador)
                                            <div class="form-group">
                                                <label for="campoAprovadorDeLaSolicitud">Nombre Aprobador (Aprobado/Rechazado/Anulado)</label>
                                                <input type="text" class="form-control" id="campoAprovadorDeLaSolicitud" name="id_aprovador" value="{{ old('id_aprovador',$solicitud->aprovador->name) }}" readonly="true">
                                            </div>
                                        @endisset

                                        @isset($solicitud->fecha_aprobacion)
                                            <div class="form-group">
                                                <label for="campoFechaAprovadorDeLaSolicitud">Fecha de Aprobación (Aprobado/Rechazado/Anulado)</label>
                                                <input type="date" class="form-control" id="campoFechaAprovadorDeLaSolicitud" name="fecha_aprobacion" value="{{ old('fecha_aprobacion',$solicitud->fecha_aprobacion) }}" readonly="true">
                                            </div>
                                        @endisset
                                    @endif
                                </div>
    
                                <div class="dt-responsive table-responsive">
                                    <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>
                                            </tr>
                                        </thead>
                                        <tbody id="registroDeCargos">
                                            @php
                                                $indexCargos=0;
                                            @endphp
                                            @if (count($solicitud->detalleDeCargos)>0)
                                                @foreach ($solicitud->detalleDeCargos as $detalle)
                                                    @php
                                                        $indexCargos++;
                                                    @endphp
                                                    <tr role="row" class="odd">
                                                        <td class="tabla-contador-cargos">{{$indexCargos}}</td>
                                                        <td class="tabla-nombre-cargo-cargos">{{$detalle->nombre_cargo}}</td>
                                                        <td class="tabla-descripcion-cargo-cargos">{{$detalle->descripcion_cargo}}</td>
                                                    </tr>
                                                @endforeach
                                            @else
                                                <tr id="cargosNoDisponibleEnLaTabla">
                                                    <td colspan="3" class="text-center">No hay cargos disponibles en la tabla</td>
                                                </tr>
                                            @endif
                                        </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" readonly="true">{{ old('proceso_productivo',$solicitud->proceso_productivo) }}</textarea>
                                </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" readonly="true">{{ old('fundamento_caso_calificado',$solicitud->fundamento_caso_calificado) }}</textarea>
                                </div>

                                <div class="dt-responsive table-responsive">
                                    <table class="table table-striped table-bordered" role="grid" aria-describedby="base-style_info" id="tabla-archivos-tipos">
                                        <thead>
                                            <tr role="row">
                                                <th>Acción</th>
                                                <th>Archivo</th>
                                                <th>Extensión</th>
                                                <th>Tipo</th>
                                            </tr>
                                        </thead>
                                        <tbody id="registroDeArchivosTipos">
                                            @if (count($solicitud->archivos)>0)
                                                @foreach ($solicitud->archivos as $archivo)
                                                    <tr>
                                                        <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">
                                                                    @if (validarSiElArchivoSePuedeVisualizar(strtolower($archivo->extension))==true)
                                                                        <a class="dropdown-item" href="#" onclick="visualizarArchivoRegistradoDeLaSolicitudDeJornada('{{ $archivo->nombre_archivo }}', '{{ strtolower(retornaTextoExtensionSegunExtensionDelArchivo($archivo->extension)) }}','{{ $archivo->id_solicitud_jornada }}')"><i class="fas fa-eye" aria-hidden="true"></i> Visualizar Archivo</a>
                                                                    @endif
                                                                    <a class="dropdown-item" href="{{ route('solicitud-jornada.descargar-archivo', $archivo) }}" target="_blank"><i class="fas fa-download" aria-hidden="true"></i> Descargar Archivo</a>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td>{{$archivo->nombre_archivo}}</td>
                                                        <td>{{ retornaTextoExtensionSegunExtensionDelArchivo($archivo->extension) }}</td>
                                                        <td>{{$archivo->tipo}}</td>
                                                    </tr>
                                                @endforeach
                                            @else
                                                <tr id="archivosTiposNoDisponibleEnLaTabla">
                                                    <td colspan="4" class="text-center">No hay archivos disponibles en la tabla</td>
                                                </tr>
                                            @endif
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="custom-tabs-one-profile" role="tabpanel" aria-labelledby="custom-tabs-one-profile-tab">
                                <div class="form-group">
                                    <label for="campoFechaDeVencimientoDeLaSolicitudDeJornada">Fecha de Vencimiento</label>
                                    <input type="date" class="form-control" id="campoFechaDeVencimientoDeLaSolicitudDeJornada" name="fecha_vencimiento" value="{{ old('fecha_vencimiento') }}">
                                    <div class="invalid-feedback" id="validacionCampoFechaDeVencimientoDeLaSolicitudDeJornada">
        
                                    </div>
                                </div>

                                <div class="form-group" id="contenedorDelSeleccionadorDeArchivo">
                                    <label>Seleccionar Archivos</label>
                                    <input type="file" class="form-control-file visible" id="a93541" onchange="GuardarArchivoSeleccionado()">
                                    <div class="invalid-feedback" id="validacionCampoArchivoa93541">
    
                                    </div>
                                </div>

                                <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>
                                            </tr>
                                        </thead>
                                        <tbody id="registroDeArchivos">
                                            <tr id="archivosNoDisponibleEnLaTabla">
                                                <td colspan="3" 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-success" id="botonDeAprobacion" onclick="aprobarSolicitudDeJornada()"><i class="fas fa-award" style="margin-right: 2px;"></i> Aprobar Solicitud de Jornada Excepcional</button>
                    </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') }}">
@stop

@section('js')
    <script src="{{ asset('js/funcionalidades-genericas.js') }}"></script>

    <script>
        function visualizarArchivoRegistradoDeLaSolicitudDeJornada(nombreArchivo, tipo, idSolicitudDeJornada) {
            let rutaUrl = 'storage/solicitud-jornada/' + idSolicitudDeJornada + '/' + nombreArchivo;
            let url = '{{ asset('') }}';
            url = url + rutaUrl;

            if (tipo.toLowerCase() == "imagen") {
                document.getElementById("modalContenidoModalVisualizarArchivo").innerHTML =
                '<img src="' + url + '" style="max-width: 100%;">';
            }else if(tipo == "pdf"){
                document.getElementById("modalContenidoModalVisualizarArchivo").innerHTML =
                    '<iframe src="' + url + '" style="width:95%; height:600px;"></iframe>';
            }else if(tipo == "archivo de texto"){
                document.getElementById("modalContenidoModalVisualizarArchivo").innerHTML =
                    '<iframe src="' + url + '" style="width:95%; height:600px;"></iframe>';
            }

            document.getElementById("modalTituloVisualizarArchivo").innerHTML = nombreArchivo;
            $("#modalVisualizarArchivo").modal("show");
        }

        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 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');
    
            if(archivo.files.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>' +
                        '</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());
                    inputFile.setAttribute("onchange", "GuardarArchivoSeleccionado()");
                    document.getElementById("contenedorDelSeleccionadorDeArchivo").appendChild(inputFile);
                };
                reader.onerror = function(error) {
        
                };
            }else{    
                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 validarFormularioDeSolicitudDeJornada(){
            let error=false;
            if (document.getElementById("campoFechaDeVencimientoDeLaSolicitudDeJornada").value.trim().length > 0) {
                document.getElementById("campoFechaDeVencimientoDeLaSolicitudDeJornada").setAttribute("class", "form-control is-valid");
                document.getElementById("validacionCampoFechaDeVencimientoDeLaSolicitudDeJornada").innerHTML = "";
            } else {
                document.getElementById("campoFechaDeVencimientoDeLaSolicitudDeJornada").setAttribute("class", "form-control is-invalid");
                document.getElementById("validacionCampoFechaDeVencimientoDeLaSolicitudDeJornada").innerHTML = "El campo fecha de vencimiento es obligatorio";
                error = true;
            }

            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++;
                }
            }

            if(asignacionDeIdArchivo>0){
                document.getElementById("errorArchivos").innerHTML="";
                document.getElementById("errorArchivos").style.display="none";
            }else{
                document.getElementById("errorArchivos").innerHTML="La subida de archivo es obligatorio, debe subir al menos un archivo.";
                document.getElementById("errorArchivos").style.display="block";
                error = true;
            }

            return error;
        }

        function aprobarSolicitudDeJornada(){
            if(validarFormularioDeSolicitudDeJornada()){
                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"
                })
            }else{
                document.getElementById("botonDeAprobacion").setAttribute("disabled", true);
                generarLoading('{{ asset('img/logo.png') }}')

                const fechaDeVencimiento=document.getElementById("campoFechaDeVencimientoDeLaSolicitudDeJornada").value.trim();

                const formData = new FormData();
                formData.append('fecha_vencimiento', fechaDeVencimiento);
                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, archivos[i].files[0]);
                    }
                }
                formData.append('totalDeArchivos', asignacionDeIdArchivo);
                let csrf = '{{ csrf_token() }}';

                $.ajax({
                url: '{{ route('solicitud-jornada.aprobar',$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: '¡Solicitud De Jornada Excepcional Aprobada!',
                        text: "La solicitud de jornada excepcional fue aprobada",
                        confirmButtonColor: "#448aff",
                        confirmButtonText: "Confirmar"
                    }).then((result) => {
                        location.href="{{route('solicitud-jornada.show',$solicitud)}}";
                    })
                    .catch((error) => {
                        location.href="{{route('solicitud-jornada.show',$solicitud)}}";
                    });

                    document.getElementById("botonDeAprobacion").removeAttribute("disabled");
                },
                error: function(data) {
                    console.log(data)
                    document.getElementById("botonDeAprobacion").removeAttribute("disabled");
                    eliminarLoading()
                }
            })
            }
        }
    </script>
@stop