{% extends 'base_app.html.twig' %}

{% block title %}Poster une offre{% endblock %}

{% block body %}
    <div class="max-w-3xl mx-auto">
        <div class="flex items-center justify-between mb-8">
            <h2 class="text-2xl font-bold leading-7 text-slate-900 sm:truncate sm:text-3xl sm:tracking-tight">
                Poster une offre
            </h2>
            <button type="button" id="voice-btn" class="inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-slate-900 shadow-sm ring-1 ring-inset ring-slate-300 hover:bg-slate-50">
                Enregistrement vocale
                <svg class="ml-2 -mr-0.5 h-5 w-5 text-slate-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 18.75a6 6 0 006-6v-1.5m-6 7.5a6 6 0 01-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 01-3-3V4.5a3 3 0 116 0v8.25a3 3 0 01-3 3z" />
                </svg>
            </button>
        </div>

        {{ form_start(form, {'attr': {'class': 'space-y-8 divide-y divide-slate-200'}}) }}
            <div class="space-y-8 divide-y divide-slate-200">
                <div class="space-y-6">
                    
                    <!-- Poste à pourvoir -->
                    <div>
                        <label for="{{ form.title.vars.id }}" class="block text-sm font-medium leading-6 text-slate-900">Poste à pourvoir <span class="text-red-500">*</span></label>
                        <div class="mt-2">
                            {{ form_widget(form.title, {'attr': {'class': 'block w-full rounded-md border-0 py-1.5 text-slate-900 shadow-sm ring-1 ring-inset ring-slate-300 placeholder:text-slate-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6', 'placeholder': 'Cueilleur de pommes'}}) }}
                        </div>
                        {{ form_errors(form.title) }}
                    </div>

                    <!-- Dates -->
                    <div class="grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
                        <div class="sm:col-span-3">
                            <label for="{{ form.dateStart.vars.id }}" class="block text-sm font-medium leading-6 text-slate-900">Date de début <span class="text-red-500">*</span></label>
                            <div class="mt-2">
                                {{ form_widget(form.dateStart, {'attr': {'class': 'block w-full rounded-md border-0 py-1.5 text-slate-900 shadow-sm ring-1 ring-inset ring-slate-300 placeholder:text-slate-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6'}}) }}
                            </div>
                        </div>

                        <div class="sm:col-span-3">
                            <label for="{{ form.dateEnd.vars.id }}" class="block text-sm font-medium leading-6 text-slate-900">Date de fin <span class="text-red-500">*</span></label>
                            <div class="mt-2">
                                {{ form_widget(form.dateEnd, {'attr': {'class': 'block w-full rounded-md border-0 py-1.5 text-slate-900 shadow-sm ring-1 ring-inset ring-slate-300 placeholder:text-slate-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6'}}) }}
                            </div>
                        </div>
                    </div>

                    <!-- Localisation -->
                    <div>
                        <label for="{{ form.location.vars.id }}" class="block text-sm font-medium leading-6 text-slate-900">Localisation <span class="text-red-500">*</span></label>
                        <div class="mt-2">
                            {{ form_widget(form.location, {'attr': {'class': 'block w-full rounded-md border-0 py-1.5 text-slate-900 shadow-sm ring-1 ring-inset ring-slate-300 placeholder:text-slate-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6', 'placeholder': 'Domaine du Soleil, 12 Route des Vignes, 33210 Langon'}}) }}
                        </div>
                    </div>

                    <!-- Type de mission -->
                    <div>
                        <label for="{{ form.type.vars.id }}" class="block text-sm font-medium leading-6 text-slate-900">Type de mission <span class="text-red-500">*</span></label>
                        <div class="mt-2">
                            {{ form_widget(form.type, {'attr': {'class': 'block w-full rounded-md border-0 py-1.5 text-slate-900 shadow-sm ring-1 ring-inset ring-slate-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6', 'placeholder': 'Entretien des machines agricoles'}}) }}
                        </div>
                    </div>

                    <!-- Description -->
                    <div>
                        <label for="{{ form.description.vars.id }}" class="block text-sm font-medium leading-6 text-slate-900">Description rapide de la mission <span class="text-red-500">*</span></label>
                        <div class="mt-2">
                            {{ form_widget(form.description, {'attr': {'class': 'block w-full rounded-md border-0 py-1.5 text-slate-900 shadow-sm ring-1 ring-inset ring-slate-300 placeholder:text-slate-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6', 'rows': 4, 'placeholder': 'Récolte de pommes en verger bio. Travail en extérieur, horaires variables selon météo.'}}) }}
                        </div>
                        <p class="mt-2 text-sm text-slate-500" id="voice-status"></p>
                    </div>

                    <!-- Champs cachés pour le reste -->
                    <div class="hidden">
                        {{ form_widget(form.status) }}
                        {{ form_widget(form.employeesCount) }}
                        {{ form_widget(form.pendingCount) }}
                        {{ form_widget(form.candidatesCount) }}
                        {{ form_widget(form.matchingScore) }}
                    </div>

                </div>
            </div>

            <div class="pt-5">
                <div class="flex justify-end gap-x-3">
                    <a href="{{ path('app_job_offer_index') }}" class="rounded-md bg-white px-3 py-2 text-sm font-semibold text-slate-900 shadow-sm ring-1 ring-inset ring-slate-300 hover:bg-slate-50">Annuler</a>
                    <button type="submit" class="rounded-md bg-slate-300 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-slate-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Continuer</button>
                </div>
            </div>
        {{ form_end(form) }}
    </div>

    <script type="module">
        import { VoiceAssistant } from "{{ asset('js/voice-assistant.js') }}";

        document.addEventListener('DOMContentLoaded', function() {
            // Initialisation de l'assistant vocal
            new VoiceAssistant({
                triggerSelector: '#voice-btn',
                statusSelector: '#voice-status',
                targetFields: {
                    'titre': '{{ form.title.vars.id }}',
                    'poste': '{{ form.title.vars.id }}',
                    'description': '{{ form.description.vars.id }}',
                    'localisation': '{{ form.location.vars.id }}',
                    'lieu': '{{ form.location.vars.id }}',
                    'type': '{{ form.type.vars.id }}'
                }
            });
        });
    </script>
{% endblock %}