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

<div class="space-y-4">
    <div>
        {{ form_label(form.startDate, 'Date de début', {'label_attr': {'class': 'block text-sm font-medium text-gray-700'}}) }}
        {{ form_widget(form.startDate, {'attr': {'class': 'mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm', 'id': 'rental_startDate'}}) }}
        {{ form_errors(form.startDate, {'attr': {'class': 'text-red-600 text-sm'}}) }}
    </div>

    <div>
        {{ form_label(form.endDate, 'Date de fin', {'label_attr': {'class': 'block text-sm font-medium text-gray-700'}}) }}
        {{ form_widget(form.endDate, {'attr': {'class': 'mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm', 'id': 'rental_endDate'}}) }}
        {{ form_errors(form.endDate, {'attr': {'class': 'text-red-600 text-sm'}}) }}
    </div>

    <div>
        {{ form_label(form.quantity, 'Quantité', {'label_attr': {'class': 'block text-sm font-medium text-gray-700'}}) }}
        {{ form_widget(form.quantity, {'attr': {'class': 'mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm', 'id': 'rental_quantity'}}) }}
        {{ form_errors(form.quantity, {'attr': {'class': 'text-red-600 text-sm'}}) }}
    </div>

    {{ form_widget(form.totalPrice, {'attr': {'id': 'rental_totalPrice'}}) }}

    <h2>{{ product.name }}</h2>
    <p>{{ product.description }}</p>
    <p>Prix par mois : <span id="rental_price">{{ product.rentalPrice }}</span> €</p>

    <!-- Afficher le nombre de jours sélectionnés -->
    <p>Nombre de jours sélectionnés : <span id="selected_days">0</span> jours</p>

    <!-- Afficher le nombre de quantités sélectionnées -->
    <p>Quantité sélectionnée : <span id="selected_quantity">0</span></p>

    <!-- Afficher le prix total -->
    <p>Total : <span id="total_price_display">0.00</span> €</p>

    <div class="mt-6">
        <button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
            {{ button_label|default('Valider ma location') }}
        </button>
    </div>
</div>

{{ form_end(form) }}

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        const rentalQuantityField = $('#rental_quantity');
        const rentalStartDateField = $('#rental_startDate');
        const rentalEndDateField = $('#rental_endDate');
        const rentalTotalPriceField = $('#rental_totalPrice');
        const rentalPrice = parseFloat($('#rental_price').text());
        const selectedDaysDisplay = $('#selected_days'); // Pour afficher le nombre de jours sélectionnés
        const totalPriceDisplay = $('#total_price_display'); // Pour afficher le prix total
        const selectedQuantityDisplay = $('#selected_quantity'); // Pour afficher le nombre de quantités

        // Fonction pour obtenir la date actuelle au format YYYY-MM-DD
        function getCurrentDate() {
            const today = new Date();
            const yyyy = today.getFullYear();
            const mm = String(today.getMonth() + 1).padStart(2, '0');
            const dd = String(today.getDate()).padStart(2, '0');
            return `${yyyy}-${mm}-${dd}`;
        }

        // Fonction pour ajouter des jours à une date
        function addDaysToDate(date, days) {
            const result = new Date(date);
            result.setDate(result.getDate() + days);
            const yyyy = result.getFullYear();
            const mm = String(result.getMonth() + 1).padStart(2, '0');
            const dd = String(result.getDate()).padStart(2, '0');
            return `${yyyy}-${mm}-${dd}`;
        }

        // Fonction pour valider que la date est dans une plage raisonnable
        function validateDateInput(dateInput) {
            const inputDate = new Date(dateInput);
            const currentDate = new Date();

            // Permettre la sélection jusqu'à 10 ans dans le futur à partir d'aujourd'hui
            const maxAllowedDate = new Date();
            maxAllowedDate.setFullYear(currentDate.getFullYear() + 10);

            return inputDate >= currentDate && inputDate <= maxAllowedDate;
        }

        // Initialiser les dates à l'ouverture du formulaire
        const today = getCurrentDate();
        const tomorrow = addDaysToDate(today, 1);
        rentalStartDateField.val(today);
        rentalEndDateField.val(tomorrow);

        // Validation stricte des dates
        function validateStartDate() {
            let startDate = rentalStartDateField.val();
            if (!validateDateInput(startDate)) {
                startDate = today;
            }
            rentalStartDateField.val(startDate);
            updateEndDateMin();
        }

        function validateEndDate() {
            let endDate = rentalEndDateField.val();
            const startDate = rentalStartDateField.val();
            if (!validateDateInput(endDate) || new Date(endDate) < new Date(startDate)) {
                endDate = addDaysToDate(startDate, 1);
            }
            rentalEndDateField.val(endDate);
            updateTotalPrice();
        }

        // Fonction pour mettre à jour la date de fin minimale
        function updateEndDateMin() {
            const startDate = rentalStartDateField.val();
            const newEndDateMin = addDaysToDate(startDate, 1);
            rentalEndDateField.attr('min', newEndDateMin);
            validateEndDate();
        }

        // Fonction pour calculer le prorata des mois (en jours utilisés)
        function calculateProrata(startDate, endDate) {
            const start = new Date(startDate);
            const end = new Date(endDate);
            const timeDiff = end - start;
            const dayDiff = timeDiff / (1000 * 3600 * 24);
            selectedDaysDisplay.text(dayDiff); // Mettre à jour le nombre de jours sélectionnés
            return dayDiff / 30; // Approximation en mois
        }

        // Fonction pour mettre à jour le prix total
        function updateTotalPrice() {
            const quantity = parseInt(rentalQuantityField.val(), 10);
            const startDate = rentalStartDateField.val();
            const endDate = rentalEndDateField.val();
            const prorataMonths = calculateProrata(startDate, endDate);

            if (!isNaN(quantity) && quantity > 0 && prorataMonths > 0) {
                const totalPrice = rentalPrice * quantity * prorataMonths;
                rentalTotalPriceField.val(totalPrice.toFixed(2));
                totalPriceDisplay.text(totalPrice.toFixed(2)); // Mettre à jour l'affichage du prix total
                selectedQuantityDisplay.text(quantity); // Mettre à jour l'affichage des quantités sélectionnées
            } else {
                rentalTotalPriceField.val('');
                totalPriceDisplay.text('0.00');
                selectedQuantityDisplay.text('0');
            }
        }

        // Ajouter des écouteurs d'événements pour les modifications
        rentalQuantityField.on('input', updateTotalPrice);
        rentalStartDateField.on('change', function() {
            validateStartDate();
            updateTotalPrice();
        });
        rentalEndDateField.on('change', function() {
            validateEndDate();
            updateTotalPrice();
        });

        // Forcer la revalidation au chargement pour éviter les entrées invalides
        validateStartDate();
        validateEndDate();
    });
</script>