{% extends 'base.html' %} {% load static %} {% block content %}

<!-- Hero Section -->
<div class="hero">
  <h1 class="display-4 fw-bold">📚 Welcome to Book-to-Book</h1>
  <p class="lead">Discover, Explore, and Shop Your Favorite Books!</p>
  <a href="#books" class="btn btn-lg btn-primary">Browse Books</a>
</div>

<!-- Featured Book -->
{% if featured_book %}
<div class="container my-5">
  <div class="card featured-book shadow-lg">
    <div class="row g-0">
      <div class="col-md-4 d-flex align-items-center">
        {% if featured_book.image %}
        <img
          src="{{ featured_book.image.url }}"
          alt="{{ featured_book.title }}"
          class="img-fluid rounded"
        />
        {% else %}
        <p class="text-muted text-center">No image available</p>
        {% endif %}
      </div>
      <div class="col-md-8 p-4 d-flex flex-column justify-content-center">
        <h3 class="fw-bold">{{ featured_book.title }}</h3>
        <p><strong>By:</strong> {{ featured_book.author }}</p>
        <p><strong>Price:</strong>Ksh. {{ featured_book.price }}</p>
        <a
          href="{% url 'bookstore:book_detail' featured_book.id %}"
          class="btn btn-outline-primary btn-lg mt-3"
        >
          Learn More
        </a>
      </div>
    </div>
  </div>
</div>
{% endif %}

<!-- Search Bar -->
<div class="search-bar text-center my-4">
  <input
    type="text"
    id="searchInput"
    class="form-control w-50 mx-auto shadow-sm"
    placeholder="🔍 Search for books..."
  />
</div>
<div class="container">
  <!-- Book Sections -->
  <div class="container">
    {% for category, books in categorized_books.items %}
    <div class="category-section mt-5">
      <h2 class="text-center fw-bold">{{ category }}</h2>
      <div class="row">
        {% for book in books %}
        <div class="col-md-3 mb-4">
          <div class="card book-card shadow-sm h-100">
            <img
              src="{{ book.image.url }}"
              alt="{{ book.title }}"
              class="card-img-top book-image"
            />
            <div class="card-body">
              <h5 class="card-title fw-bold">{{ book.title }}</h5>
              <p class="text-muted"><strong>By:</strong> {{ book.author }}</p>
              <p><strong>Price:</strong>Ksh. {{ book.price }}</p>
              {% if book.quantity > 0 %}
              <form
                method="POST"
                action="{% url 'bookstore:add_to_cart' book.id %}"
              >
                {% csrf_token %}
                <button type="submit" class="btn btn-primary">
                  🛒 Add to Cart
                </button>
              </form>
              {% else %}
              <button class="btn btn-secondary" disabled>Out of Stock</button>
              {% endif %}
              <hr />
              <a
                href="{% url 'bookstore:book_detail' book.id %}"
                class="btn btn-outline-primary w-100"
                >View</a
              >
            </div>
          </div>
        </div>
        {% endfor %}
      </div>

      <!-- "View More" Button -->
      <div class="text-center mt-3 view-more-btn">
        <a
          href="{% url 'bookstore:category_books' category %}"
          class="btn btn-primary btn-lg"
        >
          View More
        </a>
      </div>
    </div>
    {% endfor %}
  </div>
</div>

<script>
  document.getElementById("searchInput").addEventListener("keyup", function () {
    let filter = this.value.toLowerCase();
    let categorySections = document.querySelectorAll(".category-section");

    categorySections.forEach(function (section) {
      let books = section.querySelectorAll(".book-card");
      let categoryTitle = section.querySelector("h2");
      let viewMoreButton = section.querySelector(".view-more-btn"); // Ensure it has this class

      let hasVisibleBooks = false;

      books.forEach(function (book) {
        let title = book.querySelector(".card-title").textContent.toLowerCase();
        if (title.includes(filter)) {
          book.style.display = "block";
          hasVisibleBooks = true;
        } else {
          book.style.display = "none";
        }
      });

      // Hide category & "View More" if no books are visible
      if (hasVisibleBooks) {
        section.style.display = "block";
        categoryTitle.style.display = "block";
        viewMoreButton.style.display = "block";
      } else {
        section.style.display = "none";
      }
    });
  });
</script>

{% endblock %}