let PATH_IMG = $(".tener_path_img").val();
let MI_IMAGEN_PERFIL = $("#IMAGEN_PERFIL").val();

//PLANTILLAS PARA USUARIOS(usando api whatsapp bussinness)
function mensaje_texto_whatsapp_usuarios(data) {
   let {
      id,
      from_user_id,
      to_user_id,
      img_to_user,
      rol_to_user,
      img_from_user,
      rol_from_user,
      mensaje,
      url,
      filename,
      tipo_mensaje,
      fecha_creacion,
      status,
      unique_user_id,
      db,
      user_id,
   } = data;

   var error_title = status;

   let url_status_img = PATH_IMG + status + ".png";

   let tamaño_palomita =
      status == "read" ? "18px" : status == "wait" ? "16px" : "20px";

   let tipo_producto_imagen_class = "img-avatar-small";

   let tipo_producto_imagen = PATH_IMG + "icono_verificado.png";

   let es_admin_verificado =
      rol_from_user == "0"
         ? '<img src="' +
           tipo_producto_imagen +
           '" alt="" class="' +
           tipo_producto_imagen_class +
           '" />'
         : "";

   let imagenRegex = /\.(jpg|jpeg|png|gif|bmp|webp|svg)$/i;
   let esImagen = imagenRegex.test(img_from_user);
   if (!esImagen) {
      img_from_user = PATH_IMG + "perfil.jpg";
   }

   var nuevoMensaje =
      '<div class="message-feed media" data-menssage-id="' +
      id +
      '">' +
      '<div class="pull-left">' +
      '<div class="image-container-perfil">' +
      '<img src="' +
      img_from_user +
      '" alt="" onerror="this.src=\'' +
      PATH_IMG +
      'perfil.jpg\'" class="img-avatar" />' +
      es_admin_verificado +
      "</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>" +
      '<img class="palomita_texto" src="' +
      url_status_img +
      '" alt="" width="' +
      tamaño_palomita +
      '" title="' +
      error_title +
      '" />' +
      "</small>" +
      "</div>" +
      "</div>" +
      "</div>";

   return nuevoMensaje;
}

function mensaje_imagen_whatsapp_usuarios(data) {
   let {
      id,
      from_user_id,
      to_user_id,
      img_to_user,
      rol_to_user,
      img_from_user,
      rol_from_user,
      mensaje,
      url,
      filename,
      tipo_mensaje,
      fecha_creacion,
      status,
      unique_user_id,
      db,
      user_id,
   } = data;

   let imagen_url = url;

   var error_title = status;

   let url_status_img = PATH_IMG + status + ".png";

   let tamaño_palomita =
      status == "read" ? "18px" : status == "wait" ? "16px" : "20px";

   let tipo_producto_imagen_class = "img-avatar-small";

   let tipo_producto_imagen = PATH_IMG + "icono_verificado.png";

   let es_admin_verificado =
      rol_from_user == "0"
         ? '<img src="' +
           tipo_producto_imagen +
           '" alt="" class="' +
           tipo_producto_imagen_class +
           '" />'
         : "";

   let imagenRegex = /\.(jpg|jpeg|png|gif|bmp|webp|svg)$/i;
   let esImagen = imagenRegex.test(img_from_user);
   if (!esImagen) {
      img_from_user = PATH_IMG + "perfil.jpg";
   }

   var nuevoMensaje =
      '<div class="message-feed media" data-menssage-id="' +
      id +
      '">' +
      '<div class="pull-left">' +
      '<div class="image-container-perfil">' +
      '<img src="' +
      img_from_user +
      '" alt="" onerror="this.src=\'' +
      PATH_IMG +
      'perfil.jpg\'" class="img-avatar" />' +
      es_admin_verificado +
      "</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">' +
      '<a href="' +
      imagen_url +
      '" target="_blank">' +
      '<div class="spinner">' +
      '<i class="fa fa-circle-o-notch fa-spin"></i>' +
      "</div>" +
      '<img class="imagen_imagen" src="' +
      imagen_url +
      '" alt="" style="display: none" onerror="this.src=\'img/error_imagen.png\'" />' +
      "</a>" +
      "</div>" +
      "</div>" +
      '<div class="caption_mensaje">' +
      '<span class="texto">' +
      mensaje +
      "</span>" +
      "</div>" +
      '<small class="mf-date fecha_y_palomitas">' +
      "<div>" +
      fecha_creacion +
      "</div>" +
      '<img class="palomita_texto" src="' +
      url_status_img +
      '" alt="" title="' +
      error_title +
      '" width="' +
      tamaño_palomita +
      '" />' +
      "</small>" +
      "</div>" +
      "</div>" +
      "</div>";

   return nuevoMensaje;
}

