{% extends 'base.html' %}

{% block content %}
<div class="container">
    <div class="row">
        <div class="col-12">
            <div class="card shadow-sm mt-4">
                <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                    <h4>Comparativo - {{ empresa.nome_fantasia }}</h4>
                    <div>
                        <a href="{{ url_for('visualizacao.visualizar_empresa', empresa_id=empresa.id) }}" class="btn btn-light me-2">
                            <i class="fas fa-chart-bar"></i> Dashboard
                        </a>
                        <div class="btn-group">
                            <button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                                <i class="fas fa-file-export"></i> Exportar
                            </button>
                            <ul class="dropdown-menu dropdown-menu-end">
                                <li>
                                    <a class="dropdown-item" href="{{ url_for('visualizacao.exportar_pdf', empresa_id=empresa.id) }}">
                                        <i class="fas fa-file-pdf text-danger"></i> PDF
                                    </a>
                                </li>
                                <li>
                                    <a class="dropdown-item" href="{{ url_for('visualizacao.exportar_excel', empresa_id=empresa.id) }}">
                                        <i class="fas fa-file-excel text-success"></i> Excel
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="alert alert-info mb-4">
                        <h5><i class="fas fa-info-circle"></i> Análise Comparativa</h5>
                        <p>Este dashboard apresenta uma comparação entre os dados da empresa <strong>{{ empresa.nome_fantasia }}</strong> e a média de outras empresas do mesmo segmento e faixa de faturamento.</p>
                    </div>
                    
                    {% if dados %}
                        <div class="row">
                            <div class="col-md-12 mb-4">
                                <div class="card">
                                    <div class="card-header bg-primary text-white">
                                        <h5 class="mb-0">Comparativo por Pergunta</h5>
                                    </div>
                                    <div class="card-body text-center">
                                        {% if graficos.comparativo_barras %}
                                            <img src="data:image/png;base64,{{ graficos.comparativo_barras }}" class="img-fluid" alt="Gráfico Comparativo">
                                        {% else %}
                                            <div class="alert alert-warning">
                                                Não há dados suficientes para gerar o gráfico comparativo.
                                            </div>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        {% if graficos.comparativo_radar %}
                            <div class="row">
                                <div class="col-md-12 mb-4">
                                    <div class="card">
                                        <div class="card-header bg-primary text-white">
                                            <h5 class="mb-0">Comparativo por Assunto</h5>
                                        </div>
                                        <div class="card-body text-center">
                                            <img src="data:image/png;base64,{{ graficos.comparativo_radar }}" class="img-fluid" alt="Gráfico Radar">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {% endif %}
                        
                        <div class="card mb-4">
                            <div class="card-header bg-primary text-white">
                                <h5 class="mb-0">Dados Comparativos Detalhados</h5>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-striped table-hover">
                                        <thead>
                                            <tr>
                                                <th>Pergunta</th>
                                                <th>{{ empresa.nome_fantasia }}</th>
                                                <th>Média do Segmento</th>
                                                <th>Diferença</th>
                                                <th>Análise</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% for pergunta, info in dados.items() %}
                                                <tr>
                                                    <td>{{ pergunta }}</td>
                                                    <td class="text-center">{{ info.valor_empresa }}</td>
                                                    <td class="text-center">{{ "%.2f"|format(info.media_similares) }}</td>
                                                    <td class="text-center">
                                                        {% set diff = info.valor_empresa - info.media_similares %}
                                                        <span class="badge {% if diff > 0 %}bg-success{% elif diff < 0 %}bg-danger{% else %}bg-secondary{% endif %}">
                                                            {{ "%.2f"|format(diff) }}
                                                        </span>
                                                    </td>
                                                    <td>
                                                        {% set diff_percent = (info.valor_empresa / info.media_similares * 100) - 100 if info.media_similares > 0 else 0 %}
                                                        {% if diff_percent > 10 %}
                                                            <span class="text-success"><i class="fas fa-arrow-up"></i> {{ "%.1f"|format(diff_percent) }}% acima da média</span>
                                                        {% elif diff_percent < -10 %}
                                                            <span class="text-danger"><i class="fas fa-arrow-down"></i> {{ "%.1f"|format(-diff_percent) }}% abaixo da média</span>
                                                        {% else %}
                                                            <span class="text-secondary"><i class="fas fa-equals"></i> Próximo da média</span>
                                                        {% endif %}
                                                    </td>
                                                </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    {% else %}
                        <div class="alert alert-warning">
                            <p>Não há dados suficientes para realizar uma análise comparativa. É necessário que existam outras empresas do mesmo segmento e faixa de faturamento com respostas cadastradas.</p>
                        </div>
                    {% endif %}
                    
                    <div class="mt-4">
                        <a href="{{ url_for('visualizacao.visualizar_empresa', empresa_id=empresa.id) }}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left"></i> Voltar para Dashboard
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}