var html = HtmlService.createTemplateFromFile('Proposal Template.html');  
var html = HtmlService.createTemplateFromFile('Marketing Template.html');  
var html = HtmlService.createTemplateFromFile('Trusted Partner Template.html'); 

function showEmailPreview() {
  // Get values from the active sheet and active row
  var sheet = SpreadsheetApp.getActiveSheet();
  var row = sheet.getActiveRange().getRowIndex();
  var userEmail = sheet.getRange(row, getColIndexByName("Primary Email")).getValue(); 
  var userFullName = sheet.getRange(row, getColIndexByName("Contact Full Name")).getValue();  
  var userCompanyName = sheet.getRange(row, getColIndexByName("Company Name")).getValue();  
  var title = sheet.getRange(row, getColIndexByName("Title")).getValue();   
  var company_location = sheet.getRange(row, getColIndexByName("Company Location")).getValue();    
  var company_phone1 = sheet.getRange(row, getColIndexByName("Company Phone 1")).getValue();    
  var subjectLine = "Company Proposal - " + userCompanyName;
 
  // Create the select element
  const select = `
    <select id="template-select">
      <option value="Proposal Template.html">Proposal Template</option>
      <option value="Marketing Template.html">Marketing Template</option>
      <option value="Trusted Partner Template.html">Trusted Partner Template</option>
    </select>
  `;
  // Create the button element
  const button = `<button id="send-button">Send Email</button>
<div id="preview"></div>`; //This could be a issue? The ai did not know where to place this or cut down before giving me a proper answer. 
  // Create an HTML output page that displays the email template, the select element, and a button to send the email
  var output = HtmlService.createHtmlOutput(`
    <script>
      var buttonElement;
  
  function getElementById(id) {
    return document.getElementById(id);
  }
  function init() {
    // Add a change event listener to the select element
    document.getElementById('template-select').addEventListener('change', function() {
      // Get the selected template file name
      var templateFile = this.value;
      
      // Read the contents of the selected file
      var template = readFile(templateFile);
      
      // Set values in the template
      var html = HtmlService.createTemplate(template);
      html.userFullName = userFullName;
      html.userCompanyName = userCompanyName;
      html.title = title;
      html.company_location = company_location;
      html.company_phone1 = company_phone1;
      
      // Get the filled-in email template as a string
      var emailTemplate = html.evaluate().getContent();
      
      // Update the preview window with the selected template
      document.getElementById('preview').innerHTML = emailTemplate;
    });
    
    // Add a click event listener to the button element
    buttonElement = getElementById('send-button');
    buttonElement.addEventListener('click', function() {
      // Get the selected template file name
      var templateFile = document.getElementById('template-select').value;
      // Pass the selected template file name as an argument to the sendEmail function
      sendEmail(templateFile);
    });
  }
  window.onload = init; 
 
function sendEmail(templateFile) {
  // Read the contents of the selected file
  var template = readFile(templateFile);
  // Set values in the template
  var html = HtmlService.createTemplate(template);
  html.userFullName = userFullName;
  html.userCompanyName = userCompanyName;
  html.title = title;
  html.company_location = company_location;
  html.company_phone1 = company_phone1;
  
  // Get the filled-in email template as a string
  var emailTemplate = html.evaluate().getContent();
  
  // Send the email
  GmailApp.sendEmail(userEmail, subjectLine, '', {htmlBody: emailTemplate});
}  
 
    </script>
    <script>
  init();
</script>
    ${select}
    ${button}
  
  `)
    .setWidth(950)
    .setHeight(750)
    .setSandboxMode(HtmlService.SandboxMode.IFRAME);
// Display the output page in a modal dialog box
SpreadsheetApp.getUi().showModalDialog(output, 'Email Preview');
//output.evaluate();
//window.onload = init;
};
function readFile(templateFile) {
  // Get the contents of the selected file
  var file = DriveApp.getFilesByName(templateFile);
  var contents = file.next().getBlob().getDataAsString();
  return contents;
}//window.onload = init;