function mensaje_documentos_whatsapp_usuarios(data) {
   let {
      id,
      from_user_id,
      to_user_id,
      img_to_user,
      rol_to_user,
      img_from_user,
      rol_from_user,
      mensaje,
      url,
      filename,
      tipo_mensaje,
      fecha_creacion,
      status,
      unique_user_id,
      db,
      user_id,
   } = data;

   let imagen_url = url;

   var error_title = status;

   let url_status_img = PATH_IMG + status + ".png";

   let tamaño_palomita =
      status == "read" ? "18px" : status == "wait" ? "16px" : "20px";

   let tipo_producto_imagen_class = "img-avatar-small";

   let tipo_producto_imagen = PATH_IMG + "icono_verificado.png";

   let es_admin_verificado =
      rol_from_user == "0"
         ? '<img src="' +
           tipo_producto_imagen +
           '" alt="" class="' +
           tipo_producto_imagen_class +
           '" />'
         : "";

   let imagenRegex = /\.(jpg|jpeg|png|gif|bmp|webp|svg)$/i;
   let esImagen = imagenRegex.test(img_from_user);
   if (!esImagen) {
      img_from_user = PATH_IMG + "perfil.jpg";
   }

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

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

   var nuevoMensaje =
      '<div class="message-feed media" data-menssage-id="' +
      id +
      '">' +
      '<div class="pull-left">' +
      '<div class="image-container-perfil">' +
      '<img src="' +
      img_from_user +
      '" alt="" onerror="this.src=\'' +
      PATH_IMG +
      'perfil.jpg\'" class="img-avatar" />' +
      es_admin_verificado +
      "</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/imagen_archivo.png\'"  />' +
      "</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">' +
      "<div>" +
      fecha_creacion +
      "</div>" +
      '<img class="palomita_texto" src="' +
      url_status_img +
      '" alt="" title="' +
      error_title +
      '" width="' +
      tamaño_palomita +
      '" />' +
      "</small>" +
      "</div>" +
      "</div>" +
      "</div>";

   return nuevoMensaje;
}

function mensaje_audios_whatsapp_usuarios(data) {
   let {
      id,
      from_user_id,
      to_user_id,
      img_to_user,
      rol_to_user,
      img_from_user,
      rol_from_user,
      mensaje,
      url,
      filename,
      tipo_mensaje,
      fecha_creacion,
      status,
      unique_user_id,
      db,
      user_id,
   } = data;

   var error_title = status;

   let url_status_img = PATH_IMG + status + ".png";

   let tamaño_palomita =
      status == "read" ? "18px" : status == "wait" ? "16px" : "20px";

   let tipo_producto_imagen_class = "img-avatar-small";

   let tipo_producto_imagen = PATH_IMG + "icono_verificado.png";

   let es_admin_verificado =
      rol_from_user == "0"
         ? '<img src="' +
           tipo_producto_imagen +
           '" alt="" class="' +
           tipo_producto_imagen_class +
           '" />'
         : "";

   let imagenRegex = /\.(jpg|jpeg|png|gif|bmp|webp|svg)$/i;
   let esImagen = imagenRegex.test(img_from_user);
   if (!esImagen) {
      img_from_user = PATH_IMG + "perfil.jpg";
   }

   var nuevoMensaje =
      '<div class="message-feed media" data-menssage-id="' +
      id +
      '">' +
      '<div class="pull-left">' +
      '<div class="image-container-perfil">' +
      '<img src="' +
      img_from_user +
      '" alt="" onerror="this.src=\'' +
      PATH_IMG +
      'perfil.jpg\'" class="img-avatar" />' +
      es_admin_verificado +
      "</div>" +
      "</div>" +
      '<div class="media-body media-body-change-display">' +
      '<div class="mf-content mf-content-documentos">' +
      '<div class="palomitas">' +
      '<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>" +
      '<img class="palomita_texto" src="' +
      url_status_img +
      '" alt="" title="' +
      error_title +
      '" width="' +
      tamaño_palomita +
      '" />' +
      "</small>" +
      "</div>" +
      "</div>" +
      "</div>";

   return nuevoMensaje;
}

