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

{% block content %}
<main class="container my-5">
  <h1 class="text-center mb-5">Welcome to Pocket.Trade</h1>
  <!-- Search Form Section -->
  <section id="trade-search" class="mb-5">
    <form method="post" action=".">
      {% csrf_token %}
      <div class="row">
        <div class="col-md-6 mb-3">
          {% card_multiselect "offered_cards" "Have:" available_cards "Select zero or more cards..." offered_cards %}
        </div>
        
        <div class="col-md-6 mb-3">
          {% card_multiselect "wanted_cards" "Want:" available_cards "Select zero or more cards..." wanted_cards %}
        </div>
      </div>
      <button type="submit" class="btn btn-primary w-100">Find a Trade Offer</button>
    </form>
  </section>

  <!-- Search Results Section -->
  <section id="search-results">
    {% include "home/_search_results.html" %}
  </section>

  <!-- Market Stats Section -->
  <section aria-labelledby="stats-heading" class="mb-5">
    <h2 id="stats-heading" class="mb-4">Market Stats</h2>
    <div class="row gx-5">
      <!-- Most Offered Cards (cached for 3600 seconds / 1 hour) -->
      <div class="col-md-6 mb-3">
        <h5 class="mb-3">Most Offered Cards</h5>
        <div class="card h-100 shadow border-0">
          <div class="card-body">
            {% cache 3600 most_offered_cards %}
              {% if most_offered_cards %}
                <div class="d-flex flex-column gap-3">
                  {% for card in most_offered_cards %}
                    {% if card.offer_count > 0 %}
                      <a href="?wanted_cards={{ card.id }}"
                         class="d-flex justify-content-between align-items-center text-decoration-none text-primary">
                        {% card_badge card %}
                        <span>{{ card.offer_count }}</span>
                      </a>
                    {% endif %}
                  {% endfor %}
                </div>
              {% else %}
                <p>No cards found</p>
              {% endif %}
            {% endcache %}
          </div>
        </div>
      </div>

      <!-- Most Wanted Cards (cached for 3600 seconds / 1 hour) -->
      <div class="col-md-6 mb-3">
        <h5 class="mb-3">Most Wanted Cards</h5>
        <div class="card h-100 shadow border-0">
          <div class="card-body">
            {% cache 3600 most_wanted_cards %}
              {% if most_wanted_cards %}
                <div class="d-flex flex-column gap-3">
                  {% for card in most_wanted_cards %}
                    {% if card.offer_count > 0 %}
                      <a href="?offered_cards={{ card.id }}"
                         class="d-flex justify-content-between align-items-center text-decoration-none text-primary">
                        {% card_badge card %}
                        <span>{{ card.offer_count }}</span>
                      </a>
                    {% endif %}
                  {% endfor %}
                </div>
              {% else %}
                <p>No cards found</p>
              {% endif %}
            {% endcache %}
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Featured Offers and Recent Offers Section -->
  <div class="row mb-5">
    <!-- Featured Offers Card (cached for 86400 seconds / 1 day) -->
    <div class="col-md-6 mb-3">
      {% cache 86400 featured_offers %}
      <div class="card h-100 border-0">
        <div class="card-header border-0 bg-transparent">
          <h5 class="card-title mb-0">Featured Offers</h5>
          <ul class="nav nav-tabs card-header-tabs mt-3" id="cardsetTabs" role="tablist">
            <li class="nav-item" role="presentation">
              <button class="nav-link active" id="all-tab" data-bs-toggle="tab" data-bs-target="#all"
                type="button" role="tab" aria-controls="all" aria-selected="true">All</button>
            </li>
            {% for cardset, offers in featured_offers.items %}
              {% if cardset != "All" %}
                <li class="nav-item" role="presentation">
                  <button class="nav-link" id="{{ cardset|slugify }}-tab" data-bs-toggle="tab" data-bs-target="#{{ cardset|slugify }}"
                    type="button" role="tab" aria-controls="{{ cardset|slugify }}" aria-selected="false">
                    {{ cardset }}
                  </button>
                </li>
              {% endif %}
            {% endfor %}
          </ul>
        </div>
        <div class="card-body">
          <div class="tab-content" id="cardsetTabsContent">
            <!-- All Offers Tab Pane -->
            <div class="tab-pane fade show active" id="all" role="tabpanel" aria-labelledby="all-tab">
              {% if featured_offers.All %}
                <div class="d-flex flex-column gap-3">
                  {% for offer in featured_offers.All %}
                    <a href="{% url 'trade_offer_update' offer.pk %}" class="d-flex align-items-center text-decoration-none">
                      {% render_trade_offer offer %}
                    </a>
                  {% endfor %}
                </div>
              {% else %}
                <p>No featured offers available.</p>
              {% endif %}
            </div>
            <!-- Other Cardset Tab Panes -->
            {% for cardset, offers in featured_offers.items %}
              {% if cardset != "All" %}
                <div class="tab-pane fade" id="{{ cardset|slugify }}" role="tabpanel" aria-labelledby="{{ cardset|slugify }}-tab">
                  {% if offers %}
                    <div class="d-flex flex-column gap-3">
                      {% for offer in offers %}
                        <a href="{% url 'trade_offer_update' offer.pk %}" class="d-flex align-items-center text-decoration-none">
                          {% render_trade_offer offer %}
                        </a>
                      {% endfor %}
                    </div>
                  {% else %}
                    <p>No featured offers for {{ cardset }}.</p>
                  {% endif %}
                </div>
              {% endif %}
            {% endfor %}
          </div>
        </div>
      </div>
      {% endcache %}
    </div>
    
    <!-- Recent Offers Card (cached for 60 seconds) -->
    <div class="col-md-6 mb-3">
      {% cache 60 recent_offers %}
      <div class="card h-100 border-0">
        <div class="card-body">
          <h5 class="card-title">Recent Offers</h5>
          <div class="d-flex flex-column gap-3">
            {% for offer in recent_offers %}
              <a href="{% url 'trade_offer_update' offer.pk %}" class="text-decoration-none">
                {% render_trade_offer offer %}
              </a>
            {% empty %}
              <div>No offers available</div>
            {% endfor %}
          </div>
        </div>
      </div>
      {% endcache %}
    </div>
  </div>
