<!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;
    }

    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="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>
    <div class="output"></div>
  </div>
  <script>
    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 personToMeet = document.getElementById('personToMeet').value;
  const upFiles = upFile.files[0];

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

  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,
        personToMeet,
      }),
    };

    google.script.run
      .withSuccessHandler((response) => {
        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>