@extends('adminlte::page')

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

@section('title', 'Carga para Ubicación de Coordenadas en Terreno para Mediciones de Calicatas | Guiñez Ingeniería')

@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-12">

                <div class="card card-aspen">
                    <div class="card-header">
                        <h3 class="card-title">Carga para Ubicación de Coordenadas en Terreno para Mediciones de Calicatas</h3>
                    </div>

                    <form id="formularioDeCargarItemsTerreno" method="POST" action="">
                        @csrf
                        @method('put')

                        <div class="card-body">
                            <div class="text-center">
                                <h3 style="font-weight: 700;">Carga para Ubicación de Coordenadas en Terreno para Mediciones De Pilas</h3>
                            </div>

                            <div class="contenedor-dos-campos-por-fila">
                                <div class="form-group">
                                    <label>Número de Orden de Trabajo</label>
                                    <input type="text" class="form-control" value="{{ $ordenDeTrabajo->numero_orden_trabajo }}" disabled="true">
                                </div>

                                <div class="form-group">
                                    <label>Servicio</label>
                                    <input type="text" class="form-control" value="{{ $ordenDeTrabajo->servicio->nombre }}" disabled="true">
                                </div>

                                <div class="form-group">
                                    <label>Tipo de Pozo</label>
                                    <input type="text" class="form-control" class="form-control" name="tipo_servicio" value="{{ $ordenDeTrabajo->tipo_servicio }}"  disabled="true">
                                </div>

                                <div class="form-group">
                                    <label>Equipo de Medición</label>
                                    <select class="form-control lista-despegable-con-buscador" id="campoEquipoDeMedicion" name="equipo_medicion" data-live-search="true">
                                        <option value="">--Seleccionar Equipo de Medición--</option>
                                        @foreach ($equiposDeMediciones as $equipo)
                                            @if (old('equipo_medicion') == $equipo->id)
                                                <option selected value="{{ $equipo->id }}">{{ $equipo->nombre }}</option>
                                            @else
                                                <option value="{{ $equipo->id }}">{{ $equipo->nombre }}</option>
                                            @endif
                                        @endforeach
                                    </select>
                                    <div class="invalid-feedback" id="validacionCampoEquipoDeMedicion">

                                    </div>
                                </div>

                                <div class="form-group">
                                    <label>Sistema de Proyección</label>
                                    <input type="text" class="form-control" value="{{ $ordenDeTrabajo->sistema_proyeccion }}" readonly="true">
                                </div>

                                <div class="form-group">
                                    <label>Conversión a</label>
                                    <input type="text" class="form-control" value="{{ $ordenDeTrabajo->sistema_proyeccion_visualización }}" readonly="true">
                                </div>
                            </div>

                            <div class="form-group" id="contenedorDeLosCamposDeTipoArchivo">
                                <label>Seleccionar Archivos</label>
                                <input type="file" class="form-control-file" id="campoPuntoIngresadoDeLaOrdenDeLaOrdenDeTrabajo" accept=".csv" name="punto_ingresado">
                                <div class="invalid-feedback" id="validacionCampoPuntoIngresadoDeLaOrdenDeLaOrdenDeTrabajo">

                                </div>
                            </div>

                            <div id="contenedorDeTablaDeitems" style="display: none;">

                                <div style="width: 100%; display: grid; grid-template-columns: 1fr 2fr; grid-column-gap: 10px;">
                                    <div class="dt-responsive table-responsive">
                                        <table class="table table-bordered" role="grid" aria-describedby="base-style_info" id="tabla-puntos-origen">
                                            <thead>
                                                <tr>
                                                    <th colspan="6" class="text-center" style="background-color: rgba(74,72,73,1) !important;">DATOS DE ORIGEN</th>
                                                </tr>
                                                <tr role="row">
                                                    <th style="background-color: rgba(74,72,73,1) !important;">Nombre del Punto</th>
                                                    <th style="background-color: rgba(74,72,73,1) !important;">Este</th>
                                                    <th style="background-color: rgba(74,72,73,1) !important;">Norte</th>
                                                    <th style="background-color: rgba(74,72,73,1) !important;">Cota</th>
                                                    <th style="background-color: rgba(74,72,73,1) !important;">No Replanteado</th>
                                                    <th style="background-color: rgba(74,72,73,1) !important;">Observación</th>
                                                </tr>
                                            </thead>
                                            <tbody id="registrosDePuntosOrigen">
                                                @foreach ($ordenDeTrabajo->puntos as $puntoOrigen)
                                                    @if (!isset($puntoOrigen->puntosEnLaEtapaDeTerreno))
                                                        @if ($puntoOrigen->estado=="Operativo")
                                                            <tr>
                                                                <td class="tabla-id-item-origen" style="display:none;">{{$puntoOrigen->id}}</td>
                                                                <td class="tabla-nombre-item-origen">{{$puntoOrigen->punto}}</td>
                                                                <td class="tabla-este-item-origen">{{$puntoOrigen->este}}</td>
                                                                <td class="tabla-norte-item-origen">{{$puntoOrigen->norte}}</td>
                                                                <td class="tabla-cota-item-origen">{{$puntoOrigen->cota}}</td>
                                                                <td class="tabla-replanteo-item-origen text-center">
                                                                    <div class="icheck-primary">
                                                                        <input class="checkbox-seleccion-item" type="checkbox" id="checkboxitem{{$puntoOrigen->id}}" value="{{$puntoOrigen->id}}" onchange="habilitarCamposDeObservacionDeOrigenDestino(this)">
                                                                        <label for="checkboxitem{{$puntoOrigen->id}}"></label>
                                                                    </div>
                                                                </td>
                                                                <td class="tabla-observacion-item-origen"></td>
                                                            </tr>
                                                        @endif
                                                    @endif
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>

                                    <div class="dt-responsive table-responsive">
                                        <table class="table table-bordered" role="grid" aria-describedby="base-style_info" id="tabla-puntos-destino">
                                            <thead>
                                                <tr>
                                                    <th colspan="13" class="text-center" style="background-color: rgba(74,72,73,1) !important;">DATOS DE DESTINO</th>
                                                </tr>
                                                <tr role="row">
                                                    @if ($ordenDeTrabajo->sistema_proyeccion=="Local")
                                                        <th style="background-color: rgba(74,72,73,1) !important;">Nombre del Punto</th>
                                                        <th style="background-color: rgba(74,72,73,1) !important;">Este Local</th>
                                                        <th style="background-color: rgba(74,72,73,1) !important;">Norte Local</th>
                                                        <th style="background-color: rgba(74,72,73,1) !important;">Cota Local</th>
                                                        <th style="background-color: rgba(74,72,73,1) !important;">Este UTM</th>
                                                        <th style="background-color: rgba(74,72,73,1) !important;">Norte UTM</th>
                                                        <th style="background-color: rgba(74,72,73,1) !important;">Cota UTM</th>
                                                        <th style="background-color: rgba(74,72,73,1) !important;">Fecha</th>
                                                        <th style="background-color: rgba(74,72,73,1) !important;">Observación</th>
                                                        <th style="background-color: rgba(74,72,73,1) !important;">Diferencia Este Local</th>
                                                        <th style="background-color: rgba(74,72,73,1) !important;">Diferencia Norte Local</th>
                                                        <th style="background-color: rgba(74,72,73,1) !important;">Diferencia Cota Local</th>
                                                        <th style="background-color: rgba(74,72,73,1) !important;">Observación Tolerancia</th>
                                                    @elseif($ordenDeTrabajo->sistema_proyeccion=="UTM")
                                                        <th style="background-color: rgba(74,72,73,1) !important;">Nombre del Punto</th>
                                                        <th style="background-color: rgba(74,72,73,1) !important;">Este UTM</th>
                                                        <th style="background-color: rgba(74,72,73,1) !important;">Norte UTM</th>
                                                        <th style="background-color: rgba(74,72,73,1) !important;">Cota UTM</th>
                                                        <th style="background-color: rgba(74,72,73,1) !important;">Este Local</th>
                                                        <th style="background-color: rgba(74,72,73,1) !important;">Norte Local</th>
                                                        <th style="background-color: rgba(74,72,73,1) !important;">Cota Local</th>
                                                        <th style="background-color: rgba(74,72,73,1) !important;">Fecha</th>
                                                        <th style="background-color: rgba(74,72,73,1) !important;">Observación</th>
                                                        <th style="background-color: rgba(74,72,73,1) !important;">Diferencia Este UTM</th>
                                                        <th style="background-color: rgba(74,72,73,1) !important;">Diferencia Norte UTM</th>
                                                        <th style="background-color: rgba(74,72,73,1) !important;">Diferencia Cota UTM</th>
                                                        <th style="background-color: rgba(74,72,73,1) !important;">Observación Tolerancia</th>
                                                    @endif
                                                </tr>
                                            </thead>
                                            <tbody id="registrosDePuntosDestino">

                                            </tbody>
                                        </table>
                                    </div>
                                </div>

                                <div style="width: 100%; display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 10px;" class="mt-4">
                                    <table class="table table-bordered" role="grid" aria-describedby="base-style_info">
                                        <thead>
                                            <tr>
                                                <th colspan="2" style="background-color: #007bff; color:white;">IDENTIFICACIÓN DE TIPOS DE OBSERVACIONES</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td style="color: #dc3545; font-weight: 700;">Error</td>
                                                <td>Las observaciones que tengan el color rojo indican los errores del punto. No será posible guardar la información de los puntos hasta corregir todos los errores.</td>
                                            </tr>
                                            <tr>
                                                <td style="color: #ffc107; font-weight: 700;">Precaución</td>
                                                <td>Las observaciones que tengan el color amarillo indican que el punto no cumple con algunos condiciones o valores, pero es posible continuar con el proceso y guardar la información.</td>
                                            </tr>
                                            <tr>
                                                <td style="color: #28a745; font-weight: 700;">Valido</td>
                                                <td>Las observaciones que tengan el color verde indican que el punto es válido y no tiene errores.  </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                            <button type="button" class="btn btn-aspen mb-2" id="botonIngresoDeItems" onclick="importarItemDeTerreno('{{$ordenDeTrabajo->sistema_proyeccion}}')"><i class="fas fa-map-marked-alt" style="margin-right: 2px;"></i> Ingresar Puntos </button>

                            <p style="color:red; margin-bottom: 2px;">Nota: Tenga en cuenta que los archivos adjuntos no serán almacenados en la plataforma. Estos solo serán utilizados para enviarlos por correo una vez completada la operación de ingreso de puntos de terreno.</p>
                            <div class="form-group" id="contenedorDelSeleccionadorDeArchivo">
                                <label>Seleccionar Archivos</label>
                                <input type="file" class="form-control-file" id="a93541" onchange="GuardarArchivoSeleccionado(this)">
                            </div>

                            <div class="dt-responsive table-responsive">
                                <table class="table table-bordered" role="grid" aria-describedby="base-style_info" id="tabla-archivos">
                                    <thead>
                                        <tr role="row">
                                            <th>Acción</th>
                                            <th>Archivo</th>
                                            <th>Tipo</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 class=" card-footer">
                            <button type="button" onclick="abrirSeleccionadorDeCorreos()" class="btn btn-aspen" id="botonGuardarInformacion"><i class="fas fa-table" style="margin-right: 2px;"></i> Guardar Información </button>
                            @if ($ordenDeTrabajo->servicio->nombre=="Sondajes")
                            <a href="{{ route('orden-trabajo.index', $ordenDeTrabajo->servicio) }}" role="button" class="btn btn-secondary"><i class="fas fa-arrow-alt-circle-left" style="margin-right: 2px;"></i> Volver</a>
                            @elseif($ordenDeTrabajo->servicio->nombre=="Pilas")
                            <a href="{{ route('orden-trabajo.index-pila', $ordenDeTrabajo->servicio) }}" role="button" class="btn btn-secondary"><i class="fas fa-arrow-alt-circle-left" style="margin-right: 2px;"></i> Volver</a>
                            @endif
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalSeleccionarDeCorreos" tabindex="-1" aria-labelledby="LabelSeleccionarDeCorreos" aria-hidden="true">
        <form id="formularioModalVerObservacionItem">
            @csrf
            <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="LabelModalSeleccionarDeCorreos">Seleccionador de Correos</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color:white;" onclick='document.getElementById("botonGuardarInformacion").removeAttribute("disabled")'>
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">

                        <div class="contenedor-dos-campos-por-fila">
                            <fieldset class="fieldset-color-aspen">
                                <legend class="titulo-fieldset-color-aspen">Para: </legend>

                                <div class="table-responsive">
                                    <table class="table table-bordered">
                                        <thead>
                                            <tr>
                                                <th>Seleccionar Todo</th>
                                                <th>Proyecto</th>
                                                <th>Seleccionar Usuario</th>
                                                <th>Nombre Usuario</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($proyectos as $proyecto)
                                                @if (count($proyecto->usuarios) > 0)
                                                    <tr>
                                                        <td class="text-center">
                                                            <div class="icheck-primary">
                                                                <input type="checkbox" id="checkboxParaTodosUsuariosProyecto{{ $proyecto->id }}" value="todos" onchange="seleccionarTodosLosUsuariosDeUnProyectoPara(this,'{{ $proyecto->id }}')">
                                                                <label for="checkboxParaTodosUsuariosProyecto{{ $proyecto->id }}"></label>
                                                            </div>
                                                        </td>
                                                        <td class="text-center">{{ $proyecto->nombre }}</td>
                                                        <td class="text-center" colspan="2" style="background-color: #4a4849; color:white; font-size: 20px;" style="background-color: #4a4849; color:white; font-size: 20px;"><i class="fas fa-eye-slash" onclick="verUsuarioDelproyectoPara(this,'{{ $proyecto->id }}')" style="cursor: pointer;"></i></td>
                                                    </tr>
                                                    @foreach ($proyecto->usuarios as $usuario)
                                                        <tr style="display: none;" class="contenedor_usuario_para_{{ $proyecto->id }}">
                                                            <td colspan="2"></td>
                                                            <td>
                                                                <div class="icheck-primary">
                                                                    <input class="checkbox-para-usuario" type="checkbox" id="checkboxParaUsuario{{ $usuario->id }}" value="{{ $usuario->id }}" name="checkbox-usuario-para[]" onchange="validarCheckBoxUsuarioPara(this,'{{ $usuario->id }}')">
                                                                    <label for="checkboxParaUsuario{{ $usuario->id }}"></label>
                                                                </div>
                                                            </td>
                                                            <td>{{ $usuario->name }}</td>
                                                        </tr>
                                                    @endforeach
                                                @endif
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </fieldset>

                            <fieldset class="fieldset-color-aspen">
                                <legend class="titulo-fieldset-color-aspen">Copias: </legend>

                                <div class="table-responsive">
                                    <table class="table table-bordered">
                                        <thead>
                                            <tr>
                                                <th>Seleccionar Todo</th>
                                                <th>Proyecto</th>
                                                <th>Seleccionar Usuario</th>
                                                <th>Nombre Usuario</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($proyectos as $proyecto)
                                                @if (count($proyecto->usuarios) > 0)
                                                    <tr>
                                                        <td class="text-center">
                                                            <div class="icheck-primary">
                                                                <input type="checkbox" id="checkboxCopiasTodosUsuariosProyecto{{ $proyecto->id }}" value="todos" onchange="seleccionarTodosLosUsuariosDeUnProyectoCopias(this,'{{ $proyecto->id }}')">
                                                                <label for="checkboxCopiasTodosUsuariosProyecto{{ $proyecto->id }}"></label>
                                                            </div>
                                                        </td>
                                                        <td class="text-center">{{ $proyecto->nombre }}</td>
                                                        <td class="text-center" colspan="2" style="background-color: #4a4849; color:white; font-size: 20px;" style="background-color: #4a4849; color:white; font-size: 20px;"><i class="fas fa-eye-slash" onclick="verUsuarioDelproyectoCopias(this,'{{ $proyecto->id }}')" style="cursor: pointer;"></i></td>
                                                    </tr>
                                                    @foreach ($proyecto->usuarios as $usuario)
                                                        <tr style="display: none;" class="contenedor_usuario_copias_{{ $proyecto->id }}">
                                                            <td colspan="2"></td>
                                                            <td>
                                                                <div class="icheck-primary">
                                                                    <input class="checkbox-copias-usuario" type="checkbox" id="checkboxCopiasUsuario{{ $usuario->id }}" value="{{ $usuario->id }}" name="checkbox-usuario-copias[]" onchange="validarCheckBoxUsuariCopias(this,'{{ $usuario->id }}')">
                                                                    <label for="checkboxCopiasUsuario{{ $usuario->id }}"></label>
                                                                </div>
                                                            </td>
                                                            <td>{{ $usuario->name }}</td>
                                                        </tr>
                                                    @endforeach
                                                @endif
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </fieldset>
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-aspen" id="botonGuardarInformacionDefinitiva" onclick="guardarInformacion()"><i class="fas fa-save" style="margin-right: 2px;"></i> Guardar Información </button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick='document.getElementById("botonGuardarInformacion").removeAttribute("disabled")'>Cerrar</button>
                    </div>
                </div>
            </div>
        </form>
    </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: #B08C1C; 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('css')
    <link rel="stylesheet" href="{{ asset('css/generico.css') }}">
    <style>
        .item-error-rojo {
            font-weight: 700;
            color: #dc3545;
        }

        .item-error-verde {
            font-weight: 700;
            color: #28a745;
        }

        .item-error-amarillo {
            font-weight: 700;
            color: #ffc107;
        }
    </style>
