{{-- Formulaire de candidature partagé : utilisé pour une offre précise ET pour la candidature spontanée --}}
<div class="bg-white rounded-3xl border border-gray-100 shadow-xl p-6 sm:p-10 relative overflow-hidden">
    {{-- Effet visuel de fond --}}
    <div class="absolute -top-10 -right-10 w-36 h-36 bg-gold/10 rounded-full blur-2xl pointer-events-none"></div>

    <form method="POST" action="{{ $action }}" enctype="multipart/form-data" class="space-y-6">
        @csrf

        {{-- Alerte de succès --}}
        @if(session('success'))
            <div class="p-4 rounded-2xl bg-emerald-50 border border-emerald-200 text-emerald-800 text-sm font-medium flex items-center gap-3">
                <x-icon name="check-circle" class="w-5 h-5 text-emerald-600 shrink-0" />
                <span>{{ session('success') }}</span>
            </div>
        @endif

        {{-- Alerte des erreurs globalisées --}}
        @if($errors->any())
            <div class="p-4 rounded-2xl bg-rose-50 border border-rose-200 text-rose-700 text-sm font-semibold">
                <div class="flex items-center gap-2 mb-2 font-bold">
                    <x-icon name="exclamation-circle" class="w-5 h-5 text-rose-600 shrink-0" />
                    <span>Veuillez corriger les erreurs ci-dessous :</span>
                </div>
                <ul class="list-disc list-inside space-y-1 text-xs font-normal pl-1">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        {{-- Identité Candidate --}}
        <div class="grid sm:grid-cols-2 gap-5">
            <div>
                <label class="block text-xs font-extrabold uppercase tracking-wider text-navy-dark mb-2">
                    Nom complet <span class="text-rose-500">*</span>
                </label>
                <input type="text" name="full_name" required value="{{ old('full_name') }}" placeholder="Ex: Aïssatou Sow"
                       class="w-full px-4 py-3.5 rounded-xl bg-gray-50 border border-gray-200 text-sm font-medium text-gray-800 placeholder-gray-400 focus:outline-none focus:bg-white focus:border-gold focus:ring-2 focus:ring-gold/20 transition-all">
            </div>

            <div>
                <label class="block text-xs font-extrabold uppercase tracking-wider text-navy-dark mb-2">
                    Téléphone
                </label>
                <input type="tel" name="phone" value="{{ old('phone') }}" placeholder="Ex: +221 77 000 00 00"
                       class="w-full px-4 py-3.5 rounded-xl bg-gray-50 border border-gray-200 text-sm font-medium text-gray-800 placeholder-gray-400 focus:outline-none focus:bg-white focus:border-gold focus:ring-2 focus:ring-gold/20 transition-all">
            </div>
        </div>

        {{-- E-mail --}}
        <div>
            <label class="block text-xs font-extrabold uppercase tracking-wider text-navy-dark mb-2">
                Adresse E-mail <span class="text-rose-500">*</span>
            </label>
            <input type="email" name="email" required value="{{ old('email') }}" placeholder="exemple@domaine.com"
                   class="w-full px-4 py-3.5 rounded-xl bg-gray-50 border border-gray-200 text-sm font-medium text-gray-800 placeholder-gray-400 focus:outline-none focus:bg-white focus:border-gold focus:ring-2 focus:ring-gold/20 transition-all">
        </div>

        {{-- Message --}}
        <div>
            <label class="block text-xs font-extrabold uppercase tracking-wider text-navy-dark mb-2">
                Message / Présentation <span class="text-gray-400 font-normal lowercase">(optionnel)</span>
            </label>
            <textarea name="message" rows="4" placeholder="Exprimez vos motivations en quelques lignes..."
                      class="w-full px-4 py-3.5 rounded-xl bg-gray-50 border border-gray-200 text-sm font-medium text-gray-800 placeholder-gray-400 focus:outline-none focus:bg-white focus:border-gold focus:ring-2 focus:ring-gold/20 transition-all resize-none">{{ old('message') }}</textarea>
        </div>

        {{-- Zones de dépôt de documents (CV & Lettre) --}}
        <div class="grid sm:grid-cols-2 gap-5 pt-2">
            
            {{-- Champ CV (Requis) --}}
            <div>
                <label class="block text-xs font-extrabold uppercase tracking-wider text-navy-dark mb-2">
                    Curriculum Vitae (CV) <span class="text-rose-500">*</span>
                </label>
                <label class="relative flex flex-col items-center justify-center p-5 rounded-2xl border-2 border-dashed border-gray-200 bg-gray-50/70 hover:bg-white hover:border-gold transition-all duration-300 cursor-pointer group text-center">
                    <div class="w-10 h-10 rounded-xl bg-navy/5 flex items-center justify-center text-navy mb-2 group-hover:bg-gold group-hover:text-navy-dark transition-colors">
                        <x-icon name="document-text" class="w-5 h-5" />
                    </div>
                    <span class="text-xs font-bold text-navy-dark group-hover:text-gold transition-colors" id="cv_label">
                        Téléverser votre CV
                    </span>
                    <span class="text-[10px] text-gray-400 mt-1">PDF uniquement (max 5 Mo)</span>
                    
                    <input type="file" name="cv" required accept="application/pdf" class="sr-only"
                           onchange="document.getElementById('cv_label').innerText = this.files[0] ? this.files[0].name : 'Téléverser votre CV'">
                </label>
            </div>

            {{-- Champ Lettre de Motivation (Optionnel) --}}
            <div>
                <label class="block text-xs font-extrabold uppercase tracking-wider text-navy-dark mb-2">
                    Lettre de motivation <span class="text-gray-400 font-normal lowercase">(optionnel)</span>
                </label>
                <label class="relative flex flex-col items-center justify-center p-5 rounded-2xl border-2 border-dashed border-gray-200 bg-gray-50/70 hover:bg-white hover:border-gold transition-all duration-300 cursor-pointer group text-center">
                    <div class="w-10 h-10 rounded-xl bg-navy/5 flex items-center justify-center text-navy mb-2 group-hover:bg-gold group-hover:text-navy-dark transition-colors">
                        <x-icon name="paper-clip" class="w-5 h-5" />
                    </div>
                    <span class="text-xs font-bold text-navy-dark group-hover:text-gold transition-colors" id="cover_label">
                        Téléverser une lettre
                    </span>
                    <span class="text-[10px] text-gray-400 mt-1">PDF uniquement (max 5 Mo)</span>
                    
                    <input type="file" name="cover_letter" accept="application/pdf" class="sr-only"
                           onchange="document.getElementById('cover_label').innerText = this.files[0] ? this.files[0].name : 'Téléverser une lettre'">
                </label>
            </div>

        </div>

        {{-- Bouton d'action --}}
        <div class="pt-3">
            <button type="submit" class="w-full bg-gradient-to-r from-gold via-gold/90 to-yellow-500 text-navy-dark font-display font-extrabold text-sm py-4 rounded-xl shadow-lg shadow-gold/20 hover:shadow-xl hover:shadow-gold/30 hover:-translate-y-0.5 active:translate-y-0 transition-all duration-300 flex items-center justify-center gap-2 group">
                <x-icon name="paper-airplane" class="w-4 h-4 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform" />
                <span>Envoyer ma candidature</span>
            </button>
        </div>

    </form>
</div>