@extends('adminlte::page')

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

@section('title', 'Intranet | Subir Coordinación de Examen')

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

    </div>
@stop

@section('content')
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card card-primary card-tabs">
                <div class="card-header p-0 pt-1">
                    <ul class="nav nav-tabs" id="custom-tabs-one-tab" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="custom-tabs-one-home-tab" data-toggle="pill" href="#custom-tabs-one-home" role="tab" aria-controls="custom-tabs-one-home" aria-selected="true">Datos Generales</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="custom-tabs-one-profile-tab" data-toggle="pill" href="#custom-tabs-one-profile" role="tab" aria-controls="custom-tabs-one-profile" aria-selected="false">Archivos</a>
                        </li>
                    </ul>
                </div>

                <form id="formularioDeSolicitudDeContratacion">
                    @csrf
                    <div class="card-body">
                        <div class="tab-content" id="custom-tabs-one-tabContent">
                            <div class="tab-pane fade show active" id="custom-tabs-one-home" role="tabpanel" aria-labelledby="custom-tabs-one-home-tab">
                                <div class="contenedorDosCamposPorFilaEnLosFormulario">
                                    <div class="form-group">
                                        <label>Correlativo</label>
                                        <input type="text" id="campoCorrelativoDeLaSolicitud" class="form-control" name="correlativo" value="{{ old('correlativo',$solicitud->correlativo) }}" readonly="true">
                                    </div>
                                    
                                    <div class="form-group">
                                        <label>Nombre del Trabajador</label>
                                        <input type="text" id="campoNombreDelTrabajadorDeLaSolicitud" class="form-control" name="nombre" value="{{ old('nombre',$solicitud->nombre_trabajador) }}" readonly="true">
                                    </div>
        
                                    <div class="form-group">
                                        <label>Rut del Trabajador</label>
                                        <input type="text" id="campoRutDelTrabajadorDeLaSolicitud" class="form-control" name="rut" value="{{ old('rut',$solicitud->rut_trabajador) }}" readonly="true">
                                    </div>
        
                                    <div class="form-group">
                                        <label>Centro de Costo del Trabajador</label>
                                        <input type="text" id="campoCentroDeCostoDelTrabajadorDeLaSolicitud" class="form-control" name="centro_costo" value="{{ old('centro_costo',$solicitud->centroDeCosto->centro_costo) }}" readonly="true">
                                    </div>
        
                                    <div class="form-group">
                                        <label>Cargo del Trabajador</label>
                                        <input type="text" id="campoCargoDelTrabajadorDeLaSolicitud" class="form-control" name="cargo" value="{{ old('cargo',$solicitud->cargo_trabajador) }}" readonly="true">
                                    </div>
        
                                    <div class="form-group">
                                        <label>Fecha de Nacimiento del Trabajador</label>
                                        <input type="text" id="campoFechaDeNacimientoDelTrabajadorDeLaSolicitud" class="form-control" name="fecha_nacimiento" value="{{ old('fecha_nacimiento',$solicitud->fecha_nacimiento_trabajador) }}" readonly="true">
                                    </div>
        
                                    <div class="form-group">
                                        <label>Telefono del Trabajador</label>
                                        <input type="text" id="campoTelefonoDelTrabajadorDeLaSolicitud" class="form-control" name="telefono" value="{{ old('telefono',$solicitud->telefono_trabajador) }}" readonly="true">
                                    </div>

                                    <div class="form-group">
                                        <label>Correo Personal del Trabajador</label>
                                        <input type="text" id="campoCorreoPersonalDelTrabajadorDeLaSolicitud" class="form-control" name="correo_personal" value="{{ old('correo_personal',$solicitud->correo_personal_trabajador) }}" readonly="true">
                                    </div>

                                    <div class="form-group">
                                        <label>Dirección del Trabajador</label>
                                        <input type="text" id="campoDireccionDelTrabajador" class="form-control" name="direccion_trabajador" value="{{ old('direccion_trabajador',$solicitud->direccion_trabajador) }}" readonly="true">
                                    </div>
        
                                    <div class="form-group">
                                        <label>Estado</label>
                                        <input type="text" id="campoEstadoDeLaSolicitud" class="form-control" name="estado" value="{{ old('estado',$solicitud->estado) }}" readonly="true">
                                    </div>
                                </div>

                                <div class="dt-responsive table-responsive">
                                    <table class="table table-striped table-bordered" role="grid" aria-describedby="base-style_info" id="tabla-coordinacion-examenes">
                                        <thead>
                                            <tr role="row">
                                                <th>#</th>
                                                <th>Faena</th>
                                                <th>Examen/Inducción de Trabajo</th>
                                                <th>Tipo de Examen/Inducción de Trabajo</th>
                                                <th>Batería de Examen</th>
                                                <th>Fecha Vencimiento Examen Actual</th>
                                                <th>Entidad Realizadora de Examen</th>
                                                <th>1 ° Opcion Fecha de Programación</th>
                                                <th>2 ° Opcion Fecha de Programación</th>
                                                <th>Ciudad Programada</th>
                                            </tr>
                                        </thead>
                                        <tbody id="registroDeSubExamenesDeTrabajadores">
                                            <tr role="row" class="odd">
                                                <td>1</td>
                                                <td>{{$coordinacionDeExamen->faena->faena}}</td>
                                                <td>{{$coordinacionDeExamen->examenDeTrabajo->examen}}</td>
                                                <td>{{$coordinacionDeExamen->tipo_examen}}</td>
                                                <td>{{$coordinacionDeExamen->SubExamenDeTrabajo->subexamen}}</td>
                                                <td>{{$coordinacionDeExamen->fecha_vencimiento}}</td>
                                                <td>{{$coordinacionDeExamen->entidad_realizadora}}</td>
                                                <td>{{fechaConFormatoDeChile($coordinacionDeExamen->primera_opcion_fecha_programada)}}</td>
                                                <td>{{fechaConFormatoDeChile($coordinacionDeExamen->segunda_opcion_fecha_programada)}}</td>
                                                <td>{{$coordinacionDeExamen->ciudad_programada}}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                            <div class="tab-pane fade" id="custom-tabs-one-profile" role="tabpanel" aria-labelledby="custom-tabs-one-profile-tab">
                                <div class="form-group">
                                    <label>Se coordinó en la 1º o 2º opción de fecha de programación</label>
                                    <select class="form-control listaDespegableConBuscador" id="campoSeCoordinoEnLasFechaDeLaCoordinacionDeExamen" name="utilizacion_fecha_tentativa" data-live-search="true" onchange="cambiarLabelDelCampoDeObserbacion(this)">
                                        <option value="">--Se coordinó en la 1º o 2º opción de fecha de programación--</option>
                                        <option value="Si">Si</option>
                                        <option value="No">No</option>
                                    </select>
                                    <div class="invalid-feedback" id="validacionCampoSeCoordinoEnLasFechaDeLaCoordinacionDeExamen">
    
                                    </div>
                                </div>

                                <div class="form-group" id="contenedorDeSeleccionDeFechaDeCoordinacion"style="display:none;">
                                    <label>Fecha de Coordinación</label>
                                    <select class="form-control listaDespegableConBuscador" id="campoFechaDeCoordinacionSeleccionableDeLaCoordinacionDeExamen" name="fecha_coordinacion_seleccionable" data-live-search="true">
                                        <option value="">--Fecha de Coordinación--</option>
                                        <option value="{{$coordinacionDeExamen->primera_opcion_fecha_programada}}">{{fechaConFormatoDeChile($coordinacionDeExamen->primera_opcion_fecha_programada)}}</option>
                                        <option value="{{$coordinacionDeExamen->segunda_opcion_fecha_programada}}">{{fechaConFormatoDeChile($coordinacionDeExamen->segunda_opcion_fecha_programada)}}</option>
                                    </select>
                                    <div class="invalid-feedback" id="validacionCampoFechaDeCoordinacionSeleccionableDeLaCoordinacionDeExamen">
    
                                    </div>
                                </div>

                                <div class="form-group" id="contenedorDeFechaDeCoordinacion" style="display:none;">
                                    <label for="campoFechaDeCoordinacionDeLaCoordinacionDeExamen">Fecha de Coordinación</label>
                                    <input type="date" class="form-control" id="campoFechaDeCoordinacionDeLaCoordinacionDeExamen" name="fecha_coordinacion">
                                    <div class="invalid-feedback" id="validacionCampoFechaDeCoordinacionDeLaCoordinacionDeExamen">
        
                                    </div>
                                </div>
                                
                                <div class="form-group">
                                    <label id="labelDelCampoObservacionDeLaCoordinacionDeExamen" for="campoObservacionDeLaCoordinacionDeExamen">Observación <span style="font-weight: 700; font-size:11px;">(Opcional)</span></label>
                                    <textarea class="form-control" name="observacion" id="campoObservacionDeLaCoordinacionDeExamen" rows="3"></textarea>
                                    <div class="invalid-feedback" id="validacionCampoObservacionDeLaCoordinacionDeExamen">

                                    </div>
                                </div>

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

                                <div class="alert alert-danger" role="alert" style="display: none;" id="errorArchivos"> </div>
                                <div class="dt-responsive table-responsive">
                                    <table class="table table-striped table-bordered" role="grid" aria-describedby="base-style_info" id="tabla-archivos">
                                        <thead>
                                            <tr role="row">
                                                <th>Acción</th>
                                                <th>Archivo</th>
                                                <th>Extensión</th>
                                            </tr>
                                        </thead>
                                        <tbody id="registroDeArchivos">
                                            <tr id="archivosNoDisponibleEnLaTabla">
                                                <td colspan="3" class="text-center">No hay archivos disponibles en la tabla</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class=" card-footer">
                        <button type="button" class="btn btn-primary" id="botonDeCreacion" onclick="registrarSubidaDeCoordinacionDeExamen()"><i class="fas fa-file-upload" style="margin-right: 2px;"></i> Coordinar Examen </button>
                        <a href="{{ route('coordinacion-examen-trabajador.show-solicitud',$solicitud) }}" 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="modalVisualizarArchivo" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <form>
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header" style="background-color: #007bff; color:white;">
                    <h5 class="modal-title" id="modalTituloVisualizarArchivo"></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color:white;">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div id="modalContenidoModalVisualizarArchivo" style="text-align: center;">

                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                </div>
            </div>
        </div>
    </form>
