{% extends "base.html" %}

{% block title %}{{ 'Novo Perfil PDV' if not perfil else 'Editar Perfil: ' + perfil.nome }} - CapeSystem{% endblock %}

{% block content %}
<div class="cape-form-shell">
    <div class="cape-form-header">
        <div class="cape-form-header-main">
            <h1 class="h3 mb-1">
                <i class="bi bi-{% if perfil %}pencil{% else %}plus-circle{% endif %}"></i>
                {{ 'Novo Perfil PDV' if not perfil else 'Editar: ' + perfil.nome }}
            </h1>
            <p class="text-muted mb-0">Configure as permissões para operadores de caixa</p>
        </div>
        <div class="cape-form-header-actions">
            <a href="{{ url_for('perfis_pdv') }}" class="btn btn-outline-secondary btn-sm">
                <i class="bi bi-arrow-left"></i> Voltar
            </a>
        </div>
    </div>

    <form method="POST" class="form-lockable">
    <div class="row">
        <!-- Coluna Esquerda - Dados Básicos -->
        <div class="col-lg-4">
            <div class="card mb-4">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0"><i class="bi bi-info-circle"></i> Informações Básicas</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label">Nome do Perfil *</label>
                        <input type="text" class="form-control" name="nome" required
                               value="{{ perfil.nome if perfil else '' }}"
                               placeholder="Ex: Operador Padrão">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Descrição</label>
                        <textarea class="form-control" name="descricao" rows="3"
                                  placeholder="Descreva as características deste perfil">{{ perfil.descricao if perfil else '' }}</textarea>
                    </div>
                    <div class="form-check form-switch mb-3">
                        <input type="checkbox" class="form-check-input" name="ativo" id="ativo"
                               {% if not perfil or perfil.ativo %}checked{% endif %}>
                        <label class="form-check-label" for="ativo">
                            <strong>Perfil Ativo</strong>
                        </label>
                    </div>
                    
                    <hr>
                    
                    <div class="alert alert-warning mb-0">
                        <div class="form-check form-switch">
                            <input type="checkbox" class="form-check-input" name="acesso_apenas_pdv" id="acesso_apenas_pdv"
                                   {% if perfil and perfil.acesso_apenas_pdv %}checked{% elif not perfil %}checked{% endif %}>
                            <label class="form-check-label" for="acesso_apenas_pdv">
                                <strong><i class="bi bi-lock"></i> Acesso Apenas PDV</strong>
                            </label>
                        </div>
                        <small class="text-muted d-block mt-2">
                            Ao logar, o usuário será direcionado diretamente para o PDV, sem acesso ao menu principal.
                        </small>
                    </div>
                </div>
            </div>
        </div>

        <!-- Coluna Central - Permissões de Venda e Desconto -->
        <div class="col-lg-4">
            <div class="card mb-4">
                <div class="card-header bg-success text-white">
                    <h5 class="mb-0"><i class="bi bi-cart"></i> Permissões de Venda</h5>
                </div>
                <div class="card-body">
                    <div class="alert alert-light border small">
                        <i class="bi bi-shield-check text-primary"></i>
                        Defina como cada operação crítica deve funcionar no CapePDV: <strong>Liberado</strong>,
                        <strong>Só gerente/admin</strong> ou <strong>Bloqueado</strong>.
                    </div>

                    {% set controle_guardar = perfil.controle_guardar_venda if perfil else 'liberado' %}
                    <div class="mb-3">
                        <label class="form-label" for="controle_guardar_venda">Guardar venda para depois</label>
                        <select class="form-select" name="controle_guardar_venda" id="controle_guardar_venda">
                            <option value="liberado" {% if controle_guardar == 'liberado' %}selected{% endif %}>Liberado para o operador</option>
                            <option value="gerente" {% if controle_guardar == 'gerente' %}selected{% endif %}>Exige gerente/admin</option>
                            <option value="bloqueado" {% if controle_guardar == 'bloqueado' %}selected{% endif %}>Bloqueado</option>
                        </select>
                    </div>

                    {% set controle_cancelar_item = perfil.controle_cancelar_item if perfil else 'liberado' %}
                    <div class="mb-3">
                        <label class="form-label" for="controle_cancelar_item">Cancelar item do carrinho</label>
                        <select class="form-select" name="controle_cancelar_item" id="controle_cancelar_item">
                            <option value="liberado" {% if controle_cancelar_item == 'liberado' %}selected{% endif %}>Liberado para o operador</option>
                            <option value="gerente" {% if controle_cancelar_item == 'gerente' %}selected{% endif %}>Exige gerente/admin</option>
                            <option value="bloqueado" {% if controle_cancelar_item == 'bloqueado' %}selected{% endif %}>Bloqueado</option>
                        </select>
                    </div>

                    {% set controle_cancelar_venda = perfil.controle_cancelar_venda if perfil else 'gerente' %}
                    <div class="mb-3">
                        <label class="form-label" for="controle_cancelar_venda">Cancelar venda inteira</label>
                        <select class="form-select" name="controle_cancelar_venda" id="controle_cancelar_venda">
                            <option value="liberado" {% if controle_cancelar_venda == 'liberado' %}selected{% endif %}>Liberado para o operador</option>
                            <option value="gerente" {% if controle_cancelar_venda == 'gerente' %}selected{% endif %}>Exige gerente/admin</option>
                            <option value="bloqueado" {% if controle_cancelar_venda == 'bloqueado' %}selected{% endif %}>Bloqueado</option>
                        </select>
                    </div>

                    {% set controle_alterar_preco = perfil.controle_alterar_preco if perfil else 'gerente' %}
                    <div class="mb-3">
                        <label class="form-label" for="controle_alterar_preco">Alterar preço de produtos</label>
                        <select class="form-select" name="controle_alterar_preco" id="controle_alterar_preco">
                            <option value="liberado" {% if controle_alterar_preco == 'liberado' %}selected{% endif %}>Liberado para o operador</option>
                            <option value="gerente" {% if controle_alterar_preco == 'gerente' %}selected{% endif %}>Exige gerente/admin</option>
                            <option value="bloqueado" {% if controle_alterar_preco == 'bloqueado' %}selected{% endif %}>Bloqueado</option>
                        </select>
                    </div>

                    <div class="form-check form-switch mb-2">
                        <input type="checkbox" class="form-check-input" name="pode_alterar_quantidade" id="pode_alterar_quantidade"
                               {% if not perfil or perfil.pode_alterar_quantidade %}checked{% endif %}>
                        <label class="form-check-label" for="pode_alterar_quantidade">
                            Alterar quantidade do item
                        </label>
                    </div>
                    <div class="form-check form-switch mb-2">
                        <input type="checkbox" class="form-check-input" name="pode_vender_fiado" id="pode_vender_fiado"
                               {% if perfil and perfil.pode_vender_fiado %}checked{% endif %}>
                        <label class="form-check-label" for="pode_vender_fiado">
                            Vender fiado/promissória
                        </label>
                    </div>
                </div>
            </div>

            <div class="card mb-4">
                <div class="card-header bg-warning text-dark">
                    <h5 class="mb-0"><i class="bi bi-percent"></i> Permissões de Desconto</h5>
                </div>
                <div class="card-body">
                    {% set controle_desconto = perfil.controle_desconto if perfil else 'gerente' %}
                    <div class="mb-3">
                        <label class="form-label" for="controle_desconto"><strong>Aplicar desconto na venda</strong></label>
                        <select class="form-select" name="controle_desconto" id="controle_desconto">
                            <option value="liberado" {% if controle_desconto == 'liberado' %}selected{% endif %}>Liberado para o operador</option>
                            <option value="gerente" {% if controle_desconto == 'gerente' %}selected{% endif %}>Exige gerente/admin</option>
                            <option value="bloqueado" {% if controle_desconto == 'bloqueado' %}selected{% endif %}>Bloqueado</option>
                        </select>
                        <small class="text-muted">Quando estiver em <strong>Gerente</strong>, qualquer desconto manual pedirá autorização. Os limites abaixo continuam valendo.</small>
                    </div>

                    <div class="form-check form-switch mb-3">
                        <input type="checkbox" class="form-check-input" name="pode_dar_desconto_percentual" id="pode_dar_desconto_percentual"
                               {% if perfil and perfil.pode_dar_desconto_percentual %}checked{% endif %}>
                        <label class="form-check-label" for="pode_dar_desconto_percentual">
                            <strong>Permitir desconto em percentual (%)</strong>
                        </label>
                    </div>
                    <div class="mb-3 ms-1">
                        <label class="form-label">Limite percentual (%)</label>
                        <input type="number" class="form-control" name="limite_desconto_percentual"
                               value="{{ (perfil.limite_desconto_percentual if perfil else 10) or 0 }}"
                               min="0" max="100" step="0.1">
                        <small class="text-muted">0 = não concede percentual | 100 = desconto total em %</small>
                    </div>

                    <div class="form-check form-switch mb-3">
                        <input type="checkbox" class="form-check-input" name="pode_dar_desconto_valor" id="pode_dar_desconto_valor"
                               {% if perfil and perfil.pode_dar_desconto_valor %}checked{% endif %}>
                        <label class="form-check-label" for="pode_dar_desconto_valor">
                            <strong>Permitir desconto em valor (R$)</strong>
                        </label>
                    </div>
                    <div class="mb-3 ms-1">
                        <label class="form-label">Limite em valor (R$)</label>
                        <input type="number" class="form-control" name="limite_desconto_valor"
                               value="{{ (perfil.limite_desconto_valor if perfil else 0) or 0 }}"
                               min="0" step="0.01">
                        <small class="text-muted">0,00 = pode descontar até o total da venda em valor.</small>
                    </div>

                    <div class="form-check form-switch">
                        <input type="checkbox" class="form-check-input" name="requer_autorizacao_desconto" id="requer_autorizacao_desconto"
                               {% if not perfil or perfil.requer_autorizacao_desconto %}checked{% endif %}>
                        <label class="form-check-label" for="requer_autorizacao_desconto">
                            Requer autorização acima do limite
                        </label>
                    </div>
                </div>
            </div>
        </div>

        <!-- Coluna Direita - Caixa e Consultas -->
        <div class="col-lg-4">
            <div class="card mb-4">
                <div class="card-header bg-info text-white">
                    <h5 class="mb-0"><i class="bi bi-cash-stack"></i> Permissões de Caixa</h5>
                </div>
                <div class="card-body">
                    <div class="form-check form-switch mb-2">
                        <input type="checkbox" class="form-check-input" name="pode_abrir_caixa" id="pode_abrir_caixa"
                               {% if perfil and perfil.pode_abrir_caixa %}checked{% elif not perfil %}checked{% endif %}>
                        <label class="form-check-label" for="pode_abrir_caixa">
                            Abrir caixa
                        </label>
                    </div>
                    <div class="form-check form-switch mb-2">
                        <input type="checkbox" class="form-check-input" name="pode_fechar_caixa" id="pode_fechar_caixa"
                               {% if perfil and perfil.pode_fechar_caixa %}checked{% elif not perfil %}checked{% endif %}>
                        <label class="form-check-label" for="pode_fechar_caixa">
                            Fechar próprio caixa
                        </label>
                    </div>
                    <div class="form-check form-switch mb-2">
                        <input type="checkbox" class="form-check-input" name="pode_fechar_caixa_outros" id="pode_fechar_caixa_outros"
                               {% if perfil and perfil.pode_fechar_caixa_outros %}checked{% endif %}>
                        <label class="form-check-label" for="pode_fechar_caixa_outros">
                            Fechar caixa de outros operadores
                        </label>
                    </div>
                    <div class="form-check form-switch mb-2">
                        <input type="checkbox" class="form-check-input" name="pode_reabrir_caixa" id="pode_reabrir_caixa"
                               {% if perfil and perfil.pode_reabrir_caixa %}checked{% endif %}>
                        <label class="form-check-label" for="pode_reabrir_caixa">
                            Reabrir caixa fechado
                        </label>
                    </div>
                    
                    <hr>
                    
                    <div class="form-check form-switch mb-2">
                        <input type="checkbox" class="form-check-input" name="pode_fazer_sangria" id="pode_fazer_sangria"
                               {% if perfil and perfil.pode_fazer_sangria %}checked{% endif %}
                               onchange="toggleSangria()">
                        <label class="form-check-label" for="pode_fazer_sangria">
                            Fazer sangria
                        </label>
                    </div>
                    <div id="sangriaFields" class="ms-4" style="{% if not perfil or not perfil.pode_fazer_sangria %}display:none;{% endif %}">
                        <div class="mb-2">
                            <label class="form-label small">Limite de sangria (R$)</label>
                            <input type="number" class="form-control form-control-sm" name="limite_sangria"
                                   value="{{ perfil.limite_sangria if perfil else 500 }}"
                                   min="0" step="0.01">
                        </div>
                    </div>
                    <div class="form-check form-switch mb-2">
                        <input type="checkbox" class="form-check-input" name="pode_fazer_suprimento" id="pode_fazer_suprimento"
                               {% if perfil and perfil.pode_fazer_suprimento %}checked{% endif %}>
                        <label class="form-check-label" for="pode_fazer_suprimento">
                            Fazer suprimento
                        </label>
                    </div>
                </div>
            </div>

            <div class="card mb-4">
                <div class="card-header bg-secondary text-white">
                    <h5 class="mb-0"><i class="bi bi-search"></i> Permissões de Consulta</h5>
                </div>
                <div class="card-body">
                    <div class="form-check form-switch mb-2">
                        <input type="checkbox" class="form-check-input" name="pode_consultar_vendas" id="pode_consultar_vendas"
                               {% if perfil and perfil.pode_consultar_vendas %}checked{% elif not perfil %}checked{% endif %}>
                        <label class="form-check-label" for="pode_consultar_vendas">
                            Consultar vendas do dia
                        </label>
                    </div>
                    <div class="form-check form-switch mb-2">
                        <input type="checkbox" class="form-check-input" name="pode_consultar_estoque" id="pode_consultar_estoque"
                               {% if perfil and perfil.pode_consultar_estoque %}checked{% endif %}>
                        <label class="form-check-label" for="pode_consultar_estoque">
                            Consultar estoque
                        </label>
                    </div>
                    <div class="form-check form-switch mb-2">
                        <input type="checkbox" class="form-check-input" name="pode_imprimir_relatorios" id="pode_imprimir_relatorios"
                               {% if perfil and perfil.pode_imprimir_relatorios %}checked{% endif %}>
                        <label class="form-check-label" for="pode_imprimir_relatorios">
                            Imprimir relatórios
                        </label>
                    </div>
                    <div class="form-check form-switch mb-2">
                        <input type="checkbox" class="form-check-input" name="pode_abrir_gaveta" id="pode_abrir_gaveta"
                               {% if perfil and perfil.pode_abrir_gaveta %}checked{% endif %}>
                        <label class="form-check-label" for="pode_abrir_gaveta">
                            Abrir gaveta
                        </label>
                    </div>
                    <div class="form-check form-switch mb-2">
                        <input type="checkbox" class="form-check-input" name="pode_reimprimir" id="pode_reimprimir"
                               {% if perfil and perfil.pode_reimprimir %}checked{% endif %}>
                        <label class="form-check-label" for="pode_reimprimir">
                            Reimprimir cupom
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>

        <div class="cape-form-actions">
            <div class="cape-form-actions-left">
                {% if perfil %}
                <a href="{{ url_for('duplicar_perfil_pdv', id=perfil.id) }}" class="btn btn-outline-info">
                    <i class="bi bi-files"></i> Duplicar
                </a>
                {% endif %}
            </div>
            <div class="cape-form-actions-right">
                <a href="{{ url_for('perfis_pdv') }}" class="btn btn-secondary">
                    <i class="bi bi-x-circle"></i> Cancelar
                </a>
                <button type="submit" class="btn btn-primary">
                    <i class="bi bi-check-circle"></i> Salvar
                </button>
            </div>
        </div>
    </form>
</div>

<script>
function toggleSangria() {
    const checked = document.getElementById('pode_fazer_sangria').checked;
    document.getElementById('sangriaFields').style.display = checked ? 'block' : 'none';
}
</script>
{% endblock %}