@extends('Templates/templateAdmin')

@section('Main-content')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    @if ($user->type_users == 3)
                        <h1 class="text-primary">Editar Empresa</h1>
                    @else
                        <h1 class="text-primary">Editar Utilizador</h1>
                    @endif
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        @if ($user->type_users == 3)
                            <li class="breadcrumb-item"><a href="{{ route('users.company') }}"> Empresas</a></li>
                            <li class="breadcrumb-item"><a href="{{ route('users.Show', [$user->user_id]) }}"> Detalhes da
                                    Empresa</a></li>
                            <li class="breadcrumb-item active">Editar Empresa</li>
                        @else
                            <li class="breadcrumb-item"><a href="{{ route('users.list') }}"> Utilizadores</a></li>
                            <li class="breadcrumb-item"><a href="{{ route('users.Show', [$user->user_id]) }}"> Detalhes do
                                    utilizador</a></li>
                            <li class="breadcrumb-item active">Editar Utilizador</li>
                        @endif

                    </ol>
                </div>
            </div>
        </div>
    </section>

    <section class="content">
        <div class="container-fluid">
            <div class="card card-primary">
                <div class="card-header">
                    @if ($user->type_users == 3)
                        Editar Empresa : {{ $user->user_name }}
                    @else
                        Editar Utilizador : {{ $user->user_name }}
                    @endif
                </div>
                {{-- ./card-header --}}
                <div class="card-body">
                    <form action="{{ route('users.update', $user->user_id) }}" method="POST">
                        @csrf
                        @method('PUT')

                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group text-primary">
                                    <label for="name">Nome:</label>
                                    <input type="text" class="form-control" id="user_name" name="user_name"
                                        value="{{ $user->user_name }}" required>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group text-primary">
                                    <label for="email">Email:</label>
                                    <input type="email" class="form-control" id="email" name="email"
                                        value="{{ $user->email }}" readonly style="pointer-events: none;">
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            {{-- <div class="col-sm-6">
                                <div class="form-group text-primary">
                                    <label for="password">Palavra-passe:</label>
                                    <input type="password" class="form-control" id="password" name="password"
                                        placeholder="Alterar senha">
                                </div>
                                <div class="password-requirements">
                                    <ul id="password-criteria" style=" display: none;">
                                        <li id="min-length">Pelo menos 8 caracteres</li>
                                        <li id="upper-case">Uma letra maiúscula</li>
                                        <li id="lower-case">Uma letra minúscula</li>
                                        <li id="one-number">Um número</li>
                                        <li id="special-char">Um caractere especial (@$!%*?&)</li>
                                    </ul>
                                </div>
                            </div> --}}
                            <div class="col-sm-6">
                                <div class="form-group text-primary">
                                    <label for="password">Palavra-passe:</label>
                                    <input type="password" class="form-control" id="password" name="password"
                                        placeholder="Alterar senha">
                                </div>
                                <div class="password-requirements">
                                    <ul id="password-criteria" style="display: none;">
                                        <li id="min-length">Pelo menos 8 caracteres</li>
                                        <li id="upper-case">Uma letra maiúscula</li>
                                        <li id="lower-case">Uma letra minúscula</li>
                                        <li id="one-number">Um número</li>
                                        <li id="special-char">Um caractere especial (@$!%*?&)</li>
                                    </ul>
                                </div>
                            </div>

                            <div class="col-sm-6">
                                <div class="form-group text-primary">
                                    <label for="password_confirmation">Confirme a palavra-passe:</label>
                                    <input type="password" class="form-control" id="password_confirmation"
                                        name="password_confirmation">
                                    <div id="project-password-confirm-valid"></div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group text-primary">

                                    <label for="nif">NIF:</label>
                                    <input type="text" class="form-control" id="user_nif" name="user_nif"
                                        data-type="nif" value="{{ $user->user_nif }}" required>
                                    <div id="project-number-exists-nif"></div>

                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group text-primary">
                                    <label for="user_phone">Telemóvel:</label>
                                    <input type="text" class="form-control" id="user_phone" name="user_phone"
                                        value="{{ $user->user_phone }}" required>
                                </div>
                            </div>
                        </div>

                        <!-- Não parece ser necessario alterar um tipo de utilzador, por enquanto -->
                        {{-- <div class="form-group text-primary">
                            <label for="user_type">Tipo de Utilizador:</label>
                            <select class="form-control" id="user_type" name="user_type" required>
                                <!-- Deve mostrar a Opção apenas para utilizadores 'Super_Admin' --> 
                                @if (Auth::user()->type_users == 1)
                                <option value="Super_Administrador"
                                    {{ $user->user_type == 'Super_Administrador' ? 'selected' : '' }}>Super
                                    Administrador</option>
                                @endif
                                <option value="Administrador" {{ $user->user_type == 'Administrador' ? 'selected' : '' }}>
                                    Administrador
                                </option>
                                <option value="Empresa" {{ $user->user_type == 'Empresa' ? 'selected' : '' }}>
                                    Empresa</option>
                            </select>
                        </div> --}}

                        <button type="submit" id="submitBtn" class="btn btn-light float-right">Salvar</button>
                        <a href="{{ route('users.list') }}" class="btn btn-danger float-left">Retornar</a>

                    </form>
                </div>
                {{-- ./card-body --}}
            </div>
            {{-- ./card-light --}}
        </div>
        {{-- /.container-fluid" --}}
    </section>

    <script src={{ asset('assets/dist/js/countryFlags.js') }}></script>


    {{-- <script>
        $(document).ready(function() {

            // Esta funcao foi necessaria, pois devido ao css e script para funcionar a exibicao das bandeiras, sem esta funcao, sempre que click no input, a selecao de bandeiras some, ate click fora do input
            //Nao mexer !!! se voce quiser, ter um select de paises bonito dentro do input XD
            function ensureFlagContainerVisibility() {
                const flagContainer = document.querySelector('.flag-container');
                const countryList = document.querySelector('.country-list');

                // Verifica se o .country-list está ativo
                const isCountryListActive = countryList && countryList.classList.contains('active');

                // if (!flagContainer) {
                //     console.log('Flag container não encontrado, inserindo novamente...');
                //     // Insira o código para reinserir o .flag-container no DOM aqui
                // } else {
                //     if (isCountryListActive) {
                //         // Se .country-list estiver ativo, esconde .flag-container
                //         flagContainer.style.display = 'none';
                //     } else {
                //         // Se .country-list não estiver ativo, mostra .flag-container
                //         flagContainer.style.display = 'block'; // Garantindo que não esteja escondido
                //         flagContainer.style.position = 'absolute'; // Mantendo a posição
                //         flagContainer.style.left = '0px'; // Ajustando a posição horizontal conforme necessário
                //         flagContainer.style.top = '0px'; // Ajustando a posição vertical conforme necessário
                //         flagContainer.style.zIndex = '9999'; // Garantindo que esteja acima de outros elementos
                //     }
                // }
            }

            // Chamando a função imediatamente para aplicar os estilos e configurações iniciais
            ensureFlagContainerVisibility();
            // Configurando um intervalo para verificar e aplicar os estilos periodicamente
            setInterval(ensureFlagContainerVisibility, 50); // Verifica a cada 0.05 segundo

            // Todas as Validacoes comecam a  'false' e se alteram em tempo real de acordo com o text em cada input
            var validationState = {

                nif: false,
                // pending_phone: false,
                password: false,
                password_confirmation: false
            };

            // Validação AJAX
            function validateField(type, value) {
                $.ajax({
                    url: '{{ route('validateForm') }}',
                    type: 'GET',
                    data: {
                        _token: $('input[name="_token"]').val(), // CSRF token
                        type: type,
                        value: value
                    },
                    success: function(response) {
                        // o ERRO do Nif esta vinda desta parte, pois parece que nao fica a success
                        if (response['result_' + type] === 0) {
                            validationState[type] = true;
                            updateSubmitButtonState();

                        } else {
                            validationState[type] = false;
                            updateSubmitButtonState();
                        }

                        updateUI(type, response['result_' + type]);

                    },
                    error: function(xhr, status, error) {
                        console.error("Erro na validação: ", error);
                    }

                });
            }

            // Função para atualizar a interface com base no resultado (Logs de resposta para cada Input)
            function updateUI(type, result) {
                console.log(result);
                var message;
                var borderColor;

                //Validacoes da resposta API
                switch (result) {
                    case 1:
                        message = 'O ' + type + ' já está registrado.';
                        borderColor = 'red';
                        break;
                    case 2:
                        message = 'O ' + type + ' está pendente de aprovação.';
                        borderColor = 'red';
                        break;
                    case 3:
                        message = 'O ' + type + ' já está registrado e também pendente de aprovação.';
                        borderColor = 'red';
                        break;
                    default:
                        message = 'O ' + type + ' está disponível.';
                        borderColor = 'green';
                }


                // Atualiza a mensagem e a cor da borda do input
                $('#project-number-exists-' + type).text(message).css('color', borderColor);
                $('input[name="pending_' + type + '"]').css('border', '2px solid ' + borderColor).removeClass(
                    'valid-input invalid-input').addClass(borderColor === 'red' ? 'invalid-input' :
                    'valid-input');
            }

            // Função para atualizar o estado do botão de submissão
            function updateSubmitButtonState() {
                var allValid = Object.values(validationState).every(isValid => isValid);
                $('#submitBtn').prop('disabled', !allValid);
                console.log(validationState); // Log do estado atual de validação
            }

            // Campo de Nif
            $('input[name="user_nif"]').on('input', function() {
                var nif = $(this).val();
                var type = $(this).data('type');

                // Verifica se o NIF tem o comprimento correto
                if (nif.length < 9) {
                    // Se for menor que 9 dígitos, mostra uma mensagem de erro
                    $(this).css('border', '2px solid red').removeClass('valid-input').addClass(
                        'invalid-input');
                    $('#project-number-exists-nif').text('O tamanho do NIF é incorreto.').css('color',
                        'red');
                } else {
                    // Se tiver exatamente 9 dígitos, prossegue com a validação no sistema
                    console.log('O type e : '+ type);
                    validateField(type, nif);
                }

                // Se for necessario adicioanr um regulador para o tamanho do Nif.
                //  else {
                //     // Se tiver mais de 9 dígitos, também considera como inválido
                //     $(this).css('border', '2px solid red').removeClass('valid-input').addClass(
                //         'invalid-input');
                //     $('#project-number-exists-nif').text('O NIF não deve exceder 9 dígitos.').css('color',
                //         'red');
                // }

            });

            // // Campo phone
            // $('input[name="pending_phone"]').on('input', function() {
            //     var phone = $(this).val();
            //     var type = $(this).data('type');

            //     if (phone.length < 9) {
            //         // Se for menor que 9 dígitos, mostra uma mensagem de erro
            //         $(this).css('border', '2px solid red').removeClass('valid-input').addClass(
            //             'invalid-input');
            //         $('#project-number-exists-phone').text('Numero de telemovel inexistente.').css(
            //             'color',
            //             'red');
            //     } else {
            //         validateField(type, phone);
            //         $(this).css('border', '1px solid #ced4da').removeClass('valid-input invalid-input');
            //         $('#project-number-exists-phone').text('');
            //     }
            // });

            // +
            $('input[name="password"]').on('focus', function() {
                $('#password-criteria').show();
            });
            $('input[name="password"]').on('blur', function() {
                // Você pode adicionar condições aqui para decidir quando esconder
                // Por exemplo, só esconder se a senha passar em todos os critérios
                $('#password-criteria').hide();
            });

            // Campo de Password
            $('input[name="password"]').on('input', function() {

                var password = $(this).val();

                // Verifica o comprimento da senha
                var minLength = password.length >= 8;
                $('#min-length').css('color', minLength ? 'green' : 'red');

                // Verifica a presença de uma letra maiúscula
                var upperCase = /[A-Z]/.test(password);
                $('#upper-case').css('color', upperCase ? 'green' : 'red');

                // Verifica a presença de uma letra minúscula
                var lowerCase = /[a-z]/.test(password);
                $('#lower-case').css('color', lowerCase ? 'green' : 'red');

                // Verifica a presença de um número
                var oneNumber = /\d/.test(password);
                $('#one-number').css('color', oneNumber ? 'green' : 'red');

                // Verifica a presença de um caractere especial
                var specialChar = /[@$!%*?&]/.test(password);
                $('#special-char').css('color', specialChar ? 'green' : 'red');

                // Verifica se todos os requisitos foram atendidos
                validationState.password = minLength && upperCase && lowerCase && oneNumber &&
                    specialChar;
                if (validationState.password) {
                    $(this).css('border', '2px solid green').removeClass('invalid-input').addClass(
                        'valid-input');
                    $('#project-password-valid').text('Senha forte.').css('color', 'green');
                } else {
                    $(this).css('border', '2px solid red').removeClass('valid-input').addClass(
                        'invalid-input');
                }

                // Chama a função para atualizar o estado do botão de submissão, se necessário
                updateSubmitButtonState();
            });


            $('input[name="password_confirmation"]').on('input', function() {
                var password = $('input[name="password"]').val();
                var confirmPassword = $(this).val();

                // Verifica se as senhas são iguais e se a confirmação da senha tem comprimento igual à senha
                if (password === confirmPassword && confirmPassword.length === password.length) {
                    $(this).css('border', '2px solid green').removeClass('invalid-input').addClass(
                        'valid-input');
                    $('#project-password-confirm-valid').text('As senhas coincidem.').css('color', 'green');
                    validationState.password_confirmation = true;
                } else if (confirmPassword.length < password.length) {
                    // Se a confirmação da senha é menor do que a senha, não faz nada (não mostra erro ainda)
                    $(this).css('border', '1px solid #ced4da').removeClass('invalid-input valid-input');
                    $('#project-password-confirm-valid').text(''); // Limpa qualquer mensagem anterior
                    validationState.password_confirmation =
                        false; // Considera inválido até que os comprimentos batam
                } else {
                    // Mostra mensagem de erro somente se os comprimentos são iguais mas as senhas não coincidem
                    $(this).css('border', '2px solid red').removeClass('valid-input').addClass(
                        'invalid-input');
                    $('#project-password-confirm-valid').text('As senhas não coincidem.').css('color',
                        'red');
                    validationState.password_confirmation = false;
                }

                // Atualiza o estado do botão de submissão a cada alteração
                updateSubmitButtonState();
            });


            // caso o usuário comece a corrigir a senha principal depois de um erro de confirmação
            $('input[name="pending_password"]').on('input', function() {
                // Limpa a mensagem de erro se o usuário começar a corrigir a senha principal
                if ($('input[name="password_confirmation"]').val() !== '') {
                    $('input[name="password_confirmation"]').trigger('input');
                }
            });

        });
    </script> --}}

    {{-- <script>
        $(document).ready(function() {

            // Mantém a função de visibilidade da bandeira (conforme seu comentário original)
            function ensureFlagContainerVisibility() {
                const flagContainer = document.querySelector('.flag-container');
                const countryList = document.querySelector('.country-list');

                const isCountryListActive = countryList && countryList.classList.contains('active');
            }

            ensureFlagContainerVisibility();
            setInterval(ensureFlagContainerVisibility, 50);

            // Estados de validação agora separados
            var validationState = {
                nif: false,
                password: false,
                password_confirmation: false
            };

            // Validação AJAX para NIF
            function validateNIF(value) {
                $.ajax({
                    url: '{{ route('validateForm') }}',
                    type: 'GET',
                    data: {
                        _token: $('input[name="_token"]').val(), // CSRF token
                        type: 'nif',
                        value: value
                    },
                    success: function(response) {
                        if (response.result_nif === 0) {
                            validationState.nif = true;
                        } else {
                            validationState.nif = false;
                        }
                        updateNIFUI(response.result_nif);
                        updateSubmitButtonState();
                    },
                    error: function(xhr, status, error) {
                        console.error("Erro na validação do NIF: ", error);
                    }
                });
            }

            // Função para atualizar a interface com base no resultado da validação do NIF
            function updateNIFUI(result) {
                var message;
                var borderColor;

                switch (result) {
                    case 1:
                        message = 'O NIF já está registrado.';
                        borderColor = 'red';
                        break;
                    case 2:
                        message = 'O NIF está pendente de aprovação.';
                        borderColor = 'red';
                        break;
                    case 3:
                        message = 'O NIF já está registrado e também pendente de aprovação.';
                        borderColor = 'red';
                        break;
                    default:
                        message = 'O NIF está disponível.';
                        borderColor = 'green';
                }

                $('#project-number-exists-nif').text(message).css('color', borderColor);
                $('input[name="user_nif"]').css('border', '2px solid ' + borderColor).removeClass(
                    'valid-input invalid-input').addClass(borderColor === 'red' ? 'invalid-input' :
                    'valid-input');
            }

            // Função para atualizar o estado do botão de submissão
            function updateSubmitButtonState() {
                // Habilita o botão se o NIF for válido ou se as senhas forem válidas e coincidirem
                var isNifValid = validationState.nif;
                var arePasswordsValid = validationState.password && validationState.password_confirmation;

                $('#submitBtn').prop('disabled', !(isNifValid || arePasswordsValid));
                console.log(validationState); // Log do estado atual de validação
            }

            // Campo de NIF
            $('input[name="user_nif"]').on('input', function() {
                var nif = $(this).val();

                if (nif.length < 9) {
                    $(this).css('border', '2px solid red').removeClass('valid-input').addClass(
                        'invalid-input');
                    $('#project-number-exists-nif').text('O tamanho do NIF é incorreto.').css('color',
                        'red');
                    validationState.nif = false;
                    updateSubmitButtonState();
                } else {
                    validateNIF(nif);
                }
            });

            // Validação das senhas
            $('input[name="password"]').on('input', function() {
                var password = $(this).val();

                var minLength = password.length >= 8;
                $('#min-length').css('color', minLength ? 'green' : 'red');

                var upperCase = /[A-Z]/.test(password);
                $('#upper-case').css('color', upperCase ? 'green' : 'red');

                var lowerCase = /[a-z]/.test(password);
                $('#lower-case').css('color', lowerCase ? 'green' : 'red');

                var oneNumber = /\d/.test(password);
                $('#one-number').css('color', oneNumber ? 'green' : 'red');

                var specialChar = /[@$!%*?&]/.test(password);
                $('#special-char').css('color', specialChar ? 'green' : 'red');

                validationState.password = minLength && upperCase && lowerCase && oneNumber && specialChar;

                if (validationState.password) {
                    $(this).css('border', '2px solid green').removeClass('invalid-input').addClass(
                        'valid-input');
                    $('#project-password-valid').text('Senha forte.').css('color', 'green');
                } else {
                    $(this).css('border', '2px solid red').removeClass('valid-input').addClass(
                        'invalid-input');
                }

                updateSubmitButtonState();
            });

            $('input[name="password_confirmation"]').on('input', function() {
                var password = $('input[name="password"]').val();
                var confirmPassword = $(this).val();

                if (password === confirmPassword && confirmPassword.length === password.length) {
                    $(this).css('border', '2px solid green').removeClass('invalid-input').addClass(
                        'valid-input');
                    $('#project-password-confirm-valid').text('As senhas coincidem.').css('color', 'green');
                    validationState.password_confirmation = true;
                } else if (confirmPassword.length < password.length) {
                    $(this).css('border', '1px solid #ced4da').removeClass('invalid-input valid-input');
                    $('#project-password-confirm-valid').text('');
                    validationState.password_confirmation = false;
                } else {
                    $(this).css('border', '2px solid red').removeClass('valid-input').addClass(
                        'invalid-input');
                    $('#project-password-confirm-valid').text('As senhas não coincidem.').css('color',
                        'red');
                    validationState.password_confirmation = false;
                }

                updateSubmitButtonState();
            });

            // Caso o usuário comece a corrigir a senha principal depois de um erro de confirmação
            $('input[name="pending_password"]').on('input', function() {
                if ($('input[name="password_confirmation"]').val() !== '') {
                    $('input[name="password_confirmation"]').trigger('input');
                }
            });

        });
    </script> --}}

    <script>
        $(document).ready(function() {

            // Estados de validação
            var validationState = {
                nif: false,
                password: false,
                password_confirmation: false
            };

                 // Validação AJAX para NIF
                 function validateNIF(value) {
                $.ajax({
                    url: '{{ route('validateForm') }}',
                    type: 'GET',
                    data: {
                        _token: $('input[name="_token"]').val(), // CSRF token
                        type: 'nif',
                        value: value
                    },
                    success: function(response) {
                        if (response.result_nif === 0) {
                            validationState.nif = true;
                        } else {
                            validationState.nif = false;
                        }
                        updateNIFUI(response.result_nif);
                        updateSubmitButtonState();
                    },
                    error: function(xhr, status, error) {
                        console.error("Erro na validação do NIF: ", error);
                    }
                });
            }

              // Função para atualizar a interface com base no resultado da validação do NIF
              function updateNIFUI(result) {
                var message;
                var borderColor;

                switch (result) {
                    case 1:
                        message = 'O NIF já está registrado.';
                        borderColor = 'red';
                        break;
                    case 2:
                        message = 'O NIF está pendente de aprovação.';
                        borderColor = 'red';
                        break;
                    case 3:
                        message = 'O NIF já está registrado e também pendente de aprovação.';
                        borderColor = 'red';
                        break;
                    default:
                        message = 'O NIF está disponível.';
                        borderColor = 'green';
                }

                $('#project-number-exists-nif').text(message).css('color', borderColor);
                $('input[name="user_nif"]').css('border', '2px solid ' + borderColor).removeClass(
                    'valid-input invalid-input').addClass(borderColor === 'red' ? 'invalid-input' :
                    'valid-input');
            }



            // Função para atualizar o estado do botão de submissão
            function updateSubmitButtonState() {
                var isNifValid = validationState.nif;
                var arePasswordsValid = validationState.password && validationState.password_confirmation;

                $('#submitBtn').prop('disabled', !(isNifValid || arePasswordsValid));
                console.log(validationState); // Log do estado atual de validação
            }



            // Campo de NIF
            $('input[name="user_nif"]').on('input', function() {
                var nif = $(this).val();

                if (nif.length < 9) {
                    $(this).css('border', '2px solid red').removeClass('valid-input').addClass(
                        'invalid-input');
                    $('#project-number-exists-nif').text('O tamanho do NIF é incorreto.').css('color',
                        'red');
                    validationState.nif = false;
                    updateSubmitButtonState();
                } else {
                    validateNIF(nif);
                }
            });

            // Mostrar e esconder os critérios de senha ao focar e desfocar no campo de senha
            $('input[name="password"]').on('focus', function() {
                $('#password-criteria').show();
            });

            $('input[name="password"]').on('blur', function() {
                if (validationState.password) {
                    $('#password-criteria').hide();
                }
            });

            // Validação das senhas
            $('input[name="password"]').on('input', function() {
                var password = $(this).val();

                var minLength = password.length >= 8;
                $('#min-length').css('color', minLength ? 'green' : 'red');

                var upperCase = /[A-Z]/.test(password);
                $('#upper-case').css('color', upperCase ? 'green' : 'red');

                var lowerCase = /[a-z]/.test(password);
                $('#lower-case').css('color', lowerCase ? 'green' : 'red');

                var oneNumber = /\d/.test(password);
                $('#one-number').css('color', oneNumber ? 'green' : 'red');

                var specialChar = /[@$!%*?&]/.test(password);
                $('#special-char').css('color', specialChar ? 'green' : 'red');

                validationState.password = minLength && upperCase && lowerCase && oneNumber && specialChar;

                if (validationState.password) {
                    $(this).css('border', '2px solid green').removeClass('invalid-input').addClass(
                        'valid-input');
                    $('#project-password-valid').text('Senha forte.').css('color', 'green');
                } else {
                    $(this).css('border', '2px solid red').removeClass('valid-input').addClass(
                        'invalid-input');
                }

                updateSubmitButtonState();
            });

            $('input[name="password_confirmation"]').on('input', function() {
                var password = $('input[name="password"]').val();
                var confirmPassword = $(this).val();

                if (password === confirmPassword && confirmPassword.length === password.length) {
                    $(this).css('border', '2px solid green').removeClass('invalid-input').addClass(
                        'valid-input');
                    $('#project-password-confirm-valid').text('As senhas coincidem.').css('color', 'green');
                    validationState.password_confirmation = true;
                } else if (confirmPassword.length < password.length) {
                    $(this).css('border', '1px solid #ced4da').removeClass('invalid-input valid-input');
                    $('#project-password-confirm-valid').text('');
                    validationState.password_confirmation = false;
                } else {
                    $(this).css('border', '2px solid red').removeClass('valid-input').addClass(
                        'invalid-input');
                    $('#project-password-confirm-valid').text('As senhas não coincidem.').css('color',
                        'red');
                    validationState.password_confirmation = false;
                }

                updateSubmitButtonState();
            });

            // Caso o usuário comece a corrigir a senha principal depois de um erro de confirmação
            $('input[name="pending_password"]').on('input', function() {
                if ($('input[name="password_confirmation"]').val() !== '') {
                    $('input[name="password_confirmation"]').trigger('input');
                }
            });

        });
    </script>
@endsection