graphiste
me temp
<!DOCTYPE html>
<html lang="fr" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ $job->title }} - Staffing Tunisia</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/lucide@latest"></script>
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,500;0,600;1,500&display=swap"
rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
color: #374151;
background-color: #FFFFFF;
}
h1,
h2,
h3,
h4 {
font-family: 'Inter', sans-serif;
letter-spacing: -0.025em;
}
html {
scroll-smooth: smooth;
}
.glass-nav {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
::selection {
background: #E30613;
color: white;
}
</style>
</head>
<body class="antialiased pt-24 transition-all duration-300 bg-gray-50">
@include('partials.navbar')
<main class="min-h-screen">
<!-- Breadcrumb -->
<section class="bg-white py-6 px-6 border-b border-gray-100">
<div class="max-w-5xl mx-auto">
<div class="flex items-center gap-2 text-sm text-gray-500">
<a href="/" class="hover:text-[#E30613] transition-colors">Accueil</a>
<i data-lucide="chevron-right" class="w-4 h-4"></i>
<a href="/jobs" class="hover:text-[#E30613] transition-colors">Offres d'emploi</a>
<i data-lucide="chevron-right" class="w-4 h-4"></i>
<span class="text-[#111111] font-medium">{{ $job->title }}</span>
</div>
</div>
</section>
<!-- Job Details -->
<section class="py-16 px-6">
<div class="max-w-5xl mx-auto">
<div class="bg-white rounded-3xl shadow-xl border border-gray-100 overflow-hidden">
<!-- Header -->
<div class="bg-gradient-to-br from-[#111111] to-gray-800 text-white p-10">
<div class="flex items-start justify-between mb-6">
<div class="flex-1">
<div class="flex items-center gap-3 mb-4">
@if ($job->priority)
<span
class="px-4 py-2 {{ $job->priority === 'À la Une' ? 'bg-yellow-500 text-yellow-900' : 'bg-orange-500 text-orange-900' }} text-xs font-bold uppercase rounded-full tracking-wider flex items-center gap-2">
<i data-lucide="{{ $job->priority === 'À la Une' ? 'star' : 'zap' }}"
class="w-4 h-4"></i>
{{ $job->priority }}
</span>
@endif
<span
class="px-4 py-2 bg-white/10 backdrop-blur-sm text-white text-xs font-bold uppercase rounded-full tracking-wider">
{{ $job->type }}
</span>
</div>
<h1 class="text-4xl font-bold mb-3">{{ $job->title }}</h1>
@if ($job->company)
<p class="text-xl text-gray-300 flex items-center gap-2">
<i data-lucide="building-2" class="w-5 h-5"></i>
{{ $job->company }}
</p>
@endif
</div>
<div class="w-16 h-16 bg-[#E30613] rounded-2xl flex items-center justify-center shadow-xl">
<i data-lucide="briefcase" class="w-8 h-8 text-white"></i>
</div>
</div>
<div class="flex flex-wrap items-center gap-6 text-sm">
<div class="flex items-center gap-2">
<i data-lucide="map-pin" class="w-5 h-5 text-[#E30613]"></i>
<span>{{ $job->location }}</span>
</div>
<div class="flex items-center gap-2">
<i data-lucide="calendar" class="w-5 h-5 text-[#E30613]"></i>
<span>Publié le {{ $job->created_at->format('d/m/Y') }}</span>
</div>
@if ($job->expires_at)
<div class="flex items-center gap-2">
<i data-lucide="clock" class="w-5 h-5 text-[#E30613]"></i>
<span>Expire le {{ $job->expires_at->format('d/m/Y') }}</span>
</div>
@endif
</div>
</div>
<!-- Content -->
<div class="p-10">
<!-- Salary -->
<div class="mb-10 pb-10 border-b border-gray-100">
<div class="flex items-center gap-4">
<div class="w-12 h-12 bg-red-50 rounded-xl flex items-center justify-center">
<i data-lucide="banknote" class="w-6 h-6 text-[#E30613]"></i>
</div>
<div>
<p class="text-xs uppercase text-gray-400 font-bold tracking-widest mb-1">Salaire
proposé</p>
<p class="text-2xl font-bold text-[#E30613]">{{ $job->salary ?? 'Négociable' }}</p>
</div>
</div>
</div>
<!-- Description -->
<div class="mb-10">
<h2 class="text-2xl font-bold text-[#111111] mb-6 flex items-center gap-3">
<i data-lucide="file-text" class="w-6 h-6 text-[#E30613]"></i>
Description du poste
</h2>
<div class="prose prose-lg max-w-none text-gray-600 leading-relaxed whitespace-pre-line">
{{ $job->description }}
</div>
</div>
<!-- Apply Section -->
<div class="bg-gradient-to-br from-red-50 to-orange-50 rounded-2xl p-8 border border-red-100">
<div class="flex items-center justify-between">
<div>
<h3 class="text-xl font-bold text-[#111111] mb-2">Intéressé par cette offre ?</h3>
<p class="text-gray-600">Postulez maintenant et rejoignez notre équipe !</p>
</div>
<div class="flex items-center gap-3">
<a href="/jobs"
class="bg-white hover:bg-gray-50 text-gray-700 font-bold px-6 py-4 rounded-xl transition-all border border-gray-200 flex items-center gap-2">
<i data-lucide="arrow-left" class="w-4 h-4"></i>
<span>Retour</span>
</a>
@auth
@if (auth()->user()->role === 0)
@if (!$job->applications->where('user_id', auth()->id())->count())
<button
onclick="openApplyModal({{ $job->id }}, '{{ addslashes($job->title) }}')"
class="bg-[#E30613] hover:bg-[#b9050f] text-white font-bold px-8 py-4 rounded-xl transition-all shadow-xl shadow-red-600/20 flex items-center gap-2">
<i data-lucide="send" class="w-5 h-5"></i>
<span>Postuler maintenant</span>
</button>
@else
<div
class="bg-green-100 text-green-700 font-bold px-8 py-4 rounded-xl flex items-center gap-2">
<i data-lucide="check-circle" class="w-5 h-5"></i>
<span>Déjà postulé</span>
</div>
@endif
@else
<span class="text-sm text-gray-500 italic">Réservé aux candidats</span>
@endif
@else
<button
onclick="openApplicationChoiceModal({{ $job->id }}, '{{ addslashes($job->title) }}')"
class="bg-[#E30613] hover:bg-[#b9050f] text-white font-bold px-8 py-4 rounded-xl transition-all shadow-xl shadow-red-600/20 flex items-center gap-2">
<i data-lucide="send" class="w-5 h-5"></i>
<span>Postuler maintenant</span>
</button>
@endauth
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
@include('partials.footer')
<!-- APPLY MODAL (Same as in welcome.blade.php) -->
<div id="apply-modal" class="fixed inset-0 z-[100] hidden">
<div class="absolute inset-0 bg-black/60 backdrop-blur-sm transition-opacity" onclick="closeApplyModal()">
</div>
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-lg p-4">
<div class="bg-white rounded-3xl shadow-2xl overflow-hidden animate-fadeIn">
<div class="p-8 border-b border-gray-100 flex justify-between items-center">
<div>
<h3 class="text-xl font-bold text-[#111111]">Postuler à l'offre</h3>
<p id="modal-job-title" class="text-sm text-[#E30613] font-medium mt-1"></p>
</div>
<button onclick="closeApplyModal()" class="p-2 hover:bg-gray-100 rounded-full transition-colors">
<i data-lucide="x" class="w-5 h-5"></i>
</button>
</div>
<form action="{{ route('candidate.apply') }}" method="POST" enctype="multipart/form-data"
class="p-8 space-y-6">
@csrf
<input type="hidden" name="job_post_id" id="modal-job-id">
<div class="space-y-4">
<label class="block text-sm font-bold text-gray-700">Votre CV (PDF, DOC, DOCX)</label>
@auth
@if (auth()->user()->cv_path)
<div class="flex items-center gap-3 p-4 bg-gray-50 rounded-xl border border-gray-100 mb-4">
<i data-lucide="file-check" class="w-8 h-8 text-green-600"></i>
<div class="flex-1">
<p class="text-xs font-bold text-gray-900">CV actuel détecté</p>
<a href="{{ Storage::url(auth()->user()->cv_path) }}" target="_blank"
class="text-[10px] text-[#E30613] hover:underline">Voir mon CV actuel</a>
</div>
<div class="flex items-center gap-2">
<input type="checkbox" name="use_existing_cv" id="use_existing_cv"
value="1" checked
class="w-4 h-4 text-[#E30613] border-gray-300 rounded focus:ring-[#E30613]"
onchange="toggleCvUpload(!this.checked)">
<label for="use_existing_cv"
class="text-[10px] font-bold text-gray-600">Utiliser</label>
</div>
</div>
@endif
@endauth
<div id="cv-upload-container"
class="{{ auth()->check() && auth()->user()->cv_path ? 'hidden' : '' }}">
<div class="relative group cursor-pointer">
<input type="file" name="cv" id="cv-upload-input"
class="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10"
{{ auth()->check() && auth()->user()->cv_path ? '' : 'required' }}>
<div class="border-2 border-dashed border-gray-200 rounded-2xl p-8 text-center group-hover:border-[#E30613] transition-all"
id="cv-upload-display">
<i data-lucide="upload-cloud"
class="w-10 h-10 text-gray-300 mx-auto mb-3 group-hover:text-[#E30613] transition-colors"></i>
<span class="text-sm text-gray-500 font-medium block" id="cv-file-name">Cliquez ou
glissez votre CV ici</span>
<span class="text-[10px] text-gray-400 mt-1 block">Taille max: 5 Mo</span>
</div>
</div>
</div>
</div>
<div class="flex items-center gap-3 bg-red-50 p-4 rounded-xl border border-red-100">
<input type="checkbox" name="update_profile_cv" id="update_profile_cv"
class="w-4 h-4 text-[#E30613] border-gray-300 rounded focus:ring-[#E30613]" checked>
<label for="update_profile_cv" class="text-xs text-gray-700 font-medium">Enregistrer comme CV
par défaut dans mon profil</label>
</div>
<div class="pt-4">
<button type="submit"
class="w-full bg-[#E30613] hover:bg-[#b9050f] text-white font-bold py-4 rounded-xl transition-all shadow-xl shadow-red-600/20 flex items-center justify-center gap-2">
<span>Envoyer ma candidature</span>
<i data-lucide="send" class="w-4 h-4"></i>
</button>
</div>
</form>
</div>
</div>
</div>
<!-- APPLICATION CHOICE MODAL -->
<div id="application-choice-modal" class="fixed inset-0 z-[100] hidden">
<div class="absolute inset-0 bg-black/60 backdrop-blur-sm transition-opacity"
onclick="closeApplicationChoiceModal()">
</div>
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-md p-4">
<div class="bg-white rounded-3xl shadow-2xl overflow-hidden animate-fadeIn">
<div class="p-8 border-b border-gray-100 flex justify-between items-center">
<div>
<h3 class="text-xl font-bold text-[#111111]">Comment souhaitez-vous postuler ?</h3>
<p id="choice-modal-job-title" class="text-sm text-[#E30613] font-medium mt-1"></p>
</div>
<button onclick="closeApplicationChoiceModal()"
class="p-2 hover:bg-gray-100 rounded-full transition-colors">
<i data-lucide="x" class="w-5 h-5"></i>
</button>
</div>
<div class="p-8 space-y-4">
<input type="hidden" id="choice-modal-job-id">
<!-- Option 1: Spontaneous Application -->
<button onclick="openSpontaneousModal()"
class="w-full p-6 border-2 border-gray-200 rounded-2xl hover:border-[#E30613] hover:bg-red-50 transition-all text-left group">
<div class="flex items-start gap-4">
<div
class="w-12 h-12 bg-red-50 group-hover:bg-[#E30613] rounded-xl flex items-center justify-center text-[#E30613] group-hover:text-white transition-colors">
<i data-lucide="zap" class="w-6 h-6"></i>
</div>
<div class="flex-1">
<h4 class="font-bold text-[#111111] mb-1">Candidature spontanée</h4>
<p class="text-sm text-gray-600">Postulez rapidement sans créer de compte</p>
</div>
</div>
</button>
<!-- Option 2: Create Account -->
<button onclick="openRegisterModal()"
class="w-full p-6 border-2 border-gray-200 rounded-2xl hover:border-[#E30613] hover:bg-red-50 transition-all text-left group">
<div class="flex items-start gap-4">
<div
class="w-12 h-12 bg-gray-100 group-hover:bg-[#E30613] rounded-xl flex items-center justify-center text-gray-600 group-hover:text-white transition-colors">
<i data-lucide="user-plus" class="w-6 h-6"></i>
</div>
<div class="flex-1">
<h4 class="font-bold text-[#111111] mb-1">Créer un compte</h4>
<p class="text-sm text-gray-600">Suivez vos candidatures et gérez votre profil</p>
</div>
</div>
</button>
<!-- Option 3: Login -->
<button onclick="openLoginModal()"
class="w-full p-6 border-2 border-gray-200 rounded-2xl hover:border-[#E30613] hover:bg-red-50 transition-all text-left group">
<div class="flex items-start gap-4">
<div
class="w-12 h-12 bg-gray-100 group-hover:bg-[#E30613] rounded-xl flex items-center justify-center text-gray-600 group-hover:text-white transition-colors">
<i data-lucide="log-in" class="w-6 h-6"></i>
</div>
<div class="flex-1">
<h4 class="font-bold text-[#111111] mb-1">Se connecter</h4>
<p class="text-sm text-gray-600">J'ai déjà un compte</p>
</div>
</div>
</button>
</div>
</div>
</div>
</div>
<!-- SPONTANEOUS APPLICATION MODAL -->
<div id="spontaneous-modal" class="fixed inset-0 z-[100] hidden">
<div class="absolute inset-0 bg-black/60 backdrop-blur-sm transition-opacity"
onclick="closeSpontaneousModal()">
</div>
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-lg p-4">
<div class="bg-white rounded-3xl shadow-2xl overflow-hidden animate-fadeIn max-h-[90vh] overflow-y-auto">
<div class="p-8 border-b border-gray-100 flex justify-between items-center sticky top-0 bg-white z-10">
<div>
<h3 class="text-xl font-bold text-[#111111]">Candidature spontanée</h3>
<p id="spontaneous-modal-job-title" class="text-sm text-[#E30613] font-medium mt-1"></p>
</div>
<button onclick="closeSpontaneousModal()"
class="p-2 hover:bg-gray-100 rounded-full transition-colors">
<i data-lucide="x" class="w-5 h-5"></i>
</button>
</div>
<form action="{{ route('spontaneous.apply') }}" method="POST" enctype="multipart/form-data"
class="p-8 space-y-6">
@csrf
<input type="hidden" name="job_post_id" id="spontaneous-modal-job-id">
<div class="grid grid-cols-2 gap-4">
<div>
<label class="block text-sm font-bold text-gray-700 mb-2">Prénom *</label>
<input type="text" name="prenom" required
class="w-full px-4 py-3 rounded-lg border border-gray-300 bg-white text-gray-700 focus:border-[#E30613] focus:outline-none transition-colors">
</div>
<div>
<label class="block text-sm font-bold text-gray-700 mb-2">Nom *</label>
<input type="text" name="nom" required
class="w-full px-4 py-3 rounded-lg border border-gray-300 bg-white text-gray-700 focus:border-[#E30613] focus:outline-none transition-colors">
</div>
</div>
<div>
<label class="block text-sm font-bold text-gray-700 mb-2">Email *</label>
<input type="email" name="email" required
class="w-full px-4 py-3 rounded-lg border border-gray-300 bg-white text-gray-700 focus:border-[#E30613] focus:outline-none transition-colors">
</div>
<div>
<label class="block text-sm font-bold text-gray-700 mb-2">Téléphone *</label>
<input type="tel" name="telephone" required
class="w-full px-4 py-3 rounded-lg border border-gray-300 bg-white text-gray-700 focus:border-[#E30613] focus:outline-none transition-colors">
</div>
<div>
<label class="block text-sm font-bold text-gray-700 mb-2">CV (PDF, DOC, DOCX) *</label>
<div class="relative group cursor-pointer">
<input type="file" name="cv" id="spontaneous-cv-upload" required
accept=".pdf,.doc,.docx"
class="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10">
<div class="border-2 border-dashed border-gray-200 rounded-2xl p-8 text-center group-hover:border-[#E30613] transition-all"
id="spontaneous-cv-display">
<i data-lucide="upload-cloud"
class="w-10 h-10 text-gray-300 mx-auto mb-3 group-hover:text-[#E30613] transition-colors"></i>
<span class="text-sm text-gray-500 font-medium block" id="spontaneous-cv-name">Cliquez
ou
glissez votre CV ici</span>
<span class="text-[10px] text-gray-400 mt-1 block">Taille max: 5 Mo</span>
</div>
</div>
</div>
<div>
<label class="block text-sm font-bold text-gray-700 mb-2">Note (optionnel)</label>
<textarea name="note" rows="3"
class="w-full px-4 py-3 rounded-lg border border-gray-300 bg-white text-gray-700 focus:border-[#E30613] focus:outline-none transition-colors"
placeholder="Ajoutez un message pour le recruteur..."></textarea>
</div>
<div class="pt-4">
<button type="submit"
class="w-full bg-[#E30613] hover:bg-[#b9050f] text-white font-bold py-4 rounded-xl transition-all shadow-xl shadow-red-600/20 flex items-center justify-center gap-2">
<span>Envoyer ma candidature</span>
<i data-lucide="send" class="w-4 h-4"></i>
</button>
</div>
</form>
</div>
</div>
</div>
@if (session('success') || session('error'))
<div class="fixed bottom-8 right-8 z-[200] animate-fadeIn">
<div
class="{{ session('success') ? 'bg-green-600' : 'bg-red-600' }} text-white px-8 py-4 rounded-2xl shadow-2xl flex items-center gap-4">
<i data-lucide="{{ session('success') ? 'check-circle' : 'alert-circle' }}" class="w-6 h-6"></i>
<div class="font-bold">{{ session('success') ?? session('error') }}</div>
<button onclick="this.parentElement.parentElement.remove()"
class="ml-4 opacity-50 hover:opacity-100"><i data-lucide="x" class="w-4 h-4"></i></button>
</div>
</div>
@endif
<script>
lucide.createIcons();
function openApplyModal(jobId, jobTitle) {
document.getElementById('modal-job-id').value = jobId;
document.getElementById('modal-job-title').textContent = jobTitle;
document.getElementById('apply-modal').classList.remove('hidden');
document.body.style.overflow = 'hidden';
lucide.createIcons();
}
function closeApplyModal() {
document.getElementById('apply-modal').classList.add('hidden');
document.body.style.overflow = '';
}
function toggleCvUpload(show) {
const container = document.getElementById('cv-upload-container');
const input = document.getElementById('cv-upload-input');
if (show) {
container.classList.remove('hidden');
input.required = true;
} else {
container.classList.add('hidden');
input.required = false;
}
}
function openApplicationChoiceModal(jobId, jobTitle) {
document.getElementById('choice-modal-job-id').value = jobId;
document.getElementById('choice-modal-job-title').textContent = jobTitle;
document.getElementById('application-choice-modal').classList.remove('hidden');
document.body.style.overflow = 'hidden';
lucide.createIcons();
}
function closeApplicationChoiceModal() {
document.getElementById('application-choice-modal').classList.add('hidden');
document.body.style.overflow = '';
}
function openSpontaneousModal() {
const jobId = document.getElementById('choice-modal-job-id').value;
const jobTitle = document.getElementById('choice-modal-job-title').textContent;
closeApplicationChoiceModal();
document.getElementById('spontaneous-modal-job-id').value = jobId;
document.getElementById('spontaneous-modal-job-title').textContent = jobTitle;
document.getElementById('spontaneous-modal').classList.remove('hidden');
document.body.style.overflow = 'hidden';
lucide.createIcons();
}
function closeSpontaneousModal() {
document.getElementById('spontaneous-modal').classList.add('hidden');
document.body.style.overflow = '';
}
function openRegisterModal() {
closeApplicationChoiceModal();
window.location.href = '/login?register=true';
}
function openLoginModal() {
closeApplicationChoiceModal();
window.location.href = '/login';
}
// CV upload display
document.getElementById('cv-upload-input')?.addEventListener('change', function(e) {
const fileName = e.target.files[0]?.name || 'Cliquez ou glissez votre CV ici';
document.getElementById('cv-file-name').textContent = fileName;
});
document.getElementById('spontaneous-cv-upload')?.addEventListener('change', function(e) {
const fileName = e.target.files[0]?.name || 'Cliquez ou glissez votre CV ici';
document.getElementById('spontaneous-cv-name').textContent = fileName;
});
</script>
</body>
</html>
