{% extends 'base.html' %}
{% load static trade_offer_tags card_badge cache card_multiselect %}

{% block content %}
  <h1 class="text-center text-4xl font-bold mb-8 pt-4">Trade Offer Search</h1>
  
  <!-- Search Form Section -->
  <section id="trade-search" class="mb-8">
    <form method="post" action="{% url 'trade_offer_search' %}" class="space-y-4">
      {% csrf_token %}
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
          {% card_multiselect "offered_cards" "Have:" "Select zero or more cards..." cards offered_cards %}
        </div>
        <div>
          {% card_multiselect "wanted_cards" "Want:" "Select zero or more cards..." cards wanted_cards %}
        </div>
      </div>
      <div class="flex flex-col md:flex-row gap-4">
        <button type="submit" class="btn btn-primary flex-1">Find a Trade Offer</button>
      </div>
    </form>
  </section>
  
  <!-- Search Results Section -->
  <section id="search-results" class="mb-8">
    {% include "trades/_search_results.html" %}
  </section>
{% endblock content %}

{% block javascript %}
<script defer>
document.addEventListener('DOMContentLoaded', function() {
  const tradeSearchForm = document.querySelector('#trade-search form');
  if (tradeSearchForm) {
    tradeSearchForm.addEventListener('submit', function(e) {
      e.preventDefault();
      const formData = new FormData(tradeSearchForm);
      document.querySelector("#search-results").innerHTML = "<div class='text-center text-2xl font-bold'>Searching...</div>";
      fetch(tradeSearchForm.action, {
        method: "POST",
        headers: {
          "X-Requested-With": "XMLHttpRequest",
          "X-CSRFToken": document.querySelector('[name=csrfmiddlewaretoken]').value
        },
        body: formData
      })
      .then(response => {
        if (!response.ok) {
          throw new Error("Network response was not ok");
        }
        return response.text();
      })
      .then(data => {
        document.querySelector("#search-results").innerHTML = data;
      })
      .catch(error => {
        alert("There was an error processing your search.");
        console.error("Error:", error);
      });
    });
    
    // AJAX pagination click handling
    document.addEventListener('click', function(e) {
      const target = e.target.closest('.ajax-page-link');
      if (target) {
        e.preventDefault();
        const page = target.getAttribute('data-page');
        let pageInput = document.getElementById('page');
        if (pageInput) {
          pageInput.value = page;
        } else {
          pageInput = document.createElement('input');
          pageInput.type = 'hidden';
          pageInput.id = 'page';
          pageInput.name = 'page';
          pageInput.value = page;
          tradeSearchForm.appendChild(pageInput);
        }
        tradeSearchForm.dispatchEvent(new Event('submit'));
      }
    });
  }
});
</script>
{% endblock %}