{% extends 'base.html' %}
{% block title %}{{ sale.reference }}{% endblock %}

{% block content %}
<div class="flex justify-between items-center mb-6">
  <h1 class="text-2xl font-bold">{{ sale.reference }}</h1>
  <div class="flex gap-2">
    <a href="{% url 'sales:sale_list' %}" class="btn btn-ghost btn-sm">← Back</a>
    {% if sale.status == 'completed' and request.user.is_owner or request.user.is_manager %}
      <a href="{% url 'sales:sale_cancel' sale.pk %}"
         class="btn btn-error btn-sm"
         onclick="return confirm('Cancel this sale? Stock will be reversed.')">
        ✕ Cancel Sale
      </a>
    {% endif %}
  </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-4">

  <!-- Sale Info -->
  <div class="card bg-base-100 shadow lg:col-span-2">
    <div class="card-body">
      <h2 class="card-title text-base">Sale Information</h2>
      <div class="grid grid-cols-2 gap-3 text-sm">
        <div>
          <div class="text-base-content/50">Customer</div>
          <div class="font-medium">{{ sale.customer_display }}</div>
        </div>
        <div>
          <div class="text-base-content/50">Date</div>
          <div class="font-medium">{{ sale.date|date:"d M Y" }}</div>
        </div>
        <div>
          <div class="text-base-content/50">Payment Method</div>
          <div class="font-medium">{{ sale.get_payment_method_display }}</div>
        </div>
        <div>
          <div class="text-base-content/50">Account</div>
          <div class="font-medium">{{ sale.account.name|default:"—" }}</div>
        </div>
        <div>
          <div class="text-base-content/50">Status</div>
          <div>
            {% if sale.status == 'completed' %}
              <span class="badge badge-success">Completed</span>
            {% else %}
              <span class="badge badge-error">Cancelled</span>
            {% endif %}
          </div>
        </div>
        <div>
          <div class="text-base-content/50">Recorded by</div>
          <div class="font-medium">{{ sale.created_by.username|default:"—" }}</div>
        </div>
      </div>
      {% if sale.note %}
        <div class="mt-3 text-sm text-base-content/60">📝 {{ sale.note }}</div>
      {% endif %}
    </div>
  </div>

  <!-- Financial Summary -->
  <div class="card bg-base-100 shadow">
    <div class="card-body">
      <h2 class="card-title text-base">Summary</h2>
      <div class="space-y-2 text-sm">
        <div class="flex justify-between">
          <span class="text-base-content/50">Subtotal</span>
          <span>{{ business.currency }} {{ sale.subtotal|floatformat:0 }}</span>
        </div>
        {% if sale.discount %}
        <div class="flex justify-between text-warning">
          <span>Discount</span>
          <span>- {{ business.currency }} {{ sale.discount|floatformat:0 }}</span>
        </div>
        {% endif %}
        <div class="divider my-1"></div>
        <div class="flex justify-between font-bold text-base">
          <span>Total</span>
          <span>{{ business.currency }} {{ sale.total|floatformat:0 }}</span>
        </div>
        {% if request.user.is_owner or request.user.is_manager %}
        <div class="divider my-1"></div>
        <div class="flex justify-between text-base-content/50">
          <span>COGS</span>
          <span>{{ business.currency }} {{ sale.total_cost|floatformat:0 }}</span>
        </div>
        <div class="flex justify-between text-success font-medium">
          <span>Gross Profit</span>
          <span>{{ business.currency }} {{ sale.gross_profit|floatformat:0 }}</span>
        </div>
        {% endif %}
      </div>
    </div>
  </div>

</div>

<!-- Sale Items Table -->
<div class="card bg-base-100 shadow">
  <div class="card-body">
    <h2 class="card-title text-base">Items</h2>
    <table class="table table-sm">
      <thead>
        <tr>
          <th>Product</th>
          <th>Qty</th>
          <th>Unit Price</th>
          <th>Total</th>
          {% if request.user.is_owner or request.user.is_manager %}
          <th>Cost</th>
          <th>Profit</th>
          {% endif %}
        </tr>
      </thead>
      <tbody>
        {% for item in sale.items.all %}
        <tr>
          <td>{{ item.product.name }}</td>
          <td>{{ item.quantity }} {{ item.product.unit }}</td>
          <td>{{ business.currency }} {{ item.unit_price|floatformat:0 }}</td>
          <td>{{ business.currency }} {{ item.line_total|floatformat:0 }}</td>
          {% if request.user.is_owner or request.user.is_manager %}
          <td class="text-base-content/50">{{ business.currency }} {{ item.line_cost|floatformat:0 }}</td>
          <td class="text-success">{{ business.currency }} {{ item.line_profit|floatformat:0 }}</td>
          {% endif %}
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
<div class="flex gap-2">
  <a href="{% url 'sales:sale_list' %}" class="btn btn-ghost btn-sm">← Back</a>

  {% if sale.status == 'completed' %}
    {% if request.user.is_owner or request.user.is_manager %}
      <a href="{% url 'sales:sale_cancel' sale.pk %}"
         class="btn btn-error btn-outline btn-sm"
         onclick="return confirm('Cancel this sale? Stock will be reversed.')">
        ✕ Cancel Sale
      </a>
    {% endif %}
  {% endif %}

  {% if sale.status == 'cancelled' and request.user.is_owner %}
    <a href="{% url 'sales:sale_delete' sale.pk %}"
       class="btn btn-error btn-sm"
       onclick="return confirm('Permanently delete this sale? This cannot be undone.')">
      🗑 Delete
    </a>
  {% endif %}
</div>
{% endblock %}