var urlServidor = "";
var landing_id;
var html_form = `
<div class="container_form_header">
            <div class="container_top_form_header">
       
            </div>
            <form id="formLanding">
              <div class="direction-column">
                <div class="container_input" id="campo_nombre">
                  <input disabled type="text" name="nombre" id="nombre"class="input" placeholder="Nombre">
                </div>
                <div class="container_input" id="campo_telefono">
                  <input type="tel" name="telefono" id="telefono"class="input" placeholder="Teléfono">
                </div>
                <div class="container_input" id="campo_email">
                  <input disabled type="email" name="email" id="email"  class="input"placeholder="Email">
                </div>
                <div class="container_input" id="campo_mensaje">
                  <textarea disabled placeholder="Mensaje" name="mensaje" class="input" id="mensaje" cols="30" rows="10"></textarea>
                </div>
                <div class="div-boton" style="display:flex;width:100%;">
                <button type="button" id="btnSendForm" class="button btn_enviar">Enviar</button>
                </div>
              </div>
            </form>
          </div>`;
var img_form = '';
function parseURLParams() {
  var params = {};
  var param_array = window.location.href.split('?')[1].split('&');
  for (var i in param_array) {
    x = param_array[i].split('=');
    params[x[0]] = x[1];
  }
  return params;
}

$(document).ready(function () {
  $.getJSON('../_env.json', function (data) {
    $.each(data, function (key, val) {
      if (val != undefined && val.cliente != undefined && val.cliente.webserver != undefined) {
        urlServidor = val.cliente.webserver;
        getLanding(parseURLParams());
      }
    });
  });
});

$(document).on('click', '#btnSendForm', function () {
  $('#btnSendForm').attr("disabled", "disabled");
  $('#btnSendForm').addClass('button-disabled');
  $('#btnSendForm').html('<div class="spinner spinner-white"></div>');
  checkForm();
});

function getLanding(id) {
  var data = JSON.stringify({
idCliente:localStorage.getItem('idCliente'),
    filtros: {
      id: id
    }
  });

  $.ajax({
    url: urlServidor + 'apiCampaniaVenta/getLandingWeb',
    type: 'POST',
    data: data,
    success: function (respuesta) {
      if (respuesta.estado == 1) {
        completarPagina(respuesta.data);
      } else {
        mostrarPaginaError(respuesta.mensaje);
      }
    },
    error: function () {
      console.log("No se ha podido obtener la información");
    }
  });
}

function completarPagina(datos) {
  landing_id = datos.id;
  datos_landing = JSON.stringify({
idCliente:localStorage.getItem('idCliente'),
    titulo: datos.titulo,
    descripcion: datos.descripcion
  });
  if (datos.imagenes.length > 0) {
    $.each(datos.imagenes, function (i, v) {
      if (v.tipo == 'meta') {
        $('#image').attr('content', v.blob);
        $("#title").attr('content', datos.titulo);
        $("#description").attr('content', datos.descripcion);
      } else if (v.tipo == 'logo') {
        posiciones(datos.landing_configuracion, v.blob, datos_landing, datos.campos);
        $('.logo_header').show();
      } else if (v.tipo == 'carousel') {
        if (i >= 1) {
          var active = i == 3 ? "active" : "";
          var itemCarrusel = '';
          itemCarrusel += '<div class="carousel-item ' + active + '" id="carrusel-' + i + '">';
          itemCarrusel += '  <img src="' + v.blob + '" alt="" id="imagen_' + i + '" class=" d-block imagen_carousel">';
          itemCarrusel += '</div>';

          $('#carousel_innel').append(itemCarrusel);
          $('#carousel_innel_2').append(itemCarrusel);

        }
      } else if (v.tipo == 'formulario') {
        // console.log("ENTRo")
        img_form = v.blob;
      }
    });
  }

  if (datos.redes_sociales) {
    $.each(datos.redes_sociales, function (i, v) {
      if (v.nombre != '' && v.url != '') {
        $('#' + v.nombre).removeClass('d-none');
        $('#' + v.nombre).attr('href', v.url);
        $('#' + v.nombre + '_2').removeClass('d-none');
        $('#' + v.nombre + '_2').attr('href', v.url);
      }
    });
  }
  // $('.header').css('display', 'flex');
  $('.descripcion').css('display', 'flex');

  if (datos.landing_configuracion) {
    var parse;
    $.each(datos.landing_configuracion, function (i, v) {
      parse = JSON.parse(v.configuracion);
      // console.log(parse)
      switch (parse.elemento) {
        case 'meta':
          $("#url").attr('content', parse.data.configuracion.url + 'assets/landing/index.html?id=' + landing_id)
          break;
        case 'fondo':
          if (parse.data.configuracion.background == 'default')
            $("#header").css('background-image', 'url(./img/background-header.svg)')
          else
            $("#header").css('background-image', 'url(' + parse.data.configuracion.background + ')')
          break;
      }
    });
  }
}

