{% extends 'website/backoffice/base.html' %}
{% load url from future %}
{% load spurl %}

{% block bodyclass %}list{% endblock %}

{% block content %}

    <div id = 'list-header'>

        {% if button %}
            <a href = '{{ button.url }}' class = '{% firstof button.class 'button' %}'><span>{{ button.text }}</span></a>
        {% endif %}

        {% if search %}
            {% if donation_unconfirmed %}
                <div class="pledge_encrypt">
                <div class="left">
                    <div class="pledge_wrapper">
                        <span>Search</span>
                        <div class="clear"></div>
                        <form action='' method='GET' class='search_container clearfix'>
                            <input type='text' name='q' placeholder='{% firstof search_placeholder "Search..." %}'
                                {% if q %}value = '{{ q }}'{% endif %}>
                        </form>
                    </div>

                    <div class="clear"></div>
                    <div class="pledge_wrapper filter-date">
                        <span class="title">Filter by registration date</span>
                        <div class="clear"></div>
                        <form action='' method='GET' class='search_container clearfix'>
                            <span class="sub-title">Start Date</span>
                            <span class="sub-title">End Date</span>
                            <div class="clear"></div>
                            <input type='date' class="pickadate" id="start" name="start" value='{% if start %}{{ start }}{% endif %}'/>
                            <input type='date' class="pickadate last" id="end" name="end" value='{% if end %}{{ end }}{% endif %}'/>
                            <button class = 'button green' id="filter"><span>Filter</span></button>
                            <div class="clear"></div>
                            <span class="error-message"></span>
                        </form>
                    </div>
                </div>
                </div>
            {% else %}
                <form action='' method='GET' class='search_container clearfix'>
                    <input type='text' name='q' placeholder='{% firstof search_placeholder "Search..." %}'
                        {% if q %}value = '{{ q }}'{% endif %}>
                </form>
            {% endif %}
        {% endif %}

    </div>
    <form action='' method='POST'>
        {% csrf_token %}
        {{ formset.management_form }}
        <table class='object-list'>
            <thead>
                <tr>
                    {% for column in table.columns %}
                        <th class='{{ column.name }} {% if column.is_ordered %} ordered{% endif %}'>
                            {% if column.sortable %}
                                <a href="?sort={{ column.name_toggled }}">
                            {% endif %}
                                {{ column }}
                            {% if column.sortable %}
                                </a>
                            {% endif %}

                            {% if column.is_ordered %}
                                {% if column.is_ordered_straight %}
                                    <div class = 'triangle'></div>
                                {% else %}
                                    <div class = 'triangle down'></div>
                                {% endif %}
                            {% endif %}
                        </th>
                    {% endfor %}
                    <th>
                        Ganti Status
                    </th>
                </tr>
            </thead>

            {% block table_content %}
            {% for row in table.rows.page %}
                <tr>
                    {% for value in row %}
                        <td>
                            {% if forloop.counter == 1 %}
                                <a href='{{ row.data.get_backoffice_url }}'>{{ value }}</a>
                            {% else %}
                                {% if value %}
                                    {{ value }}
                                {% else %}
                                    &ndash;
                                {% endif %}
                            {% endif %}

                        </td>
                    {% endfor %}
                    <td>
                        {{ form.next }}
                    </td>
                </tr>
            {% endfor %}
            {% endblock %}
        </table>
        <hr>
        <button class = 'button green'><span>Save</span></button>
    </form>
    {% if table.paginator.num_pages > 1 %}
        <div class = 'pagination'>
            {% if table.page.has_previous %}
                <a href='{% spurl base='' add_query="page={{ table.page.previous_page_number }}" add_query="q={{ q }}" add_query="sort={{ table.order_by }}" %}' class = 'prev'>&laquo; Previous</a>
            {% endif %}
            {% if table.page.has_next %}
                <a href='{% spurl base='' add_query="page={{ table.page.next_page_number }}" add_query="q={{ q }}" add_query="sort={{ table.order_by }}" %}' class = 'next'>Next &raquo;</a>

            {% endif %}
        </div>
    {% endif %}

</div>

{% endblock %}

{% block script %}
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
    <script>!window.jQuery && document.write('<script src="{{ STATIC_URL }}backoffice/js/jquery.min.js"><\/script>')</script>

    <script>
    $("#filter").on('click', function () {

        var start = $('input[name="start"]').val();
        var end = $('input[name="end"]').val();

        if (start == "" || end == "") {
            $('.error-message').text('Start date or End date is missing.');
            return false;
        }
    });
    </script>

<script src="{{ STATIC_URL }}backoffice/js/modernizr.js"></script>
<script type="text/javascript">
    Modernizr.load({
        test: Modernizr.inputtypes.date,
        nope:['{{ STATIC_URL }}backoffice/js/pickadate.min.js', '{{ STATIC_URL }}backoffice/css/pickadate.01.default.css'],
        callback: function(url, result, key){
            // RESOURCES are loaded sequentially, so after css is loaded, we can safely initialize pickadate function
            if (url == '{{ STATIC_URL }}backoffice/css/pickadate.01.default.css')
            {
                $('.pickadate').pickadate({
                    format: 'yyyy-mm-dd',
                    formatSubmit: 'yyyy-mm-dd',
                    firstDay: 1,
                    dateMax: true,
                    clear: false
                });
            }
        }
    });
</script>
{% endblock %}