itflow/agent/js/tickets_add_modal.js

// Used to populate dynamic content in recurring_ticket_add_modal and ticket_add_modal_v2 based on selected client

// Client selected listener
//  We seem to have to use jQuery to listen for events, as the client input is a select2 component?

const clientSelectDropdown = document.getElementById("changeClientSelect"); // Define client selector

// // If the client selector is disabled, we must be on a client-specific page instead. Trigger the lists to update.
if (clientSelectDropdown.disabled) {

    let client_id = $(clientSelectDropdown).find(':selected').val();

    populateLists(client_id);
}

// Listener for client selection. Populate select lists when a client is selected
$(clientSelectDropdown).on('select2:select', function (e) {
    let client_id = $(this).find(':selected').val();

    // Update the contacts dropdown list
    populateLists(client_id);

});

// Populates dropdowns with dynamic content based on the client ID
//  Called the client select dropdown is used or if the client select is disabled
function populateLists(client_id) {

    populateContactsDropdown(client_id);

    populateAssetsDropdown(client_id);

    populateLocationsDropdown(client_id);

    populateVendorsDropdown(client_id);
}

// Populate client contacts
function populateContactsDropdown(client_id) {
    // Send a GET request to ajax.php as ajax.php?get_client_contacts=true&client_id=NUM
    jQuery.get(
        "ajax.php",
        {get_client_contacts: 'true', client_id: client_id},
        function(data) {

            // If we get a response from ajax.php, parse it as JSON
            const response = JSON.parse(data);

            // Access the data for contacts (multiple)
            const contacts = response.contacts;

            // Contacts dropdown
            const contactSelectDropdown = document.getElementById("contactSelect");

            // Clear dropdown
            let i, L = contactSelectDropdown.options.length - 1;
            for (i = L; i >= 0; i--) {
                contactSelectDropdown.remove(i);
            }
            contactSelectDropdown[contactSelectDropdown.length] = new Option('- Contact -', '0');

            // Populate dropdown
            contacts.forEach(contact => {
                var appendText = "";
                if (contact.contact_primary == "1") {
                    appendText = " (Primary)";
                } else if (contact.contact_technical == "1") {
                    appendText = " (Technical)";
                }
                contactSelectDropdown[contactSelectDropdown.length] = new Option(contact.contact_name + appendText, contact.contact_id);
            });

        }
    );
}

// Populate client assets
function populateAssetsDropdown(client_id) {
    jQuery.get(
        "ajax.php",
        {get_client_assets: 'true', client_id: client_id},
        function(data) {

            // If we get a response from ajax.php, parse it as JSON
            const response = JSON.parse(data);

            // Access the data for assets (multiple)
            const assets = response.assets;

            // Assets dropdown
            const assetSelectDropdown = document.getElementById("assetSelect");

            // Clear dropdown
            let i, L = assetSelectDropdown.options.length - 1;
            for (i = L; i >= 0; i--) {
                assetSelectDropdown.remove(i);
            }
            assetSelectDropdown[assetSelectDropdown.length] = new Option('- Asset -', '0');

            // Populate dropdown with asset name (and contact, if set)
            assets.forEach(asset => {
                let displayText = asset.asset_name;
                if (asset.contact_name !== null) {
                    displayText = asset.asset_name + " - " + asset.contact_name;
                }

                assetSelectDropdown[assetSelectDropdown.length] = new Option(displayText, asset.asset_id);
            });

        }
    );
}

// Populate client locations
function populateLocationsDropdown(client_id) {
    jQuery.get(
        "ajax.php",
        {get_client_locations: 'true', client_id: client_id},
        function(data) {

            // If we get a response from ajax.php, parse it as JSON
            const response = JSON.parse(data);

            // Access the data for locations (multiple)
            const locations = response.locations;

            // Locations dropdown
            const locationSelectDropdown = document.getElementById("locationSelect");

            // Clear dropdown
            let i, L = locationSelectDropdown.options.length - 1;
            for (i = L; i >= 0; i--) {
                locationSelectDropdown.remove(i);
            }
            locationSelectDropdown[locationSelectDropdown.length] = new Option('- Location -', '0');

            // Populate dropdown
            locations.forEach(location => {
                locationSelectDropdown[locationSelectDropdown.length] = new Option(location.location_name, location.location_id);
            });

        }
    );
}

