@extends('layouts.candidate')

@section('title', 'Browse Jobs - M-Ajira')

@section('content')

<!-- Hero Header -->
<section class="animated-bg py-10 md:py-20 relative overflow-hidden">
    <div class="absolute inset-0 overflow-hidden pointer-events-none">
        <div class="absolute top-10 left-10 w-32 md:w-64 h-32 md:h-64 bg-white/10 rounded-full blur-3xl float-animation"></div>
        <div class="absolute bottom-10 right-10 w-40 md:w-80 h-40 md:h-80 bg-white/10 rounded-full blur-3xl float-animation" style="animation-delay: 1s;"></div>
    </div>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center">
        <div class="glass inline-block px-4 md:px-6 py-2 md:py-3 rounded-full mb-4 md:mb-6">
            <span class="text-white font-bold text-sm md:text-lg">🌍 Global Opportunities</span>
        </div>
        
        <h1 class="text-4xl md:text-7xl font-black text-white mb-4 md:mb-6">Browse Jobs</h1>
        <p class="text-base md:text-2xl text-white/95 max-w-3xl mx-auto px-4">
            Discover verified international employment opportunities from trusted employers
        </p>
    </div>
</section>

<!-- Alerts -->
@if(session('success'))
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 -mt-4 md:-mt-8 mb-6 md:mb-8 relative z-20">
        <div class="glass-card border-2 border-green-400 rounded-2xl p-4 md:p-6">
            <div class="flex items-center space-x-3 md:space-x-4">
                <span class="text-3xl md:text-5xl">✅</span>
                <div class="flex-1 min-w-0">
                    <h3 class="text-base md:text-xl font-bold text-green-800 mb-1">Success!</h3>
                    <p class="text-sm md:text-base text-green-700">{{ session('success') }}</p>
                </div>
            </div>
        </div>
    </div>
@endif

@if(session('error'))
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 -mt-4 md:-mt-8 mb-6 md:mb-8 relative z-20">
        <div class="glass-card border-2 border-red-400 rounded-2xl p-4 md:p-6">
            <div class="flex items-center space-x-3 md:space-x-4">
                <span class="text-3xl md:text-5xl">⚠️</span>
                <div class="flex-1 min-w-0">
                    <h3 class="text-base md:text-xl font-bold text-red-800 mb-1">Error</h3>
                    <p class="text-sm md:text-base text-red-700">{{ session('error') }}</p>
                </div>
            </div>
        </div>
    </div>
@endif

