{% extends 'base.html' %}

{% block title %}Alto Custo (CEAF){% endblock %}

{% block content %}
<!-- Page Header -->
<div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem;">
    <div style="background-color: #f5f3ff; color: #8b5cf6; width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center;">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="24" height="24"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
    </div>
    <div style="flex-grow: 1;">
        <h1 style="color: #0f172a; font-size: 1.5rem; font-weight: 800; margin: 0 0 0.25rem 0;">Medicamentos de Alto Custo (CEAF)</h1>
        <p style="color: #64748b; font-size: 0.95rem; margin: 0;">Componente Especializado da Assistência Farmacêutica — SES/MG — Atualizado: 08/06/2026</p>
    </div>
</div>

<!-- Quick Links Box -->
<div style="background: #faf5ff; border: 1px solid #e9d5ff; border-radius: 12px; padding: 1rem; margin-bottom: 2rem; display: flex; gap: 1rem; flex-wrap: wrap;">
    <a href="#" style="background: #9333ea; color: white; padding: 0.5rem 1rem; border-radius: 8px; text-decoration: none; font-size: 0.9rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.5rem;">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="16" height="16"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3.01" y2="6"></line><line x1="3" y1="12" x2="3.01" y2="12"></line><line x1="3" y1="18" x2="3.01" y2="18"></line></svg>
        Lista Oficial PDF (08/06/2026)
    </a>
    <a href="#" style="background: transparent; color: #9333ea; border: 1px solid #d8b4fe; padding: 0.5rem 1rem; border-radius: 8px; text-decoration: none; font-size: 0.9rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.5rem;">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="16" height="16"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
        Formulários por Doença (SES/MG)
    </a>
    <a href="#" style="background: transparent; color: #9333ea; border: 1px solid #d8b4fe; padding: 0.5rem 1rem; border-radius: 8px; text-decoration: none; font-size: 0.9rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.5rem;">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="16" height="16"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
        LME Editável (padrão)
    </a>
</div>

<!-- Tabs -->
<div style="border-bottom: 1px solid #e2e8f0; margin-bottom: 1.5rem; display: flex; gap: 2rem;">
    <div style="padding-bottom: 0.75rem; border-bottom: 2px solid #9333ea; color: #9333ea; font-weight: 600; cursor: pointer;">
        Medicamentos
    </div>
    <div style="padding-bottom: 0.75rem; color: #64748b; font-weight: 500; cursor: pointer;">
        Formulários por Doença
    </div>
</div>

<!-- Search Input -->
<div style="position: relative; margin-bottom: 1rem;">
    <svg viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="18" height="18" style="position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
    <input type="text" id="search-input" class="form-control" placeholder="Buscar medicamento, condição ou CID..." style="padding-left: 2.75rem; border-radius: 8px; border: 1px solid #e2e8f0; width: 100%; box-sizing: border-box;">
</div>

<p style="font-size: 0.85rem; color: #64748b; margin-bottom: 1rem;"><span id="med-count">{{ medicamentos|length }}</span> medicamento(s) encontrado(s)</p>

<!-- List -->
<div id="meds-list" style="display: flex; flex-direction: column; gap: 0.75rem; padding-bottom: 3rem;">
    {% for m in medicamentos %}
    <div class="med-item" data-search-text="{{ m.nome|lower }} {{ m.indicacao|lower }} {{ (m.cids or '')|lower }}" style="background: white; border: 1px solid #e2e8f0; border-radius: 12px; padding: 1rem 1.25rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem;">
        <div style="display: flex; gap: 0.75rem; align-items: flex-start;">
            <svg viewBox="0 0 24 24" fill="none" stroke="#a855f7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="16" height="16" style="margin-top: 0.25rem; flex-shrink: 0;"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>
            <div>
                <div style="font-weight: 700; color: #1e293b; font-size: 1rem; margin-bottom: 0.25rem;">{{ m.nome }}</div>
                <div style="color: #64748b; font-size: 0.85rem;">{{ m.indicacao }}</div>
            </div>
        </div>
        {% if m.cids %}
        <div style="background: #f3e8ff; color: #7e22ce; padding: 0.25rem 0.75rem; border-radius: 16px; font-size: 0.8rem; font-weight: 600; white-space: nowrap; flex-shrink: 0;">
            {{ m.cids }}
        </div>
        {% endif %}
    </div>
    {% endfor %}
</div>
{% endblock %}

{% block scripts %}
<script>
    document.getElementById('nav-altocusto').classList.add('active');
    
    // Simple inline search script since layout changed from table to div list
    document.getElementById('search-input').addEventListener('input', function(e) {
        const query = e.target.value.toLowerCase().trim();
        const items = document.querySelectorAll('.med-item');
        let visible = 0;
        
        items.forEach(item => {
            const text = item.dataset.searchText || '';
            if (text.includes(query)) {
                item.style.display = '';
                visible++;
            } else {
                item.style.display = 'none';
            }
        });
        
        document.getElementById('med-count').textContent = visible;
    });
</script>
{% endblock %}