@extends('layouts.app')

@section('title', 'Veriqo - Payment History')

@section('content')

    <!-- main content -->
    <main class="page-content">

        <!-- payment history -->
        <section class="payment_history animate-on-scroll" data-animation="fadeInLeft">
            <div class="container">
                <div class="payment_history_info">
                    <h1>Payment History</h1>
                    <div class="payment_history_content">
                        <div class="payment_history_data">
                            <div class="table-responsive">
                                <table class="table table-bordered m-0">
                                    <thead>
                                        <tr>
                                            <th>Order ID</th>
                                            <th>Date</th>
                                            <th>Amount</th>
                                            <th>Status</th>
                                            <th>Download</th>
                                        </tr>
                                    </thead>
                                    <tbody id="paymentTableBody">
                                        <!-- Payment rows will be dynamically inserted here -->
                                    </tbody>
                                </table>
                            </div>
                            <div class="table_pagination">
                                <button class="btn paginate_btn" id="prevBtn">
                                    <img src="assets/image/previous.png" width="20" alt="" srcset="">    
                                    <span>Previous</span>
                                </button>
                                <ul id="paginationList">
                                    <!-- Page numbers will be dynamically inserted here -->
                                </ul>
                                <button class="btn paginate_btn" id="nextBtn">
                                    <span>Next</span>
                                    <img src="assets/image/next.png" width="20" alt="" srcset=""> 
                                </button>
                            </div>
                            <div id="emptyState" style="display: none; text-align: center; padding: 40px;">
                                <p style="color: #999; font-size: 16px;">No payment history found.</p>
                            </div>
                            <div id="errorState" style="display: none; text-align: center; padding: 40px;">
                                <p style="color: #dc3545; font-size: 16px;" id="errorMessage"></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

