jQuery(document).ready(function ($) {

    var form = $('#booking-form'),
        loading = $('#form-loading'),
        content = $('#form-content'),
        message = $('#form-message');

    form.on('submit', function (e) {
        e.preventDefault();

        // Affiche le loader
        loading.css({
            paddingTop: Math.round(form.height() / 2) + 'px'
        }).removeClass('hide');

        $.ajax({
            type: 'POST',
            url: 'script.php',
            data: form.serialize(),
            dataType: 'json',

            success: function (data) {

                loading.fadeOut('fast', function () {
                    $(this).addClass('hide').show();
                });

                // ❌ ERREURS DE VALIDATION
                if (data.code === 'failed') {

                    $('.error-message', form).remove();

                    data.fields.reverse();

                    for (var i in data.fields) {
                        $('[name=' + data.fields[i].name + ']', form)
                            .trigger('focus')
                            .parent('div')
                            .append(
                                $('<div>')
                                    .addClass('error-message')
                                    .html(data.fields[i].message)
                            );
                    }

                }

                // ✅ SUCCESS
else if (data.code === 'success') {
    content.fadeOut('fast', function () {

        // Numéro de réservation
        var num = $('#reservation-number');
        num.text(data.reservation_number);

        // E-mail
        var email = $('#textm').val(); // récupère le champ du formulaire
        var emailDisplay = $('#reservation-email');
        emailDisplay.text(email);

        message.removeClass('hide').hide().fadeIn();
    });
}

            },

            error: function () {
                loading.addClass('hide');
                alert("Erreur serveur. Merci de réessayer.");
            }
        });

    });


    /* ==========================
       DATE PICKER
    ========================== */

    $('#date-from, #date-to', form).dateTimePicker({
        paging: ['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-right"></i>'],
        picker: ['date'],
        format: 'd/m/Y',

        filter: function (date) {
            var d = new Date();
            return date.getTime() >= d.getTime();
        },

        filter_show: function (date) {
            var d = new Date();
            return date.getYear() > d.getYear() ||
                (date.getYear() == d.getYear() && date.getMonth() >= d.getMonth());
        }

    }).dateTimePickerRange();


    /* ==========================
       SELECT STYLE
    ========================== */

    $('select', form).styleSelect({
        class_wrap: 'ul-dropdown-wrap',
    });


    /* ==========================
       GROUP CLICK UI
    ========================== */

    var groups = $('.group', form).not('.submit');

    groups.on('click', function () {
        groups.removeClass('active');
        $(this).addClass('active');
    });

    $('#name').trigger('click').trigger('focus');

});