function mensaje_audios_whatsapp_usuarios_cargar_socket(data) {
   let {
      id,
      from_user_id,
      to_user_id,
      img_to_user,
      rol_to_user,
      img_from_user,
      rol_from_user,
      mensaje,
      url,
      filename,
      tipo_mensaje,
      fecha_creacion,
      status,
      unique_user_id,
      db,
      user_id,
   } = data;

   var error_title = status;

   let url_status_img = PATH_IMG + status + ".png";

   let tamaño_palomita =
      status == "read" ? "18px" : status == "wait" ? "16px" : "20px";

   let tipo_producto_imagen_class = "img-avatar-small";

   let tipo_producto_imagen = PATH_IMG + "icono_verificado.png";

   let es_admin_verificado =
      rol_from_user == "0"
         ? '<img src="' +
           tipo_producto_imagen +
           '" alt="" class="' +
           tipo_producto_imagen_class +
           '" />'
         : "";

   let imagenRegex = /\.(jpg|jpeg|png|gif|bmp|webp|svg)$/i;
   let esImagen = imagenRegex.test(img_from_user);
   if (!esImagen) {
      img_from_user = PATH_IMG + "perfil.jpg";
   }

   var nuevoMensaje =
      '<div class="message-feed media" data-menssage-id="' +
      id +
      '">' +
      '<div class="pull-left">' +
      '<div class="image-container-perfil">' +
      '<img src="' +
      img_from_user +
      '" alt="" onerror="this.src=\'' +
      PATH_IMG +
      'perfil.jpg\'" class="img-avatar" />' +
      es_admin_verificado +
      "</div>" +
      "</div>" +
      '<div class="media-body media-body-change-display">' +
      '<div class="mf-content mf-content-documentos">' +
      '<div class="palomitas">' +
      '<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>" +
      '<img class="palomita_texto" src="' +
      url_status_img +
      '" alt="" title="' +
      error_title +
      '" width="' +
      tamaño_palomita +
      '" />' +
      "</small>" +
      "</div>" +
      "</div>" +
      "</div>";

   return nuevoMensaje;
}

function mensaje_video_whatsapp_usuarios(data) {
   let {
      id,
      from_user_id,
      to_user_id,
      img_to_user,
      rol_to_user,
      img_from_user,
      rol_from_user,
      mensaje,
      url,
      filename,
      tipo_mensaje,
      fecha_creacion,
      status,
      unique_user_id,
      db,
      user_id,
   } = data;

   var error_title = status;

   let url_status_img = PATH_IMG + status + ".png";

   let tamaño_palomita =
      status == "read" ? "18px" : status == "wait" ? "16px" : "20px";

   let tipo_producto_imagen_class = "img-avatar-small";

   let tipo_producto_imagen = PATH_IMG + "icono_verificado.png";

   let es_admin_verificado =
      rol_from_user == "0"
         ? '<img src="' +
           tipo_producto_imagen +
           '" alt="" class="' +
           tipo_producto_imagen_class +
           '" />'
         : "";

   let imagenRegex = /\.(jpg|jpeg|png|gif|bmp|webp|svg)$/i;
   let esImagen = imagenRegex.test(img_from_user);
   if (!esImagen) {
      img_from_user = PATH_IMG + "perfil.jpg";
   }

   var nuevoMensaje =
      '<div class="message-feed media" data-menssage-id="' +
      id +
      '">' +
      '<div class="pull-left">' +
      '<div class="image-container-perfil">' +
      '<img src="' +
      img_from_user +
      '" alt="" onerror="this.src=\'' +
      PATH_IMG +
      'perfil.jpg\'" class="img-avatar" />' +
      es_admin_verificado +
      "</div>" +
      "</div>" +
      '<div class="media-body media-body-change-display">' +
      '<div class="mf-content mf-content-documentos">' +
      '<div class="palomitas">' +
      '<video controls class="video-general">' +
      '<source src="' +
      url +
      '" />' +
      "Your browser does not support the video element." +
      "</video>" +
      "</div>" +
      '<div class="caption_mensaje">' +
      '<span class="texto">' +
      mensaje +
      "</span>" +
      "</div>" +
      '<small class="mf-date fecha_y_palomitas">' +
      "<div>" +
      fecha_creacion +
      "</div>" +
      '<img class="palomita_texto" src="' +
      url_status_img +
      '" alt="" title="' +
      error_title +
      '" width="' +
      tamaño_palomita +
      '" />' +
      "</small>" +
      "</div>" +
      "</div>" +
      "</div>";

   return nuevoMensaje;
}