@endsection
  
  <script src="./assets/js/jquery.min.js"></script>
  <script src="./assets/js/bs.min.js"></script>
  <script src="./assets/js/custom.js"></script>
  <script src="./assets/js/modal-utils.js"></script>

  <!-- Payment History JavaScript -->
  <script> 

    // API base URL
    const API_BASE_URL = 'https://veriqo.xceltec.in/';
    
    // Current pagination state
    let currentPage = 1;
    let pageSize = 10;
    let totalPayments = 0;
    let totalPages = 0;
    
    // Export payment receipt as PDF (global function)
    window.exportPaymentReceipt = async function(paymentId) {
      try {
        // Get JWT token from localStorage or sessionStorage
        const token = localStorage.getItem('access_token');
        
        if (!token) {
          alert('Please sign in to export receipts.');
          window.location.href = './sign-in.html';
          return;
        }
        
        // Show loading state (optional - you can add a spinner)
        console.log('Exporting receipt for payment:', paymentId);
        
        // Call API to get PDF
        const response = await fetch(
          `${API_BASE_URL}/api/payments/export/${paymentId}`,
          {
            method: 'GET',
            headers: {
              'Authorization': `Bearer ${token}`,
              'Content-Type': 'application/json'
            }
          }
        );
        
        // Handle errors
        if (response.status === 401) {
          localStorage.removeItem('access_token');
          localStorage.removeItem('user');
          localStorage.removeItem('remember_me_used'); // Clear Remember Me flag
          sessionStorage.removeItem('access_token');
          sessionStorage.removeItem('user');
          alert('Session expired. Please sign in again.');
          window.location.href = './sign-in.html';
          return;
        }
        
        if (!response.ok) {
          const errorData = await response.json().catch(() => ({ detail: 'Failed to export receipt' }));
          alert(errorData.detail || 'Failed to export receipt. Please try again.');
          return;
        }
        
        // Get PDF blob
        const blob = await response.blob();
        
        // Create download link
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = `receipt_${paymentId}.pdf`;
        document.body.appendChild(a);
        a.click();
        
        // Cleanup
        window.URL.revokeObjectURL(url);
        document.body.removeChild(a);
        
        console.log('Receipt exported successfully');
        
      } catch (error) {
        console.error('Error exporting receipt:', error);
        alert('Failed to export receipt. Please try again.');
      }
    };
    
     $(document).ready(function() {
      // Check authentication status and show/hide profile or sign in button
      function checkAuthAndUpdateUI() {
        var accessToken = localStorage.getItem('access_token');
        
        if (accessToken) {
          // User is logged in - show profile, hide sign in button
          $('#profileSection').show();
          $('#signInButton').hide();
          // Update profile initial
          updateProfileInitial();
        } else {
          // User is not logged in - show sign in button, hide profile
          $('#profileSection').hide();
          $('#signInButton').show();
        }
      }
      
      // Replace profile images with user initial
      function updateProfileInitial() {
        try {
          // Get user data from localStorage
          var userDataStr = localStorage.getItem('user');
          if (!userDataStr) {
            return; // No user data available
          }
          
          var userData = JSON.parse(userDataStr);
          var fullName = userData.full_name || '';
          
          // Get first alphabet letter (A-Z), ignoring all non-alphabet characters (Google-like behavior)
          var firstLetter = '';
          if (fullName && fullName.trim().length > 0) {
            var trimmedName = fullName.trim();
            // Find first A-Z letter (case-insensitive), skip hyphens, symbols, numbers, etc.
            var match = trimmedName.match(/[a-zA-Z]/);
            if (match) {
              firstLetter = match[0].toUpperCase();
            } else {
              firstLetter = '?'; // No letters found (e.g., "---", "@#$")
            }
          } else {
            firstLetter = '?'; // Fallback if no name
          }
          
          // Replace all profile images with initial div
          $('#profileSection img[src*="/profile.png"]').each(function() {
            $(this).replaceWith('<div class="profile-initial">' + firstLetter + '</div>');
          });
          
          // Add click handler for profile initial to toggle dropdown
          $('.profile-initial').on('click', function(e) {
            e.stopPropagation();
            // Get the closest profile container and find its dropdown
            var $profileContainer = $(this).closest('.profile');
            var $dropdown = $profileContainer.find('.profile_dropdown');
            // Toggle the dropdown with slide animation (same as custom.js)
            $dropdown.slideToggle(200);
          });
        } catch (error) {
          console.error('Error updating profile initial:', error);
        }
      }
      
      // Close dropdown when clicking outside
      $(document).on('click', function(e) {
        if (!$(e.target).closest('.profile').length) {
          $('.profile_dropdown').slideUp(200);
        }
      });
      
      // Confirmation Modal Function
      function showConfirmationModal(message, onConfirm, onCancel) {
        $('#confirmationMessage').text(message);
        $('#confirmationModal').fadeIn(300);
        
        // Remove any existing handlers to prevent duplicates
        $('#confirmationYesBtn, #confirmationNoBtn').off('click');
        
        // Yes button handler
        $('#confirmationYesBtn').on('click', function() {
          $('#confirmationModal').fadeOut(300);
          if (onConfirm) {
            onConfirm();
          }
        });
        
        // No button handler
        $('#confirmationNoBtn').on('click', function() {
          $('#confirmationModal').fadeOut(300);
          if (onCancel) {
            onCancel();
          }
        });
        
        // Close on overlay click (optional - you can remove this if you don't want it)
        $('#confirmationModal').on('click', function(e) {
          if ($(e.target).hasClass('confirmation-modal')) {
            $('#confirmationModal').fadeOut(300);
            if (onCancel) {
              onCancel();
            }
          }
        });
      }
      
      // Logout functionality
      function handleLogout() {
        showConfirmationModal('Are you sure you want to logout?', function() {
          // User confirmed - proceed with logout
          // Clear all authentication data from localStorage and sessionStorage
          localStorage.removeItem('access_token');
          localStorage.removeItem('user');
          localStorage.removeItem('remember_me_used'); // Clear Remember Me flag
          sessionStorage.removeItem('access_token');
          sessionStorage.removeItem('user');
          
          // Note: We keep remembered_email and remembered_password in localStorage
          // so they persist after logout (only cleared if Remember Me was unchecked)
          
          // Redirect to index.html (refresh page to show sign in button)
          window.location.href = './index.html';
        });
      }
      
      // Delete account functionality
      function handleDeleteAccount() {
        showConfirmationModal('Are you sure you want to delete your account? This action cannot be undone.', function() {
          // User confirmed - proceed with account deletion
          // Get access token from localStorage
          var accessToken = localStorage.getItem('access_token');
          
          if (!accessToken) {
            alert('You are not logged in. Please log in again.');
            window.location.href = './index.html';
            return;
          }
          
          // Call backend API to delete account
          $.ajax({
            url: API_BASE_URL + '/api/auth/delete-account',
            method: 'DELETE',
            headers: {
              'Authorization': 'Bearer ' + accessToken,
              'Content-Type': 'application/json'
            },
            success: function(response) {
              // Clear all authentication data from localStorage and sessionStorage
              localStorage.removeItem('access_token');
              localStorage.removeItem('user');
              localStorage.removeItem('remember_me_used'); // Clear Remember Me flag
              sessionStorage.removeItem('access_token');
              sessionStorage.removeItem('user');
              
              // Clear remembered credentials on account deletion (account no longer exists)
              localStorage.removeItem('remembered_email');
              localStorage.removeItem('remembered_password');
              
              // Redirect to index.html
              alert('Your account has been deleted successfully.');
              window.location.href = './index.html';
            },
            error: function(xhr) {
              console.error('Delete account error:', xhr.responseJSON);
              var errorMsg = xhr.responseJSON?.detail || 'An error occurred while deleting your account. Please try again.';
              
              // If token is invalid/expired, clear localStorage and sessionStorage and redirect
              if (xhr.status === 401) {
                localStorage.removeItem('access_token');
                localStorage.removeItem('user');
                localStorage.removeItem('remember_me_used'); // Clear Remember Me flag
                sessionStorage.removeItem('access_token');
                sessionStorage.removeItem('user');
                alert('Your session has expired. Please log in again.');
                window.location.href = './index.html';
              } else {
                alert('Error: ' + errorMsg);
              }
            }
          });
        });
      }
      
      // Attach logout handler
      $('#logoutBtn, .logout-btn').on('click', function(e) {
        e.preventDefault();
        handleLogout();
      });
      
      // Attach delete account handler
      $('#deleteAccountBtn, .delete-account-btn').on('click', function(e) {
        e.preventDefault();
        handleDeleteAccount();
      });
      
      // Check authentication on page load
      checkAuthAndUpdateUI();
      
      // Handle click on "Experience the Executive AI Shadow LLM" button
      $('#experienceBtn').on('click', function() {
        // Check if user is authenticated by checking for access token in localStorage
        var accessToken = localStorage.getItem('access_token');
        
        if (accessToken) {
          // User is authenticated - redirect to strategic analysis page
          window.location.href = './strategic-analysis.html';
        } else {
          // User is not authenticated - redirect to sign-in page
          window.location.href = './sign-in.html';
        }
      });
    });
    // Format date as "October 1, 2025"
    function formatDate(dateString) {
      if (!dateString) return 'N/A';
      
      try {
        // Parse ISO date string or datetime string
        let dateObj;
        if (dateString.includes('T')) {
          // ISO format: "2025-10-01T10:30:00"
          dateObj = new Date(dateString);
        } else {
          // MySQL format: "2025-10-01 10:30:00"
          dateObj = new Date(dateString.replace(' ', 'T'));
        }
        
        // Format as "Month Day, Year"
        const months = ['January', 'February', 'March', 'April', 'May', 'June', 
                       'July', 'August', 'September', 'October', 'November', 'December'];
        const month = months[dateObj.getMonth()];
        const day = dateObj.getDate();
        const year = dateObj.getFullYear();
        
        return `${month} ${day}, ${year}`;
      } catch (e) {
        console.error('Error formatting date:', e);
        return dateString;
      }
    }
    
    // Format amount: convert pence to pounds and add commas
    function formatAmount(amountInPence) {
      if (!amountInPence && amountInPence !== 0) return '£0';
      
      // Convert pence to pounds
      const amountInPounds = amountInPence / 100;
      
      // Format with commas
      const formatted = amountInPounds.toLocaleString('en-GB', {
        minimumFractionDigits: 0,
        maximumFractionDigits: 0
      });
      
      return `£${formatted}`;
    }
    
    // Format status with CSS classes
    function formatStatus(status) {
      if (!status) return '<span>Unknown</span>';
      
      const statusLower = status.toLowerCase();
      if (statusLower === 'success') {
        return '<span class="success">Success</span>';
      } else if (statusLower === 'failed') {
        return '<span class="reject">Reject</span>';
      } else if (statusLower === 'pending') {
        return '<span class="pending">Pending</span>';
      } else {
        return `<span>${status}</span>`;
      }
    }
    
    // Create a payment table row
    function createPaymentRow(payment) {
      const row = document.createElement('tr');
      
      const orderId = payment.order_id || `#${payment.id}`;
      const date = formatDate(payment.updated_date);
      const amount = formatAmount(payment.amount);
      const status = formatStatus(payment.payment_status);
      
      row.innerHTML = `
        <td>${orderId}</td>
        <td>${date}</td>
        <td>${amount}</td>
        <td>${status}</td>
        <td>
          <button class="btn primary_btn" onclick="exportPaymentReceipt(${payment.id})">
            <img src="assets/image/download.png" width="18" alt="" srcset="">
            Export
          </button>
        </td>
      `;
      
      return row;
    }
    
    // Render payment table
    function renderPaymentTable(payments) {
      const tbody = document.getElementById('paymentTableBody');
      const emptyState = document.getElementById('emptyState');
      const errorState = document.getElementById('errorState');
      
      // Hide error and empty states
      errorState.style.display = 'none';
      
      // Clear existing rows
      tbody.innerHTML = '';
      
      if (!payments || payments.length === 0) {
        emptyState.style.display = 'block';
        return;
      }
      
      // Show table, hide empty state
      emptyState.style.display = 'none';
      
      // Create and append rows
      payments.forEach(payment => {
        const row = createPaymentRow(payment);
        tbody.appendChild(row);
      });
    }
    
    // Update pagination controls
    function updatePagination(page, total, pageSize) {
      currentPage = page;
      totalPayments = total;
      totalPages = Math.ceil(total / pageSize);
      
      const prevBtn = document.getElementById('prevBtn');
      const nextBtn = document.getElementById('nextBtn');
      const paginationList = document.getElementById('paginationList');
      
      // Enable/disable Previous button
      if (currentPage <= 1) {
        prevBtn.disabled = true;
        prevBtn.style.opacity = '0.5';
        prevBtn.style.cursor = 'not-allowed';
      } else {
        prevBtn.disabled = false;
        prevBtn.style.opacity = '1';
        prevBtn.style.cursor = 'pointer';
      }
      
      // Enable/disable Next button
      if (currentPage >= totalPages) {
        nextBtn.disabled = true;
        nextBtn.style.opacity = '0.5';
        nextBtn.style.cursor = 'not-allowed';
      } else {
        nextBtn.disabled = false;
        nextBtn.style.opacity = '1';
        nextBtn.style.cursor = 'pointer';
      }
      
      // Generate page numbers
      paginationList.innerHTML = '';
      
      if (totalPages === 0) {
        return;
      }
      
      // Show max 10 page numbers
      let startPage = Math.max(1, currentPage - 4);
      let endPage = Math.min(totalPages, startPage + 9);
      
      // Adjust start if we're near the end
      if (endPage - startPage < 9) {
        startPage = Math.max(1, endPage - 9);
      }
      
      // Add first page if not in range
      if (startPage > 1) {
        const li = document.createElement('li');
        li.innerHTML = `<a href="#" class="page-link" data-page="1">1</a>`;
        paginationList.appendChild(li);
        
        if (startPage > 2) {
          const liEllipsis = document.createElement('li');
          liEllipsis.innerHTML = `<a href="#" class="page-link">...</a>`;
          paginationList.appendChild(liEllipsis);
        }
      }
      
      // Add page numbers in range
      for (let i = startPage; i <= endPage; i++) {
        const li = document.createElement('li');
        const activeClass = i === currentPage ? 'active' : '';
        li.innerHTML = `<a href="#" class="page-link ${activeClass}" data-page="${i}">${i}</a>`;
        paginationList.appendChild(li);
      }
      
      // Add last page if not in range
      if (endPage < totalPages) {
        if (endPage < totalPages - 1) {
          const liEllipsis = document.createElement('li');
          liEllipsis.innerHTML = `<a href="#" class="page-link">...</a>`;
          paginationList.appendChild(liEllipsis);
        }
        
        const li = document.createElement('li');
        li.innerHTML = `<a href="#" class="page-link" data-page="${totalPages}">${totalPages}</a>`;
        paginationList.appendChild(li);
      }
    }
    
    // Fetch payment history from API
    async function fetchPaymentHistory(page = 1, pageSize = 10) {
      try {
        // Get JWT token from localStorage or sessionStorage
        const token = localStorage.getItem('access_token');
        
        if (!token) {
          // Redirect to sign-in if not logged in
          window.location.href = './sign-in.html';
          return;
        }
        
        // Hide error state
        document.getElementById('errorState').style.display = 'none';
        
        // Show loading state (optional - you can add a spinner here)
        const tbody = document.getElementById('paymentTableBody');
        tbody.innerHTML = '<tr><td colspan="5" style="text-align: center; padding: 20px;">Loading...</td></tr>';
        
        // Call API
        const response = await fetch(
          `${API_BASE_URL}/api/payments/history?page=${page}&page_size=${pageSize}`,
          {
            method: 'GET',
            headers: {
              'Authorization': `Bearer ${token}`,
              'Content-Type': 'application/json'
            }
          }
        );
        
        // Handle different response statuses
        if (response.status === 401) {
          // Unauthorized - redirect to sign-in
          localStorage.removeItem('access_token');
          localStorage.removeItem('user');
          sessionStorage.removeItem('access_token');
          sessionStorage.removeItem('user');
          window.location.href = './sign-in.html';
          return;
        }
        
        if (response.status === 403) {
          // Forbidden
          showError('You do not have permission to view payment history.');
          return;
        }
        
        if (!response.ok) {
          // Other errors
          const errorData = await response.json().catch(() => ({ detail: 'Failed to fetch payment history' }));
          showError(errorData.detail || 'Failed to fetch payment history. Please try again.');
          return;
        }
        
        // Parse response
        const data = await response.json();
        
        // Render table rows
        renderPaymentTable(data.payments || []);
        
        // Update pagination
        updatePagination(data.page, data.total, data.page_size);
        
      } catch (error) {
        console.error('Error fetching payment history:', error);
        showError('Network error. Please check your connection and try again.');
      }
    }
    
    // Show error message
    function showError(message) {
      const errorState = document.getElementById('errorState');
      const errorMessage = document.getElementById('errorMessage');
      const tbody = document.getElementById('paymentTableBody');
      
      errorMessage.textContent = message;
      errorState.style.display = 'block';
      tbody.innerHTML = '';
    }
    
    // Handle pagination click
    function handlePaginationClick(page) {
      if (page < 1 || page > totalPages) {
        return;
      }
      
      fetchPaymentHistory(page, pageSize);
      
      // Scroll to top of table
      document.querySelector('.payment_history').scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
    
    // Initialize on page load
    $(document).ready(function() {
      // Initialize session expiry check (checks immediately and sets up periodic check)
      var expiryCheckInterval = initSessionExpiryCheck('sessionExpiredModal');
      
      // If session expired, stop execution (redirect will happen automatically)
      if (expiryCheckInterval === null) {
        return;
      }
      
      // Check if user is logged in
      const token = localStorage.getItem('access_token');
      if (!token) {
        // Redirect to sign-in
        window.location.href = './sign-in.html';
        return;
      }
      
      // Replace profile images with user initial
      function updateProfileInitial() {
        try {
          // Get user data from localStorage or sessionStorage
          var userDataStr = localStorage.getItem('user');
          if (!userDataStr) {
            return; // No user data available
          }
          
          var userData = JSON.parse(userDataStr);
          var fullName = userData.full_name || '';
          
          // Get first alphabet letter (A-Z), ignoring all non-alphabet characters (Google-like behavior)
          var firstLetter = '';
          if (fullName && fullName.trim().length > 0) {
            var trimmedName = fullName.trim();
            // Find first A-Z letter (case-insensitive), skip hyphens, symbols, numbers, etc.
            var match = trimmedName.match(/[a-zA-Z]/);
            if (match) {
              firstLetter = match[0].toUpperCase();
            } else {
              firstLetter = '?'; // No letters found (e.g., "---", "@#$")
            }
          } else {
            firstLetter = '?'; // Fallback if no name
          }
          
         
          
       
        } catch (error) {
          console.error('Error updating profile initial:', error);
        }
      }
      
      // Call function to update profile initial
      updateProfileInitial();
      
      // Load first page
      fetchPaymentHistory(1, 10);
      
      // Add click handlers for pagination buttons
      $(document).on('click', '#prevBtn', function(e) {
        e.preventDefault();
        if (currentPage > 1) {
          handlePaginationClick(currentPage - 1);
        }
      });
      
      $(document).on('click', '#nextBtn', function(e) {
        e.preventDefault();
        if (currentPage < totalPages) {
          handlePaginationClick(currentPage + 1);
        }
      });
      
      // Add click handlers for page number links
      $(document).on('click', '.page-link', function(e) {
        e.preventDefault();
        const page = parseInt($(this).attr('data-page'));
        if (page && !isNaN(page)) {
          handlePaginationClick(page);
        }
      });
      
      // Confirmation Modal Function
      function showConfirmationModal(message, onConfirm, onCancel) {
        $('#confirmationMessage').text(message);
        $('#confirmationModal').fadeIn(300);
        
        // Remove any existing handlers to prevent duplicates
        $('#confirmationYesBtn, #confirmationNoBtn').off('click');
        
        // Yes button handler
        $('#confirmationYesBtn').on('click', function() {
          $('#confirmationModal').fadeOut(300);
          if (onConfirm) {
            onConfirm();
          }
        });
        
        // No button handler
        $('#confirmationNoBtn').on('click', function() {
          $('#confirmationModal').fadeOut(300);
          if (onCancel) {
            onCancel();
          }
        });
        
        // Close on overlay click (optional - you can remove this if you don't want it)
        $('#confirmationModal').on('click', function(e) {
          if ($(e.target).hasClass('confirmation-modal')) {
            $('#confirmationModal').fadeOut(300);
            if (onCancel) {
              onCancel();
            }
          }
        });
      }
      
      // Logout functionality
      function handleLogout() {
        showConfirmationModal('Are you sure you want to logout?', function() {
          // User confirmed - proceed with logout
          // Clear all authentication data from localStorage and sessionStorage
          localStorage.removeItem('access_token');
          localStorage.removeItem('user');
          localStorage.removeItem('remember_me_used'); // Clear Remember Me flag
          sessionStorage.removeItem('access_token');
          sessionStorage.removeItem('user');
          
          // Note: We keep remembered_email and remembered_password in localStorage
          // so they persist after logout (only cleared if Remember Me was unchecked)
          
          // Redirect to index.html
          window.location.href = './index.html';
        });
      }
      
      // Attach logout handler to both logout buttons
      $('.logout-btn, #logoutBtnMobile, #logoutBtnDesktop').on('click', function(e) {
        e.preventDefault();
        handleLogout();
      });
      
      // Delete account functionality
      function handleDeleteAccount() {
        showConfirmationModal('Are you sure you want to delete your account? This action cannot be undone.', function() {
          // User confirmed - proceed with account deletion
          // Get access token from localStorage
          var accessToken = localStorage.getItem('access_token');
          
          if (!accessToken) {
            alert('You are not logged in. Please log in again.');
            window.location.href = './index.html';
            return;
          }
          
          // Call backend API to delete account
          $.ajax({
            url: API_BASE_URL + '/api/auth/delete-account',
            method: 'DELETE',
            headers: {
              'Authorization': 'Bearer ' + accessToken,
              'Content-Type': 'application/json'
            },
            success: function(response) {
              // Clear all authentication data from localStorage and sessionStorage
              localStorage.removeItem('access_token');
              localStorage.removeItem('user');
              localStorage.removeItem('remember_me_used'); // Clear Remember Me flag
              sessionStorage.removeItem('access_token');
              sessionStorage.removeItem('user');
              
              // Clear remembered credentials on account deletion (account no longer exists)
              localStorage.removeItem('remembered_email');
              localStorage.removeItem('remembered_password');
              
              // Redirect to index.html
              alert('Your account has been deleted successfully.');
              window.location.href = './index.html';
            },
            error: function(xhr) {
              console.error('Delete account error:', xhr.responseJSON);
              var errorMsg = xhr.responseJSON?.detail || 'An error occurred while deleting your account. Please try again.';
              
              // If token is invalid/expired, clear localStorage and sessionStorage and redirect
              if (xhr.status === 401) {
                localStorage.removeItem('access_token');
                localStorage.removeItem('user');
                localStorage.removeItem('remember_me_used'); // Clear Remember Me flag
                sessionStorage.removeItem('access_token');
                sessionStorage.removeItem('user');
                alert('Your session has expired. Please log in again.');
                window.location.href = './index.html';
              } else {
                alert('Error: ' + errorMsg);
              }
            }
          });
        });
      }
      
      // Attach delete account handler to both delete account buttons
      $('.delete-account-btn, #deleteAccountBtnMobile, #deleteAccountBtnDesktop').on('click', function(e) {
        e.preventDefault();
        handleDeleteAccount();
      });
      
    });
  </script>
</body>
</html>