@extends('adminlte::page')

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

@section('title', 'Ingreso de Puntos por Selección de la Orden de Trabajo ' . $ordenDeTrabajo->numero_orden_trabajo .' | 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-8">

                <div class="card card-aspen">
                    <div class="card-header">
                        <h3 class="card-title">Ingreso de Puntos por Selección de la Orden de Trabajo </h3>
                    </div>

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

                        <div class="card-body">

                            <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>Contrato</label>
                                    <input type="text" class="form-control" value="{{ $ordenDeTrabajo->contrato->numero_contrato }}" disabled="true">
                                </div>

                                <div class="form-group">
                                    <label>Cliente</label>
                                    <input type="text" class="form-control" value="{{ $ordenDeTrabajo->cliente->name }}" disabled="true">
                                </div>

                                @if (isset($ordenDeTrabajo->proyecto))
                                    <div class="form-group">
                                        <label>Proyecto</label>
                                        <input type="text" class="form-control" value="{{ $ordenDeTrabajo->proyecto->nombre }}" disabled="true">
                                    </div>
                                @else
                                    <div class="form-group">
                                        <label>Proyecto</label>
                                        <input type="text" class="form-control" value="" disabled="true">
                                    </div>
                                @endif

                                <div class="form-group">
                                    <label>Área/Sector</label>
                                    <input type="text" class="form-control" value="{{ $ordenDeTrabajo->area->nombre }}" disabled="true">
                                </div>

                                <div class="form-group">
                                    <label>Servicio</label>
                                    <input type="text" class="form-control" value="{{ $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>

                                @if ($servicio->nombre=="Sondajes")
                                    <div class="form-group">
                                        <label>Sistema de Referencia de Origen</label>
                                        <input type="text" class="form-control" value="{{ $ordenDeTrabajo->sistema_referencia_origen}}" disabled="true">
                                    </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>
                                @elseif($servicio->nombre=="Pilas")
                                    <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>
                                @elseif($servicio->nombre=="Calicatas")
                                    <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>
                                @endif

                                <div class="form-group">
                                    <label>Fecha Inicio</label>
                                    <input type="date" class="form-control" name="fecha_inicio" value="{{ $ordenDeTrabajo->fecha_inicio }}" readonly="true">
                                </div>
                            </div>

                            <div class="dt-responsive table-responsive">
                                <table class="table table-striped table-bordered" role="grid" aria-describedby="base-style_info" id="tabla-puntos-ingresados-orden-trabajo">
                                    <thead>
                                        <tr role="row">
                                            <th>Nombre del Punto</th>
                                            <th>Área/Sector</th>
                                            <th>Este</th>
                                            <th>Norte</th>
                                            <th>Cota</th>
                                            <th>Azimut</th>
                                            <th>Inclinación</th>
                                            <th>Acción</th>
                                        </tr>
                                    </thead>
                                    <tbody id="registrosDePuntosIngresados">
                                        <tr id="puntosIngresadosNoDisponibleEnLaTabla">
                                            <td colspan="8" class="text-center">No hay Puntos ingresados en la tabla</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <button type="button" class="btn btn-aspen" id="botonIngresoDeItems" onclick="abrirModalDelSeleccionDePuntos()"><i class="fas fa-map-marked-alt" style="margin-right: 2px;"></i> Seleccione los Puntos </button>
                        </div>

                        <div class=" card-footer">
                            <button type="button" class="btn btn-aspen" id="botonGuardarInformacion" onclick="abrirSeleccionadorDeCorreos()"><i class="fas fa-save" style="margin-right: 2px;"></i> Guardar Información </button>
                            <a href="{{ route('orden-trabajo.index-cliente', $servicio) }}" role="button" class="btn btn-secondary"><i class="fas fa-arrow-alt-circle-left" style="margin-right: 2px;"></i> Volver</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="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="modalSelecionarPuntos" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <form>
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header" style="background-color: #007bff; color:white;">
                        <h5 class="modal-title">Registros de Puntos con Area/Sector {{$ordenDeTrabajo->area->nombre}}</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color:white;">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="table-responsive">
                            <table class="table table-bordered" id="datatable-puntos" style="width: 100%;">
                                <thead>
                                    <tr>
                                        <th>Id Punto</th>
                                        <th>Nombre del Punto</th>
                                        <th>Area/Sector</th>
                                        <th>Este</th>
                                        <th>Norte</th>
                                        <th>Cota</th>
                                        <th>Azimut</th>
                                        <th>Inclinación</th>
                                    </tr>
                                </thead>
                                <tbody>

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

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                        <button type="button" class="btn btn-aspen" id="botonSeleccionarPunto">Seleccionar </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;
        }

        .hide_column {
            display: none;
        }
    </style>
