<?php
require '../conexao/conexao.php';
require '../configuacoes.php';
require '../sessao.php';

$pageTitle = "Alterar Senha";


?>

<!DOCTYPE html>
<html lang="pt-br">
<?php
include('../geral/header.php');
?>

<body>

    <!-- Navigation Bar-->
    <?php
    include('../geral/menu.php');
    ?>
    <!-- End Navigation Bar-->

    <!-- ============================================================== -->
    <!-- Start Page Content here -->
    <!-- ============================================================== -->

    <div class="wrapper">
        <div class="container-fluid">
            <div class="card-box mt-3">
                <div class="row">
                    <div class="col-6 text-left">
                        <h4 class="page-title">
                            <?php echo $pageTitle; ?>
                        </h4>
                    </div>
                    <div class="col-6 text-right">
                        <button onclick="goBack()" class="btn btn-light"><i class="mdi mdi-keyboard-backspace"></i> Voltar</button>
                    </div>
                    <div class="col-12">
                        <hr>
                    </div>
                    <div class="divPass mt-3">
                        <div class="col-12">
                            <form id="PasswordForm" method="post" action="processa_alteracao_senha_usuario.php" onsubmit="return validarFormulario();">
                                <div class="mb-3 mt-3">
                                    <label for="newPassword" class="form-label">Nova Senha</label>
                                    <div class="input-group">
                                        <input type="password" class="form-control" id="newPassword" placeholder="Nova Senha" name="newPassword" required>
                                        <div class="input-group-append">
                                            <span class="btn-show-pass input-group-text" onclick="togglePasswordVisibility('newPassword', this)">
                                                <i class="mdi mdi-eye"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label for="confirmNewPassword" class="form-label">Confirmar Nova Senha</label>
                                    <div class="input-group">
                                        <input type="password" class="form-control" id="confirmNewPassword" placeholder="Confirme sua nova senha" name="confirmNewPassword" required>
                                        <div class="input-group-append">
                                            <span class="btn-show-pass input-group-text" onclick="togglePasswordVisibility('confirmNewPassword', this)">
                                                <i class="mdi mdi-eye"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="text-right mb-2">
                                    <a href="#" class="btn btn-warning mr-2" onclick="limparFormulario()"><i class="mdi mdi-plus"></i> Limpar</a>
                                    <button type="submit" class="btn btn-primary">Alterar Senha</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div> <!-- end container -->
    </div>

    <!-- end wrapper -->

    <!-- ============================================================== -->
    <!-- End Page content -->
    <!-- ============================================================== -->

    <!-- Footer Start -->
    <?php
    include('../geral/footer.php');
    ?>
    <!-- end Footer -->

    <?php
    include('../geral/mensagens_modais.php');
    ?>

    <!-- Vendor js -->
    <script src="../../assets/js/vendor.min.js"></script>
    <script src="../../assets/libs/jquery/jquery.min.js"></script>
    <script src="../../assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script>

    <!-- Init js-->
    <script src="../../assets/js/pages/form-advanced.init.js"></script>

    <!-- knob plugin -->
    <script src="../../assets/libs/jquery-knob/jquery.knob.min.js"></script>
    <!-- App js-->
    <script src="../../assets/js/app.min.js"></script>

    <script src="../geral/javascript.js"></script>


</body>

</html>

<script>
    function goBack() {
        window.history.back();
    }
</script>
<script>
    function limparFormulario() {
        var formulario = document.getElementById("PasswordForm");
        var elementos = formulario.elements;

        for (var i = 0; i < elementos.length; i++) {
            var elemento = elementos[i];

            // Limpa o valor dos campos de texto
            if (elemento.type !== "button" && elemento.type !== "submit" && elemento.tagName !== "SELECT") {
                elemento.value = "";
            }

            // Reseta o valor dos campos de seleção para a primeira opção
            if (elemento.tagName === "SELECT") {
                elemento.selectedIndex = 0;
            }
        }
    }

    function togglePasswordVisibility(fieldId, element) {
        var passwordInput = document.getElementById(fieldId);
        var icon = element.querySelector('i');
        if (passwordInput.type === 'password') {
            passwordInput.type = 'text';
            icon.classList.remove('mdi-eye');
            icon.classList.add('mdi-eye-off');
        } else {
            passwordInput.type = 'password';
            icon.classList.remove('mdi-eye-off');
            icon.classList.add('mdi-eye');
        }
    }

    function validarFormulario() {
        var newPassword = document.getElementById('newPassword').value;
        var confirmNewPassword = document.getElementById('confirmNewPassword').value;

        if (newPassword !== confirmNewPassword) {
            alert('As novas senhas não coincidem.');
            return false;
        }
        return true;
    }
</script>
<style>
    .divPass {
        padding: 6px;
        border-radius: 10px;
        width: 40%;
        margin-left: 30%;
        font-size: medium;

    }
</style>