function mensaje_video_whatsapp_usuarios_socket(data) {
   let {
      id,
      from_user_id,
      to_user_id,
      img_to_user,
      rol_to_user,
      img_from_user,
      rol_from_user,
      mensaje,
      url,
      filename,
      tipo_mensaje,
      fecha_creacion,
      status,
      unique_user_id,
      db,
      user_id,
   } = data;

   var error_title = status;

   let url_status_img = PATH_IMG + status + ".png";

   let tamaño_palomita =
      status == "read" ? "18px" : status == "wait" ? "16px" : "20px";

   let tipo_producto_imagen_class = "img-avatar-small";

   let tipo_producto_imagen = PATH_IMG + "icono_verificado.png";

   let es_admin_verificado =
      rol_from_user == "0"
         ? '<img src="' +
           tipo_producto_imagen +
           '" alt="" class="' +
           tipo_producto_imagen_class +
           '" />'
         : "";

   let imagenRegex = /\.(jpg|jpeg|png|gif|bmp|webp|svg)$/i;
   let esImagen = imagenRegex.test(img_from_user);
   if (!esImagen) {
      img_from_user = PATH_IMG + "perfil.jpg";
   }

   var nuevoMensaje =
      '<div class="message-feed media" data-menssage-id="' +
      id +
      '">' +
      '<div class="pull-left">' +
      '<div class="image-container-perfil">' +
      '<img src="' +
      img_from_user +
      '" alt="" onerror="this.src=\'' +
      PATH_IMG +
      'perfil.jpg\'" class="img-avatar" />' +
      es_admin_verificado +
      "</div>" +
      "</div>" +
      '<div class="media-body media-body-change-display">' +
      '<div class="mf-content mf-content-documentos">' +
      '<div class="palomitas">' +
      '<video controls class="video-general">' +
      /* '<source src="' +
      url +
      '" />' + */
      "Your browser does not support the video element." +
      "</video>" +
      "</div>" +
      '<div class="caption_mensaje">' +
      '<span class="texto">' +
      mensaje +
      "</span>" +
      "</div>" +
      '<small class="mf-date fecha_y_palomitas">' +
      "<div>" +
      fecha_creacion +
      "</div>" +
      '<img class="palomita_texto" src="' +
      url_status_img +
      '" alt="" title="' +
      error_title +
      '" width="' +
      tamaño_palomita +
      '" />' +
      "</small>" +
      "</div>" +
      "</div>" +
      "</div>";

   return nuevoMensaje;
}

//PLANTILLAS PARA CLIENTES(usando api whatsapp bussinness)
function mensaje_texto_whatsapp_clientes(data) {
   let {
      id,
      from_user_id,
      to_user_id,
      img_to_user,
      rol_to_user,
      mensaje,
      url,
      filename,
      tipo_mensaje,
      fecha_creacion,
      status,
      unique_user_id,
      db,
      user_id,
   } = data;

   let tipo_producto_imagen_class = "img-avatar-small";

   let tipo_producto_imagen = PATH_IMG + "icono_verificado.png";

   let es_admin_verificado =
      rol_to_user == "0"
         ? '<img src="' +
           tipo_producto_imagen +
           '" alt="" class="' +
           tipo_producto_imagen_class +
           '" />'
         : "";

   let imagenRegex = /\.(jpg|jpeg|png|gif|bmp|webp|svg)$/i;
   const esImagen = imagenRegex.test(img_to_user);
   if (!esImagen) {
      img_to_user = PATH_IMG + "perfil.jpg";
   }

   // Construcción del nuevo mensaje en HTML
   var nuevoMensaje =
      '<div class="message-feed media right" data-menssage-id="' +
      id +
      '">' +
      '<div class="pull-right">' +
      '<div class="image-container-perfil">' +
      '<img src="' +
      img_to_user +
      '" alt="" onerror="this.src=\'' +
      PATH_IMG +
      'perfil.jpg\'" class="img-avatar" />' +
      es_admin_verificado +
      "</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>" +
      "</div>" +
      "</div>" +
      "</div>";

   return nuevoMensaje;
}

