let PATH_IMG = $(".tener_path_img").val();
let MI_IMAGEN_PERFIL = $("#IMAGEN_PERFIL").val();
let MI_RUTA_IMAGEN_PERFIL = $("#RUTA_IMAGEN_PERFIL").val();
let MI_RUTA_PROYECTO = $("#RUTA_PROYECTO").val();

let arregloImagenDocumento = [
   "imagen_csv.png",
   "imagen_doc.png",
   "imagen_docx.png",
   "imagen_json.png",
   "imagen_pdf.png",
   "imagen_play.png",
   "imagen_ppt.png",
   "imagen_pptx.png",
   "imagen_rar.png",
   "imagen_sinimagen.png",
   "imagen_txt.png",
   "imagen_xls.png",
   "imagen_xlsx.png",
];

//PLANTILLAS PARA USUARIOS(usando api whatsapp bussinness)
function mensaje_comentarios_whatsapp_usuarios(data = {}) {
   let {
      tipo_producto,
      wam_id,
      mensaje,
      fecha_creacion,
      user_img = "",
      UUID = "",
   } = data || {};

   let tipo_producto_imagen_class = "img-avatar-small-comentario";

   let tipo_producto_imagen = PATH_IMG + "comentario.png";

   var img_default = PATH_IMG + "perfil.jpg";

   let mi_nueva_imagen_perfil = "";

   if (user_img == "" || user_img == null || user_img == undefined) {
      mi_nueva_imagen_perfil = img_default;
   } else {
      mi_nueva_imagen_perfil = MI_RUTA_PROYECTO + user_img;
      //console.log(mi_nueva_imagen_perfil);
   }

   var nuevoMensaje =
      '<div class="message-feed media right blur-in" data-wam-id="' +
      wam_id +
      '" data-UUID="' +
      UUID +
      '" >' +
      '<div class="pull-right">' +
      '<div class="image-container-perfil">' +
      '<img src="' +
      mi_nueva_imagen_perfil +
      '" alt="" class="img-avatar"  onerror="this.src=\'' +
      img_default +
      "'\"/>" +
      '<img src="' +
      tipo_producto_imagen +
      '" alt="" class="' +
      tipo_producto_imagen_class +
      '"  />' +
      "</div>" +
      "</div>" +
      '<div class="media-body media-body-change-display">' +
      '<div class="mf-content mf-content-comentario"  >' +
      '<div class="palomitas" style=" background-color: #FFEBD1; ">' +
      "<div>" +
      "<span class='texto'>" +
      mensaje +
      "</span>" +
      "</div>" +
      "</div>" +
      '<small class="mf-date fecha_y_palomitas">' +
      "<div>" +
      fecha_creacion +
      "</div>" +
      //'<img class="palomita_texto" src="' +
      //url_status_img +
      //'" alt="" width="' +
      //tamaño_palomita +
      //'" title="' +
      //error_title +
      //'" />' +
      "</small>" +
      "</div>" +
      "</div>" +
      "</div>";

   return nuevoMensaje;
}

function mensaje_texto_whatsapp_usuarios(
   tipo_producto,
   error_codigo,
   error_mensaje,
   status,
   wam_id,
   phone_number_id,
   from,
   to,
   mensaje,
   url,
   tipo_mensaje,
   db,
   esContacto,
   fecha_creacion,
   user_img = "",
   UUID = "",
) {
   var error_title =
      status == "failed"
         ? "Codigo (" + error_codigo + ") " + error_mensaje
         : "";

   let url_status_img = PATH_IMG + status + ".png";
   let tamaño_palomita =
      status == "read" ? "18px" : status == "wait" ? "16px" : "20px";

   let tipo_producto_imagen_class =
      tipo_producto == "whatsapp" ? "img-avatar-small" : "img-avatar-small-sms";

   let tipo_producto_imagen =
      tipo_producto == "whatsapp"
         ? PATH_IMG + "whatsapp.png"
         : PATH_IMG + "sms.png";

   var img_default = PATH_IMG + "perfil.jpg";

   let mi_nueva_imagen_perfil = "";

   if (user_img == "" || user_img == null || user_img == undefined) {
      mi_nueva_imagen_perfil = img_default;
   } else {
      mi_nueva_imagen_perfil = MI_RUTA_PROYECTO + user_img;
      //console.log(mi_nueva_imagen_perfil);
   }

   var nuevoMensaje =
      '<div class="message-feed media right blur-in" data-wam-id="' +
      wam_id +
      '" data-UUID="' +
      UUID +
      '" >' +
      '<div class="pull-right">' +
      '<div class="image-container-perfil">' +
      '<img src="' +
      mi_nueva_imagen_perfil +
      '" alt="" class="img-avatar"  onerror="this.src=\'' +
      img_default +
      "'\"/>" +
      //'<img src="' +
      //tipo_producto_imagen +
      //'" alt="" class="' +
      //tipo_producto_imagen_class +
      //'" />' +
      "</div>" +
      "</div>" +
      '<div class="media-body media-body-change-display">' +
      '<div class="mf-content">' +
      '<div class="palomitas">' +
      "<div>" +
      "<span class='texto'>" +
      mensaje +
      "</span>" +
      "</div>" +
      "</div>" +
      '<small class="mf-date fecha_y_palomitas">' +
      "<div>" +
      fecha_creacion +
      "</div>" +
      "<div>" +
      //tipo producto
      '<img class="imagen_producto" src="' +
      tipo_producto_imagen +
      '" alt="" width="' +
      tamaño_palomita +
      '" />' +
      //
      '<img class="palomita_texto margin_left_10" src="' +
      url_status_img +
      '" alt="" width="' +
      tamaño_palomita +
      '" title="' +
      error_title +
      '"   />' +
      "</div>" +
      "</small>" +
      "</div>" +
      "</div>" +
      "</div>";

   return nuevoMensaje;
}

function mensaje_imagen_whatsapp_usuarios(
   tipo_producto,
   error_codigo,
   error_mensaje,
   status,
   wam_id,
   phone_number_id,
   from,
   to,
   mensaje,
   url,
   tipo_mensaje,
   db,
   esContacto,
   fecha_creacion,
   user_img = "",
   url_original = "",
   UUID = "",
) {
   var error_title =
      status == "failed"
         ? "Codigo (" + error_codigo + ") " + error_mensaje
         : "";
   let url_status_img = PATH_IMG + status + ".png";
   let tamaño_palomita =
      status == "read" ? "18px" : status == "wait" ? "16px" : "20px";
   let imagen_url = url;

   let tipo_producto_imagen_class =
      tipo_producto == "whatsapp" ? "img-avatar-small" : "img-avatar-small-sms";

   let tipo_producto_imagen =
      tipo_producto == "whatsapp"
         ? PATH_IMG + "whatsapp.png"
         : PATH_IMG + "sms.png";

   let img_error = PATH_IMG + "error_imagen.png";

   var img_default = PATH_IMG + "perfil.jpg";

   let mi_nueva_imagen_perfil = "";

   if (user_img == "" || user_img == null || user_img == undefined) {
      mi_nueva_imagen_perfil = img_default;
   } else {
      mi_nueva_imagen_perfil = MI_RUTA_PROYECTO + user_img;
      //console.log(mi_nueva_imagen_perfil);
   }

   var nuevoMensaje =
      '<div class="message-feed media right blur-in" data-wam-id="' +
      wam_id +
      '" data-UUID="' +
      UUID +
      '" >' +
      '<div class="pull-right">' +
      '<div class="image-container-perfil">' +
      '<img src="' +
      mi_nueva_imagen_perfil +
      '" alt="" class="img-avatar"  onerror="this.src=\'' +
      img_default +
      "'\"/>" +
      //'<img src="' +
      //tipo_producto_imagen +
      //'" alt="" class="' +
      //tipo_producto_imagen_class +
      //'" />' +
      "</div>" +
      "</div>" +
      '<div class="media-body media-body-change-display">' +
      '<div class="mf-content mf-content-all">' +
      '<div class="palomitas">' +
      '<div class="tamano_div_imagen " style="max-width:100%; width:500px">' +
      '<a href="' +
      url_original +
      '" target="_blank">' +
      //

      '<div class="ocultar_imagenes_chats" style="height:230px;align-content:center;">' +
      //'<i class="fa fa-circle-o-notch fa-spin"></i>' +
      '<div class="loader_ws_chats"></div>' +
      "</div>" +
      //
      '<img class="imagen_imagen" src="' +
      imagen_url +
      '" alt="" style="display: none" onerror="this.src="' +
      img_error +
      '"" />' +
      "</a>" +
      "</div>" +
      //
      '<div class="caption_mensaje">' +
      '<span class="texto">' +
      mensaje +
      "</span>" +
      "</div>" +
      //

      "</div>" +
      '<small class="mf-date fecha_y_palomitas">' +
      "<div>" +
      fecha_creacion +
      "</div>" +
      "<div>" +
      //tipo producto
      '<img class="imagen_producto" src="' +
      tipo_producto_imagen +
      '" alt="" width="' +
      tamaño_palomita +
      '" />' +
      //

      '<img class="palomita_texto margin_left_10" src="' +
      url_status_img +
      '" alt="" title="' +
      error_title +
      '" width="' +
      tamaño_palomita +
      '"   />' +
      "</div>" +
      "</small>" +
      "</div>" +
      "</div>" +
      "</div>";

   return nuevoMensaje;
}

function mensaje_documentos_whatsapp_usuarios(
   tipo_producto,
   error_codigo,
   error_mensaje,
   status,
   wam_id,
   phone_number_id,
   from,
   to,
   mensaje,
   url,
   tipo_mensaje,
   db,
   esContacto,
   fecha_creacion,
   filename,
   user_img = "",
   UUID = "",
) {
   var error_title =
      status == "failed"
         ? "Codigo (" + error_codigo + ") " + error_mensaje
         : "";
   let url_status_img = PATH_IMG + status + ".png";
   let tamaño_palomita =
      status == "read" ? "18px" : status == "wait" ? "16px" : "20px";
   let imagen_url = url;

   let tipo_producto_imagen_class =
      tipo_producto == "whatsapp" ? "img-avatar-small" : "img-avatar-small-sms";

   let tipo_producto_imagen =
      tipo_producto == "whatsapp"
         ? PATH_IMG + "whatsapp.png"
         : PATH_IMG + "sms.png";

   let extension = obtenerExtension(url);
   let mayuscula_extension = extension.toUpperCase();

   let imagen_archivo_armado = "imagen_" + extension + ".png";
   let imagen_archivo = PATH_IMG + "imagen_archivo.png";

   if (arregloImagenDocumento.includes(imagen_archivo_armado) == true) {
      imagen_archivo = PATH_IMG + "imagen_" + extension + ".png";
   }

   let img_error = PATH_IMG + "imagen_archivo.png";

   var img_default = PATH_IMG + "perfil.jpg";

   let mi_nueva_imagen_perfil = "";

   if (user_img == "" || user_img == null || user_img == undefined) {
      mi_nueva_imagen_perfil = img_default;
   } else {
      mi_nueva_imagen_perfil = MI_RUTA_PROYECTO + user_img;
      //console.log(mi_nueva_imagen_perfil);
   }

   var nuevoMensaje =
      '<div class="message-feed media right blur-in" data-wam-id="' +
      wam_id +
      '" data-UUID="' +
      UUID +
      '" >' +
      '<div class="pull-right">' +
      '<div class="image-container-perfil">' +
      '<img src="' +
      mi_nueva_imagen_perfil +
      '" alt="" class="img-avatar"  onerror="this.src=\'' +
      img_default +
      "'\"/>" +
      //'<img src="' +
      //tipo_producto_imagen +
      //'" alt="" class="' +
      //tipo_producto_imagen_class +
      //'" />' +
      "</div>" +
      "</div>" +
      '<div class="media-body media-body-change-display">' +
      '<div class="mf-content mf-content-documentos ">' +
      '<div class="palomitas">' +
      '<div class="contenedor_archivos">' +
      '<div class="contenedor_contenido_archivos">' +
      '<a href="' +
      imagen_url +
      '" target="_blank" style="width: 100%; text-decoration: none; color: black;" download="' +
      filename +
      '">' +
      '<div class="nombre_archivo">' +
      '<div class="logo_archivo">' +
      '<img src="' +
      imagen_archivo +
      '" alt="" class="imagen" title="' +
      mayuscula_extension +
      '" onerror="this.src="' +
      img_error +
      '"  />' +
      "</div>" +
      '<div class="texto_archivo" title="' +
      filename +
      '">' +
      '<p class="formatear_margin_0">' +
      filename +
      "</p>" +
      "</div>" +
      "</div>" +
      "</a>" +
      "</div>" +
      "</div>" +
      //
      '<div class="caption_mensaje">' +
      '<span class="texto">' +
      mensaje +
      "</span>" +
      "</div>" +
      //

      "</div>" +
      '<small class="mf-date fecha_y_palomitas">' +
      "<div>" +
      fecha_creacion +
      "</div>" +
      "<div>" +
      //tipo producto
      '<img class="imagen_producto" src="' +
      tipo_producto_imagen +
      '" alt="" width="' +
      tamaño_palomita +
      '" />' +
      //

      '<img class="palomita_texto margin_left_10" src="' +
      url_status_img +
      '" alt="" title="' +
      error_title +
      '" width="' +
      tamaño_palomita +
      '"  />' +
      "</div>" +
      "</small>" +
      "</div>" +
      "</div>" +
      "</div>";

   return nuevoMensaje;
}

function mensaje_audios_whatsapp_usuarios(
   tipo_producto,
   error_codigo,
   error_mensaje,
   status,
   wam_id,
   phone_number_id,
   from,
   to,
   mensaje,
   url,
   tipo_mensaje,
   db,
   esContacto,
   fecha_creacion,
   filename,
   user_img = "",
   UUID = "",
) {
   var error_title =
      status == "failed"
         ? "Codigo (" + error_codigo + ") " + error_mensaje
         : "";
   let url_status_img = PATH_IMG + status + ".png";
   let tamaño_palomita =
      status == "read" ? "18px" : status == "wait" ? "16px" : "20px";

   let tipo_producto_imagen_class =
      tipo_producto == "whatsapp" ? "img-avatar-small" : "img-avatar-small-sms";

   let tipo_producto_imagen =
      tipo_producto == "whatsapp"
         ? PATH_IMG + "whatsapp.png"
         : PATH_IMG + "sms.png";

   let img_error = PATH_IMG + "imagen_archivo.png";
   var img_default = PATH_IMG + "perfil.jpg";

   let mi_nueva_imagen_perfil = "";

   if (user_img == "" || user_img == null || user_img == undefined) {
      mi_nueva_imagen_perfil = img_default;
   } else {
      mi_nueva_imagen_perfil = MI_RUTA_PROYECTO + user_img;
      //console.log(mi_nueva_imagen_perfil);
   }

   var nuevoMensaje =
      '<div class="message-feed media right blur-in" data-wam-id="' +
      wam_id +
      '" data-UUID="' +
      UUID +
      '" >' +
      '<div class="pull-right">' +
      '<div class="image-container-perfil">' +
      '<img src="' +
      mi_nueva_imagen_perfil +
      '" alt="" class="img-avatar"  onerror="this.src=\'' +
      img_default +
      "'\"/>" +
      //'<img src="' +
      //tipo_producto_imagen +
      //'" alt="" class="' +
      //tipo_producto_imagen_class +
      //'" />' +
      "</div>" +
      "</div>" +
      '<div class="media-body media-body-change-display">' +
      '<div class="mf-content mf-content-documentos">' +
      "<div >" +
      '<audio controls class="audio-general">' +
      '<source src="' +
      url +
      '" >' +
      "Your browser does not support the audio element." +
      "</audio>" +
      "</div>" +
      '<div class="caption_mensaje">' +
      '<span class="texto">' +
      mensaje +
      "</span>" +
      "</div>" +
      '<small class="mf-date fecha_y_palomitas">' +
      "<div>" +
      fecha_creacion +
      "</div>" +
      "<div>" +
      //tipo producto
      '<img class="imagen_producto" src="' +
      tipo_producto_imagen +
      '" alt="" width="' +
      tamaño_palomita +
      '" />' +
      //

      '<img class="palomita_texto margin_left_10" src="' +
      url_status_img +
      '" alt="" title="' +
      error_title +
      '" width="' +
      tamaño_palomita +
      '"   />' +
      "</div>" +
      "</small>" +
      "</div>" +
      "</div>" +
      "</div>";

   return nuevoMensaje;
}

function mensaje_audios_whatsapp_usuarios_cargar_socket(
   tipo_producto,
   error_codigo,
   error_mensaje,
   status,
   wam_id,
   phone_number_id,
   from,
   to,
   mensaje,
   url,
   tipo_mensaje,
   db,
   esContacto,
   fecha_creacion,
   filename,
   user_img = "",
   UUID = "",
) {
   var error_title =
      status == "failed"
         ? "Codigo (" + error_codigo + ") " + error_mensaje
         : "";
   let url_status_img = PATH_IMG + status + ".png";
   let tamaño_palomita =
      status == "read" ? "18px" : status == "wait" ? "16px" : "20px";

   let tipo_producto_imagen_class =
      tipo_producto == "whatsapp" ? "img-avatar-small" : "img-avatar-small-sms";

   let tipo_producto_imagen =
      tipo_producto == "whatsapp"
         ? PATH_IMG + "whatsapp.png"
         : PATH_IMG + "sms.png";

   var img_default = PATH_IMG + "perfil.jpg";

   let mi_nueva_imagen_perfil = "";

   if (user_img == "" || user_img == null || user_img == undefined) {
      mi_nueva_imagen_perfil = img_default;
   } else {
      mi_nueva_imagen_perfil = MI_RUTA_PROYECTO + user_img;
      //console.log(mi_nueva_imagen_perfil);
   }

   var nuevoMensaje =
      '<div class="message-feed media right blur-in" data-wam-id="' +
      wam_id +
      '">' +
      '<div class="pull-right">' +
      '<div class="image-container-perfil">' +
      '<img src="' +
      mi_nueva_imagen_perfil +
      '" alt="" class="img-avatar"  onerror="this.src=\'' +
      img_default +
      "'\"/>" +
      //'<img src="' +
      //tipo_producto_imagen +
      //'" alt="" class="' +
      //tipo_producto_imagen_class +
      //'" />' +
      "</div>" +
      "</div>" +
      '<div class="media-body media-body-change-display">' +
      '<div class="mf-content mf-content-documentos">' +
      "<div >" +
      '<audio controls class="audio-general">' +
      /* '<source src="' +
      url +
      '" >' + */
      "Your browser does not support the audio element." +
      "</audio>" +
      "</div>" +
      '<div class="caption_mensaje">' +
      '<span class="texto">' +
      mensaje +
      "</span>" +
      "</div>" +
      '<small class="mf-date fecha_y_palomitas">' +
      "<div>" +
      fecha_creacion +
      "</div>" +
      "<div>" +
      //tipo producto
      '<img class="imagen_producto" src="' +
      tipo_producto_imagen +
      '" alt="" width="' +
      tamaño_palomita +
      '" />' +
      //

      '<img class="palomita_texto margin_left_10" src="' +
      url_status_img +
      '" alt="" title="' +
      error_title +
      '" width="' +
      tamaño_palomita +
      '"   />' +
      "</div>" +
      "</small>" +
      "</div>" +
      "</div>" +
      "</div>";

   return nuevoMensaje;
}

