<% extend('../../layout', {title: title}) %>
<div class="row">
    <%- include('partials/filter', {}) %>
    <div class="col-lg-3 text-right">
        <button class="btn btn-primary" data-toggle="modal" data-target="#form-add">Thêm mới</button>
    </div>
</div>
<!--<table></table>-->
<div id="ajax_list"></div>
<!-- form add popup -->
<%- include('partials/form_add', {}) %>

<script>
    $(document).ready(function () {
        $('#data-loading').hide();

        var url_ajax = '/task/ajax-list';

        filterBySelectBox('task_priority', url_ajax);
        filterBySelectBox('task_status', url_ajax);

        var oldTimeout = '';
        $('#task_key_word').keyup(function(){
            $('#data-loading').show();

            clearTimeout(oldTimeout);
            oldTimeout = setTimeout(function(){
                getPageByAjax(url_ajax, 1);
            }, 250);
        });

        changePagination(1);
    });

    function filterBySelectBox(id, url_ajax){
        $('#'+id).change(function(){
            getPageByAjax(url_ajax, 1);
        });
    }

    function changePagination(pageId) {
        var url_ajax = '/task/ajax-list';
        getPageByAjax(url_ajax, pageId);
    }

    function getPageByAjax(url_ajax, pageId) {
        $('#data-loading').show();

        var key_word = $('#task_key_word').val();
        var priority = $('#task_priority').val();
        var status = $('#task_status').val();
        jQuery.ajax({
            url: url_ajax,
            type: 'POST',
            dataType: 'HTML',
            data: {
                key_word: key_word,
                priority: priority,
                status: status,
                skip: 0,
                limit: 10,
                page_index: pageId
            },
            success: function(result) {
                $('#ajax_list').html(result);
                $('#data-loading').hide();
            },
            error: function (jqXhr, textStatus, errorMessage) {}
        });
    }

</script>
