{{ form_start(form, {'attr': {'class': 'space-y-4'}}) }}

<!-- Nom -->
<div>
    {{ form_label(form.name, 'Votre nom', {'label_attr': {'class': 'block text-sm font-medium text-gray-700'}}) }}
    {{ form_widget(form.name, {'attr': {'placeholder': 'Entrez votre nom', 'class': 'mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring focus:ring-blue-500'}}) }}
    {{ form_errors(form.name) }}
</div>

<!-- Email -->
<div>
    {{ form_label(form.email, 'Votre email', {'label_attr': {'class': 'block text-sm font-medium text-gray-700'}}) }}
    {{ form_widget(form.email, {'attr': {'placeholder': 'Entrez votre email', 'class': 'mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring focus:ring-blue-500'}}) }}
    {{ form_errors(form.email) }}
</div>

<!-- Téléphone -->
<div>
    {{ form_label(form.phone, 'Votre téléphone', {'label_attr': {'class': 'block text-sm font-medium text-gray-700'}}) }}
    {{ form_widget(form.phone, {'attr': {'placeholder': 'Entrez votre téléphone', 'class': 'mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring focus:ring-blue-500'}}) }}
    {{ form_errors(form.phone) }}
</div>

<!-- Callback -->
<div class="flex items-center">
    {{ form_widget(form.callback, {'attr': {'class': 'h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500'}}) }}
    {{ form_label(form.callback, 'Je souhaite être rappelé ?', {'label_attr': {'class': 'ml-2 text-sm font-medium text-gray-700'}}) }}
</div>

<!-- Services -->
<div>
    <label class="block text-sm font-medium text-gray-700"><h2>Choisir le ou les services souhaités</h2></label>
    <div class="space-y-2 mt-2">
        {% for service in form.services %}
            <div class="flex items-center justify-between">
                {{ form_widget(service) }}
                <label class="text-sm font-medium text-gray-700">
                    {{ service.vars.label }}
                </label>
            </div>
            {{ form_errors(service) }}
        {% endfor %}
    </div>
</div>

<!-- Options supplémentaires -->
<div class="mt-4">
    <h2 class="block text-sm font-medium text-gray-700">Options supplémentaires</h2>
</div>

<!-- Option supplémentaire: Avez-vous une date précise pour réaliser ce projet ? -->
<div class="flex items-center mt-2">
    <input type="checkbox" id="precise-date-checkbox" class="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
    <label for="precise-date-checkbox" class="ml-2 text-sm font-medium text-gray-700">
        Avez-vous une date précise pour réaliser ce projet ?
    </label>
</div>

<!-- Deadline (masqué par défaut) -->
<div id="deadline-field" style="display: none;" class="mt-2">
    {{ form_label(form.deadline, 'Date limite', {'label_attr': {'class': 'block text-sm font-medium text-gray-700'}}) }}
    {{ form_widget(form.deadline, {'attr': {'class': 'mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring focus:ring-blue-500'}}) }}
    {{ form_errors(form.deadline) }}
</div>

<!-- Date de validité (Lecture seule, définie automatiquement à un mois après la date actuelle) -->
<div class="mt-4">
    {{ form_label(form.validityAt, 'Ce devis sera valide jusqu\'au', {'label_attr': {'class': 'block text-sm font-medium text-gray-700'}}) }}
    {{ form_widget(form.validityAt, {'attr': {'class': 'mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring focus:ring-blue-500', 'readonly': true}}) }}
    {{ form_errors(form.validityAt) }}
</div>

<!-- Statut (Lecture seule) -->
<div class="mt-4">
    {{ form_label(form.status, 'Statut du devis', {'label_attr': {'class': 'block text-sm font-medium text-gray-700'}}) }}
    {{ form_widget(form.status, {'attr': {'class': 'mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring focus:ring-blue-500', 'readonly': true}}) }}
    {{ form_errors(form.status) }}
</div>

<!-- Commentaire -->
<div class="mt-4">
    {{ form_label(form.comment, 'Commentaire', {'label_attr': {'class': 'block text-sm font-medium text-gray-700'}}) }}
    {{ form_widget(form.comment, {'attr': {'placeholder': 'Ajouter un commentaire', 'class': 'mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring focus:ring-blue-500'}}) }}
    {{ form_errors(form.comment) }}
</div>

<!-- Submit Button -->
<div>
    <button class="w-full bg-blue-600 text-white font-bold py-2 rounded-md shadow hover:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-500">
        {{ button_label|default('Valider') }}
    </button>
</div>

{{ form_end(form) }}

<!-- jQuery Script -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        // Cibler la case à cocher et le champ deadline
        $('#precise-date-checkbox').change(function() {
            if ($(this).is(':checked')) {
                // Si coché, afficher le champ deadline
                $('#deadline-field').show();
            } else {
                // Si décoché, masquer le champ deadline
                $('#deadline-field').hide();
            }
        });
    });
</script>