// Populate client vendors
function populateVendorsDropdown(client_id) {
    jQuery.get(
        "ajax.php",
        {get_client_vendors: 'true', client_id: client_id},
        function(data) {

            // If we get a response from ajax.php, parse it as JSON
            const response = JSON.parse(data);

            // Access the data for locations (multiple)
            const vendors = response.vendors;

            // Locations dropdown
            const vendorSelectDropdown = document.getElementById("vendorSelect");

            // Clear dropdown
            let i, L = vendorSelectDropdown.options.length - 1;
            for (i = L; i >= 0; i--) {
                vendorSelectDropdown.remove(i);
            }
            vendorSelectDropdown[vendorSelectDropdown.length] = new Option('- Vendor -', '0');

            // Populate dropdown
            vendors.forEach(vendor => {
                vendorSelectDropdown[vendorSelectDropdown.length] = new Option(vendor.vendor_name, vendor.vendor_id);
            });

        }
    );
}

const TEMPLATE_AJAX_URL = "/agent/ajax.php";

function applyTemplateToForm(subject, details) {
  const subjectEl = document.getElementById("subjectInput");
  if (subjectEl) subjectEl.value = subject || "";

  if (typeof tinymce !== "undefined") {
    const ed = tinymce.get("detailsInput");
    if (ed) {
      ed.setContent(details || "");
      return;
    }
  }

  const detailsEl = document.getElementById("detailsInput");
  if (detailsEl) detailsEl.value = details || "";
}

function loadTemplatesIfPresent() {
  const select = document.getElementById("ticket_template_select");
  if (!select) return;

  // If already loaded, do nothing
  if (select.dataset.loaded === "1") return;

  // Mark as loading to prevent duplicate fetches
  select.dataset.loaded = "1";

  fetch(`${TEMPLATE_AJAX_URL}?get_ticket_templates=true`, { credentials: "same-origin" })
    .then(r => r.json())
    .then(data => {
      select.innerHTML = `<option value="0">- Choose a Template -</option>`;

      (data.templates || []).forEach(t => {
        const opt = document.createElement("option");
        opt.value = t.ticket_template_id;
        opt.textContent = `${t.ticket_template_name} (${t.task_count} tasks)`;
        select.appendChild(opt);
      });
    })
    .catch(err => {
      // allow retry if it failed
      select.dataset.loaded = "0";
      console.error("Template list load failed:", err);
    });
}

// 1) Run once now (in case modal is already present)
loadTemplatesIfPresent();

// 2) Watch for AJAX-injected modal content
const ticketTemplateObserver = new MutationObserver(() => {
  loadTemplatesIfPresent();
});

ticketTemplateObserver.observe(document.body, { childList: true, subtree: true });

// 3) When user changes template, fetch details
document.addEventListener("change", function (e) {
  if (e.target && e.target.id === "ticket_template_select") {
    const templateId = e.target.value;

    if (!templateId || templateId === "0") {
      applyTemplateToForm("", "");
      return;
    }

    fetch(`${TEMPLATE_AJAX_URL}?get_ticket_template_details=true&ticket_template_id=${encodeURIComponent(templateId)}`, {
      credentials: "same-origin"
    })
      .then(r => r.json())
      .then(resp => {
        if (resp.success !== "TRUE") {
          applyTemplateToForm("", "");
          return;
        }
        applyTemplateToForm(resp.subject, resp.details);
      })
      .catch(err => console.error("Template details load failed:", err));
  }
});