function mensaje_imagen_whatsapp_clientes(data) {
   let {
      id,
      from_user_id,
      to_user_id,
      img_to_user,
      rol_to_user,
      mensaje,
      url,
      filename,
      tipo_mensaje,
      fecha_creacion,
      status,
      unique_user_id,
      db,
      user_id,
   } = data;

   let imagen_url = url;

   let imagenRegex = /\.(jpg|jpeg|png|gif|bmp|webp|svg)$/i;
   let esImagen = imagenRegex.test(img_to_user);
   if (!esImagen) {
      img_to_user = PATH_IMG + "perfil.jpg";
   }

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

   let tipo_producto_imagen_class = "img-avatar-small";

   let tipo_producto_imagen = PATH_IMG + "icono_verificado.png";

   let es_admin_verificado =
      rol_to_user == "0"
         ? '<img src="' +
           tipo_producto_imagen +
           '" alt="" class="' +
           tipo_producto_imagen_class +
           '" />'
         : "";

   var nuevoMensaje =
      '<div class="message-feed media right" data-menssage-id="' +
      id +
      '">' +
      '<div class="pull-right">' +
      '<div class="image-container-perfil">' +
      '<img src="' +
      img_to_user +
      '" alt="" onerror="this.src=\'' +
      PATH_IMG +
      'perfil.jpg\'" class="img-avatar" />' +
      es_admin_verificado +
      "</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="' +
      imagen_url +
      '" target="_blank">' +
      '<div class="spinner">' +
      '<i class="fa fa-circle-o-notch fa-spin"></i>' +
      "</div>" +
      '<img class="imagen_imagen" src="' +
      imagen_url +
      '" alt="" style="display: none" onerror="this.src=\'img/error_imagen.png\'" />' +
      "</a>" +
      "</div>" +
      "</div>" +
      '<div class="caption_mensaje">' +
      '<span class="texto">' +
      mensaje +
      "</span>" +
      "</div>" +
      '<small class="mf-date">' +
      "<div>" +
      fecha_creacion +
      "</div>" +
      "</small>" +
      "</div>" +
      "</div>" +
      "</div>";

   return nuevoMensaje;
}

function mensaje_documentos_whatsapp_cliente(data) {
   let {
      id,
      from_user_id,
      to_user_id,
      img_to_user,
      rol_to_user,
      mensaje,
      url,
      filename,
      tipo_mensaje,
      fecha_creacion,
      status,
      unique_user_id,
      db,
      user_id,
   } = data;

   let imagen_url = url;

   let imagenRegex = /\.(jpg|jpeg|png|gif|bmp|webp|svg)$/i;
   let esImagen = imagenRegex.test(img_to_user);
   if (!esImagen) {
      img_to_user = PATH_IMG + "perfil.jpg";
   }

   let tipo_producto_imagen_class = "img-avatar-small";

   let tipo_producto_imagen = PATH_IMG + "icono_verificado.png";

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

   let es_admin_verificado =
      rol_to_user == "0"
         ? '<img src="' +
           tipo_producto_imagen +
           '" alt="" class="' +
           tipo_producto_imagen_class +
           '" />'
         : "";

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

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

   var nuevoMensaje =
      '<div class="message-feed media right" data-menssage-id="' +
      id +
      '">' +
      '<div class="pull-right">' +
      '<div class="image-container-perfil">' +
      '<img src="' +
      img_to_user +
      '" alt="" onerror="this.src=\'' +
      PATH_IMG +
      'perfil.jpg\'" class="img-avatar" />' +
      es_admin_verificado +
      "</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/imagen_archivo.png\'" />' +
      "</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">' +
      '<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(data) {
   let {
      id,
      from_user_id,
      to_user_id,
      img_to_user,
      rol_to_user,
      mensaje,
      url,
      filename,
      tipo_mensaje,
      fecha_creacion,
      status,
      unique_user_id,
      db,
      user_id,
   } = data;

   let imagenRegex = /\.(jpg|jpeg|png|gif|bmp|webp|svg)$/i;
   let esImagen = imagenRegex.test(img_to_user);
   if (!esImagen) {
      img_to_user = PATH_IMG + "perfil.jpg";
   }

   let tipo_producto_imagen_class = "img-avatar-small";

   let tipo_producto_imagen = PATH_IMG + "icono_verificado.png";

   let es_admin_verificado =
      rol_to_user == "0"
         ? '<img src="' +
           tipo_producto_imagen +
           '" alt="" class="' +
           tipo_producto_imagen_class +
           '" />'
         : "";

   var nuevoMensaje =
      '<div class="message-feed media right" data-menssage-id="' +
      id +
      '">' +
      '<div class="pull-right">' +
      '<div class="image-container-perfil">' +
      '<img src="' +
      img_to_user +
      '" alt="" onerror="this.src=\'' +
      PATH_IMG +
      'perfil.jpg\'" class="img-avatar" />' +
      es_admin_verificado +
      "</div>" +
      "</div>" +
      '<div class="media-body media-body-change-display">' +
      '<div class="mf-content mf-content-documentos">' +
      '<div class="palomitas">' +
      '<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">' +
      "<div>" +
      fecha_creacion +
      "</div>" +
      "</small>" +
      "</div>" +
      "</div>" +
      "</div>";

   return nuevoMensaje;
}

