{% extends 'core/base.html' %}
{% load static %}

{% block title %}Customers — SwiftPOS{% endblock %}
{% block topbar_title %}Customers{% endblock %}

{% block extra_css %}
<style>
.cust-tab-bar { display:flex; gap:0.5rem; border-bottom:2px solid var(--sp-border,#e5e7eb); margin-bottom:1.25rem; }
.cust-tab {
    padding:0.55rem 1.2rem; border-radius:10px 10px 0 0;
    font-size:0.82rem; font-weight:600; cursor:pointer;
    border:2px solid transparent; border-bottom:none;
    color:var(--sp-text-muted,#6b7280); background:transparent;
    transition:all .18s;
}
.cust-tab.active {
    background:var(--sp-primary,#4f46e5); color:#fff;
    border-color:var(--sp-primary,#4f46e5);
}
.sp-badge-danger  { background:#fee2e2; color:#dc2626; font-size:.7rem; padding:.15rem .45rem; border-radius:50px; font-weight:700; }
.sp-badge-warning { background:#fef3c7; color:#d97706; font-size:.7rem; padding:.15rem .45rem; border-radius:50px; font-weight:700; }
.sp-badge-success { background:#dcfce7; color:#16a34a; font-size:.7rem; padding:.15rem .45rem; border-radius:50px; font-weight:700; }
.cust-stat-card { border-radius:14px; padding:1rem 1.25rem; }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid px-0">

  {% if messages %}
  <div class="mb-3">
    {% for message in messages %}
    <div class="alert alert-{{ message.tags|default:'info' }} alert-dismissible fade show" role="alert">
      {{ message }}
      <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    {% endfor %}
  </div>
  {% endif %}

  <!-- Header -->
  <div class="d-flex flex-wrap justify-content-between align-items-center mb-3 gap-2">
    <div>
      <h5 class="mb-0 fw-bold">Customers</h5>
      <div class="text-muted small">Manage registered customers, credit accounts &amp; payment history</div>
    </div>
    <a href="{% url 'sales:customer_create' %}" class="btn btn-primary btn-sm d-flex align-items-center gap-2" style="border-radius:10px;">
      <i class="fas fa-user-plus"></i> New Customer
    </a>
  </div>

  <!-- Summary cards -->
  <div class="row g-3 mb-3">
    <div class="col-6 col-md-3">
      <div class="card cust-stat-card">
        <div class="small text-muted">Total Customers</div>
        <div class="fw-bold fs-5">{{ customers.count }}</div>
      </div>
    </div>
    <div class="col-6 col-md-3">
      <div class="card cust-stat-card">
        <div class="small text-muted">On Credit</div>
        <div class="fw-bold fs-5 text-danger">{{ total_credit_customers }}</div>
      </div>
    </div>
    <div class="col-6 col-md-3">
      <div class="card cust-stat-card">
        <div class="small text-muted">Total Outstanding</div>
        <div class="fw-bold fs-5 text-danger">{{ currency_symbol }}{{ total_outstanding|floatformat:2 }}</div>
      </div>
    </div>
    <div class="col-6 col-md-3">
      <div class="card cust-stat-card">
        <div class="small text-muted fw-semibold">Paid Recently</div>
        <div class="fw-bold fs-5 text-success">{{ payment_history.count }}</div>
      </div>
    </div>
  </div>

  <!-- Search bar -->
  <form method="get" class="mb-3 d-flex gap-2">
    <input type="hidden" name="tab" value="{{ tab }}">
    <input type="text" name="q" class="form-control" placeholder="🔍  Search by name, phone or email…" value="{{ q }}" style="border-radius:10px; max-width:400px;">
    <button class="btn btn-outline-secondary btn-sm" type="submit" style="border-radius:10px;">Search</button>
    {% if q %}<a href="?tab={{ tab }}" class="btn btn-link btn-sm">Clear</a>{% endif %}
  </form>

  <!-- Tab bar -->
  <div class="cust-tab-bar">
    <a href="?tab=all{% if q %}&q={{ q }}{% endif %}" class="cust-tab {% if tab == 'all' %}active{% endif %}">
      <i class="fas fa-users me-1"></i> All Customers
      <span class="badge bg-secondary ms-1 rounded-pill" style="font-size:.65rem;">{{ customers.count }}</span>
    </a>
    <a href="?tab=credit{% if q %}&q={{ q }}{% endif %}" class="cust-tab {% if tab == 'credit' %}active{% endif %}">
      <i class="fas fa-exclamation-circle me-1"></i> Pending Payments
      <span class="badge bg-danger ms-1 rounded-pill" style="font-size:.65rem;">{{ total_credit_customers }}</span>
    </a>
    <a href="?tab=history{% if q %}&q={{ q }}{% endif %}" class="cust-tab {% if tab == 'history' %}active{% endif %}">
      <i class="fas fa-history me-1"></i> Payment History
    </a>
  </div>

  <!-- ══ TAB: All Customers ══ -->
  {% if tab == 'all' %}
  <div class="card">
    <div class="card-body p-0">
      {% if customers %}
      <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
          <thead class="table-light">
            <tr>
              <th>Name</th>
              <th>Phone</th>
              <th>Email</th>
              <th>Orders</th>
              <th>Total Spent</th>
              <th>Outstanding</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {% for c in customers %}
            <tr>
              <td class="fw-semibold">{{ c.name }}</td>
              <td class="text-muted small">{{ c.phone|default:"—" }}</td>
              <td class="text-muted small">{{ c.email|default:"—" }}</td>
              <td>{{ c.total_orders }}</td>
              <td>{{ currency_symbol }}{{ c.total_spent|floatformat:2 }}</td>
              <td>
                {% if c.outstanding_balance > 0 %}
                  <span class="sp-badge-danger">{{ currency_symbol }}{{ c.outstanding_balance|floatformat:2 }}</span>
                {% else %}
                  <span class="sp-badge-success">Clear</span>
                {% endif %}
              </td>
              <td>
                <a href="{% url 'sales:customer_detail' c.pk %}" class="btn btn-sm btn-outline-primary" style="border-radius:8px;font-size:.75rem;">View</a>
                <a href="{% url 'sales:customer_edit' c.pk %}" class="btn btn-sm btn-outline-secondary ms-1" style="border-radius:8px;font-size:.75rem;">Edit</a>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      {% else %}
      <div class="text-center py-5 text-muted">
        <i class="fas fa-users fa-2x opacity-25 d-block mb-2"></i>
        <small>{% if q %}No customers match "{{ q }}"{% else %}No customers yet — <a href="{% url 'sales:customer_create' %}">Add one</a>{% endif %}</small>
      </div>
      {% endif %}
    </div>
  </div>
  {% endif %}

  <!-- ══ TAB: Pending Payments (Credit) ══ -->
  {% if tab == 'credit' %}
  <div class="card mb-3">
    <div class="card-header">
      <h6 class="mb-0 fw-bold"><i class="fas fa-exclamation-triangle text-warning me-2"></i>Customers with Outstanding Balances</h6>
    </div>
    <div class="card-body p-0">
      {% if credit_summary %}
      <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
          <thead class="table-light">
            <tr>
              <th>Customer</th>
              <th>Phone</th>
              <th>Orders</th>
              <th>Total Owed</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>
            {% for c in credit_summary %}
            <tr>
              <td class="fw-semibold">{{ c.customer_name|default:"Anonymous" }}</td>
              <td class="text-muted small">{{ c.customer_phone|default:"—" }}</td>
              <td>{{ c.orders_count }}</td>
              <td><span class="sp-badge-danger">{{ currency_symbol }}{{ c.total_owed|floatformat:2 }}</span></td>
              <td>
                <a href="?tab=history&q={{ c.customer_name }}" class="btn btn-sm btn-outline-info" style="border-radius:8px;font-size:.75rem;">
                  <i class="fas fa-history me-1"></i>History
                </a>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      {% else %}
      <div class="text-center py-5 text-muted">
        <i class="fas fa-check-circle fa-2x opacity-25 d-block mb-2 text-success"></i>
        <small>No outstanding balances {% if q %}matching "{{ q }}"{% endif %} 🎉</small>
      </div>
      {% endif %}
    </div>
  </div>

  <!-- Individual credit orders -->
  {% if credit_orders %}
  <div class="card">
    <div class="card-header">
      <h6 class="mb-0 fw-semibold small text-muted">Individual Credit Orders</h6>
    </div>
    <div class="card-body p-0">
      <div class="table-responsive">
        <table class="table table-sm table-hover align-middle mb-0">
          <thead class="table-light">
            <tr>
              <th>Order #</th>
              <th>Customer</th>
              <th>Date</th>
              <th>Total</th>
              <th>Paid</th>
              <th>Balance</th>
              <th>Status</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {% for o in credit_orders %}
            <tr>
              <td class="font-monospace small">{{ o.order_number }}</td>
              <td>{{ o.customer_name|default:"—" }}</td>
              <td class="text-muted small">{{ o.created_at|date:"d M Y" }}</td>
              <td>{{ currency_symbol }}{{ o.final_amount|floatformat:2 }}</td>
              <td>{{ currency_symbol }}{{ o.amount_paid|floatformat:2 }}</td>
              <td><span class="sp-badge-danger">{{ currency_symbol }}{{ o.balance_amount|floatformat:2 }}</span></td>
              <td>
                {% if o.payment_status == 'credit' %}<span class="sp-badge-danger">Credit</span>
                {% else %}<span class="sp-badge-warning">Partial</span>{% endif %}
              </td>
              <td>
                <div class="d-flex align-items-center gap-1">
                  <a href="{% url 'sales:print_receipt' o.pk %}" class="btn btn-sm btn-outline-secondary" style="border-radius:8px;font-size:.72rem;">View</a>
                  {% if o.balance_amount > 0 %}
                  <a href="{% url 'sales:clear_credit' o.pk %}" class="btn btn-sm btn-outline-success" style="border-radius:8px;font-size:.72rem;" onclick="return confirm('Mark order {{ o.order_number }} balance of {{ currency_symbol }}{{ o.balance_amount|floatformat:2 }} as paid?');">Clear</a>
                  {% endif %}
                </div>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
  {% endif %}
  {% endif %}

  <!-- ══ TAB: Payment History ══ -->
  {% if tab == 'history' %}
  <div class="card">
    <div class="card-header">
      <h6 class="mb-0 fw-bold"><i class="fas fa-history text-success me-2"></i>Completed Payments</h6>
    </div>
    <div class="card-body p-0">
      {% if payment_history %}
      <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
          <thead class="table-light">
            <tr>
              <th>Order #</th>
              <th>Customer</th>
              <th>Phone</th>
              <th>Date Paid</th>
              <th>Amount</th>
              <th>Method</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {% for o in payment_history %}
            <tr>
              <td class="font-monospace small">{{ o.order_number }}</td>
              <td class="fw-semibold">{{ o.customer_name }}</td>
              <td class="text-muted small">{{ o.customer_phone|default:"—" }}</td>
              <td class="text-muted small">{{ o.updated_at|date:"d M Y" }}</td>
              <td class="text-success fw-bold">{{ currency_symbol }}{{ o.final_amount|floatformat:2 }}</td>
              <td><span class="badge bg-light text-dark border">{{ o.get_payment_method_display }}</span></td>
              <td>
                <a href="{% url 'sales:print_receipt' o.pk %}" class="btn btn-sm btn-outline-secondary" style="border-radius:8px;font-size:.72rem;">View</a>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      {% else %}
      <div class="text-center py-5 text-muted">
        <i class="fas fa-history fa-2x opacity-25 d-block mb-2"></i>
        <small>No payment history{% if q %} for "{{ q }}"{% endif %}</small>
      </div>
      {% endif %}
    </div>
  </div>
  {% endif %}

</div>
{% endblock %}