{% extends 'base.html' %}

{% block title %}Medicamentos{% endblock %}

{% block content %}
<!-- Page Header -->
<div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem;">
    <div style="background-color: #ecfdf5; color: #10b981; 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="M10.5 20.5l-6-6a4.5 4.5 0 0 1 6.5-6.5l6 6a4.5 4.5 0 0 1-6.5 6.5z"></path><line x1="14" y1="9.5" x2="9.5" y2="14"></line></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</h1>
        <p style="color: #64748b; font-size: 0.95rem; margin: 0;">{{ medicamentos|length }} medicamentos cadastrados</p>
    </div>
    {% if session.get('role') == 'admin' %}
        <button id="btn-open-cadastrar" class="btn btn-primary" style="border-radius: 8px;">
            ➕ Cadastrar Medicamento
        </button>
    {% endif %}
</div>

<!-- Search and Filter Bar -->
<div style="background: #fff; border: 1px solid #f1f5f9; border-radius: 12px; padding: 1rem; margin-bottom: 2rem; display: flex; gap: 1rem; flex-wrap: wrap; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02);">
    <div style="position: relative; flex-grow: 1; min-width: 300px;">
        <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..." style="padding-left: 2.75rem; border-radius: 8px; border: 1px solid #e2e8f0; width: 100%; box-sizing: border-box;">
    </div>
    
    <div style="display: flex; gap: 0.5rem; min-width: 200px;">
        <div style="display: flex; align-items: center; justify-content: center; padding: 0 0.75rem; border: 1px solid #e2e8f0; border-radius: 8px; background: #f8fafc; color: #64748b;">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="16" height="16"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon></svg>
        </div>
        <select id="classification-filter" class="form-control" style="border-radius: 8px; border: 1px solid #e2e8f0; min-width: 180px;">
            <option value="">Todas as Classes</option>
            {% for c in classifications %}
                <option value="{{ c.classificacao }}">{{ c.classificacao }}</option>
            {% endfor %}
        </select>
    </div>
    
    <div style="min-width: 150px;">
        <select id="status-filter" class="form-control" style="border-radius: 8px; border: 1px solid #e2e8f0; width: 100%;">
            <option value="">Todos</option>
            <option value="Disponível">Disponível</option>
            <option value="Estoque baixo">Estoque baixo</option>
            <option value="Aguardando entrega">Aguardando entrega</option>
            <option value="Farmácia Popular">Farmácia Popular</option>
            <option value="Indisponível">Indisponível</option>
        </select>
    </div>
</div>

<!-- Medications Grid -->
<div id="meds-container">
    {% for class_name, items in medicamentos|groupby('classificacao') %}
    <div class="med-group" data-classification="{{ class_name }}">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid #f1f5f9;">
            <h2 style="font-size: 1.1rem; color: #0f172a; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 0.5rem;">
                <span style="color: #0d9488;">•</span> {{ class_name }}
            </h2>
            <span class="count-badge" style="font-size: 0.8rem; color: #64748b; background: #f1f5f9; padding: 0.15rem 0.6rem; border-radius: 12px;"><span class="group-count">{{ items|length }}</span> itens</span>
        </div>
        
        <div class="med-cards-grid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; margin-bottom: 2.5rem;">
            {% for m in items %}
            <div class="med-card" data-id="{{ m.id }}" data-status="{{ m.status }}" data-search-text="{{ m.nome|lower }} {{ m.posologia|default('', true)|lower }} {{ m.indicacao|default('', true)|lower }}" style="background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; transition: box-shadow 0.2s;">
                <div style="display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem;">
                    <h4 style="font-size: 1rem; color: #1e293b; font-weight: 700; margin: 0; line-height: 1.3;">{{ m.nome }}</h4>
                    {% if session.get('role') == 'admin' %}
                    <button class="btn-edit-status" data-id="{{ m.id }}" data-nome="{{ m.nome }}" data-status="{{ m.status }}" style="background: transparent; border: none; cursor: pointer; color: #94a3b8; padding: 0.25rem;">
                        <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="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
                    </button>
                    {% endif %}
                </div>
                
                <div>
                    <div style="font-size: 0.7rem; 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: #64748b; line-height: 1.4;">{{ m.posologia or '—' }}</div>
                </div>
                
                <div style="margin-top: auto; padding-top: 0.5rem;">
                    <span class="badge-status {% if m.status == 'Disponível' %}status-disponivel{% elif m.status == 'Indisponível' %}status-indisponivel{% elif m.status == 'Estoque baixo' %}status-baixo{% elif m.status == 'Aguardando entrega' %}status-aguardando{% elif m.status == 'Farmácia Popular' %}status-farmacia-popular{% endif %}" style="display: inline-flex; align-items: center; gap: 0.3rem;">
                        {% if m.status == 'Disponível' %}
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="12" height="12"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
                        {% else %}
                        <span style="width: 6px; height: 6px; border-radius: 50%; background-color: currentColor;"></span>
                        {% endif %}
                        {{ m.status }}
                    </span>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endfor %}