<!-- Main Content -->
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 md:py-12">
    
    <!-- Filters & Search -->
    <div class="glass-card p-4 md:p-6 rounded-2xl md:rounded-3xl mb-6 md:mb-8">
        <div class="flex flex-col md:flex-row md:flex-wrap md:items-center gap-3 md:gap-4">
            <div class="flex-1 min-w-full md:min-w-[300px]">
                <input type="text" placeholder="Search by job title, country..." 
                    class="w-full px-4 md:px-6 py-3 md:py-4 border-2 border-gray-200 rounded-xl md:rounded-2xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition text-base md:text-lg">
            </div>
            <select class="px-4 md:px-6 py-3 md:py-4 border-2 border-gray-200 rounded-xl md:rounded-2xl focus:border-purple-500 focus:outline-none text-base md:text-lg font-semibold">
                <option>All Countries</option>
                <option>Saudi Arabia</option>
                <option>UAE</option>
                <option>Qatar</option>
                <option>Kuwait</option>
            </select>
            <select class="px-4 md:px-6 py-3 md:py-4 border-2 border-gray-200 rounded-xl md:rounded-2xl focus:border-purple-500 focus:outline-none text-base md:text-lg font-semibold">
                <option>Sort: Latest</option>
                <option>Salary: High to Low</option>
                <option>Match Score</option>
                <option>Positions Available</option>
            </select>
        </div>
    </div>

    <!-- Results Header -->
    <div class="flex flex-col md:flex-row md:justify-between md:items-center mb-6 md:mb-8 space-y-2 md:space-y-0">
        <div>
            <h2 class="text-2xl md:text-4xl font-black text-gray-800">Available Opportunities</h2>
            <p class="text-sm md:text-lg text-gray-600 mt-1 md:mt-2">Showing {{ $demands->count() }} of {{ $demands->total() }} jobs</p>
        </div>
    </div>

    <!-- Jobs Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-8">
        @forelse($demands as $demand)
            <div class="glass-card rounded-2xl md:rounded-3xl p-6 md:p-8 card-hover group relative overflow-hidden">
                <!-- Gradient overlay on hover -->
                <div class="absolute inset-0 bg-gradient-to-br from-purple-600/0 to-pink-600/0 group-hover:from-purple-600/5 group-hover:to-pink-600/5 transition-all duration-500 rounded-2xl md:rounded-3xl"></div>
                
                <div class="relative z-10">
                    <!-- Header -->
                    <div class="flex justify-between items-start mb-4 md:mb-6">
                        <div class="flex-1 min-w-0 mr-3">
                            <div class="flex items-center space-x-2 mb-2">
                                <span class="text-xl md:text-2xl">🌍</span>
                                <span class="text-xs md:text-sm font-bold text-purple-600">{{ $demand->country }}</span>
                            </div>
                            <h3 class="text-lg md:text-2xl font-black text-gray-800 mb-1 line-clamp-2 break-words">
                                {{ $demand->job_title ?: 'Job Opportunity' }}
                            </h3>
                        </div>
                        
                        <!-- Match Score Badge -->
                        <div class="flex-shrink-0">
                            <div class="w-14 h-14 md:w-16 md:h-16 bg-gradient-to-br from-purple-500 to-pink-500 rounded-xl md:rounded-2xl flex items-center justify-center shadow-lg">
                                <div class="text-center">
                                    <div class="text-lg md:text-xl font-black text-white leading-none">{{ $demand->match_score }}</div>
                                    <div class="text-[10px] text-white/90 font-bold">%</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Salary -->
                    <div class="mb-4 md:mb-6 p-3 md:p-4 bg-gradient-to-r from-green-50 to-emerald-50 rounded-xl md:rounded-2xl border-2 border-green-200">
                        <div class="text-xs text-gray-600 font-bold mb-1">Monthly Salary</div>
                        <p class="text-2xl md:text-3xl font-black bg-gradient-to-r from-green-600 to-emerald-600 bg-clip-text text-transparent">
                            {{ $demand->salary_currency }} {{ number_format($demand->salary_foreign_amount ?? 0, 0) }}
                        </p>
                    </div>
                    
                    
                    
                    <!-- Tags -->
                    <div class="flex flex-wrap gap-2 mb-4 md:mb-6">
                        <span class="px-2 md:px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-xs font-bold">Full-time</span>
                        <span class="px-2 md:px-3 py-1 bg-green-100 text-green-700 rounded-full text-xs font-bold">Verified ✓</span>
                        @if($demand->has_applied)
                        <span class="px-2 md:px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-xs font-bold">Applied ✓</span>
                        @endif
                    </div>
                    
                    <!-- CTA Button -->
                    @if($demand->has_applied)
                        <div class="bg-green-50 border-2 border-green-200 text-green-800 font-bold py-3 px-4 md:px-6 rounded-xl md:rounded-2xl text-center text-sm md:text-base">
                            ✓ Already Applied
                        </div>
                    @else
                        <a href="{{ route('candidate.jobs.show', $demand) }}" 
                           class="block btn-primary text-white font-bold py-3 px-4 md:px-6 rounded-xl md:rounded-2xl text-center group-hover:shadow-2xl text-sm md:text-base">
                            View Details →
                        </a>
                    @endif
                </div>
            </div>
        @empty
            <div class="col-span-full">
                <div class="glass-card p-12 md:p-20 rounded-2xl md:rounded-3xl text-center">
                    <div class="text-6xl md:text-8xl mb-4 md:mb-6">🔍</div>
                    <h3 class="text-2xl md:text-3xl font-black text-gray-800 mb-3 md:mb-4">No Jobs Found</h3>
                    <p class="text-base md:text-xl text-gray-600 mb-6 md:mb-8">
                        We couldn't find any jobs matching your criteria.<br class="hidden md:block">
                        Try adjusting your search or check back later.
                    </p>
                </div>
            </div>
        @endforelse
    </div>

    <!-- Pagination -->
    @if($demands->hasPages())
    <div class="mt-8 md:mt-16 flex justify-center">
        <div class="glass-card p-3 md:p-4 rounded-xl md:rounded-2xl">
            {{ $demands->links() }}
        </div>
    </div>
    @endif

</section>

<!-- CTA Section -->
<section class="py-12 md:py-20 relative overflow-hidden">
    <div class="absolute inset-0 bg-gradient-to-br from-purple-50 via-pink-50 to-blue-50"></div>
    
    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div class="glass-card p-8 md:p-16 rounded-3xl md:rounded-[3rem] text-center">
            <div class="text-5xl md:text-6xl mb-4 md:mb-6">💡</div>
            <h2 class="text-3xl md:text-5xl font-black text-gray-800 mb-4 md:mb-6">Don't See Your Dream Job?</h2>
            <p class="text-base md:text-xl text-gray-600 mb-6 md:mb-8">
                We add new opportunities daily. Keep your profile updated to get notified!
            </p>
            <div class="flex flex-col sm:flex-row justify-center gap-3 md:gap-4">
                <a href="{{ route('candidate.profile.edit') }}" class="inline-block btn-primary text-white font-bold px-8 md:px-10 py-3 md:py-4 rounded-xl md:rounded-2xl text-base md:text-lg">
                    Update Profile →
                </a>
                <a href="{{ route('candidate.dashboard') }}" class="inline-block glass-white text-gray-800 font-bold px-8 md:px-10 py-3 md:py-4 rounded-xl md:rounded-2xl text-base md:text-lg hover:shadow-lg">
                    Back to Dashboard
                </a>
            </div>
        </div>
    </div>
</section>

@endsection