{% extends 'EcdMailingListBundle::layout.html.twig' %}

{% block content %}
<div class="container">
<div class="page-header">
    <h1>{% trans %}ecd_mailing_list.mailing_list.index.title{% endtrans %}</h1>
</div>




<form action="{{ path('ecd_mailing_list_bulk') }}" method="POST" id="mailing_list_bulk_form">

    <div class="field">
        <div class="buttons">
            <a href="#"
               onclick="$('#new-list-modal').modal();
                $('#new-list-modal-body').html('<img src=\'/images/ajax-loader.gif\' />');
                $.ajax({
                    url: '{{ path('ecd_mailing_list_new') }}',
                    success: function(html){
                        $('#new-list-modal-body').html(html);
                    }
                })"
               class="button btn create-document">{% trans %}ecd_mailing_list.mailing_list.index.link_new{% endtrans %}</a>

            {{ form_widget(bulkForm.action) }}
            {{ form_widget(bulkForm._token) }}
        </div>
    </div>

    <table class="listing clickable table" id="listing_mailing_lists">
        <thead>
            <tr>
                <th>
                  <input type="checkbox" id="ecd_mailing_lists_bulk_select_all" name="ecd_mailing_lists_bulk_select_all">
                </th>
                <th>{% trans %}ecd_mailing_list.mailing_list.index.label_name{% endtrans %}</th>
                <th>{% trans %}ecd_mailing_list.mailing_list.index.label_recipientNumber{% endtrans %}</th>
                <th>{% trans %}ecd_mailing_list.mailing_list.index.label_unsubscribeNumber{% endtrans %}</th>
                <th>{% trans %}ecd_mailing_list.mailing_list.index.label_actions{% endtrans %}</th>
            </tr>
        </thead>
        {% for list in paginator %}
        <tr class="hoverable">
            <td>{{ form_widget(bulkForm.mailingLists[list.id]) }}</td>
            <td class="mailing-list-name">{{ list.name }}</td>
            <td>{{ list.contacts|length }}</td>
            {# Ugly solution : has to be removed when knplabs paginator would allowed to pass extra query fields #}
            {% set unsubscribedAtCount = 0 %}
            {% for contactList in list.contacts %}
            {% set unsubscribedAtCount = unsubscribedAtCount + contactList.unsubscribedAt|length %}
            {% endfor %}
            <td>{{ unsubscribedAtCount }}</td>
            <td class="actions">
                <div class="btn-toolbar">
                    <div class="btn-group">
                        <a class="btn" href="#" onclick="$('#full_list_{{ list.id }}').slideToggle();"><i class="icon-search"></i></a>
                    </div>

                    <div class="btn-group">
                        <a class="edit btn" onclick="$('#new-list-modal').modal();
                            $('#new-list-modal-body').html('<img src=\'/images/ajax-loader.gif\' />');
                            $.ajax({
                                url: '{{ path('ecd_mailing_list_edit_name', {'id': list.id }) }}',
                                success: function(html){
                                    $('#new-list-modal-body').html(html);
                                }
                            })" href="#"><i class="icon-pencil"></i></a>
                    </div>
    
                    <div class="btn-group">
                        <a class="edit btn" onclick="$('#contact-modal').modal();
                            $('#contact-modal-body').html('<img src=\'/images/ajax-loader.gif\' />');
                            $.ajax({
                                url: '{{ path('ecd_mailing_list_contact_new', {'mailingListId': list.id }) }}',
                                success: function(html){
                                    $('#contact-modal-body').html(html);
                                }
                            })" href="#"><i class="icon-plus-sign"></i></a>

                        <a class="edit btn" onclick="$('#new-list-modal').modal();
                            $('#new-list-modal-body').html('<img src=\'/images/ajax-loader.gif\' />');
                            $.ajax({
                                url: '{{ path('ecd_mailing_list_import', {'id': list.id }) }}',
                                success: function(html){
                                    $('#new-list-modal-body').html(html);
                                }
                            })" href="#"><i class="icon-upload"></i></a>

                        <a href="{{ path('ecd_mailing_list_contact_export', {'mailingListId': list.id, 'mailingListName': list.name|replace({' ': '_'}), '_format': 'csv' }) }}" class="button btn create-document"><i class="icon-download"></i></a>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td style="padding: 0px; border: none; background: transparent"></td>
            <td colspan="4" style="padding: 0px; border: none; background: transparent">
                <div id="full_list_{{ list.id }}" style="display: none;">
                    TOTO
                </div>
            </td>
        </tr>
        {% else %}
        <tr>
            <td colspan="4">{% trans %}ecd_mailing_list.mailing_list.index.label_noMailingLists{% endtrans %}</td>
        </tr>
        {% endfor %}
    </table>

</form>

<div>
    {{ paginator|paginate }}
</div>
</div>


<div class="modal hide fade" id="new-list-modal">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>Liste de diffusion</h3>
  </div>
  <div class="modal-body" id="new-list-modal-body">
  </div>
  <div class="modal-footer">
    <a href="#" onclick="$('#new-list-modal-body form').submit();" class="btn btn-primary">Enregistrer</a>
  </div>
</div>

<div class="modal hide fade" id="contact-modal">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>Contact</h3>
  </div>
  <div class="modal-body" id="contact-modal-body">
  </div>
  <div class="modal-footer">
    <a href="#" onclick="$('#contact-modal-body form').submit();" class="btn btn-primary">Enregistrer</a>
  </div>
</div>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script type="text/javascript">
jQuery(function($) {
    jQuery('#ecd_mailing_list_bulk_action').change(function() {
        // if blank value is selected, just return
        if (!jQuery(this).val()) {
            return;
        }

        if (!confirm('Are you sure you want to perform this bulk action?')) {
            // reset back to the blank value
            jQuery(this).val('');

            return;
        }

        jQuery('#mailing_list_bulk_form').submit();
    });

    jQuery('#ecd_mailing_lists_bulk_select_all').click(function(event) {
        var checked = jQuery('#ecd_mailing_lists_bulk_select_all').is(':checked') ? true : false;
        jQuery('#listing_mailing_lists input[type="checkbox"]').attr('checked', checked);
    });

    jQuery('td.mailing-list-name').click(function(event) {
        window.location = $(this).parent().find('td.actions a.edit').attr('href');
    });

});
</script>
{% endblock %}