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

{% block new_action %}
{% endblock new_action %}
{% block actions_tabs %}
    <li>
        <a class="nav-link" href="{{ path('easyadmin', { entity: 'Plan', action: 'new' }) }}">
            <div class="icon-new">
                <i class="s-24 icon-add_circle"></i>
            </div>
            <div class="link-new">
                {{ 'Plan'|trans }}
            </div>
        </a>
    </li>
    <li>
        <a class="nav-link" href="{{ path('easyadmin', { entity: 'FormPlanEnterprise', action: 'list' }) }}">
            <div class="icon-new">
                <i class="s-24 icon-account_balance_wallet"></i>
            </div>
            <div class="link-new">
                {{ 'FormPlanEnterprise'|trans }}
            </div>
        </a>
    </li>
{% endblock actions_tabs %}

{% block wrapper %}
    {% block main %}
        {% set _fields_visible_by_user = fields|filter((metadata, field) => easyadmin_is_granted(metadata.permission)) %}
        {% set _number_of_hidden_results = 0 %}
        {% set _list_item_actions = easyadmin_get_actions_for_list_item(_entity_config.name) %}
        <div class="container-fluid animatedParent animateOnce">
            <div class="tab-content my-3" id="v-pills-tabContent">
                <div class="tab-pane animated fadeInUpShort go active show" id="v-pills-sellers" role="tabpanel" aria-labelledby="v-pills-sellers-tab">
                    <div class="row">
                        {% for item in paginator.currentPageResults %}
                            {% set _item_id = '' ~ attribute(item, _entity_config.primary_key_field_name) %}
                            <div class="col-md-3 mb-3">
                                
                                <div class="card 
                                    text-white text-left p-3  no-b shadow"
                                    style="background-color:
                                    {% if not item.color is empty %}
                                        #{{item.color}};
                                    {% endif %}
                                    "
                                    >
                                    <div>
                                        <h6 class="plan-name ">
                                            {{item.name}}
                                            <div class="float-right text-right faicon-list plan-item-list"  style="color:white !important;" entityid="{{ item.id }}">
                                                {% if _list_item_actions|length > 0 %}
                                                    {% set _column_label = 'list.row_actions'|trans(_trans_parameters, 'EasyAdminBundle') %}
                                                        {% block item_actions %}
                                                            {% set _actions_template = _entity_config.list.collapse_actions
                                                                ? '@EasyAdmin/default/includes/_actions_dropdown.html.twig'
                                                                : '@EasyAdmin/default/includes/_actions.html.twig'
                                                            %}
                                                            {{ include(_actions_template, {
                                                                actions: _list_item_actions,
                                                                entity_config: _entity_config,
                                                                request_parameters: _request_parameters,
                                                                translation_domain: _entity_config.translation_domain,
                                                                trans_parameters: _trans_parameters,
                                                                item_id: _item_id,
                                                                item: item
                                                            }, with_context = false) }}
                                                        {% endblock item_actions %}
                                                {% endif %}
                                            </div>
                                           
                                        </h6>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>    
        </div>
        {# la ventanida de delete #}
        {% block delete_form %}
            {% set referer = paginator.currentPage == paginator.nbPages and 1 != paginator.currentPage and 1 == paginator.currentPageResults|length
                ? path('easyadmin', app.request.query|merge({ page: app.request.query.get('page') - 1 }))
                : app.request.requestUri
            %}

            {{ include('@EasyAdmin/default/includes/_delete_form.html.twig', {
                view: 'list',
                referer: referer,
                delete_form: delete_form_template,
                _translation_domain: _entity_config.translation_domain,
                _trans_parameters: _trans_parameters,
                _entity_config: _entity_config,
            }, with_context = false) }}
        {% endblock delete_form %}

    {% endblock main %}
{% endblock wrapper %}

{% block body_javascript %}
    {{ parent() }}

    <script type="text/javascript">
        $(function() {
            const toggles = document.querySelectorAll('.checkbox-switch input[type="checkbox"]');
            for (i = 0; i < toggles.length; i++) {
                toggles[i].addEventListener('change', function () {
                    const toggle = this;
                    const newValue = this.checked;
                    const oldValue = !newValue;
                    const propertyName = this.closest('.checkbox-switch').dataset.propertyname;

                    const toggleUrl = "{{ path('easyadmin', { action: 'edit', entity: _entity_config.name, view: 'list' })|raw }}"
                        + "&id=" + this.closest('tr').dataset.id
                        + "&property=" + propertyName
                        + "&newValue=" + newValue.toString();

                    let toggleRequest = $.ajax({ type: "GET", url: toggleUrl, data: {} });

                    toggleRequest.done(function(result) {});

                    toggleRequest.fail(function() {
                        // in case of error, restore the original value and disable the toggle
                        toggle.checked = oldValue;
                        toggle.disabled = true;
                        toggle.closest('.checkbox-switch').classList.add('disabled');
                    });
                });
            }

            $('.action-delete').on('click', function(e) {
                e.preventDefault();
                const id = $(this).parents('div').first().attr('entityid');

                $('#modal-delete').modal({ backdrop: true, keyboard: true })
                    .off('click', '#modal-delete-button')
                    .on('click', '#modal-delete-button', function () {
                        let deleteForm = $('#delete-form');
                        deleteForm.attr('action', deleteForm.attr('action').replace('__id__', id));
                        deleteForm.trigger('submit');
                    });
            });

            {% if _has_filters %}
            // HTML5 specifies that a <script> tag inserted with innerHTML should not execute
            // https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML#Security_considerations
            // That's why we can't use just 'innerHTML'. See https://stackoverflow.com/a/47614491/2804294
            var setInnerHTML = function(element, htmlContent) {
                element.innerHTML = htmlContent;
                Array.from(element.querySelectorAll('script')).forEach( oldScript => {
                    const newScript = document.createElement('script');
                    Array.from(oldScript.attributes)
                        .forEach(attr => newScript.setAttribute(attr.name, attr.value));
                    newScript.appendChild(document.createTextNode(oldScript.innerHTML));
                    oldScript.parentNode.replaceChild(newScript, oldScript);
                });
            };

            document.querySelector('.action-filters-button').addEventListener('click', function(event) {
                let filterButton = event.currentTarget;
                let filterModal = document.querySelector(filterButton.dataset.modal);
                let filterModalBody = filterModal.querySelector('.modal-body');

                $(filterModal).modal({ backdrop: true, keyboard: true });
                filterModalBody.innerHTML = '<div class="fa-3x px-3 py-3 text-muted text-center"><i class="fas fa-circle-notch fa-spin"></i></div>';

                $.get(filterButton.getAttribute('href'), function (response) {
                    setInnerHTML(filterModalBody, response);
                });

                event.preventDefault();
                event.stopPropagation();
            });
            {% endif %}

            {% if _has_batch_actions %}
            const titleContent = $('.content-header-title > .title').html();
            $(document).on('click', '.deselect-batch-button', function () {
                $(this).closest('.content').find(':checkbox.form-batch-checkbox-all')
                    .prop('checked', false).trigger('change');
            });
            $(document).on('change', '.form-batch-checkbox-all', function () {
                $(this).closest('.content').find(':checkbox.form-batch-checkbox')
                    .prop('checked', $(this).prop('checked')).trigger('change');
            });
            $(document).on('change', '.form-batch-checkbox', function () {
                const $content = $(this).closest('.content');
                let $input = $content.find(':hidden#batch_form_ids');
                let ids = $input.val() ? $input.val().split(',') : [];
                const id = $(this).val();

                if ($(this).prop('checked')) {
                    if (-1 === ids.indexOf(id)) {
                        ids.push(id);
                    }
                } else {
                    ids = ids.filter(function(value) { return value !== id });
                    $content.find(':checkbox.form-batch-checkbox-all').prop('checked', false);
                }

                if (0 === ids.length) {
                    $content.find('.global-actions').show();
                    $content.find('.batch-actions').hide();
                    $content.find('table').removeClass('table-batch');
                } else {
                    $content.find('.batch-actions').show();
                    $content.find('.global-actions').hide();
                    $content.find('table').addClass('table-batch');
                }

                $input.val(ids.join(','));
                $content.find('.content-header-title > .title').html(0 === ids.length ? titleContent : '');
            });

            let modalTitle = $('#batch-action-confirmation-title');
            const titleContentWithPlaceholders = modalTitle.text();
            $('button[name="batch_form[name]"].batch-action-requires-confirmation').on('click', function (event) {
                event.preventDefault();
                event.stopPropagation();
                let $button = $(this);

                const actionName = $button.text();
                const numberOfSelectedItems = $('input[type="checkbox"].form-batch-checkbox:checked').length;
                modalTitle.text(titleContentWithPlaceholders
                    .replace('%action_name%', actionName)
                    .replace('%num_items%', numberOfSelectedItems));

                $('#modal-batch-action').modal({ backdrop : true, keyboard : true })
                    .off('click', '#modal-batch-action-button')
                    .on('click', '#modal-batch-action-button', function () {
                        $button.unbind('click');
                        $button.trigger('click');

                        modalTitle.text(titleContentWithPlaceholders);
                    });
            });
            {% endif %}
        });
    </script>

    {% if 'search' == app.request.get('action') %}
        <script type="text/javascript">
            const _search_query = "{{ app.request.get('query')|default('')|e('js') }}";
            // the original query is prepended to allow matching exact phrases in addition to single words
            $('#main').find('table tbody td:not(.actions)').highlight($.merge([_search_query], _search_query.split(' ')));
        </script>
    {% endif %}
{% endblock %}