let clicked_presentation_frame = null;
let clicked_complexes_presentation_frame = null;
let clicked_from_settings_complexes = null;
$(document).ready(function () {
  $("#iframe-modal-submit").click(editPresentationSettings);
  $("#iframe-complexes-modal-submit").click(editPresentationComplexes);
  
  // presentation-iframe
  $(".presentation-settings").click(function () {
    clicked_presentation_frame = $(this);
    var id = $(this).attr("data-id");

    $("#presentation_region").val("");
    $("#presentation_endDate").val("");
    $("#presentation_color").val("");
    $("#iframe_url").text("");

    if (id) {
      $.ajax({
        url: "/admin/ajax/togglePresentationFrame.php?id=" + id,
        success: function (res) {
          if (res) {
            const response = JSON.parse(res);
            if (response.status) {
              console.log(+response.data["rf_region_id"]);

              $("#presentation_region").val(+response.data["rf_region_id"]);
              $("#presentation_endDate").val(response.data["end_date"]);
              $("#presentation_color").val(response.data["color"]);

              const url = response.data['url']; // `http://localhost:8080/#/catalogs/${response.data["token"]}`;
              const iframe = `<iframe title="Presentation" width="800" height="800" src="${url}"> </iframe>`
              $("#iframe_url").html(`<code></code>`);
              $("#iframe_url > code").text(iframe)

              $("#iframe_url  +svg")
                // .off("click")
                .on("click", function () {
                  copyToClipboard(iframe);
                  showCopiedMessage();
                });
            }
            console.log(response);
            
          }
          $("#edit_presentation_settings_bg").fadeIn(500);
          $("#edit_presentation_settings").toggle(10);
          $("body").addClass("lock");
        },
      });
    }
  });

  $("body").on("click", ".closer", function (e) {
    $("#edit_presentation_settings_bg").hide(10);
    $("#edit_presentation_settings").hide(10);
    $("body").removeClass("lock");
  });

    // Complexes catalog in iframe
  $(".complex-iframe").click(function () {
    clicked_complexes_presentation_frame = $(this);
    var id = $(this).attr("data-id");
    console.log(id, 'id');
    

    // $("#complexes_presentation_region").val("");
    // $("#complexes_presentation_endDate").val("");
    // $("#complexes_presentation_color").val("");
    $("#iframe_url").text("");

    if (id) {
      $.ajax({
        url: "/admin/ajax/toggleComplexesFrame.php?id=" + id,
        success: function (res) {
          console.log(res, 'ressss');
          
          if (res) {
            const response = JSON.parse(res);
            if (response.status) {
              console.log(+response.data["rf_region_id"]);

              // $("#complexes_presentation_endDate").val(+response.data["rf_region_id"]);
              $("#complexes_presentation_endDate").val(response.data["end_date"]);
              // $("#presentation_color").val(response.data["color"]);

              const url = response.data['url']; // `http://localhost:8080/#/catalogs/${response.data["token"]}`;
              const iframe = `<iframe title="Company Presentation" width="1920" height="1080" src="${url}"> </iframe>`
              $("#complexes_iframe_url").html(`<code></code>`);
              $("#complexes_iframe_url > code").text(iframe)

              $("#complexes_iframe_url  +svg")
                // .off("click")
                .on("click", function () {
                  copyToClipboard(iframe);
                  showCopiedMessage();
                });
            }
            console.log(response);
            
          }
          $("#edit_presentation_complexes_settings_bg").fadeIn(500);
          $("#edit_complexes_presentation_settings").toggle(10);
          $("body").addClass("lock");
        },
      });
    }
  });

  $("body").on("click", ".closer-complexes", function (e) {
    $("#edit_presentation_complexes_settings_bg").hide(10);
    $("#edit_complexes_presentation_settings").hide(10);
    $("body").removeClass("lock");
  });


  // FUCNTIONS
  function copyToClipboard(text) {
    navigator.clipboard.writeText(text)
  }
  function showCopiedMessage() {
    const tooltip = $(".iframe_tooltip");
    tooltip.show();
    setTimeout(function() {
      tooltip.fadeOut();
    }, 2000);
  }
});


function editPresentationSettings(event) {
  let region = document.getElementById("presentation_region").value;
  let endDate = document.getElementById("presentation_endDate").value;
  let color = document.getElementById("presentation_color").value;
  let url = document.getElementById("iframe_url").value;
  if (clicked_presentation_frame) {
    const id = clicked_presentation_frame.attr("data-id");
    console.log(region, endDate);

    $.ajax({
      url: "/admin/ajax/togglePresentationFrame.php?id=" + id,
      method: "post",
      data: { region, endDate, color, url, id },
      success: function (data) {
        $("body").removeClass("lock");
        window.location.reload(true);
      },
      error: function (jqXHR, textStatus, errorThrown) {
        var i = errorThrown;
      },
    });
  }
}

function editPresentationComplexesSettings(event) {
  
  let main_color = document.getElementById("complexes_main_color").value;
  let url = document.getElementById("complexes_iframe_url").value;
  if (clicked_complexes_presentation_frame) {
    const id = clicked_complexes_presentation_frame.attr("data-id");
    // console.log(region, endDate, 'complexes');

    $.ajax({
      url: "/admin/ajax/toggleComplexesFrame.php?id=" + id,
      method: "post",
      data: { main_color, url, id, client_funnel_id, req_funnel_id, color_reserved, color_free },
      success: function (data) {
        console.log(data);
        
        $("body").removeClass("lock");
        // window.location.reload(true);
      },
      error: function (jqXHR, textStatus, errorThrown) {
        var i = errorThrown;
      },
    });
  }
}

function editPresentationComplexes(event) {
  let endDate = document.getElementById("complexes_presentation_endDate").value;
  // let color = document.getElementById("presentation_color").value;
  let url = document.getElementById("complexes_iframe_url").value;
  if (clicked_complexes_presentation_frame) {
    const id = clicked_complexes_presentation_frame.attr("data-id");
    // console.log(region, endDate, 'complexes');

    $.ajax({
      url: "/admin/ajax/toggleComplexesFrame.php?id=" + id,
      method: "post",
      data: { endDate, url, id },
      success: function (data) {
        $("body").removeClass("lock");
        console.log('its success', data);
        
        // window.location.reload(true);
      },
      error: function (jqXHR, textStatus, errorThrown) {
        var i = errorThrown;
      },
    });
  }
}