{% extends '@AdminLTE/layout/mesodd-layout.html.twig' %}

{% block page_title %}{% trans %}activity.title{% endtrans %}{% endblock %}


{% block page_content %}

    {% if (is_granted('ROLE_MANAGER') or is_granted('ROLE_DPP')) %}
            <div class="text-right" style="padding-bottom : 15px;">
                <a href="{{ path('app_activity_new') }}" class="btn btn-primary text-right">
                    <i class="fa fa-plus"></i> {% trans %}activity.add{% endtrans %}
                </a>
            </div>
    {% endif %}

    {% if is_granted('ROLE_MANAGER') %}
        <div class="card card-default">
            <div class="card-body">
                {{ form_start(form) }}
                    <div class="form-group row">
                        <div class="col-sm-4">
                            <label class="col-form-label">Type</label>
                            {{ form_widget(form.type) }}
                        </div>
                        <div class="col-sm-8">
                            <label class="col-form-label">Liste Ministères/Communes</label>
                            {{ form_widget(form.entite) }}
                        </div>
                    </div>
                {{ form_end(form) }}  
            </div>
        </div>
    {% endif %}

    {% if is_granted('ROLE_DDD') %}
        <div class="card card-default">
            <div class="card-body">
                {{ form_start(form) }}
                    <div class="form-group row">
                        <div class="col-sm-12">
                            <label class="col-form-label">Communes</label>
                            {{ form_widget(form.entite) }}
                        </div>
                    </div>
                {{ form_end(form) }}  
            </div>
        </div>
    {% endif %}

    {% if entite %}
        {% embed '@AdminLTE/Widgets/box-widget.html.twig' %}
            {% block box_body %}
                <table id="activityTable" class="table table-striped">
                <thead>
                    <th>{% trans %}basics.code{% endtrans %}</th>
                    <th>{% trans %}basics.name{% endtrans %}</th>
                    <th>{% trans %}basics.action{% endtrans %}</th>
                    <th>{% trans %}basics.programm{% endtrans %}</th>
                    {% if (is_granted('ROLE_MANAGER') or is_granted('ROLE_DPP')) %}
                    <th style="width: 100px"></th>
                    {% endif %}
                </thead>
                <tbody>
                {% for activity in activities %}
                    <tr>
                        <td>{{ activity.code }}</td>
                        <td>{{ activity.name }}</td>
                        <td>{{ activity.action.name }}</td>
                        <td>{{ activity.action.programm.name }}</td>
                        {% if (is_granted('ROLE_MANAGER') or is_granted('ROLE_DPP')) %}
                        <td class="text-center">
                            <div class="btn-group">
                                <a href="{{ path('app_activity', { 'id': activity.id }) }}" class="btn btn-sm btn-default" role="button" aria-pressed="true">{% trans %}basics.update{% endtrans %}</a>
                            </div>
                        </td>
                        {% endif %}
                    </tr>
                {% endfor %}
                </tbody>
                <!--tfoot>
                    <tr>
                        <th>{% trans %}basics.code{% endtrans %}</th>
                        <th>{% trans %}basics.name{% endtrans %}</th>
                        <th>{% trans %}basics.action{% endtrans %}</th>
                        <th>{% trans %}basics.programm{% endtrans %}</th>
                        {% if is_granted('ROLE_MANAGER') %}
                            <td style="width: 100px"></td>
                        {% endif %}
                    </tr>
                </tfoot-->
                </table>
            {% endblock %}    
        {% endembed %}
    {% else %}
        <div class="alert alert-info" role="alert">
            {% trans %}Veuillez sélectionner un ministère ou une commune pour afficher ces activités{% endtrans %}
        </div>
    {% endif %}

{% endblock %}

{% block javascripts %}
     <script>
        let $type = $('#ministry_commune_sel_type');

        $type.change(function() {
            let $form = $type.closest('form');

            let data = {};
            data[$type.attr('name')] = $type.val();

            $.ajax({
                url: $form.attr('action'),
                type: $form.attr('method'),
                data: data,
                success: function(html) {
                    $('#ministry_commune_sel_entite').replaceWith(
                        $(html).find('#ministry_commune_sel_entite')
                    );
                }
            });
        });
    </script>
    
        <script src="{{ asset('plugins/datatables/French.json') }}"></script>
        <script>
            $(function () {
                $("#activityTable").DataTable({
                    "pageLength": 25,
                    "language": {
                        "url": "{{ asset('plugins/datatables/French.json') }}"
                    }
                });
            });
        </script>

    <script src="{{ asset('plugins/datatables/jquery.dataTables.js') }}"></script>
    <script src="{{ asset('plugins/datatables-bs4/js/dataTables.bootstrap4.js') }}"></script>
{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('plugins/datatables-bs4/css/dataTables.bootstrap4.css') }}">
{% endblock %}