@stop

@section('js')
    <script>
        $('#campoEquipoDeMedicion').selectpicker({
            dropupAuto: false,
        });
    </script>

    <script>
        let columnaActiva = false;
        let tipoColumnaActiva = ""

        function setCaretPosition(ctrl, pos) {
            if (ctrl.setSelectionRange) {
                ctrl.focus();
                ctrl.setSelectionRange(pos, pos);
            } else if (ctrl.createTextRange) {
                var range = ctrl.createTextRange();
                range.collapse(true);
                range.moveEnd('character', pos);
                range.moveStart('character', pos);
                range.select();
            }

        }

        function validarCaracteresDelCampoObservacionDelItemOrigen(event, observacion) {
            if (event.key === "Enter") {
                observacion.removeAttribute("onblur");
                tipoColumnaActiva = "sin_campo";
                columnaActiva = false;
                var elementoPadre = observacion.parentElement.parentElement;
                var elementoAbuelo = observacion.parentElement.parentElement.parentElement;
                var valorObservacion = observacion.value;
                elementoPadre.innerHTML = valorObservacion;
            } else {
                return true;
            }
        }

        function desenfocarInputColumnaObservacionDelItemOrigen(observacion) {
            try {
                tipoColumnaActiva = "sin_campo";
                columnaActiva = false;
                var elementoPadre = observacion.parentElement.parentElement;
                var elementoAbuelo = observacion.parentElement.parentElement.parentElement;
                var valorObservacion = observacion.value;
                elementoPadre.innerHTML = valorObservacion;
            } catch (e) {
                console.log(e);
            }
        }

        function editarColumnaObservacionDelItemOrigen(observacion) {
            if (tipoColumnaActiva != "obervacion_origen") {
                columnaActiva = true;
                tipoColumnaActiva = "obervacion_origen";
                let valorObservacion = observacion.innerHTML;
                let campoDelFormulario =
                    '<div class="form-group">' +
                    '<input type="text" class="form-control" id="campoObservacionDelItemOrigen" value="' + valorObservacion + '"  onblur="desenfocarInputColumnaObservacionDelItemOrigen(this)" onkeypress="return validarCaracteresDelCampoObservacionDelItemOrigen(event,this)">' +
                    '</div>';
                observacion.innerHTML = campoDelFormulario;
                setCaretPosition(observacion.querySelector("input"), observacion.querySelector("input").value.length);
            }
        }

        function validarCaracteresDelCampoObservacionDelItemDestino(event, observacion) {
            if (event.key === "Enter") {
                observacion.removeAttribute("onblur");
                tipoColumnaActiva = "sin_campo";
                columnaActiva = false;
                var elementoPadre = observacion.parentElement.parentElement;
                var elementoAbuelo = observacion.parentElement.parentElement.parentElement;
                var valorObservacion = observacion.value;
                elementoPadre.innerHTML = valorObservacion;
            } else {
                return true;
            }
        }

        function desenfocarInputColumnaObservacionDelItemDestino(observacion) {
            try {
                tipoColumnaActiva = "sin_campo";
                columnaActiva = false;
                var elementoPadre = observacion.parentElement.parentElement;
                var elementoAbuelo = observacion.parentElement.parentElement.parentElement;
                var valorObservacion = observacion.value;
                elementoPadre.innerHTML = valorObservacion;
            } catch (e) {
                console.log(e);
            }
        }

        function editarColumnaObservacionDelItemDestino(observacion) {
            if (tipoColumnaActiva != "obervacion_destino") {
                columnaActiva = true;
                tipoColumnaActiva = "obervacion_destino";
                let valorObservacion = observacion.innerHTML;
                let campoDelFormulario =
                    '<div class="form-group">' +
                    '<input type="text" class="form-control" id="campoObservacionDelItemDestino" value="' + valorObservacion + '"  onblur="desenfocarInputColumnaObservacionDelItemDestino(this)" onkeypress="return validarCaracteresDelCampoObservacionDelItemDestino(event,this)">' +
                    '</div>';
                observacion.innerHTML = campoDelFormulario;
                setCaretPosition(observacion.querySelector("input"), observacion.querySelector("input").value.length);
            }
        }
    </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 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>';
            }
        }
    
        function obtenerAccionesDelArchivoGuardado(extensionDelArchivo, base64, archivo) {
            if (
                extensionDelArchivo.toLowerCase() == "png" ||
                extensionDelArchivo.toLowerCase() == "jpeg" ||
                extensionDelArchivo.toLowerCase() == "gif" ||
                extensionDelArchivo.toLowerCase() == "jpg" ||
                extensionDelArchivo.toLowerCase() == "bmp"
            ) {
                accionesDelArchivo =
                    '<a class="dropdown-item" href="#" onclick="visualizarUnArchivoAntesDeRegistrarloEnLaBaseDeDatos(\'' + base64 + '\',\'' + extensionDelArchivo + '\',\'' + archivo.files[0].name + '\')"><i class="fas fa-eye" aria-hidden="true"></i> Visualizar Archivo</a>' +
                    '<a class="dropdown-item" href="#" onclick="eliminarArchivo(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
            } else if (
                extensionDelArchivo.toLowerCase() == "mp3" ||
                extensionDelArchivo.toLowerCase() == "wav" ||
                extensionDelArchivo.toLowerCase() == "wma" ||
                extensionDelArchivo.toLowerCase() == "ogg"
            ) {
                accionesDelArchivo = '<a class="dropdown-item" href="#" onclick="eliminarArchivo(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
            } else if (
                extensionDelArchivo.toLowerCase() == "zip" ||
                extensionDelArchivo.toLowerCase() == "rar" ||
                extensionDelArchivo.toLowerCase() == "tgz" ||
                extensionDelArchivo.toLowerCase() == "tar"
            ) {
                accionesDelArchivo = '<a class="dropdown-item" href="#" onclick="eliminarArchivo(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
            } else if (extensionDelArchivo.toLowerCase() == "pdf") {
                accionesDelArchivo =
                    '<a class="dropdown-item" href="#" onclick="visualizarUnArchivoAntesDeRegistrarloEnLaBaseDeDatos(\'' + base64 + '\',\'' + extensionDelArchivo + '\',\'' + archivo.files[0].name + '\')"><i class="fas fa-eye" aria-hidden="true"></i> Visualizar Archivo</a>' +
                    '<a class="dropdown-item" href="#" onclick="eliminarArchivo(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
            } else if (
                extensionDelArchivo.toLowerCase() == "xlsx" ||
                extensionDelArchivo.toLowerCase() == "xls"
            ) {
                accionesDelArchivo = '<a class="dropdown-item" href="#" onclick="eliminarArchivo(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
            } else if (
                extensionDelArchivo.toLowerCase() == "pptx" ||
                extensionDelArchivo.toLowerCase() == "ppt"
            ) {
                accionesDelArchivo = '<a class="dropdown-item" href="#" onclick="eliminarArchivo(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
            } else if (
                extensionDelArchivo.toLowerCase() == "docx" ||
                extensionDelArchivo.toLowerCase() == "doc"
            ) {
                accionesDelArchivo = '<a class="dropdown-item" href="#" onclick="eliminarArchivo(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
            } else if (extensionDelArchivo.toLowerCase() == "txt") {
                accionesDelArchivo =
                    '<a class="dropdown-item" href="#" onclick="visualizarUnArchivoAntesDeRegistrarloEnLaBaseDeDatos(\'' + base64 + '\',\'' + extensionDelArchivo + '\',\'' + archivo.files[0].name + '\')"><i class="fas fa-eye" aria-hidden="true"></i> Visualizar Archivo</a>' +
                    '<a class="dropdown-item" href="#" onclick="eliminarArchivo(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
            } else if (
                extensionDelArchivo.toLowerCase() == "mp4" ||
                extensionDelArchivo.toLowerCase() == "webm" ||
                extensionDelArchivo.toLowerCase() == "avi" ||
                extensionDelArchivo.toLowerCase() == "asf" ||
                extensionDelArchivo.toLowerCase() == "dvd" ||
                extensionDelArchivo.toLowerCase() == "m1v" ||
                extensionDelArchivo.toLowerCase() == "movie" ||
                extensionDelArchivo.toLowerCase() == "mpeg" ||
                extensionDelArchivo.toLowerCase() == "wn" ||
                extensionDelArchivo.toLowerCase() == "wmv"
            ) {
                accionesDelArchivo = '<a class="dropdown-item" href="#" onclick="eliminarArchivo(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
            } else {
                accionesDelArchivo = '<a class="dropdown-item" href="#" onclick="eliminarArchivo(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
            }
    
            return accionesDelArchivo;
        }
    
        function obtenerNombreDelTipoArchivo(extensionDelArchivo) {
            if (
                extensionDelArchivo.toLowerCase() == "png" ||
                extensionDelArchivo.toLowerCase() == "jpeg" ||
                extensionDelArchivo.toLowerCase() == "gif" ||
                extensionDelArchivo.toLowerCase() == "jpg" ||
                extensionDelArchivo.toLowerCase() == "bmp"
            ) {
                NombreDeLaExtensionDelArchivo = "IMAGEN";
            } else if (
                extensionDelArchivo.toLowerCase() == "mp3" ||
                extensionDelArchivo.toLowerCase() == "wav" ||
                extensionDelArchivo.toLowerCase() == "wma" ||
                extensionDelArchivo.toLowerCase() == "ogg"
            ) {
                NombreDeLaExtensionDelArchivo = "ARCHIVO DE AUDIO";
            } else if (
                extensionDelArchivo.toLowerCase() == "zip" ||
                extensionDelArchivo.toLowerCase() == "rar" ||
                extensionDelArchivo.toLowerCase() == "tgz" ||
                extensionDelArchivo.toLowerCase() == "tar"
            ) {
                NombreDeLaExtensionDelArchivo = "ARCHIVO COMPRIMIDO";
            } else if (extensionDelArchivo.toLowerCase() == "pdf") {
                NombreDeLaExtensionDelArchivo = "PDF";
            } else if (
                extensionDelArchivo.toLowerCase() == "xlsx" ||
                extensionDelArchivo.toLowerCase() == "xls"
            ) {
                NombreDeLaExtensionDelArchivo = "OFFICE EXCEL";
            } else if (
                extensionDelArchivo.toLowerCase() == "pptx" ||
                extensionDelArchivo.toLowerCase() == "ppt"
            ) {
                NombreDeLaExtensionDelArchivo = "OFFICE POWER POINT";
            } else if (
                extensionDelArchivo.toLowerCase() == "docx" ||
                extensionDelArchivo.toLowerCase() == "doc"
            ) {
                NombreDeLaExtensionDelArchivo = "OFFICE WORD";
            } else if (extensionDelArchivo.toLowerCase() == "txt") {
                NombreDeLaExtensionDelArchivo = "ARCHIVO DE TEXTO";
            } else if (
                extensionDelArchivo.toLowerCase() == "mp4" ||
                extensionDelArchivo.toLowerCase() == "webm" ||
                extensionDelArchivo.toLowerCase() == "avi" ||
                extensionDelArchivo.toLowerCase() == "asf" ||
                extensionDelArchivo.toLowerCase() == "dvd" ||
                extensionDelArchivo.toLowerCase() == "m1v" ||
                extensionDelArchivo.toLowerCase() == "movie" ||
                extensionDelArchivo.toLowerCase() == "mpeg" ||
                extensionDelArchivo.toLowerCase() == "wn" ||
                extensionDelArchivo.toLowerCase() == "wmv"
            ) {
                NombreDeLaExtensionDelArchivo = "ARCHIVO DE VIDEO";
            } else {
                NombreDeLaExtensionDelArchivo = "ARCHIVO DESCONOCIDO";
            }
        
            return NombreDeLaExtensionDelArchivo;
        }
    
        function GuardarArchivoSeleccionado(archivo) {
            let idArchivo = archivo.id;
            let nombreArchivo = archivo.files[0].name;
            let extensionArchivo = nombreArchivo.split('.');
            extensionArchivo = extensionArchivo[extensionArchivo.length - 1];
            var accionesDelArchivoGuardado = "";
    
            if (document.getElementById("archivosNoDisponibleEnLaTabla")) {
                document.getElementById("archivosNoDisponibleEnLaTabla").remove();
            }
    
            let reader = new FileReader();
            reader.readAsDataURL(archivo.files[0]);
            reader.onload = function() {
                let base64 = reader.result;
                let nombreTipoArchivo=obtenerNombreDelTipoArchivo(extensionArchivo);
                let accionesDelArchivo = obtenerAccionesDelArchivoGuardado(extensionArchivo, base64, archivo);
    
                document.getElementById("registroDeArchivos").innerHTML +=
                    '<tr>' +
                    '<td style="display:none;" class="tabla-id-archivo">' + idArchivo + '</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>' + nombreArchivo + '</td>' +
                    '<td>' + nombreTipoArchivo + '</td>' +
                    '</tr>';
    
                archivo.style.display = "none";
                let inputFile = document.createElement("input");
                inputFile.setAttribute("type", "file");
                inputFile.setAttribute("class", "form-control-file");
                inputFile.setAttribute("id", uuid());
                inputFile.setAttribute("onchange", "GuardarArchivoSeleccionado(this)");
                document.getElementById("contenedorDelSeleccionadorDeArchivo").appendChild(inputFile);
    
            };
            reader.onerror = function(error) {
    
            };
    
        }
    </script>

    <script>
        function verUsuarioDelproyectoPara(icono, idProyecto) {
            icono.setAttribute("class", "fas fa-eye");
            icono.setAttribute("onclick", "ocultarUsuarioDelproyectoPara(this,'" + idProyecto + "')");
            document.querySelectorAll(".contenedor_usuario_para_" + idProyecto).forEach(elemento => {
                elemento.style.display = "table-row";
            });
        }
    
        function ocultarUsuarioDelproyectoPara(icono, idProyecto) {
            icono.setAttribute("class", "fas fa-eye-slash");
            icono.setAttribute("onclick", "verUsuarioDelproyectoPara(this,'" + idProyecto + "')");
            document.querySelectorAll(".contenedor_usuario_para_" + idProyecto).forEach(elemento => {
                elemento.style.display = "none";
            });
        }
    
        function seleccionarTodosLosUsuariosDeUnProyectoPara(checkbox, idProyecto) {
            if (checkbox.checked == true) {
                document.querySelectorAll(".contenedor_usuario_para_" + idProyecto).forEach(elemento => {
                    elemento.querySelector(".checkbox-para-usuario").checked = true;
    
                    document.querySelectorAll(".contenedor_usuario_copias_" + idProyecto).forEach(elementoCopia => {
                        if (elemento.querySelector(".checkbox-para-usuario").value == elementoCopia.querySelector(".checkbox-copias-usuario").value) {
                            elementoCopia.querySelector(".checkbox-copias-usuario").checked = false;
                        }
                    });
                });
            } else if (checkbox.checked == false) {
                document.querySelectorAll(".contenedor_usuario_para_" + idProyecto).forEach(elemento => {
                    elemento.querySelector(".checkbox-para-usuario").checked = false;
                });
            }
        }
    
        function verUsuarioDelproyectoCopias(icono, idProyecto) {
            icono.setAttribute("class", "fas fa-eye");
            icono.setAttribute("onclick", "ocultarUsuarioDelproyectoCopias(this,'" + idProyecto + "')");
            document.querySelectorAll(".contenedor_usuario_copias_" + idProyecto).forEach(elemento => {
                elemento.style.display = "table-row";
            });
        }
    
        function ocultarUsuarioDelproyectoCopias(icono, idProyecto) {
            icono.setAttribute("class", "fas fa-eye-slash");
            icono.setAttribute("onclick", "verUsuarioDelproyectoCopias(this,'" + idProyecto + "')");
            document.querySelectorAll(".contenedor_usuario_copias_" + idProyecto).forEach(elemento => {
                elemento.style.display = "none";
            });
        }
    
        function seleccionarTodosLosUsuariosDeUnProyectoCopias(checkbox, idProyecto) {
            if (checkbox.checked == true) {
                document.querySelectorAll(".contenedor_usuario_copias_" + idProyecto).forEach(elemento => {
                    elemento.querySelector(".checkbox-copias-usuario").checked = true;
    
                    document.querySelectorAll(".contenedor_usuario_para_" + idProyecto).forEach(elementoPara => {
                        if (elemento.querySelector(".checkbox-copias-usuario").value == elementoPara.querySelector(".checkbox-para-usuario").value) {
                            elementoPara.querySelector(".checkbox-para-usuario").checked = false;
                        }
                    });
                });
            } else if (checkbox.checked == false) {
                document.querySelectorAll(".contenedor_usuario_copias_" + idProyecto).forEach(elemento => {
                    elemento.querySelector(".checkbox-copias-usuario").checked = false;
                });
            }
        }
    
        function validarCheckBoxUsuarioPara(checkbox, idUsuario) {
            if (checkbox.checked == true) {
                if (document.getElementById("checkboxCopiasUsuario" + idUsuario)) {
                    document.getElementById("checkboxCopiasUsuario" + idUsuario).checked = false;
                }
            }
        }
    
        function validarCheckBoxUsuariCopias(checkbox, idUsuario) {
            if (checkbox.checked == true) {
                if (document.getElementById("checkboxParaUsuario" + idUsuario)) {
                    document.getElementById("checkboxParaUsuario" + idUsuario).checked = false;
                }
            }
        }
    </script> 

    <script>
        function reiniciarTablaDeItems(){
            //document.getElementById("registrosDePuntosOrigen").innerHTML="";
            document.getElementById("registrosDePuntosDestino").innerHTML="";
            document.getElementById("contenedorDeTablaDeitems").style.display="none";
        }

        function importarItemDeTerreno(sistemaDeProyeccion) {
            let campoArchivo = document.getElementById("campoPuntoIngresadoDeLaOrdenDeLaOrdenDeTrabajo").value;
            let valorEquipoMedicion = document.getElementById("campoEquipoDeMedicion").value.trim();
            if (campoArchivo.length > 0) {
                extension = campoArchivo.substring(campoArchivo.lastIndexOf('.'), campoArchivo.length);
                if (document.getElementById('campoPuntoIngresadoDeLaOrdenDeLaOrdenDeTrabajo').getAttribute('accept').split(',').indexOf(extension) < 0) {
                    document.getElementById("validacionCampoPuntoIngresadoDeLaOrdenDeLaOrdenDeTrabajo").style.display = "block";
                    document.getElementById("validacionCampoPuntoIngresadoDeLaOrdenDeLaOrdenDeTrabajo").innerHTML = "El campo seleccionar archivos debe ser un archivo de tipo: csv";
                } else {
                    document.getElementById("botonIngresoDeItems").setAttribute("disabled", true);
                    let formData = new FormData();
                    formData.append('punto_ingresado', document.getElementById("campoPuntoIngresadoDeLaOrdenDeLaOrdenDeTrabajo").files[0]);
                    var csrf = '{{ csrf_token() }}';

                    document.getElementById("preloader").removeAttribute("style");
                    document.getElementById("img-preloader").style.display = "block";
                    $.ajax({
                        url: '{{ route('orden-trabajo.importar-item-terreno', $ordenDeTrabajo) }}',
                        method: 'POST',
                        data: formData,
                        contentType: false,
                        processData: false,
                        dataType: 'json',
                        headers: {
                            'X-CSRF-TOKEN': csrf
                        },
                        success: function(data) {
                            if (data.error == true) {
                                if (data.tipoError == "carga vacia") {
                                    Swal.fire({
                                        icon: 'error',
                                        title: '¡Carga Vacia!',
                                        text: 'El archivo CSV esta vacío, no hay puntos con la cual trabajar.',
                                        confirmButtonColor: "#448aff",
                                        confirmButtonText: "Confirmar"
                                    })
                                    reiniciarTablaDeItems();
                                } else if (data.tipoError == "item invalido") {
                                    Swal.fire({
                                        icon: 'error',
                                        title: '¡Carga con Errores!',
                                        text: 'La carga de puntos tiene errores, verifique que la Información enviada es Correcta.',
                                        confirmButtonColor: "#448aff",
                                        confirmButtonText: "Confirmar"
                                    })
                                    reiniciarTablaDeItems();
                                } else if (data.tipoError == "item procesado") {
                                    Swal.fire({
                                        icon: 'error',
                                        title: '¡Carga con Errores!',
                                        text: 'No es posible importar la carga de datos, ya que la carga vienen con puntos que ya fueron procesados anteriormente.',
                                        confirmButtonColor: "#448aff",
                                        confirmButtonText: "Confirmar"
                                    })
                                    reiniciarTablaDeItems();
                                } else if (data.tipoError == "item con otro ot") {
                                    Swal.fire({
                                        icon: 'error',
                                        title: '¡Carga con Errores!',
                                        text: 'No es posible importar la carga de datos, hay puntos que corresponden a otras ordenes de trabajos.',
                                        confirmButtonColor: "#448aff",
                                        confirmButtonText: "Confirmar"
                                    })
                                    reiniciarTablaDeItems();
                                }
                            } else {
                                reiniciarTablaDeItems();
                                data.items.forEach(elemento => {
                                    let puntosOrigenes = document.getElementById('tabla-puntos-origen').tBodies[0].querySelectorAll("tr");
                                    if (puntosOrigenes.length > 0) {
                                        puntosOrigenes.forEach(puntoOrigen => {
                                            if(puntoOrigen.querySelector(".tabla-id-item-origen").innerHTML.trim()==elemento.item_origen.id){
                                                puntoOrigen.querySelector(".tabla-replanteo-item-origen").innerHTML="";
                                            }
                                        })
                                    }

                                    let mensajeError="";
                                    let mensajeErrorTieneInformacion=false;
                                    let cantidadError=0;

                                    if(sistemaDeProyeccion=="Local"){
                                        document.getElementById("registrosDePuntosDestino").innerHTML +=
                                        '<tr>' +
                                        '<td class="tabla-id-item-destino" style="display:none;">' + elemento.item_origen.id + '</td>' +
                                        '<td class="tabla-nombre-item-destino">' + elemento.item + '</td>' +
                                        '<td class="tabla-este-item-destino">' + elemento.este_local + '</td>' +
                                        '<td class="tabla-norte-item-destino">' + elemento.norte_local + '</td>' +
                                        '<td class="tabla-cota-item-destino">' + elemento.cota_local + '</td>' +
                                        '<td class="tabla-este-utm-item-destino">' + elemento.este_utm + '</td>' +
                                        '<td class="tabla-norte-utm-item-destino">' + elemento.norte_utm + '</td>' +
                                        '<td class="tabla-cota-utm-item-destino">' + elemento.cota_utm+ '</td>' +
                                        '<td class="tabla-fecha-item-destino">' + elemento.fecha + '</td>' +
                                        '<td class="tabla-observacion-item-destino" onclick="editarColumnaObservacionDelItemDestino(this)"></td>' +
                                        '<td class="tabla-diferencia-este-item-destino">' + elemento.diferencia_este + '</td>' +
                                        '<td class="tabla-diferencia-norte-item-destino">' + elemento.diferencia_norte + '</td>' +
                                        '<td class="tabla-diferencia-cota-item-destino">' + elemento.diferencia_cota + '</td>' +
                                        '<td class="tabla-observacion-tolerancia-item-destino item-error-amarillo">'+mensajeError+'</td>' +
                                        '</tr>';
                                    }else if(sistemaDeProyeccion=="UTM"){
                                        document.getElementById("registrosDePuntosDestino").innerHTML +=
                                        '<tr>' +
                                        '<td class="tabla-id-item-destino" style="display:none;">' + elemento.item_origen.id + '</td>' +
                                        '<td class="tabla-nombre-item-destino">' + elemento.item + '</td>' +
                                        '<td class="tabla-este-utm-item-destino">' + elemento.este_utm + '</td>' +
                                        '<td class="tabla-norte-utm-item-destino">' + elemento.norte_utm + '</td>' +
                                        '<td class="tabla-cota-utm-item-destino">' + elemento.cota_utm+ '</td>' +
                                        '<td class="tabla-este-item-destino">' + elemento.este_local + '</td>' +
                                        '<td class="tabla-norte-item-destino">' + elemento.norte_local + '</td>' +
                                        '<td class="tabla-cota-item-destino">' + elemento.cota_local + '</td>' +
                                        '<td class="tabla-fecha-item-destino">' + elemento.fecha + '</td>' +
                                        '<td class="tabla-observacion-item-destino" onclick="editarColumnaObservacionDelItemDestino(this)"></td>' +
                                        '<td class="tabla-diferencia-este-item-destino">' + elemento.diferencia_este + '</td>' +
                                        '<td class="tabla-diferencia-norte-item-destino">' + elemento.diferencia_norte + '</td>' +
                                        '<td class="tabla-diferencia-cota-item-destino">' + elemento.diferencia_cota + '</td>' +
                                        '<td class="tabla-observacion-tolerancia-item-destino item-error-amarillo">'+mensajeError+'</td>' +
                                        '</tr>';
                                    }
                                });

                                document.getElementById("contenedorDeTablaDeitems").style.display = "block";
                            }

                            document.getElementById("formularioDeCargarItemsTerreno").reset();
                            $('#campoEquipoDeMedicion').selectpicker('val', valorEquipoMedicion);
                            document.getElementById("validacionCampoPuntoIngresadoDeLaOrdenDeLaOrdenDeTrabajo").style.display = "none";
                            document.getElementById("validacionCampoPuntoIngresadoDeLaOrdenDeLaOrdenDeTrabajo").innerHTML = "";
                            document.getElementById("botonIngresoDeItems").removeAttribute("disabled");
                            document.getElementById("preloader").style.height = "0px";
                            document.getElementById("img-preloader").style.display = "none";
                        },
                        error: function(data) {
                            console.log(data)
                            reiniciarTablaDeItems();
                            Swal.fire({
                                icon: 'error',
                                title: '¡Carga Vacia O Formato Invalido!',
                                text: 'El archivo CSV esta vacío o no cumple con un formato valido',
                                confirmButtonColor: "#448aff",
                                confirmButtonText: "Confirmar"
                            })
                            document.getElementById("formularioDeCargarItemsTerreno").reset();
                            $('#campoEquipoDeMedicion').selectpicker('val', valorEquipoMedicion);
                            document.getElementById("validacionCampoPuntoIngresadoDeLaOrdenDeLaOrdenDeTrabajo").style.display = "none";
                            document.getElementById("validacionCampoPuntoIngresadoDeLaOrdenDeLaOrdenDeTrabajo").innerHTML = "";
                            document.getElementById("botonIngresoDeItems").removeAttribute("disabled");
                            document.getElementById("preloader").style.height = "0px";
                            document.getElementById("img-preloader").style.display = "none";
                        }
                    })
                }
            } else {
                if (campoArchivo.length > 0) {
                    document.getElementById("validacionCampoPuntoIngresadoDeLaOrdenDeLaOrdenDeTrabajo").style.display = "none";
                    document.getElementById("validacionCampoPuntoIngresadoDeLaOrdenDeLaOrdenDeTrabajo").innerHTML = "";
                } else {
                    document.getElementById("validacionCampoPuntoIngresadoDeLaOrdenDeLaOrdenDeTrabajo").style.display = "block";
                    document.getElementById("validacionCampoPuntoIngresadoDeLaOrdenDeLaOrdenDeTrabajo").innerHTML = "El campo seleccionar archivos es obligatorio";
                }
            }
        }

        function habilitarCamposDeObservacionDeOrigenDestino(checkbox) {
            if (checkbox.checked == true) {
                let itemsOrigen = document.getElementById('tabla-puntos-origen').tBodies[0].querySelectorAll("tr");
                itemsOrigen.forEach(itemOrigen => {
                    if (itemOrigen.querySelector(".tabla-id-item-origen").innerHTML.trim() == checkbox.value) {
                        itemOrigen.querySelector(".tabla-observacion-item-origen").innerHTML = "";
                        itemOrigen.querySelector(".tabla-observacion-item-origen").setAttribute("onclick", "editarColumnaObservacionDelItemOrigen(this)");
                    }
                });

                /*let itemsDestino = document.getElementById('tabla-puntos-destino').tBodies[0].querySelectorAll("tr");
                itemsDestino.forEach(itemDestino => {
                    if (itemDestino.querySelector(".tabla-id-item-destino").innerHTML.trim() == checkbox.value) {
                        itemDestino.querySelector(".tabla-observacion-item-destino").innerHTML = "";
                        itemDestino.querySelector(".tabla-observacion-item-destino").removeAttribute("onclick");
                    }
                });*/
            } else {
                let itemsOrigen = document.getElementById('tabla-puntos-origen').tBodies[0].querySelectorAll("tr");
                itemsOrigen.forEach(itemOrigen => {
                    if (itemOrigen.querySelector(".tabla-id-item-origen").innerHTML.trim() == checkbox.value) {
                        itemOrigen.querySelector(".tabla-observacion-item-origen").innerHTML = "";
                        itemOrigen.querySelector(".tabla-observacion-item-origen").removeAttribute("onclick");
                    }
                });

                /*let itemsDestino = document.getElementById('tabla-puntos-destino').tBodies[0].querySelectorAll("tr");
                itemsDestino.forEach(itemDestino => {
                    if (itemDestino.querySelector(".tabla-id-item-destino").innerHTML.trim() == checkbox.value) {
                        itemDestino.querySelector(".tabla-observacion-item-destino").innerHTML = "";
                        itemDestino.querySelector(".tabla-observacion-item-destino").setAttribute("onclick", "editarColumnaObservacionDelItemDestino(this)");
                    }
                });*/
            }
        }

        function abrirSeleccionadorDeCorreos(){
            document.getElementById("botonGuardarInformacion").setAttribute("disabled", true);
            document.getElementById("preloader").removeAttribute("style");
            document.getElementById("img-preloader").style.display = "block";
            let hayItemConReplanteo = false;
            let noHayobservacionEnLosItemReplanteado = false;

            if (document.getElementById("campoEquipoDeMedicion").value.trim().length > 0) {
                document.getElementById("campoEquipoDeMedicion").classList.remove('input-error-icon');
                document.getElementById("campoEquipoDeMedicion").classList.add('input-success-icon');
                document.getElementById("validacionCampoEquipoDeMedicion").innerHTML = "";
                document.getElementById("validacionCampoEquipoDeMedicion").style.display = "none";

                let listadoDeitems = [];
                let itemsOrigenes = document.getElementById('tabla-puntos-origen').tBodies[0].querySelectorAll("tr");
                let itemsDestinos = document.getElementById('tabla-puntos-destino').tBodies[0].querySelectorAll("tr");
                if (itemsOrigenes.length > 0 && itemsDestinos.length > 0) {
                    itemsOrigenes.forEach(itemOrigen => {
                        let idItem;
                        let replanteo;
                        let esteItem;
                        let norteItem;
                        let cotaItem;
                        let diferenciaEste;
                        let diferenciaNorte;
                        let diferenciaCota;
                        let observacionOrigen;
                        let observacionDestino;
                        let observacionFinal;

                        idItem = itemOrigen.querySelector(".tabla-id-item-origen").innerHTML.trim();
                        observacionOrigen = itemOrigen.querySelector(".tabla-observacion-item-origen").innerHTML.trim();
                        if(itemOrigen.querySelector(".tabla-replanteo-item-origen").innerHTML.trim()!=""){
                            let checkbox = "checkboxitem" + idItem;
                            if (document.getElementById(checkbox).checked == true) {
                                replanteo = true;
                                hayItemConReplanteo = true;
                            } else {
                                replanteo = false;
                            }
                        }

                        itemsDestinos.forEach(itemDestino => {
                            if (idItem == itemDestino.querySelector(".tabla-id-item-destino").innerHTML.trim()) {
                                esteItem = itemDestino.querySelector(".tabla-este-item-destino").innerHTML.trim();
                                norteItem = itemDestino.querySelector(".tabla-norte-item-destino").innerHTML.trim();
                                cotaItem = itemDestino.querySelector(".tabla-cota-item-destino").innerHTML.trim();
                                diferenciaEste = itemDestino.querySelector(".tabla-diferencia-este-item-destino").innerHTML.trim();
                                diferenciaNorte = itemDestino.querySelector(".tabla-diferencia-norte-item-destino").innerHTML.trim();
                                diferenciaCota = itemDestino.querySelector(".tabla-diferencia-cota-item-destino").innerHTML.trim();
                                observacionDestino = itemDestino.querySelector(".tabla-observacion-item-destino").innerHTML.trim();
                            }
                        });

                        if (replanteo == true) {
                            if (observacionOrigen.length > 0) {
                                observacionFinal = observacionOrigen;
                            } else {
                                observacionFinal = observacionOrigen;
                                noHayobservacionEnLosItemReplanteado=true;
                            }
                        } else {
                            observacionFinal = observacionDestino;
                        }

                        let objectoItem = {
                            idItem: idItem,
                            replanteo: replanteo,
                            observacionFinal: observacionFinal,
                            esteItem: esteItem,
                            norteItem: norteItem,
                            cotaItem: cotaItem,
                            diferenciaEste: diferenciaEste,
                            diferenciaNorte: diferenciaNorte,
                            diferenciaCota: diferenciaCota
                        };
                        listadoDeitems.push(objectoItem);
                    });

                    if (noHayobservacionEnLosItemReplanteado == true) {
                        Swal.fire({
                            icon: 'error',
                            title: '¡Sin Observación en Puntos No Replanteado!',
                            text: 'Los puntos no replanteado deben de tener una observación obligatoria',
                            confirmButtonColor: "#448aff",
                            confirmButtonText: "Confirmar"
                        })
                        document.getElementById("botonGuardarInformacion").removeAttribute("disabled");
                        document.getElementById("preloader").style.height = "0px";
                        document.getElementById("img-preloader").style.display = "none";
                    } else {
                        $("#modalSeleccionarDeCorreos").modal("show");
                        document.getElementById("preloader").style.height = "0px";
                        document.getElementById("img-preloader").style.display = "none";
                    }
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: '¡Carga de Puntos!',
                        text: 'Debe ingresar al menos un punto valido para guardar la información',
                        confirmButtonColor: "#448aff",
                        confirmButtonText: "Confirmar"
                    })
                    document.getElementById("botonGuardarInformacion").removeAttribute("disabled");
                    document.getElementById("preloader").style.height = "0px";
                    document.getElementById("img-preloader").style.display = "none";
                }
            } else {
                if (document.getElementById("campoEquipoDeMedicion").value.trim().length > 0) {
                    document.getElementById("campoEquipoDeMedicion").classList.remove('input-error-icon');
                    document.getElementById("campoEquipoDeMedicion").classList.add('input-success-icon');
                    document.getElementById("validacionCampoEquipoDeMedicion").innerHTML = "";
                    document.getElementById("validacionCampoEquipoDeMedicion").style.display = "none";
                } else {
                    document.getElementById("campoEquipoDeMedicion").classList.remove('input-success-icon');
                    document.getElementById("campoEquipoDeMedicion").classList.add('input-error-icon');
                    document.getElementById("validacionCampoEquipoDeMedicion").innerHTML = "El campo responsable es obligatorio.";
                    document.getElementById("validacionCampoEquipoDeMedicion").style.display = "block";
                }

                document.getElementById("botonGuardarInformacion").removeAttribute("disabled");
                    document.getElementById("preloader").style.height = "0px";
                    document.getElementById("img-preloader").style.display = "none";
            }
        }

        function guardarInformacion(){
            document.getElementById("botonGuardarInformacionDefinitiva").setAttribute("disabled", true);
            document.getElementById("preloader").removeAttribute("style");
            document.getElementById("img-preloader").style.display = "block";
            let hayItemConReplanteo = false;
            let noHayobservacionEnLosItemReplanteado = false;

            if (document.getElementById("campoEquipoDeMedicion").value.trim().length > 0) {
                document.getElementById("campoEquipoDeMedicion").classList.remove('input-error-icon');
                document.getElementById("campoEquipoDeMedicion").classList.add('input-success-icon');
                document.getElementById("validacionCampoEquipoDeMedicion").innerHTML = "";
                document.getElementById("validacionCampoEquipoDeMedicion").style.display = "none";

                let listadoDeitems = [];
                let itemsOrigenes = document.getElementById('tabla-puntos-origen').tBodies[0].querySelectorAll("tr");
                let itemsDestinos = document.getElementById('tabla-puntos-destino').tBodies[0].querySelectorAll("tr");
                if (itemsOrigenes.length > 0 && itemsDestinos.length > 0) {
                    itemsOrigenes.forEach(itemOrigen => {
                        let idItem;
                        let replanteo;
                        let esteItem;
                        let norteItem;
                        let cotaItem;
                        let esteItemUTM;
                        let norteItemUTM;
                        let cotaItemUTM;
                        let diferenciaEste;
                        let diferenciaNorte;
                        let diferenciaCota;
                        let observacionOrigen;
                        let observacionDestino;
                        let observacionFinal;
                        let existePuntoDestino=false;

                        idItem = itemOrigen.querySelector(".tabla-id-item-origen").innerHTML.trim();
                        observacionOrigen = itemOrigen.querySelector(".tabla-observacion-item-origen").innerHTML.trim();
                        if(itemOrigen.querySelector(".tabla-replanteo-item-origen").innerHTML.trim()!=""){
                            let checkbox = "checkboxitem" + idItem;
                            if (document.getElementById(checkbox).checked == true) {
                                replanteo = true;
                                hayItemConReplanteo = true;
                            } else {
                                replanteo = false;
                            }
                        }else{
                            replanteo = false;
                        }

                        itemsDestinos.forEach(itemDestino => {
                            if (idItem == itemDestino.querySelector(".tabla-id-item-destino").innerHTML.trim()) {
                                existePuntoDestino=true;
                                esteItem = itemDestino.querySelector(".tabla-este-item-destino").innerHTML.trim();
                                norteItem = itemDestino.querySelector(".tabla-norte-item-destino").innerHTML.trim();
                                cotaItem = itemDestino.querySelector(".tabla-cota-item-destino").innerHTML.trim();
                                esteItemUTM = itemDestino.querySelector(".tabla-este-utm-item-destino").innerHTML.trim();
                                norteItemUTM = itemDestino.querySelector(".tabla-norte-utm-item-destino").innerHTML.trim();
                                cotaItemUTM = itemDestino.querySelector(".tabla-cota-utm-item-destino").innerHTML.trim();
                                diferenciaEste = itemDestino.querySelector(".tabla-diferencia-este-item-destino").innerHTML.trim();
                                diferenciaNorte = itemDestino.querySelector(".tabla-diferencia-norte-item-destino").innerHTML.trim();
                                diferenciaCota = itemDestino.querySelector(".tabla-diferencia-cota-item-destino").innerHTML.trim();
                                observacionDestino = itemDestino.querySelector(".tabla-observacion-item-destino").innerHTML.trim();
                            }
                        });

                        if (replanteo == true) {
                            if (observacionOrigen.length > 0) {
                                observacionFinal = observacionOrigen;
                            } else {
                                observacionFinal = observacionOrigen;
                                noHayobservacionEnLosItemReplanteado=true;
                            }
                        } else {
                            observacionFinal = observacionDestino;
                        }

                        let objectoItem = {
                            idItem: idItem,
                            replanteo: replanteo,
                            observacionFinal: observacionFinal,
                            esteItem: esteItem,
                            norteItem: norteItem,
                            cotaItem: cotaItem,
                            esteItemUTM: esteItemUTM,
                            norteItemUTM: norteItemUTM,
                            cotaItemUTM: cotaItemUTM,
                            diferenciaEste: diferenciaEste,
                            diferenciaNorte: diferenciaNorte,
                            diferenciaCota: diferenciaCota,
                            existePuntoDestino: existePuntoDestino
                        };
                        listadoDeitems.push(objectoItem);
                    });

                    if (noHayobservacionEnLosItemReplanteado == true) {
                        Swal.fire({
                            icon: 'error',
                            title: '¡Sin Observación en Puntos No Replanteado!',
                            text: 'Los puntos no replanteado deben de tener una observación obligatoria',
                            confirmButtonColor: "#448aff",
                            confirmButtonText: "Confirmar"
                        })
                        document.getElementById("botonGuardarInformacionDefinitiva").removeAttribute("disabled");
                        document.getElementById("preloader").style.height = "0px";
                        document.getElementById("img-preloader").style.display = "none";
                    } else {
                        let listadoDeUsuarioPara = [];
                        let listadoDeUsuarioCopias = [];
                        let usuariosPara = document.querySelectorAll(".checkbox-para-usuario");
                        let usuariosCopias = document.querySelectorAll(".checkbox-copias-usuario");
    
                        usuariosPara.forEach(elemento => {
                            if (elemento.checked == true) {
                                listadoDeUsuarioPara.push(elemento.value)
                            }
                        });
    
                        usuariosCopias.forEach(elemento => {
                            if (elemento.checked == true) {
                                listadoDeUsuarioCopias.push(elemento.value)
                            }
                        });

                        if (listadoDeUsuarioPara.length > 0) {
                            let formData = new FormData();
                            formData.append('puntos_ingresados', JSON.stringify(listadoDeitems));
                            formData.append('recurso_equipo', document.getElementById("campoEquipoDeMedicion").value);
                            formData.append('replanteo', hayItemConReplanteo);
                            formData.append('listado_usuarios_para', JSON.stringify(listadoDeUsuarioPara));
                            formData.append('listado_usuarios_copias', JSON.stringify(listadoDeUsuarioCopias));
                            let totalDeArchivos = document.getElementsByClassName("form-control-file").length;
                            let archivos = document.getElementsByClassName("form-control-file");
                            let asignacionDeIdArchivo = 0;
                            for (let i = 0; i < totalDeArchivos; i++) {
                                if (archivos[i].files.length > 0) {
                                    asignacionDeIdArchivo++;
                                    formData.append('archivos' + i, archivos[i].files[0]);
                                }
                            }
                            formData.append('totalDeArchivos', asignacionDeIdArchivo);
                            let csrf = '{{ csrf_token() }}';
                            $.ajax({
                                url: '{{ route('orden-trabajo.ingreso-item-terreno-calicatas', $ordenDeTrabajo) }}',
                                method: 'POST',
                                data: formData,
                                contentType: false,
                                processData: false,
                                dataType: 'json',
                                headers: {
                                    'X-CSRF-TOKEN': csrf
                                },
                                success: function(data) {
                                    Swal.fire({
                                            icon: 'success',
                                            title: '¡Operación Exitosa!',
                                            text: 'La operación se realizó con éxito',
                                            confirmButtonColor: "#448aff",
                                            confirmButtonText: "Confirmar"
                                        }).then((result) => {
                                            location.reload();
                                        })
                                        .catch((error) => {
                                            location.reload();
                                        });
                                    document.getElementById("preloader").style.height = "0px";
                                    document.getElementById("img-preloader").style.display = "none";
                                },
                                error: function(data) {
                                    console.log(data)
                                    document.getElementById("botonGuardarInformacionDefinitiva").removeAttribute("disabled");
                                    document.getElementById("preloader").style.height = "0px";
                                    document.getElementById("img-preloader").style.display = "none";
                                }
                            })
                        }else{
                            Swal.fire({
                                text: "Está seguro de proceder con él guardado de la información sin enviar ningún correo",
                                icon: 'warning',
                                showCancelButton: true,
                                confirmButtonColor: '#3085d6',
                                cancelButtonColor: '#d33',
                                confirmButtonText: '¡Si, continuar!',
                                cancelButtonText: 'Cancelar'
                            }).then((result) => {
                                if (result.isConfirmed) {
                                    document.getElementById("preloader").removeAttribute("style");
                                    document.getElementById("img-preloader").style.display = "block";
                                    let formData = new FormData();
                                    formData.append('puntos_ingresados', JSON.stringify(listadoDeitems));
                                    formData.append('recurso_equipo', document.getElementById("campoEquipoDeMedicion").value);
                                    formData.append('replanteo', hayItemConReplanteo);
                                    formData.append('listado_usuarios_para', JSON.stringify(listadoDeUsuarioPara));
                                    formData.append('listado_usuarios_copias', JSON.stringify(listadoDeUsuarioCopias));
                                    let totalDeArchivos = document.getElementsByClassName("form-control-file").length;
                                    let archivos = document.getElementsByClassName("form-control-file");
                                    let asignacionDeIdArchivo = 0;
                                    for (let i = 0; i < totalDeArchivos; i++) {
                                        if (archivos[i].files.length > 0) {
                                            asignacionDeIdArchivo++;
                                            formData.append('archivos' + i, archivos[i].files[0]);
                                        }
                                    }
                                    formData.append('totalDeArchivos', asignacionDeIdArchivo);
                                    let csrf = '{{ csrf_token() }}';
                                    $.ajax({
                                        url: '{{ route('orden-trabajo.ingreso-item-terreno-calicatas', $ordenDeTrabajo) }}',
                                        method: 'POST',
                                        data: formData,
                                        contentType: false,
                                        processData: false,
                                        dataType: 'json',
                                        headers: {
                                            'X-CSRF-TOKEN': csrf
                                        },
                                        success: function(data) {
                                            Swal.fire({
                                                    icon: 'success',
                                                    title: '¡Operación Exitosa!',
                                                    text: 'La operación se realizó con éxito',
                                                    confirmButtonColor: "#448aff",
                                                    confirmButtonText: "Confirmar"
                                                }).then((result) => {
                                                    location.reload();
                                                })
                                                .catch((error) => {
                                                    location.reload();
                                                });
                                            document.getElementById("preloader").style.height = "0px";
                                            document.getElementById("img-preloader").style.display = "none";
                                        },
                                        error: function(data) {
                                            console.log(data)
                                            document.getElementById("botonGuardarInformacionDefinitiva").removeAttribute("disabled");
                                            document.getElementById("preloader").style.height = "0px";
                                            document.getElementById("img-preloader").style.display = "none";
                                        }
                                    })
                                } else {
                                    document.getElementById("botonGuardarInformacionDefinitiva").removeAttribute("disabled");
                                }
                            })
                            document.getElementById("preloader").style.height = "0px";
                            document.getElementById("img-preloader").style.display = "none";
                        }
                    }
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: '¡Carga de Puntos!',
                        text: 'Debe ingresar al menos un punto valido para guardar la información',
                        confirmButtonColor: "#448aff",
                        confirmButtonText: "Confirmar"
                    })
                    document.getElementById("botonGuardarInformacionDefinitiva").removeAttribute("disabled");
                    document.getElementById("preloader").style.height = "0px";
                    document.getElementById("img-preloader").style.display = "none";
                }
            } else {
                if (document.getElementById("campoEquipoDeMedicion").value.trim().length > 0) {
                    document.getElementById("campoEquipoDeMedicion").classList.remove('input-error-icon');
                    document.getElementById("campoEquipoDeMedicion").classList.add('input-success-icon');
                    document.getElementById("validacionCampoEquipoDeMedicion").innerHTML = "";
                    document.getElementById("validacionCampoEquipoDeMedicion").style.display = "none";
                } else {
                    document.getElementById("campoEquipoDeMedicion").classList.remove('input-success-icon');
                    document.getElementById("campoEquipoDeMedicion").classList.add('input-error-icon');
                    document.getElementById("validacionCampoEquipoDeMedicion").innerHTML = "El campo responsable es obligatorio.";
                    document.getElementById("validacionCampoEquipoDeMedicion").style.display = "block";
                }

                document.getElementById("botonGuardarInformacionDefinitiva").removeAttribute("disabled");
                    document.getElementById("preloader").style.height = "0px";
                    document.getElementById("img-preloader").style.display = "none";
            }
        }
    </script>
@stop