@extends('adminlte::page')

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

@section('title', 'Intranet | Detalle Documento Requerido del Postulante '.$postulante->nombre)

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

    </div>
@stop

@section('content')
    <div class="container-fluid">
        <div class="row justify-content-center">
            <div class="col-lg-10">

                <div class="card card-primary">
                    <div class="card-header">
                        <h3 class="card-title">Detalle Documento Requerido del Postulante {{ $postulante->nombre }}</h3>
                    </div>

                    <form id="formularioDeDocumentoRequerido" enctype="multipart/form-data">
                        @csrf

                        <div class="card-body">

                            <div class="form-group">
                                <label>Documento Requerido</label>
                                <input type="text" id="documentoRequerido" class="form-control" name="documento" value="{{ old('documento', $detalleDocumento->documentoPostulante->documento) }}" readonly="true">
                            </div>

                            <div class="form-group">
                                <label>Tipo Documento</label>
                                <input type="text" id="documentoRequerido" class="form-control" name="tipo" value="{{ old('tipo', $detalleDocumento->documentoPostulante->tipo) }}" readonly="true">
                            </div>

                            <div class="form-group">
                                <label>Institución</label>
                                <input type="text" id="institucion" class="form-control" name="institucion" value="{{ old('institucion', $detalleDocumento->institucion) }}" readonly="true">
                            </div>

                            @if ($detalleDocumento->documentoPostulante->tipo_documento == 'Actividad')
                            <div class="form-group">
                                <label>Fecha Coordinación</label>
                                <input type="text" id="fechaCoordinacion" class="form-control" name="fecha_coordinacion" value="{{ old('fecha_coordinacion', $detalleDocumento->fecha_coordinacion) }}" readonly="true">
                            </div>
                            @endif

                            <div class="form-group">
                                <label>Fecha de Vencimiento</label>
                                <input type="text" id="fechaVencimiento" class="form-control" name="fecha_vencimiento" value="{{ old('fecha_vencimiento', $detalleDocumento->fecha_vencimiento) }}" readonly="true">
                            </div>

                            <div class="form-group">
                                <label>Estado de Entrega</label>
                                <input type="text" id="estadoDeEntrega" class="form-control" name="estado_entrega" value="{{ old('estado_entrega', $detalleDocumento->estado_entrega) }}" readonly="true">
                            </div>

                            <div class="form-group">
                                <label>Estado de Revisión</label>
                                <input type="text" id="estadoDeRevision" class="form-control" name="estado_entrega" value="{{ old('estado_entrega', $detalleDocumento->estado_revision) }}" readonly="true">
                            </div>

                            @if ($detalleDocumento->documentoPostulante->tipo_documento == 'Actividad')
                                <div class="dt-responsive table-responsive">
                                    <table class="table table-striped table-bordered" role="grid" aria-describedby="base-style_info" id="tabla-asistencia">
                                        <thead>
                                            <tr role="row">
                                                <th>#</th>
                                                <th>El Postulante Asistio</th>
                                                <th>Fecha De La Asistencia</th>
                                            </tr>
                                        </thead>
                                        <tbody id="registroAsistencia">
                                            @if(count($detalleDocumento->asistencias)>0)
                                                @php
                                                    $cantidadAsistencias=0;
                                                @endphp
                                                @foreach($detalleDocumento->asistencias as $asistencia)
                                                    @php
                                                        $cantidadAsistencias++;
                                                    @endphp
                                                    <tr role="row" class="odd">
                                                           <td class="tabla-contador-asistencia">{{$cantidadAsistencias}}</td>
                                                           @if($asistencia->asistencia==true)
                                                                <td class="tabla-asistencia-asistencia">Si</td>
                                                           @else 
                                                                <td class="tabla-asistencia-asistencia">No</td>
                                                           @endif
                                                           <td class="tabla-estado-fecha-asistencia-asistencia">{{fechaConFormatoDeChile($asistencia->fecha_asistencia)}}</td>
                                                    </tr>
                                                @endforeach
                                            @else    
                                                <tr id="asistenciaNoDisponibleEnLaTabla">
                                                    <td colspan="4" class="text-center">No hay asistencia disponibles en la tabla</td>
                                                </tr>
                                            @endif
                                        </tbody>
                                    </table>
                                </div>
                            @endif

                            @if ($detalleDocumento->estado_entrega == 'Rechazado' || $detalleDocumento->estado_entrega == 'Apto c/observaciones')
                                @if ($detalleDocumento->estado_entrega == 'Rechazado')
                                    <div class="form-group" id="contenedorMotivo">
                                        <label for="motivoEstado" id="labelMotivoEstado">Motivo del Rechazo RRHH</label>
                                        <textarea class="form-control" id="motivoEstado" name="motivo_estado" rows="3" readonly="true">{{ $detalleDocumento->observacion }}</textarea>
                                    </div>
                                @elseif($detalleDocumento->estado_entrega == 'Apto c/observaciones')
                                    <div class="form-group" id="contenedorMotivo">
                                        <label for="motivoEstado" id="labelMotivoEstado">Motivo del Apto c/Observacione RRHH</label>
                                        <textarea class="form-control" id="motivoEstado" name="motivo_estado" rows="3" readonly="true">{{ $detalleDocumento->observacion }}</textarea>
                                    </div>
                                @endif
                            @endif

                            @if ($detalleDocumento->estado_revision=="Rechazado")
                                <div class="form-group" id="contenedorMotivo">
                                    <label for="motivoEstado" id="labelMotivoEstado">Motivo del Rechazo RRLL</label>
                                    <textarea class="form-control" id="motivoEstado" name="motivo_estado" rows="3" readonly="true">{{ $detalleDocumento->observacion_revision }}</textarea>
                                </div>
                            @endif

                            <div class="dt-responsive table-responsive">
                                <table class="table table-striped table-bordered" role="grid" aria-describedby="base-style_info">
                                    <thead>
                                        <tr role="row">
                                            <th colspan="4" class="text-center">ARCHIVOS REGISTRADOS</th>
                                        </tr>
                                        <tr role="row">
                                            <th>Acción</th>
                                            <th>Archivo</th>
                                            <th>Tipo</th>
                                        </tr>
                                    </thead>
                                    <tbody id="registroDeArchivos">
                                        @if (count($detalleDocumento->archivos) > 0)
                                            @foreach ($detalleDocumento->archivos as $archivoPostulante)
                                                <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">
                                                                <a class="dropdown-item" href="#" onclick="visualizarArchivoRegistradoDeLaordenDeCompra('{{ $archivoPostulante->nombre_Archivo }}', '{{ strtolower(retornaTextoExtensionSegunExtensionDelArchivo($archivoPostulante->extension)) }}','{{ $archivoPostulante->id_detalle_documentos_postulantes }}')"><i class="fas fa-eye" aria-hidden="true"></i> Visualizar Archivo</a>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>{{ $archivoPostulante->nombre_Archivo }}</td>
                                                    <td>{{ retornaTextoExtensionSegunExtensionDelArchivo($archivoPostulante->extension) }}</td>
                                                </tr>
                                            @endforeach
                                        @else
                                            <tr id="archivosNoDisponibleEnLaTabla">
                                                <td colspan="4" class="text-center">No hay archivos disponibles en la tabla</td>
                                            </tr>
                                        @endif
                                    </tbody>
                                </table>
                            </div>

                        </div>

                        <div class=" card-footer">
                            @if ($detalleDocumento->carpetaPostulante->estado_carpeta=="Pendiente")
                                @if ($detalleDocumento->estado_entrega=="Entregado" || $detalleDocumento->estado_entrega=="Apto" || $detalleDocumento->estado_entrega=="Apto c/observaciones")
                                    @if ($detalleDocumento->estado_revision=="Pendiente")
                                        @if (Gate::check('postulante.aprobar-carpeta-documentos-postulantes-general'))
                                            <button type="button" class="btn btn-success mt-1" id="botonDeAprobacion" onclick="aprobarDocumento()"><i class="fas fa-award" style="margin-right: 2px;"></i> Aprobar Documento</button>
                                            <button type="button" class="btn btn-danger mt-1" onclick="abrirModalRechazarDocumento()"><i class="fas fa-award" style="margin-right: 2px;"></i> Rechazar Documento</button>
                                        @elseif(Gate::check('postulante.aprobar-carpeta-documentos-postulantes-sucursal'))    
                                            @if ($postulante->cargo->centroCosto->sucursal==auth()->user()->sucursal)
                                                <button type="button" class="btn btn-success mt-1" id="botonDeAprobacion" onclick="aprobarDocumento()"><i class="fas fa-award" style="margin-right: 2px;"></i> Aprobar Documento</button>
                                                <button type="button" class="btn btn-danger mt-1" onclick="abrirModalRechazarDocumento()"><i class="fas fa-award" style="margin-right: 2px;"></i> Rechazar Documento</button>
                                            @endif
                                        @endif
                                    @elseif($detalleDocumento->estado_revision=="Rechazado")  
                                        @if (Gate::check('postulante.aprobar-carpeta-documentos-postulantes-general'))
                                            <button type="button" class="btn btn-success mt-1" id="botonDeAprobacion" onclick="aprobarDocumento()"><i class="fas fa-award" style="margin-right: 2px;"></i> Aprobar Documento</button>
                                        @elseif(Gate::check('postulante.aprobar-carpeta-documentos-postulantes-sucursal'))    
                                            @if ($postulante->cargo->centroCosto->sucursal==auth()->user()->sucursal)
                                                <button type="button" class="btn btn-success mt-1" id="botonDeAprobacion" onclick="aprobarDocumento()"><i class="fas fa-award" style="margin-right: 2px;"></i> Aprobar Documento</button>
                                            @endif
                                        @endif 
                                    @elseif($detalleDocumento->estado_revision=="Aprobado")  
                                        @if (Gate::check('postulante.aprobar-carpeta-documentos-postulantes-general'))
                                            <button type="button" class="btn btn-danger mt-1" onclick="abrirModalRechazarDocumento()"><i class="fas fa-award" style="margin-right: 2px;"></i> Rechazar Documento</button>
                                        @elseif(Gate::check('postulante.aprobar-carpeta-documentos-postulantes-sucursal'))    
                                            @if ($postulante->cargo->centroCosto->sucursal==auth()->user()->sucursal)
                                                <button type="button" class="btn btn-danger mt-1" onclick="abrirModalRechazarDocumento()"><i class="fas fa-award" style="margin-right: 2px;"></i> Rechazar Documento</button>
                                            @endif
                                        @endif
                                    @endif
                                @endif
                            @endif
                            <a href="{{ route('documento-postulante.show', $postulante) }}" role="button" class="btn btn-secondary" id="botonVolver"><i class="fas fa-arrow-alt-circle-left" style="margin-right: 2px;"></i> Volver</a>
                        </div>
                    </form>
                </div>
            </div>

        </div>
    </div>

    <div class="modal fade" id="modalRechazoDelDocumento" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <form id="formularioModalRechazoDelDocumento">
            @csrf
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header" style="background-color: #007bff; color:white;">
                        <h5 class="modal-title">Rechazo del Documento {{$detalleDocumento->documentoPostulante->documento}}</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color:white;">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label>Motivo del Rechazo</label>
                            <textarea class="form-control" id="campoMotivoModalRechazoDelDocumento" name="observacion_revision" rows="3"></textarea>
                            <div class="invalid-feedback" id="validacionCampoMotivoModalRechazoDelDocumento">

                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                        <button type="button" class="btn btn-primary" id="botonDeRechazo" onclick="rechazarDocumento()">Rechazar Documento</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>
        .hide_column {
            display: none;
        }

        .kv-file-upload {
            display: none;
        }

        .contenedorParaVisualizarImagenDelArchivo {
            background-color: rgba(0, 0, 0, .8);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 10000;
            display: grid;
            grid-template-rows: 10vh 90vh;
            color: white;

        }

        .contenedorVolver {
            padding-left: 10px;
            padding-right: 10px;
            display: grid;
            grid-template-columns: 90% 10%;
        }

        .contenedorDeImagenes {
            display: grid;
            grid-template-columns: 100%;
        }

        .tamanoImagen {
            max-width: 80%;
        }

        .tamanoIframe {
            width: 80%;
            height: 700px;
        }

        .tamanoIframeTxt {
            width: 80%;
            height: 700px;
            background-color: white;
            "

        }
    </style>