//------------
function mensaje_video_whatsapp_usuarios(
   tipo_producto,
   error_codigo,
   error_mensaje,
   status,
   wam_id,
   phone_number_id,
   from,
   to,
   mensaje,
   url,
   tipo_mensaje,
   db,
   esContacto,
   fecha_creacion,
   filename,
   user_img = "",
   UUID = "",
) {
   var error_title =
      status == "failed"
         ? "Codigo (" + error_codigo + ") " + error_mensaje
         : "";
   let url_status_img = PATH_IMG + status + ".png";
   let tamaño_palomita =
      status == "read" ? "18px" : status == "wait" ? "16px" : "20px";

   let tipo_producto_imagen_class =
      tipo_producto == "whatsapp" ? "img-avatar-small" : "img-avatar-small-sms";

   let tipo_producto_imagen =
      tipo_producto == "whatsapp"
         ? PATH_IMG + "whatsapp.png"
         : PATH_IMG + "sms.png";

   let img_error = PATH_IMG + "imagen_archivo.png";
   var img_default = PATH_IMG + "perfil.jpg";

   let mi_nueva_imagen_perfil = "";

   if (user_img == "" || user_img == null || user_img == undefined) {
      mi_nueva_imagen_perfil = img_default;
   } else {
      mi_nueva_imagen_perfil = MI_RUTA_PROYECTO + user_img;
      //console.log(mi_nueva_imagen_perfil);
   }

   var nuevoMensaje =
      '<div class="message-feed media right blur-in" data-wam-id="' +
      wam_id +
      '" data-UUID="' +
      UUID +
      '" >' +
      '<div class="pull-right">' +
      '<div class="image-container-perfil">' +
      '<img src="' +
      mi_nueva_imagen_perfil +
      '" alt="" class="img-avatar"  onerror="this.src=\'' +
      img_default +
      "'\"/>" +
      //'<img src="' +
      //tipo_producto_imagen +
      //'" alt="" class="' +
      //tipo_producto_imagen_class +
      //'" />' +
      "</div>" +
      "</div>" +
      '<div class="media-body media-body-change-display">' +
      '<div class="mf-content mf-content-documentos">' +
      "<div  >" +
      '<video controls class="video-general">' +
      '<source src="' +
      url +
      '" />' +
      "Your browser does not support the audio element." +
      "</video>" +
      "</div>" +
      '<div class="caption_mensaje">' +
      '<span class="texto">' +
      mensaje +
      "</span>" +
      "</div>" +
      '<small class="mf-date fecha_y_palomitas">' +
      "<div>" +
      fecha_creacion +
      "</div>" +
      "<div>" +
      //tipo producto
      '<img class="imagen_producto" src="' +
      tipo_producto_imagen +
      '" alt="" width="' +
      tamaño_palomita +
      '" />' +
      //

      '<img class="palomita_texto margin_left_10" src="' +
      url_status_img +
      '" alt="" title="' +
      error_title +
      '" width="' +
      tamaño_palomita +
      '"   />' +
      "</div>" +
      "</small>" +
      "</div>" +
      "</div>" +
      "</div>";

   return nuevoMensaje;
}

function mensaje_video_whatsapp_usuarios_socket(
   tipo_producto,
   error_codigo,
   error_mensaje,
   status,
   wam_id,
   phone_number_id,
   from,
   to,
   mensaje,
   url,
   tipo_mensaje,
   db,
   esContacto,
   fecha_creacion,
   filename,
   user_img = "",
   UUID = "",
) {
   var error_title =
      status == "failed"
         ? "Codigo (" + error_codigo + ") " + error_mensaje
         : "";
   let url_status_img = PATH_IMG + status + ".png";
   let tamaño_palomita =
      status == "read" ? "18px" : status == "wait" ? "16px" : "20px";

   let tipo_producto_imagen_class =
      tipo_producto == "whatsapp" ? "img-avatar-small" : "img-avatar-small-sms";

   let tipo_producto_imagen =
      tipo_producto == "whatsapp"
         ? PATH_IMG + "whatsapp.png"
         : PATH_IMG + "sms.png";

   let img_error = PATH_IMG + "imagen_archivo.png";
   var img_default = PATH_IMG + "perfil.jpg";

   let mi_nueva_imagen_perfil = "";

   if (user_img == "" || user_img == null || user_img == undefined) {
      mi_nueva_imagen_perfil = img_default;
   } else {
      mi_nueva_imagen_perfil = MI_RUTA_PROYECTO + user_img;
      //console.log(mi_nueva_imagen_perfil);
   }

   var nuevoMensaje =
      '<div class="message-feed media right blur-in" data-wam-id="' +
      wam_id +
      '" data-UUID="' +
      UUID +
      '" >' +
      '<div class="pull-right">' +
      '<div class="image-container-perfil">' +
      '<img src="' +
      mi_nueva_imagen_perfil +
      '" alt="" class="img-avatar"  onerror="this.src=\'' +
      img_default +
      "'\"/>" +
      //'<img src="' +
      //tipo_producto_imagen +
      //'" alt="" class="' +
      //tipo_producto_imagen_class +
      //'" />' +
      "</div>" +
      "</div>" +
      '<div class="media-body media-body-change-display">' +
      '<div class="mf-content mf-content-documentos">' +
      "<div  >" +
      '<video controls class="video-general">' +
      //'<source src="' +
      //url +
      //'" />' +
      "Your browser does not support the audio element." +
      "</video>" +
      "</div>" +
      '<div class="caption_mensaje">' +
      '<span class="texto">' +
      mensaje +
      "</span>" +
      "</div>" +
      '<small class="mf-date fecha_y_palomitas">' +
      "<div>" +
      fecha_creacion +
      "</div>" +
      "<div>" +
      //tipo producto
      '<img class="imagen_producto" src="' +
      tipo_producto_imagen +
      '" alt="" width="' +
      tamaño_palomita +
      '" />' +
      //

      '<img class="palomita_texto margin_left_10" src="' +
      url_status_img +
      '" alt="" title="' +
      error_title +
      '" width="' +
      tamaño_palomita +
      '"   />' +
      "</div>" +
      "</small>" +
      "</div>" +
      "</div>" +
      "</div>";

   return nuevoMensaje;
}

function mensaje_etapa_conversacion_whatsapp_usuarios(data = {}) {
   let { wam_id, mensaje, fecha_creacion, UUID = "" } = data;

   // Construcción del nuevo mensaje en HTML
   var nuevoMensaje =
      '<div class="message-feed media center_mensaje blur-in" data-wam-id="' +
      wam_id +
      '" data-UUID="' +
      UUID +
      '" style="padding:5px;" >' +
      '<div class="media-body media-body-change-display">' +
      '<div class="mf-content"  >' +
      '<div class="palomitas" style="background-color: transparent !important; color: white !important; box-shadow: none !important; border:none !important; ">' +
      "<div class='izquierda'>" +
      '<span class="texto" >' +
      mensaje +
      "</span>" +
      "</div>" +
      "</div>" +
      '<small class="mf-date">' +
      "<div>" +
      fecha_creacion +
      "</div>" +
      "</small>" +
      "</div>" +
      "</div>" +
      "</div>";

   return nuevoMensaje;
}

//PLANTILLAS PARA CLIENTES(usando api whatsapp bussinness)
function mensaje_unsupported_whatsapp_clientes(
   tipo_producto,
   error_codigo,
   error_mensaje,
   status,
   wam_id,
   phone_number_id,
   from,
   to,
   mensaje,
   url,
   tipo_mensaje,
   db,
   esContacto,
   fecha_creacion,
   div = "",
   UUID = "",
) {
   var avatar_url = PATH_IMG + "perfil.jpg"; // URL de la imagen de avatar
   //estructura de mensaje

   let tipo_producto_imagen_class =
      tipo_producto == "whatsapp" ? "img-avatar-small" : "img-avatar-small-sms";

   let tipo_producto_imagen =
      tipo_producto == "whatsapp"
         ? PATH_IMG + "whatsapp.png"
         : PATH_IMG + "sms.png";

   // Construcción del nuevo mensaje en HTML
   var nuevoMensaje =
      '<div class="message-feed media blur-in" data-wam-id="' +
      wam_id +
      '" data-UUID="' +
      UUID +
      '" >' +
      //'<div class="pull-left">' +
      //'<div class="image-container-perfil">' +
      //'<img src="' +
      //avatar_url +
      //'" alt="" class="img-avatar" />' +
      //'<img src="' +
      //tipo_producto_imagen +
      //'" alt="" class="' +
      //tipo_producto_imagen_class +
      //'" />' +
      //"</div>" +
      //"</div>" +
      '<div class="media-body media-body-change-display">' +
      '<div class="mf-content">' +
      '<div class="palomitas">' +
      "<div class='izquierda'>" +
      '<span class="texto" style="font-weight: 600;">' +
      mensaje +
      "</span>" +
      "</div>" +
      "</div>" +
      /*
      <small class="mf-date fecha_y_palomitas">
         <div>23-05-2025 04:23 PM</div>
         <div>
            <img
               class="palomita_texto"
               src="http://localhost:50001/app_dev_parnerts/ui/theme/default/img/whatsapp.png"
               alt=""
               width="18px"
            /> 
            </div>
      </small>
      */
      '<small class="mf-date fecha_y_palomitas_izquierda">' +
      //tipo producto
      '<img class="palomita_texto margin_right_10" src="' +
      tipo_producto_imagen +
      '" style="width:18px" />' +
      //
      "<div>" +
      fecha_creacion +
      "</div>" +
      "<div>" +
      "</div>" +
      "</small>" +
      "</div>" +
      "</div>" +
      "</div>";

   return nuevoMensaje;
}

function mensaje_texto_whatsapp_clientes(
   tipo_producto,
   error_codigo,
   error_mensaje,
   status,
   wam_id,
   phone_number_id,
   from,
   to,
   mensaje,
   url,
   tipo_mensaje,
   db,
   esContacto,
   fecha_creacion,
   div = "",
   UUID = "",
) {
   var avatar_url = PATH_IMG + "perfil.jpg"; // URL de la imagen de avatar
   //estructura de mensaje

   let tipo_producto_imagen_class =
      tipo_producto == "whatsapp" ? "img-avatar-small" : "img-avatar-small-sms";

   let tipo_producto_imagen =
      tipo_producto == "whatsapp"
         ? PATH_IMG + "whatsapp.png"
         : PATH_IMG + "sms.png";

   // Construcción del nuevo mensaje en HTML
   var nuevoMensaje =
      '<div class="message-feed media blur-in" data-wam-id="' +
      wam_id +
      '" data-UUID="' +
      UUID +
      '" >' +
      //'<div class="pull-left">' +
      //'<div class="image-container-perfil">' +
      //'<img src="' +
      //avatar_url +
      //'" alt="" class="img-avatar" />' +
      //'<img src="' +
      //tipo_producto_imagen +
      //'" alt="" class="' +
      //tipo_producto_imagen_class +
      //'" />' +
      //"</div>" +
      //"</div>" +
      '<div class="media-body media-body-change-display">' +
      '<div class="mf-content">' +
      '<div class="palomitas">' +
      "<div class='izquierda'>" +
      '<span class="texto">' +
      mensaje +
      "</span>" +
      "</div>" +
      "</div>" +
      /* '<small class="mf-date">' +
      "<div>" +
      fecha_creacion +
      "</div>" +
      "</small>" + */
      '<small class="mf-date fecha_y_palomitas_izquierda">' +
      //tipo producto
      '<img class="palomita_texto margin_right_10" src="' +
      tipo_producto_imagen +
      '" style="width:18px" />' +
      //
      "<div>" +
      fecha_creacion +
      "</div>" +
      "<div>" +
      "</div>" +
      "</small>" +
      "</div>" +
      "</div>" +
      "</div>";

   return nuevoMensaje;
}

function mensaje_imagen_whatsapp_clientes(
   tipo_producto,
   error_codigo,
   error_mensaje,
   status,
   wam_id,
   phone_number_id,
   from,
   to,
   mensaje,
   url,
   tipo_mensaje,
   db,
   esContacto,
   fecha_creacion,
   div = "",
   url_original,
   UUID = "",
) {
   let imagen_url = url;

   let avatar_url = PATH_IMG + "perfil.jpg"; // URL del avatar

   let tipo_producto_imagen_class =
      tipo_producto == "whatsapp" ? "img-avatar-small" : "img-avatar-small-sms";

   let tipo_producto_imagen =
      tipo_producto == "whatsapp"
         ? PATH_IMG + "whatsapp.png"
         : PATH_IMG + "sms.png";

   let img_error = PATH_IMG + "error_imagen.png";

   var nuevoMensaje =
      '<div class="message-feed media blur-in" data-wam-id="' +
      wam_id +
      '" data-UUID="' +
      UUID +
      '" >' +
      //'<div class="pull-left">' +
      //'<div class="image-container-perfil">' +
      //'<img src="' +
      //avatar_url +
      //'" alt="" class="img-avatar" />' +
      //'<img src="' +
      //tipo_producto_imagen +
      //'" alt="" class="' +
      //tipo_producto_imagen_class +
      //'" />' +
      //"</div>" +
      //"</div>" +
      '<div class="media-body media-body-change-display">' +
      '<div class="mf-content mf-content-imagen mf-content-all">' +
      '<div class="palomitas">' +
      '<div class="tamano_div_imagen">' +
      '<a href="' +
      url_original +
      '" target="_blank">' +
      //
      '<div class="ocultar_imagenes_chats" style="height:230px; align-content:center;">' +
      '<div class="loader_ws_chats"></div>' +
      "</div>" +
      '<img class="imagen_imagen" src="' +
      imagen_url +
      '" alt="" style="display: none" onerror="this.src="' +
      img_error +
      '"" />' +
      "</a>" +
      "</div>" +
      "</div>" +
      '<div class="caption_mensaje">' +
      '<span class="texto">' +
      mensaje +
      "</span>" +
      "</div>" +
      /* '<small class="mf-date">' +
      "<div>" +
      fecha_creacion +
      "</div>" +
      "</small>" + */
      '<small class="mf-date fecha_y_palomitas_izquierda">' +
      //tipo producto
      '<img class="palomita_texto margin_right_10" src="' +
      tipo_producto_imagen +
      '" style="width:18px" />' +
      //
      "<div>" +
      fecha_creacion +
      "</div>" +
      "<div>" +
      "</div>" +
      "</small>" +
      "</div>" +
      "</div>" +
      "</div>";

   return nuevoMensaje;
}

function mensaje_documentos_whatsapp_cliente(
   tipo_producto,
   error_codigo,
   error_mensaje,
   status,
   wam_id,
   phone_number_id,
   from,
   to,
   mensaje,
   url,
   tipo_mensaje,
   db,
   esContacto,
   fecha_creacion,
   filename,
   UUID = "",
) {
   var error_title =
      status == "failed"
         ? "Codigo (" + error_codigo + ") " + error_mensaje
         : "";
   let url_status_img = status + ".png";
   let tamaño_palomita =
      status == "read" ? "18px" : status == "wait" ? "16px" : "20px";
   let imagen_url = url;

   let tipo_producto_imagen_class =
      tipo_producto == "whatsapp" ? "img-avatar-small" : "img-avatar-small-sms";

   let tipo_producto_imagen =
      tipo_producto == "whatsapp"
         ? PATH_IMG + "whatsapp.png"
         : PATH_IMG + "sms.png";

   let extension = obtenerExtension(url);
   let mayuscula_extension = extension.toUpperCase();

   let imagen_archivo_armado = "imagen_" + extension + ".png";
   let imagen_archivo = PATH_IMG + "imagen_archivo.png";

   if (arregloImagenDocumento.includes(imagen_archivo_armado) == true) {
      imagen_archivo = PATH_IMG + "imagen_" + extension + ".png";
   }

   let img_perfil = PATH_IMG + "perfil.jpg";

   let img_error = PATH_IMG + "imagen_archivo.png";

   var nuevoMensaje =
      '<div class="message-feed media   blur-in" data-wam-id="' +
      wam_id +
      '" data-UUID="' +
      UUID +
      '" >' +
      //'<div class="pull-left">' +
      //'<div class="image-container-perfil">' +
      //'<img src="' +
      //img_perfil +
      //'" alt="" class="img-avatar" />' +
      //'<img src="' +
      //tipo_producto_imagen +
      //'" alt="" class="' +
      //tipo_producto_imagen_class +
      //'" />' +
      //"</div>" +
      //"</div>" +
      '<div class="media-body media-body-change-display">' +
      '<div class="mf-content mf-content-documentos">' +
      '<div class="palomitas">' +
      '<div class="contenedor_archivos">' +
      '<div class="contenedor_contenido_archivos">' +
      '<a href="' +
      imagen_url +
      '" target="_blank" style="width: 100%; text-decoration: none; color: black;" download="' +
      filename +
      '">' +
      '<div class="nombre_archivo">' +
      '<div class="logo_archivo">' +
      '<img src="' +
      imagen_archivo +
      '" alt="" class="imagen" title="' +
      mayuscula_extension +
      '" onerror="this.src="' +
      img_error +
      '"" />' +
      "</div>" +
      '<div class="texto_archivo" title="' +
      filename +
      '">' +
      '<p class="formatear_margin_0">' +
      filename +
      "</p>" +
      "</div>" +
      "</div>" +
      "</a>" +
      "</div>" +
      "</div>" +
      "</div>" +
      '<div class="caption_mensaje">' +
      '<span class="texto">' +
      mensaje +
      "</span>" +
      "</div>" +
      '<small class="mf-date fecha_y_palomitas_izquierda">' +
      //tipo producto
      '<img class="palomita_texto margin_right_10" src="' +
      tipo_producto_imagen +
      '" style="width:18px" />' +
      //
      "<div>" +
      fecha_creacion +
      "</div>" +
      "<div>" +
      "</div>" +
      "</small>" +
      /* '<small class="mf-date">' +
      '<div><i class="fa fa-clock-o"></i> ' +
      fecha_creacion +
      "</div>" +
       '<img class="palomita_texto" src="img/' +
      url_status_img +
      '" alt="" title="' +
      error_title +
      '" width="' +
      tamaño_palomita +
      '" />' +
      "</small>" + */
      "</div>" +
      "</div>" +
      "</div>";

   return nuevoMensaje;
}

