{% extends 'base.html.twig' %}

{% block title %} 
    Novo Cliente - CCM
{% endblock %}

{% block body %}
    <link rel="stylesheet" href="/css/styles-ccm-new.css">
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

    <div class="container-fluid box-no-bkg-color">
        <nav class="hide-on-mobile" aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="page-directory-previous breadcrumb-item">
                    <a href="{{ path('ccm') }}">CCM</a>
                </li>
                <li aria-current="page" class="page-directory breadcrumb-item active">Criar</li>
            </ol>
        </nav>
        <div class="box">
            <div class="title">
                <div class="row">
                    <div class="col-lg-7">
                        <h1 class="page-title">CCM - Novo Cliente</h1>
                    </div>
                </div>

                <form id="ccmForm" action="{{ path('ccm_new_client_post')}}" method="post">
                    {% for flashError in app.flashes('error') %}
                        <div class="alert alert-danger">
                            {{ flashError }}
                        </div>
                    {% endfor %}
                    <div class="primary-content">
                        <h5 class="page-title-h5">Dados Cadastrais</h5>
                        <div class="first-line-cadastro">
                            <div class="input-container-CnpjNome">
                                <label for="cnpj_cpf">CNPJ/CPF</label>
                                <input type="text" name="cnpj_cpf" id="cnpj_cpf" class="auto-fill" required/>
                            </div>
                            <div class="input-container">
                                <label for="name">Razão Social/Nome</label>
                                <input type="text" name="name" id="name" class="auto-fill-target" required/>
                            </div>
                            <div class="input-container-CnpjNome">
                                <label for="fantasy_name">Nome Fantasia</label>
                                <input type="text" name="fantasy_name" id="fantasy_name" class="auto-fill-target"/>
                            </div>
                        </div>
                        <div class="second-line-cadastro">
                            <div class="input-container-CEP">
                                <label for="cep">CEP</label>
                                <input type="text" name="cep" id="cep"/>
                            </div>
                            <div class="input-container-Pais">
                                <label for="country">País</label>
                                <input type="text" name="country" id="country"/>
                            </div>
                            <div class="input-container-UF">
                                <label for="uf">UF</label>
                                <input type="text" name="uf" id="uf"/>
                            </div>
                            <div class="input-container-OT">
                                <label for="city">Cidade</label>
                                <input type="text" name="city" id="city" required/>
                            </div>
                            <div class="input-container-OT">
                                <label for="neighborhood">Bairro</label>
                                <input type="text" name="neighborhood" id="neighborhood" required/>
                            </div>
                        </div>
                        <div class="third-line-cadastro">
                            <div class="input-container">
                                <label for="address">Endereço</label>
                                <input type="text" name="address" id="address" required/>
                            </div>
                            <div class="input-container-NumCompl">
                                <label for="address_number">Número</label>
                                <input type="text" name="address_number" id="address_number"/>
                            </div>
                            <div class="input-container-NumCompl">
                                <label for="address_complement">Complemento</label>
                                <input type="text" name="address_complement" id="address_complement"/>
                            </div>
                            <div class="input-container-CPeCS">
                                <label for="mailbox">Caixa Postal</label>
                                <input type="text" name="mailbox" id="mailbox"/>
                            </div>
                            <div class="input-container-CPeCS">
                                <label for="suframa_cod">Código Suframa</label>
                                <input type="text" name="suframa_cod" id="suframa_cod"/>
                            </div>
                        </div>
                        <div class="fourth-line-cadastro">
                            <div class="input-container-OT">
                                <label for="phone_number">(DDD) Telefone</label>
                                <input type="text" name="phone_number" id="phone_number" required/>
                            </div>
                            <div class="input-container-OT">
                                <label for="fax_number">(DDD) Fax</label>
                                <input type="text" name="fax_number" id="fax_number"/>
                            </div>
                            <div class="input-container">
                                <label for="email">E-mail - envio de nota fiscal eletrônica</label>
                                <input type="email" name="email" id="email" required/>
                                <div id="email-error-message" class="error-message"></div>
                            </div>
                        </div>
                        <div class="fifth-line-cadastro">
                            <div class="input-container-Insc">
                                <label for="inscricao-estadual-isento">Inscrição Estadual</label>
                                <div class="check-same-line">
                                    <input type="checkbox" id="inscricao-estadual-isento" class="checkbox" data-target="state_registration"/>
                                    <label for="inscricao-estadual-isento">Isento</label>
                                </div>
                                <input name="state_registration" id="state_registration"/>
                            </div>
                            <div class="input-container-Insc">
                                <label for="inscricao-municipal-isento">Inscrição Municipal</label>
                                <div class="check-same-line">
                                    <input type="checkbox" id="inscricao-municipal-isento" class="checkbox" data-target="municipal_registration"/>
                                    <label for="inscricao-municipal-isento">Isento</label>
                                </div>
                                <input name="municipal_registration" id="municipal_registration"/>
                            </div>
                            <div class="input-container-contr">
                                <label>Contribuinte de ICMS</label>
                                <div class="check-same-line">
                                    <input type="radio" id="contribuinte-sim" name="contribuinte-icms" value="Sim"/>
                                    <label for="contribuinte-sim">Sim</label>
                                    <input type="radio" id="contribuinte-nao" name="contribuinte-icms" value="Não"/>
                                    <label for="contribuinte-nao">Não</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="primary-content">
                        <h5 class="page-title-h5">Endereço de Cobrança</h5>
                        <div class="check-same-line fourth-component">
                            <input type="checkbox" id="endereco-cobranca-igual" name="endereco_cobr" value="endereco_cobr_value"/>
                            <label for="endereco-cobranca-igual">Endereço de Cobrança igual ao Endereço Principal</label>
                        </div>
                        <div class="first-line-endereco">
                            <div class="input-container-CEP">
                                <label for="cep_cobr">CEP</label>
                                <input class="input-full-width" name="cep_cobr" id="cep_cobr"/>
                            </div>
                            <div class="input-container-Pais">
                                <label for="country_cobr">País</label>
                                <input class="input-full-width" name="country_cobr" id="country_cobr"/>
                            </div>
                            <div class="input-container-UF">
                                <label for="uf_cobr">UF</label>
                                <input class="input-full-width" name="uf_cobr" id="uf_cobr"/>
                            </div>
                            <div class="input-container-OT">
                                <label for="city_cobr">Cidade</label>
                                <input class="input-full-width" name="city_cobr" id="city_cobr" required/>
                            </div>
                            <div class="input-container-OT">
                                <label for="neighborhood_cobr">Bairro</label>
                                <input class="input-full-width" name="neighborhood_cobr" id="neighborhood_cobr" required/>
                            </div>
                        </div>
                        <div class="second-line-endereco">
                            <div class="input-container">
                                <label for="address_cobr">Endereço</label>
                                <input class="input-full-width" name="address_cobr" id="address_cobr" required/>
                            </div>
                            <div class="input-container-NumCompl">
                                <label for="address_number_cobr">Número</label>
                                <input class="input-full-width" name="address_number_cobr" id="address_number_cobr"/>
                            </div>
                            <div class="input-container-NumCompl">
                                <label for="address_complement_cobr">Complemento</label>
                                <input class="input-full-width" name="address_complement_cobr" id="address_complement_cobr"/>
                            </div>
                            <div class="input-container-CPeCS">
                                <label for="mailbox_cobr">Caixa Postal</label>
                                <input class="input-full-width" name="mailbox_cobr" id="mailbox_cobr"/>
                            </div>
                            <div class="input-container-CnpjNome">
                                <label for="cnpjCpf_cobr">CNPJ/CPF</label>
                                <input type="text" class="input-full-width" name="cnpjCpf_cobr" id="cnpjCpf_cobr" required/>
                            </div>
                        </div>
                        <div class="third-line-endereco">
                            <div class="input-container-Insc">
                                <label for="inscricao-estadual-isento-2">Inscrição Estadual</label>
                                <div class="check-same-line">
                                    <input type="checkbox" id="inscricao-estadual-isento-2" class="checkbox" data-target="state_registration_cobr"/>
                                    <label for="inscricao-estadual-isento-2">Isento</label>
                                </div>
                                <input class="input-full-width" name="state_registration_cobr" id="state_registration_cobr"/>
                            </div>
                        </div>
                    </div>
                    <div class="registration-cancel-button">
                        <a href="{{ path('ccm') }}" class="button-registrationCancel">Cancelar</a>
                        <div>
                            <input type="submit" class="button-registrationCancel" value="Cadastrar e Abrir CCM" id="cadastrar_abrir_ccm"/>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        // Função para desabilitar as Inscrições caso o cliente seja isento
        document.addEventListener('DOMContentLoaded', function () {
            const checkboxes = document.querySelectorAll('.checkbox');
            checkboxes.forEach(checkbox => {
                checkbox.addEventListener('change', function () {
                    const targetId = this.getAttribute('data-target');
                    const targetInput = document.getElementById(targetId);

                    if (this.checked) {
                        targetInput.disabled = true;
                        targetInput.value = '';
                    } else {
                        targetInput.disabled = false;
                    }
                });
            });
        });

        // Função para desabilitar o endereço de cobrança + impedir o usuário de clicar no botão de isento (Estadual)
        document.addEventListener('DOMContentLoaded', function disableEnderecoCobranca() {
            const cepInput = document.getElementById('cep');
            const countryInput = document.getElementById('country');
            const ufInput = document.getElementById('uf');
            const cityInput = document.getElementById('city');
            const neighborhoodInput = document.getElementById('neighborhood');
            const addressInput = document.getElementById('address');
            const addressNumberInput = document.getElementById('address_number');
            const addressComplementInput = document.getElementById('address_complement');
            const mailboxInput = document.getElementById('mailbox');
            const cnpjCpfInput = document.getElementById('cnpj_cpf');
            const inscricaoEstadualCobrInput = document.getElementById('state_registration');
            
            const enderecoCobrancaIgualCheckbox = document.getElementById('endereco-cobranca-igual');
            const textFieldsToDisable = document.querySelectorAll('.input-full-width');
            const inscricaoEstadual2Checkbox = document.getElementById('inscricao-estadual-isento-2');
            const inscricaoEstadual2Input = document.getElementById('state_registration_cobr');
            enderecoCobrancaIgualCheckbox.addEventListener('change', function () {
                const isChecked = enderecoCobrancaIgualCheckbox.checked;
                textFieldsToDisable.forEach(function (textField) {
                    textField.disabled = isChecked;
                });
                inscricaoEstadual2Checkbox.checked = isChecked;
                inscricaoEstadual2Input.disabled = isChecked;
                inscricaoEstadual2Checkbox.disabled = isChecked;

                if(isChecked) {
                    preencherCamposEnderecoCobr();
                } else {
                    limparCamposEnderecoCobr();
                }

            });

            function preencherCamposEnderecoCobr() {
                const textFieldsToFill = document.querySelectorAll('.input-full-width');

                textFieldsToFill.forEach(function (textField) {
                    const name = textField.getAttribute('name');
                    switch (name) {
                        case 'cep_cobr':
                        textField.value = cepInput.value;
                        break;
                        case 'country_cobr':
                        textField.value = countryInput.value;
                        break;
                        case 'uf_cobr':
                        textField.value = ufInput.value;
                        break;
                        case 'city_cobr':
                        textField.value = cityInput.value;
                        break;
                        case 'neighborhood_cobr':
                        textField.value = neighborhoodInput.value;
                        break;
                        case 'address_cobr':
                        textField.value = addressInput.value;
                        break;
                        case 'address_number_cobr':
                        textField.value = addressNumberInput.value;
                        break;
                        case 'address_complement_cobr':
                        textField.value = addressComplementInput.value;
                        break;
                        case 'mailbox_cobr':
                        textField.value = mailboxInput.value;
                        break;
                        case 'cnpjCpf_cobr':
                        textField.value = cnpjCpfInput.value;
                        break;
                        case 'state_registration_cobr':
                        textField.value = inscricaoEstadualCobrInput.value;
                    }
                })
            }

             function limparCamposEnderecoCobr() {
                const textFieldsToClear = document.querySelectorAll('.input-full-width');

                textFieldsToClear.forEach(function (textField) {
                    textField.value = '';
                });
            }

        });

        // Requisição Ajax para conferir se já existe um cliente cadastrado com o CNPJ/CPF colocado
        $(document).ready(function () {
            function disableFields() {
                $('#name, #fantasy_name, #cep, #country, #uf, #city, #neighborhood, #address, #address_number, #address_complement, #mailbox, #suframa_cod, ' + 
                '#phone_number, #fax_number, #email, #inscricao-municipal-isento, #inscricao-estadual-isento, #inscricao-estadual-isento-2, #municipal_registration, ' +
                '#state_registration, #state_registration_cobr, #contribuinte-sim, #contribuinte-nao, #endereco-cobranca-igual, #cep_cobr, #country_cobr, #uf_cobr, #city_cobr, ' +
                '#neighborhood_cobr, #address_cobr, #address_number_cobr, #address_complement_cobr, #mailbox_cobr, #cnpjCpf_cobr').prop('disabled', true);
            }

            $('#cnpj_cpf').focusout(function () {
                $('#name, #cep_cobr, #fantasy_name, #cep, #country, #uf, #city, #neighborhood, #address, #address_number, #address_complement, #mailbox, #suframa_cod, #phone_number, #fax_number, #email, #state_registration, #municipal_registration, #cep_cobr, #country_cobr, #uf_cobr, #city_cobr, #neighborhood_cobr, #address_cobr, #address_number_cobr, #address_complement_cobr, #mailbox_cobr, #cnpjCpf_cobr, #state_registration_cobr').val('');
                $('#name, #cep_cobr, #fantasy_name, #cep, #country, #uf, #city, #neighborhood, #address, #address_number, #address_complement, #mailbox, #suframa_cod, #phone_number, #fax_number, #email, #inscricao-municipal-isento, #inscricao-estadual-isento, #inscricao-estadual-isento-2, #municipal_registration, #state_registration, #state_registration_cobr, #contribuinte-sim, #contribuinte-nao, #endereco-cobranca-igual, #cep_cobr, #country_cobr, #uf_cobr, #city_cobr, #neighborhood_cobr, #address_cobr, #address_number_cobr, #address_complement_cobr, #mailbox_cobr, #cnpjCpf_cobr').prop('disabled', false);
                $('#cadastrar_abrir_ccm').val('Cadastrar e Abrir CCM');
                $('#ccmForm').attr('action', '{{ path('ccm_new_client_post') }}');
            });

            $('#cnpj_cpf').focusout(function () {
                var cnpjCpf = $(this).val();

                $.ajax({
                    url: '{{ path('customer_data') }}',
                    type: 'POST',
                    data: { cnpjCpf: cnpjCpf },
                    dataType: 'json',
                    success: function (data) {
                        if ('error' in data) {
                            console.error('Erro ao obter dados do cliente:', data.error);
                        } else {
                            $('#name, #cep_cobr, #fantasy_name, #cep, #country, #uf, #city, #neighborhood, #address, #address_number, #address_complement, #mailbox, #suframa_cod, #phone_number, #fax_number, #email, #state_registration, #municipal_registration, #cep_cobr, #country_cobr, #uf_cobr, #city_cobr, #neighborhood_cobr, #address_cobr, #address_number_cobr, #address_complement_cobr, #mailbox_cobr, #cnpjCpf_cobr, #state_registration_cobr').val(function () {
                                return data[$(this).attr('id')];
                            });

                            if (data.icms) {
                                $('input[name="contribuinte-icms"][value="Sim"]').prop('checked', true);
                            } else {
                                $('input[name="contribuinte-icms"][value="Não"]').prop('checked', true);
                            }

                            if (data.clientExists) {
                                disableFields();
                            }
                            
                            // Verifique se o cliente existe e atualize apenas o botão "Cadastrar e Abrir CCM"
                            if (data.clientExists) {
                                $('#cadastrar_abrir_ccm').val('Abrir CCM');
                                $('#ccmForm').attr('action', '{{ path('ccm_new_client_post') }}');
                            } else {
                                $('#cadastrar_abrir_ccm').val('Cadastrar e Abrir CCM');
                                $('#ccmForm').attr('action', '{{ path('ccm_new_client_post') }}');
                            }
                        }
                    },

                    error: function (xhr, status, error) {
                        console.error('Erro ao obter dados do cliente:');
                        console.error('Status:', status);
                        console.error('Error:', error);
                        console.error('Response Text:', xhr.responseText);
                    }
                });
            });
        });

        // Formatação dos campos
        $(document).ready(function () {
            // Permitir apenas números para os campos e 2 letras (maiúsculas) para a UF
            function formatAndValidateInput(inputId, maxLength, allowLetters = false, toUpperCase = false) {
                $(inputId).on('input', function () {
                    var inputValue = $(this).val();
                    
                    if (allowLetters) {
                        inputValue = inputValue.replace(/[^A-Za-z]/g, '');
                    } else {
                        inputValue = inputValue.replace(/[^\w]/g, '');
                    }
                    
                    if (toUpperCase) {
                        inputValue = inputValue.toUpperCase();
                    }

                    var formattedValue = inputValue.substring(0, maxLength);
                    $(this).val(formattedValue);
                });
            }

            formatAndValidateInput('#cnpj_cpf, #cnpjCpf_cobr', 14);
            formatAndValidateInput('#cep, #cep_cobr, #mailbox', 8);
            formatAndValidateInput('#phone_number, #fax_number, #municipal_registration', 11); 
            formatAndValidateInput('#suframa_cod, #state_registration, #state_registration_cobr', 9);
            formatAndValidateInput('#mailbox', 15);
            formatAndValidateInput('#address_number, #address_number_cobr', 7); 
            formatAndValidateInput('#uf, #uf_cobr', 2, true, true);

            // Formatação de primeira letra em maiúscula para os campos abaixo
            function formatFirstLetterToUpper(inputId) {
                $(inputId).on('input', function () {
                    var inputValue = $(this).val();

                    if (inputValue.length > 0) {
                        inputValue = inputValue.charAt(0).toUpperCase() + inputValue.slice(1);
                    }

                    $(this).val(inputValue);
                });
            }
            formatFirstLetterToUpper('#name, #fantasy_name, #country, #city, #neighborhood, #address, #country_cobr, #city_cobr, #neighborhood_cobr, #address_cobr');

            // Máximo de caracteres para nome e nome_fantasia
            $('#name, #fantasy_name').on('input', function () {
                var inputValue = $(this).val().replace(/\s/g, '');
                if (inputValue.length > 150) {
                    $(this).val(inputValue.substr(0, 150));
                }
            });

            // Formatação com / e . para CPF e CNPJ
            $('#cnpj_cpf, #cnpjCpf_cobr').on('focusout', function () {
                var inputValue = $(this).val().replace(/[^\d]/g, '');
                var formattedValue;

                if (inputValue.length === 11) {
                    formattedValue = formatCPF(inputValue);
                } else if (inputValue.length === 14) {
                    formattedValue = formatCNPJ(inputValue);
                } else {
                    formattedValue = inputValue;
                }

                $(this).val(formattedValue);
            });

            // Formatação para CEP
            $('#cep, #cep_cobr').on('focusout', function () {
                var inputValue = $(this).val().replace(/[^\d]/g, '')
                var formattedValue = formatCEP(inputValue);
                $(this).val(formattedValue);
            });

            // Formatação para telefones
            $('#phone_number, #fax_number').on('focusout', function () {
                var inputValue = $(this).val().replace(/[^\d]/g, '');
                var formattedValue = formatPhoneNumber(inputValue);
                $(this).val(formattedValue);
            });
            
            // Formatação para código suframa
            $('#suframa_cod').on('input', function () {
                var inputValue = $(this).val().replace(/[^\d]/g, '');
                var formattedValue = formatSuframaCod(inputValue);
                $(this).val(formattedValue);
            });

            // Formatação para email
            $('#email').on('input', function () {
                var inputValue = $(this).val().toLowerCase(); 
                $(this).val(inputValue);
            });

            $('#email').on('focusout', function () {
                var inputValue = $(this).val()
                var errorMessageElement = $('#email-error-message');

                if (!isValidEmail(inputValue)) {
                    errorMessageElement.text('Insira um endereço de e-mail válido.');
                    errorMessageElement.show(); 
                } else {
                    errorMessageElement.hide(); 
                }
            });

            function isValidEmail(email) {
                var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                return emailRegex.test(email);
            }

            function formatCPF(value) {
                return value.replace(/(\d{3})(\d{3})(\d{3})(\d{2})/, '$1.$2.$3-$4');
            }

            function formatCNPJ(value) {
                return value.replace(/(\d{2})(\d{3})(\d{3})(\d{4})(\d{2})/, '$1.$2.$3/$4-$5')
            }

            function formatCEP(value) {
                return value.replace(/(\d{5})(\d{3})/, '$1-$2');
            }

            function formatPhoneNumber(value) {
                return value.replace(/(\d{2})(\d{4,5})(\d{4})/, '($1) $2-$3');       
            }

            function formatSuframaCod(value) {
                value = value
                return value;
            }

            // Retirar a formatação para salvar no banco de dados
            $('#ccmForm').on('submit', function () {
                var cnpjCpfValue = $('#cnpj_cpf').val().replace(/[^\d]/g, '');
                var cnpjCpfCobrValue = $('#cnpjCpf_cobr').val().replace(/[^\d]/g, '');
                var cepValue = $('#cep').val().replace(/[^\d]/g, '');
                var cepCobrValue = $('#cep_cobr').val().replace(/[^\d]/g, '');

                $('#cnpj_cpf').val(cnpjCpfValue);
                $('#cnpjCpf_cobr').val(cnpjCpfCobrValue);
                $('#cep').val(cepValue);
                $('#cep_cobr').val(cepCobrValue);

                var phoneValue = $('#phone_number').val().replace(/[^\d]/g, '');
                $('#phone_number').val(phoneValue);

                var faxValue = $('#fax_number').val().replace(/[^\d]/g, '');
                $('#fax_number').val(faxValue);
            });
        });
    </script>
{% endblock %}