phase 6
This commit is contained in:
Doar Mihai
@@ -0,0 +1,123 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', $category->name . ' Jobs - JobifyGarden')
|
||||
@section('description', 'Browse ' . $category->name . ' job opportunities. ' . ($category->description ?? ''))
|
||||
|
||||
@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">{{ $category->icon ?? '📁' }}</span>
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold text-gray-900">{{ $category->name }} Jobs</h1>
|
||||
@if($category->description)
|
||||
<p class="text-gray-600 mt-1">{{ $category->description }}</p>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-gray-600">{{ $jobs->total() }} jobs found in this category</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.category', $category->slug) }}" 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>
|
||||
|
||||
<!-- Location -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">Location</label>
|
||||
<input type="text"
|
||||
name="location"
|
||||
value="{{ $filters['location'] ?? '' }}"
|
||||
placeholder="City, state, or country"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-emerald-500 focus:border-emerald-500">
|
||||
</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>
|
||||
|
||||
<!-- Remote -->
|
||||
<div>
|
||||
<label class="flex items-center">
|
||||
<input type="checkbox"
|
||||
name="remote"
|
||||
value="1"
|
||||
{{ ($filters['remote'] ?? false) ? 'checked' : '' }}
|
||||
class="rounded border-gray-300 text-emerald-600 focus:ring-emerald-500">
|
||||
<span class="ml-2 text-sm text-gray-700">Remote jobs only</span>
|
||||
</label>
|
||||
</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 jobs found</h3>
|
||||
<p class="mt-1 text-sm text-gray-500">Try adjusting your search or filter criteria.</p>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
@@ -0,0 +1,193 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', 'Browse Jobs - JobifyGarden')
|
||||
@section('description', 'Browse thousands of job opportunities. Filter by location, job type, experience level, and more.')
|
||||
|
||||
@section('content')
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<!-- Page Header -->
|
||||
<div class="py-8">
|
||||
<h1 class="text-3xl font-bold text-gray-900 mb-2">Browse Jobs</h1>
|
||||
<p class="text-gray-600">{{ $jobs->total() }} jobs found</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"
|
||||
x-data="{
|
||||
showFilters: true,
|
||||
jobType: '{{ $filters['job_type'] ?? '' }}',
|
||||
experienceLevel: '{{ $filters['experience_level'] ?? '' }}',
|
||||
remote: {{ ($filters['remote'] ?? false) ? 'true' : 'false' }}
|
||||
}">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h2 class="text-lg font-semibold text-gray-900">Filters</h2>
|
||||
@if(!empty(array_filter($filters)))
|
||||
<a href="{{ route('jobs.index') }}" class="text-sm text-emerald-600 hover:text-emerald-700">Clear all</a>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<form action="{{ route('jobs.index') }}" 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>
|
||||
|
||||
<!-- Location -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">Location</label>
|
||||
<input type="text"
|
||||
name="location"
|
||||
value="{{ $filters['location'] ?? '' }}"
|
||||
placeholder="City, state, or country"
|
||||
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"
|
||||
x-model="jobType"
|
||||
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 }}">{{ 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"
|
||||
x-model="experienceLevel"
|
||||
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 }}">{{ ucfirst(str_replace('_', ' ', $level)) }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Remote -->
|
||||
<div>
|
||||
<label class="flex items-center">
|
||||
<input type="checkbox"
|
||||
name="remote"
|
||||
value="1"
|
||||
x-model="remote"
|
||||
{{ ($filters['remote'] ?? false) ? 'checked' : '' }}
|
||||
class="rounded border-gray-300 text-emerald-600 focus:ring-emerald-500">
|
||||
<span class="ml-2 text-sm text-gray-700">Remote jobs only</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Salary Range -->
|
||||
<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>
|
||||
|
||||
<!-- Posted Within -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">Posted Within</label>
|
||||
<select name="posted_within"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-emerald-500 focus:border-emerald-500">
|
||||
<option value="">Any time</option>
|
||||
<option value="1" {{ ($filters['posted_within'] ?? '') == '1' ? 'selected' : '' }}>Last 24 hours</option>
|
||||
<option value="7" {{ ($filters['posted_within'] ?? '') == '7' ? 'selected' : '' }}>Last 7 days</option>
|
||||
<option value="30" {{ ($filters['posted_within'] ?? '') == '30' ? 'selected' : '' }}>Last 30 days</option>
|
||||
</select>
|
||||
</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">
|
||||
<!-- Sort Options -->
|
||||
<div class="mb-6 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
|
||||
<div class="text-sm text-gray-600">
|
||||
Showing {{ $jobs->firstItem() ?? 0 }} - {{ $jobs->lastItem() ?? 0 }} of {{ $jobs->total() }} jobs
|
||||
</div>
|
||||
<form action="{{ route('jobs.index') }}" method="GET" class="flex items-center gap-2">
|
||||
<!-- Preserve existing filters -->
|
||||
@foreach($filters as $key => $value)
|
||||
@if($key !== 'sort' && $value)
|
||||
<input type="hidden" name="{{ $key }}" value="{{ $value }}">
|
||||
@endif
|
||||
@endforeach
|
||||
|
||||
<label class="text-sm text-gray-700">Sort by:</label>
|
||||
<select name="sort"
|
||||
onchange="this.form.submit()"
|
||||
class="px-3 py-1.5 border border-gray-300 rounded-md text-sm focus:ring-emerald-500 focus:border-emerald-500">
|
||||
<option value="posted_at_desc" {{ ($filters['sort'] ?? 'posted_at_desc') === 'posted_at_desc' ? 'selected' : '' }}>Newest First</option>
|
||||
<option value="posted_at_asc" {{ ($filters['sort'] ?? '') === 'posted_at_asc' ? 'selected' : '' }}>Oldest First</option>
|
||||
<option value="salary_desc" {{ ($filters['sort'] ?? '') === 'salary_desc' ? 'selected' : '' }}>Highest Salary</option>
|
||||
<option value="salary_asc" {{ ($filters['sort'] ?? '') === 'salary_asc' ? 'selected' : '' }}>Lowest Salary</option>
|
||||
</select>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Job Listings -->
|
||||
@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 jobs found</h3>
|
||||
<p class="mt-1 text-sm text-gray-500">Try adjusting your search or filter criteria.</p>
|
||||
<div class="mt-6">
|
||||
<a href="{{ route('jobs.index') }}"
|
||||
class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-emerald-700 bg-emerald-100 hover:bg-emerald-200">
|
||||
Clear all filters
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
@@ -0,0 +1,123 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', 'Remote Jobs - JobifyGarden')
|
||||
@section('description', 'Discover remote job opportunities from companies worldwide. Work from anywhere.')
|
||||
|
||||
@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
|
||||
@@ -0,0 +1,173 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', $job->title . ' at ' . $job->company . ' - JobifyGarden')
|
||||
@section('description', Str::limit(strip_tags($job->description), 155))
|
||||
|
||||
@section('content')
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<!-- Back Button -->
|
||||
<div class="mb-6">
|
||||
<a href="javascript:history.back()" class="inline-flex items-center text-emerald-600 hover:text-emerald-700">
|
||||
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
|
||||
</svg>
|
||||
Back to results
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
<!-- Main Content -->
|
||||
<div class="lg:col-span-2">
|
||||
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-8">
|
||||
<!-- Job Header -->
|
||||
<div class="mb-6 pb-6 border-b border-gray-200">
|
||||
<div class="flex items-start justify-between mb-4">
|
||||
<div class="flex-1">
|
||||
<h1 class="text-3xl font-bold text-gray-900 mb-2">{{ $job->title }}</h1>
|
||||
<h2 class="text-xl text-gray-700 mb-3">{{ $job->company }}</h2>
|
||||
</div>
|
||||
@if($job->remote_allowed)
|
||||
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-emerald-100 text-emerald-800">
|
||||
Remote
|
||||
</span>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap gap-4 text-sm text-gray-600">
|
||||
@if($job->location)
|
||||
<div class="flex items-center">
|
||||
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
</svg>
|
||||
{{ $job->location }}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if($job->job_type)
|
||||
<div class="flex items-center">
|
||||
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
|
||||
</svg>
|
||||
{{ ucfirst(str_replace('_', ' ', $job->job_type)) }}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if($job->experience_level)
|
||||
<div class="flex items-center">
|
||||
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"></path>
|
||||
</svg>
|
||||
{{ ucfirst(str_replace('_', ' ', $job->experience_level)) }}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="flex items-center">
|
||||
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
Posted {{ $job->posted_at ? $job->posted_at->diffForHumans() : $job->created_at->diffForHumans() }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if($job->salary_min || $job->salary_max)
|
||||
<div class="mt-4">
|
||||
<span class="text-lg font-semibold text-emerald-600">
|
||||
@if($job->salary_min && $job->salary_max)
|
||||
{{ $job->salary_currency ?? '$' }}{{ number_format($job->salary_min) }} - {{ $job->salary_currency ?? '$' }}{{ number_format($job->salary_max) }}
|
||||
@elseif($job->salary_min)
|
||||
{{ $job->salary_currency ?? '$' }}{{ number_format($job->salary_min) }}+
|
||||
@elseif($job->salary_max)
|
||||
Up to {{ $job->salary_currency ?? '$' }}{{ number_format($job->salary_max) }}
|
||||
@endif
|
||||
<span class="text-sm text-gray-600">per year</span>
|
||||
</span>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<!-- Job Description -->
|
||||
<div class="prose prose-emerald max-w-none mb-8">
|
||||
<h3 class="text-xl font-semibold text-gray-900 mb-4">Job Description</h3>
|
||||
<div class="text-gray-700 leading-relaxed">
|
||||
{!! nl2br(e($job->description)) !!}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Category -->
|
||||
@if($job->category)
|
||||
<div class="mb-6">
|
||||
<h3 class="text-sm font-semibold text-gray-900 mb-2">Category</h3>
|
||||
<a href="{{ route('jobs.category', $job->category->slug) }}"
|
||||
class="inline-flex items-center px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-full text-sm text-gray-700">
|
||||
{{ $job->category->icon ?? '📁' }} {{ $job->category->name }}
|
||||
</a>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<!-- Job Source -->
|
||||
@if($job->source)
|
||||
<div class="mb-6 text-sm text-gray-600">
|
||||
<p>Job posted via <span class="font-medium">{{ $job->source->name }}</span></p>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<div class="lg:col-span-1">
|
||||
<div class="sticky top-4 space-y-6">
|
||||
<!-- Apply Button -->
|
||||
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
|
||||
<a href="{{ $job->apply_url ?? $job->source_url }}"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="block w-full px-6 py-3 bg-emerald-600 hover:bg-emerald-700 text-white text-center font-semibold rounded-lg transition-colors duration-200">
|
||||
Apply Now
|
||||
<svg class="inline-block w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<p class="text-xs text-gray-500 text-center mt-3">You will be redirected to the company's application page</p>
|
||||
</div>
|
||||
|
||||
<!-- Share -->
|
||||
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
|
||||
<h3 class="text-sm font-semibold text-gray-900 mb-3">Share this job</h3>
|
||||
<div class="flex gap-2">
|
||||
<a href="https://twitter.com/intent/tweet?text={{ urlencode($job->title . ' at ' . $job->company) }}&url={{ urlencode(route('jobs.show', $job->id)) }}"
|
||||
target="_blank"
|
||||
class="flex-1 px-3 py-2 bg-blue-500 hover:bg-blue-600 text-white text-center rounded text-sm">
|
||||
Twitter
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/sharing/share-offsite/?url={{ urlencode(route('jobs.show', $job->id)) }}"
|
||||
target="_blank"
|
||||
class="flex-1 px-3 py-2 bg-blue-700 hover:bg-blue-800 text-white text-center rounded text-sm">
|
||||
LinkedIn
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Report -->
|
||||
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
|
||||
<button class="text-sm text-red-600 hover:text-red-700">
|
||||
Report this job
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Similar Jobs -->
|
||||
@if($similarJobs->count() > 0)
|
||||
<div class="mt-12">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-6">Similar Jobs</h2>
|
||||
<div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
@foreach($similarJobs as $similarJob)
|
||||
<x-job-card :job="$similarJob" />
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@endsection
|
||||
Reference in New Issue
Block a user