@extends('layouts.entreprise_base')

@section('content')

<div class="container mx-auto py-8">
    <h1 class="text-2xl font-bold mb-6">Mettre à jour l'Offre</h1>
    <form method="POST" action="{{ route('offres.update', ['offre' => $offre->id]) }}"  enctype="multipart/form-data">
        @csrf
        @method('PUT')

        <div class="mb-4">
            <label for="titre" class="block text-gray-700 font-bold mb-2">Titre</label>
            <input type="text" id="titre" name="titre" value="{{ old('titre', $offre->titre) }}" required class="w-full px-3 py-2 border rounded">
            @error('titre')
                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
            @enderror
        </div>

        <div class="mb-4">
            <label for="lieu" class="block text-gray-700 font-bold mb-2">Lieu</label>
            <input type="text" id="lieu" name="lieu" value="{{ old('lieu', $offre->lieu) }}" required class="w-full px-3 py-2 border rounded">
            @error('lieu')
                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
            @enderror
        </div>

        <div class="mb-4">
            <label for="date_limite" class="block text-gray-700 font-bold mb-2">Date Limite</label>
            <input type="date" id="date_limite" name="date_limite" value= {{ old('date_limite', $offre->date_limite) }} class="w-full px-3 py-2 border rounded">
            @error('date_limite')
                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
            @enderror
        </div>

        <div class="mb-4">
            <label for="type_contrat" class="block text-gray-700 font-bold mb-2">Type de Contrat</label>
            <select id="type_contrat" name="type_contrat" required class="w-full px-3 py-2 border rounded">
                <option value="CDI" {{ old('type_contrat', $offre->type_contrat) == 'CDI' ? 'selected' : '' }}>CDI</option>
                <option value="CDD" {{ old('type_contrat', $offre->type_contrat) == 'CDD' ? 'selected' : '' }}>CDD</option>
                <option value="Stage" {{ old('type_contrat', $offre->type_contrat) == 'Stage' ? 'selected' : '' }}>Stage</option>
                <option value="freelance" {{ old('type_contrat', $offre->type_contrat) == 'freelance' ? 'selected' : '' }}>Freelance</option>
            </select>
            @error('type_contrat')
                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
            @enderror
        </div>

        <div class="mb-4">
            <label for="education" class="block text-gray-700 font-bold mb-2">Niveau d'Éducation</label>
            <select id="education" name="education" class="w-full px-3 py-2 border rounded">
                <option value="">Sélectionnez...</option>
                <option value="Bac" {{ old('education', $offre->education) == 'Bac' ? 'selected' : '' }}>Bac</option>
                <option value="Bac+2" {{ old('education', $offre->education) == 'Bac+2' ? 'selected' : '' }}>Bac+2</option>
                <option value="Bac+3" {{ old('education', $offre->education) == 'Bac+3' ? 'selected' : '' }}>Bac+3</option>
                <option value="Master" {{ old('education', $offre->education) == 'Master' ? 'selected' : '' }}>Master</option>
                <option value="Doctorat" {{ old('education', $offre->education) == 'Doctorat' ? 'selected' : '' }}>Doctorat</option>
            </select>
            @error('education')
                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
            @enderror
        </div>

        <div class="mb-4">
            <label for="languages" class="block text-gray-700 font-bold mb-2">Langues</label>
            <select id="languages" name="languages[]" class="form-select select2 w-full" multiple="multiple" required>
                @foreach($langues as $langue)
                <option value="{{ $langue->id }}" 
                    {{ in_array($langue->id, old('langues', $offre->langues->pluck('id')->toArray())) ? 'selected' : '' }}>
                    {{ $langue->nom }}
                </option>
                @endforeach
            </select>
            <small class="form-text text-muted">Maintenez la touche Ctrl (ou Commande sur Mac) pour sélectionner plusieurs langues.</small>
            @error('languages')
                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
            @enderror
        </div>
        
        <!-- Compétences -->
        <div class="mb-4">
            <label for="skills" class="block text-gray-700 font-bold mb-2">Compétences</label>
            <select id="skills" name="skills[]" class="form-select select2 w-full" multiple="multiple" required>
                @foreach($competences as $competence)
                <option value="{{ $competence->id }}" {{ in_array($competence->id, old('competences', $offre->competences()->pluck('id')->toArray())) ? 'selected' : '' }}>{{ $competence->nom }}</option>
              
                @endforeach
            </select>
            <small class="form-text text-muted">Maintenez la touche Ctrl (ou Commande sur Mac) pour sélectionner plusieurs competénces.</small>
            @error('skills')
                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
            @enderror
        </div>
        
        <div class="mb-4">
            <label for="experience" class="block text-gray-700 font-bold mb-2">Expérience (en années)</label>
            <input type="number" id="experience" name="experience" value="{{ old('experience', $offre->experience) }}" min="0" max="50" class="w-full px-3 py-2 border rounded" placeholder="Exemple : 2">
            @error('experience')
                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
            @enderror
        </div>

        <div class="mb-4">
            <label for="salaire" class="block text-gray-700 font-bold mb-2">Salaire (optionnel)</label>
            <input type="text" id="salaire" name="salaire" value="{{ old('salaire', $offre->salaire) }}" class="w-full px-3 py-2 border rounded" placeholder="Exemple : 2500 ou Négociable">
            @error('salaire')
                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
            @enderror
        </div>

        <div class="mb-4">
            <label for="description" class="block text-gray-700 font-bold mb-2">Description</label>
            <textarea id="description" name="description" rows="5" required class="w-full px-3 py-2 border rounded">{{ old('description', $offre->description) }}</textarea>
            @error('description')
                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
            @enderror
        </div>

        <div class="mb-4">
            <label for="document" class="block text-gray-700 font-bold mb-2">Document (optionnel)</label>
            <input type="file" id="document" name="document" class="w-full px-3 py-2 border rounded" value="{{ old('document', $offre->document) }}">
            @error('document')
                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
            @enderror
        </div>

        <div class="flex justify-between items-center space-x-4">
            <button type="submit" id="submitBtn" 
                class="px-4 py-2 bg-indigo-600 text-white font-medium rounded shadow hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
                <span id="spinner" class="spinner-border spinner-border-sm" role="status" aria-hidden="true" style="display: none;"></span>
                Mettre à jour
            </button>

            <button type="reset" 
                class="px-4 py-2 bg-gray-500 text-white font-medium rounded shadow hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2">
                Réinitialiser
            </button>

            <button type="button" onclick="window.history.back();" 
                class="px-4 py-2 bg-red-600 text-white font-medium rounded shadow hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2">
                Annuler
            </button>
        </div>
    </form>
</div>

<script>
    $('#languages').select2({
        placeholder: "Sélectionnez les langues",
        allowClear: true,
    });

    $('#skills').select2({
        placeholder: "Sélectionnez les compétences",
        allowClear: true
     });
</script>

@endsection