<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Visitor Registration</title>
  <style>
    body {
      margin: 0;
      font-family: 'Arial', sans-serif;
      background: url('https://t4.ftcdn.net/jpg/07/07/44/51/240_F_707445173_9KPMfX31EkaUtNS768zEcrgrbizoXzQi.jpg');
      background-size: cover;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    .container {
      background: rgb(252, 242, 177);
      border-radius: 15px;
      box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
      width: 400px;
      padding: 30px 20px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
    }

    .logo {
      max-width: 150px;
      /* Ensure the image fits within the container */
      height: auto;
      /* Maintain the aspect ratio */
      margin-bottom: 20px;
    }

    h1 {
      font-size: 24px;
      margin: 0;
      color: #444;
    }

    form {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 15px;
    }

    label {
      font-weight: bold;
      text-align: center;
      width: 100%;
    }

    input[type="text"],
    input[type="file"],
    button {
      width: 90%;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
      font-size: 16px;
    }

    select {
      width: 90%;
      padding: 12px;
      /* Increased padding for a bigger box */
      border: 1px solid #ccc;
      border-radius: 5px;
      font-size: 18px;
      /* Increased font size */
    }

    button {
      background-color: #007BFF;
      color: #fff;
      border: none;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    button:hover {
      background-color: #0056b3;
    }

    .output {
      margin-top: 20px;
      word-wrap: break-word;
    }

    .output a {
      color: #007BFF;
      text-decoration: none;
    }

    .output a:hover {
      text-decoration: underline;
    }

    .footer strong {
      color: blue;
      /* Changed the color of 'Woven Fabric Company' to blue */
    }
  </style>
</head>

<body>
  <div class="container">
    <!-- <img src="https://metoree.s3.ap-northeast-1.amazonaws.com/img/companies/logo/197201.png" alt="Logo" width="120" height="80"> -->
    <h1>Visitor Registration</h1>
    <form id="visitorForm">
      <label for="visitorName">Visitor Name:</label>
      <input type="text" id="visitorName" name="visitorName" placeholder="Enter your name" required>

      <label for="companyName">Company Name:</label>
      <input type="text" id="companyName" name="companyName" placeholder="Enter your company name" required>

      <label for="mobNo">Mobile Number:</label>
      <input type="text" id="mobNo" name="mobNo" placeholder="Enter your mobile number" required>

      <label for="department">Department:</label>
      <select id="department" name="department" onchange="updatePersonsToMeet()" required>
        <option value="">Select Department</option>
      </select>

      <label for="personToMeet">Person to Meet:</label>
      <select id="personToMeet" name="personToMeet" required>
        <option value="">Select Person</option>
      </select>

      <label for="purpose">Purpose:</label>
      <select id="purpose" name="purpose" required>
        <option value="">Select Purpose</option>
      </select>


      <!-- <label for="purpose">Purpose:</label>
      <input type="text" id="purpose" name="purpose" placeholder="Purpose" required> -->

      <!--       
      <label for="personToMeet">Person To Meet:</label>
      <input type="text" id="personToMeet" name="personToMeet" placeholder="Enter person to meet" required> -->

      <label for="file">Upload your file:</label>
      <input type="file" class="uploader" required>

      <button type="button" id="submitBtn">Submit</button>
    </form>
    <div class="footer">
      <!-- <p>Powered by <strong>Rolliflex Cables Pvt Ltd</strong></p> -->
      <div id="waitMessage"></div> <!-- Added this container for messages -->
    </div>
    <div class="output"></div>
  </div>
  <script>
    let departmentsData = {};

      function fetchDropdownData() {
        google.script.run.withSuccessHandler(function (data) {
          departmentsData = data;

          const departmentSelect = document.getElementById('department');
          departmentSelect.innerHTML = '<option value="">Select Department</option>';
          Object.keys(data).forEach(dept => {
            const option = document.createElement('option');
            option.value = dept;
            option.textContent = dept;
            departmentSelect.appendChild(option);
          });
        }).getDepartmentsAndPersons();
      }

      function updatePersonsToMeet() {
        const department = document.getElementById('department').value;
        const personToMeetSelect = document.getElementById('personToMeet');
        personToMeetSelect.innerHTML = '<option value="">Select Person</option>';
        if (departmentsData[department]) {
          departmentsData[department].forEach(person => {
            const option = document.createElement('option');
            option.value = person;
            option.textContent = person;
            personToMeetSelect.appendChild(option);
          });
        }
      }


      function fetchPurposeOptions() {
        google.script.run.withSuccessHandler(function (data) {
          const purposeSelect = document.getElementById('purpose');
          purposeSelect.innerHTML = '<option value="">Select Purpose</option>';
          data.forEach(purpose => {
            const option = document.createElement('option');
            option.value = purpose;
            option.textContent = purpose;
            purposeSelect.appendChild(option);
          });
        }).getPurposeOptions();
      }

      // Call the function on page load to populate the "Purpose" dropdown
      window.onload = function () {
        fetchDropdownData(); // Existing function for departments
        fetchPurposeOptions(); // New function for purpose
      };

    const btn = document.getElementById('submitBtn');
    const output = document.querySelector('.output');
    const upFile = document.querySelector('.uploader');

btn.addEventListener('click', () => {
  const visitorName = document.getElementById('visitorName').value;
  const companyName = document.getElementById('companyName').value;
  const mobNo = document.getElementById('mobNo').value;
  const department = document.getElementById('department').value;
  const personToMeet = document.getElementById('personToMeet').value;
  const purpose = document.getElementById('purpose').value;
  const upFiles = upFile.files[0];

  if (!upFiles) {
    alert('Please upload a file.');
    return;
  }

  // Display "Please wait..." message
  output.innerHTML = ""; // Clear previous content
  const waitMessage = document.createElement('p');
  waitMessage.textContent = "Please wait...";
  waitMessage.style.color = "blue";
  waitMessage.style.fontWeight = "bold";
  output.appendChild(waitMessage);

  const reader = new FileReader();
  reader.onload = function (e) {
    const vals = reader.result.split(',');
    const fileData = {
      fileName: upFiles.name,
      mimeType: upFiles.type,
      data: vals[1],
      visitorData: JSON.stringify({
        visitorName,
        companyName,
        mobNo,
        department,
        personToMeet,
        purpose,
      }),
    };

    google.script.run
      .withSuccessHandler((response) => {
        // Clear the "Please wait..." message
        output.innerHTML = "";
        // Show success message 
        const successMessage = document.createElement('p');
        successMessage.textContent = "Visitor details and file uploaded successfully!";
        successMessage.style.color = "green";
        successMessage.style.fontWeight = "bold";
        output.innerHTML = ""; // Clear previous content
        output.appendChild(successMessage);

        const a = document.createElement('a');
        const linkText = document.createTextNode(response.fileName);
        a.append(linkText);
        a.href = response.url;
        a.setAttribute('target', '_blank');
        output.appendChild(a);

        // Clear the form
        document.getElementById('visitorForm').reset();
      })
      .doUpload(fileData);
  };

  reader.readAsDataURL(upFiles);
});

  </script>
</body>

</html>