window.onload = () => {
  $(".loader").hide();
  $(".ubicacionCbo").select2({
    theme: "bootstrap-5",
    dropdownParent: "#ubicacionMdl",
  });
  $("#txtLicencia").mask("0000-000000-000-0");
  let sucursal = localStorage.getItem("CS-ubicacion-accesos");
  if (sucursal == null) {
    $("#paso1").hide();
    fetchActions
      .get({
        file: "getSucursales",
        data: {
          q: "all",
        },
      })
      .then((response) => {
        if (response.status == 200) {
          switch (response.message) {
            case "EXITO":
              let options = [
                `<option selected value="" disabled>seleccione</option>`,
                ...response.data.map(
                  (op) => `<option value="${op.id}">${op.nombre}</option>`
                ),
              ];
              document.getElementById("cboSucursal").innerHTML =
                options.join("");
              $("#ubicacionMdl").modal("show");
              break;
            default:
              showMessages.error(response);
              break;
          }
        } else {
          showMessages.error(response);
        }
      })
      .catch(showMessages.error);
  } else {
    let delay = (function () {
      let timer = 0;
      return function (callback, ms) {
        clearTimeout(timer);
        timer = setTimeout(callback, ms);
      };
    })();

    document.getElementById("txtDui").focus();
    $("#txtComplemento").mask("0");
    $("#txtCasa").mask("0000000000");
  }
};

let timeOut;

