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

{% block title %}
    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>

    <nav aria-label="breadcrumb" class="hide-on-mobile">
        <ol class="breadcrumb">
            <li class="page-directory-previous breadcrumb-item">
				<a href="{{ path('ccm') }}">CCM</a>
			</li>
            <li class="page-directory-previous breadcrumb-item">
				<a href="{{ path('ccm_client_search') }}">Clientes</a>
			</li>
            <li aria-current="page" class="breadcrumb-item active">Nova CCM</li>
        </ol>
    </nav>
    <div class="box">
        <div class="title">
            <div class="row">
                <div class="col-lg-7">
                    <h1 class="page-title">Dados do Cliente</h1>
                </div>
            </div>

            <!-- Formulário de edição -->
            <form id="updateForm" action="{{ path('ccm_new_post', {'id': id}) }}" 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" value="{{client_data.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"  value="{{client_data.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" value="{{client_data.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" value="{{client_data.cep}}"/>
                        </div>
                        <div class="input-container-Pais">
                            <label for="country">País</label>
                            <input type="text" name="country" id="country" value="{{client_data.country}}"/>
                        </div>
                        <div class="input-container-UF">
                            <label for="uf">UF</label>
                            <input type="text" name="uf" id="uf" value="{{client_data.uf}}"/>
                        </div>
                        <div class="input-container-OT">
                            <label for="city">Cidade</label>
                            <input type="text" name="city" id="city" value="{{client_data.city}}" required/>
                        </div>
                        <div class="input-container-OT">
                            <label for="neighborhood">Bairro</label>
                            <input type="text" name="neighborhood" id="neighborhood" value="{{client_data.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" value="{{client_data.address}}" required/>
                        </div>
                        <div class="input-container-NumCompl">
                            <label for="address_number">Número</label>
                            <input type="text" name="address_number" id="address_number" value="{{client_data.address_number}}"/>
                        </div>
                        <div class="input-container-NumCompl">
                            <label for="address_complement">Complemento</label>
                            <input type="text" name="address_complement" id="address_complement" value="{{client_data.address_complement}}"/>
                        </div>
                        <div class="input-container-CPeCS">
                            <label for="mailbox">Caixa Postal</label>
                            <input type="text" name="mailbox" id="mailbox" value="{{client_data.mailbox}}"/>
                        </div>
                        <div class="input-container-CPeCS">
                            <label for="suframa_cod">Código Suframa</label>
                            <input type="text" name="suframa_cod" id="suframa_cod" value="{{client_data.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" value="{{client_data.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" value="{{client_data.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" value="{{client_data.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" {% if client_data.state_registration is empty %}checked{% endif %}/>
                                <label for="inscricao-estadual-isento">Isento</label>
                            </div>
                            <input name="state_registration" id="state_registration" value="{{client_data.state_registration}}" {% if client_data.state_registration is empty %}disabled{% endif %}/>
                        </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" {% if client_data.municipal_registration is empty %}checked{% endif %}/>
                                <label for="inscricao-municipal-isento">Isento</label>
                            </div>
                            <input name="municipal_registration" id="municipal_registration" value="{{client_data.municipal_registration}}" {% if client_data.municipal_registration is empty %}disabled{% endif %}/>
                        </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" {% if client_data.icms == 1 %}checked{% endif %}/>
                                <label for="contribuinte-sim">Sim</label>
                                <input type="radio" id="contribuinte-nao" name="contribuinte-icms" value="Não" {% if client_data.icms == 0 %}checked{% endif %}/>
                                <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="true"/>
                        <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" value="{{client_data.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" value="{{client_data.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" value="{{client_data.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" value="{{client_data.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" value="{{client_data.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" value="{{client_data.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" value="{{client_data.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" value="{{client_data.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" value="{{client_data.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" value="{{client_data.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" {% if client_data.state_registration_cobr is empty %}checked{% endif %}/>
                                <label for="inscricao-estadual-isento-2">Isento</label>
                            </div>
                            <input class="input-full-width" name="state_registration_cobr" id="state_registration_cobr" value="{{client_data.state_registration_cobr}}" {% if client_data.state_registration_cobr is empty %}disabled{% endif %}/>
                        </div>
                    </div>
                </div>

                <div class="registration-cancel-button">
                    <a href="{{ path('ccm_client_search') }}" class="button-registrationCancel">Cancelar</a>
                    <div>
                        <input type="submit" class="button-registrationCancel" value="Criar CCM" id="cadastrar_abrir_ccm"/>
                    </div>
                </div>
            </form>

        </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;
                    } 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 = '';
                });
            }

        });

        // 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
            $('#updateForm').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 %}