{% extends "pos/base.html" %}
{% load humanize %}

{% block title %}{{ area.area_name }} — Workshop{% endblock %}

{% block content %}
<div class="container-fluid px-4 py-3">

  {# ── Breadcrumb ── #}
  <nav aria-label="breadcrumb" class="mb-3">
    <ol class="breadcrumb small">
      <li class="breadcrumb-item">
        <a href="{% url 'workshop:company_list' %}">Companies</a>
      </li>
      <li class="breadcrumb-item active">{{ area.area_name }}</li>
    </ol>
  </nav>

  {# ── Page Header ── #}
  <div class="d-flex align-items-start justify-content-between mb-3">
    <div>
      <h4 class="mb-1 fw-bold">
        <i class="bi bi-building me-2 text-primary"></i>
        {{ area.area_name }}
      </h4>
      <span class="badge
        {% if area.description == 'corporate' %}bg-primary-subtle text-primary border border-primary-subtle
        {% elif area.description == 'insurance' %}bg-success-subtle text-success border border-success-subtle
        {% else %}bg-secondary-subtle text-secondary border border-secondary-subtle{% endif %}">
        {{ company_type }}
      </span>
      <span class="badge bg-light text-muted border ms-1">Area ID: {{ area.t_id }}</span>
    </div>
    <a href="{% url 'workshop:company_edit' area.id %}"
       class="btn btn-sm btn-outline-secondary">
      <i class="bi bi-pencil me-1"></i> Edit
    </a>
  </div>

  {# ── Summary Cards ── #}
  <div class="row g-3 mb-4">
    <div class="col-md-3">
      <div class="card border-0 shadow-sm text-center py-3">
        <div class="display-6 fw-bold text-primary">{{ customer_data|length }}</div>
        <div class="text-muted small">Linked Customers</div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="card border-0 shadow-sm text-center py-3">
        <div class="display-6 fw-bold text-info">
          {% with total=0 %}
            {{ customer_data|length }}
          {% endwith %}
        </div>
        <div class="text-muted small">Total Invoices</div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="card border-0 shadow-sm text-center py-3">
        <div class="display-6 fw-bold text-success">
          {% for item in customer_data %}
            {% if forloop.first %}{{ item.total_billed|floatformat:0|intcomma }}{% endif %}
          {% endfor %}
        </div>
        <div class="text-muted small">Total Billed</div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="card border-0 shadow-sm text-center py-3">
        <div class="display-6 fw-bold text-danger">
          {% with total_bal=0 %}
          {% for item in customer_data %}
          {% endfor %}
          —
          {% endwith %}
        </div>
        <div class="text-muted small">Total Outstanding</div>
      </div>
    </div>
  </div>

  {# ── Customers Table ── #}
  <div class="card border-0 shadow-sm">
    <div class="card-header bg-white border-bottom d-flex align-items-center justify-content-between py-3">
      <h6 class="mb-0 fw-semibold">
        <i class="bi bi-people me-2"></i>Linked Customers
      </h6>
      <span class="badge bg-secondary-subtle text-secondary border">
        {{ customer_data|length }} customer(s)
      </span>
    </div>
    <div class="table-responsive">
      <table class="table table-hover align-middle mb-0">
        <thead class="table-light">
          <tr>
            <th>Customer Name</th>
            <th>Mobile</th>
            <th style="width:120px" class="text-center">Invoices</th>
            <th style="width:130px" class="text-end">Total Billed</th>
            <th style="width:130px" class="text-end">Received</th>
            <th style="width:130px" class="text-end">Balance</th>
          </tr>
        </thead>
        <tbody>
          {% if customer_data %}
            {% for item in customer_data %}
            <tr>
              <td>
                <span class="fw-semibold">{{ item.customer.name }}</span>
                {% if item.customer.address %}
                  <div class="text-muted small">{{ item.customer.address }}</div>
                {% endif %}
              </td>
              <td class="text-muted small">{{ item.customer.mobile|default:"—" }}</td>
              <td class="text-center">
                <span class="badge bg-light text-dark border">
                  {{ item.invoice_count }}
                </span>
              </td>
              <td class="text-end">
                {{ item.total_billed|floatformat:0|intcomma }}
              </td>
              <td class="text-end text-success">
                {{ item.total_received|floatformat:0|intcomma }}
              </td>
              <td class="text-end">
                {% if item.balance > 0 %}
                  <span class="text-danger fw-semibold">
                    {{ item.balance|floatformat:0|intcomma }}
                  </span>
                {% elif item.balance == 0 %}
                  <span class="text-success">Settled</span>
                {% else %}
                  <span class="text-muted">
                    {{ item.balance|floatformat:0|intcomma }}
                  </span>
                {% endif %}
              </td>
            </tr>
            {% endfor %}
          {% else %}
            <tr>
              <td colspan="6" class="text-center text-muted py-5">
                <i class="bi bi-people display-6 d-block mb-2 opacity-25"></i>
                No customers linked to this company yet.<br>
                <small>
                  Go to <strong>Customer</strong> and set Area = 
                  <strong>{{ area.area_name }}</strong> (ID: {{ area.t_id }})
                </small>
              </td>
            </tr>
          {% endif %}
        </tbody>
      </table>
    </div>
  </div>

</div>
{% endblock %}