{% extends "base.html" %}
{% block content %}
<div class="max-w-md mx-auto p-4">
  <div class="bg-white rounded-lg shadow-md p-6 mb-6">
    <div class="text-center mb-6">
      <i class="fas fa-link text-irish-green text-4xl mb-4"></i>
      <h1 class="text-2xl font-bold text-irish-green">Link QR Codes to Event</h1>
      <p class="text-gray-600">Administrator Access</p>
    </div>
    
    <div class="bg-irish-green bg-opacity-10 border border-irish-green rounded-md p-4 mb-6">
      <h3 class="font-bold text-irish-green mb-1">QR Set: {{ qr_set.name }}</h3>
      <p class="text-sm">You are about to link all QR codes in this set to an event.</p>
    </div>
    
    <form action="/qr/admin-link/{{ admin_code }}" method="post" class="space-y-6">
      <!-- Select Existing Event -->
      <div>
        <label for="event_id" class="block text-sm font-medium text-gray-700 mb-2">Select Existing Event</label>
        <select name="event_id" id="event_id" 
                class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-irish-green"
                onchange="toggleNewEventInput()">
          <option value="">-- Select an event --</option>
          {% for event in events %}
            <option value="{{ event.id }}">{{ event.name }} ({{ event.event_date.strftime('%Y-%m-%d') }})</option>
          {% endfor %}
        </select>
      </div>
      
      <!-- OR Divider -->
      <div class="relative">
        <div class="absolute inset-0 flex items-center">
          <div class="w-full border-t border-gray-300"></div>
        </div>
        <div class="relative flex justify-center text-sm">
          <span class="px-2 bg-white text-gray-500">OR</span>
        </div>
      </div>
      
      <!-- Create New Event -->
      <div>
        <label for="new_event_name" class="block text-sm font-medium text-gray-700 mb-2">Create New Event</label>
        <input type="text" name="new_event_name" id="new_event_name" 
               placeholder="e.g., Irish Rover Quiz Night 2025-04-17"
               class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-irish-green">
      </div>
      
      <!-- Submit Button -->
      <button type="submit" 
              class="w-full bg-irish-green hover:bg-opacity-90 text-white font-bold py-3 px-4 rounded-md transition">
        <i class="fas fa-link mr-2"></i> Link QR Codes to Event
      </button>
    </form>
  </div>
  
  <!-- Information Box -->
  <div class="bg-white rounded-lg shadow-md p-6">
    <h2 class="text-lg font-semibold text-irish-green mb-4">What This Does</h2>
    <div class="space-y-4 text-sm">
      <p>
        By linking QR codes to an event, you'll be able to track which achievements and points were earned
        during specific quiz nights or events.
      </p>
      <p>
        This helps with reporting and allows teams to see which events they've participated in and what
        awards they've received at each event.
      </p>
      <p>
        <strong>Note:</strong> This action only affects QR codes that haven't been redeemed yet.
      </p>
    </div>
  </div>
</div>

<script>
  function toggleNewEventInput() {
    const eventSelect = document.getElementById('event_id');
    const newEventInput = document.getElementById('new_event_name');
    
    if (eventSelect.value) {
      newEventInput.disabled = true;
      newEventInput.classList.add('bg-gray-100');
    } else {
      newEventInput.disabled = false;
      newEventInput.classList.remove('bg-gray-100');
    }
  }
  
  // Initialize on page load
  document.addEventListener('DOMContentLoaded', function() {
    toggleNewEventInput();
  });
</script>
{% endblock %}