function mensaje_audios_whatsapp_cliente_cargar_socket(data) {
   let {
      id,
      from_user_id,
      to_user_id,
      img_to_user,
      rol_to_user,
      mensaje,
      url,
      filename,
      tipo_mensaje,
      fecha_creacion,
      status,
      unique_user_id,
      db,
      user_id,
   } = data;

   let imagenRegex = /\.(jpg|jpeg|png|gif|bmp|webp|svg)$/i;
   let esImagen = imagenRegex.test(img_to_user);
   if (!esImagen) {
      img_to_user = PATH_IMG + "perfil.jpg";
   }

   let tipo_producto_imagen_class = "img-avatar-small";

   let tipo_producto_imagen = PATH_IMG + "icono_verificado.png";

   let es_admin_verificado =
      rol_to_user == "0"
         ? '<img src="' +
           tipo_producto_imagen +
           '" alt="" class="' +
           tipo_producto_imagen_class +
           '" />'
         : "";

   var nuevoMensaje =
      '<div class="message-feed media right" data-menssage-id="' +
      id +
      '">' +
      '<div class="pull-right">' +
      '<div class="image-container-perfil">' +
      '<img src="' +
      img_to_user +
      '" alt="" onerror="this.src=\'' +
      PATH_IMG +
      'perfil.jpg\'" class="img-avatar" />' +
      es_admin_verificado +
      "</div>" +
      "</div>" +
      '<div class="media-body media-body-change-display">' +
      '<div class="mf-content mf-content-documentos">' +
      '<div class="palomitas">' +
      '<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">' +
      "<div>" +
      fecha_creacion +
      "</div>" +
      "</small>" +
      "</div>" +
      "</div>" +
      "</div>";

   return nuevoMensaje;
}

function mensaje_video_whatsapp_cliente(data) {
   let {
      id,
      from_user_id,
      to_user_id,
      img_to_user,
      rol_to_user,
      mensaje,
      url,
      filename,
      tipo_mensaje,
      fecha_creacion,
      status,
      unique_user_id,
      db,
      user_id,
   } = data;

   let imagenRegex = /\.(jpg|jpeg|png|gif|bmp|webp|svg)$/i;
   let esImagen = imagenRegex.test(img_to_user);
   if (!esImagen) {
      img_to_user = PATH_IMG + "perfil.jpg";
   }

   let tipo_producto_imagen_class = "img-avatar-small";

   let tipo_producto_imagen = PATH_IMG + "icono_verificado.png";

   let es_admin_verificado =
      rol_to_user == "0"
         ? '<img src="' +
           tipo_producto_imagen +
           '" alt="" class="' +
           tipo_producto_imagen_class +
           '" />'
         : "";

   var nuevoMensaje =
      '<div class="message-feed media right" data-menssage-id="' +
      id +
      '">' +
      '<div class="pull-right">' +
      '<div class="image-container-perfil">' +
      '<img src="' +
      img_to_user +
      '" alt="" onerror="this.src=\'' +
      PATH_IMG +
      'perfil.jpg\'" class="img-avatar" />' +
      es_admin_verificado +
      "</div>" +
      "</div>" +
      '<div class="media-body media-body-change-display">' +
      '<div class="mf-content mf-content-documentos">' +
      '<div class="palomitas">' +
      '<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_creacion +
      "</small>" +
      "</div>" +
      "</div>" +
      "</div>";

   return nuevoMensaje;
}

