{{ form_start(form) }}

<div class="relative py-6 max-w-2xl mx-auto mb-12 mt-4">
    <div class="absolute inset-0 bg-gradient-to-r from-blue-400 to-blue-700 shadow-lg transform -skew-y-6 sm:skew-y-0 sm:-rotate-6 sm:rounded-3xl"></div>
    <div class="relative px-6 py-10 bg-white shadow-lg sm:rounded-3xl sm:p-20">
        <div class="max-w-2xl mx-auto">
            <div class="space-y-6 divide-y divide-gray-200">
                <!-- Nom du produit -->
                <div class="pb-6">
                    {{ form_label(form.name, 'Nom du produit:', {'label_attr': {'class': 'text-gray-700 text-lg font-medium'}}) }}
                    {{ form_widget(form.name, {'attr': {'class': 'block w-full mt-1 py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:ring-rose-500 focus:border-rose-500'}}) }}
                    {{ form_errors(form.name) }}
                </div>

                <!-- Description -->
                <div class="pb-6">
                    {{ form_label(form.description, 'Description :', {'label_attr': {'class': 'text-gray-700 text-lg font-medium'}}) }}
                    {{ form_widget(form.description, {'attr': {'class': 'block w-full mt-1 py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:ring-rose-500 focus:border-rose-500'}}) }}
                    {{ form_errors(form.description) }}
                </div>

                <!-- Disponibilité (vente/location/les deux) -->
                <div class="pb-6">
                    {{ form_label(form.availability, 'Disponibilité :', {'label_attr': {'class': 'text-gray-700 text-lg font-medium'}}) }}
                    {{ form_widget(form.availability, {'attr': {'class': 'block w-full mt-1 py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:ring-rose-500 focus:border-rose-500'}}) }}
                    {{ form_errors(form.availability) }}
                </div>

                <!-- Stock et Prix (groupe) -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 pb-6">
                    <!-- Stock pour la vente -->
                    <div>
                        {{ form_label(form.stock, 'Stock des ventes :', {'label_attr': {'class': 'text-gray-700 text-lg font-medium'}}) }}
                        {{ form_widget(form.stock, {'attr': {'class': 'block w-full mt-1 py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:ring-rose-500 focus:border-rose-500'}}) }}
                        {{ form_errors(form.stock) }}
                    </div>

                    <!-- Prix de vente -->
                    <div>
                        {{ form_label(form.price, 'Prix de vente :', {'label_attr': {'class': 'text-gray-700 text-lg font-medium'}}) }}
                        {{ form_widget(form.price, {'attr': {'class': 'block w-full mt-1 py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:ring-rose-500 focus:border-rose-500'}}) }}
                        {{ form_errors(form.price) }}
                    </div>

                    <!-- Stock pour la location -->
                    <div>
                        {{ form_label(form.rentalStock, 'Stock des locations :', {'label_attr': {'class': 'text-gray-700 text-lg font-medium'}}) }}
                        {{ form_widget(form.rentalStock, {'attr': {'class': 'block w-full mt-1 py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:ring-rose-500 focus:border-rose-500'}}) }}
                        {{ form_errors(form.rentalStock) }}
                    </div>

                    <!-- Prix de location -->
                    <div>
                        {{ form_label(form.rentalPrice, 'Prix de location :', {'label_attr': {'class': 'text-gray-700 text-lg font-medium'}}) }}
                        {{ form_widget(form.rentalPrice, {'attr': {'class': 'block w-full mt-1 py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:ring-rose-500 focus:border-rose-500'}}) }}
                        {{ form_errors(form.rentalPrice) }}
                    </div>
                </div>

                <!-- Produit vedette -->
                <div class="pb-6 flex items-center">
                    {{ form_label(form.topProduct, 'Produit vedette :', {'label_attr': {'class': 'text-gray-700 text-lg font-medium'}}) }}
                    {{ form_widget(form.topProduct, {'attr': {'class': 'ml-3 h-4 w-4 text-rose-600 border-gray-300 rounded focus:ring-rose-500'}}) }}
                    {{ form_errors(form.topProduct) }}
                </div>

                <!-- Catégorie -->
                <div class="pb-6">
                    {{ form_label(form.category, 'Catégorie :', {'label_attr': {'class': 'text-gray-700 text-lg font-medium'}}) }}
                    {{ form_widget(form.category, {'attr': {'class': 'block w-full mt-1 py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:ring-rose-500 focus:border-rose-500'}}) }}
                    {{ form_errors(form.category) }}
                </div>

                <!-- Images -->
                <div class="pb-6">
                    <div id="properties-images-container">
                        <div id="properties-images-fields-list"
                             data-prototype="{{ form_widget(form.image.vars.prototype)|e }}"
                             data-widget-tags="<div class='form-group mb-4 p-4 bg-white shadow-md rounded-lg'></div>"
                             data-widget-counter="{{ form.image|length }}">
                            {% for key, imageForm in form.image %}
                                <div class="form-group mb-4 p-4 bg-white shadow-md rounded-lg" data-key="{{ key }}">
                                    <h3 class="text-gray-700 text-lg font-medium mb-2">Image {{ key + 1 }}</h3>
                                    {{ form_widget(imageForm, { 'attr': {'class': 'form-control-file my-2 text-sm lg:text-base', 'data-key': key + 1 } }) }}
                                    <button type="button" class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded mt-2 focus:outline-none remove-image-widget">
                                        Supprimer
                                    </button>
                                    <img id="image-preview-{{ key + 1 }}" class="mt-4 max-w-full max-h-40 object-cover rounded-lg" style="display:none;" />
                                </div>
                            {% endfor %}
                        </div>
                        <button type="button"
                                class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded focus:outline-none add-another-collection-widget"
                                data-list-selector="#properties-images-fields-list">
                            Ajouter une image
                        </button>
                    </div>
                </div>

                <!-- Bouton de soumission -->
                <div class="pb-6">
                    <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg focus:outline-none">
                        {{ button_label|default('Ajouter le produit') }}
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