</main>
{% endblock content %}

{% block javascript %}
<!-- <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script> -->
<script>
$(document).ready(function () {
  // function formatOption(option) {
  //   if (!option.id) return option.text;
  //   var $option = $(option.element);
  //   var cardName = $option.data('name');
  //   var rarity = $option.data('rarity');
  //   var cardset = $option.data('cardset');
  //   var style = $option.data('style');
  //   return $('<span>').text(cardName + " " + rarity + " " + cardset).attr('style', style);
  // }
  
  // $('.select2-field').select2({
  //     placeholder: function() {
  //         return $(this).data('placeholder');
  //     },
  //     templateResult: formatOption,
  //     templateSelection: formatOption,
  //     width: '100%',
  //     dropdownAutoWidth: true,
  //     allowClear: true
  // });
  
  // AJAX form submission for trade search
  $("#trade-search form").on('submit', function(e) {
    e.preventDefault();
    $.ajax({
         type: $(this).attr("method"),
         url: $(this).attr("action"),
         data: $(this).serialize(),
         headers: { "X-Requested-With": "XMLHttpRequest" },
         success: function(data) {
              $("#search-results").html(data);
         },
         error: function() {
              alert("There was an error processing your search.");
         }
    });
  });

  // AJAX pagination for search results
  $(document).on('click', '.ajax-page-link', function(e){
      e.preventDefault();
      var page = $(this).data('page');
      if($("#page").length) {
          $("#page").val(page);
      } else {
          $("<input>").attr({
              type: "hidden",
              id: "page",
              name: "page",
              value: page
          }).appendTo("#trade-search form");
      }
      $("#trade-search form").submit();
  });
});
</script>
{% endblock %}