★ Linklock.live Help ★

<form id="contactForm">
  <input type="text" name="name" placeholder="Your Name" required>
  <input type="email" name="email" placeholder="Your Email" required>
  <textarea name="message" placeholder="Your Message" required></textarea>
  <button type="submit">Send Message</button>
</form>

<script>
  document.getElementById('contactForm').addEventListener('submit', function(e) {
    e.preventDefault();

    var form = this;
    var submitBtn = form.querySelector('button[type="submit"]');
    var originalText = submitBtn.textContent;
    submitBtn.textContent = 'Sending...';
    submitBtn.disabled = true;

    fetch('YOUR_APPS_SCRIPT_URL', {
      method: 'POST',
      body: new FormData(form)
    })
    .then(function(response) { return response.json(); })
    .then(function(data) {
      if (data.result === 'success') {
        alert('Thanks for your message!');
        form.reset();
      } else {
        throw new Error(data.error || 'Unknown error');
      }
    })
    .catch(function(error) {
      console.error('Error:', error);
      alert('Error sending message. Please try again.');
    })
    .finally(function() {
      submitBtn.textContent = originalText;
      submitBtn.disabled = false;
    });
  });
</script>

<h2>Sign My Guestbook!</h2>

<form id="guestbookForm">
  <input type="text" name="name" placeholder="Your Name" required>
  <input type="text" name="location" placeholder="Where are you from?">
  <textarea name="message" placeholder="Leave a message" required></textarea>
  <button type="submit">Sign Guestbook</button>
</form>

<h3>Previous Visitors</h3>
<div id="entries">Loading entries...</div>

<script>
  var scriptURL = 'YOUR_APPS_SCRIPT_URL';

  // Load existing entries on page load
  function loadEntries() {
    fetch(scriptURL)
      .then(function(response) { return response.json(); })
      .then(function(data) {
        var entriesDiv = document.getElementById('entries');
        entriesDiv.textContent = ''; // Clear safely

        if (data.length === 0) {
          entriesDiv.textContent = 'No entries yet. Be the first!';
          return;
        }

        // Show entries in reverse order (newest first)
        data.reverse().forEach(function(entry) {
          var div = document.createElement('div');
          div.style.borderBottom = '1px solid #ccc';
          div.style.padding = '10px 0';

          var header = document.createElement('strong');
          header.textContent = entry.name;
          if (entry.location) {
            header.textContent += ' from ' + entry.location;
          }

          var message = document.createElement('p');
          message.textContent = entry.message;

          var date = document.createElement('small');
          date.textContent = new Date(entry.timestamp).toLocaleDateString();
          date.style.color = '#666';

          div.appendChild(header);
          div.appendChild(message);
          div.appendChild(date);
          entriesDiv.appendChild(div);
        });
      })
      .catch(function(error) {
        document.getElementById('entries').textContent = 'Error loading entries.';
      });
  }

  // Submit new entry
  document.getElementById('guestbookForm').addEventListener('submit', function(e) {
    e.preventDefault();
    var form = this;
    var btn = form.querySelector('button');
    btn.disabled = true;
    btn.textContent = 'Signing...';

    fetch(scriptURL, { method: 'POST', body: new FormData(form) })
      .then(function(response) { return response.json(); })
      .then(function(data) {
        if (data.result === 'success') {
          alert('Thanks for signing the guestbook!');
          form.reset();
          loadEntries(); // Reload to show new entry
        }
      })
      .finally(function() {
        btn.disabled = false;
        btn.textContent = 'Sign Guestbook';
      });
  });

  // Load entries when page loads
  loadEntries();
</script>