{% extends "admin/layout.twig" %}

{% block title %}Administração - Configurações{% endblock %}

{% block header_title %}Configurações do Sistema{% endblock %}

{% block extra_css %}
    .settings-section {
        margin-bottom: 30px;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 20px;
        background: #fafafa;
    }
    .settings-section h3 {
        margin-top: 0;
        margin-bottom: 20px;
        border-bottom: 2px solid #3498db;
        padding-bottom: 10px;
        color: #2c3e50;
    }
    .file-preview {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-top: 10px;
    }
    .file-preview img {
        max-width: 100px;
        max-height: 100px;
        border: 1px solid #ccc;
        border-radius: 4px;
        background: #fff;
        padding: 5px;
    }
    .success-alert {
        background: #d4edda;
        color: #155724;
        padding: 15px;
        border: 1px solid #c3e6cb;
        border-radius: 4px;
        margin-bottom: 20px;
    }
{% endblock %}

{% block content %}
    <div class="content-container">
        {% if _get.success %}
            <div class="success-alert">
                Configurações salvas com sucesso!
            </div>
        {% endif %}

        <form action="/admin/configuracoes" method="POST" enctype="multipart/form-data">
            
            <div class="settings-section">
                <h3>Identidade Visual</h3>
                
                <div class="form-group">
                    <label for="app_name">Nome do Aplicativo</label>
                    <input type="text" id="app_name" name="app_name" value="{{ settings.app_name }}" required>
                </div>
                
                <div class="form-group">
                    <label for="logo_file">Logotipo (Sidebar)</label>
                    <input type="file" id="logo_file" name="logo_file" accept="image/*">
                    {% if settings.logo_url %}
                        <div class="file-preview">
                            <img src="{{ settings.logo_url }}" alt="Logo Atual">
                            <span style="color: #666; font-size: 0.9em;">Logo atual configurado.</span>
                        </div>
                    {% endif %}
                </div>

                <div class="form-group">
                    <label for="favicon_file">Favicon (Ícone do Navegador)</label>
                    <input type="file" id="favicon_file" name="favicon_file" accept="image/png, image/jpeg, image/x-icon, image/svg+xml">
                    {% if settings.favicon_url %}
                        <div class="file-preview">
                            <img src="{{ settings.favicon_url }}" alt="Favicon Atual" style="max-width: 32px; max-height: 32px;">
                            <span style="color: #666; font-size: 0.9em;">Favicon atual configurado.</span>
                        </div>
                    {% endif %}
                </div>
            </div>
            
            <div class="settings-section">
                <h3>Configurações de E-mail (SMTP)</h3>
                <p style="color: #666; font-size: 0.9em; margin-bottom: 15px;">Estes dados serão utilizados para o disparo de ingressos e comunicações via e-mail.</p>
                
                <div class="form-group">
                    <label for="smtp_host">Servidor SMTP (Host)</label>
                    <input type="text" id="smtp_host" name="smtp_host" value="{{ settings.smtp_host }}" placeholder="ex: smtp.mailtrap.io">
                </div>
                
                <div class="form-group">
                    <label for="smtp_port">Porta SMTP</label>
                    <input type="text" id="smtp_port" name="smtp_port" value="{{ settings.smtp_port }}" placeholder="ex: 2525">
                </div>
                
                <div class="form-group">
                    <label for="smtp_user">Usuário SMTP</label>
                    <input type="text" id="smtp_user" name="smtp_user" value="{{ settings.smtp_user }}">
                </div>
                
                <div class="form-group">
                    <label for="smtp_pass">Senha SMTP</label>
                    <input type="password" id="smtp_pass" name="smtp_pass" value="{{ settings.smtp_pass }}">
                </div>
            </div>

            <div class="form-group">
                <button type="submit" class="btn btn-success" style="font-size: 1.1em; padding: 10px 20px;">Salvar Configurações</button>
            </div>
        </form>

        {% if env_vars %}
        <div class="settings-section" style="margin-top: 40px; border-color: #ffc107; background: #fff8e1;">
            <h3 style="border-bottom-color: #ffc107; color: #d39e00;">[DEBUG] Variáveis de Ambiente</h3>
            <p style="color: #666; font-size: 0.9em; margin-bottom: 15px;">Aviso: Estas informações estão visíveis apenas porque a variável <code>DEBUG=true</code> está ativa.</p>
            
            <div style="overflow-x: auto;">
                <table style="width: 100%; border-collapse: collapse; background: #fff; font-family: monospace; font-size: 0.9em;">
                    <thead>
                        <tr style="background: #f8f9fa;">
                            <th style="padding: 10px; border: 1px solid #dee2e6; text-align: left; width: 30%;">Chave</th>
                            <th style="padding: 10px; border: 1px solid #dee2e6; text-align: left;">Valor</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for key, value in env_vars %}
                        <tr>
                            <td style="padding: 8px; border: 1px solid #dee2e6; font-weight: bold;">{{ key }}</td>
                            <td style="padding: 8px; border: 1px solid #dee2e6; word-break: break-all;">{{ value }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
        {% endif %}

    </div>
{% endblock %}