@extends('layouts.app')

@section('title', 'Remote Jobs - JobifyGarden | ' . number_format($jobs->total()) . ' Work From Home Opportunities')
@section('description', 'Discover ' . number_format($jobs->total()) . ' remote job opportunities from companies worldwide. Work from anywhere, find flexible positions.')
@section('canonical', route('jobs.remote'))
@section('og_title', 'Remote Jobs | ' . number_format($jobs->total()) . '+ Work From Home Opportunities')
@section('og_description', 'Discover ' . number_format($jobs->total()) . ' remote jobs from companies worldwide. Work from anywhere on JobifyGarden.')
@section('og_url', route('jobs.remote'))
@section('twitter_title', 'Remote Jobs | ' . number_format($jobs->total()) . '+ Opportunities')
@section('twitter_description', 'Discover ' . number_format($jobs->total()) . ' remote job opportunities on JobifyGarden.')

@push('structured_data')
<script type="application/ld+json">
{!! json_encode(app(\App\Services\SeoService::class)->generateBreadcrumbStructuredData([
    ['name' => 'Home', 'url' => route('home')],
    ['name' => 'Jobs', 'url' => route('jobs.index')],
    ['name' => 'Remote Jobs', 'url' => route('jobs.remote')]
]), JSON_UNESCAPED_SLASHES | JSON_PRETTY_PRINT) !!}
</script>

<script type="application/ld+json">
{
    "{{ '@' }}context": "https://schema.org",
    "{{ '@' }}type": "CollectionPage",
    "name": "Remote Jobs",
    "description": "Work from anywhere remote job opportunities",
    "url": "{{ route('jobs.remote') }}"
}
</script>
@endpush

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <!-- Page Header -->
    <div class="py-8">
        <div class="flex items-center mb-4">
            <span class="text-4xl mr-3">🌍</span>
            <div>
                <h1 class="text-3xl font-bold text-gray-900">Remote Jobs</h1>
                <p class="text-gray-600 mt-1">Work from anywhere in the world</p>
            </div>
        </div>
        <p class="text-gray-600">{{ $jobs->total() }} remote jobs available</p>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
        <!-- Filters Sidebar -->
        <aside class="lg:col-span-1">
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 sticky top-4">
                <h2 class="text-lg font-semibold text-gray-900 mb-4">Filters</h2>

                <form action="{{ route('jobs.remote') }}" method="GET" class="space-y-6">
                    <!-- Keywords -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Keywords</label>
                        <input type="text"
                               name="keywords"
                               value="{{ $filters['keywords'] ?? '' }}"
                               placeholder="Job title, skills..."
                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-emerald-500 focus:border-emerald-500">
                    </div>

                    <!-- Category -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Category</label>
                        <select name="category_id"
                                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-emerald-500 focus:border-emerald-500">
                            <option value="">All Categories</option>
                            @foreach($categories as $category)
                                <option value="{{ $category->id }}" {{ ($filters['category_id'] ?? '') == $category->id ? 'selected' : '' }}>
                                    {{ $category->name }} ({{ $category->jobs_count }})
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Job Type -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Job Type</label>
                        <select name="job_type"
                                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-emerald-500 focus:border-emerald-500">
                            <option value="">All Types</option>
                            @foreach($filterOptions['job_types'] ?? [] as $type)
                                <option value="{{ $type }}" {{ ($filters['job_type'] ?? '') == $type ? 'selected' : '' }}>
                                    {{ ucfirst(str_replace('_', ' ', $type)) }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Experience Level -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Experience Level</label>
                        <select name="experience_level"
                                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-emerald-500 focus:border-emerald-500">
                            <option value="">All Levels</option>
                            @foreach($filterOptions['experience_levels'] ?? [] as $level)
                                <option value="{{ $level }}" {{ ($filters['experience_level'] ?? '') == $level ? 'selected' : '' }}>
                                    {{ ucfirst(str_replace('_', ' ', $level)) }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Minimum Salary -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Minimum Salary</label>
                        <input type="number"
                               name="salary_min"
                               value="{{ $filters['salary_min'] ?? '' }}"
                               placeholder="e.g., 50000"
                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-emerald-500 focus:border-emerald-500">
                    </div>

                    <!-- Submit Button -->
                    <button type="submit"
                            class="w-full px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white font-medium rounded-md transition-colors duration-200">
                        Apply Filters
                    </button>
                </form>
            </div>
        </aside>

        <!-- Jobs List -->
        <div class="lg:col-span-3">
            @if($jobs->count() > 0)
                <div class="space-y-4">
                    @foreach($jobs as $job)
                        <x-job-card :job="$job" />
                    @endforeach
                </div>

                <!-- Pagination -->
                <div class="mt-8">
                    {{ $jobs->appends($filters)->links() }}
                </div>
            @else
                <div class="bg-white rounded-lg border border-gray-200 p-12 text-center">
                    <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    <h3 class="mt-2 text-sm font-medium text-gray-900">No remote jobs found</h3>
                    <p class="mt-1 text-sm text-gray-500">Check back later for new remote opportunities.</p>
                </div>
            @endif
        </div>
    </div>
</div>
@endsection