{% extends 'base.html' %}
{% block title %}Sales{% endblock %}

{% block content %}
<div class="flex justify-between items-center mb-6">
  <h1 class="text-2xl font-bold">Sales</h1>
  <a href="{% url 'sales:sale_create' %}" class="btn btn-primary btn-sm">➕ New Sale</a>
</div>
<div class="flex gap-2">
  <a href="{% url 'sales:export_sales' %}{% if request.GET %}?{{ request.GET.urlencode }}{% endif %}"
     class="btn btn-outline btn-sm">
    ⬇ Export CSV
  </a>
  <a href="{% url 'sales:sale_create' %}" class="btn btn-primary btn-sm">➕ New Sale</a>
</div>
<!-- Search & Filter -->
<form method="get" class="flex flex-wrap gap-2 items-end mb-4">
  <div class="form-control">
    <input type="text" name="q" value="{{ query }}"
           placeholder="Search reference or customer..."
           class="input input-bordered input-sm w-64"/>
  </div>
  <div class="form-control">
    <select name="status" class="select select-bordered select-sm">
      <option value="">All Status</option>
      <option value="completed" {% if current_status == 'completed' %}selected{% endif %}>Completed</option>
      <option value="cancelled" {% if current_status == 'cancelled' %}selected{% endif %}>Cancelled</option>
    </select>
  </div>
  <div class="form-control">
    <input type="date" name="start" value="{{ request.GET.start }}" class="input input-bordered input-sm"/>
  </div>
  <div class="form-control">
    <input type="date" name="end" value="{{ request.GET.end }}" class="input input-bordered input-sm"/>
  </div>
  <button class="btn btn-primary btn-sm">🔍 Search</button>
  <a href="{% url 'sales:sale_list' %}" class="btn btn-ghost btn-sm">Reset</a>
</form>
<div class="card bg-base-100 shadow">
  <div class="card-body p-0">
    <table class="table table-zebra">
      <thead>
        <tr>
          <th>Reference</th>
          <th>Customer</th>
          <th>Items</th>
          <th>Total</th>
          <th>Payment</th>
          <th>Status</th>
          <th>Date</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for sale in sales %}
        <tr>
          <td class="font-mono font-bold">{{ sale.reference }}</td>
          <td>{{ sale.customer_display }}</td>
          <td>{{ sale.items.count }}</td>
          <td>{{ business.currency }} {{ sale.total|floatformat:0 }}</td>
          <td>
            <span class="badge badge-ghost badge-sm">{{ sale.get_payment_method_display }}</span>
          </td>
          <td>
            {% if sale.status == 'completed' %}
              <span class="badge badge-success badge-sm">Completed</span>
            {% else %}
              <span class="badge badge-error badge-sm">Cancelled</span>
            {% endif %}
          </td>
          <td>{{ sale.date|date:"d M Y" }}</td>
          <td class="flex gap-1">
            <a href="{% url 'sales:sale_detail' sale.pk %}" class="btn btn-ghost btn-xs">View</a>
            {% if sale.status == 'cancelled' and request.user.is_owner %}
              <a href="{% url 'sales:sale_delete' sale.pk %}"
                 class="btn btn-error btn-xs"
                 onclick="return confirm('Permanently delete {{ sale.reference }}?')">
                Delete
              </a>
            {% endif %}
          </td>
        </tr>
        {% empty %}
        <tr>
          <td colspan="8" class="text-center text-base-content/40 py-10">
            No sales recorded yet. <a href="{% url 'sales:sale_create' %}" class="link link-primary">Record first sale</a>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% include 'partials/pagination.html' with page_obj=sales %}
{% endblock %}