@extends('layouts.app')

@section('title', 'Veriqo - View Profile')

@section('content')

    <!-- main content -->
    <main class="page-content">
        <section class="payment_history animate-on-scroll" data-animation="fadeInLeft">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-6 col-md-10"> 
                         <h1 class="text-center main-titlepro">View Profile</h1>
                        <div class="auth_info_box">
                            <!-- <h2>View Profile</h2> -->

                            <div class="auth_inr">
                                <table class="profile-table" style="width: 100%; border-collapse: collapse;">
                                    <tbody>
                                        <tr>
                                            <td style="padding: 15px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-weight: 600; color: var(--text-light); width: 40%;">Full Name</td>
                                            <td style="padding: 15px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); color: var(--text-gray);" id="displayFullName">Loading...</td>
                                        </tr>
                                        <tr>
                                            <td style="padding: 15px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-weight: 600; color: var(--text-light);">Email</td>
                                            <td style="padding: 15px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); color: var(--text-gray);" id="displayEmail">Loading...</td>
                                        </tr>
                                        <tr>
                                            <td style="padding: 15px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-weight: 600; color: var(--text-light);">User Type</td>
                                            <td style="padding: 15px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); color: var(--text-gray);" id="displayUserType">Loading...</td>
                                        </tr>
                                        <tr>
                                            <td style="padding: 15px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-weight: 600; color: var(--text-light);" id="activePlanLabel">Active Plan</td>
                                            <td style="padding: 15px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); color: var(--text-gray);" id="displayActivePlan">
                                                <div id="activePlanContainer" style="line-height: 1.8;">
                                                    Loading...
                                                </div>
                                            </td>
                                        </tr>
                                        <tr id="companyRow" style="display: none;">
                                            <td style="padding: 15px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-weight: 600; color: var(--text-light);">Company</td>
                                            <td style="padding: 15px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); color: var(--text-gray);" id="displayCompany">-</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