function mensaje_video_whatsapp_cliente_cargar_socket(data) {
   let {
      id,
      from_user_id,
      to_user_id,
      img_to_user,
      rol_to_user,
      mensaje,
      url,
      filename,
      tipo_mensaje,
      fecha_creacion,
      status,
      unique_user_id,
      db,
      user_id,
   } = data;

   let imagenRegex = /\.(jpg|jpeg|png|gif|bmp|webp|svg)$/i;
   let esImagen = imagenRegex.test(img_to_user);
   if (!esImagen) {
      img_to_user = PATH_IMG + "perfil.jpg";
   }

   let tipo_producto_imagen_class = "img-avatar-small";

   let tipo_producto_imagen = PATH_IMG + "icono_verificado.png";

   let es_admin_verificado =
      rol_to_user == "0"
         ? '<img src="' +
           tipo_producto_imagen +
           '" alt="" class="' +
           tipo_producto_imagen_class +
           '" />'
         : "";

   var nuevoMensaje =
      '<div class="message-feed media right" data-menssage-id="' +
      id +
      '">' +
      '<div class="pull-right">' +
      '<div class="image-container-perfil">' +
      '<img src="' +
      img_to_user +
      '" alt="" onerror="this.src=\'' +
      PATH_IMG +
      'perfil.jpg\'" class="img-avatar" />' +
      es_admin_verificado +
      "</div>" +
      "</div>" +
      '<div class="media-body media-body-change-display">' +
      '<div class="mf-content mf-content-documentos">' +
      '<div class="palomitas">' +
      '<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>" +
      "</div>" +
      "</div>" +
      "</div>";

   return nuevoMensaje;
}

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

//USUARIOS
function mensaje_texto_sms_usuarios(
   tipo_producto,
   error_codigo,
   status,
   sid,
   mensaje,
   fecha_creacion,
) {
   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 nuevoMensaje =
      '<div class="message-feed media" data-sid-id="' +
      sid +
      '">' +
      '<div class="pull-left">' +
      '<div class="image-container-perfil">' +
      '<img src="https://bootdey.com/img/Content/avatar/avatar1.png" 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>" +
      "<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="" height="100%" width="' +
      tamaño_palomita +
      '" title="' +
      error_title +
      '" />' +
      "</small>" +
      "</div>" +
      "</div>" +
      "</div>";

   return nuevoMensaje;
}

