<?php  
    //include("datos_sistema.php");
    include("datos_sistema.php");
    /*if ($iduser == "") {
        header("Location:https://neotop.cl/gestion/");
    }*/
    $sql_usuario = "SELECT * FROM usuario WHERE estado = 'Activo'";
    $query_usuario = mysqli_query($con, $sql_usuario);

    //NIVELES
    $sql_niveles = "SELECT * FROM niveles WHERE estado = 'Activo'";
    $query_niveles = mysqli_query($con, $sql_niveles);

    //MENSAJE PREDEFINIDOS:
    $sql_avisos = "SELECT * FROM avisos_predefinidos WHERE estado = 'Activo'";
    $query_avisos = mysqli_query($con, $sql_avisos);

?>
<!doctype html>
<html lang="es">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- loader-->
	  <link href="assets/css/pace.min.css" rel="stylesheet" />
	  <script src="assets/js/pace.min.js"></script>
    <!--plugins-->
    <link href="assets/plugins/perfect-scrollbar/css/perfect-scrollbar.css" rel="stylesheet" />
    <link href="assets/plugins/simplebar/css/simplebar.css" rel="stylesheet" />
    <link href="assets/plugins/metismenu/css/metisMenu.min.css" rel="stylesheet" />
    <link href="assets/plugins/datatable/css/dataTables.bootstrap5.min.css" rel="stylesheet" />
    <!-- CSS Files -->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/bootstrap-extended.css" rel="stylesheet">
    <link href="assets/css/style.css" rel="stylesheet">
    <link href="assets/css/icons.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
    <!--Theme Styles-->
    <link href="assets/css/dark-theme.css" rel="stylesheet" />
    <link href="assets/css/semi-dark.css" rel="stylesheet" />
    <link href="assets/css/header-colors.css" rel="stylesheet" />
    <!-- CSS de SweetAlert2 PARA LA ALERTA ANIMADA CADA VEZ QUE SE REALIZA EDITAR, ELIMINAR ETC. -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.18/dist/sweetalert2.min.css">
    <!-- JS de SweetAlert2 -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.18/dist/sweetalert2.all.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <title><?php echo $titulo_menu;  ?></title>
    
    <script>
$(document).ready(function() {
    // Destruir instancia DataTable existente
    // Inicializar DataTable con el nuevo idioma y botones
    $('#example2').dataTable( {
        "language": {
            "sProcessing":     "Procesando...",
            "sLengthMenu":     "Mostrar _MENU_ registros",
            "sZeroRecords":    "No se encontraron resultados",
            "sEmptyTable":     "Ningún dato disponible en esta tabla",
            "sInfo":           "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
            "sInfoEmpty":      "Mostrando registros del 0 al 0 de un total de 0 registros",
            "sInfoFiltered":   "(filtrado de un total de _MAX_ registros)",
            "sInfoPostFix":    "",
            "sSearch":         "Buscar:",
            "sUrl":            "",
            "sInfoThousands":  ",",
            "sLoadingRecords": "Cargando...",
            "oPaginate": {
                "sFirst":    "Primero",
                "sLast":     "Último",
                "sNext":     "Siguiente",
                "sPrevious": "Anterior"
            },
            "oAria": {
                "sSortAscending":  ": Activar para ordenar la columna de manera ascendente",
                "sSortDescending": ": Activar para ordenar la columna de manera descendente"
            }
        },
        paging: true,
        searching: true,
        dom: '<"top"B<"clear"><"spacer"l>f>rt<"bottom"ip><"clear">',  // Configura la estructura del layout de DataTables
        buttons: [
            'copy', 'excel', 'pdf', 'print'
        ]
        
        
    } );
});
</script>
<style>
    .spacer {
        margin-top: 17px;  /* Ajusta el margen superior del selector de registros para crear el salto de línea */

    }
    .dataTables_length {
        margin-bottom: -30px;  /* Ajusta este valor para bajar el "Mostrar registros" */
    }