function mensaje_audios_whatsapp_cliente(
   tipo_producto,
   error_codigo,
   error_mensaje,
   status,
   wam_id,
   phone_number_id,
   from,
   to,
   mensaje,
   url,
   tipo_mensaje,
   db,
   esContacto,
   fecha_creacion,
   filename,
   UUID = "",
) {
   var error_title =
      status == "failed"
         ? "Codigo (" + error_codigo + ") " + error_mensaje
         : "";
   let url_status_img = PATH_IMG + status + ".png";
   let tamaño_palomita =
      status == "read" ? "18px" : status == "wait" ? "16px" : "20px";

   let tipo_producto_imagen_class =
      tipo_producto == "whatsapp" ? "img-avatar-small" : "img-avatar-small-sms";

   let tipo_producto_imagen =
      tipo_producto == "whatsapp"
         ? PATH_IMG + "whatsapp.png"
         : PATH_IMG + "sms.png";

   let img_perfil = PATH_IMG + "perfil.jpg";

   var nuevoMensaje =
      '<div class="message-feed media   blur-in" data-wam-id="' +
      wam_id +
      '" data-UUID="' +
      UUID +
      '" >' +
      //'<div class="pull-left">' +
      //'<div class="image-container-perfil">' +
      //'<img src="' +
      //img_perfil +
      //'" alt="" class="img-avatar" />' +
      //'<img src="' +
      //tipo_producto_imagen +
      //'" alt="" class="' +
      //tipo_producto_imagen_class +
      //'" />' +
      //"</div>" +
      //"</div>" +
      '<div class="media-body media-body-change-display">' +
      '<div class="mf-content mf-content-documentos">' +
      '<div class="palomitas" style="background-color: transparent !important; color: white !important; box-shadow: none !important; border:none !important;">' +
      '<audio controls class="audio-general" id="audioPlayer">' +
      '<source src="' +
      url +
      '" >' +
      "Your browser does not support the audio element." +
      "</audio>" +
      "</div>" +
      '<div class="caption_mensaje">' +
      '<span class="texto">' +
      mensaje +
      "</span>" +
      "</div>" +
      '<small class="mf-date fecha_y_palomitas_izquierda">' +
      //tipo producto
      '<img class="palomita_texto margin_right_10" src="' +
      tipo_producto_imagen +
      '" style="width:18px" />' +
      //
      "<div>" +
      fecha_creacion +
      "</div>" +
      "<div>" +
      "</div>" +
      "</small>" +
      /* '<small class="mf-date">' +
      "<div>" +
      fecha_creacion +
      "</div>" +
      "</small>" + */
      "</div>" +
      "</div>" +
      "</div>";

   return nuevoMensaje;
}

function mensaje_audios_whatsapp_cliente_cargar_socket(
   tipo_producto,
   error_codigo,
   error_mensaje,
   status,
   wam_id,
   phone_number_id,
   from,
   to,
   mensaje,
   url,
   tipo_mensaje,
   db,
   esContacto,
   fecha_creacion,
   filename,
   UUID = "",
) {
   var error_title =
      status == "failed"
         ? "Codigo (" + error_codigo + ") " + error_mensaje
         : "";
   let url_status_img = status + ".png";
   let tamaño_palomita =
      status == "read" ? "18px" : status == "wait" ? "16px" : "20px";

   let tipo_producto_imagen_class =
      tipo_producto == "whatsapp" ? "img-avatar-small" : "img-avatar-small-sms";

   let tipo_producto_imagen =
      tipo_producto == "whatsapp"
         ? PATH_IMG + "whatsapp.png"
         : PATH_IMG + "sms.png";

   let img_perfil = PATH_IMG + "perfil.jpg";

   var nuevoMensaje =
      '<div class="message-feed media blur-in" data-wam-id="' +
      wam_id +
      '" data-UUID="' +
      UUID +
      '" >' +
      //'<div class="pull-left">' +
      //'<div class="image-container-perfil">' +
      //'<img src="' +
      //img_perfil +
      //'" alt="" class="img-avatar" />' +
      //'<img src="' +
      //tipo_producto_imagen +
      //'" alt="" class="' +
      //tipo_producto_imagen_class +
      //'" />' +
      //"</div>" +
      //"</div>" +
      '<div class="media-body media-body-change-display">' +
      '<div class="mf-content mf-content-documentos">' +
      '<div class="palomitas" style="background-color: transparent !important; color: white !important; box-shadow: none !important; border:none !important;">' +
      '<audio controls class="audio-general" id="audioPlayer">' +
      /*  '<source src="' +
      url +
      '" >' + */
      "Your browser does not support the audio element." +
      "</audio>" +
      "</div>" +
      '<div class="caption_mensaje">' +
      '<span class="texto">' +
      mensaje +
      "</span>" +
      "</div>" +
      '<small class="mf-date fecha_y_palomitas_izquierda">' +
      //tipo producto
      '<img class="palomita_texto margin_right_10" src="' +
      tipo_producto_imagen +
      '" style="width:18px" />' +
      //
      "<div>" +
      fecha_creacion +
      "</div>" +
      "<div>" +
      "</div>" +
      "</small>" +
      /* '<small class="mf-date">' +
      "<div>" +
      fecha_creacion +
      "</div>" +
      "</small>" + */
      "</div>" +
      "</div>" +
      "</div>";

   return nuevoMensaje;
}

function mensaje_video_whatsapp_cliente(
   tipo_producto,
   error_codigo,
   error_mensaje,
   status,
   wam_id,
   phone_number_id,
   from,
   to,
   mensaje,
   url,
   tipo_mensaje,
   db,
   esContacto,
   fecha_creacion,
   filename,
   UUID = "",
) {
   let tipo_producto_imagen_class =
      tipo_producto == "whatsapp" ? "img-avatar-small" : "img-avatar-small-sms";

   let tipo_producto_imagen =
      tipo_producto == "whatsapp"
         ? PATH_IMG + "whatsapp.png"
         : PATH_IMG + "sms.png";

   let img_perfil = PATH_IMG + "perfil.jpg";

   var nuevoMensaje =
      '<div class="message-feed media blur-in" data-wam-id="' +
      wam_id +
      '" data-UUID="' +
      UUID +
      '" >' +
      //'<div class="pull-left">' +
      //'<div class="image-container-perfil">' +
      //'<img src="' +
      //img_perfil +
      //'" alt="" class="img-avatar" />' +
      //'<img src="' +
      //tipo_producto_imagen +
      //'" alt="" class="' +
      //tipo_producto_imagen_class +
      //'" />' +
      //"</div>" +
      //"</div>" +
      '<div class="media-body media-body-change-display">' +
      '<div class="mf-content mf-content-documentos">' +
      '<div class="palomitas" style="background-color: transparent !important; color: white !important; box-shadow: none !important; border: none !important; ">' +
      '<video controls class="video-general">' +
      '<source src="' +
      url +
      '" />' +
      "Your browser does not support the audio element." +
      "</video>" +
      "</div>" +
      '<div class="caption_mensaje">' +
      '<span class="texto">' +
      mensaje +
      "</span>" +
      "</div>" +
      '<small class="mf-date fecha_y_palomitas_izquierda">' +
      //tipo producto
      '<img class="palomita_texto margin_right_10" src="' +
      tipo_producto_imagen +
      '" style="width:18px" />' +
      //
      "<div>" +
      fecha_creacion +
      "</div>" +
      "<div>" +
      "</div>" +
      "</small>" +
      /* '<small class="mf-date">' +
      fecha_creacion +
      "</small>" + */
      "</div>" +
      "</div>" +
      "</div>";

   return nuevoMensaje;
}

function mensaje_video_whatsapp_cliente_cargar_socket(
   tipo_producto,
   error_codigo,
   error_mensaje,
   status,
   wam_id,
   phone_number_id,
   from,
   to,
   mensaje,
   url,
   tipo_mensaje,
   db,
   esContacto,
   fecha_creacion,
   filename,
   UUID = "",
) {
   let tipo_producto_imagen_class =
      tipo_producto == "whatsapp" ? "img-avatar-small" : "img-avatar-small-sms";

   let tipo_producto_imagen =
      tipo_producto == "whatsapp"
         ? PATH_IMG + "whatsapp.png"
         : PATH_IMG + "sms.png";

   let img_perfil = PATH_IMG + "perfil.jpg";

   var nuevoMensaje =
      '<div class="message-feed media blur-in" data-wam-id="' +
      wam_id +
      '" data-UUID="' +
      UUID +
      '" >' +
      //'<div class="pull-left">' +
      //'<div class="image-container-perfil">' +
      //'<img src="' +
      //img_perfil +
      //'" alt="" class="img-avatar" />' +
      //'<img src="' +
      //tipo_producto_imagen +
      //'" alt="" class="' +
      //tipo_producto_imagen_class +
      //'" />' +
      //"</div>" +
      //"</div>" +
      '<div class="media-body media-body-change-display">' +
      '<div class="mf-content mf-content-documentos">' +
      '<div class="palomitas" style="background-color: transparent !important; color: white !important; box-shadow: none !important; border: none !important; ">' +
      '<video controls class="video-general">' +
      /*  '<source src="' +
      url +
      '" />' + */
      "Your browser does not support the video tag." +
      "</video>" +
      "</div>" +
      '<div class="caption_mensaje">' +
      '<span class="texto">' +
      mensaje +
      "</span>" +
      "</div>" +
      /* '<small class="mf-date">' +
      fecha_creacion +
      "</small>" + */
      '<small class="mf-date fecha_y_palomitas_izquierda">' +
      //tipo producto
      '<img class="palomita_texto margin_right_10" src="' +
      tipo_producto_imagen +
      '" style="width:18px" />' +
      //
      "<div>" +
      fecha_creacion +
      "</div>" +
      "<div>" +
      "</div>" +
      "</small>" +
      "</div>" +
      "</div>" +
      "</div>";

   return nuevoMensaje;
}

//--------------PLANTILLAS PARA SMS-----------------

//USUARIOS 8
function mensaje_texto_sms_usuarios(
   tipo_producto,
   error_codigo,
   status,
   sid,
   mensaje,
   fecha_creacion,
   user_img = "",
   UUID = "",
) {
   var error_title =
      status == "failed"
         ? "Status: " + status + "\n\nCodigo (" + error_codigo + ") "
         : "Status: " + status;

   let url_status_img = PATH_IMG + "informacion.png";
   /* let tamaño_palomita =
      status == "read" ? "18px" : status == "wait" ? "16px" : "20px"; */
   let tamaño_palomita = "19px";

   let tipo_producto_imagen_class = "img-avatar-small-sms";
   let tipo_producto_imagen = PATH_IMG + "sms.png";

   var img_default = PATH_IMG + "perfil.jpg";

   let mi_nueva_imagen_perfil = "";

   if (user_img == "" || user_img == null || user_img == undefined) {
      mi_nueva_imagen_perfil = img_default;
   } else {
      mi_nueva_imagen_perfil = MI_RUTA_PROYECTO + user_img;
      //console.log(mi_nueva_imagen_perfil);
   }

   var nuevoMensaje =
      '<div class="message-feed media right blur-in" data-sid-id="' +
      sid +
      '" data-UUID="' +
      UUID +
      '" >' +
      '<div class="pull-right">' +
      '<div class="image-container-perfil">' +
      //'<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="" class="img-avatar" />' +
      '<img src="' +
      mi_nueva_imagen_perfil +
      '" alt="" class="img-avatar"  onerror="this.src=\'' +
      img_default +
      "'\"/>" +
      //'<img src="' +
      //tipo_producto_imagen +
      //'" alt="" class="' +
      //tipo_producto_imagen_class +
      //'" />' +
      "</div>" +
      "</div>" +
      '<div class="media-body media-body-change-display">' +
      '<div class="mf-content">' +
      '<div class="palomitas">' +
      "<div>" +
      "<span class='texto'>" +
      mensaje +
      "</span>" +
      "</div>" +
      "</div>" +
      '<small class="mf-date fecha_y_palomitas">' +
      //inicio
      "<div>" +
      fecha_creacion +
      "</div>" +
      //---
      "<div>" +
      '<img class="palomita_texto" src="' +
      url_status_img +
      '" alt="" height="100%" width="' +
      tamaño_palomita +
      '" title="' +
      error_title +
      '" />' +
      '<img class="palomita_texto  " src="' +
      tipo_producto_imagen +
      '" style="width:22px; margin-top:-4px;" />' +
      //
      "</div>" +
      //FINAL
      "</small>" +
      "</div>" +
      "</div>" +
      "</div>";

   return nuevoMensaje;
}

function mensaje_image_sms_usuarios(
   tipo_producto,
   error_codigo,
   status,
   sid,
   mensaje,
   fecha_creacion,
   user_img = "",
   UUID = "",
   datoCompletos = {},
) {
   var error_title =
      status == "failed"
         ? "Status: " + status + "\n\nCodigo (" + error_codigo + ") "
         : "Status: " + status;

   let url_status_img = PATH_IMG + "informacion.png";
   /* let tamaño_palomita =
      status == "read" ? "18px" : status == "wait" ? "16px" : "20px"; */
   let tamaño_palomita = "19px";

   let tipo_producto_imagen_class = "img-avatar-small-sms";
   let tipo_producto_imagen = PATH_IMG + "sms.png";

   var img_default = PATH_IMG + "perfil.jpg";

   let mi_nueva_imagen_perfil = "";

   if (user_img == "" || user_img == null || user_img == undefined) {
      mi_nueva_imagen_perfil = img_default;
   } else {
      mi_nueva_imagen_perfil = MI_RUTA_PROYECTO + user_img;
      //console.log(mi_nueva_imagen_perfil);
   }

   let url_original = datoCompletos.url_original;

   let imagen_url = datoCompletos.url;

   let img_error = PATH_IMG + "error_imagen.png";

   var nuevoMensaje =
      '<div class="message-feed media right blur-in" data-sid-id="' +
      sid +
      '" data-UUID="' +
      UUID +
      '" >' +
      '<div class="pull-right">' +
      '<div class="image-container-perfil">' +
      //'<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="" class="img-avatar" />' +
      '<img src="' +
      mi_nueva_imagen_perfil +
      '" alt="" class="img-avatar"  onerror="this.src=\'' +
      img_default +
      "'\"/>" +
      //'<img src="' +
      //tipo_producto_imagen +
      //'" alt="" class="' +
      //tipo_producto_imagen_class +
      //'" />' +
      "</div>" +
      "</div>" +
      '<div class="media-body media-body-change-display">' +
      '<div class="mf-content mf-content-imagen mf-content-all">' +
      '<div class="palomitas">' +
      //
      '<div class="tamano_div_imagen">' +
      '<a href="' +
      url_original +
      '" target="_blank">' +
      //
      '<div class="ocultar_imagenes_chats" style="height:230px; align-content:center;">' +
      '<div class="loader_ws_chats"></div>' +
      "</div>" +
      '<img class="imagen_imagen" src="' +
      imagen_url +
      '" alt="" style="display: none" onerror="this.src="' +
      img_error +
      '"" />' +
      "</a>" +
      "</div>" +
      //
      "<div>" +
      //"<span class='texto'>" +
      //mensaje +
      //"</span>" +

      '<div class="caption_mensaje">' +
      '<span class="texto">' +
      mensaje +
      "</span>" +
      "</div>" +
      //
      "</div>" +
      //
      "</div>" +
      '<small class="mf-date fecha_y_palomitas">' +
      //
      "<div>" +
      fecha_creacion +
      "</div>" +
      "<div>" +
      '<img class="palomita_texto" src="' +
      url_status_img +
      '" alt="" height="100%" width="' +
      tamaño_palomita +
      '" title="' +
      error_title +
      '" />' +
      '<img class="palomita_texto  " src="' +
      tipo_producto_imagen +
      '" style="width:22px; margin-top:-4px;" />' +
      "</div>" +
      //
      "</small>" +
      "</div>" +
      "</div>" +
      "</div>";

   return nuevoMensaje;
}

