{% extends 'base.html' %}
{% load static %}

{% block title %}{{ titulo }} - {{ block.super }}{% endblock %}

{% block extra_css %}
<style>
.clientes-form .page-heading { display: flex; align-items: center; gap: .7rem; }
.clientes-form .page-heading > i { display: inline-grid; place-items: center; width: 2.7rem; height: 2.7rem; border-radius: .7rem; background: #e4effc; color: #245e98; font-size: 1.35rem; }
.clientes-form .page-heading small { color: #59697a; }

.clientes-form .form-section-card {
    border: none; border-radius: 14px; box-shadow: 0 2px 10px rgba(0,0,0,.05); margin-bottom: 1rem;
}
.clientes-form .form-section-card .card-header {
    display: flex; align-items: center; gap: .6rem;
    background: #f8fafc; border-bottom: 1px solid #eef2f6;
    font-weight: 700; font-size: .95rem; color: #34475a;
}
.clientes-form .form-section-card .card-header i {
    display: inline-grid; place-items: center;
    width: 2rem; height: 2rem; border-radius: .55rem;
    font-size: .95rem;
}
.clientes-form .form-label {
    color: #44586c; font-size: .85rem; font-weight: 600; margin-bottom: .3rem;
}
.clientes-form .form-control, .clientes-form .form-select {
    border-radius: 9px; min-height: 46px; border-color: #dde5ee;
}
.clientes-form .form-control:focus, .clientes-form .form-select:focus {
    border-color: #1861c5; box-shadow: 0 0 0 .2rem rgba(24, 97, 197, .12);
}
.clientes-form textarea.form-control { min-height: 90px; }
.clientes-form input[type="date"].form-control { max-width: 200px; }

.clientes-form .c-identidade i { background: #e3f2fd; color: #1565c0; }
.clientes-form .c-contato i    { background: #e0f7fa; color: #00838f; }
.clientes-form .c-outros i     { background: #f3e5f5; color: #7b1fa2; }
.clientes-form .c-crediario i  { background: #e8f5e9; color: #1e7e34; }

.clientes-form .cred-num { font-size: 1.55rem; font-weight: 800; color: #1e7e34; line-height: 1.1; }
.clientes-form .cred-sub { font-size: .8rem; color: #8a97a8; }
.clientes-form .cred-box {
    background: #f6fbf7; border: 1px solid #d6ecdb; border-radius: 12px;
}
.clientes-form .footer-actions {
    position: sticky; bottom: 0; z-index: 5;
    background: rgba(255,255,255,.92); backdrop-filter: blur(6px);
    border: 1px solid #eef2f6; border-radius: 14px;
    box-shadow: 0 -4px 14px rgba(0,0,0,.06);
    padding: .75rem 1rem; margin-bottom: .5rem;
}
.clientes-form .footer-actions .btn { min-width: 150px; }
@media (max-width: 575.98px) {
    .clientes-form .footer-actions .btn { min-width: 0; width: 100%; }
    .clientes-form .footer-actions .d-md-flex { gap: .5rem; }
}
</style>
{% endblock %}

{% block content %}
<div class="clientes-form">
    <div class="d-flex flex-wrap gap-2 justify-content-between align-items-center mb-4">
        <div class="page-heading">
            <i class="bi bi-person-plus-fill"></i>
            <div>
                <h2 class="mb-0">{{ titulo }}</h2>
                <small>Telefone, CPF e demais campos são opcionais — o essencial é o nome.</small>
            </div>
        </div>
        <a href="{% url 'lista_clientes' %}" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left"></i> Voltar
        </a>
    </div>

    <form method="post" enctype="multipart/form-data" novalidate>
        {% csrf_token %}
        {% if next_url %}<input type="hidden" name="next" value="{{ next_url }}">{% endif %}

        {% if form.errors %}
        <div class="alert alert-danger d-flex align-items-center gap-2">
            <i class="bi bi-exclamation-triangle-fill fs-5"></i>
            <div><strong>Corrija os erros abaixo</strong> antes de salvar o cliente.</div>
        </div>
        {% endif %}

        <!-- Seção: Dados pessoais -->
        <div class="card form-section-card c-identidade">
            <div class="card-header"><i class="bi bi-person-badge"></i> Dados Pessoais</div>
            <div class="card-body p-4">
                <div class="row g-3">
                    <div class="col-md-8">
                        <label class="form-label">Nome Completo <span class="text-danger">*</span></label>
                        {{ form.nome }}
                        {% if form.nome.errors %}<div class="text-danger small mt-1">{{ form.nome.errors }}</div>{% endif %}
                        {% if tem_parcelas_abertas %}
                        <div class="alert alert-warning mt-2 mb-0 py-2 small">
                            <i class="bi bi-lock-fill me-1"></i>
                            O <strong>nome não pode ser alterado</strong>: este cliente possui parcelas em aberto no crediário
                            {% if total_credito_aberto %}<strong>(R$ {{ total_credito_aberto|floatformat:2 }})</strong>{% endif %}.
                            A alteração só é possível pelo Django Admin.
                        </div>
                        {% endif %}
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">CPF</label>
                        {{ form.cpf }}
                        {% if form.cpf.errors %}<div class="text-danger small mt-1">{{ form.cpf.errors }}</div>{% endif %}
                        <small class="text-muted d-block mt-1"><i class="bi bi-info-circle"></i> Rastrear compras, limite de crediário.</small>
                    </div>
                    <div class="col-md-4 col-6">
                        <label class="form-label">Nascimento</label>
                        {{ form.data_nascimento }}
                        {% if form.data_nascimento.errors %}<div class="text-danger small mt-1">{{ form.data_nascimento.errors }}</div>{% endif %}
                    </div>
                    <div class="col-md-8 d-flex align-items-end justify-content-md-end pb-2">
                        <div class="form-check form-switch">
                            {{ form.ativo }}
                            <label class="form-check-label" for="{{ form.ativo.id_for_label }}">
                                <strong>Cliente ativo</strong>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Seção: Contato -->
        <div class="card form-section-card c-contato">
            <div class="card-header"><i class="bi bi-telephone-outbound"></i> Contato</div>
            <div class="card-body p-4">
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label">Telefone</label>
                        {{ form.telefone }}
                        {% if form.telefone.errors %}<div class="text-danger small mt-1">{{ form.telefone.errors }}</div>{% endif %}
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">E-mail</label>
                        {{ form.email }}
                        {% if form.email.errors %}<div class="text-danger small mt-1">{{ form.email.errors }}</div>{% endif %}
                    </div>
                    <div class="col-12">
                        <label class="form-label">Endereço</label>
                        {{ form.endereco }}
                        {% if form.endereco.errors %}<div class="text-danger small mt-1">{{ form.endereco.errors }}</div>{% endif %}
                    </div>
                </div>
            </div>
        </div>

        <!-- Seção: Crediário -->
        <div class="card form-section-card c-crediario">
            <div class="card-header"><i class="bi bi-cash-coin"></i> Limite de Venda no Crediário</div>
            <div class="card-body p-4">
                <div class="form-check form-switch mb-3">
                    {{ form.limite_crediario_ativo }}
                    <label class="form-check-label" for="{{ form.limite_crediario_ativo.id_for_label }}">
                        <strong>Controlar limite</strong> deste cliente no crediário
                    </label>
                </div>
                <div id="grupo-limite-crediario">
                    <div class="cred-box p-3">
                        <div class="row align-items-center g-2">
                            <div class="col-md-7">
                                <label class="form-label mb-1">Valor do Limite (R$)</label>
                                {{ form.limite_crediario }}
                                {% if form.limite_crediario.errors %}<div class="text-danger small mt-1">{{ form.limite_crediario.errors }}</div>{% endif %}
                            </div>
                            <div class="col-md-5 text-md-end d-flex flex-column justify-content-center align-items-md-end">
                                <i class="bi bi-shield-check text-success" style="font-size:1.8rem;"></i>
                                <div class="cred-sub mt-1">Só é usado quando o limite está ativado</div>
                            </div>
                        </div>
                    </div>
                    <small class="text-muted d-block mt-2">
                        <i class="bi bi-info-circle"></i>
                        Este limite controla o valor que o cliente pode comprar no crediário. Os condicionais independem dele; as compras no crediário respeitam o restante.
                    </small>
                </div>
            </div>
        </div>

        <!-- Seção: Observações -->
        <div class="card form-section-card c-outros">
            <div class="card-header"><i class="bi bi-chat-left-text"></i> Observações</div>
            <div class="card-body p-4">
                {{ form.observacoes }}
                {% if form.observacoes.errors %}<div class="text-danger small mt-1">{{ form.observacoes.errors }}</div>{% endif %}
            </div>
        </div>

        <!-- Ações fixas -->
        <div class="footer-actions d-flex flex-wrap gap-2 justify-content-end">
            <a href="{% url 'lista_clientes' %}" class="btn btn-outline-secondary">
                <i class="bi bi-x-circle"></i> Cancelar
            </a>
            <button type="submit" class="btn btn-success">
                <i class="bi bi-check-circle"></i> Salvar Cliente
            </button>
        </div>
    </form>
</div>
{% endblock %}

{% block extra_js %}
<script>
function padronizarNomeAoDigitar(valor) {
    valor = valor.replace(/\s+/g, ' ');
    return valor.split(' ').map(function (palavra, i) {
        if (!palavra) return palavra;
        return palavra.split('-').map(function (parte, j) {
            var inicio = (i === 0 && j === 0);
            if (parte.length <= 2 && !inicio) return parte.toLowerCase();
            var p = parte.toLowerCase();
            return p.charAt(0).toUpperCase() + p.slice(1);
        }).join('-');
    }).join(' ');
}
(function () {
    var campoNome = document.getElementById('id_nome');
    if (!campoNome) return;
    function aplicar() {
        var novo = padronizarNomeAoDigitar(campoNome.value);
        if (novo !== campoNome.value) {
            campoNome.value = novo;
            var fim = campoNome.value.length;
            campoNome.setSelectionRange(fim, fim);
        }
    }
    campoNome.addEventListener('input', function () {
        // formata ao digitar quando o cursor está no fim (fluxo normal de escrita)
        if (campoNome.selectionStart >= campoNome.value.length) aplicar();
    });
    campoNome.addEventListener('blur', aplicar);
    campoNome.form && campoNome.form.addEventListener('submit', aplicar);
})();
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const telefoneInput = document.getElementById('id_telefone');
    const limiteAtivo = document.getElementById('id_limite_crediario_ativo');
    const limiteInput = document.getElementById('id_limite_crediario');
    const grupoLimite = document.getElementById('grupo-limite-crediario');
    if (!telefoneInput) return;

    telefoneInput.addEventListener('input', function (e) {
        let v = e.target.value.replace(/\D/g, '').slice(0, 11);
        if (v.length > 10) {
            v = v.replace(/^(\d{2})(\d{5})(\d{0,4}).*/, '($1) $2-$3');
        } else if (v.length > 6) {
            v = v.replace(/^(\d{2})(\d{4})(\d{0,4}).*/, '($1) $2-$3');
        } else if (v.length > 2) {
            v = v.replace(/^(\d{2})(\d{0,5})/, '($1) $2');
        } else if (v.length > 0) {
            v = v.replace(/^(\d{0,2})/, '($1');
        }
        e.target.value = v;
    });

    function atualizarCampoLimite() {
        if (!limiteAtivo || !limiteInput || !grupoLimite) return;
        const ativo = limiteAtivo.checked;
        limiteInput.disabled = !ativo;
        grupoLimite.style.opacity = ativo ? '1' : '0.55';
    }

    if (limiteAtivo) {
        limiteAtivo.addEventListener('change', atualizarCampoLimite);
        atualizarCampoLimite();
    }
});
</script>
{% endblock %}