{% extends 'app_base.html' %}{% block content %}
<div class="page-head report-page-head"><div><div class="eyebrow">Central de Relatórios</div><h1>Relatórios clínicos, gerenciais e auditoria</h1><p>Escolha um relatório pronto, visualize o painel executivo e imprima em layout A4 profissional.</p></div></div>

<div class="report-category-grid">{% for g in presets %}<section class="card report-category-card"><div class="report-category-title"><div><div class="eyebrow">{{ g.group }}</div><h3>{{ g['items']|length }} relatórios</h3></div><span class="material-symbols-outlined">{% if g.group=='Financeiro' %}monitoring{% elif g.group=='Clínicos' %}clinical_notes{% elif g.group=='Agenda' %}calendar_month{% elif g.group=='Pacientes' %}groups{% elif g.group=='Profissionais' %}medical_information{% elif g.group=='Serviços' %}medical_services{% elif g.group=='Comunicação' %}forum{% else %}fact_check{% endif %}</span></div><div class="report-links">{% for item in g['items'] %}<a class="report-item report-link {{ 'active' if preset_key==item['key'] }}" href="{{ url_for('clinic.reports',preset=item['key']) }}#resultado"><span>{{ item['name'] }}</span><span class="material-symbols-outlined">chevron_right</span></a>{% endfor %}</div></section>{% endfor %}</div>

{% if report_title %}
<section class="report-sheet" id="resultado">
  <header class="report-document-head">
    <div class="report-clinic-brand">
      {% if clinic.theme.logo_url %}<img src="{{ clinic.theme.logo_url }}" alt="{{ clinic.name }}">{% else %}<div class="report-logo-fallback"><span class="material-symbols-outlined">medical_services</span></div>{% endif %}
      <div><h2>{{ clinic.general_settings.display_name or clinic.name }}</h2><p>{% if clinic.general_settings.phone %}{{ clinic.general_settings.phone }}{% endif %}{% if clinic.general_settings.email %} · {{ clinic.general_settings.email }}{% endif %}</p>{% if clinic.general_settings.address %}<small>{{ clinic.general_settings.address }}</small>{% endif %}</div>
    </div>
    <div class="report-document-meta"><span class="report-type">{{ report_group }}</span><h1>{{ report_title }}</h1><p>Emitido em {{ issued_at }}</p></div>
  </header>

  <div class="report-summary-band"><div><span>Período</span><strong>Base atual da clínica</strong></div><div><span>Registros</span><strong>{{ rows|length }}</strong></div><div><span>Ambiente</span><strong>{{ clinic.environment|upper }}</strong></div><div><span>Documento</span><strong>REL-{{ preset_key|upper if preset_key else 'PERSONALIZADO' }}</strong></div></div>

  {% if visualization and visualization.cards %}<div class="report-kpis">{% for label,value,icon in visualization.cards %}<article class="report-kpi"><div class="report-kpi-icon"><span class="material-symbols-outlined">{{ icon }}</span></div><div><small>{{ label }}</small><strong>{{ value }}</strong></div></article>{% endfor %}</div>{% endif %}

  {% if visualization and visualization.chart and visualization.chart.labels %}<div class="report-analytics-grid"><article class="report-panel report-chart-panel"><div class="report-panel-head"><div><span>Análise</span><h3>{{ visualization.chart.label }}</h3></div></div><div class="report-chart-wrap"><canvas id="reportMainChart"></canvas></div></article><article class="report-panel report-insight-panel"><div class="report-panel-head"><div><span>Resumo executivo</span><h3>Leitura rápida</h3></div></div><div class="report-insight-big"><b>{{ rows|length }}</b><span>registro(s) no resultado atual</span></div><p>Os indicadores acima são calculados com os dados registrados na clínica e ajudam a interpretar o relatório antes do detalhamento.</p><div class="report-status-chip"><span class="material-symbols-outlined">verified</span> Relatório gerado pelo ClinicOS</div></article></div>{% endif %}

  <article class="report-panel report-table-panel"><div class="report-panel-head"><div><span>Detalhamento</span><h3>{{ report_title }}</h3></div><div class="actions report-no-print"><a class="btn btn-secondary" target="_blank" href="{{ url_for('clinic.report_document',preset_key=preset_key) }}"><span class="material-symbols-outlined">description</span> Visualizar A4</a><a class="btn btn-primary" href="{{ url_for('clinic.report_pdf',preset_key=preset_key) }}"><span class="material-symbols-outlined">picture_as_pdf</span> Baixar PDF</a></div></div>
  {% if rows %}<div class="table-wrap report-table-wrap"><table class="table report-table"><thead><tr>{% for f in selected_fields %}<th>{{ catalog[dataset].fields.get(f,f) }}</th>{% endfor %}</tr></thead><tbody>{% for row in rows %}<tr>{% for f in selected_fields %}<td>{{ row.get(f,'') }}</td>{% endfor %}</tr>{% endfor %}</tbody></table></div>{% else %}<div class="empty-state report-empty"><span class="material-symbols-outlined">query_stats</span><b>Nenhum dado encontrado para este relatório.</b><p class="muted">Quando houver registros compatíveis, eles aparecerão aqui automaticamente.</p></div>{% endif %}</article>

  <footer class="report-document-footer"><div><b>{{ clinic.general_settings.display_name or clinic.name }}</b><span>{{ clinic.document or '' }}</span></div><div>Documento emitido pelo ClinicOS · {{ issued_at }}</div></footer>
</section>
{% endif %}