</div>
@stop

@section('footer')
    <div class="float-right d-none d-sm-inline">
        Intranet
    </div>
    <strong>Copyright © 2021 <a href="http://guinezingenieria.cl/">GuiñezIngeniería.cl</a>.</strong>
@stop

@section('css')
    <link rel="stylesheet" href="{{ asset('css/estilo-generico.css') }}">
    <style>
        input[type=file] {
            width: 100%;
            max-width: 100%;
            color: #444;
            padding: 5px;
            background: #fff;
            border-radius: 3px;
            border: 1px solid #555;
        }
    </style>
@stop

@section('js')
    <script src="{{ asset('js/funcionalidades-genericas.js') }}"></script>
    <script>
        $('#campoSeCoordinoEnLasFechaDeLaCoordinacionDeExamen').selectpicker({
            dropupAuto: false,
        });
        $('#campoFechaDeCoordinacionSeleccionableDeLaCoordinacionDeExamen').selectpicker({
            dropupAuto: false,
        });
    </script>
    
    <script>
        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 obtenerAccionesDelArchivoGuardado(extensionDelArchivo, base64, archivo) {
            if (
                extensionDelArchivo.toLowerCase() == "png" ||
                extensionDelArchivo.toLowerCase() == "jpeg" ||
                extensionDelArchivo.toLowerCase() == "gif" ||
                extensionDelArchivo.toLowerCase() == "jpg" ||
                extensionDelArchivo.toLowerCase() == "bmp"
            ) {
                accionesDelArchivo =
                    '<a class="dropdown-item" href="#" onclick="visualizarUnArchivoAntesDeRegistrarloEnLaBaseDeDatos(\'' + base64 + '\',\'' + extensionDelArchivo + '\',\'' + archivo.files[0].name + '\')"><i class="fas fa-eye" aria-hidden="true"></i> Visualizar Archivo</a>' +
                    '<a class="dropdown-item" href="#" onclick="eliminarArchivo(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
            } else if (
                extensionDelArchivo.toLowerCase() == "mp3" ||
                extensionDelArchivo.toLowerCase() == "wav" ||
                extensionDelArchivo.toLowerCase() == "wma" ||
                extensionDelArchivo.toLowerCase() == "ogg"
            ) {
                accionesDelArchivo = '<a class="dropdown-item" href="#" onclick="eliminarArchivo(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
            } else if (
                extensionDelArchivo.toLowerCase() == "zip" ||
                extensionDelArchivo.toLowerCase() == "rar" ||
                extensionDelArchivo.toLowerCase() == "tgz" ||
                extensionDelArchivo.toLowerCase() == "tar"
            ) {
                accionesDelArchivo = '<a class="dropdown-item" href="#" onclick="eliminarArchivo(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
            } else if (extensionDelArchivo.toLowerCase() == "pdf") {
                accionesDelArchivo =
                    '<a class="dropdown-item" href="#" onclick="visualizarUnArchivoAntesDeRegistrarloEnLaBaseDeDatos(\'' + base64 + '\',\'' + extensionDelArchivo + '\',\'' + archivo.files[0].name + '\')"><i class="fas fa-eye" aria-hidden="true"></i> Visualizar Archivo</a>' +
                    '<a class="dropdown-item" href="#" onclick="eliminarArchivo(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
            } else if (
                extensionDelArchivo.toLowerCase() == "xlsx" ||
                extensionDelArchivo.toLowerCase() == "xls"
            ) {
                accionesDelArchivo = '<a class="dropdown-item" href="#" onclick="eliminarArchivo(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
            } else if (
                extensionDelArchivo.toLowerCase() == "pptx" ||
                extensionDelArchivo.toLowerCase() == "ppt"
            ) {
                accionesDelArchivo = '<a class="dropdown-item" href="#" onclick="eliminarArchivo(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
            } else if (
                extensionDelArchivo.toLowerCase() == "docx" ||
                extensionDelArchivo.toLowerCase() == "doc"
            ) {
                accionesDelArchivo = '<a class="dropdown-item" href="#" onclick="eliminarArchivo(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
            } else if (extensionDelArchivo.toLowerCase() == "txt") {
                accionesDelArchivo =
                    '<a class="dropdown-item" href="#" onclick="visualizarUnArchivoAntesDeRegistrarloEnLaBaseDeDatos(\'' + base64 + '\',\'' + extensionDelArchivo + '\',\'' + archivo.files[0].name + '\')"><i class="fas fa-eye" aria-hidden="true"></i> Visualizar Archivo</a>' +
                    '<a class="dropdown-item" href="#" onclick="eliminarArchivo(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
            } else if (
                extensionDelArchivo.toLowerCase() == "mp4" ||
                extensionDelArchivo.toLowerCase() == "webm" ||
                extensionDelArchivo.toLowerCase() == "avi" ||
                extensionDelArchivo.toLowerCase() == "asf" ||
                extensionDelArchivo.toLowerCase() == "dvd" ||
                extensionDelArchivo.toLowerCase() == "m1v" ||
                extensionDelArchivo.toLowerCase() == "movie" ||
                extensionDelArchivo.toLowerCase() == "mpeg" ||
                extensionDelArchivo.toLowerCase() == "wn" ||
                extensionDelArchivo.toLowerCase() == "wmv"
            ) {
                accionesDelArchivo = '<a class="dropdown-item" href="#" onclick="eliminarArchivo(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
            } else {
                accionesDelArchivo = '<a class="dropdown-item" href="#" onclick="eliminarArchivo(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
            }
    
            return accionesDelArchivo;
        }

        function obtenerNombreDelTipoArchivo(extensionDelArchivo) {
            if (
                extensionDelArchivo.toLowerCase() == "png" ||
                extensionDelArchivo.toLowerCase() == "jpeg" ||
                extensionDelArchivo.toLowerCase() == "gif" ||
                extensionDelArchivo.toLowerCase() == "jpg" ||
                extensionDelArchivo.toLowerCase() == "bmp"
            ) {
                NombreDeLaExtensionDelArchivo = "IMAGEN";
            } else if (
                extensionDelArchivo.toLowerCase() == "mp3" ||
                extensionDelArchivo.toLowerCase() == "wav" ||
                extensionDelArchivo.toLowerCase() == "wma" ||
                extensionDelArchivo.toLowerCase() == "ogg"
            ) {
                NombreDeLaExtensionDelArchivo = "ARCHIVO DE AUDIO";
            } else if (
                extensionDelArchivo.toLowerCase() == "zip" ||
                extensionDelArchivo.toLowerCase() == "rar" ||
                extensionDelArchivo.toLowerCase() == "tgz" ||
                extensionDelArchivo.toLowerCase() == "tar"
            ) {
                NombreDeLaExtensionDelArchivo = "ARCHIVO COMPRIMIDO";
            } else if (extensionDelArchivo.toLowerCase() == "pdf") {
                NombreDeLaExtensionDelArchivo = "PDF";
            } else if (
                extensionDelArchivo.toLowerCase() == "xlsx" ||
                extensionDelArchivo.toLowerCase() == "xls"
            ) {
                NombreDeLaExtensionDelArchivo = "OFFICE EXCEL";
            } else if (
                extensionDelArchivo.toLowerCase() == "pptx" ||
                extensionDelArchivo.toLowerCase() == "ppt"
            ) {
                NombreDeLaExtensionDelArchivo = "OFFICE POWER POINT";
            } else if (
                extensionDelArchivo.toLowerCase() == "docx" ||
                extensionDelArchivo.toLowerCase() == "doc"
            ) {
                NombreDeLaExtensionDelArchivo = "OFFICE WORD";
            } else if (extensionDelArchivo.toLowerCase() == "txt") {
                NombreDeLaExtensionDelArchivo = "ARCHIVO DE TEXTO";
            } else if (
                extensionDelArchivo.toLowerCase() == "mp4" ||
                extensionDelArchivo.toLowerCase() == "webm" ||
                extensionDelArchivo.toLowerCase() == "avi" ||
                extensionDelArchivo.toLowerCase() == "asf" ||
                extensionDelArchivo.toLowerCase() == "dvd" ||
                extensionDelArchivo.toLowerCase() == "m1v" ||
                extensionDelArchivo.toLowerCase() == "movie" ||
                extensionDelArchivo.toLowerCase() == "mpeg" ||
                extensionDelArchivo.toLowerCase() == "wn" ||
                extensionDelArchivo.toLowerCase() == "wmv"
            ) {
                NombreDeLaExtensionDelArchivo = "ARCHIVO DE VIDEO";
            } else {
                NombreDeLaExtensionDelArchivo = "ARCHIVO DESCONOCIDO";
            }
        
            return NombreDeLaExtensionDelArchivo;
        }

        function GuardarArchivoAlSeleccionarlo(archivo){
            let nombreArchivo = archivo.files[0].name;
            let extensionArchivo = nombreArchivo.split('.');
            extensionArchivo = extensionArchivo[extensionArchivo.length - 1];
            let accionesDelArchivoGuardado = "";

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

            let reader = new FileReader();
            reader.readAsDataURL(archivo.files[0]);
            reader.onload = function() {
                let base64 = reader.result;
                let nombreTipoArchivo=obtenerNombreDelTipoArchivo(extensionArchivo);
                let accionesDelArchivo = obtenerAccionesDelArchivoGuardado(extensionArchivo, base64, archivo);
    
                document.getElementById("registroDeArchivos").innerHTML +=
                    '<tr>' +
                    '<td class="tabla-id-archivo" style="display:none;">' + archivo.id + '</td>' +
                    '<td>' +
                    '<div class="btn-group ">' +
                    '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">' +
                    'Acciones' +
                    '</button>' +
                    '<div class="dropdown-menu">' +
                        accionesDelArchivo +
                    '</div>' +
                    '</div>' +
                    '</td>' +
                    '<td class="tabla-nombre-archivo">' + nombreArchivo + '</td>' +
                    '<td class="tabla-extension-archivo">' + nombreTipoArchivo + '</td>' +
                    '</tr>';
    
                archivo.style.display = "none";
                archivo.classList.remove("visible");
                archivo.classList.add("oculto");
                let inputFile = document.createElement("input");
                inputFile.setAttribute("type", "file");
                inputFile.setAttribute("class", "form-control-file visible");
                inputFile.setAttribute("id", uuid());
                inputFile.setAttribute("onchange", "GuardarArchivoAlSeleccionarlo(this)");
                document.getElementById("contenedorDelSeleccionadorDeArchivo").appendChild(inputFile);
            };
            reader.onerror = function(error) {
    
            };
        }

        function visualizarUnArchivoAntesDeRegistrarloEnLaBaseDeDatos(archivo, tipo, nombreArchivo) {
            if (tipo.toLowerCase() == "png" ||
                tipo.toLowerCase() == "jpeg" ||
                tipo.toLowerCase() == "gif" ||
                tipo.toLowerCase() == "jpg" ||
                tipo.toLowerCase() == "bmp") {
                document.getElementById("modalContenidoModalVisualizarArchivo").innerHTML =
                '<img src="' + archivo + '" style="max-width: 100%;">';
            }else if(tipo == "pdf"){
                document.getElementById("modalContenidoModalVisualizarArchivo").innerHTML =
                    '<iframe src="' + archivo + '" style="width:95%; height:600px;"></iframe>';
            }else if(tipo == "txt"){
                document.getElementById("modalContenidoModalVisualizarArchivo").innerHTML =
                    '<iframe src="' + archivo + '" style="width:95%; height:600px;"></iframe>';
            }
            document.getElementById("modalTituloVisualizarArchivo").innerHTML = nombreArchivo;
            $("#modalVisualizarArchivo").modal("show");
        }
    
        function eliminarArchivo(registro, archivo) {
            document.getElementById(archivo).remove();
            registro.remove();
    
            if (document.getElementById("registroDeArchivos").innerHTML.trim().length == 0) {
                document.getElementById("registroDeArchivos").innerHTML =
                    '<tr id="archivosNoDisponibleEnLaTabla">' +
                    '<td colspan="3" class="text-center">No hay archivos disponibles en la tabla</td>' +
                    '</tr>';
            }
        }
    </script>

    <script>
        function cambiarLabelDelCampoDeObserbacion(campo){
            if(campo.value=="Si"){
                document.getElementById("labelDelCampoObservacionDeLaCoordinacionDeExamen").innerHTML=
                'Observación <span style="font-weight: 700; font-size:11px;">(Opcional)</span>';
                document.getElementById("contenedorDeSeleccionDeFechaDeCoordinacion").style.display="block";
                document.getElementById("contenedorDeFechaDeCoordinacion").style.display="none";
            }else if(campo.value=="No"){
                document.getElementById("labelDelCampoObservacionDeLaCoordinacionDeExamen").innerHTML=
                'Observación <span style="font-weight: 700; font-size:11px;">(Obligatorio)</span>';
                document.getElementById("contenedorDeSeleccionDeFechaDeCoordinacion").style.display="none";
                document.getElementById("contenedorDeFechaDeCoordinacion").style.display="block";
            }else{
                document.getElementById("labelDelCampoObservacionDeLaCoordinacionDeExamen").innerHTML=
                'Observación <span style="font-weight: 700; font-size:11px;">(Opcional)</span>';
                document.getElementById("contenedorDeSeleccionDeFechaDeCoordinacion").style.display="none";
                document.getElementById("contenedorDeFechaDeCoordinacion").style.display="none";
            }
        }

        function validarCamposDelFormularioDeSubidadDeCoordinacionDeExamen(){
            let error=false;
            let campoSeCoordinoEnLasFechaDeLaCoordinacionDeExamen = document.getElementById("campoSeCoordinoEnLasFechaDeLaCoordinacionDeExamen").value.trim();
            let campoObservacionDeLaCoordinacionDeExamen = document.getElementById("campoObservacionDeLaCoordinacionDeExamen").value.trim();
            let campoFechaDeCoordinacionSeleccionableDeLaCoordinacionDeExamen = document.getElementById("campoFechaDeCoordinacionSeleccionableDeLaCoordinacionDeExamen").value.trim();
            let campoFechaDeCoordinacionDeLaCoordinacionDeExamen = document.getElementById("campoFechaDeCoordinacionDeLaCoordinacionDeExamen").value.trim();
            if(campoSeCoordinoEnLasFechaDeLaCoordinacionDeExamen.length > 0){
                document.getElementById("campoSeCoordinoEnLasFechaDeLaCoordinacionDeExamen").classList.remove('input-error-icon');
                document.getElementById("campoSeCoordinoEnLasFechaDeLaCoordinacionDeExamen").classList.add('input-success-icon');
                document.getElementById("validacionCampoSeCoordinoEnLasFechaDeLaCoordinacionDeExamen").innerHTML = "";
                document.getElementById("validacionCampoSeCoordinoEnLasFechaDeLaCoordinacionDeExamen").style.display = "none";
            }else{
                error=true;
                document.getElementById("campoSeCoordinoEnLasFechaDeLaCoordinacionDeExamen").classList.remove('input-success-icon');
                document.getElementById("campoSeCoordinoEnLasFechaDeLaCoordinacionDeExamen").classList.add('input-error-icon');
                document.getElementById("validacionCampoSeCoordinoEnLasFechaDeLaCoordinacionDeExamen").innerHTML = "El campo se coordinó en la 1º o 2º opción de fecha de programación es obligatorio.";
                document.getElementById("validacionCampoSeCoordinoEnLasFechaDeLaCoordinacionDeExamen").style.display = "block";
            }

            if(campoSeCoordinoEnLasFechaDeLaCoordinacionDeExamen=="No"){
                if(campoObservacionDeLaCoordinacionDeExamen.length > 0){
                    document.getElementById("campoObservacionDeLaCoordinacionDeExamen").setAttribute("class", "form-control is-valid");
                    document.getElementById("validacionCampoObservacionDeLaCoordinacionDeExamen").innerHTML = "";
                }else{
                    error=true;
                    document.getElementById("campoObservacionDeLaCoordinacionDeExamen").setAttribute("class", "form-control is-invalid");
                    document.getElementById("validacionCampoObservacionDeLaCoordinacionDeExamen").innerHTML = "El campo observación es obligatorio.";
                }

                if(campoFechaDeCoordinacionDeLaCoordinacionDeExamen.length > 0){
                    let fechaActual= new Date();
                    let fechaCoordinacion= new Date(campoFechaDeCoordinacionDeLaCoordinacionDeExamen);
                    if(fechaCoordinacion >= fechaActual){
                        document.getElementById("campoFechaDeCoordinacionDeLaCoordinacionDeExamen").setAttribute("class", "form-control is-valid");
                        document.getElementById("validacionCampoFechaDeCoordinacionDeLaCoordinacionDeExamen").innerHTML = "";
                    }else{
                        error=true;
                        document.getElementById("campoFechaDeCoordinacionDeLaCoordinacionDeExamen").setAttribute("class", "form-control is-invalid");
                        document.getElementById("validacionCampoFechaDeCoordinacionDeLaCoordinacionDeExamen").innerHTML = "El campo fecha de coordinación debe ser mayor que la fecha actual.";
                    }
                }else{
                    error=true;
                    document.getElementById("campoFechaDeCoordinacionDeLaCoordinacionDeExamen").setAttribute("class", "form-control is-invalid");
                    document.getElementById("validacionCampoFechaDeCoordinacionDeLaCoordinacionDeExamen").innerHTML = "El campo fecha de coordinación es obligatorio.";
                }
            }else if(campoSeCoordinoEnLasFechaDeLaCoordinacionDeExamen=="Si"){
                document.getElementById("campoObservacionDeLaCoordinacionDeExamen").setAttribute("class", "form-control is-valid");
                document.getElementById("validacionCampoObservacionDeLaCoordinacionDeExamen").innerHTML = "";

                if(campoFechaDeCoordinacionSeleccionableDeLaCoordinacionDeExamen.length > 0){
                    document.getElementById("campoFechaDeCoordinacionSeleccionableDeLaCoordinacionDeExamen").classList.remove('input-error-icon');
                    document.getElementById("campoFechaDeCoordinacionSeleccionableDeLaCoordinacionDeExamen").classList.add('input-success-icon');
                    document.getElementById("validacionCampoFechaDeCoordinacionSeleccionableDeLaCoordinacionDeExamen").innerHTML = "";
                    document.getElementById("validacionCampoFechaDeCoordinacionSeleccionableDeLaCoordinacionDeExamen").style.display = "none";
                }else{
                    error=true;
                    document.getElementById("campoFechaDeCoordinacionSeleccionableDeLaCoordinacionDeExamen").classList.remove('input-success-icon');
                    document.getElementById("campoFechaDeCoordinacionSeleccionableDeLaCoordinacionDeExamen").classList.add('input-error-icon');
                    document.getElementById("validacionCampoFechaDeCoordinacionSeleccionableDeLaCoordinacionDeExamen").innerHTML = "El campo fecha de coordinación es obligatorio.";
                    document.getElementById("validacionCampoFechaDeCoordinacionSeleccionableDeLaCoordinacionDeExamen").style.display = "block";
                }
            }else{
                document.getElementById("campoObservacionDeLaCoordinacionDeExamen").setAttribute("class", "form-control is-valid");
                document.getElementById("validacionCampoObservacionDeLaCoordinacionDeExamen").innerHTML = "";
            }

            let existeArchivos=false;
            let filasArchivos = document.getElementById('tabla-archivos').tBodies[0].querySelectorAll("tr");
            filasArchivos.forEach(elemento => {
                if (elemento.querySelector(".tabla-nombre-archivo")) {
                    existeArchivos=true;
                }            
            });

            if(existeArchivos==false){
                error=true;
                document.getElementById("errorArchivos").innerHTML="Debe adjuntar al menos un archivo para guardar la subida de la coordinación.";
                document.getElementById("errorArchivos").style.display="block";
            }else{
                document.getElementById("errorArchivos").innerHTML="";
                document.getElementById("errorArchivos").style.display="none";
            }
            return error;
        }

        function registrarSubidaDeCoordinacionDeExamen(){
            document.getElementById("botonDeCreacion").setAttribute("disabled", true);
            let error=validarCamposDelFormularioDeSubidadDeCoordinacionDeExamen();
            if(error==false){
                generarLoading('{{ asset('img/logo.png') }}')
                let filasArchivos = document.getElementById('tabla-archivos').tBodies[0].querySelectorAll("tr");
                let listadoDeArchivos = [];
                filasArchivos.forEach(fila=> {
                    if (fila.querySelector(".tabla-id-archivo")) {
                        let idDelArchivo= fila.querySelector(".tabla-id-archivo").innerHTML.trim();
                        let nombreDelArchivo = fila.querySelector(".tabla-nombre-archivo").innerHTML.trim();
                        let extensionDelArchivo = fila.querySelector(".tabla-extension-archivo").innerHTML.trim();
    
                        let archivo= {
                            idDelArchivo: idDelArchivo,
                            nombreDelArchivo: nombreDelArchivo,
                            extensionDelArchivo: extensionDelArchivo
                        };
                        listadoDeArchivos.push(archivo);
                    }
                });
                listadoDeArchivos = JSON.stringify(listadoDeArchivos);

                let formData = new FormData();
                formData.append('utilizacion_fecha_tentativa', document.getElementById("campoSeCoordinoEnLasFechaDeLaCoordinacionDeExamen").value.trim());
                formData.append('observacion', document.getElementById("campoObservacionDeLaCoordinacionDeExamen").value.trim());
                formData.append('fecha_coordinacion_seleccionable', document.getElementById("campoFechaDeCoordinacionSeleccionableDeLaCoordinacionDeExamen").value.trim());
                formData.append('fecha_coordinacion', document.getElementById("campoFechaDeCoordinacionDeLaCoordinacionDeExamen").value.trim());
                formData.append('listado_archivos', listadoDeArchivos);
                let totalDeArchivos = document.getElementsByClassName("form-control-file").length;
                let archivos = document.getElementsByClassName("form-control-file");
                let asignacionDeIdArchivo = 0;
                for (let i = 0; i < totalDeArchivos; i++) {
                    if (archivos[i].files.length > 0) {
                        asignacionDeIdArchivo++;
                        formData.append(archivos[i].id, archivos[i].files[0]);
                    }
                }
                formData.append('totalDeArchivos', asignacionDeIdArchivo);
                let csrf = '{{ csrf_token() }}';

                $.ajax({
                    url: '{{ route('coordinacion-examen-trabajador.store-subida-coordinacion',$coordinacionDeExamen) }}',
                    method: 'POST',
                    data: formData,
                    contentType: false,
                    processData: false,
                    dataType: 'json',
                    headers: {
                        'X-CSRF-TOKEN': csrf
                    },
                    success: function(data) {
                        Swal.fire({
                            icon: 'success',
                            title: '¡Subida de Coordinación!',
                            text: 'Subida de coordinación 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{
                Swal.fire({
                    icon: 'error',
                    title: '¡Errores en el Formulario!',
                    text: 'Revise los campos del formulario. Hay campos incompletos o que no cumple con los requisitos establecidos. Asegurase de completar todos los campos obligatorios y de corregir cualquier error señalado.',
                    confirmButtonColor: "#448aff",
                    confirmButtonText: "Confirmar"
                })
                document.getElementById("botonDeCreacion").removeAttribute("disabled");
            }
        }
    </script>
@stop