{% extends "dashboard/base_dashboard.html" %}

{% block title %}Painel Doutora — Dra. Mariela{% endblock %}
{% block panel_title %}Painel da Doutora{% endblock %}

{% block panel_content %}
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-6 mb-8">
    <!-- Agenda del Día -->
    <div class="bg-white rounded-xl p-6 border border-gray-100 shadow-sm hover:shadow-md transition-shadow">
        <div class="w-12 h-12 bg-rosa-bg rounded-xl flex items-center justify-center mb-4">
            <svg class="w-6 h-6 text-rosa" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
        </div>
        <h3 class="font-poppins font-semibold text-dark text-lg mb-1">Agenda do Dia</h3>
        <p class="text-gray-400 text-sm">Consultas programadas para hoje</p>
        <p class="text-3xl font-bold text-rosa mt-3">{{ citas_hoy }}</p>
    </div>

    <!-- Gestión de Citas -->
    <div class="bg-white rounded-xl p-6 border border-gray-100 shadow-sm hover:shadow-md transition-shadow">
        <div class="w-12 h-12 bg-dorado/10 rounded-xl flex items-center justify-center mb-4">
            <svg class="w-6 h-6 text-dorado" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/></svg>
        </div>
        <h3 class="font-poppins font-semibold text-dark text-lg mb-1">Gestão Consultas</h3>
        <p class="text-gray-400 text-sm">Total de consultas pendentes</p>
        <p class="text-3xl font-bold text-dorado mt-3">{{ citas_pendientes }}</p>
    </div>

    <!-- Configurar Horarios -->
    <div class="bg-white rounded-xl p-6 border border-gray-100 shadow-sm hover:shadow-md transition-shadow">
        <div class="w-12 h-12 bg-blue-50 rounded-xl flex items-center justify-center mb-4">
            <svg class="w-6 h-6 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
        </div>
        <h3 class="font-poppins font-semibold text-dark text-lg mb-1">Horários</h3>
        <p class="text-gray-400 text-sm">Configurar disponibilidade</p>
        <p class="text-sm text-gray-500 mt-3">Lun-Vie · 08:00-17:00</p>
    </div>

    <!-- Valoraciones -->
    <a href="{% url 'ratings:moderacion' %}" class="bg-white rounded-xl p-6 border border-gray-100 shadow-sm hover:shadow-md transition-shadow block">
        <div class="w-12 h-12 bg-amber-50 rounded-xl flex items-center justify-center mb-4">
            <svg class="w-6 h-6 text-amber-500" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
        </div>
        <h3 class="font-poppins font-semibold text-dark text-lg mb-1">Avaliações</h3>
        <p class="text-gray-400 text-sm">Moderar depoimentos</p>
        <p class="text-3xl font-bold text-amber-500 mt-3">{{ valoraciones_pendientes }}</p>
    </a>

    <!-- Finanzas -->
    <a href="{% url 'finance:dashboard' %}" class="bg-white rounded-xl p-6 border border-gray-100 shadow-sm hover:shadow-md transition-shadow block">
        <div class="w-12 h-12 bg-green-50 rounded-xl flex items-center justify-center mb-4">
            <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
        </div>
        <h3 class="font-poppins font-semibold text-dark text-lg mb-1">Finanças</h3>
        <p class="text-gray-400 text-sm">Receitas hoje</p>
        <p class="text-2xl font-bold text-green-600 mt-3">{{ ingresos_hoy|floatformat:2|default:"0.00" }} <span class="text-xs font-normal text-gray-400">Kz</span></p>
    </a>
</div>

<div class="bg-white rounded-xl p-8 border border-gray-100 shadow-sm text-center">
    <svg class="w-16 h-16 text-gray-200 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
    <h3 class="font-poppins font-semibold text-gray-400 text-lg mb-2">Calendário de Consultas</h3>
    <p class="text-gray-300 text-sm mb-4">Gira a sua agenda completa a partir do calendário.</p>
    <div class="flex flex-wrap items-center justify-center gap-3">
        <a href="{% url 'appointments:calendario' %}" class="btn-dorado inline-flex items-center gap-2 px-6 py-3 bg-dorado text-white font-semibold rounded-[25px] shadow-md text-sm">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
            Ver Calendário
        </a>
        <a href="{% url 'appointments:horarios' %}" class="inline-flex items-center gap-2 px-6 py-3 border-[1.5px] border-rosa text-rosa font-semibold rounded-[25px] text-sm hover:bg-rosa hover:text-white transition-all duration-300">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            Gerir Horários
        </a>
        <a href="{% url 'reports:reporte_diario_pdf' %}" class="inline-flex items-center gap-2 px-6 py-3 bg-rosa text-white font-semibold rounded-[25px] shadow-md text-sm hover:bg-rosa/90 transition">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
            Relatório do Dia (PDF)
        </a>
    </div>
</div>
{% endblock %}