{% extends 'base.html' %}
{% load form_tags %}
{% block title %}New Purchase Order{% endblock %}

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

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

  <!-- Order Details -->
  <div class="card bg-base-100 shadow mb-4">
    <div class="card-body">
      <h2 class="card-title text-base">Order Details</h2>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        {% for field in form %}
          <div class="form-control {% if field.name == 'note' %}md:col-span-2{% endif %}">
            <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>

  <!-- Order Items -->
  <div class="card bg-base-100 shadow mb-4">
    <div class="card-body">
      <h2 class="card-title text-base">Items</h2>
      {{ formset.management_form }}
      {% for item_form in formset %}
        <div class="grid grid-cols-1 md:grid-cols-3 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 %}
          <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 class="flex justify-end gap-3">
    <a href="{% url 'inventory:po_list' %}" class="btn btn-ghost">Cancel</a>
    <button type="submit" class="btn btn-primary">💾 Create Order</button>
  </div>
</form>
{% endblock %}