{% extends 'base.html' %}
{% block title %}{{ cliente.nombre_completo }}{% endblock %}
{% block page_title %}Perfil del Cliente{% endblock %}
{% block page_subtitle %}{{ cliente.nombre_completo }}{% endblock %}

{% block content %}
<div class="row g-4">
    <!-- Datos del Cliente -->
    <div class="col-lg-4">
        <div class="panel-card text-center mb-4">
            <div class="rounded-circle d-flex align-items-center justify-content-center fw-bold text-white mx-auto mb-3"
                style="width:80px;height:80px;background:linear-gradient(135deg,#0bb8c8,#0380ad);font-size:32px;">
                {{ cliente.nombres.0|upper }}
            </div>
            <h4 class="fw-bold mb-0">{{ cliente.nombre_completo }}</h4>
            <span class="badge rounded-pill mb-3" style="background:rgba(11,184,200,.15);color:#0bb8c8;">Cliente</span>
            <div class="text-start w-100 mt-2">
                <div class="d-flex align-items-center gap-2 mb-2 text-muted small">
                    <i class="fa-solid fa-id-card" style="width:16px;color:#0bb8c8;"></i> {{ cliente.dni }}
                </div>
                <div class="d-flex align-items-center gap-2 mb-2 text-muted small">
                    <i class="fa-solid fa-phone" style="width:16px;color:#0bb8c8;"></i> {{ cliente.telefono }}
                </div>
                <div class="d-flex align-items-center gap-2 mb-2 text-muted small">
                    <i class="fa-solid fa-envelope" style="width:16px;color:#0bb8c8;"></i>
                    {{ cliente.email|default:"Sin email" }}
                </div>
                <div class="d-flex align-items-start gap-2 mb-2 text-muted small">
                    <i class="fa-solid fa-location-dot mt-1" style="width:16px;color:#0bb8c8;"></i>
                    {{ cliente.direccion|default:"Sin dirección" }}
                </div>
                <div class="d-flex align-items-center gap-2 text-muted small">
                    <i class="fa-solid fa-calendar" style="width:16px;color:#0bb8c8;"></i>
                    Desde {{ cliente.fecha_registro|date:"d/m/Y" }}
                </div>
            </div>
            <div class="d-flex gap-2 mt-4">
                <a href="{% url 'cliente_editar' cliente.pk %}" class="btn btn-sm btn-outline-secondary flex-fill">
                    <i class="fa-solid fa-pen me-1"></i>Editar
                </a>
                <form method="post" action="{% url 'cliente_estado' cliente.pk %}" class="d-inline flex-fill">
                    {% csrf_token %}
                    {% if cliente.is_active %}
                    <button type="submit" class="btn btn-sm btn-outline-danger w-100">
                        <i class="fa-solid fa-ban me-1"></i>Desactivar
                    </button>
                    {% else %}
                    <button type="submit" class="btn btn-sm btn-outline-success w-100">
                        <i class="fa-solid fa-check me-1"></i>Activar
                    </button>
                    {% endif %}
                </form>
            </div>
        </div>
    </div>

    <!-- Mascotas -->
    <div class="col-lg-8">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h5 class="fw-bold mb-0">
                <i class="fa-solid fa-paw me-2" style="color:#0bb8c8;"></i>
                Mascotas ({{ mascotas.count }})
            </h5>
            <a href="{% url 'mascota_crear' cliente.pk %}" class="btn btn-sm btn-primary rounded-pill"
                style="background:#0bb8c8;border:none;">
                <i class="fa-solid fa-plus me-1"></i>Nueva Mascota
            </a>
        </div>

        {% if mascotas %}
        <div class="row g-3">
            {% for mascota in mascotas %}
            <div class="col-md-6">
                <div class="panel-card h-100 {% if not mascota.is_active %}opacity-50{% endif %}"
                    style="border-left:4px solid #0bb8c8;">
                    <div class="d-flex align-items-start gap-3">
                        {% if mascota.foto %}
                        <img src="{{ mascota.foto.url }}" class="rounded-circle" width="60" height="60"
                            style="object-fit:cover;flex-shrink:0;">
                        {% else %}
                        <div class="rounded-circle d-flex align-items-center justify-content-center text-white fw-bold"
                            style="width:60px;height:60px;background:linear-gradient(135deg,#8b5cf6,#6d28d9);font-size:22px;flex-shrink:0;">
                            {{ mascota.nombre.0|upper }}
                        </div>
                        {% endif %}
                        <div class="flex-grow-1">
                            <h6 class="fw-bold mb-1">{{ mascota.nombre }}</h6>
                            <div class="text-muted small">
                                <span class="badge rounded-pill me-1"
                                    style="background:rgba(139,92,246,.15);color:#6d28d9;">
                                    {{ mascota.get_especie_display }}
                                </span>
                                <span>{{ mascota.get_sexo_display }}</span>
                            </div>
                            {% if mascota.raza %}<div class="text-muted small mt-1">{{ mascota.raza }}</div>{% endif %}
                            {% if mascota.peso_actual %}<div class="text-muted small">{{ mascota.peso_actual }} kg</div>
                            {% endif %}
                        </div>
                    </div>
                    <div class="d-flex gap-2 mt-3">
                        <a href="{% url 'historia_crear' %}?mascota={{ mascota.pk }}"
                            class="btn btn-sm btn-outline-info flex-fill" style="font-size:11px;">
                            <i class="fa-solid fa-stethoscope me-1"></i>Historia
                        </a>
                        <a href="{% url 'vacuna_crear_mascota' mascota.pk %}"
                            class="btn btn-sm btn-outline-success flex-fill" style="font-size:11px;">
                            <i class="fa-solid fa-syringe me-1"></i>Vacuna
                        </a>
                        <a href="{% url 'mascota_editar' mascota.pk %}"
                            class="btn btn-sm btn-outline-secondary flex-fill" style="font-size:11px;" title="Editar">
                            <i class="fa-solid fa-pen"></i>
                        </a>
                        <form method="post" action="{% url 'mascota_estado' mascota.pk %}" class="d-inline flex-fill">
                            {% csrf_token %}
                            {% if mascota.is_active %}
                            <button type="submit" class="btn btn-sm btn-outline-danger w-100" style="font-size:11px;"
                                title="Desactivar">
                                <i class="fa-solid fa-ban"></i>
                            </button>
                            {% else %}
                            <button type="submit" class="btn btn-sm btn-outline-success w-100" style="font-size:11px;"
                                title="Activar">
                                <i class="fa-solid fa-check"></i>
                            </button>
                            {% endif %}
                        </form>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div class="panel-card text-center py-5 text-muted">
            <i class="fa-solid fa-paw" style="font-size:2.5rem;opacity:.2;"></i>
            <p class="mt-3">Este cliente aún no tiene mascotas registradas.</p>
            <a href="{% url 'mascota_crear' cliente.pk %}" class="btn btn-primary rounded-pill"
                style="background:#0bb8c8;border:none;">
                <i class="fa-solid fa-plus me-2"></i>Agregar primera mascota
            </a>
        </div>
        {% endif %}

        <!-- Últimas citas -->
        {% with citas=cliente.mascotas.all %}
        {% endwith %}
    </div>
</div>

<div class="mt-3">
    <a href="{% url 'cliente_lista' %}" class="btn btn-outline-secondary rounded-pill">
        <i class="fa-solid fa-arrow-left me-2"></i>Volver al listado
    </a>
</div>
{% endblock %}