{% extends "base.html" %}
{% block content %}
<div class="max-w-6xl mx-auto p-4">
  <div class="mb-8">
    <h1 class="text-3xl font-bold text-irish-green mb-2">QR Code Management</h1>
    <p class="text-gray-600">Create and manage QR code sets for your pub quiz events</p>
  </div>

  <form method="get" action="/qr/" class="mb-6 flex flex-col sm:flex-row sm:items-end gap-3">
    <div>
      <label for="league_filter" class="block text-sm font-medium text-gray-700">League</label>
      <select id="league_filter" name="league_id" onchange="this.form.submit()"
        class="mt-1 border border-gray-300 rounded-md px-3 py-2 bg-white focus:outline-none focus:ring-2 focus:ring-irish-green">
        {% for league in leagues %}
          <option value="{{ league.id }}" {% if selected_league and selected_league.id == league.id %}selected{% endif %}>
            {{ league.name }}
          </option>
        {% endfor %}
      </select>
    </div>
  </form>

  <div class="grid md:grid-cols-3 gap-8">
    <!-- QR Set Creation -->
    <div class="bg-white rounded-lg shadow-md p-6">
      <h2 class="text-xl font-bold text-irish-green mb-4">Create QR Set</h2>
      <p class="text-sm text-gray-500 mb-4">
        Create a new set of QR codes for your pub quiz event with points and achievements.
      </p>

      <form id="qrSetForm" action="/qr/sets" method="post" class="space-y-4">
        <input type="hidden" name="league_id" value="{{ selected_league.id }}">
        <div>
          <label for="name" class="block text-sm font-medium text-gray-700">Set Name</label>
          <input type="text" name="name" id="name" required
            class="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-irish-green"
            placeholder="e.g., Irish Rover Quiz Night">
        </div>

        <div>
          <label for="description" class="block text-sm font-medium text-gray-700">Description (Optional)</label>
          <textarea name="description" id="description"
            class="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-irish-green"
            placeholder="Weekly quiz with 1st, 2nd, and 3rd place prizes" rows="3"></textarea>
        </div>

        <button type="submit"
          class="w-full bg-irish-green hover:bg-opacity-90 text-white font-bold py-2 px-4 rounded transition">
          Create QR Set
        </button>
      </form>
    </div>

    <!-- QR Set Examples -->
    <div class="bg-white rounded-lg shadow-md p-6">
      <h2 class="text-xl font-bold text-irish-green mb-4">Common Templates</h2>
      <p class="text-sm text-gray-500 mb-4">
        Quickly create QR code sets using these pre-defined templates
      </p>

      <div class="space-y-3">
        <div class="border rounded-md p-3 hover:bg-gray-50 cursor-pointer" 
             onclick="useTemplate('Standard Pub Quiz', 
             'Contains QR codes for 1st place (25 points), 2nd place (15 points), 3rd place (10 points), and 4th place (5 points)')">
          <h3 class="font-medium">Standard Pub Quiz</h3>
          <p class="text-xs text-gray-500">1st, 2nd, 3rd and 4th place</p>
        </div>

        <div class="border rounded-md p-3 hover:bg-gray-50 cursor-pointer"
             onclick="useTemplate('Trivia Night',
             'Special trivia night with QR codes for winners and achievement codes for trivia categories')">
          <h3 class="font-medium">Trivia Night</h3>
          <p class="text-xs text-gray-500">With category achievements</p>
        </div>

        <div class="border rounded-md p-3 hover:bg-gray-50 cursor-pointer"
             onclick="useTemplate('Weekly League',
             'Complete set for tracking weekly league progress with placements and special achievements')">
          <h3 class="font-medium">Weekly League</h3>
          <p class="text-xs text-gray-500">For ongoing competitions</p>
        </div>
      </div>

      <div class="mt-4">
        <p class="text-xs text-gray-500">
          Click a template to pre-fill the form. You can customize it before creating.
        </p>
      </div>
    </div>

    <!-- Quick Actions -->
    <div class="bg-white rounded-lg shadow-md p-6">
      <h2 class="text-xl font-bold text-irish-green mb-4">Quick Actions</h2>
      <p class="text-sm text-gray-500 mb-4">
        Generate individual QR codes or access your created sets
      </p>

      <div class="space-y-3">
        <a href="#"
          class="block border border-dashed border-gray-300 rounded-md p-4 hover:bg-gray-50 text-center"
          id="quickQrBtn">
          <i class="fas fa-qrcode text-irish-green text-2xl mb-2"></i>
          <p class="font-medium">Generate Quick QR</p>
          <p class="text-xs text-gray-500">Create a single QR code</p>
        </a>
      </div>

      <!-- Quick QR Modal (hidden by default) -->
      <div id="quickQrModal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center">
        <div class="bg-white rounded-lg p-6 max-w-md w-full">
          <div class="flex justify-between items-center mb-4">
            <h3 class="text-lg font-bold">Generate Quick QR Code</h3>
            <button id="closeModal" class="text-gray-500 hover:text-gray-700">
              <i class="fas fa-times"></i>
            </button>
          </div>
          
          <form id="quickQrForm" class="space-y-4">
            <div>
              <label for="qr-points" class="block text-sm font-medium text-gray-700">Points</label>
              <input type="number" id="qr-points" name="points" min="0" value="10"
                class="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2">
            </div>
            
            <div class="flex justify-end">
              <button type="submit" class="bg-irish-green text-white px-4 py-2 rounded-md">
                Generate
              </button>
            </div>
          </form>
          
          <div id="qr-result" class="hidden mt-4 text-center">
            <div id="qr-image" class="mx-auto mb-2"></div>
            <p class="text-sm">Right-click to save the QR code</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Existing QR Sets -->
  <div class="mt-10">
    <h2 class="text-2xl font-bold text-irish-green mb-4">Your QR Sets</h2>
    
    {% if qr_sets %}
      <div class="grid md:grid-cols-3 gap-6">
        {% for qr_set in qr_sets %}
          <div class="bg-white rounded-lg shadow hover:shadow-lg transition-shadow overflow-hidden">
            <div class="border-b px-6 py-4">
              <h3 class="font-bold">{{ qr_set.name }}</h3>
              {% if qr_set.description %}
                <p class="text-sm text-gray-600 mt-1">{{ qr_set.description }}</p>
              {% endif %}
            </div>
            <div class="px-6 py-4">
              <div class="text-sm text-gray-500">
                <p>Created: {{ qr_set.created_at.strftime('%Y-%m-%d') }}</p>
              <p>League: {{ qr_set.league.name if qr_set.league else "Default League" }}</p>
              <p>QR Codes: {% if qr_set.qr_codes %}{{ qr_set.qr_codes | length }}{% else %}0{% endif %}</p>
              </div>
              <div class="mt-4 flex justify-between">
                <a href="/qr/sets/{{ qr_set.id }}" class="text-irish-green hover:underline">
                  <i class="fas fa-eye mr-1"></i> View
                </a>
                <a href="/qr/sets/{{ qr_set.id }}/pdf" class="text-irish-green hover:underline">
                  <i class="fas fa-file-pdf mr-1"></i> Generate PDF
                </a>
              </div>
            </div>
          </div>
        {% endfor %}
      </div>
    {% else %}
      <div class="bg-gray-50 border border-gray-200 rounded-md p-6 text-center">
        <i class="fas fa-info-circle text-gray-400 text-3xl mb-3"></i>
        <p class="text-gray-600">You haven't created any QR sets yet. Create your first set using the form above.</p>
      </div>
    {% endif %}
  </div>
