{% extends "base.html" %}
{% block title %}{{ cliente.nombre }}{% endblock %}
{% block page_title %}{{ cliente.nombre }}{% endblock %}

{% block topbar_actions %}
<a href="{{ url_for('clientes.editar', id=cliente.id) }}" class="btn btn-outline-secondary btn-sm">
  <i class="bi bi-pencil"></i> Editar
</a>
<a href="{{ url_for('facturas.nueva_emitida') }}" class="btn btn-primary btn-sm">
  <i class="bi bi-plus-lg"></i> Nueva factura
</a>
{% endblock %}

{% block content %}
<div class="row g-3">
  <div class="col-lg-4">
    <div class="card">
      <div class="card-header py-3"><i class="bi bi-info-circle me-2"></i>Datos del cliente</div>
      <div class="card-body">
        <dl class="row mb-0 small">
          <dt class="col-5 text-muted">NIF/CIF</dt><dd class="col-7">{{ cliente.nif or '—' }}</dd>
          <dt class="col-5 text-muted">Email</dt><dd class="col-7">{{ cliente.email or '—' }}</dd>
          <dt class="col-5 text-muted">Teléfono</dt><dd class="col-7">{{ cliente.telefono or '—' }}</dd>
          <dt class="col-5 text-muted">Dirección</dt>
          <dd class="col-7">
            {% if cliente.direccion %}{{ cliente.direccion }}<br>{% endif %}
            {% if cliente.cp or cliente.ciudad %}{{ cliente.cp }} {{ cliente.ciudad }}{% else %}—{% endif %}
          </dd>
          <dt class="col-5 text-muted">IBAN</dt><dd class="col-7">{{ cliente.iban or '—' }}</dd>
          <dt class="col-5 text-muted">Pago</dt><dd class="col-7">{{ cliente.condiciones_pago }} días</dd>
          {% if cliente.notas %}
          <dt class="col-5 text-muted">Notas</dt><dd class="col-7">{{ cliente.notas }}</dd>
          {% endif %}
        </dl>
      </div>
    </div>
    <div class="card mt-3">
      <div class="card-body">
        <div class="row text-center g-0">
          <div class="col-6 border-end">
            <div class="text-muted small">Total facturado</div>
            <div class="fw-bold">{{ "%.2f"|format(total_facturado) }} €</div>
          </div>
          <div class="col-6">
            <div class="text-muted small">Pendiente cobro</div>
            <div class="fw-bold text-warning">{{ "%.2f"|format(total_pendiente) }} €</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-lg-8">
    <div class="card">
      <div class="card-header py-3"><i class="bi bi-file-earmark-arrow-up me-2"></i>Facturas emitidas</div>
      <div class="table-responsive">
        <table class="table table-hover mb-0">
          <thead><tr>
            <th>Número</th><th>Fecha</th><th>Vencimiento</th><th>Estado</th><th class="text-end">Total</th><th></th>
          </tr></thead>
          <tbody>
            {% for f in facturas %}
            <tr>
              <td><a href="{{ url_for('facturas.detalle_emitida', id=f.id) }}" class="text-decoration-none fw-semibold">{{ f.numero }}</a></td>
              <td class="small text-muted">{{ f.fecha }}</td>
              <td class="small text-muted">{{ f.fecha_vencimiento or '—' }}</td>
              <td><span class="badge badge-estado-{{ f.estado }}">{{ f.estado|capitalize }}</span></td>
              <td class="text-end fw-semibold">{{ "%.2f"|format(f.total) }} €</td>
              <td><a href="{{ url_for('facturas.detalle_emitida', id=f.id) }}" class="btn btn-outline-secondary btn-action"><i class="bi bi-eye"></i></a></td>
            </tr>
            {% else %}
            <tr><td colspan="6" class="text-center text-muted py-3">Sin facturas</td></tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
{% endblock %}