{% extends '@SonataAdmin/CRUD/base_list.html.twig' %}
{% trans_default_domain 'admin' %}

{% block batch %}
    <script>
        {% block batch_javascript %}
            jQuery(document).ready(function ($) {
                // Toggle individual checkboxes when the batch checkbox is changed
                $('#list_batch_checkbox').on('ifChanged change', function () {
                    var checkboxes = $(this)
                        .closest('table')
                        .find('td.sonata-ba-list-field-batch input[type="checkbox"], div.sonata-ba-list-field-batch input[type="checkbox"]')
                    ;
                    checkboxes.iCheck($(this).is(':checked') ? 'check' : 'uncheck');
                    checkboxes.prop('checked', this.checked);
                });

                // Add a CSS class to rows when they are selected
                $('td.sonata-ba-list-field-batch input[type="checkbox"], div.sonata-ba-list-field-batch input[type="checkbox"]')
                    .on('ifChanged change', function () {
                        $(this)
                            .closest('tr, div.sonata-ba-list-field-batch')
                            .toggleClass('sonata-ba-list-row-selected', $(this).is(':checked'))
                        ;
                    })
                    .trigger('ifChanged')
                ;
            });
        {% endblock %}
    </script>

    {% block batch_actions %}
        <label class="checkbox" for="{{ admin.uniqid }}_all_elements">
            <input type="checkbox" name="all_elements" id="{{ admin.uniqid }}_all_elements"/>
            {{ 'all_elements'|trans({},'SonataAdminBundle') }} ({{ admin.datagrid.pager.nbresults }})
        </label>

        <select id="batch-select" name="action" style="width:auto;height: auto" class="form-control">
            {% for action, options in batchactions %}
                <option value="{{ action }}" data-modal="{{ options.modal is defined }}">{{ options.label|trans }}</option>
            {% endfor %}
        </select>

    {% endblock batch_actions %}

    <input type="submit" id="submit-batch-action" class="btn btn-small btn-primary" value="{{ 'btn_batch'|trans({}, 'SonataAdminBundle') }}">

     {% for action, options in batchactions %}
        {% if options.modal is defined %}

        <div id="modal-batch-action-{{ action }}" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                        <h4 class="modal-title">{{ options.label|trans }}</h4>
                    </div>
                    <div class="modal-body">
                        {% for field in options.modal %}
                            <label for="{{ field.id }}" class="width-100">{{ field.label }}</label>
                            {% if field.type == 'textarea' %}
                                <textarea class="width-100" rows="8" id="{{ field.id }}" name="{{ field.id }}"></textarea>
                                <script>
                                    // Replace the <textarea id="editor1"> with a CKEditor
                                    // instance, using default configuration.
                                    CKEDITOR.replace( '{{ field.id }}' );
                                </script>
                            {% elseif field.type == 'choice' %}
                                <select class="select2-input" id="{{ field.id }}" name="{{ field.id }}[]" multiple="multiple">
                                  {% for key, choices in field.choices %}
                                      <optgroup label="{{ key }}">
                                        {% for key, value in choices %}
                                            <option value={{ key }}>{{ value }}</option>
                                        {% endfor %}}
                                      </optgroup>
                                  {% endfor %}}
                                </select>
                            {% elseif field.type == 'checkbox' %}
                                {% set checked = field.checked | default("false") %}
                                <input type="checkbox" id="{{ field.id }}" name="{{ field.id }}" {{ checked == "true" ? "checked" : "" }}/>
                            {% else %}
                                <input type="{{ field.type }}" class="width-100" id="{{ field.id }}" name="{{ field.id }}" />
                            {% endif %}
                        {% endfor %}
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-primary submit-btn">{{ 'commons.send'|trans }}</button>
                    </div>

                    <style> .width-100 { width: 100% !important; margin-bottom: 1.5rem;}</style>
                </div>
            </div>
        </div>

        {% endif %}
    {% endfor %}



    <script>
        $('.select2-input').select2({
          placeholder: 'Choisissez une ou plusieurs catégories'
        });

        $('#submit-batch-action').click(function (e) {
            e.preventDefault();
            batchSelected = $('#batch-select option:selected');
            var value = batchSelected.val();

            if (batchSelected.data('modal')) {
                $('#modal-batch-action-' + value).modal('show');
            }
            else {
                $('form').submit();
            }
        });
    </script>
{% endblock %}