function mensaje_documento_sms_usuarios(
   tipo_producto,
   error_codigo,
   status,
   sid,
   mensaje,
   fecha_creacion,
   user_img = "",
   UUID = "",
   datoCompletos = {},
) {
   var error_title =
      status == "failed"
         ? "Status: " + status + "\n\nCodigo (" + error_codigo + ") "
         : "Status: " + status;

   let url_status_img = PATH_IMG + "informacion.png";
   /* let tamaño_palomita =
      status == "read" ? "18px" : status == "wait" ? "16px" : "20px"; */
   let tamaño_palomita = "19px";

   let tipo_producto_imagen_class = "img-avatar-small-sms";
   let tipo_producto_imagen = PATH_IMG + "sms.png";

   var img_default = PATH_IMG + "perfil.jpg";

   let mi_nueva_imagen_perfil = "";

   if (user_img == "" || user_img == null || user_img == undefined) {
      mi_nueva_imagen_perfil = img_default;
   } else {
      mi_nueva_imagen_perfil = MI_RUTA_PROYECTO + user_img;
      //console.log(mi_nueva_imagen_perfil);
   }

   let extension = obtenerExtension(datoCompletos.url);
   let mayuscula_extension = extension.toUpperCase();

   let imagen_archivo_armado = "imagen_" + extension + ".png";
   let imagen_archivo = PATH_IMG + "imagen_archivo.png";

   if (arregloImagenDocumento.includes(imagen_archivo_armado) == true) {
      imagen_archivo = PATH_IMG + "imagen_" + extension + ".png";
   }

   let url_original = datoCompletos.url_original;

   let imagen_url = datoCompletos.url;
   let filename = datoCompletos.filename;

   let img_error = PATH_IMG + "error_imagen.png";

   if (isEmpty(filename) == true) {
      filename = "";
   }

   var nuevoMensaje =
      '<div class="message-feed media right blur-in" data-sid-id="' +
      sid +
      '" data-UUID="' +
      UUID +
      '" >' +
      '<div class="pull-right">' +
      '<div class="image-container-perfil">' +
      //'<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="" class="img-avatar" />' +
      '<img src="' +
      mi_nueva_imagen_perfil +
      '" alt="" class="img-avatar"  onerror="this.src=\'' +
      img_default +
      "'\"/>" +
      //'<img src="' +
      //tipo_producto_imagen +
      //'" alt="" class="' +
      //tipo_producto_imagen_class +
      //'" />' +
      "</div>" +
      "</div>" +
      '<div class="media-body media-body-change-display">' +
      '<div class="mf-content mf-content-imagen mf-content-all">' +
      '<div class="palomitas">' +
      //
      '<div class="contenedor_archivos">' +
      '<div class="contenedor_contenido_archivos">' +
      '<a href="' +
      imagen_url +
      '" target="_blank" style="width: 100%; text-decoration: none; color: black;" download="' +
      filename +
      '">' +
      '<div class="nombre_archivo">' +
      '<div class="logo_archivo">' +
      '<img src="' +
      imagen_archivo +
      '" alt="" class="imagen" title="' +
      mayuscula_extension +
      '" onerror="this.src="' +
      img_error +
      '"" />' +
      "</div>" +
      '<div class="texto_archivo" title="' +
      filename +
      '">' +
      '<p class="formatear_margin_0">' +
      filename +
      "</p>" +
      "</div>" +
      "</div>" +
      "</a>" +
      "</div>" +
      "</div>" +
      //
      "<div>" +
      //"<span class='texto'>" +
      //mensaje +
      //"</span>" +

      '<div class="caption_mensaje">' +
      '<span class="texto">' +
      mensaje +
      "</span>" +
      "</div>" +
      //
      "</div>" +
      //
      "</div>" +
      '<small class="mf-date fecha_y_palomitas">' +
      //
      "<div>" +
      fecha_creacion +
      "</div>" +
      "<div>" +
      '<img class="palomita_texto" src="' +
      url_status_img +
      '" alt="" height="100%" width="' +
      tamaño_palomita +
      '" title="' +
      error_title +
      '" />' +
      '<img class="palomita_texto  " src="' +
      tipo_producto_imagen +
      '" style="width:22px; margin-top:-4px;" />' +
      "</div>" +
      //
      "</small>" +
      "</div>" +
      "</div>" +
      "</div>";

   return nuevoMensaje;
}

function mensaje_audio_sms_usuarios(
   tipo_producto,
   error_codigo,
   status,
   sid,
   mensaje,
   fecha_creacion,
   user_img = "",
   UUID = "",
   datoCompletos = {},
) {
   var error_title =
      status == "failed"
         ? "Status: " + status + "\n\nCodigo (" + error_codigo + ") "
         : "Status: " + status;

   let url_status_img = PATH_IMG + "informacion.png";
   /* let tamaño_palomita =
      status == "read" ? "18px" : status == "wait" ? "16px" : "20px"; */
   let tamaño_palomita = "19px";

   let tipo_producto_imagen_class = "img-avatar-small-sms";
   let tipo_producto_imagen = PATH_IMG + "sms.png";

   var img_default = PATH_IMG + "perfil.jpg";

   let mi_nueva_imagen_perfil = "";

   if (user_img == "" || user_img == null || user_img == undefined) {
      mi_nueva_imagen_perfil = img_default;
   } else {
      mi_nueva_imagen_perfil = MI_RUTA_PROYECTO + user_img;
      //console.log(mi_nueva_imagen_perfil);
   }

   let url = datoCompletos.url;

   var nuevoMensaje =
      '<div class="message-feed media right blur-in" data-sid-id="' +
      sid +
      '" data-UUID="' +
      UUID +
      '" >' +
      '<div class="pull-right">' +
      '<div class="image-container-perfil">' +
      //'<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="" class="img-avatar" />' +
      '<img src="' +
      mi_nueva_imagen_perfil +
      '" alt="" class="img-avatar"  onerror="this.src=\'' +
      img_default +
      "'\"/>" +
      //'<img src="' +
      //tipo_producto_imagen +
      //'" alt="" class="' +
      //tipo_producto_imagen_class +
      //'" />' +
      "</div>" +
      "</div>" +
      '<div class="media-body media-body-change-display">' +
      '<div class="mf-content mf-content-documentos">' +
      '<div  style="background-color: transparent !important; color: white !important; box-shadow: none !important; border:none !important;" >' +
      //
      '<audio controls class="audio-general" id="audioPlayer">' +
      '<source src="' +
      url +
      '" >' +
      "Your browser does not support the audio element." +
      "</audio>" +
      //

      "<div>" +
      //
      "<div class='izquierda'>" +
      '<span class="texto">' +
      mensaje +
      "</span>" +
      "</div>" +
      //
      //"<span class='texto'>" +
      //mensaje +
      //"</span>" +
      "</div>" +
      "</div>" +
      '<small class="mf-date fecha_y_palomitas">' +
      //inicio
      "<div>" +
      fecha_creacion +
      "</div>" +
      //---
      "<div>" +
      '<img class="palomita_texto" src="' +
      url_status_img +
      '" alt="" height="100%" width="' +
      tamaño_palomita +
      '" title="' +
      error_title +
      '" />' +
      '<img class="palomita_texto  " src="' +
      tipo_producto_imagen +
      '" style="width:22px; margin-top:-4px;" />' +
      //
      "</div>" +
      //FINAL
      "</small>" +
      "</div>" +
      "</div>" +
      "</div>";

   return nuevoMensaje;
}

function mensaje_audio_sms_usuarios_socket(
   tipo_producto,
   error_codigo,
   status,
   sid,
   mensaje,
   fecha_creacion,
   user_img = "",
   UUID = "",
   datoCompletos = {},
) {
   var error_title =
      status == "failed"
         ? "Status: " + status + "\n\nCodigo (" + error_codigo + ") "
         : "Status: " + status;

   let url_status_img = PATH_IMG + "informacion.png";
   /* let tamaño_palomita =
      status == "read" ? "18px" : status == "wait" ? "16px" : "20px"; */
   let tamaño_palomita = "19px";

   let tipo_producto_imagen_class = "img-avatar-small-sms";
   let tipo_producto_imagen = PATH_IMG + "sms.png";

   var img_default = PATH_IMG + "perfil.jpg";

   let mi_nueva_imagen_perfil = "";

   if (user_img == "" || user_img == null || user_img == undefined) {
      mi_nueva_imagen_perfil = img_default;
   } else {
      mi_nueva_imagen_perfil = MI_RUTA_PROYECTO + user_img;
      //console.log(mi_nueva_imagen_perfil);
   }

   let url = datoCompletos.url;

   var nuevoMensaje =
      '<div class="message-feed media right blur-in" data-sid-id="' +
      sid +
      '" data-UUID="' +
      UUID +
      '" >' +
      '<div class="pull-right">' +
      '<div class="image-container-perfil">' +
      //'<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="" class="img-avatar" />' +
      '<img src="' +
      mi_nueva_imagen_perfil +
      '" alt="" class="img-avatar"  onerror="this.src=\'' +
      img_default +
      "'\"/>" +
      //'<img src="' +
      //tipo_producto_imagen +
      //'" alt="" class="' +
      //tipo_producto_imagen_class +
      //'" />' +
      "</div>" +
      "</div>" +
      '<div class="media-body media-body-change-display">' +
      '<div class="mf-content mf-content-documentos">' +
      '<div  style="background-color: transparent !important; color: white !important; box-shadow: none !important; border:none !important;" >' +
      //
      '<audio controls class="audio-general" id="audioPlayer">' +
      //'<source src="' +
      //url +
      //'" >' +
      "Your browser does not support the audio element." +
      "</audio>" +
      //

      "<div class='izquierda'>" +
      '<span class="texto">' +
      mensaje +
      "</span>" +
      "</div>" +
      //
      "<div>" +
      //"<span class='texto'>" +
      //mensaje +
      //"</span>" +
      "</div>" +
      "</div>" +
      '<small class="mf-date fecha_y_palomitas">' +
      //inicio
      "<div>" +
      fecha_creacion +
      "</div>" +
      //---
      "<div>" +
      '<img class="palomita_texto" src="' +
      url_status_img +
      '" alt="" height="100%" width="' +
      tamaño_palomita +
      '" title="' +
      error_title +
      '" />' +
      '<img class="palomita_texto  " src="' +
      tipo_producto_imagen +
      '" style="width:22px; margin-top:-4px;" />' +
      //
      "</div>" +
      //FINAL
      "</small>" +
      "</div>" +
      "</div>" +
      "</div>";

   return nuevoMensaje;
}

//CLIENTE
function mensaje_texto_sms_clientes(
   tipo_producto,
   sid,
   mensaje,
   fecha_creacion,
   UUID = "",
) {
   var avatar_url = PATH_IMG + "perfil.jpg"; // URL de la imagen de avatar
   //estructura de mensaje

   let tipo_producto_imagen_class =
      tipo_producto == "whatsapp" ? "img-avatar-small" : "img-avatar-small-sms";

   let tipo_producto_imagen =
      tipo_producto == "whatsapp"
         ? PATH_IMG + "whatsapp.png"
         : PATH_IMG + "sms.png";

   // Construcción del nuevo mensaje en HTML
   var nuevoMensaje =
      '<div class="message-feed media blur-in" data-sid-id="' +
      sid +
      '" data-UUID="' +
      UUID +
      '" >' +
      //'<div class="pull-left">' +
      //'<div class="image-container-perfil">' +
      //'<img src="' +
      //avatar_url +
      //'" alt="" class="img-avatar" />' +
      //'<img src="' +
      //tipo_producto_imagen +
      //'" alt="" class="' +
      //tipo_producto_imagen_class +
      //'" />' +
      //"</div>" +
      //"</div>" +
      '<div class="media-body media-body-change-display">' +
      '<div class="mf-content">' +
      '<div class="palomitas">' +
      "<div class='izquierda'>" +
      '<span class="texto">' +
      mensaje +
      "</span>" +
      "</div>" +
      "</div>" +
      /* '<small class="mf-date">' +
      "<div>" +
      fecha_creacion +
      "</div>" +
      "</small>" + */
      '<small class="mf-date fecha_y_palomitas_izquierda">' +
      //tipo producto
      '<img class="palomita_texto margin_right_10" src="' +
      tipo_producto_imagen +
      '" style="width:18px" />' +
      //
      "<div>" +
      fecha_creacion +
      "</div>" +
      "<div>" +
      "</div>" +
      "</small>" +
      "</div>" +
      "</div>" +
      "</div>";

   return nuevoMensaje;
}

function mensaje_image_sms_clientes(
   tipo_producto,
   sid,
   mensaje,
   fecha_creacion,
   UUID = "",
   datoCompletos = {},
) {
   var avatar_url = PATH_IMG + "perfil.jpg"; // URL de la imagen de avatar
   //estructura de mensaje

   let img_error = PATH_IMG + "error_imagen.png";

   let tipo_producto_imagen_class =
      tipo_producto == "whatsapp" ? "img-avatar-small" : "img-avatar-small-sms";

   let tipo_producto_imagen =
      tipo_producto == "whatsapp"
         ? PATH_IMG + "whatsapp.png"
         : PATH_IMG + "sms.png";

   let url_original = datoCompletos.url_original || "";
   let imagen_url = datoCompletos.url || "";

   if (isEmpty(mensaje)) {
      mensaje = "";
   }

   // Construcción del nuevo mensaje en HTML
   var nuevoMensaje =
      '<div class="message-feed media blur-in" data-sid-id="' +
      sid +
      '" data-UUID="' +
      UUID +
      '" >' +
      //'<div class="pull-left">' +
      //'<div class="image-container-perfil">' +
      //'<img src="' +
      //avatar_url +
      //'" alt="" class="img-avatar" />' +
      //'<img src="' +
      //tipo_producto_imagen +
      //'" alt="" class="' +
      //tipo_producto_imagen_class +
      //'" />' +
      //"</div>" +
      //"</div>" +
      '<div class="media-body media-body-change-display">' +
      '<div class="mf-content mf-content-imagen mf-content-all">' +
      '<div class="palomitas">' +
      //de aqui viene informacion de imagen ---------

      '<div class="tamano_div_imagen " style="max-width:100%; width:500px">' +
      '<a href="' +
      url_original +
      '" target="_blank">' +
      //

      '<div class="ocultar_imagenes_chats" style="height:230px;align-content:center;">' +
      //'<i class="fa fa-circle-o-notch fa-spin"></i>' +
      '<div class="loader_ws_chats"></div>' +
      "</div>" +
      //
      '<img class="imagen_imagen" src="' +
      imagen_url +
      '" alt="" style="display: none" onerror="this.src="' +
      img_error +
      '"" />' +
      "</a>" +
      "</div>" +
      //fin de imagen ------

      //todo esto es parte del texo --------------
      "<div class='izquierda'>" +
      '<span class="texto">' +
      mensaje +
      "</span>" +
      "</div>" +
      //fin parte del texto -------------
      "</div>" +
      /* '<small class="mf-date">' +
      "<div>" +
      fecha_creacion +
      "</div>" +
      "</small>" + */
      '<small class="mf-date fecha_y_palomitas_izquierda">' +
      //tipo producto
      '<img class="palomita_texto margin_right_10" src="' +
      tipo_producto_imagen +
      '" style="width:18px" />' +
      //
      "<div>" +
      fecha_creacion +
      "</div>" +
      "<div>" +
      "</div>" +
      "</small>" +
      "</div>" +
      "</div>" +
      "</div>";

   return nuevoMensaje;
}

function mensaje_document_sms_clientes(
   tipo_producto,
   sid,
   mensaje,
   fecha_creacion,
   UUID = "",
   datoCompletos = {},
) {
   var avatar_url = PATH_IMG + "perfil.jpg"; // URL de la imagen de avatar
   //estructura de mensaje

   let tipo_producto_imagen_class =
      tipo_producto == "whatsapp" ? "img-avatar-small" : "img-avatar-small-sms";

   let tipo_producto_imagen =
      tipo_producto == "whatsapp"
         ? PATH_IMG + "whatsapp.png"
         : PATH_IMG + "sms.png";

   let imagen_url = datoCompletos.url;
   let filename = datoCompletos.filename;

   let extension = obtenerExtension(datoCompletos.url);
   let mayuscula_extension = extension.toUpperCase();

   let imagen_archivo_armado = "imagen_" + extension + ".png";
   let imagen_archivo = PATH_IMG + "imagen_archivo.png";

   if (arregloImagenDocumento.includes(imagen_archivo_armado) == true) {
      imagen_archivo = PATH_IMG + "imagen_" + extension + ".png";
   }

   let img_error = PATH_IMG + "imagen_archivo.png";

   // Construcción del nuevo mensaje en HTML
   var nuevoMensaje =
      '<div class="message-feed media blur-in" data-sid-id="' +
      sid +
      '" data-UUID="' +
      UUID +
      '" >' +
      //'<div class="pull-left">' +
      //'<div class="image-container-perfil">' +
      //'<img src="' +
      //avatar_url +
      //'" alt="" class="img-avatar" />' +
      //'<img src="' +
      //tipo_producto_imagen +
      //'" alt="" class="' +
      //tipo_producto_imagen_class +
      //'" />' +
      //"</div>" +
      //"</div>" +
      '<div class="media-body media-body-change-display">' +
      '<div class="mf-content mf-content-documentos">' +
      '<div class="palomitas">' +
      //"<div class='izquierda'>" +
      //'<span class="texto">' +
      //"mensaje xd" +
      //"</span>" +
      //"</div>" +

      '<div class="contenedor_archivos">' +
      '<div class="contenedor_contenido_archivos">' +
      '<a href="' +
      imagen_url +
      '" target="_blank" style="width: 100%; text-decoration: none; color: black;" download="' +
      filename +
      '">' +
      '<div class="nombre_archivo">' +
      '<div class="logo_archivo">' +
      '<img src="' +
      imagen_archivo +
      '" alt="" class="imagen" title="' +
      mayuscula_extension +
      '" onerror="this.src="' +
      img_error +
      '"" />' +
      "</div>" +
      '<div class="texto_archivo" title="' +
      filename +
      '">' +
      '<p class="formatear_margin_0">' +
      filename +
      "</p>" +
      "</div>" +
      "</div>" +
      "</a>" +
      "</div>" +
      "</div>" +
      //contenedor ----

      "</div>" +
      /* '<small class="mf-date">' +
      "<div>" +
      fecha_creacion +
      "</div>" +
      "</small>" + */
      '<small class="mf-date fecha_y_palomitas_izquierda">' +
      //tipo producto
      '<img class="palomita_texto margin_right_10" src="' +
      tipo_producto_imagen +
      '" style="width:18px" />' +
      //
      "<div>" +
      fecha_creacion +
      "</div>" +
      "<div>" +
      "</div>" +
      "</small>" +
      "</div>" +
      "</div>" +
      "</div>";

   return nuevoMensaje;
}

