{% extends 'index.html' %}
{% load static %}
{% load l10n %}
{% load humanize %}


{% block content %}
<style>
  .sortable-table th {
    cursor: pointer;
  }
</style>

<div class="container-fluid py-4">

  <div class="p-4 shadow-sm rounded bg-white dark-toggle-container">
    <h2 class="mb-0 text-center">Transactions</h2>
    <div class="d-flex justify-content-between align-items-center mb-3"></div>

    <!-- Download and Filter Controls -->
    <div class="d-flex flex-wrap justify-content-between align-items-end mb-4">
      <form class="d-flex flex-wrap gap-3" action="{% url 'transactions' %}" method="get">
        <div>
          <label for="year" class="form-label mb-0 fw-semibold">Year</label>
          <select name="year" id="year" class="form-select">
            <option value="">All</option>
            {% for year in years %}
              <option value="{{ year.year }}" {% if selected_year == year.year|stringformat:'s' %}selected{% endif %}>{{ year.year }}</option>
            {% endfor %}
          </select>
        </div>

        <div>
          <label for="type" class="form-label mb-0 fw-semibold">Type</label>
          <select name="type" id="type" class="form-select">
            <option value="">All</option>
            <option value="Income" {% if selected_type == "Income" %}selected{% endif %}>Income</option>
            <option value="Expense" {% if selected_type == "Expense" %}selected{% endif %}>Expense</option>
          </select>
        </div>

        <button type="submit" class="btn btn-primary align-self-end">Filter</button>
      </form>
      <div>
        <a href="{% url 'add_transaction' %}" class="btn btn-outline-primary text-center"><i class="fa-solid fa-plus"></i> Add Transaction</a>
      </div>
      <div class="d-flex gap-2 mt-3 mt-md-0">
        <a href="{% url 'download_transactions' %}" class="btn btn-outline-success"><i class="fa-solid fa-circle-chevron-down"></i> Download All</a>
        <a href="{% url 'download_transactions' %}?year={{ selected_year }}" class="btn btn-outline-info"><i class="fa-solid fa-chevron-down"></i> Download {{ selected_year|default:"Year" }}</a>
      </div>
    </div>

    <!-- Desktop Table View -->
    <div class="table-responsive d-none d-md-block">
      <table id="transactionsTable" class="table table-bordered table-hover text-center align-middle sortable-table shadow-sm rounded">
        <thead class="table-primary text-dark">
          <tr>
            <th class="sortable-header" onclick="sortTable(0)"> Date &nbsp;<i class="sort-icon fa-solid fa-sort"></i></th>
            <th class="sortable-header" onclick="sortTable(1)"> Type &nbsp;<i class="sort-icon fa-solid fa-sort"></i></th>
            <th class="sortable-header" onclick="sortTable(2)"> Transaction &nbsp;<i class="sort-icon fa-solid fa-sort"></i></th>
            <th class="sortable-header" onclick="sortTable(3)"> Location &nbsp;<i class="sort-icon fa-solid fa-sort"></i></th>
            <th class="sortable-header" onclick="sortTable(4)"> Amount &nbsp;<i class="sort-icon fa-solid fa-sort"></i></th>
            <th class="sortable-header" onclick="sortTable(5)"> Inv. # &nbsp;<i class="sort-icon fa-solid fa-sort"></i></th>
            <th scope="col">View</th>
            <th scope="col">Edit</th>
          </tr>
        </thead>
        <tbody>
          {% for x in transactions %}
          <tr>
            <td>{{ x.date }}</td>
            <td>
              <span class="badge {% if x.trans_type.trans_type == 'Income' %}bg-success{% else %}bg-danger{% endif %}">
                {{ x.trans_type }}
              </span>
            </td>
            <td class="text-start ps-2">{{ x.transaction }}</td>
            <td>{{ x.keyword }}</td>
            <td><strong>${{ x.amount|floatformat:2|intcomma }}</strong></td>
            <td>{{ x.invoice_numb }}</td>
            <td>
              <a href="{% url 'transaction_detail' x.id %}">
                <i class="fa-solid fa-eye text-success"></i>
            </a>
               
            </td>
            <td>
              <a href="{% url 'edit_transaction' x.id %}" class="text-decoration-none">
                <i class="fa-solid fa-pencil text-warning"></i>
              </a>
            </td>
          </tr>
          {% empty %}
          <tr>
            <td colspan="8" class="text-muted">No transactions found for this filter.</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

    <!-- Mobile Accordion View -->
    <div class="mobile-accordion d-block d-md-none">
      <div class="accordion" id="accordionTransactions">
        {% for x in transactions %}
          <div class="accordion-item mb-2">
            <h2 class="accordion-header" id="heading{{ x.id }}">
              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ x.id }}">
                {{ x.date }} — {{ x.transaction }}
              </button>
            </h2>
            <div id="collapse{{ x.id }}" class="accordion-collapse collapse" data-bs-parent="#accordionTransactions">
              <div class="accordion-body">
                <strong>Type:</strong> {{ x.trans_type }}<br>
                <strong>Location:</strong> {{ x.keyword }}<br>
                <strong>Amount:</strong> $ {{ x.amount|floatformat:2|intcomma }}<br>
                <strong>Invoice #:</strong> {{ x.invoice_numb }}<br>
                <div class="mt-2">
                  <a href="{% url 'transaction_detail' x.id %}" class="btn btn-sm btn-outline-primary">View</a>

                  
                  <a href="{% url 'edit_transaction' x.id %}" class="btn btn-sm btn-warning">Edit</a>
                </div>
              </div>
            </div>
          </div>
        {% empty %}
          <div class="text-muted text-center">No transactions found for this filter.</div>
        {% endfor %}
      </div>
    </div>

    <!-- Pagination -->
    <div class="d-flex justify-content-center mt-4">
      <nav>
        <ul class="pagination">
          {% if page_obj.has_previous %}
            <li class="page-item"><a class="page-link" href="?page=1{% if selected_year %}&year={{ selected_year }}{% endif %}{% if selected_type %}&type={{ selected_type }}{% endif %}">First</a></li>
            <li class="page-item"><a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if selected_year %}&year={{ selected_year }}{% endif %}{% if selected_type %}&type={{ selected_type }}{% endif %}">Previous</a></li>
          {% endif %}
          <li class="page-item active">
            <span class="page-link">Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}</span>
          </li>
          {% if page_obj.has_next %}
            <li class="page-item"><a class="page-link" href="?page={{ page_obj.next_page_number }}{% if selected_year %}&year={{ selected_year }}{% endif %}{% if selected_type %}&type={{ selected_type }}{% endif %}">Next</a></li>
            <li class="page-item"><a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% if selected_year %}&year={{ selected_year }}{% endif %}{% if selected_type %}&type={{ selected_type }}{% endif %}">Last</a></li>
          {% endif %}
        </ul>
      </nav>
    </div>
  </div>



<script>
  function sortTable(col) {
    const table = document.getElementById("transactionsTable");
    const rows = Array.from(table.rows).slice(1);
    const asc = table.dataset.sortCol != col || table.dataset.sortAsc === "false";

    rows.sort((a, b) => {
      const aText = a.cells[col].innerText.trim();
      const bText = b.cells[col].innerText.trim();
      return asc ? aText.localeCompare(bText, undefined, { numeric: true }) : bText.localeCompare(aText, undefined, { numeric: true });
    });

    rows.forEach(row => table.tBodies[0].appendChild(row));

    table.dataset.sortCol = col;
    table.dataset.sortAsc = asc;

    const icons = document.querySelectorAll(".sortable-header .sort-icon");
    icons.forEach(icon => {
      icon.classList.remove("fa-sort-up", "fa-sort-down", "active");
      icon.classList.add("fa-sort");
    });

    const currentHeader = table.querySelectorAll("th.sortable-header")[col];
    const currentIcon = currentHeader.querySelector(".sort-icon");
    currentIcon.classList.remove("fa-sort");
    currentIcon.classList.add(asc ? "fa-sort-up" : "fa-sort-down", "active");
  }
</script>


{% endblock %}