{{ form_end(form) }}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="{{ asset('js/product.js') }}"></script>
<script>
    $(document).ready(function() {
        var list = $('#properties-images-fields-list');
        var counter = list.children().length; // Compter les images existantes

        function updateWidgetCounter() {
            var counter = list.children().length;
            list.data('widget-counter', counter);
        }

        // Fonction pour mettre à jour les titres des images avec leur indice
        function updateImageTitles() {
            list.children('.form-group').each(function(index) {
                $(this).find('h3').text('Image ' + (index + 1));
            });
        }

        // Ajouter une nouvelle image
        $('.add-another-collection-widget').click(function() {
            var newWidget = $(list.attr('data-prototype').replace(/__name__/g, counter));
            counter++;

            var newElem = $(list.attr('data-widget-tags')).html(newWidget);
            newElem.appendTo(list);

            // Ajouter un titre d'image avec l'indice
            newElem.prepend('<h3 class="text-gray-700 text-lg font-medium mb-2">Image ' + counter + '</h3>');

            newElem.find('input[type="file"]').on('change', function() {
                var key = $(this).data('key');
                displayFileName($(this), key);
                displayImagePreview($(this), key);
            });

            newElem.append('<button type="button" class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded mt-2 focus:outline-none remove-image-widget">Supprimer</button>');

            updateWidgetCounter();
            updateImageTitles();
        });

        // Supprimer une image
        list.on('click', '.remove-image-widget', function() {
            $(this).closest('.form-group').remove();
            updateWidgetCounter();
            updateImageTitles(); // Mettre à jour les titres après suppression
        });

        function toggleFields() {
            const availability = $('#product_availability').val(); // Récupère la valeur sélectionnée
            if (availability === 'sale') {
                $('#product_price').parent().show();
                $('#product_stock').parent().show();
                $('#product_rentalPrice').parent().hide();
                $('#product_rentalStock').parent().hide();
            } else if (availability === 'rental') {
                $('#product_price').parent().hide();
                $('#product_stock').parent().hide();
                $('#product_rentalPrice').parent().show();
                $('#product_rentalStock').parent().show();
            } else {
                $('#product_price').parent().show();
                $('#product_stock').parent().show();
                $('#product_rentalPrice').parent().show();
                $('#product_rentalStock').parent().show();
            }
        }

        toggleFields();

        $('#product_availability').change(function() {
            toggleFields();
        });

        // Afficher l'aperçu de l'image et le nom du fichier sélectionné
        function displayImagePreview(input, key) {
            if (input[0].files && input[0].files[0]) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    $('#image-preview-' + key).attr('src', e.target.result).show();
                };
                reader.readAsDataURL(input[0].files[0]);
            }
        }

        function displayFileName(input, key) {
            var fileName = input.val().split('\\').pop();
            $('label[for="product_image_' + key + '"]').text(fileName);
        }

        // Initialiser les boutons de suppression existants et afficher les prévisualisations
        list.children().each(function(index) {
            $(this).find('input[type="file"]').on('change', function() {
                var key = $(this).data('key');
                displayFileName($(this), key);
                displayImagePreview($(this), key);
            });
        });
    });
</script>