@php
    $employer = auth()->user()->employer ?? null;
    $planType = $employer->employer_type ?? 'basic';
    $hasLockerAccess = false;
    $canRent = in_array($planType, ['basic', 'professional']);
    
    if ($employer) {
        // Recruiter+ plans have free unlimited access
        $hasLockerAccess = in_array($planType, ['recruiter', 'enterprise', 'customenterprise']);
        
        // Check for active rental (Basic or Professional)
        if (!$hasLockerAccess && $canRent) {
            $activeRental = \App\Models\CandidateLockerRental::where('employer_id', $employer->id)
                ->where('is_active', true)
                ->where('rental_end_date', '>', now())
                ->exists();
            $hasLockerAccess = $activeRental;
        }
    }
    
    $isSaved = isset($saved) ? $saved : false;
    $candidateId = $candidateId ?? ($jobSeeker->id ?? null);
@endphp

@if(isset($candidateId))
    @if($hasLockerAccess)
        <button type="button" 
                onclick="toggleSaveCandidate({{ $candidateId }})"
                id="save-candidate-btn-{{ $candidateId }}"
                class="save-candidate-btn inline-flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium transition
                    {{ $isSaved ? 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400 border border-purple-300 dark:border-purple-700' : 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600' }}">
            <i class="fas {{ $isSaved ? 'fa-bookmark' : 'fa-bookmark' }}"></i>
            <span class="save-text">{{ $isSaved ? 'Saved' : 'Save to Locker' }}</span>
        </button>
    @elseif($canRent)
        <div class="relative group">
            <button type="button" 
                    onclick="showLockerUpsellModal()"
                    class="inline-flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-600 transition">
                <i class="fas fa-lock"></i>
                <span>Save to Locker</span>
                <i class="fas fa-coins text-xs text-yellow-500 ml-1"></i>
            </button>
            <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 hidden group-hover:block w-64 z-10">
                <div class="bg-gray-900 text-white text-xs rounded-lg py-2 px-3 text-center shadow-xl">
                    <i class="fas fa-shopping-cart mr-1"></i> Rent locker access from £0.49/day<br>
                    <span class="text-gray-400">No subscription needed!</span>
                </div>
            </div>
        </div>
    @endif
@endif

<script>
function toggleSaveCandidate(candidateId) {
    const btn = document.getElementById(`save-candidate-btn-${candidateId}`);
    if (!btn) return;
    
    const icon = btn.querySelector('i');
    const textSpan = btn.querySelector('.save-text');
    const originalHtml = btn.innerHTML;
    
    btn.disabled = true;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Saving...';
    
    fetch('{{ route("employer.locker.save") }}', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'X-Requested-With': 'XMLHttpRequest'
        },
        body: JSON.stringify({ candidate_id: candidateId, source: 'search' })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            const wasSaved = textSpan.innerText === 'Saved';
            if (!wasSaved) {
                btn.classList.remove('bg-gray-100', 'text-gray-700', 'dark:bg-gray-700', 'dark:text-gray-300');
                btn.classList.add('bg-purple-100', 'text-purple-700', 'dark:bg-purple-900/30', 'dark:text-purple-400', 'border', 'border-purple-300', 'dark:border-purple-700');
                textSpan.innerText = 'Saved';
                showToast('Candidate saved to locker!', 'success');
            }
        } else if (data.requires_upgrade) {
            showLockerUpsellModal();
            showToast(data.message || 'Locker access required', 'info');
        } else {
            showToast(data.message || 'Failed to save candidate', 'error');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showToast('Network error. Please try again.', 'error');
    })
    .finally(() => {
        btn.disabled = false;
        btn.innerHTML = originalHtml;
    });
}

