<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document Submission Checklist</title>
  <!-- Include Google Fonts -->
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
  <!-- Include Font Awesome for Icons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <!-- Include CSS for styling -->
  <style>
    body {
      font-family: 'Roboto', sans-serif;
      background: linear-gradient(to right, #667eea, #764ba2);
      margin: 0;
      padding: 0;
      color: #333;
    }

    .container {
      max-width: 800px;
      margin: 50px auto;
      background: #fff;
      border-radius: 10px;
      padding: 30px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    }

    h1 {
      text-align: center;
      color: #444;
    }

    .question {
      margin-bottom: 20px;
      position: relative;
    }

    .question label {
      display: block;
      font-size: 18px;
      margin-bottom: 10px;
      font-weight: 500;
    }

    .question select {
      width: 100%;
      padding: 10px;
      border-radius: 5px;
      border: 1px solid #ccc;
      font-size: 16px;
    }

    .hidden {
      display: none;
    }

    .btn {
      display: block;
      width: 100%;
      padding: 15px;
      text-align: center;
      background: #667eea;
      color: #fff;
      border: none;
      border-radius: 5px;
      font-size: 18px;
      cursor: pointer;
      margin-top: 30px;
      transition: background 0.3s ease;
    }

    .btn:hover {
      background: #5a67d8;
    }

    .result {
      margin-top: 30px;
      background: #f7fafc;
      padding: 20px;
      border-radius: 5px;
    }

    .result textarea {
      width: 100%;
      height: 300px;
      padding: 15px;
      font-size: 16px;
      border: 1px solid #e2e8f0;
      border-radius: 5px;
      resize: none;
    }

    /* Animations */
    .fade-in {
      animation: fadeIn 0.5s ease forwards;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(-10px); }
      to { opacity: 1; transform: translateY(0); }
    }
  </style>
