jeremy/RecruIT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implementation du role Gestionnaire RH et refonte de la gestion des offres

Browse Source
This commit is contained in:
jeremy bayse
2026-05-09 11:21:40 +02:00
parent 97a8b9443d
commit 9edf79e8ba
23 changed files with 1223 additions and 232 deletions
Download Patch File Download Diff File Expand all files Collapse all files

368
resources/js/Pages/Public/Jobs/Show.vue
View File

@@ -10,11 +10,22 @@ const props = defineProps({
});
const form = useForm({
name: '',
email: '',
phone: '',
linkedin_url: '',
birth_name: '',
usage_name: '',
first_name: '',
address: '',
zip_code: '',
city: '',
phone: '',
email: '',
email_confirmation: '',
birth_date: '',
birth_place: '',
nationality: '',
current_situation: '',
education_level: '',
has_driving_license: '',
privacy_policy: false,
cv: null,
cover_letter: null,
});
@@ -26,6 +37,10 @@ const submit = () => {
},
});
};
const scrollToForm = () => {
document.getElementById('application-form').scrollIntoView({ behavior: 'smooth' });
};
</script>
<template>
@@ -34,7 +49,7 @@ const submit = () => {
<div class="min-h-screen bg-neutral text-anthracite font-sans">
<!-- Navigation Bar -->
<nav class="bg-white border-b border-anthracite/10 p-6">
<div class="max-w-4xl mx-auto flex items-center justify-between">
<div class="max-w-6xl mx-auto flex items-center justify-between">
<Link href="/" class="flex items-center gap-3">
<img src="/images/logo.png" alt="Logo CABM" class="h-12 object-contain" />
</Link>
@@ -44,7 +59,7 @@ const submit = () => {
</div>
</nav>
<main class="max-w-4xl mx-auto py-12 px-6">
<main class="max-w-6xl mx-auto py-12 px-6">
<div class="mb-6">
<Link :href="route('jobs.index')" class="inline-flex items-center gap-2 text-sm font-bold text-anthracite/60 hover:text-primary transition-colors">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
@@ -54,108 +69,287 @@ const submit = () => {
<div class="bg-white rounded-2xl shadow-xl overflow-hidden">
<!-- Header -->
<div class="bg-primary/5 border-b border-primary/10 px-8 py-10">
<h1 class="text-3xl font-serif font-bold text-primary mb-2">{{ jobPosition.title }}</h1>
<div class="flex items-center gap-4 text-sm text-anthracite/70">
<span class="inline-flex items-center gap-1">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><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>
Offre d'emploi
</span>
<span v-if="jobPosition.fpt_metadata?.infos_poste?.categorie" class="px-3 py-1 bg-white/50 rounded-full font-bold uppercase tracking-widest text-[10px]">
Catégorie {{ jobPosition.fpt_metadata.infos_poste.categorie }} - {{ jobPosition.fpt_metadata.infos_poste.cadre_emplois }}
</span>
<div class="bg-primary/5 border-b border-primary/10 px-8 py-10 flex flex-col md:flex-row md:items-center justify-between gap-6">
<div>
<h1 class="text-3xl font-serif font-bold text-primary mb-2">{{ jobPosition.title }}</h1>
<div class="flex items-center gap-4 text-sm text-anthracite/70">
<span class="inline-flex items-center gap-1">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><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>
Offre d'emploi
</span>
<span v-if="jobPosition.fpt_metadata?.infos_poste?.categorie" class="px-3 py-1 bg-white/50 rounded-full font-bold uppercase tracking-widest text-[10px]">
Catégorie {{ jobPosition.fpt_metadata.infos_poste.categorie }} - {{ jobPosition.fpt_metadata.infos_poste.cadre_emplois }}
</span>
</div>
</div>
</div>
<div class="p-8 grid grid-cols-1 md:grid-cols-2 gap-12">
<button @click="scrollToForm" class="shrink-0 py-3 px-8 bg-primary text-white rounded-xl font-bold font-subtitle uppercase tracking-widest text-sm hover:brightness-110 shadow-lg shadow-primary/20 transition-all">
Postuler à cette offre
</button>
</div> <div class="p-8 space-y-12">
<!-- Job Details -->
<div class="space-y-6">
<div>
<h2 class="text-xl font-bold font-subtitle text-anthracite mb-3 border-b pb-2">Description du poste</h2>
<div v-if="jobPosition.description_html" class="prose prose-sm prose-indigo text-anthracite/80 max-w-none" v-html="jobPosition.description_html"></div>
<div v-else class="prose prose-sm prose-neutral text-anthracite/80 whitespace-pre-line">{{ jobPosition.description }}</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-12">
<div class="lg:col-span-2 space-y-8">
<div>
<h2 class="text-xl font-bold font-subtitle text-anthracite mb-4 border-b border-anthracite/5 pb-2">Description du poste</h2>
<div v-if="jobPosition.description_html" class="prose prose-sm prose-indigo text-anthracite/80 max-w-none" v-html="jobPosition.description_html"></div>
<div v-else class="prose prose-sm prose-neutral text-anthracite/80 whitespace-pre-line">{{ jobPosition.description }}</div>
</div>
<div v-if="jobPosition.requirements && jobPosition.requirements.length > 0">
<h2 class="text-xl font-bold font-subtitle text-anthracite mb-4 border-b border-anthracite/5 pb-2">Prérequis</h2>
<ul class="list-disc list-inside text-anthracite/80 space-y-2">
<li v-for="(req, i) in jobPosition.requirements" :key="i">{{ req }}</li>
</ul>
</div>
</div>
<div v-if="jobPosition.requirements && jobPosition.requirements.length > 0">
<h2 class="text-xl font-bold font-subtitle text-anthracite mb-3 border-b pb-2">Prérequis</h2>
<ul class="list-disc list-inside text-anthracite/80 space-y-1">
<li v-for="(req, i) in jobPosition.requirements" :key="i">{{ req }}</li>
</ul>
</div>
<div v-if="jobPosition.fpt_metadata" class="bg-neutral/30 rounded-xl p-5 border border-anthracite/10 mt-8">
<h2 class="text-sm font-bold font-subtitle uppercase tracking-widest text-primary mb-4 flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3" />
</svg>
Informations Statutaires (FPT)
</h2>
<div class="space-y-3 text-sm text-anthracite/80">
<p><strong class="text-anthracite">Grade(s) recherché(s) :</strong> {{ jobPosition.fpt_metadata.infos_poste?.grade_mini }} à {{ jobPosition.fpt_metadata.infos_poste?.grade_maxi }}</p>
<p><strong class="text-anthracite">Fondement :</strong> {{ jobPosition.fpt_metadata.conformite?.fondement_juridique_recrutement }}</p>
<div class="pt-3 border-t border-anthracite/10">
<strong class="text-anthracite block mb-2 text-xs uppercase tracking-wider">Mentions Légales :</strong>
<ul class="list-disc list-inside space-y-1 text-xs">
<li v-for="(mention, idx) in jobPosition.fpt_metadata.conformite?.mentions_legales_obligatoires" :key="idx">{{ mention }}</li>
</ul>
<div class="space-y-6">
<div v-if="jobPosition.fpt_metadata" class="bg-neutral rounded-2xl p-6 border border-anthracite/10">
<h2 class="text-xs font-black font-subtitle uppercase tracking-[0.2em] text-primary/50 mb-6 flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3" />
</svg>
Infos Statutaires (FPT)
</h2>
<div class="space-y-4 text-sm">
<div class="flex flex-col gap-1">
<span class="text-[10px] font-black uppercase text-anthracite/30 tracking-widest">Grade(s) recherché(s)</span>
<span class="font-bold text-anthracite">{{ jobPosition.fpt_metadata.infos_poste?.grade_mini }} à {{ jobPosition.fpt_metadata.infos_poste?.grade_maxi }}</span>
</div>
<div class="flex flex-col gap-1">
<span class="text-[10px] font-black uppercase text-anthracite/30 tracking-widest">Fondement</span>
<span class="font-bold text-anthracite">{{ jobPosition.fpt_metadata.conformite?.fondement_juridique_recrutement }}</span>
</div>
<div class="pt-4 border-t border-anthracite/5">
<span class="text-[10px] font-black uppercase text-anthracite/30 tracking-widest block mb-2">Mentions Légales</span>
<ul class="space-y-2">
<li v-for="(mention, idx) in jobPosition.fpt_metadata.conformite?.mentions_legales_obligatoires" :key="idx" class="flex items-start gap-2 text-[11px] leading-relaxed font-semibold text-anthracite/60">
<div class="w-1 h-1 rounded-full bg-primary/30 mt-1.5 shrink-0"></div>
{{ mention }}
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Application Form -->
<div class="bg-neutral/50 p-6 rounded-xl border border-anthracite/10">
<h2 class="text-xl font-bold font-subtitle text-primary mb-6">Soumettre votre candidature</h2>
<div id="application-form" class="bg-neutral/50 p-10 rounded-3xl border border-anthracite/10">
<div class="mb-10 border-b border-anthracite/10 pb-6">
<h2 class="text-3xl font-serif font-black text-primary">Formulaire de candidature</h2>
<p class="text-sm font-semibold text-anthracite/40 mt-1">Veuillez renseigner avec précision les informations ci-dessous.</p>
</div>
<form @submit.prevent="submit" class="space-y-5">
<div>
<label class="block text-sm font-medium text-anthracite mb-1">Nom complet <span class="text-red-500">*</span></label>
<input type="text" v-model="form.name" required class="w-full rounded-lg border-anthracite/20 focus:border-primary focus:ring-primary text-sm p-2.5" />
<div v-if="form.errors.name" class="text-red-500 text-xs mt-1">{{ form.errors.name }}</div>
</div>
<div>
<label class="block text-sm font-medium text-anthracite mb-1">Adresse Email <span class="text-red-500">*</span></label>
<input type="email" v-model="form.email" required class="w-full rounded-lg border-anthracite/20 focus:border-primary focus:ring-primary text-sm p-2.5" />
<div v-if="form.errors.email" class="text-red-500 text-xs mt-1">{{ form.errors.email }}</div>
</div>
<div class="grid grid-cols-2 gap-4">
<div>
<label class="block text-sm font-medium text-anthracite mb-1">Téléphone</label>
<input type="text" v-model="form.phone" class="w-full rounded-lg border-anthracite/20 focus:border-primary focus:ring-primary text-sm p-2.5" />
<div v-if="form.errors.phone" class="text-red-500 text-xs mt-1">{{ form.errors.phone }}</div>
<form @submit.prevent="submit" class="space-y-8">
<!-- État Civil -->
<div class="space-y-4">
<h3 class="text-lg font-bold text-anthracite/80 flex items-center gap-2">
<span class="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center text-xs font-black">1</span>
État Civil
</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div>
<label class="block text-sm font-medium text-anthracite mb-1.5">Nom de naissance <span class="text-red-500">*</span></label>
<input type="text" v-model="form.birth_name" required class="w-full rounded-lg border-anthracite/20 focus:border-primary focus:ring-primary text-sm p-2.5 shadow-sm" />
<div v-if="form.errors.birth_name" class="text-red-500 text-xs mt-1">{{ form.errors.birth_name }}</div>
</div>
<div>
<label class="block text-sm font-medium text-anthracite mb-1.5">Nom d'usage <span class="text-red-500">*</span></label>
<input type="text" v-model="form.usage_name" required class="w-full rounded-lg border-anthracite/20 focus:border-primary focus:ring-primary text-sm p-2.5 shadow-sm" />
<div v-if="form.errors.usage_name" class="text-red-500 text-xs mt-1">{{ form.errors.usage_name }}</div>
</div>
<div>
<label class="block text-sm font-medium text-anthracite mb-1.5">Prénom <span class="text-red-500">*</span></label>
<input type="text" v-model="form.first_name" required class="w-full rounded-lg border-anthracite/20 focus:border-primary focus:ring-primary text-sm p-2.5 shadow-sm" />
<div v-if="form.errors.first_name" class="text-red-500 text-xs mt-1">{{ form.errors.first_name }}</div>
</div>
</div>
<div>
<label class="block text-sm font-medium text-anthracite mb-1">Ville</label>
<input type="text" v-model="form.city" class="w-full rounded-lg border-anthracite/20 focus:border-primary focus:ring-primary text-sm p-2.5" />
<div v-if="form.errors.city" class="text-red-500 text-xs mt-1">{{ form.errors.city }}</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div>
<label class="block text-sm font-medium text-anthracite mb-1.5">Date de naissance <span class="text-red-500">*</span></label>
<input type="date" v-model="form.birth_date" required class="w-full rounded-lg border-anthracite/20 focus:border-primary focus:ring-primary text-sm p-2.5 shadow-sm" />
<div v-if="form.errors.birth_date" class="text-red-500 text-xs mt-1">{{ form.errors.birth_date }}</div>
</div>
<div class="md:col-span-1">
<label class="block text-sm font-medium text-anthracite mb-1.5">Lieu de naissance <span class="text-red-500">*</span></label>
<input type="text" v-model="form.birth_place" required class="w-full rounded-lg border-anthracite/20 focus:border-primary focus:ring-primary text-sm p-2.5 shadow-sm" />
<div v-if="form.errors.birth_place" class="text-red-500 text-xs mt-1">{{ form.errors.birth_place }}</div>
</div>
<div>
<label class="block text-sm font-medium text-anthracite mb-1.5">Nationalité <span class="text-red-500">*</span></label>
<input type="text" v-model="form.nationality" required class="w-full rounded-lg border-anthracite/20 focus:border-primary focus:ring-primary text-sm p-2.5 shadow-sm" />
<div v-if="form.errors.nationality" class="text-red-500 text-xs mt-1">{{ form.errors.nationality }}</div>
</div>
</div>
</div>
<div>
<label class="block text-sm font-medium text-anthracite mb-1">URL LinkedIn</label>
<input type="url" v-model="form.linkedin_url" placeholder="https://linkedin.com/in/..." class="w-full rounded-lg border-anthracite/20 focus:border-primary focus:ring-primary text-sm p-2.5" />
<div v-if="form.errors.linkedin_url" class="text-red-500 text-xs mt-1">{{ form.errors.linkedin_url }}</div>
<!-- Coordonnées -->
<div class="space-y-4 pt-6 border-t border-anthracite/5">
<h3 class="text-lg font-bold text-anthracite/80 flex items-center gap-2">
<span class="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center text-xs font-black">2</span>
Coordonnées
</h3>
<div>
<label class="block text-sm font-medium text-anthracite mb-1.5">Adresse <span class="text-red-500">*</span></label>
<input type="text" v-model="form.address" required class="w-full rounded-lg border-anthracite/20 focus:border-primary focus:ring-primary text-sm p-2.5 shadow-sm" />
<div v-if="form.errors.address" class="text-red-500 text-xs mt-1">{{ form.errors.address }}</div>
</div>
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
<div>
<label class="block text-sm font-medium text-anthracite mb-1.5">Code postal <span class="text-red-500">*</span></label>
<input type="text" v-model="form.zip_code" required class="w-full rounded-lg border-anthracite/20 focus:border-primary focus:ring-primary text-sm p-2.5 shadow-sm" />
<div v-if="form.errors.zip_code" class="text-red-500 text-xs mt-1">{{ form.errors.zip_code }}</div>
</div>
<div class="md:col-span-2">
<label class="block text-sm font-medium text-anthracite mb-1.5">Ville <span class="text-red-500">*</span></label>
<input type="text" v-model="form.city" required class="w-full rounded-lg border-anthracite/20 focus:border-primary focus:ring-primary text-sm p-2.5 shadow-sm" />
<div v-if="form.errors.city" class="text-red-500 text-xs mt-1">{{ form.errors.city }}</div>
</div>
<div>
<label class="block text-sm font-medium text-anthracite mb-1.5">Mobile <span class="text-red-500">*</span></label>
<input type="text" v-model="form.phone" required class="w-full rounded-lg border-anthracite/20 focus:border-primary focus:ring-primary text-sm p-2.5 shadow-sm" />
<div v-if="form.errors.phone" class="text-red-500 text-xs mt-1">{{ form.errors.phone }}</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label class="block text-sm font-medium text-anthracite mb-1.5">Email <span class="text-red-500">*</span></label>
<input type="email" v-model="form.email" required class="w-full rounded-lg border-anthracite/20 focus:border-primary focus:ring-primary text-sm p-2.5 shadow-sm" />
<div v-if="form.errors.email" class="text-red-500 text-xs mt-1">{{ form.errors.email }}</div>
</div>
<div>
<label class="block text-sm font-medium text-anthracite mb-1.5">Confirmer Email <span class="text-red-500">*</span></label>
<input type="email" v-model="form.email_confirmation" required class="w-full rounded-lg border-anthracite/20 focus:border-primary focus:ring-primary text-sm p-2.5 shadow-sm" />
<div v-if="form.errors.email_confirmation" class="text-red-500 text-xs mt-1">{{ form.errors.email_confirmation }}</div>
</div>
</div>
</div>
<div>
<label class="block text-sm font-medium text-anthracite mb-1">CV (PDF) <span class="text-red-500">*</span></label>
<input type="file" @input="form.cv = $event.target.files[0]" accept=".pdf" required class="w-full text-sm text-anthracite/70 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-primary/10 file:text-primary hover:file:bg-primary/20" />
<div v-if="form.errors.cv" class="text-red-500 text-xs mt-1">{{ form.errors.cv }}</div>
<!-- Profil & Situation -->
<div class="space-y-4 pt-6 border-t border-anthracite/5">
<h3 class="text-lg font-bold text-anthracite/80 flex items-center gap-2">
<span class="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center text-xs font-black">3</span>
Profil & Situation
</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label class="block text-sm font-medium text-anthracite mb-1.5">Situation actuelle <span class="text-red-500">*</span></label>
<select v-model="form.current_situation" required class="w-full rounded-lg border-anthracite/20 focus:border-primary focus:ring-primary text-sm p-2.5 shadow-sm bg-white">
<option value="" disabled>Sélectionnez votre situation</option>
<option value="Titulaire">Titulaire</option>
<option value="Lauréat(e) d'un concours">Lauréat(e) d'un concours</option>
<option value="contractuel">Contractuel</option>
<option value="En recherche d'emplois">En recherche d'emplois</option>
</select>
<div v-if="form.errors.current_situation" class="text-red-500 text-xs mt-1">{{ form.errors.current_situation }}</div>
</div>
<div>
<label class="block text-sm font-medium text-anthracite mb-1.5">Niveau de diplôme <span class="text-red-500">*</span></label>
<select v-model="form.education_level" required class="w-full rounded-lg border-anthracite/20 focus:border-primary focus:ring-primary text-sm p-2.5 shadow-sm bg-white">
<option value="" disabled>Sélectionnez votre niveau</option>
<option value="Aucun diplome">Aucun diplome</option>
<option value="Brevet">Brevet</option>
<option value="CAP/BEP">CAP/BEP</option>
<option value="Bac">Bac</option>
<option value="Bac + 1">Bac + 1</option>
<option value="Bac + 2">Bac + 2</option>
<option value="Bac + 3">Bac + 3</option>
<option value="Bac + 4">Bac + 4</option>
<option value="Bac + 5">Bac + 5</option>
<option value="Autre">Autre</option>
</select>
<div v-if="form.errors.education_level" class="text-red-500 text-xs mt-1">{{ form.errors.education_level }}</div>
</div>
</div>
<div>
<label class="block text-sm font-medium text-anthracite mb-1.5">Permis de conduire <span class="text-red-500">*</span></label>
<div class="flex gap-4 mt-2">
<label class="inline-flex items-center">
<input type="radio" v-model="form.has_driving_license" :value="1" required class="text-primary focus:ring-primary h-4 w-4" />
<span class="ml-2 text-sm text-anthracite/80">Oui</span>
</label>
<label class="inline-flex items-center">
<input type="radio" v-model="form.has_driving_license" :value="0" required class="text-primary focus:ring-primary h-4 w-4" />
<span class="ml-2 text-sm text-anthracite/80">Non</span>
</label>
</div>
<div v-if="form.errors.has_driving_license" class="text-red-500 text-xs mt-1">{{ form.errors.has_driving_license }}</div>
</div>
</div>
<div>
<label class="block text-sm font-medium text-anthracite mb-1">Lettre de motivation (PDF)</label>
<input type="file" @input="form.cover_letter = $event.target.files[0]" accept=".pdf" class="w-full text-sm text-anthracite/70 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-primary/10 file:text-primary hover:file:bg-primary/20" />
<div v-if="form.errors.cover_letter" class="text-red-500 text-xs mt-1">{{ form.errors.cover_letter }}</div>
<!-- Documents -->
<div class="space-y-4 pt-6 border-t border-anthracite/5">
<h3 class="text-lg font-bold text-anthracite/80 flex items-center gap-2">
<span class="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center text-xs font-black">4</span>
Documents
</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div>
<label class="block text-sm font-medium text-anthracite mb-1.5">CV (PDF) <span class="text-red-500">*</span></label>
<div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-anthracite/10 border-dashed rounded-xl hover:border-primary/30 transition-colors bg-white">
<div class="space-y-1 text-center">
<svg class="mx-auto h-10 w-10 text-anthracite/20" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
<path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<div class="flex text-sm text-anthracite/60">
<label class="relative cursor-pointer rounded-md font-bold text-primary hover:text-primary-dark">
<span>Choisir un fichier</span>
<input type="file" @input="form.cv = $event.target.files[0]" accept=".pdf" required class="sr-only" />
</label>
</div>
<p class="text-xs text-anthracite/40">PDF uniquement, Max 5 Mo</p>
<p v-if="form.cv" class="text-xs text-success font-bold mt-2">✓ {{ form.cv.name }}</p>
</div>
</div>
<div v-if="form.errors.cv" class="text-red-500 text-xs mt-1">{{ form.errors.cv }}</div>
</div>
<div>
<label class="block text-sm font-medium text-anthracite mb-1.5">Lettre de motivation (PDF)</label>
<div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-anthracite/10 border-dashed rounded-xl hover:border-primary/30 transition-colors bg-white">
<div class="space-y-1 text-center">
<svg class="mx-auto h-10 w-10 text-anthracite/20" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
<path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<div class="flex text-sm text-anthracite/60">
<label class="relative cursor-pointer rounded-md font-bold text-primary hover:text-primary-dark">
<span>Choisir un fichier</span>
<input type="file" @input="form.cover_letter = $event.target.files[0]" accept=".pdf" class="sr-only" />
</label>
</div>
<p class="text-xs text-anthracite/40">PDF uniquement, Max 5 Mo</p>
<p v-if="form.cover_letter" class="text-xs text-success font-bold mt-2">✓ {{ form.cover_letter.name }}</p>
</div>
</div>
<div v-if="form.errors.cover_letter" class="text-red-500 text-xs mt-1">{{ form.errors.cover_letter }}</div>
</div>
</div>
</div>
<button type="submit" :disabled="form.processing" class="w-full mt-6 py-3 px-4 bg-highlight text-[#3a2800] rounded-xl font-bold font-subtitle uppercase tracking-wider text-sm hover:brightness-110 shadow-lg shadow-highlight/30 transition-all disabled:opacity-50 flex justify-center items-center">
<span v-if="form.processing">Envoi en cours...</span>
<span v-else>Postuler maintenant</span>
</button>
<!-- Validation -->
<div class="space-y-4 pt-6 border-t border-anthracite/10">
<div class="flex items-start bg-white p-4 rounded-xl border border-anthracite/10">
<div class="flex items-center h-5">
<input type="checkbox" v-model="form.privacy_policy" required class="h-5 w-5 text-primary border-anthracite/20 rounded focus:ring-primary cursor-pointer" />
</div>
<div class="ml-4 text-xs leading-relaxed text-anthracite/70">
<label class="cursor-pointer font-semibold">
En soumettant ce formulaire, j'accepte que les informations saisies dans cet espace soient utilisées pour permettre de me recontacter. J'affirme avoir pris connaissance de notre <Link :href="route('privacy-policy')" target="_blank" class="text-primary hover:underline">politique de confidentialité</Link>. <span class="text-red-500">*</span>
</label>
</div>
</div>
<div v-if="form.errors.privacy_policy" class="text-red-500 text-xs mt-1">{{ form.errors.privacy_policy }}</div>
<button type="submit" :disabled="form.processing" class="w-full py-4 px-6 bg-highlight text-[#3a2800] rounded-xl font-bold font-subtitle uppercase tracking-widest text-base hover:brightness-105 shadow-xl shadow-highlight/20 transition-all disabled:opacity-50 flex justify-center items-center gap-3">
<svg v-if="form.processing" class="animate-spin h-5 w-5 text-current" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
<span v-if="form.processing">Traitement de votre candidature...</span>
<span v-else>Soumettre ma candidature</span>
</button>
</div>
</form>
</div>
</div>