function showLockerUpsellModal() {
    let modal = document.getElementById('locker-upsell-modal');
    if (!modal) {
        modal = document.createElement('div');
        modal.id = 'locker-upsell-modal';
        modal.className = 'fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden';
        modal.innerHTML = `
            <div class="bg-white dark:bg-gray-800 rounded-2xl max-w-md w-full mx-4 shadow-2xl overflow-hidden">
                <div class="bg-gradient-to-r from-purple-600 to-pink-600 p-4 text-white text-center">
                    <i class="fas fa-locker text-3xl mb-2 block"></i>
                    <h3 class="text-xl font-bold">Unlock Candidate Locker</h3>
                    <p class="text-sm opacity-90 mt-1">Save candidates without a subscription!</p>
                </div>
                <div class="p-6">
                    <p class="text-gray-600 dark:text-gray-300 text-center mb-4">
                        Rent locker access for 30 days. Cancel anytime - no subscription required!
                    </p>
                    <div class="bg-purple-50 dark:bg-purple-900/20 rounded-xl p-4 mb-4">
                        <div class="text-center">
                            <span class="text-3xl font-bold text-purple-600 dark:text-purple-400">£0.49</span>
                            <span class="text-gray-500">/day</span>
                            <p class="text-xs text-gray-500 mt-1">30-day minimum rental (£14.70)</p>
                        </div>
                        <div class="grid grid-cols-2 gap-2 mt-3 text-sm">
                            <div class="flex items-center gap-1"><i class="fas fa-check-circle text-green-500 text-xs"></i> Unlimited saves</div>
                            <div class="flex items-center gap-1"><i class="fas fa-check-circle text-green-500 text-xs"></i> Add notes</div>
                            <div class="flex items-center gap-1"><i class="fas fa-check-circle text-green-500 text-xs"></i> Folder organization</div>
                            <div class="flex items-center gap-1"><i class="fas fa-check-circle text-green-500 text-xs"></i> 30-day access</div>
                        </div>
                    </div>
                    <div class="flex gap-3">
                        <button onclick="closeLockerUpsellModal()" 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">
                            Cancel
                        </button>
                        <form action="{{ route('employer.locker.rent') }}" method="POST" class="flex-1">
                            @csrf
                            <input type="hidden" name="days" value="30">
                            <button type="submit" class="w-full 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">
                                Rent Now (£14.70)
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        `;
        document.body.appendChild(modal);
        
        // Close on outside click
        modal.addEventListener('click', function(e) {
            if (e.target === modal) closeLockerUpsellModal();
        });
    }
    modal.classList.remove('hidden');
    document.body.classList.add('overflow-hidden');
}

function closeLockerUpsellModal() {
    const modal = document.getElementById('locker-upsell-modal');
    if (modal) modal.classList.add('hidden');
    document.body.classList.remove('overflow-hidden');
}

function showToast(message, type) {
    let container = document.getElementById('toast-container-locker');
    if (!container) {
        container = document.createElement('div');
        container.id = 'toast-container-locker';
        container.className = 'fixed bottom-4 right-4 z-50';
        document.body.appendChild(container);
    }
    
    const toast = document.createElement('div');
    toast.className = `mb-3 rounded-lg shadow-lg p-3 animate-slide-in min-w-[200px] ${
        type === 'success' ? 'bg-green-500 text-white' : 
        (type === 'error' ? 'bg-red-500 text-white' : 'bg-blue-500 text-white')
    }`;
    toast.innerHTML = `<div class="flex items-center gap-2"><i class="fas ${type === 'success' ? 'fa-check-circle' : (type === 'error' ? 'fa-exclamation-circle' : 'fa-info-circle')}"></i><span>${message}</span></div>`;
    container.appendChild(toast);
    setTimeout(() => toast.remove(), 3000);
}

// Add animation style
if (!document.querySelector('#locker-toast-styles')) {
    const style = document.createElement('style');
    style.id = 'locker-toast-styles';
    style.textContent = `@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}.animate-slide-in{animation:slideIn .3s ease-out}`;
    document.head.appendChild(style);
}
</script>