@extends('layouts.app')

@section('title', 'Veriqo - Dashboard')

@section('content')

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

        <!-- page banner -->
        <section class="page_banner animate__animated animate__fadeInLeft animate__delay-0.5s">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-md-10">
                        <div class="page_banner_content">
                            <h1>Your AI Shadow Board</h1>
                            <p>Strategic intelligence for high-stakes decisions</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- analysis -->
        <section class="analysis">
            <div class="container">
                <div class="analysis_info">
                    <div class="start_new_analysis animate-on-scroll" data-animation="fadeInRight">
                        <div class="start_new_analysis_inr">
                            <div class="analysis_inr_star">
                                <img src="assets/image/star.png" width="35" alt="" srcset="">
                            </div>
                            <div class="start_new_analysis_content">
                                <h3>Start New Strategic Analysis</h3>
                                <p>Get board-level insights in minutes, not weeks</p>
                            </div>
                        </div>
                        <div class="start_new_analysis_btn">
                            <a href="./strategic-analysis.html">
                                <img src="assets/image/right_arrow.png" width="50" alt="" srcset="">
                            </a>
                        </div>
                    </div>
                    <div class="analysis_info_list animate-on-scroll" data-animation="fadeInUp">
                        <div class="analysis_info_item">
                            <div class="analysis_info_item_icon">
                                <div class="analysis_icon">
                                    <img src="assets/image/bar-graph.png" width="50" alt="" srcset="">
                                </div>
                                <label>+12%</label>
                            </div>
                            <div class="analysis_info_item_content">
                                <h3>23</h3>
                                <p>Analyses This Month</p>
                            </div>
                        </div>
                        <div class="analysis_info_item">
                            <div class="analysis_info_item_icon">
                                <div class="analysis_icon">
                                    <img src="assets/image/check_green.png" width="50" alt="" srcset="">
                                </div>
                                <label>+12%</label>
                            </div>
                            <div class="analysis_info_item_content">
                                <h3>19</h3>
                                <p>Decisions Validated</p>
                            </div>
                        </div>
                        <div class="analysis_info_item">
                            <div class="analysis_info_item_icon">
                                <div class="analysis_icon">
                                    <img src="assets/image/info.png" width="50" alt="" srcset="">
                                </div>
                                <label>+12%</label>
                            </div>
                            <div class="analysis_info_item_content">
                                <h3>47</h3>
                                <p>Risk Flags Identified</p>
                            </div>
                        </div>
                        <div class="analysis_info_item">
                            <div class="analysis_info_item_icon">
                                <div class="analysis_icon">
                                    <img src="assets/image/stats.png" width="50" alt="" srcset="">
                                </div>
                                <label>+12%</label>
                            </div>
                            <div class="analysis_info_item_content">
                                <h3>8.2/10</h3>
                                <p>Avg. Confidence Score</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- recent analysis -->
        <section class="recent_analysis page_sec animate-on-scroll" data-animation="fadeInLeft">
            <div class="container">
                <div class="recent_analysis_info">
                    <h2>Recent Analyses</h2>
                    <div class="recent_analysis_info_inr">
                        <div class="recent_analysis_info_content">
                            <div class="analysis_content_left">
                                <h3>Should we acquire TechCorp's AI Division?  <span>M&A</span></h3>
                                <ul>
                                    <li>
                                        <label>
                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640">
                                                <path d="M320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576C178.6 576 64 461.4 64 320C64 178.6 178.6 64 320 64zM296 184L296 320C296 328 300 335.5 306.7 340L402.7 404C413.7 411.4 428.6 408.4 436 397.3C443.4 386.2 440.4 371.4 429.3 364L344 307.2L344 184C344 170.7 333.3 160 320 160C306.7 160 296 170.7 296 184z"/>
                                            </svg>
                                            2 hours ago
                                        </label>
                                    </li>
                                    <li>
                                        <label>
                                            • $127M
                                        </label>
                                    </li>
                                </ul>
                            </div>
                            <div class="analysis_content_right">
                                <div class="analysis_content_right_inr text-end">
                                    <h3>Proceed with Caution</h3>
                                    <label>Confidence: <span>8/10</span></label>
                                </div>
                                <a href="#">
                                    <img src="assets/image/right_arrow.png" width="50" alt="" srcset="">
                                </a>
                            </div>
                        </div>
                        <div class="recent_analysis_info_short">
                            <div class="info_short_list">
                                <div class="info_short_list_item">
                                    <div class="list_item_line info_yellow"></div>
                                    <span>CFO</span>
                                </div>
                                <div class="info_short_list_item">
                                    <div class="list_item_line info_yellow"></div>
                                    <span>CRO</span>
                                </div>
                                <div class="info_short_list_item">
                                    <div class="list_item_line info_green"></div>
                                    <span>CTO</span>
                                </div>
                                <div class="info_short_list_item">
                                    <div class="list_item_line info_green"></div>
                                    <span>CMO</span>
                                </div>
                                <div class="info_short_list_item">
                                    <div class="list_item_line info_orange"></div>
                                    <span>Legal</span>
                                </div>
                                <div class="info_short_list_item">
                                    <div class="list_item_line info_orange"></div>
                                    <span>COO</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- analysis template -->
        <section class="template animate-on-scroll" data-animation="fadeInDown">
            <div class="container">
                <div class="template_info">
                    <h2>Analysis Templates</h2>
                    <div class="template_list">
                        <div class="template_list_item">
                            <div class="template_icon">
                                <img src="assets/image/template_1.png" width="60" alt="">
                            </div>
                            <div class="template_content">
                                <h3>M&A Evaluation</h3>
                                <p>Acquisition & merger analysis</p>
                                <span>12 used</span>
                            </div>
                        </div>
                        <div class="template_list_item">
                            <div class="template_icon">
                                <img src="assets/image/template_2.png" width="60" alt="">
                            </div>
                            <div class="template_content">
                                <h3>Market Entry</h3>
                                <p>New market opportunity assessment</p>
                                <span>8 used</span>
                            </div>
                        </div>
                        <div class="template_list_item">
                            <div class="template_icon">
                                <img src="assets/image/template_3.png" width="60" alt="">
                            </div>
                            <div class="template_content">
                                <h3>Risk Assessment</h3>
                                <p>Strategic risk identification</p>
                                <span>15 used</span>
                            </div>
                        </div>
                        <div class="template_list_item">
                            <div class="template_icon">
                                <img src="assets/image/template_4.png" width="60" alt="">
                            </div>
                            <div class="template_content">
                                <h3>Org Restructure</h3>
                                <p>Organizational change planning</p>
                                <span>5 used</span>
                            </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>
    document.addEventListener('DOMContentLoaded', function () {
        const Swal = window.Swal;

        // Show SUCCESS message
        @if(session('success'))
            Swal.fire({
                icon: 'success',
                title: 'Success!',
                text: "{{ session('success') }}",
                confirmButtonText: 'OK',
                customClass: {
                    popup: 'swal2-popup',
                    confirmButton: 'btn btn-success'
                },
                buttonsStyling: false
            });
        @endif

        // Show ERROR message (custom error, not validation)
        @if(session('error'))
            Swal.fire({
                icon: 'error',
                title: 'Oops...',
                text: "{{ session('error') }}",
                confirmButtonText: 'OK',
                customClass: {
                    popup: 'swal2-popup',
                    confirmButton: 'btn btn-danger'
                },
                buttonsStyling: false
            });
        @endif

        // Show VALIDATION errors (from $errors)
        @if($errors->any())
            let errorMessage = '';
            @foreach($errors->all() as $error)
                errorMessage += "• {{ $error }}\n";
            @endforeach

            Swal.fire({
                icon: 'error',
                title: 'Validation Failed',
                text: errorMessage.trim(),
                confirmButtonText: 'Fix',
                customClass: {
                    popup: 'swal2-popup',
                    confirmButton: 'btn btn-primary'
                },
                buttonsStyling: false
            }).then(() => {
                // Optional: focus first input
                document.querySelector('.form-control')?.focus();
            });
        @endif
    });
  </script>
 <script>
     history.pushState(null, "", location.href);

     window.onpopstate = function () {
         history.pushState(null, "", location.href);
     };
 </script>
 <script>
    // Backend API base URL - Update this when deploying to production
    // const API_BASE_URL = 'http://192.168.1.145:8000';
    const API_BASE_URL = 'https://veriqo.xceltec.in';
    
    $(document).ready(function() {
      // Initialize session expiry check (checks immediately and sets up periodic check)
      // Check authentication status and show/hide profile or sign in button
      
      // 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);
        }
      });
      
      // 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';
        }
      });
    });
  </script>
</body>
</html>