{% extends "base.html" %}

{% block title %}{{ titulo }}{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1><i class="bi bi-diagram-3 text-primary"></i> {{ titulo }}</h1>
            <p class="text-muted mb-0">{{ 'Editar informações do centro de custo' if centro else 'Cadastrar novo centro de custo' }}</p>
        </div>
        <a href="{{ url_for('centros_custo') }}" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left"></i> Voltar
        </a>
    </div>

    <div class="card">
        <div class="card-body">
            <form method="POST">
                <div class="row">
                    <div class="col-md-3 mb-3">
                        <label class="form-label">Código</label>
                        <input type="text" class="form-control" name="codigo" 
                               value="{{ centro.codigo if centro else '' }}"
                               placeholder="Ex: CC001">
                        <small class="text-muted">Opcional. Identificador único.</small>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label">Nome <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" name="nome" 
                               value="{{ centro.nome if centro else '' }}"
                               placeholder="Ex: Loja Centro, Setor Administrativo" required>
                    </div>
                    <div class="col-md-3 mb-3">
                        <label class="form-label">Centro Pai</label>
                        <select class="form-select" name="centro_pai_id">
                            <option value="">-- Nenhum (Raiz) --</option>
                            {% for pai in centros_pai %}
                            <option value="{{ pai.id }}" 
                                    {{ 'selected' if centro and centro.centro_pai_id == pai.id else '' }}>
                                {{ pai.label_hierarquia or ((pai.codigo ~ ' - ' ~ pai.nome) if pai.codigo else pai.nome) }}
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label">Descrição</label>
                    <textarea class="form-control" name="descricao" rows="3"
                              placeholder="Descrição opcional do centro de custo">{{ centro.descricao if centro else '' }}</textarea>
                </div>

                <div class="mb-4">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="ativo" id="ativo"
                               {{ 'checked' if not centro or centro.ativo else '' }}>
                        <label class="form-check-label" for="ativo">
                            Centro de custo ativo
                        </label>
                    </div>
                </div>

                <hr>

                <div class="d-flex justify-content-end gap-2">
                    <a href="{{ url_for('centros_custo') }}" class="btn btn-secondary">
                        <i class="bi bi-x"></i> Cancelar
                    </a>
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-check-lg"></i> {{ 'Salvar Alterações' if centro else 'Criar Centro de Custo' }}
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Info Card -->
    <div class="card mt-4 border-info">
        <div class="card-header bg-info text-white">
            <i class="bi bi-info-circle"></i> O que são Centros de Custo?
        </div>
        <div class="card-body">
            <p>Centros de Custo permitem classificar despesas e receitas por:</p>
            <ul class="mb-0">
                <li><strong>Lojas/Filiais:</strong> Loja Centro, Loja Shopping, Matriz</li>
                <li><strong>Setores:</strong> Administrativo, Comercial, Produção</li>
                <li><strong>Projetos:</strong> Projeto X, Reforma Loja, Campanha Y</li>
                <li><strong>Hierarquia:</strong> Centros podem ter sub-centros (níveis)</li>
            </ul>
        </div>
    </div>
</div>
{% endblock %}