<h1>Account Management</h1>

<div class="panel">
  <h2>Account Information</h2>
  <p><strong>Email:</strong> <%= user.email %></p>
  <p><strong>Account Created:</strong> <%= new Date(user.created_at).toLocaleString() %></p>
</div>

<div class="panel">
  <h2>Notifications Preferences</h2>
  <form id="notifications-form">
    <div class="form-group form-group-checkbox">
      <input type="checkbox" id="email-notifications" <% if (user.email_notifications) { %>checked<% } %>>
      <label for="email-notifications">Receive email notifications</label>
    </div>
    <button type="submit" class="btn btn-primary">Save Changes</button>
  </form>
</div>

<div class="panel">
  <h2>Change Password</h2>
  <form id="change-password-form">
    <div class="form-group">
      <label for="current-password">Current Password:</label>
      <input type="password" id="current-password" name="currentPassword" required>
    </div>
    <div class="form-group">
      <label for="new-password">New Password:</label>
      <input type="password" id="new-password" name="newPassword" required>
    </div>
    <div class="form-group">
      <label for="confirm-new-password">Confirm New Password:</label>
      <input type="password" id="confirm-new-password" name="confirmNewPassword" required>
    </div>
    <button type="submit" class="btn btn-primary">Change Password</button>
  </form>
</div>

<div class="panel">
  <h2>Delete Account</h2>
  <p>Warning: This action cannot be undone. All your data will be permanently deleted.</p>
  <button id="delete-account-btn" class="btn btn-danger">Delete Account</button>
</div>

<script>
$(document).ready(function() {
  $('#change-password-form').submit(function(e) {
    e.preventDefault();
    const currentPassword = $('#current-password').val();
    const newPassword = $('#new-password').val();
    const confirmNewPassword = $('#confirm-new-password').val();

    if (newPassword !== confirmNewPassword) {
      alert('New passwords do not match.');
      return;
    }

    $.ajax({
      url: '/account/change-password',
      method: 'POST',
      data: {
        currentPassword: currentPassword,
        newPassword: newPassword
      },
      success: function(response) {
        alert('Password changed successfully.');
        $('#change-password-form')[0].reset();
      },
      error: function(xhr) {
        alert('Error: ' + xhr.responseJSON.error);
      }
    });
  });

  $('#delete-account-btn').click(function() {
    if (confirm('Are you sure you want to delete your account? This action cannot be undone.')) {
      $.ajax({
        url: '/account/delete',
        method: 'POST',
        success: function(response) {
          alert('Account deleted successfully.');
          window.location.href = '/';
        },
        error: function(xhr) {
          alert('Error: ' + xhr.responseJSON.error);
        }
      });
    }
  });

  $('#notifications-form').submit(function(e) {
    e.preventDefault();
    const emailNotifications = $('#email-notifications').is(':checked');

    $.ajax({
      url: '/account/email-notifications',
      method: 'POST',
      data: {
        emailNotifications: emailNotifications
      },
      success: function(response) {
        alert('Notification preferences updated successfully.');
      },
      error: function(xhr) {
        alert('Error: ' + xhr.responseJSON.error);
      }
    });
  });
});
</script>