<% 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 () {
        var url_ajax = '/task/ajax-list';

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

        var oldTimeout = '';
        $('#task_key_word').keyup(function(){
            clearTimeout(oldTimeout);
            oldTimeout = setTimeout(function(){
                getPageByAjax(url_ajax, 0);
            }, 250);
        });

        getPageByAjax(url_ajax, 0);
    });

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

    function getPageByAjax(url_ajax, pageId) {
        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
            },
            success: function(result) {
                $('#ajax_list').html(result);
            },
            error: function (jqXhr, textStatus, errorMessage) {}
        });
    }
</script>
