{% extends "base.html" %}
{% set active = "clientes" %}
{% block title %}Clientes · ArcaBeauty Club{% endblock %}

{% block content %}
<div class="topbar">
    <div>
        <div class="eyebrow">Expedientes</div>
        <h1>Clientes</h1>
    </div>
    <button class="btn accent" onclick="document.getElementById('modalNuevoCliente').classList.add('open')">+ Nuevo cliente</button>
</div>

<form method="get" class="search-box" style="margin-bottom:18px;">
    <span>&#128269;</span>
    <input type="text" name="q" placeholder="Buscar por nombre, teléfono o correo..." value="{{ busqueda }}">
</form>

<div class="card" style="padding:0;">
    {% if clientes %}
    <table>
        <thead>
            <tr><th>Nombre</th><th>Teléfono</th><th>Correo</th><th>Puntos</th><th>Registrado</th><th></th></tr>
        </thead>
        <tbody>
        {% for c in clientes %}
            <tr style="cursor:pointer;" onclick="window.location='{{ url_for('cliente_detalle', cliente_id=c.id) }}'">
                <td><strong>{{ c.nombre }}</strong></td>
                <td class="mono">{{ c.telefono or "—" }}</td>
                <td>{{ c.email or "—" }}</td>
                <td class="mono">{{ c.puntos }}</td>
                <td class="mono">{{ c.fecha_registro[:10] }}</td>
                <td><a href="{{ url_for('cliente_detalle', cliente_id=c.id) }}" class="btn ghost sm">Ver expediente</a></td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
    {% else %}
    <div class="empty-state">
        <div class="display">No hay clientes que coincidan</div>
        <p>Intenta otra búsqueda o registra un cliente nuevo.</p>
    </div>
    {% endif %}
</div>

<div class="modal-backdrop" id="modalNuevoCliente">
    <div class="modal">
        <button class="modal-close" onclick="document.getElementById('modalNuevoCliente').classList.remove('open')">&times;</button>
        <h2>Nuevo cliente</h2>
        <form method="post" action="{{ url_for('clientes_crear') }}">
            <div class="field"><label>Nombre completo</label><input type="text" name="nombre" required></div>
            <div class="field"><label>Teléfono</label><input type="text" name="telefono"></div>
            <div class="field"><label>Correo</label><input type="email" name="email"></div>
            <div class="field"><label>Fecha de nacimiento</label><input type="date" name="fecha_nacimiento"></div>
            <div class="field"><label>Notas</label><textarea name="notas" rows="2" placeholder="Alergias, preferencias, etc."></textarea></div>
            <div class="field"><label>Código de referido (opcional)</label><input type="text" name="codigo_referido" placeholder="Ej. DANI4821"></div>
            <button type="submit" class="btn accent" style="width:100%;">Guardar cliente</button>
        </form>
    </div>
</div>
{% endblock %}