{% extends "core/base.html" %}
{% load static %}
{% block title %}{{ customer.name }} — Customer Profile{% endblock %}
{% block topbar_title %}Customer Profile{% endblock %}

{% block content %}
<div class="swiftpos-content container-fluid py-4">
  <div class="row g-4">
    <div class="col-md-4">
      <div class="card shadow-sm">
        <div class="card-body text-center">
          <div class="rounded-circle bg-primary d-inline-flex align-items-center justify-content-center mb-3"
               style="width:64px;height:64px;">
            <i class="fas fa-user fa-2x text-white"></i>
          </div>
          <h5 class="fw-bold mb-0">{{ customer.name }}</h5>
          {% if customer.phone %}<div class="text-muted small">{{ customer.phone }}</div>{% endif %}
          {% if customer.email %}<div class="text-muted small">{{ customer.email }}</div>{% endif %}
        </div>
        <ul class="list-group list-group-flush">
          <li class="list-group-item d-flex justify-content-between">
            <span class="text-muted small">Total Orders</span>
            <strong>{{ customer.total_orders }}</strong>
          </li>
          <li class="list-group-item d-flex justify-content-between">
            <span class="text-muted small">Total Spent</span>
            <strong>{{ currency_symbol }}{{ customer.total_spent|floatformat:2 }}</strong>
          </li>
          <li class="list-group-item d-flex justify-content-between">
            <span class="text-muted small">Outstanding</span>
            <strong class="{% if customer.outstanding_balance > 0 %}text-danger{% else %}text-success{% endif %}">
              {{ currency_symbol }}{{ customer.outstanding_balance|floatformat:2 }}
            </strong>
          </li>
          {% if customer.address %}
          <li class="list-group-item">
            <div class="text-muted small">Address</div>
            <div class="small">{{ customer.address }}</div>
          </li>
          {% endif %}
        </ul>
        <div class="card-footer d-flex gap-2">
          <a href="{% url 'sales:customer_edit' customer.pk %}" class="btn btn-sm btn-outline-primary w-50">
            <i class="fas fa-edit me-1"></i> Edit
          </a>
          <a href="{% url 'sales:customer_list' %}" class="btn btn-sm btn-outline-secondary w-50">
            <i class="fas fa-arrow-left me-1"></i> Back
          </a>
        </div>
      </div>
    </div>
    <div class="col-md-8">
      {% if credit_orders %}
      <div class="card shadow-sm mb-3 border-danger border-opacity-25">
        <div class="card-header bg-danger bg-opacity-10">
          <h6 class="mb-0 fw-bold text-danger"><i class="fas fa-exclamation-circle me-2"></i>Outstanding Balances</h6>
        </div>
        <div class="card-body p-0">
          <table class="table table-sm align-middle mb-0">
            <thead class="table-light">
              <tr><th>Order #</th><th>Date</th><th>Total</th><th>Balance</th><th></th></tr>
            </thead>
            <tbody>
              {% for o in credit_orders %}
              <tr>
                <td class="font-monospace small">{{ o.order_number }}</td>
                <td class="text-muted small">{{ o.created_at|date:"d M Y" }}</td>
                <td>{{ currency_symbol }}{{ o.final_amount|floatformat:2 }}</td>
                <td><span class="badge bg-danger">{{ currency_symbol }}{{ o.balance_amount|floatformat:2 }}</span></td>
                <td>
                  <a href="{% url 'sales:clear_credit' o.pk %}" class="btn btn-sm btn-outline-warning">
                    <i class="fas fa-money-bill-wave me-1"></i>Pay
                  </a>
                </td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
      {% endif %}

      <div class="card shadow-sm">
        <div class="card-header">
          <h6 class="mb-0 fw-semibold">Order History</h6>
        </div>
        <div class="card-body p-0">
          {% if orders %}
          <table class="table table-sm align-middle mb-0">
            <thead class="table-light">
              <tr><th>Order #</th><th>Date</th><th>Total</th><th>Status</th><th></th></tr>
            </thead>
            <tbody>
              {% for o in orders %}
              <tr>
                <td class="font-monospace small">{{ o.order_number }}</td>
                <td class="text-muted small">{{ o.created_at|date:"d M Y" }}</td>
                <td>{{ currency_symbol }}{{ o.final_amount|floatformat:2 }}</td>
                <td>
                  {% if o.payment_status == 'full' %}<span class="badge bg-success">Paid</span>
                  {% elif o.payment_status == 'partial' %}<span class="badge bg-warning text-dark">Partial</span>
                  {% else %}<span class="badge bg-danger">Credit</span>{% endif %}
                </td>
                <td>
                  <a href="{% url 'sales:print_receipt' o.pk %}" class="btn btn-sm btn-outline-secondary">
                    <i class="fas fa-receipt"></i>
                  </a>
                </td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
          {% else %}
          <div class="text-center py-4 text-muted small">No orders yet.</div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}