can you please give me an example of how to implement a 'change avatar' setting, based on the code below, that will save new avatar to /avatars/{username}.png? the allowed formats would be jpg, jpeg, png, svg, webp. the code would update the column 'avatar' in 'user_avatars' table, that has two columns at the moment: 'user_id' and 'avatar' (pretty self-explanatory). also, 'avatar' column needs to be an url, so if avatar gets saved into /avatars/example_user.png (for example), the 'avatar' column for that user would be exactly that path.

the code:

<?php
     require_once '../../functions/helpers.php';
     require_once '../../functions/auth.php';
     require_once '../../functions/pdo_connection.php';

if(isset($_SESSION['user_id'])) {

  $user_id = $_SESSION['user_id'];

  $sql = "SELECT username, id, is_admin FROM users WHERE id = {$user_id}";

$stmt = $pdo->prepare($sql);

if(!$stmt){
  echo "Error preparing: " . $pdo->errorInfo()[2];
  exit;
}

$stmt->execute();

if(!$stmt){ 
  echo "Error executing: " . $pdo->errorInfo()[2];
  exit;
}

$user = $stmt->fetch(PDO::FETCH_OBJ);
if(!$user->is_admin == 1) {
	echo 'You are not allowed to access the panel.';
	die();
}
// Fetch results
$result = $stmt->fetch(PDO::FETCH_ASSOC);

$error = [];

}
?>
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Settings · Mpy Web Dashboard</title>
    <link href="sidebars.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="<?= asset('assets/css/style.css') ?>" media="all" type="text/css">
    <link href="../dashboard.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
</head>
<body>
<section id="app">

     <?php require_once '../layouts/top-nav.php'; ?>

    <section class="container-fluid">
        <section class="row">
            <section class="col-md-2 p-0">
              <?php require_once '../layouts/sidebar.php'; ?>
            </section>
            <section class="col-md-10 pb-3">

                <section style="min-height: 80vh;" class="d-flex justify-content-center align-items-center">
                    <section>
                        <h1 class="fs-1 fw-light">Settings</h1>
                        <h5 class="fw-light">Here you can manage your account settings.</h5>
                        <br>
                        <h2 class="fw-light">Account</h2>
                        <div class="modal fade" id="changePasswordModal" aria-hidden="true" aria-labelledby="changePasswordModal" tabindex="-1">
						  <div class="modal-dialog modal-dialog-centered">
						    <div class="modal-content">
						      <div class="modal-header">
						        <h1 class="modal-title fs-5" id="changePasswordModal">Change Password</h1>
						        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
						      </div>
						      <form method="post" action="/auth/login.php?change=1">
						      <div class="modal-body">
						        <small class="text-danger"><?php echo $error; ?></small>
						          <div class="form-floating mb-2 mt-2">
						          	<input type="hidden" name="change" value="1">
								    <input type="password" placeholder="pass" autocomplete="new-password" name="change-password" class="form-control" id="change-password">
								    <label for="change-password" class="form-label">Current Password</label>
								  </div>
								  <div class="form-floating mb-3">
								  	<input type="password" placeholder="pass" autocomplete="new-password" name="new-password" class="form-control" id="new-password">
								    <label for="new-password" class="form-label">New Password</label>
								  </div>
						      </div>
						      <div class="modal-footer">
							      	<button type="submit" name="confirm" value="no" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
							        <button type="submit" name="confirm" value="yes" class="btn btn-primary">Confirm</button>
						    	</form>
						    	<?php
									// Set default as 'no'
									if(!isset($_POST['confirm'])) {
									  $_POST['confirm'] = 'no';
									}
									if($_POST['confirm'] == 'yes') {
										$passwordHash = $user->password;
										// Compare submitted password against hashed password
										if(password_verify($_POST['change-password'], $passwordHash)) {
											$newPasswordHash = password_hash($_POST['new-password'], PASSWORD_DEFAULT);
										  	// Query to change password
											$stmt = $pdo->prepare("UPDATE users SET password = ? WHERE id = ?");
											$stmt->execute([$newPasswordHash, $user_id]);
											die();
										} else {
										  	$error = 'Password is wrong';
										  	echo $error;
										}
									}
								?>
						      </div>
						    </div>
						  </div>
						</div>
						<button class="btn btn-primary" data-bs-target="#changePasswordModal" data-bs-toggle="modal">Change Password</button>
						<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
						  <div class="modal-dialog modal-dialog-centered">
						    <div class="modal-content">
						      <div class="modal-header">
						        <h1 class="modal-title fs-5" id="exampleModalToggleLabel">Delete Account</h1>
						        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
						      </div>
						      <div class="modal-body">
						        Do you really want to delete your account? If so, click on 'Yes, delete my account' to proceed with deletion.
						      </div>
						      <div class="modal-footer">
						        <button class="btn btn-danger" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal">Yes, delete my account</button>
						      </div>
						    </div>
						  </div>
						</div>
						<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
						  <div class="modal-dialog modal-dialog-centered">
						    <div class="modal-content">
						      <div class="modal-header">
						        <h1 class="modal-title fs-5" id="exampleModalToggleLabel2">Deletion Confirmation</h1>
						        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
						      </div>
						      <form method="post">
						      <div class="modal-body">
						        Confirm the deletion by entering your password and pressing the 'Delete Account' button.
						        <?php
						        $error = '';
						        ?>
						        <small class="text-danger"><?php echo $error; ?></small>
						          <div class="form-floating mb-3 mt-2">
						          	<!--input type="hidden" name="csrf_token" value="<?php echo $_SESSION['csrf_token'] ?>"-->
								    <input type="password" placeholder="pass" autocomplete="new-password" name="password" class="form-control" id="password">
								    <label for="password" class="form-label">Password</label>
								  </div>
						      </div>
						      <div class="modal-footer">
							      	<button type="submit" name="confirm" value="no" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
							        <button type="submit" name="confirm" value="yes" class="btn btn-danger">Delete Account</button>
						    	</form>
						    	<?php
									// Set default as 'no'
									if(!isset($_POST['confirm'])) {
									  $_POST['confirm'] = 'no';
									}
									if($_POST['confirm'] == 'yes') {
										$passwordHash = $user->password;
										// Compare submitted password against hashed password
										if(password_verify($_POST['password'], $passwordHash)) {

										  	// Query to delete user
											$stmt = $pdo->prepare("DELETE FROM users WHERE id = ?");
											$stmt->execute([$user_id]);
											unset($_SESSION['user_id']);
											unset($_SESSION['username']);
											session_destroy();
											die();
										} else {
										  	$error = 'Password is wrong';
										  	echo $error;
										}
									}
								?>
						      </div>
						    </div>
						  </div>
						</div>
						<button class="btn btn-danger" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">Delete Account</button>
                    </section>
                </section>

            </section>
        </section>
    </section>


</section>

<script src="<?= asset('assets/js/jquery.min.js') ?>"></script>
<script src="<?= asset('assets/js/bootstrap.min.js') ?>"></script>
</body>
</html>