function mensaje_video_sms_clientes(
   tipo_producto,
   sid,
   mensaje,
   fecha_creacion,
   UUID = "",
   datoCompletos = {},
) {
   var avatar_url = PATH_IMG + "perfil.jpg"; // URL de la imagen de avatar
   //estructura de mensaje

   let tipo_producto_imagen_class =
      tipo_producto == "whatsapp" ? "img-avatar-small" : "img-avatar-small-sms";

   let tipo_producto_imagen =
      tipo_producto == "whatsapp"
         ? PATH_IMG + "whatsapp.png"
         : PATH_IMG + "sms.png";

   let url = datoCompletos.url;

   // Construcción del nuevo mensaje en HTML
   var nuevoMensaje =
      '<div class="message-feed media blur-in" data-sid-id="' +
      sid +
      '" data-UUID="' +
      UUID +
      '" >' +
      //'<div class="pull-left">' +
      //'<div class="image-container-perfil">' +
      //'<img src="' +
      //avatar_url +
      //'" alt="" class="img-avatar" />' +
      //'<img src="' +
      //tipo_producto_imagen +
      //'" alt="" class="' +
      //tipo_producto_imagen_class +
      //'" />' +
      //"</div>" +
      //"</div>" +
      '<div class="media-body media-body-change-display">' +
      '<div class="mf-content mf-content-documentos">' +
      '<div class="palomitas"  style="background-color: transparent !important; color: white !important; box-shadow: none !important; border: none !important; ">' +
      //"<div class='izquierda'>" +
      //'<span class="texto">' +
      //mensaje +
      //"</span>" +
      //"</div>" +

      //----
      '<video controls class="video-general">' +
      '<source src="' +
      url +
      '" />' +
      "Your browser does not support the audio element." +
      "</video>" +
      //----

      "</div>" +
      /* '<small class="mf-date">' +
      "<div>" +
      fecha_creacion +
      "</div>" +
      "</small>" + */
      '<small class="mf-date fecha_y_palomitas_izquierda">' +
      //tipo producto
      '<img class="palomita_texto margin_right_10" src="' +
      tipo_producto_imagen +
      '" style="width:18px" />' +
      //
      "<div>" +
      fecha_creacion +
      "</div>" +
      "<div>" +
      "</div>" +
      "</small>" +
      "</div>" +
      "</div>" +
      "</div>";

   return nuevoMensaje;
}

function mensaje_audio_sms_clientes(
   tipo_producto,
   sid,
   mensaje,
   fecha_creacion,
   UUID = "",
   datoCompletos = {},
) {
   var avatar_url = PATH_IMG + "perfil.jpg"; // URL de la imagen de avatar
   //estructura de mensaje

   let tipo_producto_imagen_class =
      tipo_producto == "whatsapp" ? "img-avatar-small" : "img-avatar-small-sms";

   let tipo_producto_imagen =
      tipo_producto == "whatsapp"
         ? PATH_IMG + "whatsapp.png"
         : PATH_IMG + "sms.png";

   let url = datoCompletos.url;

   // Construcción del nuevo mensaje en HTML
   var nuevoMensaje =
      '<div class="message-feed media blur-in" data-sid-id="' +
      sid +
      '" data-UUID="' +
      UUID +
      '" >' +
      //'<div class="pull-left">' +
      //'<div class="image-container-perfil">' +
      //'<img src="' +
      //avatar_url +
      //'" alt="" class="img-avatar" />' +
      //'<img src="' +
      //tipo_producto_imagen +
      //'" alt="" class="' +
      //tipo_producto_imagen_class +
      //'" />' +
      //"</div>" +
      //"</div>" +
      '<div class="media-body media-body-change-display">' +
      '<div class="mf-content mf-content-documentos">' +
      '<div class="palomitas"  style="background-color: transparent !important; color: white !important; box-shadow: none !important; border:none !important;">' +
      //"<div class='izquierda'>" +
      //'<span class="texto">' +
      //mensaje +
      //"</span>" +
      //"</div>" +

      '<audio controls class="audio-general" id="audioPlayer">' +
      '<source src="' +
      url +
      '" >' +
      "Your browser does not support the audio element." +
      "</audio>" +
      "</div>" +
      /* '<small class="mf-date">' +
      "<div>" +
      fecha_creacion +
      "</div>" +
      "</small>" + */
      '<small class="mf-date fecha_y_palomitas_izquierda">' +
      //tipo producto
      '<img class="palomita_texto margin_right_10" src="' +
      tipo_producto_imagen +
      '" style="width:18px" />' +
      //
      "<div>" +
      fecha_creacion +
      "</div>" +
      "<div>" +
      "</div>" +
      "</small>" +
      "</div>" +
      "</div>" +
      "</div>";

   return nuevoMensaje;
}

//Usuarios

function mensaje_video_sms_usuarios(
   tipo_producto,
   error_codigo,
   status,
   sid,
   mensaje,
   fecha_creacion,
   user_img = "",
   UUID = "",
   datoCompletos = {},
) {
   var error_title =
      status == "failed"
         ? "Status: " + status + "\n\nCodigo (" + error_codigo + ") "
         : "Status: " + status;

   let url_status_img = PATH_IMG + "informacion.png";
   /* let tamaño_palomita =
      status == "read" ? "18px" : status == "wait" ? "16px" : "20px"; */
   let tamaño_palomita = "19px";

   let tipo_producto_imagen_class = "img-avatar-small-sms";
   let tipo_producto_imagen = PATH_IMG + "sms.png";

   var img_default = PATH_IMG + "perfil.jpg";

   let mi_nueva_imagen_perfil = "";

   if (user_img == "" || user_img == null || user_img == undefined) {
      mi_nueva_imagen_perfil = img_default;
   } else {
      mi_nueva_imagen_perfil = MI_RUTA_PROYECTO + user_img;
      //console.log(mi_nueva_imagen_perfil);
   }

   let url = datoCompletos.url;

   var nuevoMensaje =
      '<div class="message-feed media right blur-in" data-sid-id="' +
      sid +
      '" data-UUID="' +
      UUID +
      '" >' +
      '<div class="pull-right">' +
      '<div class="image-container-perfil">' +
      //'<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="" class="img-avatar" />' +
      '<img src="' +
      mi_nueva_imagen_perfil +
      '" alt="" class="img-avatar"  onerror="this.src=\'' +
      img_default +
      "'\"/>" +
      //'<img src="' +
      //tipo_producto_imagen +
      //'" alt="" class="' +
      //tipo_producto_imagen_class +
      //'" />' +
      "</div>" +
      "</div>" +
      '<div class="media-body media-body-change-display">' +
      '<div class="mf-content mf-content mf-content-documentos">' +
      "<div>" +
      '<video controls class="video-general">' +
      '<source src="' +
      url +
      '" />' +
      "Your browser does not support the audio element." +
      "</video>" +
      '<div class="caption_mensaje">' +
      '<span class="texto">' +
      mensaje +
      "</span>" +
      "</div>" +
      "</div>" +
      '<small class="mf-date fecha_y_palomitas">' +
      //inicio
      "<div>" +
      fecha_creacion +
      "</div>" +
      //---
      "<div>" +
      '<img class="palomita_texto" src="' +
      url_status_img +
      '" alt="" height="100%" width="' +
      tamaño_palomita +
      '" title="' +
      error_title +
      '" />' +
      '<img class="palomita_texto  " src="' +
      tipo_producto_imagen +
      '" style="width:22px; margin-top:-4px;" />' +
      //
      "</div>" +
      //FINAL
      "</small>" +
      "</div>" +
      "</div>" +
      "</div>";

   return nuevoMensaje;
}

function mensaje_video_sms_usuarios_socket(
   tipo_producto,
   error_codigo,
   status,
   sid,
   mensaje,
   fecha_creacion,
   user_img = "",
   UUID = "",
   datoCompletos = {},
) {
   var error_title =
      status == "failed"
         ? "Status: " + status + "\n\nCodigo (" + error_codigo + ") "
         : "Status: " + status;

   let url_status_img = PATH_IMG + "informacion.png";
   /* let tamaño_palomita =
      status == "read" ? "18px" : status == "wait" ? "16px" : "20px"; */
   let tamaño_palomita = "19px";

   let tipo_producto_imagen_class = "img-avatar-small-sms";
   let tipo_producto_imagen = PATH_IMG + "sms.png";

   var img_default = PATH_IMG + "perfil.jpg";

   let mi_nueva_imagen_perfil = "";

   if (user_img == "" || user_img == null || user_img == undefined) {
      mi_nueva_imagen_perfil = img_default;
   } else {
      mi_nueva_imagen_perfil = MI_RUTA_PROYECTO + user_img;
      //console.log(mi_nueva_imagen_perfil);
   }

   let url = datoCompletos.url;

   var nuevoMensaje =
      '<div class="message-feed media right blur-in" data-sid-id="' +
      sid +
      '" data-UUID="' +
      UUID +
      '" >' +
      '<div class="pull-right">' +
      '<div class="image-container-perfil">' +
      //'<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="" class="img-avatar" />' +
      '<img src="' +
      mi_nueva_imagen_perfil +
      '" alt="" class="img-avatar"  onerror="this.src=\'' +
      img_default +
      "'\"/>" +
      //'<img src="' +
      //tipo_producto_imagen +
      //'" alt="" class="' +
      //tipo_producto_imagen_class +
      //'" />' +
      "</div>" +
      "</div>" +
      '<div class="media-body media-body-change-display">' +
      '<div class="mf-content mf-content mf-content-documentos">' +
      "<div>" +
      '<video controls class="video-general">' +
      //'<source src="' +
      //url +
      //'" />' +
      "Your browser does not support the audio element." +
      "</video>" +
      '<div class="caption_mensaje">' +
      '<span class="texto">' +
      mensaje +
      "</span>" +
      "</div>" +
      "</div>" +
      '<small class="mf-date fecha_y_palomitas">' +
      //inicio
      "<div>" +
      fecha_creacion +
      "</div>" +
      //---
      "<div>" +
      '<img class="palomita_texto" src="' +
      url_status_img +
      '" alt="" height="100%" width="' +
      tamaño_palomita +
      '" title="' +
      error_title +
      '" />' +
      '<img class="palomita_texto  " src="' +
      tipo_producto_imagen +
      '" style="width:22px; margin-top:-4px;" />' +
      //
      "</div>" +
      //FINAL
      "</small>" +
      "</div>" +
      "</div>" +
      "</div>";

   return nuevoMensaje;
}

//------------FIN PLANTILLAS PARA SMS-----------------

// Función auxiliar para obtener la extensión del archivo
function obtenerExtension(url) {
   return url.split(".").pop();
}

//fin
function cabecera_contacto_seleccionado(
   numero_telefono = "",
   nombre_contacto = "",
   listado_html_select = "",
) {
   let img = PATH_IMG + "perfil.jpg";

   /* let contenidoHTML =
      '<div class="visible-xs-mi-clase" id="ms-menu-trigger">' +
      '<i class="fa fa-bars"></i>' +
      "</div>" +
      '<div class="pull-left hidden-xs cabecera_informacion">' +
      "<img " +
      'src="' +
      img +
      '" ' +
      'alt="" ' +
      'class="img-avatar m-r-10"' +
      "/>" +
      '<div class="lv-avatar pull-left"></div>' +
      '<span class="active-word-wrap">' +
      '<a href="#" class="text-color-dark">' +
      numero_telefono +
      "</a>" +
      "</span>" +
      "</div>" +
      '<ul class="ah-actions actions ocultarBarraOpcionesChat" >' +
      //marcar leidos
      "<li id='marcarChatLeido' title='Mark Chat Read' >" +
      '<i class="fa fa-check" style="font-size: 18px;margin-left: 10px;color: #6b709f;cursor:pointer;"></i>' +
      "</li>" +
      //add contact
      "<li id='abrirModalAgregarContacto' title='Add Contact'>" +
      '<i class="fa fa-user-plus" style="font-size: 18px;margin-left: 10px;color: #6b709f;cursor:pointer;"></i>' +
      "</li>" +
      //cerrar chat
      "<li class='CerrarChat' title='Close Chat'>" +
      '<i class="fa fa-times" style="font-size: 18px;margin-left: 10px;color: #6b709f;cursor:pointer;"></i>' +
      "</li>" +
      '<li class="dropdown">' +
      '<div   id="setting-offcanvas">' +
      '<i class="fa fa-bars" style="font-size: 18px;margin-left: 10px;color: #6b709f;cursor:pointer;"></i>' +
      "</div>" +
      "</li>" +
      "</ul>"; */

   let contenidoHTML =
      '<div class="visible-xs-mi-clase" id="ms-menu-trigger">' +
      '<i class="fa fa-bars"></i>' +
      "</div>" +
      "<div>" +
      '<div class="pull-left hidden-xs cabecera_informacion" style="width: 100%;">' +
      '<div class="row padding_responsivo_500px" style="max-width: 100%;">' +
      '<div class="col-12 col-sm-8">' +
      '<div class="row">' +
      '<div class="col-12 col-sm-6" style="border-right: 1px solid #b5b5b5;">' +
      '<p class="quitar_paddin_margen" style="font-weight: 600; color: #082645;">' +
      nombre_contacto +
      "</p>" +
      '<p class="quitar_paddin_margen" style="font-size: 11px;">' +
      numero_telefono +
      "</p>" +
      "</div>" +
      '<div class="col-12 col-sm-6 margin_responsivo_500px">' +
      '<select class="form-select form-select-sm tenerEtapaConversacionSelect estilo_select">' +
      listado_html_select +
      "</select>" +
      "</div>" +
      "</div>" +
      "</div>" +
      '<div class="col-12 col-sm-4 margin_responsivo_500px">' +
      '<ul class="actions ocultarBarraOpcionesChat" style="float: right;">' +
      '<li id="abrirEstadoConversacion" title="Status of the conversation">' +
      '<i class="fa fa-folder" style="font-size: 18px; margin-left: 10px; color: #434343; cursor: pointer;"></i>' +
      "</li>" +
      '<li id="marcarChatLeido" title="Mark Chat Read">' +
      '<i class="fa fa-check" style="font-size: 18px; margin-left: 10px; color: #434343; cursor: pointer;"></i>' +
      "</li>" +
      //'<li id="abrirModalAgregarContacto" title="Add Contact">' +
      //'<i class="fa fa-user-plus" style="font-size: 18px; margin-left: 10px; color: #434343; cursor: pointer;"></i>' +
      //"</li>" +
      '<li class="CerrarChat" title="Close Chat">' +
      '<i class="fa fa-times" style="font-size: 18px; margin-left: 10px; color: #434343; cursor: pointer;"></i>' +
      "</li>" +
      '<li class="dropdown">' +
      '<div id="setting-offcanvas">' +
      '<i class="fa fa-bars" style="font-size: 18px; margin-left: 10px; color: #434343; cursor: pointer;"></i>' +
      "</div>" +
      "</li>" +
      "</ul>" +
      "</div>" +
      "</div>" +
      "</div>" +
      "</div>";

   return contenidoHTML;
}

function quitar_cabecera_contacto_seleccionado() {
   // return '<div class="visible-xs-mi-clase" id="ms-menu-trigger"> <i class="fa fa-bars"></i></div>';

   return (
      '<div class="visible-xs-mi-clase" id="ms-menu-trigger">' +
      '    <i class="fa fa-bars"></i>' +
      "</div>" +
      '<div class="pull-left hidden-xs cabecera_informacion_choose_user">' +
      '    <span class="active-word-wrap">' +
      '        <a  style="cursor:pointer" class="choose_chat">You can choose a user to chat</a>' +
      "    </span>" +
      "</div>"
   );
}

function plantilla_option_select(value, text) {
   return '<option value="' + value + '">' + text + "</option>";
}