<form>
  <label for="template">Select a template:</label><br>
  <select id="template" name="template">
    <option value="Proposal Template.html">Proposal Template</option>
    <option value="Markting Template">Marketing Template</option>
  </select>
  <br><br>
  <input type="button" value="Preview" onclick="google.script.run.onTemplateSelected(document.forms[0].template.value)">
</form> 

function showEmailPreview() {
  // Get values from the active sheet and active row
  var sheet = SpreadsheetApp.getActiveSheet();
  var row = sheet.getActiveRange().getRowIndex();
  var rate = sheet.getLastRow();
  var userEmail = sheet.getRange(row, getColIndexByName("Primary Email")).getValue(); 
  var userFullName = sheet.getRange(row, getColIndexByName("Contact Full Name")).getValue();  
  var userCompanyName = sheet.getRange(row, getColIndexByName("Company Name")).getValue();   
  var subjectLine = "Company Proposal - " + userCompanyName ;
  var aliases = GmailApp.getAliases()
  // Create the email template selection menu
  var proposalTemplate = HtmlService.createTemplateFromFile('Proposal Template.html');
  var marktingTemplate = HtmlService.createTemplateFromFile('Markting Template.html');
  var selectMenu = HtmlService.createTemplateFromFile('template-select-menu.html');
  var selectMenuHtml = selectMenu.evaluate().getContent();
  // Create an HTML output page that displays the email template selection menu and a button to send the email
  var output = HtmlService.createHtmlOutput(selectMenuHtml)
      .setWidth(600)
      .setHeight(450);
  // Display the output page in a modal dialog box
  SpreadsheetApp.getUi().showModalDialog(output, 'Email Preview');
}
/**
 * This function is called when the user selects a template from the drop-down menu.
 * It creates an email preview using the selected template and displays it in the modal dialog box.
 */
//var html = HtmlService.createTemplateFromFile(templateFileName);
function onTemplateSelected(templateFileName) {
  // Get values from the active sheet and active row
  var sheet = SpreadsheetApp.getActiveSheet();
  var row = sheet.getActiveRange().getRowIndex();
  var rate = sheet.getLastRow();
  var userEmail = sheet.getRange(row, getColIndexByName("Primary Email")).getValue(); 
  var userFullName = sheet.getRange(row, getColIndexByName("Contact Full Name")).getValue();  
  var userCompanyName = sheet.getRange(row, getColIndexByName("Company Name")).getValue();   
  var subjectLine = "Company Proposal - " + userCompanyName ;
  var aliases = GmailApp.getAliases();
  // Create the email template and set values in the template 
  if (templateFileName == 'Proposal Template.html') {
    var proposalTemplate = HtmlService.createTemplateFromFile('Proposal Template.html');
    proposalTemplate.userFullName = userFullName;
    proposalTemplate.userCompanyName = userCompanyName;
    var template = proposalTemplate.evaluate().getContent();
  } else if (templateFileName == 'Markting Template') {
    var marktingTemplate = HtmlService.createTemplateFromFile('Markting Template.html');
    marktingTemplate.userFullName = userFullName;
    marktingTemplate.userCompanyName = userCompanyName;
    var template = marktingTemplate.evaluate().getContent();
  } else {
    var template = selectMenuHtml;
  } 
  // Create an HTML output page that displays the email template and a button to send the email
    var selectMenu = HtmlService.createTemplateFromFile("template-select-menu.html");
    var selectMenuHtml = selectMenu.evaluate().getContent();
  var output = HtmlService.createHtmlOutput(template)
      .setWidth(600)
      .setHeight(450)
      .setSandboxMode(HtmlService.SandboxMode.IFRAME)
      .setContent(selectMenuHtml + '<br><br>' + template);
  // Update the modal dialog box with the new email template
  SpreadsheetApp.getUi().showModalDialog(output, 'Email Preview');
}