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

{% block content %}
<div class="row justify-content-center">
  <div class="col-lg-8">
    <div class="card">
      <div class="card-header py-3"><i class="bi bi-people me-2"></i>{{ titulo }}</div>
      <div class="card-body p-4">
        <form method="post">

          <!-- SECCIÓN: Identificación -->
          <p class="text-muted small fw-semibold text-uppercase mb-2" style="letter-spacing:.6px">
            <i class="bi bi-person-badge me-1"></i>Identificación
          </p>
          <div class="row g-3 mb-4">
            <div class="col-md-8">
              <label class="form-label">Nombre *</label>
              <input type="text" name="nombre" class="form-control" required
                     value="{{ cliente.nombre if cliente else '' }}"
                     placeholder="Razón social o nombre completo">
            </div>
            <div class="col-md-4">
              <label class="form-label">NIF / CIF *</label>
              <input type="text" name="nif" class="form-control" required
                     value="{{ cliente.nif if cliente else '' }}"
                     placeholder="B12345678">
            </div>
            <div class="col-md-6">
              <label class="form-label">Email</label>
              <input type="email" name="email" class="form-control"
                     value="{{ cliente.email if cliente else '' }}"
                     placeholder="contacto@empresa.com">
            </div>
            <div class="col-md-6">
              <label class="form-label">Teléfono</label>
              <input type="text" name="telefono" class="form-control"
                     value="{{ cliente.telefono if cliente else '' }}"
                     placeholder="600 000 000">
            </div>
          </div>

          <!-- SECCIÓN: Dirección -->
          <p class="text-muted small fw-semibold text-uppercase mb-2" style="letter-spacing:.6px">
            <i class="bi bi-geo-alt me-1"></i>Dirección
          </p>
          <div class="row g-3 mb-4">
            <div class="col-12">
              <label class="form-label">Dirección *</label>
              <input type="text" name="direccion" class="form-control" required
                     value="{{ cliente.direccion if cliente else '' }}"
                     placeholder="Calle, número, piso...">
            </div>
            <div class="col-md-3">
              <label class="form-label">Código postal</label>
              <input type="text" name="cp" class="form-control"
                     value="{{ cliente.cp if cliente else '' }}"
                     placeholder="28001">
            </div>
            <div class="col-md-5">
              <label class="form-label">Ciudad</label>
              <input type="text" name="ciudad" class="form-control"
                     value="{{ cliente.ciudad if cliente else '' }}"
                     placeholder="Madrid">
            </div>
            <div class="col-md-4">
              <label class="form-label">País</label>
              <input type="text" name="pais" class="form-control"
                     value="{{ cliente.pais if cliente else 'España' }}">
            </div>
          </div>

          <!-- SECCIÓN: Pago -->
          <p class="text-muted small fw-semibold text-uppercase mb-2" style="letter-spacing:.6px">
            <i class="bi bi-credit-card me-1"></i>Condiciones de pago
          </p>
          <div class="row g-3 mb-4">
            <div class="col-md-6">
              <label class="form-label">Forma de pago *</label>
              <select name="forma_pago" class="form-select" required>
                <option value="" disabled {% if not cliente or not cliente.forma_pago %}selected{% endif %}>
                  — Selecciona —
                </option>
                {% for val, label in [
                  ('transferencia',   'Transferencia bancaria'),
                  ('domiciliacion',   'Domiciliación bancaria'),
                  ('tarjeta',         'Tarjeta'),
                  ('efectivo',        'Efectivo'),
                  ('cheque',          'Cheque'),
                  ('pagare',          'Pagaré'),
                ] %}
                <option value="{{ val }}"
                  {% if cliente and cliente.forma_pago == val %}selected{% endif %}>
                  {{ label }}
                </option>
                {% endfor %}
              </select>
            </div>
            <div class="col-md-3">
              <label class="form-label">Días de pago *</label>
              <input type="number" name="condiciones_pago" class="form-control"
                     required min="0" max="365"
                     value="{{ cliente.condiciones_pago if cliente else '' }}"
                     placeholder="30">
            </div>
            <div class="col-md-3">
              <label class="form-label">IBAN</label>
              <input type="text" name="iban" class="form-control"
                     placeholder="ES00 0000..."
                     value="{{ cliente.iban if cliente else '' }}">
            </div>
          </div>

          <!-- SECCIÓN: Notas -->
          <div class="mb-4">
            <label class="form-label">Notas</label>
            <textarea name="notas" class="form-control" rows="2"
                      placeholder="Observaciones, condiciones especiales...">{{ cliente.notas if cliente else '' }}</textarea>
          </div>

          <div class="d-flex gap-2">
            <button type="submit" class="btn btn-primary">
              <i class="bi bi-check-lg me-1"></i>{{ 'Guardar cambios' if cliente else 'Crear cliente' }}
            </button>
            <a href="{{ url_for('clientes.lista') }}" class="btn btn-outline-secondary">Cancelar</a>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}