function contactos(data = {}) {
   let {
      id,
      number = "",
      custumer_id = "",
      staff_id = "",
      created_at = "",
      mensajes_no_leidos = "",
      nombre = "",
      email_custumers = "",
      phone_custumers = "",
      company_custumers = "",
      address_custumers = "",
      fullname_staff = "",
      username_staff = "",
      user_type_staff = "",
      phonenumber = "",
      fecha_humana = "",
      nombre_whatsapp = "",
      nombre_actual = "",
      nombre_etapa_conversacion = "",
      color_fondo_etapa_conversacion = "",
      color_texto_etapa_conversacion = "",
      ultimo_mensaje = "",
      chat_conversaciones_id = "", //este campo solo lo usandos en analisis de conversaciones
   } = data;

   //console.log("ultimo_mensaje");
   //console.log(ultimo_mensaje);

   if (number == null || number == undefined) {
      number = "";
   }

   if (nombre == null || nombre == undefined) {
      nombre = "";
   }

   if (isEmpty(nombre_whatsapp) == true) {
      nombre_whatsapp = "";
   }

   if (isEmpty(fullname_staff) == true) {
      fullname_staff = "";
   }

   if (isEmpty(fecha_humana) == true) {
      fecha_humana = "";
   }

   if (isEmpty(ultimo_mensaje) == true) {
      ultimo_mensaje = "";
   }

   mensajes_no_leidos =
      mensajes_no_leidos == "0" || mensajes_no_leidos == 0
         ? '<span class="badge-contactos badge  mi-badge" style="display: inline-block" style="display: inline-block">' +
           "" +
           "</span>"
         : '<span class="badge-contactos badge badge-colors mi-badge"  >' +
           mensajes_no_leidos +
           "</span>";

   let maxLength = 15; //20
   let maxLength_26 = 20; //20

   if (number.length >= maxLength) {
      number = number.substring(0, maxLength) + "...";
   }

   let nombre_original = nombre;

   if (nombre.length >= maxLength) {
      nombre = nombre.substring(0, maxLength) + "...";
   }

   let nombre_whatsapp_original = nombre_whatsapp || "";

   if (nombre_whatsapp.length >= maxLength) {
      nombre_whatsapp = nombre_whatsapp.substring(0, maxLength) + "...";
   }

   let fullname_staff_original = fullname_staff;

   if (fullname_staff.length >= maxLength) {
      fullname_staff = fullname_staff.substring(0, maxLength) + "...";
   }

   let ultimo_mensaje_original = ultimo_mensaje;

   if (ultimo_mensaje.length >= maxLength_26) {
      ultimo_mensaje = ultimo_mensaje.substring(0, maxLength_26) + "...";
   }

   let nombre_etapa = nombre_etapa_conversacion || ""; //15

   if (
      isEmpty(color_fondo_etapa_conversacion) == true ||
      isEmpty(color_texto_etapa_conversacion) == true
   ) {
      color_fondo_etapa_conversacion = "transparent" + ";";
      color_texto_etapa_conversacion = "white" + ";";
   }

   //color_fondo_etapa_conversacion = "",
   //color_texto_etapa_conversacion = "",

   if (nombre_etapa.length >= maxLength_26) {
      nombre_etapa = nombre_etapa.substring(0, maxLength_26) + "...";
   }

   let etapa_conversacion =
      isEmpty(nombre_etapa) == true
         ? ' <small class="list-group-item-text c-gray etapa_conversacion" ></small>'
         : ' <small class="list-group-item-text c-gray etapa_conversacion" title="' +
           nombre_etapa_conversacion +
           '" style="background-color: ' +
           color_fondo_etapa_conversacion +
           "; color: " +
           color_texto_etapa_conversacion +
           '; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;">' +
           nombre_etapa +
           "</small>";

   let nombre_abreviado = "";

   if (
      isEmpty(fullname_staff) == true ||
      isEmpty(staff_id) == true ||
      staff_id == 0
   ) {
      nombre_abreviado = "N/A";
   } else {
      let words = fullname_staff_original.split(" "); // Split into array of words
      nombre_abreviado = words[0].charAt(0).toUpperCase(); // First initial (e.g., "C")
      if (words.length > 1) {
         nombre_abreviado += words[1].charAt(0).toUpperCase(); // Second initial if available (e.g., "P")
      }
   }

   /* let ultimo_mensaje_original = ultimo_mensaje;

   if (ultimo_mensaje.length >= maxLength_26) {
      ultimo_mensaje = ultimo_mensaje.substring(0, maxLength_26) + "...";
   } */

   let claseStaffExiste =
      isEmpty(staff_id) == true || staff_id == 0
         ? " staff-sin-asignar "
         : " staff-asignado-a ";

   let existeStaff =
      '<span class="contacto_fullname_staff badge mi-badge reducir_tamano' +
      claseStaffExiste +
      '" title="' +
      fullname_staff_original +
      '" style="box-shadow:rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px">' +
      nombre_abreviado +
      "</span>";

   let img_contacto = PATH_IMG + "perfil.jpg";

   let nombre_auxiliar =
      (nombre == "Desconocido" || nombre == null || nombre == undefined) == true
         ? number
         : nombre;

   /* let existe_nombre_whatsapp =
      isEmpty(nombre_whatsapp) == true
         ? "Desconocido"
         : '<i> <small class="list-group-item-heading nombre_whatsapp" title="' + //contacto_nombre_contacto
           nombre_whatsapp_original +
           '">' +
           nombre_whatsapp +
           "</small> </i>" +
           "<br />"; */

   //let existe_nombre_whatsapp =
   //   isEmpty(nombre_whatsapp) == true
   //      ? "Desconocido"
   //      : '<i> <small class="list-group-item-heading nombre_whatsapp" title="' + //contacto_nombre_contacto
   //        nombre_whatsapp_original +
   //        '">' +
   //        nombre_whatsapp +
   //        "</small> </i>" +
   //        "<br />";

   let nuevo_nombre = "";
   let nuevo_titulo_nombre = "";

   let nuevo_estilo_nombre = "mi-texto-normal";

   if (nombre == "Desconocido") {
      nuevo_nombre =
         isEmpty(nombre_whatsapp) == true ? "Desconocido" : nombre_whatsapp;
      nuevo_titulo_nombre =
         isEmpty(nombre_whatsapp) == true
            ? "Desconocido"
            : nombre_whatsapp_original;

      nuevo_estilo_nombre =
         isEmpty(nombre_whatsapp) == true
            ? "mi-texto-normal"
            : "mi-texto-cursivo";
   } else {
      nuevo_nombre = nombre;
      nuevo_titulo_nombre = nombre_original;

      nuevo_estilo_nombre = "mi-texto-normal";
   }

   let plantilla_ultimo_mensaje =
      isEmpty(ultimo_mensaje) == true
         ? ""
         : "<br />" +
           '<small class="list-group-item-text c-gray ultimo_mensaje_div" title="' +
           ultimo_mensaje_original +
           '">' +
           ultimo_mensaje +
           "</small>";

   //console.log("ultimo_mensaje");
   //console.log(ultimo_mensaje);

   //'data-chat_conversaciones_id="' +
   //   chat_conversaciones_id +
   //   '" ' +

   let contactoHtml =
      '<a style="box-shadow:rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px; " class="list-group-item media item-contactos  " ' + //minimo-alto-contactos
      'data-nombre="' +
      nombre_actual +
      '" ' +
      'data-id_contacto="' +
      id +
      '" ' +
      'data-numero-contacto="' +
      number +
      '" ' +
      'data-chat_conversaciones_id="' +
      chat_conversaciones_id +
      '" ' +
      'data-nombre-contacto="' +
      nombre_auxiliar +
      '" style="border-radius:4px !important">' +
      '<div class="pull-left" style=" height: 100%; ">' +
      '<img src="' +
      img_contacto +
      '" alt="" class="img-avatar" />' +
      "</div>" +
      '<div class="active-display-inline" >' + // style="display: inline !important"
      //
      "<div style=' margin-bottom: 0px; '>" +
      '<small class="list-group-item-text c-gray contacto_nombre_contacto nombre_whatsapp div_nombre_whatsapp ' +
      nuevo_estilo_nombre +
      '"  title="' +
      nuevo_titulo_nombre +
      '">' +
      //nombre +
      nuevo_nombre +
      "</small>" +
      //fecha humana------------
      '<small class="fecha_humana" style="float: right; font-size: 9px; color: gray;" >' +
      fecha_humana +
      "</small>" +
      //fin de fecha humana-----
      "</div>" +
      //'<hr style=" padding: 0px; margin: 0px; border: 0; width: 100; ">' +
      //
      //'<div class="div_nombre_whatsapp">' +
      //para nombre contactos reales
      //existe_nombre_whatsapp +
      //
      //"</div>" +

      "<div class='dividir-columna'>" +
      "<div>" +
      '<small class="list-group-item-text c-gray" title="' +
      number +
      '">+' +
      number +
      "</small>" +
      //
      plantilla_ultimo_mensaje +
      //
      "</div>" +
      //
      "<div>" +
      etapa_conversacion +
      "</div>" +
      //fin div etapa conversacion
      "</div>" +
      //
      "</div>" +
      //
      //'<span class="badge-contactos badge badge-colors">' +
      //mensajes_no_leidos +
      //"</span>" +
      //
      '<div class="badge-container">' +
      //'<span class="badge-contactos badge badge-colors" style="display: inline-block" style="display: inline-block">' +
      //mensajes_no_leidos +
      //"</span>" +
      mensajes_no_leidos +
      //
      existeStaff +
      "</div>" +
      //
      "</a>";
   /* 
      <div class="badge-container">
         <span class="badge-contactos badge badge-colors" style="display: inline-block">1</span>
             
          
         <span
            class="badge-contactos badge badge-colors"
            style="display: inline-block"
            >2</span
         >
      </div>
 */

   return contactoHtml;
}

function cambiar_badge(numero_telefono, cantidad_mensajes_no_leidos) {
   var div = $('a[data-numero-contacto="' + numero_telefono + '"]');

   // Si el elemento <a> existe
   if (div.length) {
      // Seleccionamos el span dentro de este <a>
      var badge = div.find(".badge-contactos");

      cantidad_mensajes_no_leidos =
         cantidad_mensajes_no_leidos == 0 || cantidad_mensajes_no_leidos == "0"
            ? ""
            : cantidad_mensajes_no_leidos;

      // Actualizamos el texto del span con el nuevo valor
      badge.text(cantidad_mensajes_no_leidos);
   }
}

function cambiar_badge_id_contacto(
   numero_telefono,
   cantidad_mensajes_no_leidos,
) {
   var div = $('a[data-id_contacto="' + numero_telefono + '"]');

   // Si el elemento <a> existe
   if (div.length) {
      // Seleccionamos el span dentro de este <a>
      var badge = div.find(".badge-contactos");

      cantidad_mensajes_no_leidos =
         cantidad_mensajes_no_leidos == 0 || cantidad_mensajes_no_leidos == "0"
            ? ""
            : cantidad_mensajes_no_leidos;

      // Actualizamos el texto del span con el nuevo valor
      badge.text(cantidad_mensajes_no_leidos);
   }
}

//carga el chat
function cargar_mensajes_numeros_plantillas(chat_mensajes) {
   var chat_numero_html = "";

   //console.log("chat_mensajes xddd");
   //console.log(chat_mensajes);

   chat_mensajes.forEach((element) => {
      var {
         id,
         UUID,
         tipo_producto,
         error_codigo,
         error_mensaje,
         status,
         wam_id,
         phone_number_id,
         from,
         to,
         mensaje,
         url,
         url_original,
         filename,
         template_original,
         template_data,
         tipo_mensaje,
         db,
         esContacto,
         fecha_creacion,
         id_chat_number,
         donde_estamos,
         user_img,

         //info de sms
         sid,
      } = element;

      // mensaje = mensaje + " id: " + id;

      if (
         isEmpty(tipo_mensaje) == true &&
         isEmpty(tipo_producto) == true &&
         isEmpty(esContacto) == true &&
         isEmpty(status) == true
      ) {
         return;
      }

      if (tipo_producto == "sms") {
         //si se ha seleccionado el numero de contacto que caigan los mensajes

         if (esContacto == true) {
            if (tipo_mensaje == "text") {
               chat_numero_html += mensaje_texto_sms_clientes(
                  tipo_producto,
                  sid,
                  mensaje,
                  fecha_creacion,
                  UUID,
               );
            }

            if (tipo_mensaje == "image") {
               chat_numero_html += mensaje_image_sms_clientes(
                  tipo_producto,
                  sid,
                  mensaje,
                  fecha_creacion,
                  UUID,
                  element,
               );
            }

            if (tipo_mensaje == "document") {
               chat_numero_html += mensaje_document_sms_clientes(
                  tipo_producto,
                  sid,
                  mensaje,
                  fecha_creacion,
                  UUID,
                  element,
               );
            }

            if (tipo_mensaje == "video") {
               chat_numero_html += mensaje_video_sms_clientes(
                  tipo_producto,
                  sid,
                  mensaje,
                  fecha_creacion,
                  UUID,
                  element,
               );
            }

            if (tipo_mensaje == "audio") {
               chat_numero_html += mensaje_audio_sms_clientes(
                  tipo_producto,
                  sid,
                  mensaje,
                  fecha_creacion,
                  UUID,
                  element,
               );
            }
         } else {
            //si es aqui son mensajes de nostros

            if (tipo_mensaje == "text") {
               chat_numero_html += mensaje_texto_sms_usuarios(
                  tipo_producto,
                  error_codigo,
                  status,
                  sid,
                  mensaje,
                  fecha_creacion,
                  user_img,
                  UUID,
               );
            }

            if (tipo_mensaje == "image") {
               chat_numero_html += mensaje_image_sms_usuarios(
                  tipo_producto,
                  error_codigo,
                  status,
                  sid,
                  mensaje,
                  fecha_creacion,
                  user_img,
                  UUID,
                  element,
               );
            }

            if (tipo_mensaje == "document") {
               chat_numero_html += mensaje_documento_sms_usuarios(
                  tipo_producto,
                  error_codigo,
                  status,
                  sid,
                  mensaje,
                  fecha_creacion,
                  user_img,
                  UUID,
                  element,
               );
            }

            if (tipo_mensaje == "audio") {
               chat_numero_html += mensaje_audio_sms_usuarios(
                  tipo_producto,
                  error_codigo,
                  status,
                  sid,
                  mensaje,
                  fecha_creacion,
                  user_img,
                  UUID,
                  element,
               );
            }

            if (tipo_mensaje == "video") {
               chat_numero_html += mensaje_video_sms_usuarios(
                  tipo_producto,
                  error_codigo,
                  status,
                  sid,
                  mensaje,
                  fecha_creacion,
                  user_img,
                  UUID,
                  element,
               );
            }

            //
         }

         return;
      }

      //si pasa el tipo de producto validamos si no este vacio
      if (isEmpty(wam_id) == false) {
         if (esContacto == true) {
            //si es igual a true es por que viene de afuera, si es falso es porque usamos el api de whatapp

            if (tipo_mensaje == "unsupported") {
               chat_numero_html += mensaje_unsupported_whatsapp_clientes(
                  tipo_producto,
                  error_codigo,
                  error_mensaje,
                  status,
                  wam_id,
                  phone_number_id,
                  from,
                  to,
                  mensaje,
                  url,
                  tipo_mensaje,

                  db,

                  esContacto,
                  fecha_creacion,
                  "",
                  UUID,
               );
            }

            if (tipo_mensaje == "text") {
               chat_numero_html += mensaje_texto_whatsapp_clientes(
                  tipo_producto,
                  error_codigo,
                  error_mensaje,
                  status,
                  wam_id,
                  phone_number_id,
                  from,
                  to,
                  mensaje,
                  url,
                  tipo_mensaje,

                  db,

                  esContacto,
                  fecha_creacion,
                  "",
                  UUID,
               );
            }

            if (tipo_mensaje == "image") {
               chat_numero_html += mensaje_imagen_whatsapp_clientes(
                  tipo_producto,
                  error_codigo,
                  error_mensaje,
                  status,
                  wam_id,
                  phone_number_id,
                  from,
                  to,
                  mensaje,
                  url,
                  tipo_mensaje,
                  db,
                  esContacto,
                  fecha_creacion,
                  "",
                  url_original,
                  UUID,
               );
            }

            if (tipo_mensaje == "document") {
               chat_numero_html += mensaje_documentos_whatsapp_cliente(
                  tipo_producto,
                  error_codigo,
                  error_mensaje,
                  status,
                  wam_id,
                  phone_number_id,
                  from,
                  to,
                  mensaje,
                  url,
                  tipo_mensaje,
                  db,
                  esContacto,
                  fecha_creacion,
                  filename,
                  UUID,
               );
            }

            if (tipo_mensaje == "audio") {
               chat_numero_html += mensaje_audios_whatsapp_cliente(
                  tipo_producto,
                  error_codigo,
                  error_mensaje,
                  status,
                  wam_id,
                  phone_number_id,
                  from,
                  to,
                  mensaje,
                  url,
                  tipo_mensaje,
                  db,
                  esContacto,
                  fecha_creacion,
                  filename,
                  UUID,
               );
            }

            if (tipo_mensaje == "video") {
               chat_numero_html += mensaje_video_whatsapp_cliente(
                  tipo_producto,
                  error_codigo,
                  error_mensaje,
                  status,
                  wam_id,
                  phone_number_id,
                  from,
                  to,
                  mensaje,
                  url,
                  tipo_mensaje,
                  db,
                  esContacto,
                  fecha_creacion,
                  filename,
                  UUID,
               );
            }
         } else {
            /*  var error_title =
            status == "failed"
               ? "Codigo (" + error_codigo + ") " + error_mensaje
               : "";

         let url_status_img = status + ".png";
         let tamaño_palomita = status == "read" ? "18px" : "20px"; */

            //console.log(tipo_mensaje);

            if (tipo_mensaje == "text") {
               chat_numero_html += mensaje_texto_whatsapp_usuarios(
                  tipo_producto,
                  error_codigo,
                  error_mensaje,
                  status,
                  wam_id,
                  phone_number_id,
                  from,
                  to,
                  mensaje,
                  url,
                  tipo_mensaje,
                  db,
                  esContacto,
                  fecha_creacion,
                  user_img,
                  UUID,
               );
            }

            if (tipo_mensaje == "image") {
               chat_numero_html += mensaje_imagen_whatsapp_usuarios(
                  tipo_producto,
                  error_codigo,
                  error_mensaje,
                  status,
                  wam_id,
                  phone_number_id,
                  from,
                  to,
                  mensaje,
                  url,
                  tipo_mensaje,
                  db,
                  esContacto,
                  fecha_creacion,
                  user_img,
                  url_original,
                  UUID,
               );
            }

            if (tipo_mensaje == "document") {
               chat_numero_html += mensaje_documentos_whatsapp_usuarios(
                  tipo_producto,
                  error_codigo,
                  error_mensaje,
                  status,
                  wam_id,
                  phone_number_id,
                  from,
                  to,
                  mensaje,
                  url,
                  tipo_mensaje,
                  db,
                  esContacto,
                  fecha_creacion,
                  filename,
                  user_img,
                  UUID,
               );
            }

            if (tipo_mensaje == "audio") {
               chat_numero_html += mensaje_audios_whatsapp_usuarios(
                  tipo_producto,
                  error_codigo,
                  error_mensaje,
                  status,
                  wam_id,
                  phone_number_id,
                  from,
                  to,
                  mensaje,
                  url,
                  tipo_mensaje,
                  db,
                  esContacto,
                  fecha_creacion,
                  filename,
                  user_img,
                  UUID,
               );
            }

            if (tipo_mensaje == "video") {
               chat_numero_html += mensaje_video_whatsapp_usuarios(
                  tipo_producto,
                  error_codigo,
                  error_mensaje,
                  status,
                  wam_id,
                  phone_number_id,
                  from,
                  to,
                  mensaje,
                  url,
                  tipo_mensaje,
                  db,
                  esContacto,
                  fecha_creacion,
                  filename,
                  user_img,
                  UUID,
               );
            }

            if (tipo_mensaje == "template") {
               chat_numero_html += mensajes_templates_whatsapp_usuario(
                  id,
                  tipo_producto,
                  error_codigo,
                  error_mensaje,
                  status,
                  wam_id,
                  phone_number_id,
                  from,
                  to,
                  mensaje,
                  url,
                  filename,
                  template_original,
                  template_data,
                  tipo_mensaje,
                  db,
                  esContacto,
                  fecha_creacion,
                  id_chat_number,
                  donde_estamos,

                  //info de sms
                  sid,
                  user_img,

                  UUID,
               );
            }
         }
      }

      if (tipo_mensaje == "etapa_conversacion") {
         chat_numero_html +=
            mensaje_etapa_conversacion_whatsapp_usuarios(element);
      }

      if (tipo_mensaje == "comentario") {
         chat_numero_html += mensaje_comentarios_whatsapp_usuarios(element);
      }
   });

   $(".cuerpo_mensaje").prepend(chat_numero_html);
   cargando_imagen();
}

