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

{% block content %}
    <div class="card">
        <div class="card-header">
            <span>{{ "activity" | trans({}, 'admin') }}</span>
            <a href="{{ path('admin_activity_settings') }}" class="btn btn-warning btn-sm float-right pt-1 pb-1 pr-2 pl-2 ml-2" title="{{ "settings" | trans({}, 'admin') }}">
                <i class="fas fa-cog"></i>
            </a>
            <button type="button" id="sortButton" class="btn btn-info btn-sm float-right pt-1 pb-1 pr-2 pl-2 ml-2" title="{{ "sort" | trans({}, 'admin') }}">
                <span id="sortButtonText">
                    <i class="fas fa-sort"></i>
                </span>
            </button>
            <a href="{{ path('admin_activity_edit', {'id': 'new'}) }}"
               class="btn btn-success btn-sm float-right pt-1 pb-1 pr-2 pl-2"
               title="{{ "add.activity" | trans({}, 'admin') }}">
                <i class="fas fa-plus"></i>
            </a>
        </div>
        <div class="card-body">
            {% if activities %}
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                        <tr>
                            <th scope="col" class="col-2 col-md-1 text-center">{{ "sort" | trans({}, 'admin') }}</th>
                            <th scope="col" class="col-6">{{ "name" | trans({}, 'admin') }}</th>
                            <th scope="col" class="col-2 col-md-1 text-center">{{ "state" | trans({}, 'admin') }}</th>
                            <th scope="col" class="col-2 col-md-1 text-center">{{ "delete" | trans({}, 'admin') }}</th>
                        </tr>
                        </thead>
                        <tbody class="sortable">
                        {% for activity in activities %}
                            <tr data-id="{{ activity.id }}">
                                <th scope="row" class="text-center sortNumber">{{ loop.index }}</th>
                                <td>
                                    <a href="{{ path('admin_activity_edit', {'id': activity.id}) }}" class="badge badge-paradies">
                                        {{ activity.name.nl }}
                                    </a>
                                </td>
                                <td class="text-center stateWrapper">
                                    <span class="state btn btn-xs btn-{{ activity.isActive ? 'success' : 'danger' }}">
                                        {{ activity.isActive ? "active" | trans({}, 'admin') : "inactive" | trans({}, 'admin') }}
                                    </span>
                                </td>
                                <td class="text-center">
                                    <a tabindex="0"
                                       class="btn btn-sm btn-outline-danger"
                                       role="button"
                                       data-toggle="popover"
                                       data-trigger="focus"
                                       data-html="true"
                                       title="{{ "delete.activity" | trans({}, 'admin') }}"
                                       data-content="{{ "delete.activity.confirm" | trans({}, 'admin') }}<br><br><a href='{{ path('admin_activity_remove', {'id': activity.id}) }}' class='btn btn-danger btn-sm d-block'>{{ "delete" | trans({}, 'admin') }}</a>">
                                        <i class="far fa-trash-alt"></i>
                                    </a>
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% else %}
                {{ "no.activities" | trans({}, 'admin') }}
            {% endif %}
        </div>
    </div>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script type="text/javascript">
    $(document).ready(function() {
        $( function() {
            var sortable = $( ".sortable" );

            sortable.sortable({
                stop: function( event, ui ) {}
            });

            sortable.sortable("disable");

            $('#sortButton').on('click', function(){

                var sortable       = $(".sortable");
                var table          = $('.table-responsive');

                if(sortable.hasClass('active')) {
                    sortable.sortable("disable").removeClass('active');
                    table.css('border','none');
                }else{
                    sortable.sortable("enable").addClass('active');
                    table.css('border','1px dashed');
                }
            });

            sortable.on( "sortstop", function( event, ui ) {
                var ids = [];
                $(".sortable tr").each(function() { ids.push($(this).attr('data-id')); });
                var url = Routing.generate('ajax_activity_sort', {'activityIds': ids});
                fetch(url, {method: 'POST'})
                    .then(response => response.json())
                    .then(data => {
                        $(".sortNumber").each(function(i) { $(this).html(data.newSort[i]); });
                    })
                ;
            } );

            $(document).on('click','.state', function(){
                var stateWrapper = $(this).closest('.stateWrapper');
                var url = Routing.generate('ajax_activity_toggle_state', {'activityId': $(this).closest('tr').data('id')});
                fetch(url, {method: 'POST'})
                    .then(response => response.json())
                    .then(data => {
                        stateWrapper.html(`
                            <span class="state btn btn-xs btn-${data.isActive ? 'success' : 'danger' }">
                                ${data.isActive ? '{{ "active" | trans({}, 'admin') }}' : '{{ "inactive" | trans({}, 'admin') }}' }
                            </span>
                        `);
                    })
                ;
            });
        } );
    });
</script>
{% endblock %}