@if(session()->has('show_locker_tour') && !session()->get('locker_tour_completed', false))
<div id="locker-tour" class="fixed inset-0 bg-black/70 z-50 flex items-center justify-center">
    <div class="bg-white dark:bg-gray-800 rounded-2xl max-w-lg w-full mx-4 shadow-2xl overflow-hidden">
        <div class="relative">
            <button onclick="closeTour()" class="absolute top-3 right-3 text-gray-400 hover:text-gray-600">
                <i class="fas fa-times"></i>
            </button>
            <div class="bg-gradient-to-r from-purple-600 to-pink-600 p-6 text-white text-center">
                <i class="fas fa-locker text-4xl mb-3"></i>
                <h3 class="text-2xl font-bold">Welcome to Candidate Locker! 🎉</h3>
                <p class="mt-2 opacity-90">Your new talent management hub</p>
            </div>
            <div class="p-6 space-y-4">
                <div class="flex items-start gap-3">
                    <div class="w-8 h-8 bg-purple-100 dark:bg-purple-900/30 rounded-full flex items-center justify-center flex-shrink-0">
                        <span class="text-purple-600 font-bold">1</span>
                    </div>
                    <div>
                        <h4 class="font-semibold text-gray-900 dark:text-white">Save Candidates</h4>
                        <p class="text-sm text-gray-600 dark:text-gray-400">Click the bookmark icon on any candidate profile to save them to your locker.</p>
                    </div>
                </div>
                <div class="flex items-start gap-3">
                    <div class="w-8 h-8 bg-purple-100 dark:bg-purple-900/30 rounded-full flex items-center justify-center flex-shrink-0">
                        <span class="text-purple-600 font-bold">2</span>
                    </div>
                    <div>
                        <h4 class="font-semibold text-gray-900 dark:text-white">Add Notes</h4>
                        <p class="text-sm text-gray-600 dark:text-gray-400">Keep track of candidate details, interview notes, and follow-up reminders.</p>
                    </div>
                </div>
                <div class="flex items-start gap-3">
                    <div class="w-8 h-8 bg-purple-100 dark:bg-purple-900/30 rounded-full flex items-center justify-center flex-shrink-0">
                        <span class="text-purple-600 font-bold">3</span>
                    </div>
                    <div>
                        <h4 class="font-semibold text-gray-900 dark:text-white">Manage Pipeline</h4>
                        <p class="text-sm text-gray-600 dark:text-gray-400">Organize candidates by status and track your recruitment pipeline.</p>
                    </div>
                </div>
            </div>
            <div class="p-6 pt-0 flex gap-3">
                <button onclick="closeTour()" class="flex-1 px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-300 transition">
                    Skip Tour
                </button>
                <button onclick="completeTour()" class="flex-1 px-4 py-2 bg-gradient-to-r from-purple-600 to-blue-600 text-white rounded-lg hover:from-purple-700 hover:to-blue-700 transition">
                    Got it!
                </button>
            </div>
        </div>
    </div>
</div>

<script>
function closeTour() {
    const tour = document.getElementById('locker-tour');
    if (tour) tour.remove();
    localStorage.setItem('locker_tour_completed', 'skipped');
}

function completeTour() {
    const tour = document.getElementById('locker-tour');
    if (tour) tour.remove();
    localStorage.setItem('locker_tour_completed', 'true');
    
    fetch('{{ route("employer.locker.tour-complete") }}', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Content-Type': 'application/json'
        }
    }).catch(() => {});
}

// Show tour only once
if (localStorage.getItem('locker_tour_completed')) {
    const tour = document.getElementById('locker-tour');
    if (tour) tour.remove();
}
</script>
@endif