//CLIENTE
function mensaje_texto_sms_clientes(
   tipo_producto,
   sid,
   mensaje,
   fecha_creacion,
) {
   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 right" data-sid-id="' +
      sid +
      '">' +
      '<div class="pull-right">' +
      '<div class="image-container-perfil">' +
      '<img src="' +
      avatar_url +
      '" alt=""  onerror="this.src=\'' +
      PATH_IMG +
      'perfil.jpg\'" 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>" +
      "</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, url_perfil, rol_id) {
   let verificado =
      rol_id == "0"
         ? '<img src="' +
           url_perfil +
           '" alt="" onerror="this.src=\'' +
           PATH_IMG +
           'perfil.jpg\'" class="img-avatar" />' +
           '<img src="' +
           PATH_IMG +
           'icono_verificado.png" alt="" class="img-avatar-small" />'
         : '<img src="' +
           url_perfil +
           '" alt="" onerror="this.src=\'' +
           PATH_IMG +
           'perfil.jpg\'" class="img-avatar" />';

   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"> <div class="image-container-perfil">' +
      verificado +
      '</div><div class="lv-avatar pull-left"></div>' +
      '<span class="active-word-wrap">' +
      '<a href="#" class="text-color-dark">' +
      numero_telefono +
      "</a>" +
      "</span>" +
      "</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; display:none" 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 dibujar_contactos(lista_contactos) {
   var lista_contactos_html = "";
   lista_contactos.forEach((element) => {
      lista_contactos_html += contactos(element);
   });

   return lista_contactos_html;
}

function contactos(data) {
   let {
      id,
      username = "",
      fullname = "",
      phonenumber = "",
      user_type = "",
      status = "",
      img = "",
      mensajes_no_leidos = "",
      rol_id = "",
   } = data;

   mensajes_no_leidos =
      mensajes_no_leidos == "0" || mensajes_no_leidos == 0
         ? ""
         : mensajes_no_leidos;

   let maxLength = 20;

   let fullname_original = fullname;

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

   let username_original = username;

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

   let verificado =
      rol_id == "0"
         ? '<img src="' +
           img +
           '" alt="" onerror="this.src=\'' +
           PATH_IMG +
           'perfil.jpg\'" class="img-avatar" />' +
           '<img src="' +
           PATH_IMG +
           'icono_verificado.png" alt="" class="img-avatar-small" />'
         : '<img src="' +
           img +
           '" alt="" onerror="this.src=\'' +
           PATH_IMG +
           'perfil.jpg\'" class="img-avatar" />';

   /*  <div class="image-container-perfil">
   <img
      src="https://hispanosdeexitollc.com/app_dev/storage/pics/croppedImg_1364421813.jpeg"
      alt=""
      onerror="this.src='./img/perfil.jpg'"
      class="img-avatar"
   /><img src="./img/icono_verificado.png" alt="" class="img-avatar-small" />
</div> */

   let contactoHtml =
      '<a class="list-group-item media item-contactos" ' +
      'data-user_id_contact="' +
      id +
      '" >' +
      '<div class="pull-left"><div class="image-container-perfil">' +
      verificado +
      "</div></div>" +
      '<div class="active-display-inline">' +
      '<small class="list-group-item-heading contacto_nombre_contacto" title="' +
      fullname_original +
      '">' +
      fullname +
      "</small><br />" +
      '<small class="list-group-item-text c-gray" title="' +
      username_original +
      '">' +
      username +
      "</small>" +
      "</div>" +
      '<span class="badge-contactos badge badge-colors">' +
      mensajes_no_leidos +
      "</span>" +
      "</a>";

   return contactoHtml;
}

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

   // 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_contacto_plantillas(
   chat_mensajes,
   MY_USER_ID,
   APP_URL,
) {
   var chat_numero_html = "";

   chat_mensajes.forEach((element) => {
      var {
         id,
         unique_user_id,
         from_user_id,
         to_user_id,
         mensaje,
         url,
         filename,
         tipo_mensaje,
         fecha_creacion,
         status,
         img_to_user,
         rol_to_user,
         img_from_user,
         rol_from_user,
      } = element;

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

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

      //console.log("MY_USER_ID: ", MY_USER_ID);
      //console.log("from_user_id: ", from_user_id);
      //console.log("to_user_id: ", to_user_id);
      //console.log("mensaje: ", mensaje);
      //console.log("img_to_user: ", APP_URL + img_to_user);
      //console.log("img_from_user: ", APP_URL + img_from_user);
      //console.log("rol_to_user: ", rol_to_user);
      //console.log("rol_from_user: ", rol_from_user);
      //console.log("________________");

      // si no son iguales es porque el mensaje no es mio
      if (from_user_id == MY_USER_ID) {
         element.img_from_user = APP_URL + "/" + img_from_user;
         element.rol_from_user = rol_from_user;

         if (tipo_mensaje == "text") {
            chat_numero_html += mensaje_texto_whatsapp_usuarios(element);
         }

         if (tipo_mensaje == "image") {
            chat_numero_html += mensaje_imagen_whatsapp_usuarios(element);
         }

         if (tipo_mensaje == "document") {
            chat_numero_html += mensaje_documentos_whatsapp_usuarios(element);
         }

         if (tipo_mensaje == "audio") {
            chat_numero_html += mensaje_audios_whatsapp_usuarios(element);
         }

         if (tipo_mensaje == "video") {
            chat_numero_html += mensaje_video_whatsapp_usuarios(element);
         }
      } else {
         element.img_to_user = APP_URL + "/" + img_from_user;
         element.rol_to_user = rol_from_user;

         //console.log(element.img_to_user);
         if (tipo_mensaje == "text") {
            chat_numero_html += mensaje_texto_whatsapp_clientes(element);
         }

         if (tipo_mensaje == "image") {
            chat_numero_html += mensaje_imagen_whatsapp_clientes(element);
         }

         if (tipo_mensaje == "document") {
            chat_numero_html += mensaje_documentos_whatsapp_cliente(element);
         }

         if (tipo_mensaje == "audio") {
            chat_numero_html += mensaje_audios_whatsapp_cliente(element);
         }

         if (tipo_mensaje == "video") {
            chat_numero_html += mensaje_video_whatsapp_cliente(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;
}

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 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-primary btn_add_customer_chat' type='button' data-id_customers_chat='" +
         id +
         "'>Add</button>" +
         "</td>" +
         "</tr>";
   });

   return html;
}