</style>
  </head>
  <body>
  	<style>
        /* Estilo para el contenedor del label y el input */
        .form-label-inside {
          position: relative;
        }

        /* Estilo para el label */
        .form-label-inside label {
          position: absolute;
          top: 0.3rem; /* Ajusta el espaciado vertical del label */
          left: 1rem; /* Ajusta el espaciado horizontal del label */
          pointer-events: none;
          color: #6c757d; /* Color del texto del label */
          transition: 0.2s; /* Transición para suavizar el efecto al hacer foco en el input */
        }

        /* Estilo para el input */
        .form-label-inside input {
          padding: 1.2rem 1rem 0.3rem; /* Espacio para el label y contenido del input. el 0.3rem es el espacio de abajo a arriba. */
          height: 3.0rem; /* Ajusta la altura del input para lograr el efecto deseado */
          margin-bottom: 0.3rem;
        }
        /* Estilo para el input */
        .form-label-inside select {
           /* Espacio para el label y contenido del input. el 0.3rem es el espacio de abajo a arriba. */
          height: 3.0rem; /* Ajusta la altura del input para lograr el efecto deseado */
          margin-bottom: 0.3rem;
          top: 0.3rem;
          left: 1rem;
          padding: 0.7rem 1rem; /* Ajusta el padding para alinear verticalmente el texto */
        }

        /* Estilo para el input cuando está enfocado o tiene contenido */
        .form-label-inside input:focus + label,
        .form-label-inside input:not(:placeholder-shown) + label {
          top: 0.15rem; /* Ajusta el espaciado vertical del label cuando está enfocado o tiene contenido */
          font-size: 0.90rem; /* Tamaño de fuente reducido para el label cuando está enfocado o tiene contenido */
        }
    </style>
    <style>
        /* Estilo para el contenedor de los divs */
        .div-container {
            margin-bottom: 2px;
        }

        /* Estilo para los divs que contienen los inputs */
        .input-div {
            margin-right: 1;
            margin-left: 1;
            margin-bottom: 2px;
        }
    </style>
    <script type="text/javascript">
        //ESCRIPT DE RIAL EL UNICO QUE FUNCIONÓ SIN PROBLEMAS.
        function confirmarlo(event) {  
            event.preventDefault();      
              const letrasRegex = /^[a-zA-Z\s]+$/;
              const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
              var asunto = document.getElementById("asunto").value;
              var titulo = document.getElementById("titulo").value;
              var mensaje = document.getElementById("mensaje").value;
              if (asunto == "") {
                Swal.fire({
                  title: "Error",
                  text: "Por favor complete el campo Asunto",
                  icon: "warning",
                  confirmButtonColor: "#2a3042",
                  confirmButtonText: "Aceptar"

                });
                return false;
              }
              if (titulo == "") {
                Swal.fire({
                  title: "Error",
                  text: "Por favor complete el campo Título",
                  icon: "warning",
                  confirmButtonColor: "#2a3042",
                  confirmButtonText: "Aceptar"
                  
                });
                return false;
              }
              if (mensaje == "") {
                Swal.fire({
                  title: "Error",
                  text: "Por favor complete el campo Mensaje",
                  icon: "warning",
                  confirmButtonColor: "#2a3042",
                  confirmButtonText: "Aceptar"
                  
                });
                return false;
              }

              
            Swal.fire({
                title: 'Confirmar registro',   
                text: "¿Estás seguro de que deseas registrar esta Nuevo Mensaje?",             
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: "#2a3042",
                cancelButtonColor: '931A00',
                confirmButtonText: 'Sí, registrar',
                cancelButtonText: 'Cancelar'
            }).then((result) => {
                if (result.isConfirmed) {
                document.clienteform.submit();
                }
            })
        }


        function confirmarlo2(event) {  
            event.preventDefault();      
              const letrasRegex = /^[a-zA-Z\s]+$/;
              const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
              var asunto_mensaje = document.getElementById("asunto_mensaje").value;
              var titulo_mensaje = document.getElementById("titulo_mensaje").value;
              var mensaje_mensaje = document.getElementById("mensaje_mensaje").value;
              if (asunto_mensaje == "") {
                Swal.fire({
                  title: "Error",
                  text: "Por favor complete el campo Asunto",
                  icon: "warning",
                  confirmButtonColor: "#2a3042",
                  confirmButtonText: "Aceptar"

                });
                return false;
              }
              if (titulo_mensaje == "") {
                Swal.fire({
                  title: "Error",
                  text: "Por favor complete el campo Título",
                  icon: "warning",
                  confirmButtonColor: "#2a3042",
                  confirmButtonText: "Aceptar"
                  
                });
                return false;
              }
              if (mensaje_mensaje == "") {
                Swal.fire({
                  title: "Error",
                  text: "Por favor complete el campo Mensaje",
                  icon: "warning",
                  confirmButtonColor: "#2a3042",
                  confirmButtonText: "Aceptar"
                  
                });
                return false;
              }

              
            Swal.fire({
                title: 'Confirmar registro',   
                text: "¿Estás seguro de enviar este mensaje masivo?",             
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: "#2a3042",
                cancelButtonColor: '931A00',
                confirmButtonText: 'Sí, registrar',
                cancelButtonText: 'Cancelar'
            }).then((result) => {
                if (result.isConfirmed) {
                document.clienteform2.submit();
                }
            })
        }
    </script>
  
 <!--start wrapper-->
    <div class="wrapper">
       <!--start sidebar -->
       <?php include("menu_vector.php");  ?>
        <!-- start page content wrapper-->
        <div class="page-content-wrapper">
          <!-- start page content-->
         <div class="page-content">
          <!--start breadcrumb-->
          <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
            <div class="breadcrumb-title pe-3">Avisos</div>
            <div class="ps-3">
              <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0 p-0 align-items-center">
                  <li class="breadcrumb-item"><a href="dashboard.php"><ion-icon name="home-outline"></ion-icon></a>
                  </li>
                  
                </ol>
              </nav>
            </div>
            <div class="ms-auto">
              <div class="btn-group">
                <button type="button" class="btn btn-outline-primary">Settings</button>
                <button type="button" class="btn btn-outline-primary split-bg-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">	<span class="visually-hidden">Toggle Dropdown</span>
                </button>
                <div class="dropdown-menu dropdown-menu-right dropdown-menu-lg-end">	<a class="dropdown-item" href="javascript:;">Action</a>
                  <a class="dropdown-item" href="javascript:;">Another action</a>
                  <a class="dropdown-item" href="javascript:;">Something else here</a>
                  <div class="dropdown-divider"></div>	<a class="dropdown-item" href="javascript:;">Separated link</a>
                </div>
              </div>
            </div>
          </div>
          <!--end breadcrumb-->
			<script type="text/javascript">
        function formatCliente(cliente)
        {cliente.value=cliente.value.replace(/[.-]/g, '')
        .replace( /^(\d{1,2})(\d{3})(\d{3})(\w{1})$/, '$1.$2.$3-$4')}
      </script>
				<h6 class="mb-0 text-uppercase">Formulario para envío de mensaje masivo.</h6>
				<hr/>
			      <div class="row">
              <div class="col-lg-8 mx-auto">
                <div class="card">
                  <div class="card-header px-4 py-3 float-center text-center align-items-center">
                    <h5 class="mb-0">Complete los campos necesarios para mandar un mensaje masivo.</h5>
                  </div>
                  <div class="card-body p-4">
                    <form class="user" id="jQueryValidationForm" method="POST" name="clienteform2" action="registro_aviso.php">
                      <div class="row mb-3 float-center text-center align-items-center">
                        <label for="nivel" class="col-sm-12 col-form-label ">Seleccione un mensaje predefinido, o complete los demás campos para enviar un mensaje masivo.</label>
                        
                        <div class="col-sm-12">
                          <select class="form-select" id="mensaje_predefinido" name="mensaje_predefinido">
                            <option selected selected value="">Mensaje Predefinido (Opcional)</option>
                            <?php while ($rowmensaje = mysqli_fetch_assoc($query_avisos)) { ?>
                              <option value="<?php echo $rowmensaje['asunto']." .|. ".$rowmensaje['titulo']." .|. ".$rowmensaje['mensaje']; ?>">
                                <?php echo $rowmensaje['asunto'] ?>
                              </option>
                            <?php } mysqli_free_result($query_avisos); ?>
                          </select><br>
                        </div>
                        <label for="nivel" class="col-sm-12 col-form-label ">Seleccione si desea enviar a un sólo Nivel de estudio o "A todos los Niveles"</label>
                        <div class="col-sm-6">
                          <select class="form-select" id="nivel" name="nivel">
                            <option selected value="">Seleccione Nivel</option>
                            <?php while ($rowmensaje = mysqli_fetch_assoc($query_niveles)) {
                                  ?><option value="<?php echo $rowmensaje['nombre_nivel'];?>"><?php echo $rowmensaje['nombre_nivel']?></option>
                                    <?php }mysqli_free_result($query_niveles); ?>
                            </select>
                        </div>
                        <div class="col-sm-6">
                            <label for="todos_niveles" style="font-size: 15px;">A todos los Niveles</label>
                            <input type="checkbox" name="todos_niveles" style="width: 20px; height: 20px;" id="todos_niveles">
                        </div>
                      </div>
                      <div class="row mb-3">
                        <label for="asunto_mensaje" class="col-sm-3 col-form-label">Asunto</label>
                        <div class="col-sm-9">
                          <input type="text" class="form-control" id="asunto_mensaje" name="asunto_mensaje" placeholder="El asunto se mostrará en la bandeja de entrada.">
                        </div>
                      </div>
                      <div class="row mb-3">
                        <label for="titulo_mensaje" class="col-sm-3 col-form-label">Título</label>
                        <div class="col-sm-9">
                          <input type="text" class="form-control" id="titulo_mensaje" name="titulo_mensaje" placeholder="Ingrese el título a mostrar en el mensaje.">
                        </div>
                      </div>
                      
                      <div class="row mb-3">
                        <label for="mensaje_mensaje" class="col-sm-3 col-form-label">Mensaje</label>
                        <div class="col-sm-9">
                          <textarea class="form-control" id="mensaje_mensaje" name="mensaje_mensaje" rows="3" placeholder="Mensaje"></textarea>
                        </div>
                      </div>
                      
                      <div class="row">
                        <label class="col-sm-3 col-form-label"></label>
                        <div class="col-sm-9">
                          <div class="d-md-flex d-grid align-items-center gap-3">
                            <button onclick="confirmarlo2(event);" type="button" name="submit2" class="btn btn-primary px-4">Enviar Mensaje Masivo</button>
                            <button type="reset" class="btn btn-light px-4">Limpiar</button>
                          </div>
                        </div>
                      </div>
                    </form>
    
                  </div>
                </div>
              </div>
            </div>
            <script>
              document.getElementById('mensaje_predefinido').addEventListener('change', function() {
                var selectedValue = this.value;
                var dataArray = selectedValue.split(' .|. ');
                
                document.getElementById('asunto_mensaje').value = dataArray[0];
                document.getElementById('titulo_mensaje').value = dataArray[1];
                document.getElementById('mensaje_mensaje').value = dataArray[2];
              });
            </script>
            <script>
              // Cuando cambia el select
              document.getElementById('nivel').addEventListener('change', function() {
                // Desmarcar el checkbox si se selecciona una opción
                if (this.value !== 'Seleccione Nivel') {
                  document.getElementById('todos_niveles').checked = false;
                }
              });

              // Cuando cambia el estado del checkbox
              document.getElementById('todos_niveles').addEventListener('change', function() {
                // Si el checkbox está marcado, resetear el valor del select
                if (this.checked) {
                  document.getElementById('nivel').value = "";
                }
              });
            </script>
            <div class="row">
              <hr>
              <div class="col-lg-8 mx-auto">
                <div class="card">
                  <div class="card-header px-4 py-3 float-center text-center align-items-center">
                    <h5 class="mb-0">Registrar Nuevo Mensaje Predefinido.</h5>
                  </div>
                  <div class="card-body p-4">                    
                    <form class="user" id="jQueryValidationForm" method="POST" name="clienteform" action="registro_avisonuevo.php">    
                                       
                      <div class="row mb-3">
                        <label for="asunto" class="col-sm-3 col-form-label">Asunto</label>
                        <div class="col-sm-9">
                          <input type="text" class="form-control" id="asunto" name="asunto" placeholder="El asunto se mostrará en la bandeja de entrada y en el listado a seleccionar mensaje a enviar.">
                        </div>
                      </div>
                      <div class="row mb-3">
                        <label for="titulo" class="col-sm-3 col-form-label">Título del mensaje</label>
                        <div class="col-sm-9">
                          <input type="text" class="form-control" id="titulo" name="titulo" placeholder="Ingrese el título a mostrar en el mensaje.">
                        </div>
                      </div>
                      
                      <div class="row mb-3">
                        <label for="mensaje" class="col-sm-3 col-form-label">Mensaje</label>
                        <div class="col-sm-9">
                          <textarea class="form-control" id="mensaje" name="mensaje" rows="3" placeholder="Mensaje"></textarea>
                        </div>
                      </div>
                      
                      <div class="row">
                        <label class="col-sm-3 col-form-label"></label>
                        <div class="col-sm-9">
                          <div class="d-md-flex d-grid align-items-center gap-3">
                            <button onclick="confirmarlo(event);" type="button" name="submit2" class="btn btn-primary px-4">Registrar Nuevo Mensaje</button>
                            <button type="reset" class="btn btn-light px-4">Limpiar</button>
                          </div>
                        </div>
                      </div>
                    </form>
    
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- end page content-->
         </div>
         

         <!--Start Back To Top Button-->
		     <a href="javaScript:;" class="back-to-top"><ion-icon name="arrow-up-outline"></ion-icon></a>
			 <!--End Back To Top Button-->
	  
			 


         <!--start overlay-->
          <div class="overlay nav-toggle-icon"></div>
         <!--end overlay-->

     </div>
  <!--end wrapper-->
  <style type="text/css">
     .icon-container {
    display: flex;
    align-items: center;
    gap: 10px; /* Espacio entre los íconos */
}

