{% extends 'admin_pages/base_admin.html' %}

{% block title %}Sales Details Report{% endblock %}

{% block content %}
  <div class="d-flex align-items-center justify-content-between mb-3">
    <h2 class="h4 mb-0">Sales Details Report</h2>
  </div>

  <div class="card mb-3">
    <div class="card-body">
      <form method="get" class="row g-3 align-items-end">
        <div class="col-md-4">
          <label for="start_date" class="form-label">Start Date</label>
          <input type="date" id="start_date" name="start_date" class="form-control" value="{{ start_date|date:'Y-m-d' }}">
        </div>
        <div class="col-md-4">
          <label for="end_date" class="form-label">End Date</label>
          <input type="date" id="end_date" name="end_date" class="form-control" value="{{ end_date|date:'Y-m-d' }}">
        </div>
        <div class="col-md-4">
          <button type="submit" class="btn btn-primary w-100">Filter</button>
        </div>
      </form>
      <div class="mt-3 d-flex flex-wrap gap-2">
        <a class="btn btn-outline-secondary" href="{% url 'sales_details_report' %}?preset=today">Today's Sales</a>
        <a class="btn btn-outline-secondary" href="{% url 'sales_details_report' %}?preset=this_week">This Week</a>
        <a class="btn btn-outline-secondary" href="{% url 'sales_details_report' %}?preset=this_month">This Month</a>
        <a class="btn btn-outline-secondary" href="{% url 'sales_details_report' %}">Clear</a>
      </div>
    </div>
  </div>

  <div class="mb-3 d-flex flex-wrap gap-2">
    <a class="btn btn-success" href="?{% if start_date %}start_date={{ start_date|date:'Y-m-d' }}&{% endif %}{% if end_date %}end_date={{ end_date|date:'Y-m-d' }}&{% endif %}{% if preset %}preset={{ preset }}&{% endif %}format=excel">Download Excel</a>
    <a class="btn btn-danger" href="?{% if start_date %}start_date={{ start_date|date:'Y-m-d' }}&{% endif %}{% if end_date %}end_date={{ end_date|date:'Y-m-d' }}&{% endif %}{% if preset %}preset={{ preset }}&{% endif %}format=pdf">Download PDF</a>
    <a class="btn btn-info" href="?{% if start_date %}start_date={{ start_date|date:'Y-m-d' }}&{% endif %}{% if end_date %}end_date={{ end_date|date:'Y-m-d' }}&{% endif %}{% if preset %}preset={{ preset }}&{% endif %}format=csv">Download CSV</a>
  </div>

  <div class="card">
    <div class="card-body table-responsive">
      <table class="table table-bordered table-striped align-middle">
        <thead class="table-light">
          <tr>
            <th>No</th>
            <th>Date</th>
            <th>Description</th>
            <th>Weight</th>
            <th>From/Sender Details</th>
            <th>Destination</th>
            <th>To/Receiver Details</th>
            <th>Receiver Address</th>
            <th>Tracking Number</th>
            <th>Remarks</th>
            <th>Item Value</th>
            <th>Pcs</th>
          </tr>
        </thead>
        <tbody>
          {% for row in rows %}
            <tr>
              <td>{{ row.no }}</td>
              <td>{{ row.date }}</td>
              <td>{{ row.item }}</td>
              <td>{{ row.qty }}</td>
              <td>{{ row.sender_details }}</td>
              <td>{{ row.destination }}</td>
              <td>{{ row.receiver_details }}</td>
            <td>{{ row.receiver_address }}</td>
              <td>{{ row.tracking_number }}</td>
              <td>{{ row.remarks }}</td>
              <td>{{ row.item_value }}</td>
              <td>{{ row.pcs }}</td>
            </tr>
          {% empty %}
            <tr>
              <td colspan="12" class="text-center">No sales found for the selected period.</td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  {% if page_obj.has_other_pages %}
    <nav class="mt-3">
      <ul class="pagination justify-content-center">
        {% if page_obj.has_previous %}
          <li class="page-item">
            <a class="page-link" href="?{% if start_date %}start_date={{ start_date|date:'Y-m-d' }}&{% endif %}{% if end_date %}end_date={{ end_date|date:'Y-m-d' }}&{% endif %}{% if preset %}preset={{ preset }}&{% endif %}page={{ page_obj.previous_page_number }}">Previous</a>
          </li>
        {% endif %}

        {% for num in page_obj.paginator.page_range %}
          {% if num <= 2 or num > page_obj.paginator.num_pages|add:'-2' or num >= page_obj.number|add:'-1' and num <= page_obj.number|add:'1' %}
            <li class="page-item {% if page_obj.number == num %}active{% endif %}">
              <a class="page-link" href="?{% if start_date %}start_date={{ start_date|date:'Y-m-d' }}&{% endif %}{% if end_date %}end_date={{ end_date|date:'Y-m-d' }}&{% endif %}{% if preset %}preset={{ preset }}&{% endif %}page={{ num }}">{{ num }}</a>
            </li>
          {% elif num == page_obj.number|add:'-2' or num == page_obj.number|add:'2' %}
            <li class="page-item disabled"><span class="page-link">…</span></li>
          {% endif %}
        {% endfor %}

        {% if page_obj.has_next %}
          <li class="page-item">
            <a class="page-link" href="?{% if start_date %}start_date={{ start_date|date:'Y-m-d' }}&{% endif %}{% if end_date %}end_date={{ end_date|date:'Y-m-d' }}&{% endif %}{% if preset %}preset={{ preset }}&{% endif %}page={{ page_obj.next_page_number }}">Next</a>
          </li>
        {% endif %}
      </ul>
    </nav>
  {% endif %}
{% endblock %}