{% extends "base.html" %}

{% block title %}Certificados Digitais - CapeSystem{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1><i class="bi bi-shield-check"></i> Certificados Digitais</h1>
    <div>
        <a href="{{ url_for('enviar_alertas_certificados') }}" class="btn btn-warning">
            <i class="bi bi-bell"></i> Alertas Automáticos
        </a>
        <a href="{{ url_for('relatorio_certificados') }}" class="btn btn-success">
            <i class="bi bi-file-earmark-text"></i> Relatório Completo
        </a>
    </div>
</div>

{# Estatísticas Rápidas #}
<div class="row mb-4">
    <div class="col-md-3">
        <div class="card text-center">
            <div class="card-body">
                <h5 class="text-muted">Ativos</h5>
                <h2 class="text-success">{{ total_ativos }}</h2>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card text-center border-danger">
            <div class="card-body">
                <h5 class="text-danger">Vencidos</h5>
                <h2 class="text-danger">{{ total_vencidos }}</h2>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card text-center border-warning">
            <div class="card-body">
                <h5 class="text-danger">Críticos</h5>
                <h2 class="text-danger">{{ total_critico }}</h2>
                <small class="text-muted">≤30 dias</small>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card text-center border-warning">
            <div class="card-body">
                <h5 class="text-warning">Atenção</h5>
                <h2 class="text-warning">{{ total_atencao }}</h2>
                <small class="text-muted">≤60 dias</small>
            </div>
        </div>
    </div>
</div>

{# Filtros #}
<div class="card mb-4">
    <div class="card-header bg-primary text-white">
        <h5 class="mb-0"><i class="bi bi-funnel"></i> Filtros</h5>
    </div>
    <div class="card-body">
        <form method="GET" action="{{ url_for('certificados') }}" class="row g-3">
            <div class="col-md-4">
                <label for="status" class="form-label">Status</label>
                <select class="form-select" id="status" name="status" onchange="this.form.submit()">
                    <option value="todos" {% if status_filtro == 'todos' %}selected{% endif %}>Todos</option>
                    <option value="ativo" {% if status_filtro == 'ativo' %}selected{% endif %}>Ativo</option>
                    <option value="renovado" {% if status_filtro == 'renovado' %}selected{% endif %}>Renovado</option>
                    <option value="cancelado" {% if status_filtro == 'cancelado' %}selected{% endif %}>Cancelado</option>
                </select>
            </div>
            <div class="col-md-4">
                <label for="alerta" class="form-label">Alerta de Vencimento</label>
                <select class="form-select" id="alerta" name="alerta" onchange="this.form.submit()">
                    <option value="" {% if not alerta_filtro %}selected{% endif %}>Todos</option>
                    <option value="vencido" {% if alerta_filtro == 'vencido' %}selected{% endif %}>Vencido</option>
                    <option value="critico" {% if alerta_filtro == 'critico' %}selected{% endif %}>Crítico (≤30 dias)</option>
                    <option value="atencao" {% if alerta_filtro == 'atencao' %}selected{% endif %}>Atenção (≤60 dias)</option>
                    <option value="ok" {% if alerta_filtro == 'ok' %}selected{% endif %}>OK</option>
                </select>
            </div>
            <div class="col-md-4">
                <label class="form-label">&nbsp;</label>
                <a href="{{ url_for('certificados') }}" class="btn btn-secondary w-100">
                    <i class="bi bi-x-circle"></i> Limpar Filtros
                </a>
            </div>
        </form>
    </div>
</div>

{# Barra de Busca #}
<div class="card mb-4">
    <div class="card-body">
        <div class="input-group">
            <span class="input-group-text"><i class="bi bi-search"></i></span>
            <input type="text" class="form-control" id="searchInput" placeholder="Buscar por cliente, tipo, autoridade certificadora...">
        </div>
    </div>
</div>

{# Lista de Certificados #}
<div class="card">
    <div class="card-header bg-secondary text-white">
        <h5 class="mb-0"><i class="bi bi-list"></i> Certificados ({{ certificados|length }})</h5>
    </div>
    <div class="card-body">
        {% if certificados %}
        <div class="table-responsive">
            <table class="table table-hover" id="certificadosTable">
                <thead>
                    <tr>
                        <th>Cliente</th>
                        <th>Tipo</th>
                        <th>Autoridade Certificadora</th>
                        <th>Data Venda</th>
                        <th>Data Vencimento</th>
                        <th class="text-center">Status</th>
                        <th class="text-center">Alerta</th>
                        <th class="text-end">Valor</th>
                        <th class="text-center">Ações</th>
                    </tr>
                </thead>
                <tbody>
                    {% for cert in certificados %}
                    <tr>
                        <td>
                            <strong>{{ cert.pessoa.nome }}</strong>
                            {% if cert.pessoa.telefone %}
                            <br><small class="text-muted"><i class="bi bi-telephone"></i> {{ cert.pessoa.telefone }}</small>
                            {% endif %}
                        </td>
                        <td>{{ cert.tipo }}</td>
                        <td><small>{{ cert.autoridade_certificadora }}</small></td>
                        <td>{{ cert.data_venda.strftime('%d/%m/%Y') }}</td>
                        <td>
                            {{ cert.data_vencimento.strftime('%d/%m/%Y') }}
                            <br><small class="text-muted">{{ cert.dias_para_vencer() }} dias</small>
                        </td>
                        <td class="text-center">
                            {% if cert.status == 'ativo' %}
                                <span class="badge bg-success">Ativo</span>
                            {% elif cert.status == 'renovado' %}
                                <span class="badge bg-info">Renovado</span>
                            {% elif cert.status == 'cancelado' %}
                                <span class="badge bg-danger">Cancelado</span>
                            {% else %}
                                <span class="badge bg-secondary">{{ cert.status }}</span>
                            {% endif %}
                        </td>
                        <td class="text-center">
                            {% set alerta = cert.alerta_vencimento() %}
                            {% if alerta == 'vencido' %}
                                <span class="badge bg-danger">
                                    <i class="bi bi-exclamation-triangle-fill"></i> Vencido
                                </span>
                            {% elif alerta == 'critico' %}
                                <span class="badge bg-warning text-dark">
                                    <i class="bi bi-exclamation-circle-fill"></i> Crítico
                                </span>
                            {% elif alerta == 'atencao' %}
                                <span class="badge bg-warning text-dark">
                                    <i class="bi bi-exclamation-triangle"></i> Atenção
                                </span>
                            {% else %}
                                <span class="badge bg-success">
                                    <i class="bi bi-check-circle"></i> OK
                                </span>
                            {% endif %}
                        </td>
                        <td class="text-end">
                            <strong>R$ {{ "%.2f"|format(cert.valor_venda or 0) }}</strong>
                        </td>
                        <td class="text-center">
                            <div class="dropdown action-menu">
                                <button class="action-menu-btn" type="button" data-bs-toggle="dropdown">
                                    <i class="bi bi-three-dots-vertical"></i>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-end">
                                    <li><a class="dropdown-item" href="{{ url_for('ver_pessoa', id=cert.pessoa_id) }}"><i class="bi bi-person-fill text-info"></i> Ver Cliente</a></li>
                                    <li><a class="dropdown-item" href="{{ url_for('editar_certificado', id=cert.id) }}"><i class="bi bi-pencil-fill text-warning"></i> Editar</a></li>
                                </ul>
                            </div>
                            {% if cert.status == 'ativo' %}
                            <button type="button" class="btn btn-sm btn-success" data-bs-toggle="modal" data-bs-target="#renovarModal{{ cert.id }}" title="Renovar">
                                <i class="bi bi-arrow-repeat"></i>
                            </button>
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <div class="alert alert-info">
            <i class="bi bi-info-circle"></i> Nenhum certificado encontrado.
        </div>
        {% endif %}
    </div>
</div>

{# JavaScript para busca em tempo real #}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('searchInput');
    const table = document.getElementById('certificadosTable');
    
    if (searchInput && table) {
        searchInput.addEventListener('keyup', function() {
            const filter = this.value.toLowerCase();
            const rows = table.getElementsByTagName('tbody')[0].getElementsByTagName('tr');
            
            for (let i = 0; i < rows.length; i++) {
                const row = rows[i];
                const text = row.textContent.toLowerCase();
                
                if (text.indexOf(filter) > -1) {
                    row.style.display = '';
                } else {
                    row.style.display = 'none';
                }
            }
        });
    }
});
</script>

{% endblock %}