@extends('adminlte::page')

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

@section('title', 'Intranet | Editar 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">Editar 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', $documento->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', $documento->tipo) }}" readonly="true">
                            </div>

                            <div class="form-group">
                                <label>Institución <span style="font-weight: 700; font-size:11px;">(Opcional)</span></label>
                                <select class="form-control listaDespegableConBuscador" id="institucion" name="institucion" data-live-search="true">
                                    <option value="">--Seleccionar Institución--</option>
                                    @foreach ($instituciones as $institucion)
                                        @if (old('institucion') == $institucion)
                                            <option selected value="{{ $institucion }}">{{ $institucion }}</option>
                                        @else
                                            <option value="{{ $institucion }}">{{ $institucion }}</option>
                                        @endif
                                    @endforeach
                                </select>
                                <div class="invalid-feedback" id="valicacionCampoInstitucion">

                                </div>
                            </div>

                            @if ($documento->tipo_documento == 'Actividad')
                                <div class="form-group">
                                    <label>Fecha Coordinación <span style="font-weight: 700; font-size:11px;">(Opcional)</span></label>
                                    <input type="date" class="form-control" name="fecha_coordinacion" id="fechaCoordinacion" value="{{ old('fecha_coordinacion') }}">
                                    <div class="invalid-feedback" id="valicacionCampofechaCoordinacion">

                                    </div>
                                </div>
                            @endif

                            <div class="form-group">
                                <label>Fecha De Vencimiento <span style="font-weight: 700; font-size:11px;">(Opcional)</span></label>
                                <input type="date" class="form-control" name="fecha_vencimiento" id="fechaVencimiento" value="{{ old('fecha_vencimiento') }}">
                                <div class="invalid-feedback" id="valicacionCampofechaVencimiento">

                                </div>
                            </div>

                            <div class="form-group">
                                <label>Estado</label>
                                <select class="form-control listaDespegableConBuscador" id="estado" name="estado" data-live-search="true" onchange="habilitarCampoMotivo(this)">
                                    @foreach ($estados as $estado)
                                        @if (old('estado') == $estado)
                                            <option selected value="{{ $estado }}">{{ $estado }}</option>
                                        @else
                                            <option value="{{ $estado }}">{{ $estado }}</option>
                                        @endif
                                    @endforeach
                                </select>
                                <div class="invalid-feedback" id="valicacionCampoEstado">

                                </div>
                            </div>

                            @if ($documento->tipo_documento == 'Actividad')
                                <fieldset class="fieldset-color-azul" id="fieldsetArticulo">
                                    <legend class="titulo-fieldset-color-azul" id="legendArticulo">Asistencia</legend>

                                    <div class="contenedorDosCamposPorFilaEnLosFormulario">
                                        <div class="form-group">
                                            <label>El Postulante Asistio</label>
                                            <select class="form-control listaDespegableConBuscador" id="asistencia" name="asistencia" data-live-search="true">
                                                <option value="">--Seleccionar Asistencia--</option>
                                                <option value="Si">Si</option>
                                                <option value="No">No</option>
                                            </select>
                                            <div class="invalid-feedback" id="valicacionCampoAsistencia">

                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label for="cargo">Fecha De La Asistencia</label>
                                            <input type="date" class="form-control" id="fechaAsistencia" name="fecha_asistencia" value="{{ old('fecha_asistencia') }}">
                                            <div class="invalid-feedback" id="valicacioFechaAsistencia">

                                            </div>
                                        </div>
                                    </div>

                                    <button type="button" class="btn btn-aspen" onclick="agregarAsistencia()"> Añadir Asistencia</button>
                                </fieldset>

                                <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>
                                                <th>Acción</th>
                                            </tr>
                                        </thead>
                                        <tbody id="registroAsistencia">
                                            <tr id="asistenciaNoDisponibleEnLaTabla">
                                                <td colspan="4" class="text-center">No hay asistencia disponibles en la tabla</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            @endif

                            <div class="form-group" style="display: none;" id="contenedorMotivo">
                                <label for="motivoEstado" id="labelMotivoEstado">Observación</label>
                                <textarea class="form-control" id="motivoEstado" name="motivo_estado" rows="3"></textarea>
                                <div class="invalid-feedback" id="valicacionCampoMotivoEstado">

                                </div>
                            </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 style="display: none;">id archivo</th>
                                            <th>Acción</th>
                                            <th>Nombre Archivo</th>
                                            <th>Tipo Archivo</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 class="form-group" id="contenedorDelSeleccionadorDeArchivo">
                                <label>Seleccionar Archivos</label>
                                <input type="file" class="form-control-file" id="a93541" onchange="GuardarArchivoAlSeleccionarlo(this)">
                            </div>
                            <input type="hidden" id="codigoUnico">

                        </div>

                        <div class=" card-footer">
                            <button type="button" class="btn btn-aspen" id="botonDeCreacion" onclick="registrarDocumentoRequerido('{{ $documento->documento }}','{{ $postulante->nombre }}',{{ $documento->id }},{{ $postulante->id }},{{ $carpeta->id }})"><i class="fas fa-plus-circle" style="margin-right: 2px;"></i> Editar Documento Requerido</button>
                            <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>
        $('#institucion').selectpicker({
            dropupAuto: false,
        });
        $('#estado').selectpicker({
            dropupAuto: false,
        });
        $('#asistencia').selectpicker({
            dropupAuto: false,
        });
    </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("registroDeArchivos").innerHTML.trim().length == 0) {
                document.getElementById("registroDeArchivos").innerHTML =
                    '<tr id="archivosNoDisponibleEnLaTabla">' +
                    '<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("archivosNoDisponibleEnLaTabla")) {
                document.getElementById("archivosNoDisponibleEnLaTabla").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("registroDeArchivos").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) {

            };

        }
    </script>

    <script>
        function habilitarCampoMotivo(estado) {
            switch (estado.value) {
                case "Rechazado":
                    document.getElementById("motivoEstado").value = "";
                    document.getElementById("labelMotivoEstado").innerHTML = "Motivo Del Rechazo";
                    document.getElementById("contenedorMotivo").style.display = "block";
                    break;
                case "Apto c/observaciones":
                    document.getElementById("motivoEstado").value = "";
                    document.getElementById("labelMotivoEstado").innerHTML = "Motivo Del Apto c/Observaciones";
                    document.getElementById("contenedorMotivo").style.display = "block";
                    break;
                default:
                    document.getElementById("contenedorMotivo").style.display = "none";
                    break;
            }
        }
    </script>

    <script>
        let cantidadMaximaDeAsistencia = 0;

        function agregarAsistencia() {
            let valorAsistencia = document.getElementById("asistencia").value.trim();
            let valorFechaAsistencia = document.getElementById("fechaAsistencia").value.trim();
            if (valorAsistencia.length > 0 && valorFechaAsistencia.length > 0) {
                cantidadMaximaDeAsistencia++;
                if (document.getElementById("asistenciaNoDisponibleEnLaTabla")) {
                    document.getElementById("asistenciaNoDisponibleEnLaTabla").remove();
                }
                document.getElementById("registroAsistencia").innerHTML +=
                    '<tr role="row" class="odd">' +
                    '<td class="tabla-contador-asistencia">' + cantidadMaximaDeAsistencia + '</td>' +
                    '<td class="tabla-asistencia-asistencia">' + valorAsistencia + '</td>' +
                    '<td class="tabla-estado-fecha-asistencia-asistencia">' + valorFechaAsistencia + '</td>' +
                    '<td class="tabla-accion-asistencia">' +
                    '<button onclick="habilitarBotonConfirmarAsistencia(this)" type="button" class="btn btn-danger mr-1"><i class="fas fa-trash-alt"></i></button>' +
                    '<button onclick="eliminarFilaAsistencia(this)" style="display: none;" type="button" class="btn btn-danger boton-confirmar-articulo mr-1">Confirmar</button>' +
                    '</td>' +
                    '</tr>';

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

                $('#asistencia').selectpicker('val', "");
                document.getElementById("valicacionCampoAsistencia").innerHTML = "";
                document.getElementById("asistencia").classList.remove('input-success-icon');
                document.getElementById("asistencia").classList.remove('input-error-icon');
                document.getElementById("valicacionCampoAsistencia").style.display = "none";
            } else {
                if (valorFechaAsistencia.length > 0) {
                    document.getElementById("fechaAsistencia").setAttribute("class", "form-control is-valid");
                    document.getElementById("valicacioFechaAsistencia").innerHTML = "";
                } else {
                    document.getElementById("fechaAsistencia").setAttribute("class", "form-control is-invalid");
                    document.getElementById("valicacioFechaAsistencia").innerHTML = "El campo fecha de la asistencia es obligatorio";
                }

                if (valorAsistencia.length > 0) {
                    document.getElementById("asistencia").classList.remove('input-error-icon');
                    document.getElementById("asistencia").classList.add('input-success-icon');
                    document.getElementById("valicacionCampoAsistencia").innerHTML = "";
                    document.getElementById("valicacionCampoAsistencia").style.display = "none";
                } else {
                    document.getElementById("asistencia").classList.remove('input-success-icon');
                    document.getElementById("asistencia").classList.add('input-error-icon');
                    document.getElementById("valicacionCampoAsistencia").innerHTML = "El campo el postulante asistio es obligatorio";
                    document.getElementById("valicacionCampoAsistencia").style.display = "block";
                }
            }
        }

        function deshabilitarBotonesConfirmarEliminacionAsistencia() {
            let botones = document.querySelectorAll(".boton-confirmar-articulo");
            botones.forEach(elemento => {
                elemento.style.display = 'none';
            });
        }

        function habilitarBotonConfirmarAsistencia(boton) {
            if (boton.nextElementSibling.style.display == 'none') {
                deshabilitarBotonesConfirmarEliminacionAsistencia();
                boton.nextElementSibling.style.display = 'inline-block';
            } else {
                if (boton.nextElementSibling.style.display == 'inline-block') {
                    deshabilitarBotonesConfirmarEliminacionAsistencia();
                }
            }
        }

        function eliminarFilaAsistencia(boton) {
            let elementoFila = boton.parentElement.parentElement;
            elementoFila.remove();
            cantidadMaximaDeAsistencia = 0;
            let filas = document.getElementById('tabla-asistencia').tBodies[0].querySelectorAll("tr");
            if (filas.length > 0) {
                filas.forEach(elemento => {
                    cantidadMaximaDeAsistencia++;
                    elemento.querySelector(".tabla-contador-asistencia").innerHTML = cantidadMaximaDeAsistencia;
                });
            } else {
                document.getElementById("registroAsistencia").innerHTML =
                    '<tr id="asistenciaNoDisponibleEnLaTabla">' +
                    '<td colspan="4" class="text-center">No hay asistencia disponibles en la tabla</td>' +
                    '</tr>';
            }
        }
    </script>

    <script>
        function limpiarCampos() {
            document.getElementById("valicacionCampoInstitucion").innerHTML = "";
            document.getElementById("institucion").classList.remove('input-success-icon');
            document.getElementById("institucion").classList.remove('input-error-icon');
            document.getElementById("valicacionCampoInstitucion").style.display = "none";

            if (document.getElementById("fechaCoordinacion")) {
                document.getElementById("fechaCoordinacion").value = "";
                document.getElementById("valicacionCampofechaCoordinacion").innerHTML = "";
                document.getElementById("fechaCoordinacion").setAttribute("class", "form-control");
            }

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

            document.getElementById("valicacionCampoEstado").innerHTML = "";
            document.getElementById("estado").classList.remove('input-success-icon');
            document.getElementById("estado").classList.remove('input-error-icon');
            document.getElementById("valicacionCampoEstado").style.display = "none";
        }

        function registrarDocumentoRequerido(documento, postulante, idDocumento, idPostulante, idCarpeta) {
            let institucion = document.getElementById("institucion").value.trim();
            let estado = document.getElementById("estado").value.trim();
            let motivo = document.getElementById("motivoEstado").value.trim();
            let campoMotivoHabilitado = false;
            if (estado == "Rechazado" || estado == "Apto c/observaciones") {
                campoMotivoHabilitado = true;
            }

            if (campoMotivoHabilitado == true) {
                if (motivo.length > 0) {
                    document.getElementById("botonDeCreacion").setAttribute("disabled", true);
                    var datosFormulario = $("#formularioDeDocumentoRequerido").serialize();
                    generarLoading('{{ asset('img/logo.png') }}')
                    var url = '{{ route('documento-postulante.store', [':idCarpeta', ':idDocumento']) }}';
                    url = url.replace(':idCarpeta', idCarpeta);
                    url = url.replace(':idDocumento', idDocumento);

                    let listadoDeAsistencia = [];
                    if (document.getElementById('tabla-asistencia')) {
                        let filasAsistencias = document.getElementById('tabla-asistencia').tBodies[0].querySelectorAll("tr");
                        filasAsistencias.forEach(filaAsistencia => {
                            if (filaAsistencia.querySelector(".tabla-contador-asistencia")) {
                                let asistencia = filaAsistencia.querySelector(".tabla-asistencia-asistencia").innerHTML.trim();
                                let fechaAsistencia = filaAsistencia.querySelector(".tabla-estado-fecha-asistencia-asistencia").innerHTML.trim();

                                let objectoAsistencia = {
                                    asistencia: asistencia,
                                    fechaAsistencia: fechaAsistencia
                                };
                                listadoDeAsistencia.push(objectoAsistencia);
                            }
                        });
                    }

                    let formData = new FormData();
                    formData.append('institucion', document.getElementById("institucion").value);
                    if (document.getElementById("fechaCoordinacion")) {
                        formData.append('fecha_coordinacion', document.getElementById("fechaCoordinacion").value);
                    }
                    formData.append('fecha_vencimiento', document.getElementById("fechaVencimiento").value);
                    formData.append('estado', document.getElementById("estado").value);
                    formData.append('institucion', document.getElementById("institucion").value);
                    formData.append('motivo', motivo);
                    formData.append('asistencias', JSON.stringify(listadoDeAsistencia));
                    let totalDeArchivos = document.getElementsByClassName("form-control-file").length;
                    let archivosPostulantes = document.getElementsByClassName("form-control-file");
                    let asignacionDeIdArchivo = 0;
                    for (let i = 0; i < totalDeArchivos; i++) {
                        if (archivosPostulantes[i].files.length > 0) {
                            asignacionDeIdArchivo++;
                            formData.append('archivos' + i, archivosPostulantes[i].files[0]);
                        }
                    }
                    formData.append('totalDeArchivos', asignacionDeIdArchivo);
                    let csrf = '{{ csrf_token() }}';

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

                            Swal.fire({
                                icon: 'success',
                                title: '¡Editado!',
                                text: 'El Documento Requerido ' + documento + ' del postulante ' + postulante + ' se edito con éxito',
                                confirmButtonColor: "#448aff",
                                confirmButtonText: "Confirmar"
                            }).then((result) => {
                                document.getElementById("botonVolver").click();
                            }).catch((error) => {
                                document.getElementById("botonVolver").click();
                            });

                            document.getElementById("botonDeCreacion").removeAttribute("disabled");
                            eliminarLoading()

                        },
                        error: function(data) {
                            console.log(data)
                            document.getElementById("botonDeCreacion").removeAttribute("disabled");
                            eliminarLoading()
                        }
                    })
                } else {
                    document.getElementById("institucion").classList.remove('input-error-icon');
                    document.getElementById("institucion").classList.add('input-success-icon');
                    document.getElementById("valicacionCampoInstitucion").innerHTML = "";
                    document.getElementById("valicacionCampoInstitucion").style.display = "none";

                    document.getElementById("motivoEstado").setAttribute("class", "form-control is-invalid");
                    document.getElementById("valicacionCampoMotivoEstado").innerHTML = "El campo motivo es obligatorio";
                }
            } else {
                document.getElementById("botonDeCreacion").setAttribute("disabled", true);
                var datosFormulario = $("#formularioDeDocumentoRequerido").serialize();
                generarLoading('{{ asset('img/logo.png') }}')
                var url = '{{ route('documento-postulante.store', [':idPostulante', ':idDocumento']) }}';
                url = url.replace(':idPostulante', idPostulante);
                url = url.replace(':idDocumento', idDocumento);

                let listadoDeAsistencia = [];
                if (document.getElementById('tabla-asistencia')) {
                    let filasAsistencias = document.getElementById('tabla-asistencia').tBodies[0].querySelectorAll("tr");
                    filasAsistencias.forEach(filaAsistencia => {
                        if (filaAsistencia.querySelector(".tabla-contador-asistencia")) {
                            let asistencia = filaAsistencia.querySelector(".tabla-asistencia-asistencia").innerHTML.trim();
                            let fechaAsistencia = filaAsistencia.querySelector(".tabla-estado-fecha-asistencia-asistencia").innerHTML.trim();

                            let objectoAsistencia = {
                                asistencia: asistencia,
                                fechaAsistencia: fechaAsistencia
                            };
                            listadoDeAsistencia.push(objectoAsistencia);
                        }
                    });
                }

                let formData = new FormData();
                formData.append('institucion', document.getElementById("institucion").value);
                if (document.getElementById("fechaCoordinacion")) {
                    formData.append('fecha_coordinacion', document.getElementById("fechaCoordinacion").value);
                }
                formData.append('fecha_vencimiento', document.getElementById("fechaVencimiento").value);
                formData.append('estado', document.getElementById("estado").value);
                formData.append('institucion', document.getElementById("institucion").value);
                formData.append('asistencias', JSON.stringify(listadoDeAsistencia));
                let totalDeArchivos = document.getElementsByClassName("form-control-file").length;
                let archivosPostulantes = document.getElementsByClassName("form-control-file");
                let asignacionDeIdArchivo = 0;
                for (let i = 0; i < totalDeArchivos; i++) {
                    if (archivosPostulantes[i].files.length > 0) {
                        asignacionDeIdArchivo++;
                        formData.append('archivos' + i, archivosPostulantes[i].files[0]);
                    }
                }
                formData.append('totalDeArchivos', asignacionDeIdArchivo);
                let csrf = '{{ csrf_token() }}';

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

                        Swal.fire({
                            icon: 'success',
                            title: '¡Editado!',
                            text: 'El Documento Requerido ' + documento + ' del postulante ' + postulante + ' se edito con éxito',
                            confirmButtonColor: "#448aff",
                            confirmButtonText: "Confirmar"
                        }).then((result) => {
                            document.getElementById("botonVolver").click();
                        }).catch((error) => {
                            document.getElementById("botonVolver").click();
                        });

                        document.getElementById("botonDeCreacion").removeAttribute("disabled");
                        eliminarLoading()

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