const app = {
  busqueda: false,
  fields: {
    licencia: document.getElementById("txtLicencia"),
    dui: document.getElementById("txtDui"),
    complemento: document.getElementById("txtComplemento"),
    nombre: document.getElementById("txtNombre"),
  },
  persona: {},
  tipo_documento: "DUI",
  search: function () {},
  validate: function (value) {
    clearTimeout(timeOut);
    timeOut = setTimeout(() => {
      if (value.length >= 8) {
        app.validar_dui(value);
      }
    }, 800);
  },
  evaluar: function () {
    if (form_manual_validate("busquedaFrm")) {
      if (app.busqueda) {
        app.paso2();
      } else {
        app.busqueda_manual();
      }
    }
  },
  set_tipo_documento: function (btn, tipo) {
    document.querySelectorAll("#tipos_documento button").forEach((btn) => {
      btn.classList.remove("btn-primary");
      btn.classList.add("btn-secondary");
      let icon = btn.querySelector("i");
      icon.classList.remove("fa-check");
    });
    btn.classList.remove("btn-secondary");
    btn.classList.add("btn-primary");
    let icon = btn.querySelector("i");
    icon.classList.add("fa-check");
    document.querySelectorAll(".td_container").forEach((c) => {
      c.classList.add("d-none");
      c.querySelectorAll("input").forEach((i) => {
        i.value = "";
        i.required = false;
      });
    });
    let id_container = tipo.toLowerCase() + "_container";
    document.getElementById(id_container).classList.remove("d-none");
    document.querySelectorAll("#" + id_container + " input").forEach((i) => {
      i.required = true;
    });
    this.tipo_documento = tipo;
  },
  validar_dui: function (value) {
    let separador = value.includes("]]")
        ? "]]"
        : value.includes("||")
        ? "||"
        : "&&",
      tmp = value.split(separador);

    if (tmp.length > 1) {
      app.fields.dui.value = "";
      let dui = tmp[0],
        nombre_completo = `${tmp[2]} ${tmp[1]}`,
        direccion = `${tmp[6]}, ${tmp[5]}`,
        fecha_nacimiento = `${tmp[9]}`,
        persona = {
          tipo_documento: "DUI",
          documento: dui,
          nombre_completo,
          direccion,
          fecha_nacimiento: fecha_nacimiento.replace(/\//g, "-"),
        };

      app.buscar_persona(persona);
    }
  },
  reset: function () {
    document.getElementById("busquedaFrm").reset();
    document.getElementById("personal_data").style.display = "none";
    document.getElementById("form-button").style.display = "none";
    app.fields.dui.value = "";
    app.fields.dui.readOnly = false;
    app.fields.complemento.value = "";
    app.fields.complemento.readOnly = false;
    app.fields.nombre.readOnly = true;
    app.fields.dui.focus();
    app.busqueda = false;
    $("#main-button").slideDown("fast");
    $("#paso2").hide();
    $("#paso1").show();
  },
  paso2: function () {
    app.tipo_documento == "DUI" &&
      (app.persona.documento = `${app.fields.dui.value}-${app.fields.complemento.value}`);
    app.persona.nombre_completo = app.fields.nombre.value;
    let ubicacion = localStorage.getItem("CS-ubicacion-accesos")
        ? JSON.parse(localStorage.getItem("CS-ubicacion-accesos"))
        : {},
      poligonos = ubicacion.casas
        ? ubicacion.casas.length > 0
          ? ubicacion.casas
              .map((x) => x.poligono)
              .filter((v, i, a) => a.indexOf(v) === i)
          : []
        : [];

    poligonos = poligonos.sort((a, b) => {
      let c = a.toLowerCase(),
        d = b.toLowerCase();
      if (c < d) return -1;
      if (c > d) return 1;
      return 0;
    });

    document.getElementById("spn_dui").innerHTML = app.persona.dui;
    document.getElementById("spn_nombre").innerHTML =
      app.persona.nombre_completo;

    let poligonosHtml = poligonos.map(
      (poligono) =>
        `<div class="col-sm-2 col-md-2 mt-2">
        <div class="d-grid gap-2">
        <button type="button" class="btn btn-primary btn-lg" onclick="app.selectPoligono('${poligono}')">${poligono}</button>
        </div>
        </div>`
    );

    document.getElementById("poligonos_container").innerHTML =
      poligonosHtml.join("");

    $("#casas").hide();
    $("#justificacion").hide();
    $("#poligonos").show();
    $("#paso1").hide();
    $("#paso2").show();
  },
  paso3: function () {
    $("#poligonos").hide();
    $("#justificacion").hide();
    document.getElementById("txtCasa").value = "";
    $("#casas").show();
  },
  paso4: function () {
    document.getElementById(
      "numero_casa"
    ).innerHTML = `Polígono ${app.persona.poligono} - Casa #${app.persona.casa}`;
    $("#casas").hide();
    $("#justificacion").show();
  },
  selectPoligono: function (poligono) {
    app.persona.poligono = poligono;
    document.getElementById("numero_poligono").innerHTML = poligono;
    app.paso3();
  },
  numeroCasa: function (numero) {
    let current = document.getElementById("txtCasa").value;

    document.getElementById("txtCasa").value = current + "" + numero;
  },
  selectCasa: function () {
    app.persona.casa = document.getElementById("txtCasa").value;
    app.paso4();
  },
  guardar_visita: function (motivo = null) {
    if (motivo != null) {
      let ubicaciones = localStorage.getItem("CS-ubicacion-accesos")
          ? JSON.parse(localStorage.getItem("CS-ubicacion-accesos"))
          : {},
        data = {
          ...this.persona,
          motivo,
          sucursal: ubicaciones.sucursal ? ubicaciones.sucursal : 0,
          cluster: ubicaciones.cluster ? ubicaciones.cluster : 0,
        };

      fetchActions
        .post({
          file: "guardar_visita",
          data,
        })
        .then((response) => {
          console.log(response);
          if (response.status == 200) {
            showMessages.success(response.message);
            app.reset();
          } else {
            showMessages.error(response);
          }
        })
        .catch(showMessages.error);
    } else {
      Swal.fire({
        title: "¡Atención!",
        html: "Debe especificar el motivo de la visita",
        icon: "warning",
      });
    }
  },
  busqueda_manual: function () {
    let buscar = true;
    if (app.tipo_documento == "DUI") {
      if (app.fields.dui.value && app.fields.complemento.value) {
        if (!isNaN(app.fields.dui.value)) {
          if (app.fields.dui.value.length != 8) {
            buscar = false;
            Swal.fire({
              title: "¡Atención!",
              html: "El número de DUI debe tener 8 dígitos, el complemento debe tener 1 dígito",
              icon: "warning",
            });
          }
        } else {
          buscar = false;
          Swal.fire({
            title: "¡Atención!",
            html: "DUI no válido",
            icon: "warning",
          });
        }
      } else {
        buscar = false;
        Swal.fire({
          title: "¡Atención!",
          html: "Por favor ingrese o escanee el DUI",
          icon: "warning",
        }).then(() => {
          app.fields.dui.value = "";
          app.fields.complemento.value = "";
          app.fields.dui.focus();
        });
      }
    }

    if (buscar) {
      let persona = {
        tipo_documento: app.tipo_documento,
        documento:
          app.tipo_documento == "DUI"
            ? `${app.fields.dui.value}-${app.fields.complemento.value}`
            : app.fields.licencia.value,
        nombre_completo: null,
        direccion: "",
        fecha_nacimiento: null,
      };
      app.buscar_persona(persona);
    }
  },
  buscar_persona: function (persona) {
    fetchActions
      .post({
        file: "validar_persona",
        data: persona,
      })
      .then((response) => {
        if (response.status == 200) {
          app.busqueda = true;
          if (app.tipo_documento == "DUI") {
            app.fields.dui.value = persona.documento.split("-")[0];
            app.fields.dui.readOnly = true;
          }
          app.fields.nombre.value = persona.nombre_completo;
          persona.nombre_completo == null &&
            (app.fields.nombre.readOnly = false);
          document.getElementById("main-button").style.display = "none";
          $("#personal_data").slideDown();
          $("#form-button").slideDown();
          app.persona = { ...persona };
          switch (response.message) {
            case "Nuevo":
              app.tipo_documento == "DUI" && app.fields.complemento.focus();
              app.tipo_documento != "DUI" && app.fields.nombre.focus();
              break;
            case "Existente":
              let [dui, complemento] = response.documento.split("-");
              app.fields.dui.value = dui;
              app.fields.complemento.value = complemento;
              app.fields.complemento.readOnly = true;
              app.fields.nombre.value = response.nombre_completo;
              break;
            default:
              showMessages.error(response);
              break;
          }
        } else {
          showMessages.error(response);
        }
      })
      .catch(showMessages.error);
  },
};

const ubicacion = {
  getCluster: function (sucursal) {
    fetchActions
      .get({
        file: "getCluster",
        data: {
          sucursal,
        },
      })
      .then((response) => {
        if (response.status == 200) {
          switch (response.message) {
            case "EXITO":
              let options = [
                `<option selected value="" disabled>seleccione</option>`,
                ...response.data.map(
                  (op) => `<option value="${op.id}">${op.nombre}</option>`
                ),
              ];
              document.getElementById("cboCluster").innerHTML =
                options.join("");
              break;
            default:
              showMessages.error(response);
              break;
          }
        } else {
          showMessages.error(response);
        }
      })
      .catch(showMessages.error);
  },
  guardar: function () {
    let data = {
      sucursal: document.getElementById("cboSucursal").value,
      nombre_sucursal:
        document.getElementById("cboSucursal").options[
          document.getElementById("cboSucursal").selectedIndex
        ].text,
      cluster: document.getElementById("cboCluster").value,
      nombre_cluster:
        document.getElementById("cboCluster").options[
          document.getElementById("cboCluster").selectedIndex
        ].text,
    };

    fetchActions
      .get({
        file: "getCasas",
        data: {
          sucursal: data.sucursal,
          cluster: data.cluster,
        },
      })
      .then((response) => {
        if (response.status == 200) {
          switch (response.message) {
            case "EXITO":
              //   console.log(response);
              data.casas = response.data;
              localStorage.setItem(
                "CS-ubicacion-accesos",
                JSON.stringify(data)
              );
              $("#ubicacionMdl").modal("hide");
              $("#paso1").show();
              break;
            default:
              showMessages.error(response);
              break;
          }
        } else {
          showMessages.error(response);
        }
      })
      .catch(showMessages.error);
  },
};