</head>
<body>

  <div class="container">
    <h1>Document Submission Checklist</h1>
    
    <div class="question">
      <label for="with-w9">With W9?</label>
      <select id="with-w9">
        <option value="" disabled selected>Select Yes or No</option>
        <option value="yes">Yes</option>
        <option value="no">No</option>
      </select>
    </div>

    <div class="question hidden" id="w9-version-section">
      <label for="w9-version">Is it the 2024 version of the W9 form?</label>
      <select id="w9-version">
        <option value="" disabled selected>Select Yes or No</option>
        <option value="2024">Yes, 2024 version</option>
        <option value="not-2024">No, not 2024 version</option>
      </select>
    </div>

    <div class="question">
      <label for="with-coi">With Certificate of Insurance (COI)?</label>
      <select id="with-coi">
        <option value="" disabled selected>Select Yes or No</option>
        <option value="yes">Yes</option>
        <option value="no">No</option>
      </select>
    </div>

    <div class="question hidden" id="coi-holder-section">
      <label for="coi-correct">Is the Certificate Holder correct?</label>
      <select id="coi-correct">
        <option value="" disabled selected>Select Yes or No</option>
        <option value="correct">Yes, correct</option>
        <option value="incorrect">No, incorrect</option>
      </select>
    </div>

    <div class="question">
      <label for="with-vendor-form">With Vendor Request Form?</label>
      <select id="with-vendor-form">
        <option value="" disabled selected>Select Yes or No</option>
        <option value="yes">Yes</option>
        <option value="no">No</option>
      </select>
    </div>

    <div class="question">
      <label for="with-dot">With DOT#?</label>
      <select id="with-dot">
        <option value="" disabled selected>Select Yes or No</option>
        <option value="yes">Yes</option>
        <option value="no">No</option>
      </select>
    </div>

    <div class="question">
      <label for="with-ach">With ACH?</label>
      <select id="with-ach">
        <option value="" disabled selected>Select Yes or No</option>
        <option value="yes">Yes</option>
        <option value="no">No</option>
      </select>
    </div>

    <button class="btn" onclick="generateEmail()">Generate Email Response</button>

    <div class="result hidden fade-in" id="result">
      <h2>Email Response:</h2>
      <textarea id="emailContent" readonly></textarea>
    </div>

  </div>

  <!-- Include JavaScript for interactivity -->
  <script>
    // Get DOM elements
    const w9Select = document.getElementById('with-w9');
    const w9VersionSection = document.getElementById('w9-version-section');
    const coiSelect = document.getElementById('with-coi');
    const coiHolderSection = document.getElementById('coi-holder-section');
    const resultSection = document.getElementById('result');

    // Event listeners for showing/hiding follow-up questions
    w9Select.addEventListener('change', function() {
      if (this.value === 'yes') {
        w9VersionSection.classList.remove('hidden');
        w9VersionSection.classList.add('fade-in');
      } else {
        w9VersionSection.classList.add('hidden');
        document.getElementById('w9-version').value = '';
      }
    });

    coiSelect.addEventListener('change', function() {
      if (this.value === 'yes') {
        coiHolderSection.classList.remove('hidden');
        coiHolderSection.classList.add('fade-in');
      } else {
        coiHolderSection.classList.add('hidden');
        document.getElementById('coi-correct').value = '';
      }
    });

    // Function to generate the email response
    function generateEmail() {
      let emailContent = '';
      let recipientName = '[Recipient\'s Name]';
      emailContent += `Hi ${recipientName},\n\n`;

      // Get values from the form
      let withW9 = document.getElementById('with-w9').value;
      let w9Version = document.getElementById('w9-version').value;
      let withCOI = document.getElementById('with-coi').value;
      let coiCorrect = document.getElementById('coi-correct').value;
      let withVendorForm = document.getElementById('with-vendor-form').value;
      let withDOT = document.getElementById('with-dot').value;
      let withACH = document.getElementById('with-ach').value;

      // Flags to track missing documents
      let needW9 = false;
      let wrongW9Version = false;
      let needCOI = false;
      let incorrectCOIHolder = false;
      let needVendorForm = false;
      let needDOT = false;
      let needACH = false;

      // Logic for W9
      if (withW9 === 'no') {
        needW9 = true;
      } else if (withW9 === 'yes') {
        if (w9Version === '2024') {
          // All good
        } else if (w9Version === 'not-2024') {
          wrongW9Version = true;
        }
      }

      // Logic for COI
      if (withCOI === 'no') {
        needCOI = true;
      } else if (withCOI === 'yes') {
        if (coiCorrect === 'correct') {
          // All good
        } else if (coiCorrect === 'incorrect') {
          incorrectCOIHolder = true;
        }
      }

      // Logic for Vendor Request Form
      if (withVendorForm === 'no') {
        needVendorForm = true;
      }

      // Logic for DOT#
      if (withDOT === 'no') {
        needDOT = true;
      }

      // Logic for ACH
      if (withACH === 'no') {
        needACH = true;
      }

      // Build the email content based on the flags
      if (!needW9 && !wrongW9Version && !needCOI && !incorrectCOIHolder && withVendorForm === 'yes' && withDOT === 'yes') {
        emailContent += 'All the required documents are in order. You may proceed with the registration.\n\n';
      } else {
        if (needW9) {
          emailContent += 'Please provide the 2024 version of the W-9 form. A blank copy is attached for your convenience.\n\n';
        }
        if (wrongW9Version) {
          emailContent += 'It appears that the W-9 form provided is not the 2024 version. Kindly complete and return the 2024 version. A blank copy is attached for your convenience.\n\n';
        }
        if (needCOI) {
          emailContent += 'Please provide the Certificate of Insurance (COI).\n\n';
        }
        if (incorrectCOIHolder) {
          emailContent += 'We noticed that the certificate holder information on the Certificate of Insurance (COI) is incorrect. Please refer to the attached image for the correct details and provide an updated COI.\n\n';
        }
        if (needVendorForm) {
          emailContent += 'Kindly complete and return the Vendor Request Form. A blank copy is attached for your convenience.\n\n';
        }
        if (needDOT) {
          emailContent += 'Please provide the DOT (Department of Transportation) number.\n\n';
        }
        if (needACH) {
          emailContent += 'Additionally, if they are for payables, please complete and return the attached ACH form.\n\n';
        }
      }

      emailContent += 'Thank you.\n';

      // Display the result
      document.getElementById('emailContent').value = emailContent;
      resultSection.classList.remove('hidden');
      resultSection.scrollIntoView({ behavior: 'smooth' });
    }
  </script>

</body>
</html>

can you edit the responses for each scenario in this code, edit it to be delivered the best way