// AsisteClick.com.
// Este script en javascript vainilla muestra un botón de chat flotante
// y abre el chat web en un nuevo tab.

// Parámetros
var chatbot_url = "https://app.asisteclick.com/v3/request.php?id=asisteclick-11&hashbot=agents"
var settings = window.asisteclickSettings || {};
var text = settings.text || 'Atención al Cliente';
var textSize = settings.textSize || '24px';
var textColor = settings.textColor || '#ffffff';
var backgroundColor = settings.backgroundColor || '#008CBA';
var borderRadius = settings.borderRadius || '50px'; // Aumento del radio de borde para un diseño más redondo
var width = settings.width || '300px';
var height = settings.height || '60px';
chatbot_url = settings.chatbot_url || chatbot_url;

// Construct the CSS string using the settings
var css = '#asisteclick-button { position: fixed; bottom: 20px; right: 20px; background-color: ' + backgroundColor + '; border: none; color: ' + textColor + '; width: ' + width + '; height: ' + height + '; text-align: center; line-height: ' + height + '; font-size: ' + textSize + '; cursor: pointer; border-radius: ' + borderRadius + '; display: flex; justify-content: center; align-items: center; padding: 10px; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); transition: all 0.3s ease; }' +
          '#asisteclick-button:hover { background-color: ' + shadeColor(backgroundColor, -20) + '; transform: translateY(-5px); box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2); }'; // Añadido estilo para hover

// Add the CSS to the page
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
head.appendChild(style);
style.type = 'text/css';
if (style.styleSheet) {
  style.styleSheet.cssText = css;
} else {
  style.appendChild(document.createTextNode(css));
}

// Create the button and set its properties
var button = document.createElement('button');
button.id = 'asisteclick-button';
button.innerHTML = text;
button.onclick = function() {
  window.open(chatbot_url, '_blank');
};
document.body.appendChild(button);

// Función para oscurecer el color en hover
function shadeColor(color, percent) {
  var R = parseInt(color.substring(1,3),16);
  var G = parseInt(color.substring(3,5),16);
  var B = parseInt(color.substring(5,7),16);
  R = parseInt(R * (100 + percent) / 100);
  G = parseInt(G * (100 + percent) / 100);
  B = parseInt(B * (100 + percent) / 100);
  R = (R<255)?R:255;  
  G = (G<255)?G:255;  
  B = (B<255)?B:255;  
  var RR = ((R.toString(16).length==1)?"0"+R.toString(16):R.toString(16));
  var GG = ((G.toString(16).length==1)?"0"+G.toString(16):G.toString(16));
  var BB = ((B.toString(16).length==1)?"0"+B.toString(16):B.toString(16));
  return "#"+RR+GG+BB;
}