@extends('layouts.app')

@section('title', '404 - Page Not Found | Veriqo')

@section('content')

    <!-- 404 Error Content -->
    <main class="page-content">
        <section class="error-container">
            <div class="container">
                <div class="error-content animate__animated animate__fadeIn">
                    <div class="error-numbers">
                        <div class="number-4">4</div>
                        <div class="icon-container">
                            <div class="ai-icon">
                                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5zm0 18c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7zm-1-11h2v6h-2zm0 8h2v2h-2z" />
                                </svg>
                            </div>
                        </div>
                        <div class="number-4">4</div>
                    </div>
        
                    <h1 class="error-title">Page Not Found</h1>
                    <p class="error-description">
                        The strategic intelligence you're seeking has been uncorked or never bottled.
                        Let's navigate you back to familiar territory.
                    </p>
        
                    <div class="error-actions">
                        <a href="./index.html" class="btn primary_btn btn-home">Go to Homepage</a>
                    </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>
        $(document).ready(function () {

            // Check if user is logged in (has JWT token in localStorage)
            var accessToken = localStorage.getItem('access_token');

            // if (!accessToken) {
            //     // User is not logged in, redirect to index.html
            //     window.location.href = './index.html';
            // }

            // 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
                    $('.profile 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);
                }
            }

            // Call function to update profile initial
            updateProfileInitial();

            function updateNavbarAuthUI() {
                var accessToken = localStorage.getItem('access_token');

                if (accessToken) {
                    // Hide "Sign In", show profile dropdown
                    $('#signInButton').hide();
                    $('#profileSection').show();
                } else {
                    // Show "Sign In", hide profile dropdown
                    $('#signInButton').show();
                    $('#profileSection').hide();
                }
            }
            updateNavbarAuthUI();
        });
        $('#logoutBtn, .logout-btn').on('click', function (e) {
                e.preventDefault();
                handleLogout();
            });

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

            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';
                });
            }
    </script>
</body>
</html>