<section class="card form-section clinical-builder" style="margin-top:22px"><div class="toolbar"><div><div class="eyebrow">Documento do paciente</div><h2 class="section-title">Relatório clínico estruturado</h2><p class="muted">Modelo documental com identidade da clínica, seções clínicas e impressão A4.</p></div></div>
<form method="post" action="{{ url_for('clinic.clinical_report_preview') }}"><div class="grid-3"><label><span class="label">Tipo</span><select class="input" name="document_type"><option>Relatório clínico</option><option>Evolução clínica</option><option>Relatório de alta</option><option>Encaminhamento</option><option>Declaração</option><option>Atestado</option></select></label><label><span class="label">Paciente</span><select class="input" name="patient_id" required><option value="">Selecione...</option>{% for p in patients %}<option value="{{ p.id }}">{{ p.name }}</option>{% endfor %}</select></label><label><span class="label">Profissional responsável</span><input class="input" name="professional" placeholder="Dr(a). Nome"></label><label><span class="label">Registro profissional</span><input class="input" name="professional_registry" placeholder="CRM/CRP/CRO/UF"></label></div>
<div class="grid-2" style="margin-top:16px">{% for key,label in [('reason','Motivo do atendimento'),('history','Histórico / anamnese'),('assessment','Avaliação atual'),('exams','Exames / procedimentos'),('evolution','Evolução clínica'),('diagnosis','Diagnóstico / hipótese'),('plan','Conduta / plano de tratamento'),('recommendations','Recomendações / orientações'),('next_steps','Próximos passos')] %}<label><span class="label">{{ label }}</span><textarea class="input" name="{{ key }}" rows="4"></textarea></label>{% endfor %}</div><div class="actions" style="margin-top:16px"><button class="btn btn-primary">Visualizar documento A4</button></div></form></section>

<form method="post" class="card form-section report-builder" style="margin-top:20px"><div class="eyebrow">Construtor</div><h2 class="section-title">Relatório personalizado</h2><div class="grid-3"><label><span class="label">Fonte de dados</span><select class="input" name="dataset" onchange="this.form.submit()">{% for key,meta in catalog.items() %}<option value="{{ key }}" {% if dataset==key %}selected{% endif %}>{{ meta.group }} · {{ meta.label }}</option>{% endfor %}</select></label><label><span class="label">Nome do relatório</span><input class="input" name="report_name" placeholder="Ex: Inadimplentes do mês"></label><label><span class="label">Filtro por paciente</span><input class="input" name="filter_patient_name" placeholder="Nome do paciente"></label></div><div style="margin-top:18px"><div class="label">Colunas</div><div class="grid-3">{% for f,label in catalog[dataset].fields.items() %}<label class="checkrow compact"><input type="checkbox" name="fields" value="{{ f }}" {% if f in selected_fields %}checked{% endif %}><span><b>{{ label }}</b></span></label>{% endfor %}</div></div><div class="actions" style="margin-top:18px"><button class="btn btn-primary" name="action" value="run">Gerar</button><button class="btn btn-secondary" name="action" value="save">Salvar modelo</button><button class="btn btn-secondary" formaction="{{ url_for('clinic.report_export') }}">CSV / Excel</button><button class="btn btn-secondary" type="button" disabled title="Use um relatório pronto acima para gerar o documento A4/PDF">PDF no relatório pronto</button></div></form>

<section class="card form-section report-saved" style="margin-top:18px"><h2 class="section-title">Meus modelos salvos</h2><div class="grid-3" style="margin-top:14px">{% for r in saved %}<div class="checkrow"><span style="flex:1"><b>{{ r.name }}</b><small>{{ catalog[r.dataset].label }} · {{ r.fields|length }} colunas</small></span><form method="post" action="{{ url_for('clinic.report_delete',rid=r.id) }}"><button type="button" class="btn btn-danger btn-sm btn-icon" onclick="confirmSubmit(this.form,'Excluir este modelo de relatório?')"><span class="material-symbols-outlined">delete</span></button></form></div>{% else %}<p class="muted">Nenhum modelo salvo ainda.</p>{% endfor %}</div></section>

{% if report_title and visualization and visualization.chart and visualization.chart.labels %}<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.4/dist/chart.umd.min.js"></script><script>
(function(){const el=document.getElementById('reportMainChart');if(!el||!window.Chart)return;const css=getComputedStyle(document.documentElement);const primary=css.getPropertyValue('--brand').trim()||'#08798a', secondary=css.getPropertyValue('--secondary').trim()||'#20bfd0', accent=css.getPropertyValue('--accent').trim()||'#acf847';const type={{ visualization.chart.type|tojson }};new Chart(el,{type:type,data:{labels:{{ visualization.chart.labels|tojson }},datasets:[{label:{{ visualization.chart.label|tojson }},data:{{ visualization.chart.values|tojson }},backgroundColor:type==='doughnut'?[primary,secondary,accent,'#7c8cf8','#e6a23c','#7a8798','#b6c2cf']:primary,borderColor:type==='doughnut'?'#fff':primary,borderWidth:type==='doughnut'?2:1,borderRadius:type==='bar'?6:0}]},options:{responsive:true,maintainAspectRatio:false,plugins:{legend:{display:type==='doughnut',position:'bottom',labels:{usePointStyle:true,boxWidth:8,padding:15}},tooltip:{displayColors:false}},scales:type==='doughnut'?undefined:{x:{grid:{display:false},ticks:{color:'#667085'}},y:{beginAtZero:true,grid:{color:'rgba(120,130,150,.12)'},ticks:{color:'#667085'}}}}});})();
</script>{% endif %}
{% endblock %}