@stop

@section('js')
    <script src="{{ asset('js/generico.js') }}"></script>
    <script>
        let puntosSeleccionados=[];
        let datatableDePuntos = $("#datatable-puntos").DataTable({
            columnDefs: [{
                "targets": [0],
                "visible": true,
                "searchable": false,
                "className": "hide_column"
            }, ],
            processing: true,
            serverSide: true,
            ajax: {
                url: '{{ route('puntos-orden-trabajo.obtener-registros-sin-orden-tabajo-sin-etapa-por-area-datatable',$ordenDeTrabajo->id_area) }}',
                dataType: "json",
                type: "POST",
                data: function(d) {
                    d._token = "{{ csrf_token() }} ";
                    d.puntos_seleccionados = puntosSeleccionados;
                },
            },
            columns: [{
                    "data": "id",
                    "name": "id"
                },
                {
                    "data": "punto",
                    "name": "punto"
                },
                {
                    "data": "area",
                    "name": "area"
                },
                {
                    "data": "este",
                    "name": "este"
                },
                {
                    "data": "norte",
                    "name": "norte"
                },
                {
                    "data": "cota",
                    "name": "cota"
                },
                {
                    "data": "azimut",
                    "name": "azimut"
                },
                {
                    "data": "inclinacion",
                    "name": "inclinacion"
                }
            ],
            select: {
                style: 'multi'
            },
            orderCellsTop: true,
            lengthMenu: [
                [10, 25, 50, 100, -1],
                [10, 25, 50, 100, "Todos"],
            ],
            language: {
                processing: "Procesando...",
                search: "Buscar",
                lengthMenu: "Mostrar _MENU_ Registros",
                info: "Mostrando _START_ al _END_ de _TOTAL_ registros",
                infoEmpty: "Opcion no disponible",
                infoFiltered: "",
                infoPostFix: "",
                loadingRecords: "Cargandos registros",
                zeroRecords: "No hay datos disponibles en la tabla",
                emptyTable: "No hay datos disponibles en la tabla",
                paginate: {
                    first: "Primero",
                    previous: "Anterior",
                    next: "Siguiente",
                    last: "Ultimo",
                },
                aria: {
                    sortAscending: ": Activar orden de columna ascendente",
                    sortDescending: ": Activar orden de columna desendente"
                }
            },
            dom: "<'row'<'col-sm-4'l><'col-sm-4 d-flex justify-content-center' ><'col-sm-4'f>>" + "<'row'<'col-sm-12'tr>>" + "<'row'<'col-sm-6'i><'col-sm-6'p>>"
        });

        function abrirModalDelSeleccionDePuntos() {
            datatableDePuntos.rows().deselect();
            let camposBusquedaPorColunmaDeLaTablaPuntos = document.getElementById("datatable-puntos").querySelectorAll("input[type=text]");
            camposBusquedaPorColunmaDeLaTablaPuntos.forEach(elemento => {
                elemento.value = "";
            });
            document.getElementById("botonSeleccionarPunto").addEventListener("click", editarSeleccionDePuntos);
            datatableDePuntos.search("").draw();

            /*datatableDePuntos.on('draw.dt', function() {
                let recordsTotal = 0;
                let recordsDisplay = 0;
                let itemsIngresados = document.getElementById('tabla-puntos-ingresados-orden-trabajo').tBodies[0].querySelectorAll("tr");
                datatableDePuntos.rows().nodes().each(function(row) {
                    let rowData = datatableDePuntos.row(row).data();
                    let existeRow=false;
                    itemsIngresados.forEach(filaItemIngresado => {
                        if (filaItemIngresado.querySelector(".id-punto-tabla")) {
                            let idDelPunto = filaItemIngresado.querySelector(".id-punto-tabla").innerHTML.trim();
                            if(idDelPunto==rowData.id){
                                existeRow=true;
                            }
                        }
                    });

                    if(existeRow==true){
                        $(row).hide();
                        $(row).addClass('fila-oculta');
                    }else{
                        recordsTotal++;
                        recordsDisplay++;
                    }
                });

                var info = datatableDePuntos.page.info();
                console.log("Página actual: " + (info.page + 1));
                console.log("Total de registros: " + info.recordsTotal);
                console.log("Inicio: " + info.start);
                console.log("Fin: " + info.end);
            });*/

            $("#modalSelecionarPuntos").modal("show");
        }

        function editarSeleccionDePuntos() {
            if (datatableDePuntos.$('tr.selected').hasClass('selected')) {
                let datosPuntos = datatableDePuntos.rows({
                    selected: true
                }).data();

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

                for(let i=0;i<datosPuntos.length;i++){
                    document.getElementById("registrosDePuntosIngresados").innerHTML+=
                    '<tr>'+
                        '<td class="id-punto-tabla" style="display:none;">'+datosPuntos[i].id+'</td>'+
                        '<td class="nombre-punto-tabla">'+datosPuntos[i].punto+'</td>'+
                        '<td class="area-punto-tabla">'+datosPuntos[i].area+'</td>'+
                        '<td class="este-punto-tabla">'+datosPuntos[i].este+'</td>'+
                        '<td class="norte-punto-tabla">'+datosPuntos[i].norte+'</td>'+
                        '<td class="cota-punto-tabla">'+datosPuntos[i].cota+'</td>'+
                        '<td class="azimut-punto-tabla">'+datosPuntos[i].azimut+'</td>'+
                        '<td class="inclinacion-punto-tabla">'+datosPuntos[i].inclinacion+'</td>'+
                        '<td class="accion-punto-tabla">' +
                        '<button onclick="habilitarBotonConfirmarEliminacionPunto(this)" type="button" class="btn btn-danger mr-1"><i class="fas fa-trash-alt"></i></button>' +
                        '<button onclick="eliminarFilaPunto(this)" style="display: none;" type="button" class="btn btn-danger boton-confirmar-recurso mr-1">Confirmar</button>' +
                        '</td>' +
                    '</tr>';

                    puntosSeleccionados.push(datosPuntos[i].id)
                }

                $('#modalSelecionarPuntos').modal('hide');
            }
        }

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

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

        function eliminarFilaPunto(boton) {
            let elementoFila = boton.parentElement.parentElement;
            let indice= -1;
            let index=0;
            puntosSeleccionados.forEach((elemento) => {
                if(elemento==elementoFila.querySelector(".id-punto-tabla").innerHTML.trim()){
                    indice=index;
                }
                index++;
            });

            elementoFila.remove();
            let filas = document.getElementById('tabla-puntos-ingresados-orden-trabajo').tBodies[0].querySelectorAll("tr");
            if (filas.length==0) {
                document.getElementById("registrosDePuntosIngresados").innerHTML =
                    '<tr id="puntosIngresadosNoDisponibleEnLaTabla">' +
                        '<td colspan="8" class="text-center">No hay Puntos ingresados en la tabla</td>' +
                    '</tr>';
            }

            if (indice !== -1) {
                puntosSeleccionados.splice(indice, 1);
            }
        }
    </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 abrirSeleccionadorDeCorreos() {
            document.getElementById("botonGuardarInformacion").setAttribute("disabled", true);
            document.getElementById("preloader").removeAttribute("style");
            document.getElementById("img-preloader").style.display = "block";
    
            let itemsIngresados = document.getElementById('tabla-puntos-ingresados-orden-trabajo').tBodies[0].querySelectorAll("tr");
            let hayRegistros = false;
            let listadoDeitems = [];
            itemsIngresados.forEach(filaItemIngresado => {
                if (filaItemIngresado.querySelector(".id-punto-tabla")) {
                    hayRegistros = true;
                    let idDelPunto = filaItemIngresado.querySelector(".id-punto-tabla").innerHTML.trim();
                    let nombreDelPunto = filaItemIngresado.querySelector(".nombre-punto-tabla").innerHTML.trim();
                    let areaDelPunto = filaItemIngresado.querySelector(".area-punto-tabla").innerHTML.trim();
                    let esteDelPunto = filaItemIngresado.querySelector(".este-punto-tabla").innerHTML.trim();
                    let norteDelPunto = filaItemIngresado.querySelector(".norte-punto-tabla").innerHTML.trim();
                    let cotaDelPunto = filaItemIngresado.querySelector(".cota-punto-tabla").innerHTML.trim();
                    let azimutDelPunto = filaItemIngresado.querySelector(".azimut-punto-tabla").innerHTML.trim();
                    let inclinacionDelPunto = filaItemIngresado.querySelector(".inclinacion-punto-tabla").innerHTML.trim();

                    let objectoItem = {
                        idDelPunto: idDelPunto,
                        nombreDelPunto: nombreDelPunto,
                        areaDelPunto: areaDelPunto,
                        esteDelPunto: esteDelPunto,
                        norteDelPunto: norteDelPunto,
                        cotaDelPunto: cotaDelPunto,
                        azimutDelPunto: azimutDelPunto,
                        inclinacionDelPunto: inclinacionDelPunto
                    };
    
                    listadoDeitems.push(objectoItem);
                }
            });
    
            if (hayRegistros == true) {
                $("#modalSeleccionarDeCorreos").modal("show");
                document.getElementById("preloader").style.height = "0px";
                document.getElementById("img-preloader").style.display = "none";
            } else {
                Swal.fire({
                    icon: 'error',
                    title: '¡Ingrese Puntos!',
                    text: 'Debe seleccionar al menos un punto 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";
            }
        }
    
        function guardarInformacion() {
            document.getElementById("botonGuardarInformacionDefinitiva").setAttribute("disabled", true);
            document.getElementById("preloader").removeAttribute("style");
            document.getElementById("img-preloader").style.display = "block";
    
            let itemsIngresados = document.getElementById('tabla-puntos-ingresados-orden-trabajo').tBodies[0].querySelectorAll("tr");
            let hayRegistros = false;
            let listadoDeitems = [];
            itemsIngresados.forEach(filaItemIngresado => {
                if (filaItemIngresado.querySelector(".id-punto-tabla")) {
                    hayRegistros = true;
                    let idDelPunto = filaItemIngresado.querySelector(".id-punto-tabla").innerHTML.trim();
                    let nombreDelPunto = filaItemIngresado.querySelector(".nombre-punto-tabla").innerHTML.trim();
                    let areaDelPunto = filaItemIngresado.querySelector(".area-punto-tabla").innerHTML.trim();
                    let esteDelPunto = filaItemIngresado.querySelector(".este-punto-tabla").innerHTML.trim();
                    let norteDelPunto = filaItemIngresado.querySelector(".norte-punto-tabla").innerHTML.trim();
                    let cotaDelPunto = filaItemIngresado.querySelector(".cota-punto-tabla").innerHTML.trim();
                    let azimutDelPunto = filaItemIngresado.querySelector(".azimut-punto-tabla").innerHTML.trim();
                    let inclinacionDelPunto = filaItemIngresado.querySelector(".inclinacion-punto-tabla").innerHTML.trim();

                    let objectoItem = {
                        idDelPunto: idDelPunto,
                        nombreDelPunto: nombreDelPunto,
                        areaDelPunto: areaDelPunto,
                        esteDelPunto: esteDelPunto,
                        norteDelPunto: norteDelPunto,
                        cotaDelPunto: cotaDelPunto,
                        azimutDelPunto: azimutDelPunto,
                        inclinacionDelPunto: inclinacionDelPunto
                    };
    
                    listadoDeitems.push(objectoItem);
                }
            });
    
            if (hayRegistros == true) {
                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('listado_usuarios_para', JSON.stringify(listadoDeUsuarioPara));
                    formData.append('listado_usuarios_copias', JSON.stringify(listadoDeUsuarioCopias));
                    let csrf = '{{ csrf_token() }}';
                    $.ajax({
                        url: '{{ route('orden-trabajo.update-seleccion-item', $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('listado_usuarios_para', JSON.stringify(listadoDeUsuarioPara));
                            formData.append('listado_usuarios_copias', JSON.stringify(listadoDeUsuarioCopias));
                            let csrf = '{{ csrf_token() }}';
                            $.ajax({
                                url: '{{ route('orden-trabajo.update-seleccion-item', $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: '¡Ingrese Puntos!',
                    text: 'Debe seleccionar al menos un punto 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";
            }
        }
    </script>
@stop