{% extends 'admin/base.html.twig' %}

{% block title %}New Shortcode | Admin | Universities.com{% endblock %}

{% block body %}
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="page-title-box">
                    <div class="page-title-right">
                        <ol class="breadcrumb m-0">
                            <li class="breadcrumb-item"><a href="{{ path("admin_dashboard") }}">Dashboard</a></li>
                            <li class="breadcrumb-item"><a href="{{ path("admin_shortcodes") }}">Shortcodes</a></li>
                            <li class="breadcrumb-item active">New Shortcode</li>
                        </ol>
                    </div>
                    <h4 class="page-title">New Shortcode</h4>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <div class="card bg-light">
                    <div class="card-body">
                        {{ form_start(form) }}
                        {{ form_widget(form) }}
                        <button type="button" class="btn btn-primary add_item_link" data-collection-holder-class="shortcode_widgets">Add a Widget</button>
                        <button type="submit" class="btn btn-primary">Save</button>
                        {{ form_end(form) }}
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
{% endblock %}

{% block scripts %}
    {{ parent() }}

    <script>
        document.addEventListener('DOMContentLoaded', (e) => {
            const collectionHolder = document.getElementById('shortcode_widgets');

            if (collectionHolder) {
                if (!Object.prototype.hasOwnProperty.call(collectionHolder.dataset, 'index')) {
                    collectionHolder.dataset.index = collectionHolder.querySelectorAll('fieldset').length;
                }
            }

            const addFormToCollection = (e) => {
                const collectionHolder = document.querySelector('#' + e.currentTarget.dataset.collectionHolderClass);
                const item = document.createElement('div');
                item.innerHTML = collectionHolder.dataset.prototype.replace(/__name__/g, collectionHolder.dataset.index);
                const elem = item.firstChild;
                collectionHolder.appendChild(elem);
                collectionHolder.dataset.index++;
                addWidgetFormDeleteLink(elem);

                $(elem).find('.udc-select2').select2({
                    theme: 'bootstrap-5',
                });
            };

            const addWidgetFormDeleteLink = (item) => {
                const removeFormButton = document.createElement('button');
                removeFormButton.innerText = 'Delete this widget';
                removeFormButton.classList += 'btn btn-danger';

                item.append(removeFormButton);

                removeFormButton.addEventListener('click', (e) => {
                    e.preventDefault();
                    item.remove();
                });
            };

            document.querySelectorAll('.add_item_link')
                .forEach(btn => { btn.addEventListener("click", addFormToCollection) });

            document.querySelectorAll('#shortcode_widgets > fieldset')
                .forEach((item) => { addWidgetFormDeleteLink(item) });

            $('.udc-select2').select2({
                theme: 'bootstrap-5',
            });
        });
    </script>
{% endblock %}