</div>

<!-- MODAL: Alterar Status (Admin Only) -->
{% if session.get('role') == 'admin' %}
<dialog id="edit-status-dialog">
    <div class="dialog-header">
        <h3>Alterar Status</h3>
        <button class="dialog-close" aria-label="Fechar">&times;</button>
    </div>
    
    <form id="edit-status-form">
        <input type="hidden" id="edit-med-id" name="medicamento_id">
        <p style="margin-bottom: 1.25rem; font-size: 0.95rem;">
            Medicamento: <strong id="edit-med-nome" style="color: var(--primary);"></strong>
        </p>
        
        <div class="form-group">
            <label>Selecione o novo status de estoque:</label>
            
            <div style="display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.5rem;">
                <label style="display: flex; align-items: center; gap: 0.5rem; font-weight: normal; cursor: pointer;">
                    <input type="radio" name="novo_status" value="Disponível" style="accent-color: var(--status-disponivel-text);">
                    <span class="badge-status status-disponivel" style="flex-grow: 0;">Disponível</span>
                </label>
                
                <label style="display: flex; align-items: center; gap: 0.5rem; font-weight: normal; cursor: pointer;">
                    <input type="radio" name="novo_status" value="Estoque baixo" style="accent-color: var(--status-baixo-text);">
                    <span class="badge-status status-baixo" style="flex-grow: 0;">Estoque baixo</span>
                </label>
                
                <label style="display: flex; align-items: center; gap: 0.5rem; font-weight: normal; cursor: pointer;">
                    <input type="radio" name="novo_status" value="Aguardando entrega" style="accent-color: var(--status-aguardando-text);">
                    <span class="badge-status status-aguardando" style="flex-grow: 0;">Aguardando entrega</span>
                </label>
                
                <label style="display: flex; align-items: center; gap: 0.5rem; font-weight: normal; cursor: pointer;">
                    <input type="radio" name="novo_status" value="Farmácia Popular" style="accent-color: var(--status-farmacia-popular-text);">
                    <span class="badge-status status-farmacia-popular" style="flex-grow: 0;">Farmácia Popular</span>
                </label>
                
                <label style="display: flex; align-items: center; gap: 0.5rem; font-weight: normal; cursor: pointer;">
                    <input type="radio" name="novo_status" value="Indisponível" style="accent-color: var(--status-indisponivel-text);">
                    <span class="badge-status status-indisponivel" style="flex-grow: 0;">Indisponível</span>
                </label>
            </div>
        </div>
        
        <div class="dialog-buttons">
            <button type="button" class="btn btn-secondary btn-cancel">Cancelar</button>
            <button type="submit" class="btn btn-primary">Confirmar</button>
        </div>
    </form>
</dialog>

<!-- MODAL: Cadastrar Medicamento (Admin Only) -->
<dialog id="cadastrar-med-dialog">
    <div class="dialog-header">
        <h3>Cadastrar Novo Medicamento</h3>
        <button class="dialog-close" aria-label="Fechar">&times;</button>
    </div>
    
    <form id="cadastrar-med-form">
        <div class="form-group">
            <label for="cad-nome">Nome + Apresentação *</label>
            <input type="text" id="cad-nome" class="form-control" placeholder="Ex: Dipirona 500mg cp" required>
        </div>
        
        <div class="form-group">
            <label for="cad-classificacao">Classe Farmacológica *</label>
            <input type="text" id="cad-classificacao" class="form-control" placeholder="Ex: ANALGÉSICOS E ANTIPIRÉTICOS" list="dl-classificacoes" required>
            <datalist id="dl-classificacoes">
                {% for c in classifications %}
                    <option value="{{ c.classificacao }}"></option>
                {% endfor %}
            </datalist>
        </div>
        
        <div class="form-group">
            <label for="cad-posologia">Posologia Padrão</label>
            <textarea id="cad-posologia" class="form-control" rows="2" placeholder="Ex: 500-1000mg a cada 6-8h"></textarea>
        </div>
        
        <div class="form-group">
            <label for="cad-indicacao">Indicação</label>
            <input type="text" id="cad-indicacao" class="form-control" placeholder="Ex: Dor e febre">
        </div>
        
        <div class="form-group">
            <label for="cad-status">Status de Estoque Inicial</label>
            <select id="cad-status" class="form-control">
                <option value="Disponível">Disponível</option>
                <option value="Estoque baixo">Estoque baixo</option>
                <option value="Aguardando entrega">Aguardando entrega</option>
                <option value="Farmácia Popular">Farmácia Popular</option>
                <option value="Indisponível">Indisponível</option>
            </select>
        </div>
        
        <div class="dialog-buttons">
            <button type="button" class="btn btn-secondary btn-cancel">Cancelar</button>
            <button type="submit" class="btn btn-primary">Salvar</button>
        </div>
    </form>
</dialog>
{% endif %}
{% endblock %}

{% block scripts %}
<script>
    document.getElementById('nav-meds').classList.add('active');
</script>
{% endblock %}