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

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

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="bi bi-person-plus"></i> {{ title }}
                </h5>
            </div>
            <div class="card-body">
                <form method="post" novalidate>
                    {% csrf_token %}
                    
                    <div class="row">
                        <div class="col-md-8 mb-3">
                            <label for="{{ form.nome.id_for_label }}" class="form-label">
                                {{ form.nome.label }} <span class="text-danger">*</span>
                            </label>
                            {{ form.nome }}
                            {% if form.nome.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.nome.errors.0 }}
                                </div>
                            {% endif %}
                            <div class="form-text">Nome completo ou razão social do cliente.</div>
                        </div>
                        
                        <div class="col-md-4 mb-3">
                            <label for="{{ form.ativo.id_for_label }}" class="form-label">
                                {{ form.ativo.label }}
                            </label>
                            <div class="form-check">
                                {{ form.ativo }}
                                <label class="form-check-label" for="{{ form.ativo.id_for_label }}">
                                    Cliente ativo no sistema
                                </label>
                            </div>
                            {% if form.ativo.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.ativo.errors.0 }}
                                </div>
                            {% endif %}
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="{{ form.cnpj.id_for_label }}" class="form-label">
                                {{ form.cnpj.label }} <span class="text-danger">*</span>
                            </label>
                            {{ form.cnpj }}
                            {% if form.cnpj.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.cnpj.errors.0 }}
                                </div>
                            {% endif %}
                            <div class="form-text">CNPJ no formato XX.XXX.XXX/XXXX-XX</div>
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label for="{{ form.email.id_for_label }}" class="form-label">
                                {{ form.email.label }}
                            </label>
                            {{ form.email }}
                            {% if form.email.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.email.errors.0 }}
                                </div>
                            {% endif %}
                            <div class="form-text">Email principal para contato.</div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="{{ form.telefone.id_for_label }}" class="form-label">
                                {{ form.telefone.label }}
                            </label>
                            {{ form.telefone }}
                            {% if form.telefone.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.telefone.errors.0 }}
                                </div>
                            {% endif %}
                            <div class="form-text">Telefone no formato (XX) XXXXX-XXXX</div>
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label for="{{ form.endereco.id_for_label }}" class="form-label">
                                {{ form.endereco.label }}
                            </label>
                            {{ form.endereco }}
                            {% if form.endereco.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.endereco.errors.0 }}
                                </div>
                            {% endif %}
                            <div class="form-text">Endereço completo do cliente.</div>
                        </div>
                    </div>
                    
                    <hr>
                    
                    <div class="d-flex justify-content-between">
                        <a href="{% if object %}{% url 'client:detail' object.pk %}{% else %}{% url 'client:list' %}{% endif %}" 
                           class="btn btn-secondary">
                            <i class="bi bi-arrow-left"></i> Cancelar
                        </a>
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-check-circle"></i> 
                            {% if object %}Atualizar{% else %}Criar{% endif %} Cliente
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    // Máscara para CNPJ
    $('#{{ form.cnpj.id_for_label }}').mask('00.000.000/0000-00');
    
    // Máscara para telefone
    $('#{{ form.telefone.id_for_label }}').mask('(00) 00000-0000');
    
    // Validação em tempo real do CNPJ
    $('#{{ form.cnpj.id_for_label }}').on('blur', function() {
        var cnpj = $(this).val().replace(/\D/g, '');
        if (cnpj.length === 14) {
            if (!validarCNPJ(cnpj)) {
                $(this).addClass('is-invalid');
                $(this).siblings('.invalid-feedback').remove();
                $(this).after('<div class="invalid-feedback">CNPJ inválido.</div>');
            } else {
                $(this).removeClass('is-invalid');
                $(this).siblings('.invalid-feedback').remove();
            }
        }
    });
});

// Função para validar CNPJ
function validarCNPJ(cnpj) {
    if (cnpj.length !== 14) return false;
    
    // Elimina CNPJs conhecidos como inválidos
    if (/^(\d)\1+$/.test(cnpj)) return false;
    
    // Valida DVs
    var tamanho = cnpj.length - 2;
    var numeros = cnpj.substring(0, tamanho);
    var digitos = cnpj.substring(tamanho);
    var soma = 0;
    var pos = tamanho - 7;
    
    for (var i = tamanho; i >= 1; i--) {
        soma += numeros.charAt(tamanho - i) * pos--;
        if (pos < 2) pos = 9;
    }
    
    var resultado = soma % 11 < 2 ? 0 : 11 - soma % 11;
    if (resultado != digitos.charAt(0)) return false;
    
    tamanho = tamanho + 1;
    numeros = cnpj.substring(0, tamanho);
    soma = 0;
    pos = tamanho - 7;
    
    for (var i = tamanho; i >= 1; i--) {
        soma += numeros.charAt(tamanho - i) * pos--;
        if (pos < 2) pos = 9;
    }
    
    resultado = soma % 11 < 2 ? 0 : 11 - soma % 11;
    if (resultado != digitos.charAt(1)) return false;
    
    return true;
}
</script>

<!-- jQuery Mask Plugin -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>
{% endblock %}