@stop

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

    <script>
        function visualizarArchivoDeLaordenDeCompra(archivo, tipo) {
            var body = document.getElementsByTagName("body")[0];
            var html = document.getElementsByTagName("html")[0];
            var contenedor = document.createElement("div");
            var contenerdorVolver = document.createElement("div");
            var contenerdorDeImagenes = document.createElement("div");

            if (tipo == "imagen") {
                var elementoImagen = document.createElement("img");
                var contenerdorImg = document.createElement("div");

                elementoImagen.setAttribute("src", archivo);
                elementoImagen.setAttribute("class", "tamanoImagen");
                elementoImagen.setAttribute("id", "imagenDelArchivo");
                contenerdorImg.setAttribute("style", "text-align: center;");

                contenedor.setAttribute("class", "contenedorParaVisualizarImagenDelArchivo");
                contenedor.setAttribute("id", "contenedorParaVisualizarImagenDelArchivo");
                contenerdorVolver.setAttribute("class", "contenedorVolver");
                contenerdorDeImagenes.setAttribute("class", "contenedorDeImagenes");

                contenerdorVolver.innerHTML =
                    "<div></div>" +
                    '<div style="display: flex; justify-content: center; align-items: center; "><button onClick="cerrarVisualizarDeArchivo()" type="button" style=" border: 0;padding: 0px; background-color: transparent;  margin: 0; color:white; cursor:pointer;"><i class="fas fa-times"></i></button></div>';

                contenerdorImg.appendChild(elementoImagen);

                contenerdorDeImagenes.appendChild(contenerdorImg);

                contenedor.appendChild(contenerdorVolver);
                contenedor.appendChild(contenerdorDeImagenes);
                body.appendChild(contenedor);

                var tamanoLetraVolver = Math.round(contenerdorVolver.offsetHeight * 0.8);
                contenerdorVolver.style.fontSize = tamanoLetraVolver + "px";
                contenerdorDeImagenes.style.fontSize = tamanoLetraVolver + "px";

                setTimeout(function() {
                    if (elementoImagen.offsetHeight > html.offsetHeight) {
                        var alturaDePantalla = elementoImagen.offsetHeight + contenerdorVolver.offsetHeight + 50;
                        contenedor.style.height = alturaDePantalla + "px";
                    } else {
                        contenedor.style.height = html.offsetHeight + "px";
                    }
                }, 100);
            }

            if (tipo == "pdf") {
                var elementoImagen = document.createElement("iframe");
                var contenerdorImg = document.createElement("div");

                elementoImagen.setAttribute("src", archivo);
                elementoImagen.setAttribute("class", "tamanoIframe");
                elementoImagen.setAttribute("id", "imagenDelArchivo");
                contenerdorImg.setAttribute("style", "text-align: center;");

                contenedor.setAttribute("class", "contenedorParaVisualizarImagenDelArchivo");
                contenedor.setAttribute("id", "contenedorParaVisualizarImagenDelArchivo");
                contenerdorVolver.setAttribute("class", "contenedorVolver");
                contenerdorDeImagenes.setAttribute("class", "contenedorDeImagenes");

                contenerdorVolver.innerHTML =
                    "<div></div>" +
                    '<div style="display: flex; justify-content: center; align-items: center; "><button onClick="cerrarVisualizarDeArchivo()" type="button" style=" border: 0;padding: 0px; background-color: transparent;  margin: 0; color:white; cursor:pointer;"><i class="fas fa-times"></i></button></div>';

                contenerdorImg.appendChild(elementoImagen);

                contenerdorDeImagenes.appendChild(contenerdorImg);

                contenedor.appendChild(contenerdorVolver);
                contenedor.appendChild(contenerdorDeImagenes);
                body.appendChild(contenedor);

                var tamanoLetraVolver = Math.round(contenerdorVolver.offsetHeight * 0.8);
                contenerdorVolver.style.fontSize = tamanoLetraVolver + "px";
                contenerdorDeImagenes.style.fontSize = tamanoLetraVolver + "px";

                setTimeout(function() {
                    if (elementoImagen.offsetHeight > html.offsetHeight) {
                        var alturaDePantalla = elementoImagen.offsetHeight + contenerdorVolver.offsetHeight + 50;
                        contenedor.style.height = alturaDePantalla + "px";
                    } else {
                        contenedor.style.height = html.offsetHeight + "px";
                    }
                }, 100);
            }

            if (tipo == "txt") {
                var elementoImagen = document.createElement("iframe");
                var contenerdorImg = document.createElement("div");

                elementoImagen.setAttribute("src", archivo);
                elementoImagen.setAttribute("class", "tamanoIframeTxt");
                elementoImagen.setAttribute("id", "imagenDelArchivo");
                contenerdorImg.setAttribute("style", "text-align: center; ");

                contenedor.setAttribute("class", "contenedorParaVisualizarImagenDelArchivo");
                contenedor.setAttribute("id", "contenedorParaVisualizarImagenDelArchivo");
                contenerdorVolver.setAttribute("class", "contenedorVolver");
                contenerdorDeImagenes.setAttribute("class", "contenedorDeImagenes");

                contenerdorVolver.innerHTML =
                    "<div></div>" +
                    '<div style="display: flex; justify-content: center; align-items: center; "><button onClick="cerrarVisualizarDeArchivo()" type="button" style=" border: 0;padding: 0px; background-color: transparent;  margin: 0; color:white; cursor:pointer;"><i class="fas fa-times"></i></button></div>';

                contenerdorImg.appendChild(elementoImagen);

                contenerdorDeImagenes.appendChild(contenerdorImg);

                contenedor.appendChild(contenerdorVolver);
                contenedor.appendChild(contenerdorDeImagenes);
                body.appendChild(contenedor);

                var tamanoLetraVolver = Math.round(contenerdorVolver.offsetHeight * 0.8);
                contenerdorVolver.style.fontSize = tamanoLetraVolver + "px";
                contenerdorDeImagenes.style.fontSize = tamanoLetraVolver + "px";

                setTimeout(function() {
                    if (elementoImagen.offsetHeight > html.offsetHeight) {
                        var alturaDePantalla = elementoImagen.offsetHeight + contenerdorVolver.offsetHeight + 50;
                        contenedor.style.height = alturaDePantalla + "px";
                    } else {
                        contenedor.style.height = html.offsetHeight + "px";
                    }
                }, 100);
            }

        }

        function cerrarVisualizarDeArchivo() {
            var contenedor = document.getElementById("contenedorParaVisualizarImagenDelArchivo");
            var body = document.getElementsByTagName("body")[0];
            body.removeChild(contenedor);

            document.getElementById("tabla-archivos").parentElement.scrollIntoView({
                behavior: "smooth",
                block: "end",
                inline: "nearest"
            });
        }

        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 eliminarArchivoDeLaTabla(registro, archivo) {
            document.getElementById(archivo).remove();
            registro.remove();

            if (document.getElementById("registroDeNuevosArchivos").innerHTML.trim().length == 0) {
                document.getElementById("registroDeNuevosArchivos").innerHTML =
                    '<tr id="archivosNoDisponibleEnLaTablaNuevoArchivos">' +
                    '<td colspan="3" class="text-center">No hay archivos disponibles en la tabla</td>' +
                    '</tr>';
            }

            document.getElementById("tabla-archivos").parentElement.scrollIntoView({
                behavior: "smooth",
                block: "end",
                inline: "nearest"
            });
        }

        function GuardarArchivoAlSeleccionarlo(archivo) {
            var nombreArchivo = archivo.files[0].name;
            var extensionarchivo = nombreArchivo.split('.');
            extensionarchivo = extensionarchivo[extensionarchivo.length - 1];
            var extensionArchivoSinCambio = extensionarchivo;
            var accionesRegistroDeArchivo = "";

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

            var reader = new FileReader();
            reader.readAsDataURL(archivo.files[0]);
            reader.onload = function() {
                var base64 = reader.result;

                if (extensionarchivo.toLowerCase() == "png" || extensionarchivo.toLowerCase() == "jpeg" || extensionarchivo.toLowerCase() == "gif" || extensionarchivo.toLowerCase() == "jpg" || extensionarchivo.toLowerCase() == "bmp") {
                    extensionarchivo = "IMAGEN";
                    accionesRegistroDeArchivo =
                        '<a class="dropdown-item" href="#" onclick="visualizarArchivoDeLaordenDeCompra(\'' + base64 + '\',\'imagen\')"><i class="fas fa-eye" aria-hidden="true"></i> Visualizar Archivo</a>' +
                        '<a class="dropdown-item" href="#" onclick="eliminarArchivoDeLaTabla(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
                } else if (extensionarchivo.toLowerCase() == "mp3" || extensionarchivo.toLowerCase() == "wav" || extensionarchivo.toLowerCase() == "wma" || extensionarchivo.toLowerCase() == "ogg") {
                    extensionarchivo = "ARCHIVO DE AUDIO";
                    accionesRegistroDeArchivo = '<a class="dropdown-item" href="#" onclick="eliminarArchivoDeLaTabla(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
                } else if (extensionarchivo.toLowerCase() == "zip" || extensionarchivo.toLowerCase() == "rar" || extensionarchivo.toLowerCase() == "tgz" || extensionarchivo.toLowerCase() == "tar") {
                    extensionarchivo = "ARCHIVO COMPRIMIDO";
                    accionesRegistroDeArchivo = '<a class="dropdown-item" href="#" onclick="eliminarArchivoDeLaTabla(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
                } else if (extensionarchivo.toLowerCase() == "pdf") {
                    extensionarchivo = "PDF";
                    accionesRegistroDeArchivo =
                        '<a class="dropdown-item" href="#" onclick="visualizarArchivoDeLaordenDeCompra(\'' + base64 + '\',\'pdf\')"><i class="fas fa-eye" aria-hidden="true"></i> Visualizar Archivo</a>' +
                        '<a class="dropdown-item" href="#" onclick="eliminarArchivoDeLaTabla(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
                } else if (extensionarchivo.toLowerCase() == "xlsx" || extensionarchivo.toLowerCase() == "xls") {
                    extensionarchivo = "OFFICE EXCEL";
                    accionesRegistroDeArchivo = '<a class="dropdown-item" href="#" onclick="eliminarArchivoDeLaTabla(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
                } else if (extensionarchivo.toLowerCase() == "pptx" || extensionarchivo.toLowerCase() == "ppt") {
                    extensionarchivo = "OFFICE POWER POINT";
                    accionesRegistroDeArchivo = '<a class="dropdown-item" href="#" onclick="eliminarArchivoDeLaTabla(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
                } else if (extensionarchivo.toLowerCase() == "docx" || extensionarchivo.toLowerCase() == "doc") {
                    extensionarchivo = "OFFICE WORD";
                    accionesRegistroDeArchivo = '<a class="dropdown-item" href="#" onclick="eliminarArchivoDeLaTabla(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
                } else if (extensionarchivo.toLowerCase() == "txt") {
                    extensionarchivo = "ARCHIVO DE TEXTO";
                    accionesRegistroDeArchivo =
                        '<a class="dropdown-item" href="#" onclick="visualizarArchivoDeLaordenDeCompra(\'' + base64 + '\',\'txt\')"><i class="fas fa-eye" aria-hidden="true"></i> Visualizar Archivo</a>' +
                        '<a class="dropdown-item" href="#" onclick="eliminarArchivoDeLaTabla(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
                } else if (
                    extensionarchivo.toLowerCase() == "mp4" || extensionarchivo.toLowerCase() == "webm" || extensionarchivo.toLowerCase() == "avi" ||
                    extensionarchivo.toLowerCase() == "asf" || extensionarchivo.toLowerCase() == "dvd" || extensionarchivo.toLowerCase() == "m1v" ||
                    extensionarchivo.toLowerCase() == "movie" || extensionarchivo.toLowerCase() == "mpeg" || extensionarchivo.toLowerCase() == "wn" || extensionarchivo.toLowerCase() == "wmv"
                ) {
                    extensionarchivo = "ARCHIVO DE VIDEO";
                    accionesRegistroDeArchivo = '<a class="dropdown-item" href="#" onclick="eliminarArchivoDeLaTabla(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
                } else {
                    extensionarchivo = "ARCHIVO DESCONOCIDO";
                    accionesRegistroDeArchivo = '<a class="dropdown-item" href="#" onclick="eliminarArchivoDeLaTabla(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
                }

                document.getElementById("registroDeNuevosArchivos").innerHTML +=
                    '<tr>' +
                    '<td style="display:none;" class="id_archivo_archivos">' + archivo.id + '</td>' +
                    '<td class="acciones_archivos">' +
                    '<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">' +
                    accionesRegistroDeArchivo +
                    //'<a class="dropdown-item" href="'+url+'" target="_blank"><i class="fas fa-eye" aria-hidden="true"></i> Visualizar Archivo</a>'+
                    //'<a class="dropdown-item" href="#" onclick="eliminarArchivoDeLaTabla(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>' +
                    '</div>' +
                    '</div>' +
                    '</td>' +
                    '<td class="nombre_archivos">' + nombreArchivo + '</td>' +
                    '<td class="extension_archivos">' + extensionarchivo + '</td>' +
                    '</tr>';

                archivo.style.display = "none";
                var inputFile = document.createElement("input");
                inputFile.setAttribute("type", "file");
                inputFile.setAttribute("class", "form-control-file");
                inputFile.setAttribute("id", uuid());
                inputFile.setAttribute("onchange", "GuardarArchivoAlSeleccionarlo(this)");
                document.getElementById("contenedorDelSeleccionadorDeArchivo").appendChild(inputFile);

            };
            reader.onerror = function(error) {

            };

        }

        function visualizarArchivoRegistradoDeLaordenDeCompra(archivo, tipo, idOc) {
            var body = document.getElementsByTagName("body")[0];
            var html = document.getElementsByTagName("html")[0];
            var contenedor = document.createElement("div");
            var contenerdorVolver = document.createElement("div");
            var contenerdorDeImagenes = document.createElement("div");

            var rutaUrl = 'storage/documentos-requeridos-postulantes/' + idOc + '/' + archivo;
            var url = '{{ asset('') }}';
            url = url + rutaUrl;

            if (tipo == "imagen") {
                var elementoImagen = document.createElement("img");
                var contenerdorImg = document.createElement("div");

                elementoImagen.setAttribute("src", url);
                elementoImagen.setAttribute("class", "tamanoImagen");
                elementoImagen.setAttribute("id", "imagenDelArchivo");
                contenerdorImg.setAttribute("style", "text-align: center;");

                contenedor.setAttribute("class", "contenedorParaVisualizarImagenDelArchivo");
                contenedor.setAttribute("id", "contenedorParaVisualizarImagenDelArchivo");
                contenerdorVolver.setAttribute("class", "contenedorVolver");
                contenerdorDeImagenes.setAttribute("class", "contenedorDeImagenes");

                contenerdorVolver.innerHTML =
                    "<div></div>" +
                    '<div style="display: flex; justify-content: center; align-items: center; "><button onClick="cerrarVisualizarDeArchivo()" type="button" style=" border: 0;padding: 0px; background-color: transparent;  margin: 0; color:white; cursor:pointer;"><i class="fas fa-times"></i></button></div>';

                contenerdorImg.appendChild(elementoImagen);

                contenerdorDeImagenes.appendChild(contenerdorImg);

                contenedor.appendChild(contenerdorVolver);
                contenedor.appendChild(contenerdorDeImagenes);
                body.appendChild(contenedor);

                var tamanoLetraVolver = Math.round(contenerdorVolver.offsetHeight * 0.8);
                contenerdorVolver.style.fontSize = tamanoLetraVolver + "px";
                contenerdorDeImagenes.style.fontSize = tamanoLetraVolver + "px";

                setTimeout(function() {
                    if (elementoImagen.offsetHeight > html.offsetHeight) {
                        var alturaDePantalla = elementoImagen.offsetHeight + contenerdorVolver.offsetHeight + 50;
                        contenedor.style.height = alturaDePantalla + "px";
                    } else {
                        contenedor.style.height = html.offsetHeight + "px";
                    }
                }, 100);
            }

            if (tipo == "pdf") {
                var elementoImagen = document.createElement("iframe");
                var contenerdorImg = document.createElement("div");

                elementoImagen.setAttribute("src", url);
                elementoImagen.setAttribute("class", "tamanoIframe");
                elementoImagen.setAttribute("id", "imagenDelArchivo");
                contenerdorImg.setAttribute("style", "text-align: center;");

                contenedor.setAttribute("class", "contenedorParaVisualizarImagenDelArchivo");
                contenedor.setAttribute("id", "contenedorParaVisualizarImagenDelArchivo");
                contenerdorVolver.setAttribute("class", "contenedorVolver");
                contenerdorDeImagenes.setAttribute("class", "contenedorDeImagenes");

                contenerdorVolver.innerHTML =
                    "<div></div>" +
                    '<div style="display: flex; justify-content: center; align-items: center; "><button onClick="cerrarVisualizarDeArchivo()" type="button" style=" border: 0;padding: 0px; background-color: transparent;  margin: 0; color:white; cursor:pointer;"><i class="fas fa-times"></i></button></div>';

                contenerdorImg.appendChild(elementoImagen);

                contenerdorDeImagenes.appendChild(contenerdorImg);

                contenedor.appendChild(contenerdorVolver);
                contenedor.appendChild(contenerdorDeImagenes);
                body.appendChild(contenedor);

                var tamanoLetraVolver = Math.round(contenerdorVolver.offsetHeight * 0.8);
                contenerdorVolver.style.fontSize = tamanoLetraVolver + "px";
                contenerdorDeImagenes.style.fontSize = tamanoLetraVolver + "px";

                setTimeout(function() {
                    if (elementoImagen.offsetHeight > html.offsetHeight) {
                        var alturaDePantalla = elementoImagen.offsetHeight + contenerdorVolver.offsetHeight + 50;
                        contenedor.style.height = alturaDePantalla + "px";
                    } else {
                        contenedor.style.height = html.offsetHeight + "px";
                    }
                }, 100);
            }

            if (tipo == "archivo de texto") {
                var elementoImagen = document.createElement("iframe");
                var contenerdorImg = document.createElement("div");

                elementoImagen.setAttribute("src", url);
                elementoImagen.setAttribute("class", "tamanoIframeTxt");
                elementoImagen.setAttribute("id", "imagenDelArchivo");
                contenerdorImg.setAttribute("style", "text-align: center; ");

                contenedor.setAttribute("class", "contenedorParaVisualizarImagenDelArchivo");
                contenedor.setAttribute("id", "contenedorParaVisualizarImagenDelArchivo");
                contenerdorVolver.setAttribute("class", "contenedorVolver");
                contenerdorDeImagenes.setAttribute("class", "contenedorDeImagenes");

                contenerdorVolver.innerHTML =
                    "<div></div>" +
                    '<div style="display: flex; justify-content: center; align-items: center; "><button onClick="cerrarVisualizarDeArchivo()" type="button" style=" border: 0;padding: 0px; background-color: transparent;  margin: 0; color:white; cursor:pointer;"><i class="fas fa-times"></i></button></div>';

                contenerdorImg.appendChild(elementoImagen);

                contenerdorDeImagenes.appendChild(contenerdorImg);

                contenedor.appendChild(contenerdorVolver);
                contenedor.appendChild(contenerdorDeImagenes);
                body.appendChild(contenedor);

                var tamanoLetraVolver = Math.round(contenerdorVolver.offsetHeight * 0.8);
                contenerdorVolver.style.fontSize = tamanoLetraVolver + "px";
                contenerdorDeImagenes.style.fontSize = tamanoLetraVolver + "px";

                setTimeout(function() {
                    if (elementoImagen.offsetHeight > html.offsetHeight) {
                        var alturaDePantalla = elementoImagen.offsetHeight + contenerdorVolver.offsetHeight + 50;
                        contenedor.style.height = alturaDePantalla + "px";
                    } else {
                        contenedor.style.height = html.offsetHeight + "px";
                    }
                }, 100);
            }

        }

        function cancelarEliminacionDeArchivoRegistradoDeLaTabla(registro, idArchivo) {
            var listadoDeArchivoRemovidoPorElUsuario = document.getElementById("listadoDeArchivoRemovidoPorElUsuario").value;
            listadoDeArchivoRemovidoPorElUsuario = JSON.parse(listadoDeArchivoRemovidoPorElUsuario);

            var listadoDeArchivoRegistrado = document.getElementById("listadoDeArchivoRegistrado").value;
            listadoDeArchivoRegistrado = JSON.parse(listadoDeArchivoRegistrado);

            for (var i = 0; i < listadoDeArchivoRemovidoPorElUsuario.length; i++) {
                if (idArchivo == listadoDeArchivoRemovidoPorElUsuario[i].id) {
                    listadoDeArchivoRemovidoPorElUsuario.splice(i, 1);
                }
            }

            document.getElementById("listadoDeArchivoRemovidoPorElUsuario").value = JSON.stringify(listadoDeArchivoRemovidoPorElUsuario);
            registro.querySelector(".columnaEstadoArchivo").innerHTML = '<span class="badge badge-success">Registrado</span>';

            registro.querySelector(".eliminar-item-archivo").style.display = "block";
            registro.querySelector(".cancelar-eliminacion-item-archivo").style.display = "none";

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

            document.getElementById("tabla-archivos").parentElement.scrollIntoView({
                behavior: "smooth",
                block: "end",
                inline: "nearest"
            });
        }

        function eliminarArchivoRegistradoDeLaTabla(registro, idArchivo) {
            //registro.remove();
            var listadoDeArchivoRemovidoPorElUsuario = document.getElementById("listadoDeArchivoRemovidoPorElUsuario").value;
            listadoDeArchivoRemovidoPorElUsuario = JSON.parse(listadoDeArchivoRemovidoPorElUsuario);

            var listadoDeArchivoRegistrado = document.getElementById("listadoDeArchivoRegistrado").value;
            listadoDeArchivoRegistrado = JSON.parse(listadoDeArchivoRegistrado);

            listadoDeArchivoRegistrado.forEach(elemento => {
                if (idArchivo == elemento.id) {
                    listadoDeArchivoRemovidoPorElUsuario.push(elemento);
                }
            });
            document.getElementById("listadoDeArchivoRemovidoPorElUsuario").value = JSON.stringify(listadoDeArchivoRemovidoPorElUsuario);
            registro.querySelector(".columnaEstadoArchivo").innerHTML = '<span class="badge badge-danger">Removido</span>';

            registro.querySelector(".eliminar-item-archivo").style.display = "none";
            registro.querySelector(".cancelar-eliminacion-item-archivo").style.display = "block";


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

            document.getElementById("tabla-archivos").parentElement.scrollIntoView({
                behavior: "smooth",
                block: "end",
                inline: "nearest"
            });
        }
    </script>

    <script>
        function abrirModalRechazarDocumento() {
            document.getElementById("campoMotivoModalRechazoDelDocumento").value = "";
            document.getElementById("validacionCampoMotivoModalRechazoDelDocumento").innerHTML = "";
            document.getElementById("campoMotivoModalRechazoDelDocumento").setAttribute("class", "form-control");
            $("#modalRechazoDelDocumento").modal("show");
        }

        function rechazarDocumento(){
            document.getElementById("botonDeRechazo").setAttribute("disabled", true);
            if(document.getElementById("campoMotivoModalRechazoDelDocumento").value.trim().length > 0){
                Swal.fire({
                    title: '¿Esta seguro?',
                    text: "El documento cambiará su estado de revisión ha rechazado",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: '¡Si, rechazar!',
                    cancelButtonText: 'Cancelar'
                }).then((result) => {
                    if (result.isConfirmed) {
                        generarLoading('{{ asset('img/logo.png') }}')
                        let datosFormulario = $("#formularioModalRechazoDelDocumento").serialize();
                        $.ajax({
                            type: 'POST',
                            datatype: 'json',
                            url: '{{ route('documento-postulante.rechazar-documento', $detalleDocumento) }}',
                            data: datosFormulario,
                            success: function(data) {
                                Swal.fire({
                                    icon: 'success',
                                    title: '¡Documento Rechazada!',
                                    text: 'El documento cambio de estado de revisión ha rechazado',
                                    confirmButtonColor: "#448aff",
                                    confirmButtonText: "Confirmar"
                                }).then((result) => {
                                    location.reload();
                                })
                                .catch((error) => {
                                    location.reload();
                                });
                                eliminarLoading()
                            },
                            error: function(data) {
                                console.log(data)
                                eliminarLoading()
                                document.getElementById("botonDeRechazo").removeAttribute("disabled");
                            }
                        })
                    } else {
                        document.getElementById("botonDeRechazo").removeAttribute("disabled");
                    }
                })
            }else{
                document.getElementById("campoMotivoModalRechazoDelDocumento").setAttribute("class", "form-control is-invalid");
                document.getElementById("validacionCampoMotivoModalRechazoDelDocumento").innerHTML = "El campo motivo del rechazo es obligatorio.";
                document.getElementById("botonDeRechazo").removeAttribute("disabled");
            }
        }

        function aprobarDocumento(){
            document.getElementById("botonDeAprobacion").setAttribute("disabled", true);
            Swal.fire({
                title: '¿Esta seguro?',
                text: "El documento cambiará su estado de revisión ha aprobado",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: '¡Si, aprobar!',
                cancelButtonText: 'Cancelar'
            }).then((result) => {
                if (result.isConfirmed) {
                    generarLoading('{{ asset('img/logo.png') }}')
                    let csrf = '{{ csrf_token() }}';
    
                    $.ajax({
                        type: 'POST',
                        datatype: 'json',
                        url: '{{ route('documento-postulante.aprobar-documento', $detalleDocumento) }}',
                        headers: {
                            'X-CSRF-TOKEN': csrf
                        },
                        success: function(data) {
                            Swal.fire({
                                icon: 'success',
                                title: '¡Documento Aprobado!',
                                text: 'El documento cambio de estado de revisión ha aprobadodo',
                                confirmButtonColor: "#448aff",
                                confirmButtonText: "Confirmar"
                            }).then((result) => {
                                location.reload();
                            })
                            .catch((error) => {
                                location.reload();
                            });
                            eliminarLoading()
                        },
                        error: function(data) {
                            console.log(data)
                            document.getElementById("botonDeAprobacion").removeAttribute("disabled");
                            eliminarLoading()
                        }
                    })
                } else {
                    document.getElementById("botonDeAprobacion").removeAttribute("disabled");
                }
            });
        }
    </script>


@stop