{{ define "content" }}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Campaign Management System - Poll Response</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
      body,
      html {
        height: 100vh;
        overflow: hidden;
      }
      .toggle-button {
        transition: all 0.2s ease;
      }
      .toggle-button:hover {
        background-color: #f3f4f6;
      }
      .toggle-button.active {
        background-color: #1f2937;
        color: white;
        border-color: #1f2937;
      }
      .professional-input:focus {
        outline: none;
        border-color: #1f2937;
        box-shadow: 0 0 0 2px rgba(31, 41, 55, 0.1);
      }
      .professional-button:hover {
        background-color: #374151;
      }
    </style>
  </head>
  <body class="bg-gray-100 font-sans">
    <div class="h-screen flex flex-col">
      <!-- Form Content - Scrollable -->
      <div class="flex-1 overflow-y-auto">
        <div class="flex">
          <!-- Main Form Area -->
          <div class="flex-1 mb-10">
            <div class="max-w-4xl mx-auto h-full">
              <div class="bg-white border border-gray-300 h-full flex flex-col">
                <!-- Form Header -->
                <div
                  class="bg-gray-50 border-b border-gray-300 px-6 py-4 flex-shrink-0"
                >
                  <h2 class="text-lg font-semibold text-gray-900">
                    Voter Response Form
                  </h2>
                </div>

                <!-- Form Body -->
                <div class="flex-1 p-6 overflow-y-auto pb-6">
                  <form id="poll-form" method="POST" class="space-y-6">
                    <input type="hidden" name="poll_id" value="12345" />

                    <!-- Postal Code -->
                    <div>
                      <label
                        class="block text-sm font-medium text-gray-700 mb-2"
                      >
                        Respondent Postal Code *
                      </label>
                      <input
                        type="text"
                        name="postal_code"
                        placeholder="T2P 1J9"
                        class="professional-input w-full px-3 py-2 border border-gray-300 bg-white text-gray-900 placeholder-gray-500 transition-all"
                        required
                      />
                    </div>

                    <!-- Question 1 -->
                    <div>
                      <label
                        class="block text-sm font-medium text-gray-700 mb-3"
                      >
                        1. Have you voted before?
                      </label>
                      <div class="grid grid-cols-2 gap-3">
                        <button
                          type="button"
                          class="toggle-button h-12 border-2 border-gray-300 bg-white text-gray-700 font-medium"
                          data-name="question1_voted_before"
                          data-value="true"
                        >
                          YES
                        </button>
                        <button
                          type="button"
                          class="toggle-button h-12 border-2 border-gray-300 bg-white text-gray-700 font-medium"
                          data-name="question1_voted_before"
                          data-value="false"
                        >
                          NO
                        </button>
                      </div>
                      <input
                        type="hidden"
                        name="question1_voted_before"
                        value=""
                      />
                    </div>

                    <!-- Question 2 -->
                    <div>
                      <label
                        class="block text-sm font-medium text-gray-700 mb-3"
                      >
                        2. Will you vote again for this candidate?
                      </label>
                      <div class="grid grid-cols-2 gap-3">
                        <button
                          type="button"
                          class="toggle-button h-12 border-2 border-gray-300 bg-white text-gray-700 font-medium"
                          data-name="question2_vote_again"
                          data-value="true"
                        >
                          YES
                        </button>
                        <button
                          type="button"
                          class="toggle-button h-12 border-2 border-gray-300 bg-white text-gray-700 font-medium"
                          data-name="question2_vote_again"
                          data-value="false"
                        >
                          NO
                        </button>
                      </div>
                      <input
                        type="hidden"
                        name="question2_vote_again"
                        value=""
                      />
                    </div>

                    <!-- Question 3 -->
                    <div>
                      <label
                        class="block text-sm font-medium text-gray-700 mb-2"
                      >
                        3. Lawn Signs Required
                      </label>
                      <div class="flex items-center space-x-3">
                        <input
                          type="number"
                          name="question3_lawn_signs"
                          min="0"
                          max="10"
                          value="0"
                          class="professional-input w-20 px-3 py-2 border border-gray-300 bg-white text-gray-900 text-center"
                        />
                        <span class="text-sm text-gray-500"
                          >signs (max 10)</span
                        >
                      </div>
                    </div>

                    <!-- Question 4 -->
                    <div>
                      <label
                        class="block text-sm font-medium text-gray-700 mb-2"
                      >
                        4. Banner Signs Required
                      </label>
                      <div class="flex items-center space-x-3">
                        <input
                          type="number"
                          name="question4_banner_signs"
                          min="0"
                          max="5"
                          value="0"
                          class="professional-input w-20 px-3 py-2 border border-gray-300 bg-white text-gray-900 text-center"
                        />
                        <span class="text-sm text-gray-500">signs (max 5)</span>
                      </div>
                    </div>

                    <!-- Question 5 -->
                    <div>
                      <label
                        class="block text-sm font-medium text-gray-700 mb-2"
                      >
                        5. Additional Comments
                      </label>
                      <textarea
                        name="question5_thoughts"
                        rows="4"
                        placeholder="Enter any additional feedback or comments..."
                        class="professional-input w-full px-3 py-2 border border-gray-300 bg-white text-gray-900 placeholder-gray-500 resize-none"
                      ></textarea>
                    </div>

                    <!-- Delivery Section (conditionally shown) -->
                    <div id="delivery-section" class="hidden">
                      <label
                        class="block text-sm font-medium text-gray-700 mb-2"
                      >
                        Delivery Address
                      </label>
                      <input
                        type="text"
                        name="delivery_address"
                        placeholder="Enter delivery address"
                        class="professional-input w-full px-3 py-2 border border-gray-300 bg-white text-gray-900 placeholder-gray-500"
                      />
                    </div>
                  </form>
                </div>

                <!-- Form Footer -->
                <div
                  class="border-t border-gray-300 bg-gray-50 px-6 py-4 flex-shrink-0"
                >
                  <div class="flex space-x-3">
                    <button
                      type="button"
                      onclick="window.history.back()"
                      class="px-4 py-2 border border-gray-300 bg-white text-gray-700 text-sm font-medium hover:bg-gray-50 transition-all"
                    >
                      CANCEL
                    </button>
                    <button
                      type="submit"
                      form="poll-form"
                      class="professional-button px-6 py-2 bg-gray-800 text-white text-sm font-medium hover:bg-gray-700 transition-all"
                    >
                      SUBMIT RESPONSE
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script>
      document.addEventListener("DOMContentLoaded", function () {
        // Toggle button functionality
        const toggleButtons = document.querySelectorAll(".toggle-button");
        toggleButtons.forEach((button) => {
          button.addEventListener("click", function () {
            const name = this.getAttribute("data-name"); // input name
            const value = this.getAttribute("data-value");

            // Find hidden input
            const hiddenInput = document.querySelector(`input[name="${name}"]`);
            if (!hiddenInput) return;

            // Reset sibling buttons
            const siblingButtons = document.querySelectorAll(
              `.toggle-button[data-name="${name}"]`
            );
            siblingButtons.forEach((btn) => btn.classList.remove("active"));

            // Mark this as active
            this.classList.add("active");

            // Set hidden input value
            hiddenInput.value = value;
          });
        });
      });
    </script>
  </body>
</html>
{{ end }}
