{% extends '@PrestaShop/Admin/layout.html.twig' %}

{% block content %}
    {% block customhtmlblock_edit_form %}
        {% include '@Modules/ws_customhtml/views/templates/admin/form/blocks/block_form.html.twig' %}
    {% endblock %}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        $(document).ready(function () {
            window.prestashop.component.initComponents([
                'TinyMCEEditor',
            ]);

            function toggleBlockTypeFields() {
                var type = $('#custom_html_block_type').val();

                $('.customhtmlblock-type-html').hide();
                $('.customhtmlblock-type-faq').hide();
                $('.customhtmlblock-type-banner').hide();
                $('.customhtmlblock-type-' + type).show();
            }

            $('#custom_html_block_type').on('change', toggleBlockTypeFields);
            toggleBlockTypeFields();

            var removeFaqLabel = '{{ 'Remove'|trans({}, 'Admin.Actions')|e('js') }}';
            var faqContainer = $('#customhtmlblock-faq-items');

            $('#customhtmlblock-add-faq').on('click', function () {
                var index = faqContainer.data('index');
                var prototype = faqContainer.data('prototype').replace(/__name__/g, index);

                var item = $('<div class="customhtmlblock-faq-item card mb-2"><div class="card-body"></div></div>');
                item.find('.card-body')
                    .append(prototype)
                    .append(
                        '<button type="button" class="btn btn-outline-danger btn-sm customhtmlblock-remove-faq">' +
                        '<i class="material-icons">delete</i> ' + removeFaqLabel + '</button>'
                    );

                faqContainer.append(item);
                faqContainer.data('index', index + 1);
            });

            faqContainer.on('click', '.customhtmlblock-remove-faq', function () {
                $(this).closest('.customhtmlblock-faq-item').remove();
            });
        });
    </script>
{% endblock %}