{% extends '@EasyAdmin/default/edit.html.twig' %}

{% block head_stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" />
    <link rel="stylesheet" href="{{ asset('asset/css/jquery.datetimepicker.min.css') }}">
{% endblock %}

{% block main %}
    {% block entity_form %}
        {{ form(form, { 'attr': { 'novalidate': 'novalidate', 'class': 'entity-'~_entity_config.name|lower } }) }}
        
    {% endblock entity_form %}

    {% block delete_form %}
        {{ include('components/_delete_form.html.twig', {
            view: 'edit',
            referer: app.request.query.get('referer', ''),
            delete_form: delete_form,
            _translation_domain: _entity_config.translation_domain,
            _trans_parameters: _trans_parameters,
            _entity_config: _entity_config,
        }, with_context = false) }}
    {% endblock delete_form %}

     {% block save_form %}
        {{ include('components/_save_form.html.twig', {
            view: 'edit',
            referer: app.request.query.get('referer', ''),
            save_form: form,
            _translation_domain: _entity_config.translation_domain,
            _trans_parameters: _trans_parameters,
            _entity_config: _entity_config,
        }, with_context = false) }}
    {% endblock save_form %}

     {% block regenerate_form %}
        {{ include('components/_regenerate_form.html.twig', {
            _entity_config: _entity_config,
        }, with_context = false) }}
        {% endblock regenerate_form %}
{% endblock %}

{% block body_javascript %}
    <script type="text/javascript">
        $(function() {
            $('.edit-form').areYouSure({ 'message': '{{ 'form.are_you_sure'|trans({}, 'EasyAdminBundle')|e('js') }}' });

            const entityForm = document.querySelector('form.edit-form');
            const formSubmitButton = entityForm.querySelector('button[type="submit"]');
            const inputFieldsSelector = 'input,select,textarea';

            // Adding visual feedback for invalid fields: any ".form-group" with invalid fields
            // receives "has-error" class. The class is removed on click on the ".form-group"
            // itself to support custom/complex fields.
            formSubmitButton.addEventListener('click', function() {
                entityForm.querySelectorAll(inputFieldsSelector).forEach(function (input) {
                    if (!input.validity.valid) {
                        const formGroup = input.closest('div.form-group');

                        formGroup.classList.add('has-error');

                        formGroup.addEventListener('click', function onFormGroupClick() {
                            formGroup.classList.remove('has-error');
                            formGroup.removeEventListener('click', onFormGroupClick);
                        });
                    }
                });
            });

            // forms with tabs require some special treatment for errors. The problem
            // is when the field with errors is included in a tab not currently visible.
            // Browser shows this error "An invalid form control with name='...' is not focusable."
            // So, the user clicks on Submit button, the form is not submitted and the error
            // is not displayed. This JavaScript code ensures that each tab shows a badge with
            // the number of errors in it.
            formSubmitButton.addEventListener('click', function() {
                const formTabPanes = entityForm.querySelectorAll('.tab-pane');
                if (0 === formTabPanes.length) {
                    return;
                }

                let firstNavTabItemWithError = null;

                formTabPanes.forEach(function (tabPane) {
                    let tabPaneNumErrors = 0;
                    tabPane.querySelectorAll(inputFieldsSelector).forEach(function (input) {
                        if (!input.validity.valid) {
                            tabPaneNumErrors++;
                        }
                    });

                    let navTabItem = entityForm.querySelector('.nav-item a[href="#' + tabPane.id + '"]');
                    let existingErrorBadge = navTabItem.querySelector('span.badge.badge-danger');
                    if (null !== existingErrorBadge) {
                        navTabItem.removeChild(existingErrorBadge);
                    }

                    if (tabPaneNumErrors > 0) {
                        let newErrorBadge = document.createElement('span');
                        newErrorBadge.classList.add('badge', 'badge-danger');
                        newErrorBadge.title = 'form.tab.error_badge_title';
                        newErrorBadge.textContent = tabPaneNumErrors;

                        navTabItem.appendChild(newErrorBadge);

                        if (null === firstNavTabItemWithError) {
                            firstNavTabItemWithError = navTabItem;
                        }
                    }
                });

                if (firstNavTabItemWithError) {
                    firstNavTabItemWithError.click();
                }
            });

            $('a.action-delete').on('click', function(e) {
                e.preventDefault();
                $('#modal-delete').modal({ backdrop: true, keyboard: true })
                    .off('click', '#modal-delete-button')
                    .on('click', '#modal-delete-button', function () {
                        $('#delete-form').trigger('submit');
                });
            });

            $('form.entity-media button.action-save').on('click', function(e) {
                e.preventDefault();
                // e.stopPropagation();
                var data = $('form.entity-media').serializeArray();
                if(data.find(r => r.name == 'media[regenerateFormat]')) {
                    $('#modal-regenerate').modal(
                        {
                            escapeClose: false
                            , clickClose: false
                            , showClose: false
                            , backdrop: 'static'
                            , keyboard: false
                        }
                    );
                }
            });
        });
    </script>

    {{ include('components/_select2_widget.html.twig') }}


    <script src="{{ asset('asset/js/jquery.datetimepicker.full.min.js') }}"></script>
    <script src="{{ asset('asset/js/initDatetimepicker.js') }}"></script>
    <script src="{{ asset('asset/js/jquery-ui.min.js') }}"></script>

{% endblock %}