{##
 # This file is part of the SgDatatablesBundle package.
 #
 # (c) stwe <https://github.com/stwe/DatatablesBundle>
 #
 # For the full copyright and license information, please view the LICENSE
 # file that was distributed with this source code.
 #}
{% set filter_input_type %}
    type="{{ column.filter.type }}"
{% endset %}

{%- set filter_id_selector -%}
    sg-datatables-{{ datatable_name }}-{{ position }}-filter-{{ column.index }}
{%- endset -%}

{%- set filter_selector -%}
    id="{{ filter_id_selector }}"
{%- endset -%}

{% set filter_classes %}
    class="sg-datatables-individual-filtering{% if column.filter.classes is not same as(null) %} {{ column.filter.classes }}{% endif %}"
{% endset %}

{% set filter_width %}
    {% if column.width is not same as(null) %}style="width:{{ column.width }};"{% endif %}
{% endset %}

{% set filter_input_placeholder %}
    {% if column.filter.placeholder is same as(true) %}
        placeholder="{% if column.filter.placeholderText is not same as(null) %}{{ column.filter.placeholderText }}{% else %}{{ column.title|striptags|trim }}{% endif %}"
    {% endif %}
{% endset %}

{% set filter_search_column_index %}
    data-search-column-index="{{ search_column_index }}"
{% endset %}

{% set filter_column_name %}
    {% if column.name is not same as(null) %}name="{{ column.name }}"{% endif %}
{% endset %}

{% set filter_input_initial_search %}
    {% if column.filter.initialSearch %}value="{{ column.filter.initialSearch }}"{% endif %}
{% endset %}

{%- set cancel_button_id_selector -%}
    sg-datatables-{{ datatable_name }}-{{ position }}-filter-cancel-{{ column.index }}
{%- endset -%}

{% set cancel_button_html %}
    {% if true == column.filter.cancelButton %}
        <button type="button"
                id="{{ cancel_button_id_selector }}"
                class="btn btn-default btn-xs"
        >&times;</button>
    {% endif %}
{% endset %}

{% set cancel_button_js %}
    {% if true == column.filter.cancelButton %}
        <script type="text/javascript">
            $("#{{ cancel_button_id_selector }}").click(function() {
                if ('' != $("#{{ filter_id_selector }}").val()) {
                    $("#{{ filter_id_selector }}")
                        .val('')
                        .change();
                }
            });
        </script>
    {% endif %}
{% endset %}

{% block html %}
    <input {{ filter_input_type }}            {# type = "text" #}
            {{ filter_selector }}             {# id = "" #}
            {{ filter_classes }}              {# class = "" #}
            {{ filter_width }}                {# style = "width:" #}
            {{ filter_input_placeholder }}    {# placeholder = "" #}
            {{ filter_search_column_index }}  {# data-search-column-index = "" #}
            {{ filter_column_name }}          {# name = "" #}
            {{ filter_input_initial_search }} {# value = "" #}
    />
    {{ cancel_button_html }}
{% endblock %}

{% block javascript %}
    <script type="text/javascript">
        moment.locale("{{ app.request.locale }}");
        $("#{{ filter_id_selector }}").daterangepicker({
            autoUpdateInput: false,
            locale: {
                format: "{{ 'sg.datatables.daterange.format'|trans({}, 'messages') }}",
                applyLabel: "{{ 'sg.datatables.daterange.apply'|trans({}, 'messages') }}",
                cancelLabel: "{{ 'sg.datatables.daterange.cancel'|trans({}, 'messages') }}",
                daysOfWeek: moment.weekdaysMin(),
                monthNames: moment.monthsShort(),
                firstDay: moment.localeData().firstDayOfWeek()
            }
        }).on('cancel.daterangepicker', function (ev, picker) {
            $(this).val('');
            $(this).change();
          })
          .on('apply.daterangepicker', function (ev, picker) {
                $(this).val(picker.startDate.format("{{ 'sg.datatables.daterange.format'|trans({}, 'messages') }}") + ' - ' + picker.endDate.format("{{ 'sg.datatables.daterange.format'|trans({}, 'messages') }}"));
                $(this).change();
          });
    </script>
    {{ cancel_button_js }}
{% endblock %}