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

{% block content %}
<div class="flex justify-between items-center mb-6">
  <h1 class="text-2xl font-bold">{{ invoice.reference }}</h1>
  <div class="flex gap-2">
    <a href="{% url 'sales:invoice_list' %}" class="btn btn-ghost btn-sm">← Back</a>
    {% if invoice.status != 'cancelled' and invoice.status != 'paid' %}
      {% if request.user.is_owner or request.user.is_manager %}
        <a href="{% url 'sales:invoice_cancel' invoice.pk %}"
           class="btn btn-error btn-outline btn-sm"
           onclick="return confirm('Cancel this invoice?')">
          ✕ Cancel
        </a>
      {% endif %}
    {% endif %}
  </div>
</div>

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

  <!-- Customer Info -->
  <div class="card bg-base-100 shadow lg:col-span-2">
    <div class="card-body">
      <h2 class="card-title text-base">Customer</h2>
      <div class="grid grid-cols-2 gap-3 text-sm">
        <div>
          <div class="text-base-content/50">Name</div>
          <div class="font-medium">{{ invoice.customer_display }}</div>
        </div>
        {% if invoice.customer_phone %}
        <div>
          <div class="text-base-content/50">Phone</div>
          <div class="font-medium">{{ invoice.customer_phone }}</div>
        </div>
        {% endif %}
        {% if invoice.customer_email %}
        <div>
          <div class="text-base-content/50">Email</div>
          <div class="font-medium">{{ invoice.customer_email }}</div>
        </div>
        {% endif %}
        <div>
          <div class="text-base-content/50">Issue Date</div>
          <div class="font-medium">{{ invoice.issue_date|date:"d M Y" }}</div>
        </div>
        <div>
          <div class="text-base-content/50">Due Date</div>
          <div class="font-medium {% if invoice.is_overdue %}text-error{% endif %}">
            {{ invoice.due_date|date:"d M Y"|default:"—" }}
            {% if invoice.is_overdue %}<span class="badge badge-error badge-xs ml-1">Overdue</span>{% endif %}
          </div>
        </div>
        <div>
          <div class="text-base-content/50">Status</div>
          <span class="badge
            {% if invoice.status == 'paid' %}badge-success
            {% elif invoice.status == 'partial' %}badge-warning
            {% elif invoice.status == 'unpaid' %}badge-error
            {% else %}badge-ghost{% endif %}">
            {{ invoice.get_status_display }}
          </span>
        </div>
      </div>
      {% if invoice.note %}
        <div class="mt-3 text-sm text-base-content/60">📝 {{ invoice.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 }} {{ invoice.subtotal|floatformat:0 }}</span>
        </div>
        {% if invoice.discount %}
        <div class="flex justify-between text-warning">
          <span>Discount</span>
          <span>- {{ business.currency }} {{ invoice.discount|floatformat:0 }}</span>
        </div>
        {% endif %}
        <div class="divider my-1"></div>
        <div class="flex justify-between font-bold">
          <span>Total</span>
          <span>{{ business.currency }} {{ invoice.total|floatformat:0 }}</span>
        </div>
        <div class="flex justify-between text-success">
          <span>Paid</span>
          <span>{{ business.currency }} {{ invoice.total_paid|floatformat:0 }}</span>
        </div>
        <div class="flex justify-between font-bold text-lg
          {% if invoice.balance_due > 0 %}text-error{% else %}text-success{% endif %}">
          <span>Balance Due</span>
          <span>{{ business.currency }} {{ invoice.balance_due|floatformat:0 }}</span>
        </div>
      </div>
    </div>
  </div>

</div>

<!-- Invoice Items -->
<div class="card bg-base-100 shadow mb-4">
  <div class="card-body">
    <h2 class="card-title text-base">Items</h2>
    <table class="table table-sm">
      <thead>
        <tr><th>Description</th><th>Qty</th><th>Unit Price</th><th>Total</th></tr>
      </thead>
      <tbody>
        {% for item in invoice.items.all %}
        <tr>
          <td>{{ item.description }}</td>
          <td>{{ item.quantity }}</td>
          <td>{{ business.currency }} {{ item.unit_price|floatformat:0 }}</td>
          <td>{{ business.currency }} {{ item.line_total|floatformat:0 }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

<!-- Payment History -->
<div class="card bg-base-100 shadow mb-4">
  <div class="card-body">
    <h2 class="card-title text-base">Payment History</h2>
    {% if payments %}
    <table class="table table-sm">
      <thead>
        <tr><th>Date</th><th>Amount</th><th>Method</th><th>Account</th><th>Note</th><th>By</th></tr>
      </thead>
      <tbody>
        {% for payment in payments %}
        <tr>
          <td>{{ payment.date|date:"d M Y" }}</td>
          <td class="text-success font-medium">{{ business.currency }} {{ payment.amount|floatformat:0 }}</td>
          <td><span class="badge badge-ghost badge-sm">{{ payment.get_payment_method_display }}</span></td>
          <td>{{ payment.account.name }}</td>
          <td>{{ payment.note|default:"—" }}</td>
          <td>{{ payment.created_by.username|default:"—" }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    {% else %}
    <div class="text-base-content/40 text-sm">No payments yet.</div>
    {% endif %}
  </div>
</div>

<!-- Record Payment -->
{% if invoice.status != 'paid' and invoice.status != 'cancelled' %}
<div class="card bg-base-100 shadow max-w-lg">
  <div class="card-body">
    <h2 class="card-title text-base">Record Payment</h2>
    {% load form_tags %}
    <form method="post" action="{% url 'sales:invoice_payment' invoice.pk %}">
      {% csrf_token %}
      {% for field in payment_form %}
        <div class="form-control mb-3">
          <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 %}
      {% if payment_form.non_field_errors %}
        <div class="alert alert-error mb-3">{{ payment_form.non_field_errors }}</div>
      {% endif %}
      <div class="card-actions justify-end">
        <button type="submit" class="btn btn-success">💰 Record Payment</button>
      </div>
    </form>
  </div>
</div>
{% endif %}

{% endblock %}