/* Estilos para los enlaces de los íconos */
.icon-link {
    display: inline-flex; /* Asegura que el enlace no ocupe todo el ancho */
    align-items: center;
    justify-content: center;
    width: 24px; /* Ancho fijo para cada ícono */
    height: 24px; /* Altura fija para cada ícono */
    text-decoration: none; /* Elimina el subrayado del enlace */
    cursor: pointer; /* Muestra la manito solo sobre el ícono */
}

/* Estilo específico para el ícono de lápiz para moverlo a la derecha */
.icon-link.edit-icon {
    margin-left: 10px; /* Agrega espacio a la izquierda del ícono */
}

/* Estilo para los íconos */
.icon-link i {
    font-size: 22px; /* Ajusta el tamaño del ícono */
}
  </style>


    <?php  
        //ALERTAS DE REGISTRO EXITOSO O ERROR EN BD.    
        $client="";
        $client=$_GET['client'];
        //$n_fact=$_GET['n_fact'];
        if ($client == "succ") {
            echo '<script>';
            echo 'Swal.fire({';
            echo '  title: "Registro exitoso",';
            echo '  text: "El nuevo mensaje fue registrado correctamente.",';
            echo '  icon: "success",';
            echo '  confirmButtonText: "Aceptar",';
            echo '  confirmButtonColor: "#2a3042",';
            echo '});';
            echo 'history.replaceState({}, document.title, window.location.pathname);';
            echo '</script>';
        }elseif ($client == 'err') {
            echo '<script>';
            echo 'Swal.fire({';
            echo '  title: "Error",';
            echo '  text: "Hubo un error en la base de datos",';
            echo '  icon: "error",';
            echo '  confirmButtonText: "Aceptar",';
            echo '  confirmButtonColor: "#2a3042"';
            echo '});';
            echo 'history.replaceState({}, document.title, window.location.pathname);';
            echo '</script>';  
        }elseif ($client == 'succ2') {
            echo '<script>';
            echo 'Swal.fire({';
            echo '  title: "Envío exitoso",';
            echo '  text: "El mensaje masivo fue enviado correctamente a los destinatarios.",';
            echo '  icon: "success",';
            echo '  confirmButtonText: "Aceptar",';
            echo '  confirmButtonColor: "#2a3042"';
            echo '});';
            echo 'history.replaceState({}, document.title, window.location.pathname);';
            echo '</script>';  
        } 
    ?>


    <!-- JS Files-->
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/plugins/simplebar/js/simplebar.min.js"></script>
    <script src="assets/plugins/metismenu/js/metisMenu.min.js"></script>
    <script src="assets/js/bootstrap.bundle.min.js"></script>
    <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
    <!--plugins-->
    <script src="assets/plugins/perfect-scrollbar/js/perfect-scrollbar.js"></script>
    <script src="assets/plugins/datatable/js/jquery.dataTables.min.js"></script>
    <script src="assets/plugins/datatable/js/dataTables.bootstrap5.min.js"></script>
    <!--<script src="assets/js/table-datatable.js"></script>-->

    <!-- Main JS-->
    <script src="assets/js/main.js"></script>


  </body>
</html>