function cargar_select_staff(arr) {
   if (arr.length == 0) {
      return;
   }

   var html = "<option></option>";

   arr.forEach((element) => {
      let value = element["id"];
      let text = element["fullname"];
      html += plantilla_option_select(value, text);
   });

   return html;
}

function cargar_select_custumers(arr) {
   if (arr.length == 0) {
      return;
   }

   var html = "<option></option>";

   arr.forEach((element) => {
      let value = element["id"];
      let text = element["account"] + " - " + element["phone"];
      html += plantilla_option_select(value, text);
   });

   return html;
}

function cargar_select_grupos(arr) {
   if (arr.length == 0) {
      return;
   }

   var html = "<option></option>";

   arr.forEach((element) => {
      let value = element["id"];
      let text = element["gname"];
      html += plantilla_option_select(value, text);
   });

   return html;
}

//cuando seleccionamos un staff para asignarlo esto muestra la descripcion
function descripcion_seleccion_custumer_plantilla(data) {
   if (isEmpty(data) == true) {
      return;
   }

   //console.log("data_customer xd");
   //console.log(data);
   let htmlContent =
      '<div class="detalle_custumers">' +
      '<div class="items_details_custumers">' +
      "<strong>Account:</strong>" +
      '<span id="span_account_custumers">' +
      data["account"] +
      "</span>" +
      "</div>" +
      '<div class="items_details_custumers">' +
      "<strong>Email:</strong>" +
      '<span id="span_email_custumers">' +
      data["email"] +
      "</span>" +
      "</div>" +
      '<div class="items_details_custumers">' +
      "<strong>Phone:</strong>" +
      '<span id="span_phone_custumers">' +
      data["phone"] +
      "</span>" +
      "</div>" +
      '<div class="items_details_custumers">' +
      "<strong>Company:</strong>" +
      '<span id="span_company_custumers">' +
      data["company"] +
      "</span>" +
      "</div>" +
      '<div class="items_details_custumers">' +
      "<strong>Address:</strong>" +
      '<span id="span_address_custumers">' +
      data["address"] +
      "</span>" +
      "</div>" +
      "</div>";

   return htmlContent;
}

//cuando seleccionamos un customer para asignarlo esto muestra la descripcion
function descripcion_seleccion_staff_plantilla(data) {
   if (isEmpty(data) == true) {
      return;
   }

   //console.log("tener_contacto");
   //console.log(data);
   let htmlContent =
      '<div class="detalle_custumers">' +
      '<div class="items_details_custumers">' +
      "<strong>Username:</strong>" +
      '<span id="span_username_staff">' +
      data["username"] +
      "</span>" +
      "</div>" +
      '<div class="items_details_custumers">' +
      "<strong>Fullname:</strong>" +
      '<span id="span_fullname_staff">' +
      data["fullname"] +
      "</span>" +
      "</div>" +
      '<div class="items_details_custumers">' +
      "<strong>Phone Number:</strong>" +
      '<span id="span_phonenumber_staff">' +
      data["phonenumber"] +
      "</span>" +
      "</div>" +
      '<div class="items_details_custumers">' +
      "<strong>User Type:</strong>" +
      '<span id="span_user_type_staff">' +
      data["user_type"] +
      "</span>" +
      "</div>" +
      "</div>";

   return htmlContent;
}

function html_plantilla_descripcion_staff(data) {
   /* let username = "",
      fullname = "",
      phonenumber = "",
      user_type = ""; */

   if (isEmpty(data) == true) {
      return '<p style="color: black;text-align: center;"> No information to show</p>';
   }
   var htmlContent = "";

   if (isEmpty(data.username) == false) {
      htmlContent += `
    <p style="color: #32325d; font-weight: 600; margin-bottom: 0px;">
        Username:
    </p>
    <p style="color: black; margin-bottom: 10px;">
        ${data.username}:
    </p>
`;
   }

   if (isEmpty(data.fullname) == false) {
      htmlContent += `
    <p style="color: #32325d; font-weight: 600; margin-bottom: 0px;">
        Fullname:
    </p>
    <p style="color: black; margin-bottom: 10px;">
        ${data.fullname}:
    </p>
`;
   }

   if (isEmpty(data.phonenumber) == false) {
      htmlContent += `
    <p style="color: #32325d; font-weight: 600; margin-bottom: 0px;">
        Phone Number:
    </p>
    <p style="color: black; margin-bottom: 10px;">
        ${data.phonenumber}:
    </p>
`;
   }

   if (isEmpty(data.user_type) == false) {
      htmlContent += `
    <p style="color: #32325d; font-weight: 600; margin-bottom: 0px;">
        User Type:
    </p>
    <p style="color: black; margin-bottom: 10px;">
        ${data.user_type}:
    </p>
`;
   }
   //

   return htmlContent;
}

function html_plantilla_descripcion_custumer(data) {
   /*    let account = "",
      email = "",
      phone = "",
      company = "",
      address = ""; */

   if (isEmpty(data) == true) {
      return '<p style="color: black;text-align: center;"> No information to show</p>';
   }

   var htmlContent = "";

   /* {
    "id": 4,
    "account": "miguel de servante",
    "email": "miguel.servante@live.com",
    "phone": "50497747446",
    "company": "",
    "address": "3333"
} */

   if (isEmpty(data.account) == false) {
      htmlContent += `
    <p style="color: #32325d; font-weight: 600; margin-bottom: 0px;">
        Account:
    </p>
    <p style="color: black; margin-bottom: 10px;">
        ${data.account}:
    </p>
`;
   }

   if (isEmpty(data.email) == false) {
      htmlContent += `
    <p style="color: #32325d; font-weight: 600; margin-bottom: 0px;">
        Email:
    </p>
    <p style="color: black; margin-bottom: 10px;">
        ${data.email}:
    </p>
`;
   }

   if (isEmpty(data.phone) == false) {
      htmlContent += `
    <p style="color: #32325d; font-weight: 600; margin-bottom: 0px;">
        Phone:
    </p>
    <p style="color: black; margin-bottom: 10px;">
        ${data.phone}:
    </p>
`;
   }

   if (isEmpty(data.company) == false) {
      htmlContent += `
    <p style="color: #32325d; font-weight: 600; margin-bottom: 0px;">
        Company:
    </p>
    <p style="color: black; margin-bottom: 10px;">
        ${data.company}:
    </p>
`;
   }

   if (isEmpty(data.address) == false) {
      htmlContent += `
    <p style="color: #32325d; font-weight: 600; margin-bottom: 0px;">
        Address:
    </p>
    <p style="color: black; margin-bottom: 10px;">
        ${data.address}:
    </p>
`;
   }

   return htmlContent;
}

function tener_mensajes_de_plantillas(listado_plantillas) {
   var html_tabla_plantilla = "";
   listado_plantillas.forEach((element) => {
      let { category, id, language, name, status, sub_category, components } =
         element;

      let color = "";
      if (status == "APPROVED") {
         color = "badge bg-success";
      }
      if (status == "PENDING") {
         color = "badge bg-info text-dark";
      }
      if (status == "REJECTED") {
         color = "badge bg-danger";
      }

      html_tabla_plantilla +=
         "<tr>" +
         "<td class='centrar'>" +
         name +
         "</td>" +
         "<td class='centrar'>" +
         language +
         "</td>" +
         "<td class='centrar'><span class='" +
         color +
         "'>" +
         status +
         "</span></td>" +
         "<td class='centrar'>" +
         '<button class="btn btn-default usar_plantilla_seleccionada" data-id="' +
         id +
         '" style=" border-color: #d3cac0; border: 1px solid #d3cac0; ">Apply</button>' +
         "</td>" +
         "</tr>";
   });
   return html_tabla_plantilla;
}

function mensajes_templates_whatsapp_usuario(
   id,
   tipo_producto,
   error_codigo, //
   error_mensaje, //
   status, //
   wam_id, //
   phone_number_id,
   from,
   to,
   mensaje,
   url,
   filename,
   template_original, //
   template_data, //
   tipo_mensaje,
   db,
   esContacto,
   fecha_creacion, //
   id_chat_number,
   donde_estamos,

   //info de sms
   sid,
   user_img = "",
   UUID = "",
) {
   var error_title =
      status == "failed"
         ? "Codigo (" + error_codigo + ") " + error_mensaje
         : "";

   let url_status_img = PATH_IMG + status + ".png";
   let tamaño_palomita =
      status == "read" ? "18px" : status == "wait" ? "16px" : "20px";

   if (template_original != null && template_data != null) {
      let temp_templates_original = JSON.parse(template_original);
      let temp_templates_data = JSON.parse(template_data);

      let { components: components_original_templates } =
         temp_templates_original;

      //console.log("templates original");
      //console.log(components_original_templates);
      //console.log("templates data");
      //console.log(temp_templates_data);

      var mensaje_cabecera = "";
      var mensaje_body = "";
      var mensaje_footer = "";
      var mensaje_botones = "";

      components_original_templates.forEach((elementos) => {
         let { type, text, format, example, buttons } = elementos;

         if (type.toUpperCase() == "HEADER") {
            let formato_minuscula = format.toLowerCase();

            if (formato_minuscula == "text") {
               if (example != null || example != undefined) {
                  //console.log("temp_templates_data");
                  //console.log(temp_templates_data);

                  let contenido = temp_templates_data.find(
                     (data) =>
                        data.format == formato_minuscula && data.type == type,
                  );

                  if (contenido) {
                     mensaje_cabecera = text;

                     mensaje_cabecera = reemplazarComodinPorText(
                        mensaje_cabecera,
                        "{{1}}",
                        contenido.contenido,
                     );
                  } else {
                     mensaje_cabecera = text;
                  }
               } else {
                  mensaje_cabecera = text;
               }
            }

            if (formato_minuscula == "image") {
               mensaje_cabecera =
                  '<div class="contenedor_header_plantilla">' +
                  '<img src="' +
                  url +
                  '" alt="Selected Image" style="max-width: 100%; height: 180px; object-fit: contain; border-radius: 5px;">' +
                  "</div>";
            }

            if (formato_minuscula == "document") {
               mensaje_cabecera =
                  '<div class="contenedor_header_plantilla">' +
                  '<iframe src="' +
                  url +
                  '" style="width: 100%; height: 180px;" frameborder="0"></iframe>' +
                  "</div>";
            }

            if (formato_minuscula == "video") {
               mensaje_cabecera =
                  '<div class="contenedor_header_plantilla" style="min-height: 0px;">' +
                  '<video controls style="width: 100%; height: auto; border-radius: 5px;">' +
                  '<source src="' +
                  url +
                  '">' +
                  "Your browser does not support the video tag." +
                  "</video>" +
                  "</div>";
            }

            if (formato_minuscula == "location") {
               let contenido = temp_templates_data.find(
                  (data) =>
                     data.format == formato_minuscula && data.type == type,
               );

               mensaje_cabecera =
                  '<div class="plantilla-header">' +
                  '<div class="imagen_header_plantilla_location"></div>' +
                  '<p style="margin-bottom:0px;font-size: 11px; color: black;" class="p_headers_name_location">' +
                  contenido.name +
                  "</p>" +
                  '<p style="font-size: 11px; color: black;" class="p_headers_address_location">' +
                  contenido.address +
                  "</p>" +
                  "</div>";
            }
         }

         if (type.toUpperCase() == "BODY") {
            if (example != null || example != undefined) {
               let contenido_b = temp_templates_data.find(
                  (data) => data.type == type,
               );

               if (contenido_b) {
                  let tem_body_text = text;
                  contenido_b.contenido.forEach((element) => {
                     let { buscar, texto } = element;
                     tem_body_text = reemplazarComodinPorText(
                        tem_body_text,
                        buscar,
                        texto,
                     );
                  });

                  mensaje_body = tem_body_text; // Asegúrate de que `mensaje_body` no sobrescriba `mensaje_cabecera`
               } else {
                  mensaje_body = text;
               }
            } else {
               mensaje_body = text;
            }
         }

         if (type.toUpperCase() == "FOOTER") {
            mensaje_footer = text;
         }

         if (type.toUpperCase() == "BUTTONS") {
            mensaje_botones = '<div class="mensajes_botones">';
            buttons.forEach((element, index, array) => {
               let typeButtonValue = element.type;
               let textButtonValue = element.text;
               let required = element.example;
               var valueButtonValue = "";

               let img = "";
               let style = "";
               if (typeButtonValue == "PHONE_NUMBER") {
                  img = PATH_IMG + "telefono.png";
                  valueButtonValue = element.phone_number;
               }

               if (typeButtonValue == "URL") {
                  img = PATH_IMG + "url_icono_plantilla.png";
                  valueButtonValue = element.url;
               }

               if (typeButtonValue == "COPY_CODE") {
                  valueButtonValue = element.example[0];
                  img = PATH_IMG + "copiar_icono_plantilla.png";
                  style = "style='padding: 1px;'";
               }

               if (img == "") {
                  img = PATH_IMG + " ";
               }

               // Genera el HTML para la vista previa
               mensaje_botones +=
                  '<div class="div_mensaje_boton">' +
                  '<img src="' +
                  img +
                  '" class="icono_plantilla" ' +
                  style +
                  '> <a   class="angotar_mensajes_botones">' +
                  textButtonValue +
                  "</a>" +
                  "</div>";

               // Añade el <hr> solo si no es el último elemento
               if (index !== array.length - 1) {
                  mensaje_botones += '<hr class="class_hr" />';
               }
            });

            mensaje_botones += "</div>";
         }
      });

      // Construcción del nuevo HTML
      var imageSrc = "https://bootdey.com/img/Content/avatar/avatar1.png"; // Ejemplo de URL de imagen

      var textHeader =
         isEmpty(mensaje_cabecera) == false
            ? "<p class='texto_header_mensaje'>" + mensaje_cabecera + "</p>"
            : "";
      var textFooter = isEmpty(mensaje_footer) == true ? "" : mensaje_footer;

      /* var buttonHTML =
         '<div class="div_mensaje_boton">' +
         '<img src="./img/telefono.png" class="icono_plantilla" />' +
         '<a href="#" class="angotar_mensajes_botones">Llamar</a>' +
         '</div><hr class="class_hr" />'; */

      let img_whatsapp = PATH_IMG + "whatsapp.png";
      var img_default = PATH_IMG + "perfil.jpg";

      let mi_nueva_imagen_perfil = "";

      if (user_img == "" || user_img == null || user_img == undefined) {
         mi_nueva_imagen_perfil = img_default;
      } else {
         mi_nueva_imagen_perfil = MI_RUTA_PROYECTO + user_img;
         //console.log(mi_nueva_imagen_perfil);
      }

      // Construcción del nuevo HTML
      var nuevoMensaje =
         '<div class="message-feed media right blur-in" data-wam-id="' +
         wam_id +
         '" data-UUID="' +
         UUID +
         '" >' +
         '<div class="pull-right">' +
         '<div class="image-container-perfil">' +
         '<img src="' +
         mi_nueva_imagen_perfil +
         '" alt="" class="img-avatar"  onerror="this.src=\'' +
         img_default +
         "'\"/>" +
         //'<img src="' +
         //img_whatsapp +
         //'" alt="" class="img-avatar-small" />' +
         "</div>" +
         "</div>" +
         '<div class="media-body media-body-change-display">' +
         '<div class="mf-content mf-content-documentos">' +
         '<div class="palomitas">' +
         '<div class="plantilla-header-mensaje">' +
         textHeader + // Variable de contenido aquí
         "</div>" +
         '<div class="plantilla-body-mensaje">' +
         '<p class="texto_body_mensaje">' +
         mensaje_body +
         "</p>" +
         "</div>" +
         '<div class="plantilla-footer-mensaje">' +
         '<span class="texto_footer_mensaje">' +
         textFooter + // Variable de contenido aquí
         "</span>" +
         "</div>" +
         "</div>" +
         '<small class="mf-date fecha_y_palomitas">' +
         "<div>" +
         fecha_creacion +
         "</div>" +
         "<div>" +
         //tipo producto
         '<img class="imagen_producto" src="' +
         img_whatsapp +
         '" alt="" width="' +
         tamaño_palomita +
         '" />' +
         //
         '<img class="palomita_texto margin_left_10" src="' +
         url_status_img +
         '" alt="" width="' +
         tamaño_palomita +
         '" title="' +
         error_title +
         '" />' +
         "</div>" +
         "</small>" +
         mensaje_botones +
         "</div>" +
         "</div>" +
         "</div>";

      // Puedes usar `nuevoMensaje` para insertar en el DOM

      return nuevoMensaje;
   }
}