function checkForm() {
  var form = $('#formLanding').serializeArray();
  var entidades = {};
  var contactos = {};
  var propuestas = {};
  var nombre;
  var campo;

  var data = { 'landing_id': landing_id };

  $.each(form, function (i, v) {
    nombre = v.name.split('.');
    campo = nombre[1];
    if (nombre[0] == 'Entidades') {
      entidades[campo] = v.value
    }
    if (nombre[0] == 'Contactos') {
      contactos[campo] = v.value
    }
    if (nombre[0] == 'Propuestas') {
      propuestas[campo] = v.value
    }
  });
  if (!jQuery.isEmptyObject(entidades)) {
    data['entidades'] = entidades;
  }
  if (!jQuery.isEmptyObject(contactos)) {
    data['contactos'] = contactos;
  }
  if (!jQuery.isEmptyObject(propuestas)) {
    data['propuestas'] = propuestas;
  }
  var telefono = $('#telefono').val();
  if (data['contactos']['telefono'] != undefined) {
    if (data['contactos']['telefono'] == '') {
      mostrarAlert('Ingrese un número telefonico valido', 'red');
      $('#btnSendForm').removeClass('button-disabled');
      $('#btnSendForm').removeAttr("disabled");
      $('#btnSendForm').html('enviar');
      return;
    }
    data['contactos']['telefono'] = telefono;
    var param = parseURLParams();
    if (param.face)
      data['referencia2'] = "Facebook";
    else if (param.twit)
      data['referencia2'] = "Twitter";
    else if (param.id)
      data['referencia2'] = "CRM";
  }
  var dataObj = JSON.stringify(data);
  sendForm(dataObj);
}

function sendForm(data) {
  $.ajax({
    url: urlServidor + 'apiLanding/cargarme',
    type: 'POST',
    data: data,
    success: function (respuesta) {
      console.log('respuesta carga', respuesta);
      if (respuesta.estado == 1) {
        mostrarAlert('Cargado correctamente', 'green');
        limpiarForm();
      } else {
        mostrarAlert('Error al enviar el formulario, intenta mas tarde', 'red');
      }
      $('#btnSendForm').removeClass('button-disabled');
      $('#btnSendForm').removeAttr("disabled");
      $('#btnSendForm').html('enviar');
    },
    error: function () {
      console.log("No se ha podido obtener la información");
    }
  });
}

function mostrarAlert(mensaje, color) {

  $('.alert').html(mensaje);

  $('.alert').addClass('alert-' + color);

  $('.alert').css('right', '20px');

  setTimeout(function () {
    $('.alert').css('right', '-650px');
    $('.alert').removeClass('alert-' + color);
  }, 3000);

  $('.alert').on('click', function () {
    $(this).css('right', '-650px');
    $('.alert').removeClass('alert-' + color);
  });

}

function limpiarForm() {
  $('#nombre').val('');
  $('#telefono').val('');
  $('#email').val('');
  $('#mensaje').val('');
}

function mostrarPaginaError(mensaje) {
  html = mensaje;
  $('#mensaje_error').html(html);
  $('.pagina_error').css('display', 'flex');
}
function posiciones(configuracion, logo, datos_landing, campos, imagen) {
  configuracion.forEach(element => {
    this.parse = JSON.parse(element.configuracion);
    getPosicion(
      this.parse,
      logo,
      datos_landing,
      campos,
      imagen,
      configuracion
    );
  });
}