@endsection

  <!-- Confirmation Modal -->
  <div id="confirmationModal" class="confirmation-modal" style="display: none;">
    <div class="modal-content">
      <p class="confirmation-message" id="confirmationMessage"></p>
      <div class="confirmation-buttons">
        <button id="confirmationYesBtn" class="btn-confirm-yes">Yes</button>
        <button id="confirmationNoBtn" class="btn-confirm-no">No</button>
      </div>
    </div>
  </div>

  
  <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>

  <script>
    // Backend API base URL - Update this when deploying to production
    const API_BASE_URL = 'https://veriqo.xceltec.in/'; 
     $(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';
        }
      });
    });

    $(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;
      }

      // Get access token from localStorage or sessionStorage
      var accessToken = localStorage.getItem('access_token');
      var userData = null;

      // Try to get user data from localStorage or sessionStorage (stored during login)
      var storedUser = localStorage.getItem('user');
      if (storedUser) {
        try {
          userData = JSON.parse(storedUser);
        } catch (e) {
          // Error parsing user data - will use API fallback
        }
      } 

      // Check if user is logged in
      if (!accessToken || accessToken.trim() === '') {
        // No token - redirect to sign-in
        window.location.href = './sign-in.html';
        return;
      } 


      // Trim token to remove any whitespace
      accessToken = accessToken.trim();




      // Replace profile images with user initial
      function updateProfileInitial() {
        try {
          var userDataStr = localStorage.getItem('user');
          if (!userDataStr) {
            return;
          }

          var userData = JSON.parse(userDataStr);
          var fullName = userData.full_name || '';

          var firstLetter = '';
          if (fullName && fullName.trim().length > 0) {
            var trimmedName = fullName.trim();
            var match = trimmedName.match(/[a-zA-Z]/);
            if (match) {
              firstLetter = match[0].toUpperCase();
            } else {
              firstLetter = '?';
            }
          } else {
            firstLetter = '?';
          }

        
        } catch (error) {
          console.error('Error updating profile initial:', error);
        }
      }

      updateProfileInitial();

      // Function to refresh access token using refresh token
      function refreshAccessToken(callback) {
        var refreshToken = localStorage.getItem('refresh_token');
        if (!refreshToken) {
          callback(false);
          return;
        }

        $.ajax({
          url: API_BASE_URL + '/api/auth/refresh',
          method: 'POST',
          contentType: 'application/json',
          data: JSON.stringify({ refresh_token: refreshToken }),
          success: function (response) {
            if (response.access_token) {
              localStorage.setItem('access_token', response.access_token);
              accessToken = response.access_token;
              callback(true);
            } else {
              callback(false);
            }
          },
          error: function (xhr) {
            callback(false);
          }
        });
      }

      // Function to fetch and display active subscriptions
      function fetchActiveSubscriptions() {
        $.ajax({
          url: API_BASE_URL + '/api/subscriptions/current',
          method: 'GET',
          headers: {
            'Authorization': 'Bearer ' + accessToken
          },
          success: function (subscriptions) {
            displayActivePlans(subscriptions);
          },
          error: function (xhr) {
            if (xhr.status === 403 || xhr.status === 404) {
              $('#activePlanContainer').html('<span style="color: var(--text-gray);">No active plan</span>');
              $('#activePlanLabel').text('Active Plan');
            } else {
              $('#activePlanContainer').html('<span style="color: var(--text-gray);">Unable to load plans</span>');
              $('#activePlanLabel').text('Active Plan');
            }
          }
        });
      }

      // Function to display active plans
      function displayActivePlans(subscriptions) {
        var container = $('#activePlanContainer');
        var labelElement = $('#activePlanLabel');

        if (!subscriptions || subscriptions.length === 0) {
          container.html('<span style="color: var(--text-gray);">No active plan</span>');
          labelElement.text('Active Plan');
          return;
        }

        if (subscriptions.length === 1) {
          labelElement.text('Active Plan');
        } else {
          labelElement.text('Active Plans');
        }

        var planTiers = {
          'professional': 3,
          'executive': 2,
          'starter': 1
        };

        var sortedSubscriptions = subscriptions.sort(function (a, b) {
          var planA = (a.plan_name || '').toLowerCase();
          var planB = (b.plan_name || '').toLowerCase();
          var tierA = planTiers[planA] || 0;
          var tierB = planTiers[planB] || 0;
          return tierB - tierA;
        });

        var html = '';
        var planNames = [];
        var previousTier = null;

        sortedSubscriptions.forEach(function (sub) {
          var planName = (sub.plan_name || 'Unknown').toLowerCase();
          var displayName = (sub.plan_name || 'Unknown').charAt(0).toUpperCase() + (sub.plan_name || 'Unknown').slice(1).toLowerCase();

          if (planNames.indexOf(planName) === -1) {
            planNames.push(planName);
            var tier = planTiers[planName] || 0;

            if (previousTier !== null && previousTier > tier) {
              html += '<div style="border-top: 1px solid rgba(255, 255, 255, 0.2); margin: 8px 0;"></div>';
            }

            html += '<div style="margin-bottom: 8px;"><span style="font-weight: 600; color: var(--text-light);">' + displayName + '</span></div>';

            previousTier = tier;
          }
        });

        if (html === '') {
          container.html('<span style="color: var(--text-gray);">No active plan</span>');
        } else {
          container.html(html);
        }
      }

      // Fetch user profile
      function fetchUserProfile() {
        $.ajax({
          url: API_BASE_URL + '/api/auth/user_profile',
          method: 'GET',
          headers: {
            'Authorization': 'Bearer ' + accessToken
          },
          success: function (userProfile) {
            $('#displayFullName').text(userProfile.full_name || '-');
            $('#displayEmail').text(userProfile.email || '-');

            var userType = userProfile.user_type || 'individual';
            if (userProfile.company_id && userProfile.company_id !== 0) {
              userType = 'company';
            }

            $('#displayUserType').text(userType.charAt(0).toUpperCase() + userType.slice(1));

            if (userType === 'company' && userProfile.company_name) {
              $('#displayCompany').text(userProfile.company_name);
              $('#companyRow').show();
            } else {
              $('#companyRow').hide();
            }

            localStorage.setItem('user', JSON.stringify(userProfile));
            fetchActiveSubscriptions();
          },
          error: function (xhr) {
            if (userData) {
              $('#displayFullName').text(userData.full_name || '-');
              $('#displayEmail').text(userData.email || '-');

              var userType = 'individual';
              if (userData.company_id && userData.company_id !== null && userData.company_id !== 0) {
                userType = 'company';
              }

              $('#displayUserType').text(userType.charAt(0).toUpperCase() + userType.slice(1));

              if (userType === 'company') {
                $('#companyRow').show();
                $('#displayCompany').text('-');
              } else {
                $('#companyRow').hide();
              }

              fetchActiveSubscriptions();
            } else {
              alert('Unable to load user profile. Please sign in again.');
              window.location.href = './sign-in.html';
            }
          }
        });
      }

      fetchUserProfile();

      // Confirmation Modal
      function showConfirmationModal(message, onConfirm, onCancel) {
        $('#confirmationMessage').text(message);
        $('#confirmationModal').fadeIn(300);

        $('#confirmationYesBtn, #confirmationNoBtn').off('click');

        $('#confirmationYesBtn').on('click', function () {
          $('#confirmationModal').fadeOut(300);
          if (onConfirm) onConfirm();
        });

        $('#confirmationNoBtn').on('click', function () {
          $('#confirmationModal').fadeOut(300);
          if (onCancel) onCancel();
        });

        $('#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 () {
          localStorage.removeItem('access_token');
          localStorage.removeItem('user');
          localStorage.removeItem('remember_me_used');
          sessionStorage.removeItem('access_token');
          sessionStorage.removeItem('user');
          window.location.href = './index.html';
        });
      }

      $('.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 () {
            var accessToken = localStorage.getItem('access_token');

            if (!accessToken) {
              alert('You are not logged in. Please log in again.');
              window.location.href = './index.html';
              return;
            }

            $.ajax({
              url: API_BASE_URL + '/api/auth/delete-account',
              method: 'DELETE',
              headers: {
                'Authorization': 'Bearer ' + accessToken,
                'Content-Type': 'application/json'
              },
              success: function (response) {
                localStorage.removeItem('access_token');
                localStorage.removeItem('user');
                localStorage.removeItem('remember_me_used');
                sessionStorage.removeItem('access_token');
                sessionStorage.removeItem('user');

                localStorage.removeItem('remembered_email');
                localStorage.removeItem('remembered_password');

                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 (xhr.status === 401) {
                  localStorage.removeItem('access_token');
                  localStorage.removeItem('user');
                  localStorage.removeItem('remember_me_used');
                  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);
                }
              }
            });
          }
        );
      }  // ✅ FIXED missing bracket

      $('.delete-account-btn, #deleteAccountBtnMobile, #deleteAccountBtnDesktop').on('click', function (e) {
        e.preventDefault();
        handleDeleteAccount();
      });

    }); 

  </script>

</body>
</html>