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

{# avoid default action of redirect to new form and show modal for select type of new user (provider, user) #}
{% block button_add_list %}
    {% if app.request.get('action') == 'list' %}
        {% if easyadmin_action_is_enabled_for_list_view('new', _entity_config.name) %}
            {% set _action = easyadmin_get_action_for_list_view('new', _entity_config.name) %}
            {# <li> #}
                <a  data-toggle="modal" data-target="#modalUser" style="cursor: pointer;"
                    class="btn-fab fab-right fab-right-bottom-fixed shadow btn-icon-plus">
                <i class="icon icon-plus"></i></a>
            {# </li> #}
        {% endif %}
    {% endif %}
{% endblock %}

{% block new_action %}
    <li>
        <a class="nav-link {% if app.request.get('action')=='new' %}active{% endif %}" id="v-pills-2-tab" data-toggle="modal" data-target="#modalUser" style="cursor: pointer;">
            <div class="icon-new">
                <i class="s-24 icon-add_circle"></i>
            </div>
            <div class="link-new">
                {{ _action.label is defined and not _action.label is empty ? _action.label|trans(_trans_parameters) |trans(_trans_parameters)}}
            </div>
        </a>
    </li>
    <div class="modal fade" id="modalUser" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title font-weight-bold" id="exampleModalLabel">
                    {{ 'Select user type'|trans }}
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-11">
                        <a class="btn btn-primary btn-block font-weight-bold"
                            href="{{ path('easyadmin', { 'entity': 'Provider', 'action': 'new', 'from': 'User' }) }}" role="button">
                            {{ 'Provider'|trans }}</a>
                        <a class="btn btn-primary btn-block font-weight-bold"
                            href="{{ path('easyadmin', { 'entity': 'Client', 'action': 'new', 'from': 'User'}) }}" role="button">
                            {{ 'Client'|trans }}</a>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">{{ 'Close'|trans }}</button>
            </div>
        </div>
        </div>
    </div>
{% endblock new_action %}

{% 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-6 mb-6">
                                <div class="card no-b shadow">
                                    <div class="p-3">
                                        
                                        <div class="image mr-3  float-left">
                                            {% if item.image is defined %}
                                                {% if not item.image is null %}
                                                    <img class="user_avatar no-p" src="{{asset('uploads/images/user/'~item.image)}}" alt="">
                                                {% else %}
                                                    <img class="user_avatar no-p" src="{{asset('img/avatar.jpg')}}" />

                                                {% endif %}
                                            {% else %}
                                                <img class="user_avatar no-b no-p r-5" src="{{asset('img/avatar.jpg')}}" />
                                            {% endif %}
                                        </div>
                                        <div>
                                            <h6 class="p-t-10 avatar-name ">
                                                {% if item.companyName is defined %}
                                                    {{item.companyName}}
                                                {% else %}
                                                    {{item.username}}
                                                {% endif %}

                                                <div class="float-right" 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>

                                            {% if item.email is defined %}
                                                {{item.email}}
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                                <br>
                            </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 %}
    {% block content_footer %}
        {% block paginator %}
            {{ include(_entity_config.templates.paginator) }}
        {% endblock paginator %}
    {% endblock %}
{% endblock %}
{% 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 %}