{% extends 'base.html' %}
{% block title %}New Sale{% endblock %}

{% block content %}
<div class="flex justify-between items-center mb-6">
  <h1 class="text-2xl font-bold">New Sale</h1>
  <a href="{% url 'sales:sale_list' %}" class="btn btn-ghost btn-sm">← Back</a>
</div>

<form method="post">
  {% csrf_token %}

  <!-- Sale Details -->
  <div class="card bg-base-100 shadow mb-4">
    <div class="card-body">
      <h2 class="card-title text-base">Sale Details</h2>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        {% load form_tags %}
        {% for field in form %}
          <div class="form-control">
            <label class="label">
              <span class="label-text">{{ field.label }}</span>
            </label>
            {{ field|daisyui }}
            {% for error in field.errors %}
              <span class="text-error text-sm">{{ error }}</span>
            {% endfor %}
          </div>
        {% endfor %}
      </div>
    </div>
  </div>

  <!-- Sale Items -->
  <div class="card bg-base-100 shadow mb-4">
    <div class="card-body">
      <h2 class="card-title text-base">Sale Items</h2>

      {{ formset.management_form }}

      <div id="formset-container">
        {% for item_form in formset %}
          <div class="grid grid-cols-1 md:grid-cols-4 gap-3 mb-3 p-3 bg-base-200 rounded-box">
            {% for field in item_form %}
              {% if field.name != 'DELETE' and field.name != 'id' %}
                <div class="form-control">
                  <label class="label">
                    <span class="label-text text-xs">{{ field.label }}</span>
                  </label>
                  {{ field|daisyui }}
                  {% for error in field.errors %}
                    <span class="text-error text-xs">{{ error }}</span>
                  {% endfor %}
                </div>
              {% endif %}
            {% endfor %}
            <!-- Delete checkbox -->
            <div class="flex items-end pb-1">
              <label class="label cursor-pointer gap-2">
                {{ item_form.DELETE }}
                <span class="label-text text-xs text-error">Remove</span>
              </label>
            </div>
          </div>
        {% endfor %}
      </div>

    </div>
  </div>

  <!-- Non-field errors -->
  {% if formset.non_form_errors %}
    <div class="alert alert-error mb-4">{{ formset.non_form_errors }}</div>
  {% endif %}

  <div class="flex justify-end gap-3">
    <a href="{% url 'sales:sale_list' %}" class="btn btn-ghost">Cancel</a>
    <button type="submit" class="btn btn-primary">💾 Record Sale</button>
  </div>

</form>
{% endblock %}