@extends('adminlte::page')

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

@section('title', 'Intranet | Detalle Documento Requerido')

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

    </div>
@stop

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

                <div class="card card-aspen">
                    <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</label>
                                <input type="text" id="estado" class="form-control" name="estado" value="{{ old('estado', $detalleDocumento->estado) }}" 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 == 'Rechazado' || $detalleDocumento->estado == 'Apto c/observaciones')
                                @if ($detalleDocumento->estado == 'Rechazado')
                                    <div class="form-group" id="contenedorMotivo">
                                        <label for="motivoEstado" id="labelMotivoEstado">Motivo Del Rechazo</label>
                                        <textarea class="form-control" id="motivoEstado" name="motivo_estado" rows="3" readonly="true">{{ $detalleDocumento->observacion }}</textarea>
                                    </div>
                                @elseif($detalleDocumento->estado == 'Apto c/observaciones')
                                    <div class="form-group" id="contenedorMotivo">
                                        <label for="motivoEstado" id="labelMotivoEstado">Motivo Del Apto c/Observacione</label>
                                        <textarea class="form-control" id="motivoEstado" name="motivo_estado" rows="3" readonly="true">{{ $detalleDocumento->observacion }}</textarea>
                                    </div>
                                @endif
                            @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">
                            <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>
@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>


@stop