{% extends 'base.html' %}
{% block title %}Historia #{{ historia.pk }}{% endblock %}
{% block page_title %}Historia Clínica #{{ historia.pk }}{% endblock %}
{% block page_subtitle %}{{ historia.mascota.nombre }} — {{ historia.fecha|date:"d/m/Y H:i" }}{% endblock %}

{% block content %}
<div class="row g-4">
    <div class="col-lg-7">
        <!-- Datos del paciente -->
        <div class="panel-card mb-4">
            <div class="d-flex align-items-center gap-3 mb-3">
                <div class="rounded-circle d-flex align-items-center justify-content-center text-white fw-bold"
                    style="width:55px;height:55px;background:linear-gradient(135deg,#8b5cf6,#6d28d9);font-size:22px;">
                    {{ historia.mascota.nombre.0|upper }}
                </div>
                <div>
                    <h5 class="mb-0 fw-bold">{{ historia.mascota.nombre }}</h5>
                    <span class="badge rounded-pill" style="background:rgba(139,92,246,.15);color:#6d28d9;">
                        {{ historia.mascota.get_especie_display }}
                    </span>
                    <small class="text-muted ms-2">{{ historia.mascota.get_sexo_display }}</small>
                </div>
                <div class="ms-auto text-end">
                    <div class="fw-semibold">{{ historia.mascota.cliente.nombre_completo }}</div>
                    <small class="text-muted">{{ historia.mascota.cliente.telefono }}</small>
                </div>
            </div>
            <hr>
            <div class="row g-2 small text-muted">
                <div class="col-6"><strong>Motivo:</strong> {{ historia.motivo_consulta }}</div>
                <div class="col-6"><strong>Veterinario:</strong> {{ historia.veterinario.get_full_name|default:"—" }}
                </div>
                <div class="col-12"><strong>Anamnesis:</strong> {{ historia.anamnesis }}</div>
            </div>
        </div>

        <!-- Examen físico -->
        <div class="panel-card mb-4">
            <h6 class="fw-bold mb-3" style="color:#0bb8c8;">
                <i class="fa-solid fa-heart-pulse me-2"></i>Examen Físico
            </h6>
            <div class="row g-2 text-center">
                {% if not historia.peso and not historia.temperatura %}
                <p class="text-muted small mb-0">Sin datos de examen físico registrados.</p>
                {% endif %}
                {% if historia.peso %}
                <div class="col-4 col-md-2">
                    <div class="rounded-3 p-2" style="background:#f0fdfe;">
                        <small class="d-block text-muted">Peso</small>
                        <strong>{{ historia.peso }} kg</strong>
                    </div>
                </div>
                {% endif %}
                {% if historia.temperatura %}
                <div class="col-4 col-md-2">
                    <div class="rounded-3 p-2" style="background:#f0fdfe;">
                        <small class="d-block text-muted">Temp.</small>
                        <strong>{{ historia.temperatura }}°C</strong>
                    </div>
                </div>
                {% endif %}
                {% if historia.frecuencia_cardiaca %}
                <div class="col-4 col-md-2">
                    <div class="rounded-3 p-2" style="background:#f0fdfe;">
                        <small class="d-block text-muted">FC</small>
                        <strong>{{ historia.frecuencia_cardiaca }} bpm</strong>
                    </div>
                </div>
                {% endif %}
                {% if historia.frecuencia_respiratoria %}
                <div class="col-4 col-md-2">
                    <div class="rounded-3 p-2" style="background:#f0fdfe;">
                        <small class="d-block text-muted">FR</small>
                        <strong>{{ historia.frecuencia_respiratoria }} rpm</strong>
                    </div>
                </div>
                {% endif %}
                {% if historia.mucosas %}
                <div class="col-4 col-md-2">
                    <div class="rounded-3 p-2" style="background:#f0fdfe;">
                        <small class="d-block text-muted">Mucosas</small>
                        <strong>{{ historia.mucosas }}</strong>
                    </div>
                </div>
                {% endif %}
                {% if historia.tiempo_llenado_capilar %}
                <div class="col-4 col-md-2">
                    <div class="rounded-3 p-2" style="background:#f0fdfe;">
                        <small class="d-block text-muted">TLC</small>
                        <strong>{{ historia.tiempo_llenado_capilar }}</strong>
                    </div>
                </div>
                {% endif %}
            </div>
        </div>

        <!-- Diagnóstico -->
        <div class="panel-card mb-4">
            <h6 class="fw-bold mb-2" style="color:#10b981;">
                <i class="fa-solid fa-stethoscope me-2"></i>Diagnóstico
            </h6>
            <p class="mb-3">{{ historia.diagnostico }}</p>

            <h6 class="fw-bold mb-2">Tratamiento</h6>
            <p class="mb-3">{{ historia.tratamiento }}</p>

            {% if historia.observaciones %}
            <h6 class="fw-bold mb-2">Observaciones</h6>
            <p class="text-muted">{{ historia.observaciones }}</p>
            {% endif %}

            {% if historia.proxima_cita %}
            <div class="alert alert-info mt-2 py-2">
                <i class="fa-solid fa-calendar me-2"></i>Próxima cita: <strong>
                    {{ historia.proxima_cita|date:"d/m/Y" }}</strong>
            </div>
            {% endif %}
        </div>
    </div>

    <!-- Receta -->
    <div class="col-lg-5">
        <div class="panel-card">
            <h6 class="fw-bold mb-4" style="color:#8b5cf6;"><i
                    class="fa-solid fa-prescription-bottle-medical me-2"></i>Receta Médica</h6>
            {% if formset %}
            <form method="post">
                {% csrf_token %}
                {{ formset.management_form }}
                {% for fform in formset %}
                <div class="border rounded-3 p-3 mb-3 position-relative">
                    {% if fform.instance.pk %}
                    <div class="fw-semibold mb-2">{{ fform.instance.medicamento }}</div>
                    {% endif %}
                    <div class="row g-2">
                        <div class="col-12">{{ fform.medicamento }}</div>
                        <div class="col-6">{{ fform.dosis }}</div>
                        <div class="col-6">{{ fform.cantidad }}</div>
                        <div class="col-6">{{ fform.frecuencia }}</div>
                        <div class="col-6">{{ fform.duracion }}</div>
                        {% if fform.DELETE %}
                        <div class="col-12 d-flex align-items-center gap-2 text-danger small">
                            {{ fform.DELETE }} Eliminar este ítem
                        </div>
                        {% endif %}
                        {{ fform.id }}
                    </div>
                </div>
                {% endfor %}
                <button type="submit" class="btn btn-primary rounded-pill w-100"
                    style="background:#8b5cf6;border:none;">
                    <i class="fa-solid fa-floppy-disk me-2"></i>Guardar Receta
                </button>
            </form>
            {% else %}
            <p class="text-muted small">No hay receta disponible.</p>
            {% endif %}
        </div>
    </div>
</div>

<div class="mt-3 d-flex gap-2">
    <a href="{% url 'historia_lista' %}" class="btn btn-outline-secondary rounded-pill"><i
            class="fa-solid fa-arrow-left me-2"></i>Volver</a>
    <a href="{% url 'historia_editar' historia.pk %}" class="btn btn-outline-primary rounded-pill"><i
            class="fa-solid fa-pen me-2"></i>Editar</a>
</div>
{% endblock %}