function getPosicion(
  configuracion,
  logo,
  datos_landing,
  campos,
  imagen,
  respuestaG
) {
  var data =
    JSON.stringify({
idCliente:localStorage.getItem('idCliente'),
      filtros: {
        id: configuracion?.data?.posicion_id
      }
    });
  var datos = JSON.parse(datos_landing);
  titulo = `
    <div class="titulo_header">
    <pre class="title_pre">
    `+ datos.titulo + `
    </pre>
    </div>
`;
  descripcion = `
<div class="descripcion_header" >
<span class="descripcion_stylo">`+ datos.descripcion + `<span>
</div>`;
  $.ajax({
    url: urlServidor + 'apiCampaniaVenta/getPosicionWeb',
    type: 'POST',
    data: data,
    success: function (respuesta) {
      var posicion = respuesta?.data?.descripcion;
      switch (configuracion?.elemento) {
        case "logo":
          var style = configuracion?.data?.configuracion;
          $("#logo").attr('src', logo);
          $("#logo").css(style)
          if (posicion == "Centro") {
            $("#logo-div").css('justify-content', 'center');
          } else if (posicion == "Derecha") {
            $("#logo-div").css('justify-content', 'flex-end');
          }
          else if (posicion == "Izquierda") {
            $("#logo-div").css('justify-content', 'flex-start');
          }
          break;
        case 'titulo':
          $("#titulo_landing").html(titulo);
          if (posicion == "Izquierda") {
            $("#titulo_landing").css('justify-content', 'flex-start');
          } else if (posicion == "Centro") {
            $("#titulo_landing").css('justify-content', 'center');
          } else if (posicion == "Derecha") {
            $("#titulo_landing").css('justify-content', 'flex-end');
          }
          // style
          $(".title_pre").css("color", configuracion.data.configuracion.color);
          $(".title_pre").css("font-size", configuracion.data.configuracion.fuente_tamanio);
          break;
        case "formulario":
          if (posicion == "Derecha") {
            $(".container_derecho_header").html(html_form);
            // escondo carousel 
            $("#carousel_izquierdo").removeClass("d-none");
          }
          if (posicion == "Izquierda") {
            $(".container_izquierdo_header").html(html_form);
            // escondo carousel 
            $("#carousel_derecho").removeClass("d-none");
          }
          // Style
          $(".container_form_header").css('background', configuracion.data.configuracion.background);
          $(".input").css('background', configuracion.data.configuracion.input.background);
          if (configuracion.data.imagen.imagen_activar) {
            $(".container_top_form_header").append('<img src="' + img_form + '" alt="" id="imagen_formulario" class="imagen imagen_header">');
          }
          mostrarCampos(campos);
          break;
        case "boton":
          $("#btnSendForm").css('color', configuracion.data.color);
          $("#btnSendForm").css('background', configuracion.data.background);
          break;
        case "redes":
          if (posicion == 'Derecha') {
            $("#descripcion_izquierda").removeClass("d-none")
            $("#redes_derecha").removeClass("d-none")
          } else if (posicion == 'Izquierda') {
            $("#descripcion_derecha").removeClass("d-none")
            $("#redes_izquierda").removeClass("d-none")
          }
          // Stylo
          // borders
          // posicion 1
          $("#facebook").css("border-color", configuracion.data.configuracion.redes.facebook);
          $("#twitter").css("border-color", configuracion.data.configuracion.redes.twitter);
          $("#instagram").css("border-color", configuracion.data.configuracion.redes.instagram);
          $("#web").css("border-color", configuracion.data.configuracion.redes.web);

          $("#facebook").hover(function () {
            $(this).css("background-color", configuracion.data.configuracion.redes.facebook);
          }, function () {
            $(this).css("background-color", "transparent");
          });
          $("#twitter").hover(function () {
            $(this).css("background-color", configuracion.data.configuracion.redes.twitter);
          }, function () {
            $(this).css("background-color", "transparent");
          });
          $("#instagram").hover(function () {
            $(this).css("background", configuracion.data.configuracion.redes.instagram);
          }, function () {
            $(this).css("background-color", "transparent");
          });
          $("#web").hover(function () {
            $(this).css("background", configuracion.data.configuracion.redes.web);
          }, function () {
            $(this).css("background-color", "transparent");
          });
          // circulo
          $(".circulo_facebook_1").css("background", configuracion.data.configuracion.redes.facebook);
          $(".titulo_facebook_1").css("color", configuracion.data.configuracion.redes.facebook);

          $(".circulo_twitter_1").css("background", configuracion.data.configuracion.redes.twitter);
          $(".titulo_twitter_1").css("color", configuracion.data.configuracion.redes.twitter);

          $(".circulo_instagram_1").css("background", configuracion.data.configuracion.redes.instagram);
          $(".titulo_instagram_1").css("color", configuracion.data.configuracion.redes.instagram);

          $(".circulo_web_1").css("background", configuracion.data.configuracion.redes.web);
          $(".titulo_web_1").css("color", configuracion.data.configuracion.redes.web);


          // posicion 2
          $("#facebook_2").css("border-color", configuracion.data.configuracion.redes.facebook);
          $("#twitter_2").css("border-color", configuracion.data.configuracion.redes.twitter);
          $("#instagram_2").css("border-color", configuracion.data.configuracion.redes.instagram);
          $("#web_2").css("border-color", configuracion.data.configuracion.redes.web);

          $("#facebook_2").hover(function () {
            $(this).css("background-color", configuracion.data.configuracion.redes.facebook);
          }, function () {
            $(this).css("background-color", "transparent");
          });
          $("#twitter_2").hover(function () {
            $(this).css("background-color", configuracion.data.configuracion.redes.twitter);
          }, function () {
            $(this).css("background-color", "transparent");
          });
          $("#instagram_2").hover(function () {
            $(this).css("background", configuracion.data.configuracion.redes.instagram);
          }, function () {
            $(this).css("background-color", "transparent");
          });
          $("#web_2").hover(function () {
            $(this).css("background", configuracion.data.configuracion.redes.web);
          }, function () {
            $(this).css("background-color", "transparent");
          });

          // circulo
          $(".circulo_facebook_2").css("background", configuracion.data.configuracion.redes.facebook);
          $(".titulo_facebook_2").css("color", configuracion.data.configuracion.redes.facebook);

          $(".circulo_twitter_2").css("background", configuracion.data.configuracion.redes.twitter);
          $(".titulo_twitter_2").css("color", configuracion.data.configuracion.redes.twitter);

          $(".circulo_instagram_2").css("background", configuracion.data.configuracion.redes.instagram);
          $(".titulo_instagram_2").css("color", configuracion.data.configuracion.redes.instagram);

          $(".circulo_web_2").css("background", configuracion.data.configuracion.redes.web);
          $(".titulo_web_2").css("color", configuracion.data.configuracion.redes.web);
          break;
        case "whatsapp":
          var urlApi = "https://api.whatsapp.com/send?phone=54" + configuracion.data.configuracion.numero;
          if (configuracion.data.configuracion.activar == true && configuracion.data.configuracion.numero) {
            $("#whatsapp_button").removeClass("d-none");
            $('#whatsapp_button').css('background-color', configuracion.data.configuracion.color)
            $('#whatsapp_button').attr('href', urlApi);
          } else {
            $("#whatsapp_button").css("display", "none");
          }
          if (posicion == "Derecha")
            $("#whatsapp_button").css("right", '40px');
          else if (posicion == "Izquierda")
            $("#whatsapp_button").css("right", '');

          $("#whatsapp_button").css('width', configuracion?.data?.configuracion?.circulo?.width ? configuracion?.data?.configuracion?.circulo?.width + "px" : "60px");
          $("#whatsapp_button").css('height', configuracion?.data?.configuracion?.circulo?.width ? configuracion?.data?.configuracion?.circulo?.width + "px" : "60px");
          $(".img-wsp").css('width', configuracion?.data?.configuracion?.logo?.width ? configuracion?.data?.configuracion?.logo?.width + "px" : "35px");
          break;
        case "nombre_empresa":
          if (configuracion.data.configuracion.activar == true) {
            $(".empresa-nombre").css("display", "flex");
          } else {
            $(".empresa-nombre").css("display", "none");
          }
          $("#nombre_empresa").text(configuracion.data.configuracion.nombre);
          $("#nombre_empresa").css('font-size', configuracion.data.configuracion.width + "px");
          $(".div-empresa-nombre").css('border-color', configuracion.data.configuracion.color);
          $("#nombre_empresa").css('color', configuracion.data.configuracion.color);
          break;
        case 'descripcion':
          $(".pegar-desc").append(descripcion);
          $(".descripcion_header").css('text-align', posicion == "Derecha" ? 'right' : posicion == "Izquierda" ? 'left' : 'center');
          $(".descripcion_stylo").css('font-weight', configuracion.data.configuracion.texto.bold ? 'bold' : '100');
          $(".descripcion_stylo").css('color', configuracion.data.configuracion.texto.color);
          $(".descripcion_stylo").css('font-size', configuracion.data.configuracion.texto.font_size + "px");
          $(".descripcion_stylo").css('text-decoration', configuracion.data.configuracion.texto.underline ? 'underline' : 'none');
          break;

      }

    },
    error: function () {
      console.log("No se ha podido obtener la información");
    }
  });
}
function mostrarCampos(campos) {
  $.each(campos, function (i, v) {
    if (v.nombre) {
      if (v.nombre == 'Email') {
        $('#email').prop('disabled', false);
        $('#email').attr('name', v.nombre_columna);
        $('#campo_email').css('display', 'flex');
      }
      if (v.nombre == 'Nombre') {
        $('#nombre').prop('disabled', false);
        $('#nombre').attr('name', v.nombre_columna);
        $('#campo_nombre').css('display', 'flex');
      }
      if (v.nombre == 'Telefono') {
        $('#telefono').prop('disabled', false);
        $('#telefono').attr('name', v.nombre_columna);
        $('#campo_telefono').css('display', 'flex');
      }
      if (v.nombre == 'Mensaje') {
        $('#mensaje').prop('disabled', false);
        $('#mensaje').attr('name', v.nombre_columna);
        $('#campo_mensaje').css('display', 'flex');
      }
    }
  });
}