{% set isEdit = instrumentation_devis is defined %}


    
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-4">
    <!-- Hôtel -->
    <div>
        <label for="hotel" class="block text-sm font-medium text-gray-700 mb-2">
            Hôtel {% if not isEdit %}*{% endif %}
        </label>
        {% if isEdit %}
            <input type="text" 
                    value="{{ instrumentation_devis.hotel.nom }}" 
                    disabled 
                    class="w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-100">
        {% else %}
            <select name="hotel" 
                    id="hotel" 
                    required 
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                <option value="">Sélectionner un hôtel</option>
                {% for hotel in data.hotels %}
                    <option value="{{ hotel.id }}">{{ hotel.nom }}</option>
                {% endfor %}
            </select>
        {% endif %}
    </div>
</div>

<!-- Description -->
<div class="mb-4">
    <label for="description" class="block text-sm font-medium text-gray-700 mb-2">Description</label>
    <textarea name="description" 
                id="description" 
                rows="4" 
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" 
                placeholder="Description du devis...">{{ isEdit ? instrumentation_devis.description : '' }}</textarea>
</div>

<!-- Dates prévisionnelles -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-4">
    <div>
        <label for="prev_start_at" class="block text-sm font-medium text-gray-700 mb-2">
            Date de début prévisionnelle
        </label>
        <input type="date" 
                name="prev_start_at" 
                id="prev_start_at" 
                value="{{ isEdit and instrumentation_devis.prevStartAt ? instrumentation_devis.prevStartAt|date('Y-m-d') : '' }}"
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
    </div>
    <div>
        <label for="prev_end_at" class="block text-sm font-medium text-gray-700 mb-2">
            Date de fin prévisionnelle
        </label>
        <input type="date" 
                name="prev_end_at" 
                id="prev_end_at" 
                value="{{ isEdit and instrumentation_devis.prevEndAt ? instrumentation_devis.prevEndAt|date('Y-m-d') : '' }}"
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
    </div>
</div>

<!-- Dates réelles -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-4">
    <div>
        <label for="rea_start_at" class="block text-sm font-medium text-gray-700 mb-2">
            Date de début réelle
        </label>
        <input type="date" 
                name="rea_start_at" 
                id="rea_start_at" 
                value="{{ isEdit and instrumentation_devis.reaStartAt ? instrumentation_devis.reaStartAt|date('Y-m-d') : '' }}"
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
    </div>
    <div>
        <label for="rea_end_at" class="block text-sm font-medium text-gray-700 mb-2">
            Date de fin réelle
        </label>
        <input type="date" 
                name="rea_end_at" 
                id="rea_end_at" 
                value="{{ isEdit and instrumentation_devis.reaEndAt ? instrumentation_devis.reaEndAt|date('Y-m-d') : '' }}"
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
    </div>
</div>

<div class="mb-4">
    <label class="flex flex-row h-full items-center">
        <input type="checkbox" 
                name="devis_signe" 
                {% if isEdit and instrumentation_devis.devisSigne %}checked{% endif %}
                class="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
        <span class="ml-2 text-gray-700">Devis signé</span>
    </label>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const startDate = document.getElementById('prev_start_at');
    const endDate = document.getElementById('prev_end_at');
    const realStartDate = document.getElementById('rea_start_at');
    const realEndDate = document.getElementById('rea_end_at');
    
    function validateDates(startField, endField, fieldName) {
        if (startField && endField && startField.value && endField.value) {
            if (new Date(startField.value) > new Date(endField.value)) {
                alert(`La date de début ${fieldName} ne peut pas être postérieure à la date de fin`);
                endField.value = '';
                return false;
            }
        }
        return true;
    }
    
    if (startDate && endDate) {
        startDate.addEventListener('change', () => validateDates(startDate, endDate, 'prévisionnelle'));
        endDate.addEventListener('change', () => validateDates(startDate, endDate, 'prévisionnelle'));
    }
    
    if (realStartDate && realEndDate) {
        realStartDate.addEventListener('change', () => validateDates(realStartDate, realEndDate, 'réelle'));
        realEndDate.addEventListener('change', () => validateDates(realStartDate, realEndDate, 'réelle'));
    }
    
    const form = document.querySelector('form[data-validate]');
    if (form) {
        form.addEventListener('submit', function(e) { 
            const requiredFields = form.querySelectorAll('[required]');
            let isValid = true;
            
            requiredFields.forEach(field => {
                if (!field.value.trim()) {
                    field.classList.add('border-red-500');
                    isValid = false;
                } else {
                    field.classList.remove('border-red-500');
                }
            });
            
            if (!isValid) {
                e.preventDefault();
                alert('Veuillez remplir tous les champs obligatoires');
                return false;
            }
            
            if (!validateDates(startDate, endDate, 'prévisionnelle') || 
                !validateDates(realStartDate, realEndDate, 'réelle')) {
                e.preventDefault();
                return false;
            }
        });
    }
});
</script>