{% extends 'base.html' %}

{% block title %}Medicamentos Estratégicos{% endblock %}

{% block content %}
<!-- Page Header -->
<div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem;">
    <div style="background-color: #fff7ed; color: #ea580c; 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"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path><polyline points="9 12 11 14 15 10"></polyline></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 Estratégicos</h1>
        <p style="color: #64748b; font-size: 0.95rem; margin: 0;">Hanseníase, Tuberculose, Influenza, Parasitoses e outros programas estratégicos do SUS</p>
    </div>
</div>

<!-- Alert Box -->
<div style="background: #fffbeb; border: 1px solid #fdba74; border-radius: 12px; padding: 1.25rem; margin-bottom: 2rem; color: #c2410c; font-size: 0.95rem; line-height: 1.5;">
    Medicamentos do Componente Estratégico são fornecidos pelo Ministério da Saúde e distribuídos pelo estado. Dispensação mediante diagnóstico confirmado e solicitação em unidade de saúde credenciada.
</div>

<!-- Filter Bar -->
<div style="display: flex; gap: 1rem; margin-bottom: 2rem; align-items: center; overflow-x: auto; padding-bottom: 0.5rem; white-space: nowrap; scrollbar-width: none;">
    <div style="position: relative; min-width: 250px;">
        <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 ou programa..." style="padding-left: 2.75rem; border-radius: 20px; border: 1px solid #e2e8f0; width: 100%; box-sizing: border-box;">
    </div>
    
    <div style="display: flex; gap: 0.5rem;" id="filter-pills">
        <button class="filter-pill active" data-filter="all" style="background: #0f766e; color: white; border: 1px solid #0f766e; padding: 0.5rem 1rem; border-radius: 20px; font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: all 0.2s;">Todos</button>
        
        {% set programas = medicamentos | map(attribute='programa') | unique | list %}
        {% for prog in programas if prog %}
            <button class="filter-pill" data-filter="{{ prog }}" style="background: white; color: #64748b; border: 1px solid #cbd5e1; padding: 0.5rem 1rem; border-radius: 20px; font-weight: 500; font-size: 0.9rem; cursor: pointer; transition: all 0.2s;">{{ prog }}</button>
        {% endfor %}
    </div>
</div>

<!-- Medications Grid -->
<div id="meds-grid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(450px, 1fr)); gap: 1.5rem; margin-bottom: 3rem;">
    {% for m in medicamentos %}
    <div class="med-card" data-programa="{{ m.programa }}" data-search-text="{{ m.nome|lower }} {{ m.posologia|default('', true)|lower }} {{ m.indicacao|default('', true)|lower }}" style="background: white; border: 1px solid #e2e8f0; border-radius: 12px; padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02);">
        <div style="display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;">
            <h3 style="font-size: 1.1rem; color: #1e293b; font-weight: 700; margin: 0; line-height: 1.3;">{{ m.nome }}</h3>
            {% if m.programa %}
            <span style="background: #fff7ed; color: #ea580c; border: 1px solid #fdba74; padding: 0.25rem 0.75rem; border-radius: 16px; font-size: 0.8rem; font-weight: 600; white-space: nowrap; flex-shrink: 0;">{{ m.programa }}</span>
            {% endif %}
        </div>
        
        <div style="display: flex; flex-direction: column; gap: 0.75rem;">
            <div>
                <div style="font-size: 0.75rem; color: #94a3b8; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.25rem;">Posologia</div>
                <div style="font-size: 0.9rem; color: #475569; line-height: 1.5;">{{ m.posologia or '—' }}</div>
            </div>
            <div>
                <div style="font-size: 0.75rem; color: #94a3b8; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.25rem;">Indicação</div>
                <div style="font-size: 0.9rem; color: #475569; line-height: 1.5;">{{ m.indicacao or '—' }}</div>
            </div>
        </div>
    </div>
    {% endfor %}
</div>
{% endblock %}

{% block scripts %}
<script>
    document.getElementById('nav-estrategicos').classList.add('active');
    
    // Search and Filter Logic
    const searchInput = document.getElementById('search-input');
    const filterPills = document.querySelectorAll('.filter-pill');
    const medCards = document.querySelectorAll('.med-card');
    
    let currentFilter = 'all';
    
    function filterCards() {
        const query = searchInput.value.toLowerCase().trim();
        
        medCards.forEach(card => {
            const text = card.dataset.searchText || '';
            const programa = card.dataset.programa || '';
            
            const matchesSearch = text.includes(query);
            const matchesFilter = currentFilter === 'all' || programa === currentFilter;
            
            if (matchesSearch && matchesFilter) {
                card.style.display = '';
            } else {
                card.style.display = 'none';
            }
        });
    }
    
    searchInput.addEventListener('input', filterCards);
    
    filterPills.forEach(pill => {
        pill.addEventListener('click', () => {
            // Update active styling
            filterPills.forEach(p => {
                p.classList.remove('active');
                p.style.background = 'white';
                p.style.color = '#64748b';
                p.style.border = '1px solid #cbd5e1';
            });
            
            pill.classList.add('active');
            pill.style.background = '#0f766e';
            pill.style.color = 'white';
            pill.style.border = '1px solid #0f766e';
            
            currentFilter = pill.dataset.filter;
            filterCards();
        });
    });
</script>

<style>
    /* Hide scrollbar for the filter bar but keep functionality */
    #filter-pills::-webkit-scrollbar {
        display: none;
    }
    @media (max-width: 768px) {
        #meds-grid {
            grid-template-columns: 1fr !important;
        }
    }
</style>
{% endblock %}