function mensajes_templates_whatsapp_usuario_cargar_socket(
   id,
   tipo_producto,
   error_codigo, //
   error_mensaje, //
   status, //
   wam_id, //
   phone_number_id,
   from,
   to,
   mensaje,
   url,
   filename,
   template_original, //
   template_data, //
   tipo_mensaje,
   db,
   esContacto,
   fecha_creacion, //
   id_chat_number,
   donde_estamos,

   //info de sms
   sid,
   user_img = "",
   UUID = "",
) {
   console.log("QUE AQUI ESTA EL PROBLEMA --------");

   var error_title =
      status == "failed"
         ? "Codigo (" + error_codigo + ") " + error_mensaje
         : "";

   let url_status_img = PATH_IMG + status + ".png";
   let tamaño_palomita =
      status == "read" ? "18px" : status == "wait" ? "16px" : "20px";

   if (template_original != null && template_data != null) {
      let temp_templates_original = JSON.parse(template_original);
      let temp_templates_data = JSON.parse(template_data);

      let { components: components_original_templates } =
         temp_templates_original;

      //console.log("templates original");
      //console.log(components_original_templates);
      //console.log("templates data");
      //console.log(temp_templates_data);

      var mensaje_cabecera = "";
      var mensaje_body = "";
      var mensaje_footer = "";
      var mensaje_botones = "";

      components_original_templates.forEach((elementos) => {
         let { type, text, format, example, buttons } = elementos;

         if (type == "HEADER") {
            let formato_minuscula = format.toLowerCase();

            if (formato_minuscula == "text") {
               if (example != null || example != undefined) {
                  let contenido = temp_templates_data.find(
                     (data) =>
                        data.format == formato_minuscula && data.type == type,
                  );

                  mensaje_cabecera = text;

                  mensaje_cabecera = reemplazarComodinPorText(
                     mensaje_cabecera,
                     "{{1}}",
                     contenido.contenido,
                  );
               } else {
                  mensaje_cabecera = text;
               }
            }

            if (formato_minuscula == "image") {
               mensaje_cabecera =
                  '<div class="contenedor_header_plantilla">' +
                  '<img src="' +
                  url +
                  '" alt="Selected Image" style="max-width: 100%; height: 180px; object-fit: contain; border-radius: 5px;">' +
                  "</div>";
            }

            if (formato_minuscula == "document") {
               mensaje_cabecera =
                  '<div class="contenedor_header_plantilla">' +
                  '<iframe src="' +
                  url +
                  '" style="width: 100%; height: 180px;" frameborder="0"></iframe>' +
                  "</div>";
            }

            if (formato_minuscula == "video") {
               mensaje_cabecera =
                  '<div class="contenedor_header_plantilla" style="min-height: 0px;">' +
                  '<video controls style="width: 100%; height: auto; border-radius: 5px;">' +
                  /*  '<source src="' +
                  url +
                  '">' + */
                  "Your browser does not support the video tag." +
                  "</video>" +
                  "</div>";
            }

            if (formato_minuscula == "location") {
               let contenido = temp_templates_data.find(
                  (data) =>
                     data.format == formato_minuscula && data.type == type,
               );

               mensaje_cabecera =
                  '<div class="plantilla-header">' +
                  '<div class="imagen_header_plantilla_location"></div>' +
                  '<p style="margin-bottom:0px;font-size: 11px; color: black;" class="p_headers_name_location">' +
                  contenido.name +
                  "</p>" +
                  '<p style="font-size: 11px; color: black;" class="p_headers_address_location">' +
                  contenido.address +
                  "</p>" +
                  "</div>";
            }
         }

         if (type == "BODY") {
            if (example != null || example != undefined) {
               let contenido_b = temp_templates_data.find(
                  (data) => data.type == type,
               );

               if (contenido_b) {
                  let tem_body_text = text;
                  contenido_b.contenido.forEach((element) => {
                     let { buscar, texto } = element;
                     tem_body_text = reemplazarComodinPorText(
                        tem_body_text,
                        buscar,
                        texto,
                     );
                  });

                  mensaje_body = tem_body_text; // Asegúrate de que `mensaje_body` no sobrescriba `mensaje_cabecera`
               }
            } else {
               mensaje_body = text;
            }
         }

         if (type == "FOOTER") {
            mensaje_footer = text;
         }

         if (type == "BUTTONS") {
            mensaje_botones = '<div class="mensajes_botones">';

            buttons.forEach((element, index, array) => {
               let typeButtonValue = element.type;
               let textButtonValue = element.text;
               let required = element.example;
               var valueButtonValue = "";

               let img_whatsapp = PATH_IMG + "whatsapp.png";

               let img = "";
               let style = "";
               if (typeButtonValue == "PHONE_NUMBER") {
                  img = PATH_IMG + "telefono.png";
                  valueButtonValue = element.phone_number;
               }

               if (typeButtonValue == "URL") {
                  img = PATH_IMG + "url_icono_plantilla.png";
                  valueButtonValue = element.url;
               }

               if (typeButtonValue == "COPY_CODE") {
                  valueButtonValue = element.example[0];
                  img = PATH_IMG + "copiar_icono_plantilla.png";
                  style = "style='padding: 1px;'";
               }

               if (img == "") {
                  img = PATH_IMG + " ";
               }

               // Genera el HTML para la vista previa
               mensaje_botones +=
                  '<div class="div_mensaje_boton">' +
                  '<img src="' +
                  img +
                  '" class="icono_plantilla" ' +
                  style +
                  '> <a   class="angotar_mensajes_botones">' +
                  textButtonValue +
                  "</a>" +
                  "</div>";

               // Añade el <hr> solo si no es el último elemento
               if (index !== array.length - 1) {
                  mensaje_botones += '<hr class="class_hr" />';
               }
            });

            mensaje_botones += "</div>";
         }
      });

      // Construcción del nuevo HTML
      var imageSrc = "https://bootdey.com/img/Content/avatar/avatar1.png"; // Ejemplo de URL de imagen

      var textHeader =
         isEmpty(mensaje_cabecera) == false
            ? "<p class='texto_header_mensaje'>" + mensaje_cabecera + "</p>"
            : "";
      var textFooter = isEmpty(mensaje_footer) == true ? "" : mensaje_footer;

      /* var buttonHTML =
         '<div class="div_mensaje_boton">' +
         '<img src="./img/telefono.png" class="icono_plantilla" />' +
         '<a href="#" class="angotar_mensajes_botones">Llamar</a>' +
         '</div><hr class="class_hr" />'; */

      let img_whatsapp = PATH_IMG + "whatsapp.png";
      var img_default = PATH_IMG + "perfil.jpg";

      let mi_nueva_imagen_perfil = "";

      if (user_img == "" || user_img == null || user_img == undefined) {
         mi_nueva_imagen_perfil = img_default;
      } else {
         mi_nueva_imagen_perfil = MI_RUTA_PROYECTO + user_img;
         //console.log(mi_nueva_imagen_perfil);
      }

      // Construcción del nuevo HTML
      var nuevoMensaje =
         //'<div class="message-feed media right blur-in" data-wam-id="' +
         //wam_id +
         //'" data-uuid="' +
         //UUID +
         //'">' +

         '<div class="message-feed media right blur-in" data-wam-id="' +
         wam_id +
         '" data-UUID="' +
         UUID +
         '" >' +
         '<div class="pull-right">' +
         '<div class="image-container-perfil">' +
         '<img src="' +
         mi_nueva_imagen_perfil +
         '" alt="" class="img-avatar"  onerror="this.src=\'' +
         img_default +
         "'\"/>" +
         //'<img src="' +
         //img_whatsapp +
         //'" alt="" class="img-avatar-small" />' +
         "</div>" +
         "</div>" +
         '<div class="media-body media-body-change-display">' +
         '<div class="mf-content mf-content-documentos">' +
         '<div class="palomitas">' +
         '<div class="plantilla-header-mensaje">' +
         textHeader + // Variable de contenido aquí
         "</div>" +
         '<div class="plantilla-body-mensaje">' +
         '<p class="texto_body_mensaje">' +
         mensaje_body +
         "</p>" +
         "</div>" +
         '<div class="plantilla-footer-mensaje">' +
         '<span class="texto_footer_mensaje">' +
         textFooter + // Variable de contenido aquí
         "</span>" +
         "</div>" +
         "</div>" +
         '<small class="mf-date fecha_y_palomitas">' +
         "<div>" +
         fecha_creacion +
         "</div>" +
         "<div>" +
         //tipo producto
         '<img class="imagen_producto" src="' +
         img_whatsapp +
         '" alt="" width="' +
         tamaño_palomita +
         '" />' +
         //

         '<img class="palomita_texto margin_left_10" src="' +
         url_status_img +
         '" alt="" width="' +
         tamaño_palomita +
         '" title="' +
         error_title +
         '"  />' +
         "</div>" +
         "</small>" +
         mensaje_botones +
         "</div>" +
         "</div>" +
         "</div>";

      // Puedes usar `nuevoMensaje` para insertar en el DOM

      return nuevoMensaje;
   }
}

function select_cabeceras_grupos(arr) {
   if (arr.length == 0) {
      return;
   }

   var html = '<option value="0">' + "None" + "</option>";

   arr.forEach((element) => {
      let value = element;
      /* let value = element["id"];
      let text = element["gname"]; */
      html += plantilla_option_select(value, "contact." + value);
   });

   return html;
}

function configuracion_whatsapp_other_html(arreglo) {
   let html = "";

   arreglo.forEach(function (element) {
      let {
         id,
         identifier,
         token,
         phone,
         phone_identifier,
         whatsapp_business_account_identifier,
         app_Identifier,
         version,
         status,
         fecha_creacion,
         sms_account_sid,
         sms_auth_token,
         sms_phone_number,
         enable_whatsapp,
         enable_twilio,
         zona_horaria,
      } = element;

      let texto = "";

      texto = texto + identifier;

      if (enable_whatsapp == 1 || enable_whatsapp == "1") {
         if (isEmpty(phone) == false) {
            texto = texto + " - WS(+" + phone + ")";
         }
      }

      if (enable_twilio == 1 || enable_twilio == "1") {
         if (isEmpty(sms_phone_number) == false) {
            texto = texto + " - TW(+" + sms_phone_number + ")";
         }
      }

      html +=
         // '<li  > ' +
         "<li " +
         'class="item_config" ' +
         'data-enable-whatsapp="' +
         enable_whatsapp +
         '" ' +
         'data-enable-twilio="' +
         enable_twilio +
         '" ' +
         'data-id="' +
         id +
         '" ' +
         'data-identifier="' +
         identifier +
         '" ' +
         'data-token="' +
         token +
         '" ' +
         'data-phone="' +
         phone +
         '" ' +
         'data-phone-identifier="' +
         phone_identifier +
         '" ' +
         'data-whatsapp-business-account-identifier="' +
         whatsapp_business_account_identifier +
         '" ' +
         'data-app-identifier="' +
         app_Identifier +
         '" ' +
         'data-version="' +
         version +
         '" ' +
         'data-status="' +
         status +
         '" ' +
         'data-fecha-creacion="' +
         fecha_creacion +
         '" ' +
         'data-sms-account-sid="' +
         sms_account_sid +
         '" ' +
         'data-sms-auth-token="' +
         sms_auth_token +
         '" ' +
         'data-zona_horaria="' +
         zona_horaria +
         '" ' +
         'data-sms-phone-number="' +
         sms_phone_number +
         '">' +
         texto +
         "</li>";
      //"</li>";
   });

   return html;
}

function tabla_customers(arreglo) {
   let html = "";

   arreglo.forEach(function (element) {
      let { id, account, email, phone, company, address } = element;

      html +=
         "<tr>" +
         "<td class='centrar'>" +
         account +
         "</td>" +
         "<td class='centrar'>" +
         email +
         "</td>" +
         "<td class='centrar'>" +
         phone +
         "</td>" +
         "<td class='centrar'>" +
         address +
         "</td>" +
         "<td class='centrar'>" +
         "<button class='btn  btn_add_customer_chat' type='button' data-id_customers_chat='" +
         id +
         "' style='border-color: #d3cac0;border: 1px solid #d3cac0;background-color: white;'>Add</button>" +
         "</td>" +
         "</tr>";
   });

   return html;
}

function tabla_html_customers(arreglo) {
   let html = "";

   /*
   "id": 1,
            "account": "Maria Gonzales",
            "phone": "50497747446",
            "email": "maria@live.com",
            "address": "SPS"

   */

   arreglo.forEach(function (element) {
      let { id, account, phone, email, address } = element;

      html +=
         "<tr>" +
         //
         "<td class='centrar'>" +
         account +
         "</td>" +
         //
         "<td class='centrar'>" +
         phone +
         "</td>" +
         //
         "<td class='centrar'>" +
         email +
         "</td>" +
         //
         "<td class='centrar'>" +
         address +
         "</td>" +
         //
         "<td class='centrar'>" +
         "<button class='btn  btn_add_cliente_contacts' type='button' data-cliente_id='" +
         id +
         "' style='border-color: #d3cac0;border: 1px solid #d3cac0;background-color: white;'>Add</button>" +
         "</td>" +
         "</tr>";
   });

   /*
   <td class="centrar">Juan</td>
                                    <td class="centrar">Juan@live.com</td>
                                    <td class="centrar">Satelite</td>
                                    <td class="centrar">
                                       <button
                                          class="btn btn-primary"
                                          type="button"
                                       >
                                          Add
                                       </button>
                                    </td>
                                    */

   return html;
}

function tabla_detalle_ingresos_clientes(arreglo) {
   let html = "";

   arreglo.forEach(function (element) {
      let { name_products, date, amount, qty, invoices } = element;

      html +=
         "<tr>" +
         "<td class='centrar'>" +
         name_products +
         "</td>" +
         "<td class='centrar'>" +
         date +
         "</td>" +
         "<td class='centrar'>" +
         amount +
         "</td>" +
         "<td class='centrar'>" +
         invoices +
         "</td>" +
         //"<td class='centrar'>" +
         //"<button class='btn  btn_add_customer_chat' type='button' data-id_customers_chat='" +
         //id +
         //"' style='border-color: #d3cac0;border: 1px solid #d3cac0;background-color: white;'>Add</button>" +
         //"</td>" +
         "</tr>";
   });

   return html;
}

function tabla_html_staff(arreglo) {
   let html = "";

   /*
  {
    "id": 15,
    "username": "adm@measisto.com",
    "fullname": "Luis Rivera",
    "phonenumber": "99889999",
    "user_type": "Admin"
}

   */

   arreglo.forEach(function (element) {
      let { id, username, fullname, phonenumber, user_type } = element;

      html +=
         "<tr>" +
         //
         "<td class='centrar'>" +
         fullname +
         "</td>" +
         //
         "<td class='centrar'>" +
         username +
         "</td>" +
         //
         "<td class='centrar'>" +
         user_type +
         "</td>" +
         //
         "<td class='centrar'>" +
         "<button class='btn  btn_add_staff_contacts' type='button' data-staff_id='" +
         id +
         "' style='border-color: #d3cac0;border: 1px solid #d3cac0;background-color: white;'>Add</button>" +
         "</td>" +
         "</tr>";
   });

   return html;
}

function html_card_conversaciones(arreglo) {
   let html = "";

   // {
   //         "fecha_iniciada": "21 de May del 2025",
   //         "usuario_finalizo": "cesar pineda",
   //         "fecha_finalizada": "21 de May del 2025",
   //         "motivo_conversacion": "El cliente acepto",
   //         "ventana_etapa_conversacion": "Closed-Won",
   //         "producto_nombre": "producto mantenimiento computadoras",
   //         "fecha_sugerencia_contacto": "22 de May del 2025"
   //     }

   arreglo.forEach(function (element) {
      let {
         fecha_iniciada = "",
         usuario_finalizo = "",
         fecha_finalizada = "",
         motivo_conversacion = "",
         ventana_etapa_conversacion = "",
         producto_nombre = "",
         fecha_sugerencia_contacto = "",
      } = element;

      if (isEmpty(fecha_iniciada) == true) {
         fecha_iniciada = "";
      }

      if (isEmpty(usuario_finalizo) == true) {
         usuario_finalizo = "";
      }

      if (isEmpty(fecha_finalizada) == true) {
         fecha_finalizada = "";
      }

      if (isEmpty(motivo_conversacion) == true) {
         motivo_conversacion = "";
      }

      if (isEmpty(ventana_etapa_conversacion) == true) {
         ventana_etapa_conversacion = "";
      }

      if (isEmpty(producto_nombre) == true) {
         producto_nombre = "";
      }

      if (isEmpty(fecha_sugerencia_contacto) == true) {
         fecha_sugerencia_contacto = "";
      }

      html += `
<div class="card mb-3" style="margin: 13px; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;">
    <div class="card-body position-relative">
        <div class="row">
            <div class="col-lg-12">
                <h3>Conversation history</h3>
                <hr class="mt-2"/>
                <div class="mb-3 row">
                    <label class="col-sm-3">
                        <span class="h6">Start date</span>
                    </label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control form-control-sm" disabled value="${fecha_iniciada}"/>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label class="col-sm-3">
                        <span class="h6">End date</span>
                    </label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control form-control-sm" disabled value="${fecha_finalizada}"/>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label class="col-sm-3">
                        <span class="h6">User ends</span>
                    </label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control form-control-sm" disabled value="${usuario_finalizo}"/>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label class="col-sm-3">
                        <span class="h6">Reason for the conversation</span>
                    </label>
                    <div class="col-sm-9">
                        <textarea class="form-control form-control-sm" rows="4" disabled>${motivo_conversacion
                           .replace(/</g, "&lt;")
                           .replace(/>/g, "&gt;")}</textarea>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label class="col-sm-3">
                        <span class="h6">Status of the sale</span>
                    </label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control form-control-sm" disabled value="${ventana_etapa_conversacion.replace(
                           /"/g,
                           "&quot;",
                        )}"/>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label class="col-sm-3">
                        <span class="h6">Producto de interes</span>
                    </label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control form-control-sm" disabled value="${producto_nombre.replace(
                           /"/g,
                           "&quot;",
                        )}"/>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label class="col-sm-3">
                        <span class="h6">Suggest next date contact</span>
                    </label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control form-control-sm" disabled value="${fecha_sugerencia_contacto.replace(
                           /"/g,
                           "&quot;",
                        )}"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
`;
   });

   if (arreglo.length == 0) {
      html += `
<div class="card mb-3" style="margin: 13px; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;">
    <div class="card-body position-relative">
        <div class="row">
            <div class="col-lg-12">
                <h3>Conversation history</h3>
                <hr class="mt-2"/>
               
               
               <h4 style="text-align:center; margin:0px">No information to display</h4>
               
                
            </div>
        </div>
    </div>
</div>
`;
   }

   return html;
}
