{% extends 'common/base.html' %}
{% load static %}
{% block title %}Sales Report{% endblock %}
{% block content %}

<div class="container-fluid" id="container-wrapper">
  <div class="d-sm-flex align-items-center justify-content-between mb-3">
    <h1 class="h3 mb-0 text-gray-800">Sales Report</h1>
  </div>

  <!-- Filter Form -->
  <div class="card shadow mb-4">
    <div class="card-body">
      <form method="GET" id="filterForm" class="row gy-2 gx-3 align-items-end">
        <div class="col-md-3">
          <label for="from_date" class="form-label">From Date</label>
          <input type="date" class="form-control" name="from_date" id="from_date" value="{{ request.GET.from_date }}">
        </div>

        <div class="col-md-3">
          <label for="to_date" class="form-label">To Date</label>
          <input type="date" class="form-control" name="to_date" id="to_date" value="{{ request.GET.to_date }}">
        </div>

        <div class="col-md-3 mb-2">
          <label for="status" class="form-label">Order Status (Optional)</label>
          <select name="status" id="status" class="form-control">
            <option value="">All Status</option>
            <option value="Pending" {% if request.GET.status == 'Pending' %}selected{% endif %}>Pending</option>
            <option value="Processing" {% if request.GET.status == 'Processing' %}selected{% endif %}>Processing</option>
            <option value="Completed" {% if request.GET.status == 'Completed' %}selected{% endif %}>Completed</option>
            <option value="Cancelled" {% if request.GET.status == 'Cancelled' %}selected{% endif %}>Cancelled</option>
          </select>
        </div>

        <div class="col-md-3 d-flex align-items-end">
          <button type="submit" class="btn btn-primary me-2"><i class="bi bi-search"></i> Filter </button> 
          <a href="/reports/sales-reports/" class="btn btn-secondary" style="margin-left:10px"><i class="bi bi-arrow-repeat"></i> Reset</a>
        </div>
      </form>
    </div>
  </div>

  <!-- Export Buttons -->
  <div class="d-flex justify-content-end mb-3">
    <a href="" class="btn btn-success me-2">
      <i class="bi bi-file-earmark-excel"></i> Export Excel
    </a>
    <a href="" class="btn btn-danger"  style="margin-left:10px">
      <i class="bi bi-file-earmark-pdf"></i> Download PDF
    </a>
  </div>

  <!-- Report Table -->
  <div class="card shadow">
    <div class="card-body table-responsive">
      {% if sales %}
      <table class="table table-bordered align-middle">
        <thead class="table-dark">
          <tr>
            <th>#</th>
            <th>Order ID</th>
            <th>Date</th>
            <th>Customer</th>
            <th>Status</th>
            <th class="text-end">Total</th>
          </tr>
        </thead>
        <tbody>
          {% for sale in sales %}
          <tr>
            <td>{{ forloop.counter }}</td>
            <td>{{ sale.order_id }}</td>
            <td>{{ sale.date|date:"d M, Y" }}</td>
            <td>{{ sale.customer_name }}</td>
            <td>
              <span class="badge 
                {% if sale.status == 'Completed' %}bg-success
                {% elif sale.status == 'Processing' %}bg-info
                {% elif sale.status == 'Pending' %}bg-warning
                {% else %}bg-danger{% endif %}">
                {{ sale.status }}
              </span>
            </td>
            <td class="text-end">{{ sale.total_amount|floatformat:2 }}</td>
          </tr>
          {% endfor %}
        </tbody>
        <tfoot>
          <tr class="fw-bold">
            <td colspan="5" class="text-end">Total:</td>
            <td class="text-end">{{ grand_total|floatformat:2 }}</td>
          </tr>
        </tfoot>
      </table>
      {% else %}
      <p class="text-center text-muted py-3">No sales found for the selected filters.</p>
      {% endif %}
    </div>
  </div>
</div>

{% endblock %}