</div>

<script>
  // Template selection
  function useTemplate(name, description) {
    document.getElementById('name').value = name;
    document.getElementById('description').value = description;
  }

  // Quick QR Modal
  document.addEventListener('DOMContentLoaded', function() {
    const quickQrBtn = document.getElementById('quickQrBtn');
    const quickQrModal = document.getElementById('quickQrModal');
    const closeModal = document.getElementById('closeModal');
    const quickQrForm = document.getElementById('quickQrForm');
    const qrResult = document.getElementById('qr-result');
    const qrImage = document.getElementById('qr-image');

    quickQrBtn.addEventListener('click', function(e) {
      e.preventDefault();
      quickQrModal.classList.remove('hidden');
    });

    closeModal.addEventListener('click', function() {
      quickQrModal.classList.add('hidden');
      qrResult.classList.add('hidden');
    });

    // Close modal when clicking outside
    quickQrModal.addEventListener('click', function(e) {
      if (e.target === quickQrModal) {
        quickQrModal.classList.add('hidden');
      }
    });

    quickQrForm.addEventListener('submit', function(e) {
      e.preventDefault();
      const points = document.getElementById('qr-points').value;
      const leagueId = '{{ selected_league.id }}';
      
      // Generate QR code
      qrImage.innerHTML = '<img src="/qr/generate/' + points + '?league_id=' + leagueId + '" alt="QR Code" class="mx-auto" />';
      qrResult.classList.remove('hidden');
    });
  });
</script>
{% endblock %}