<?php if($this->session->flashdata('success')): ?>
<div class="row">
    <div class="alert alert-block alert-success" style="margin-bottom: 5px">
        <button type="button" class="close" data-dismiss="alert">
            <i class="ace-icon fa fa-times"></i>
        </button>
        <i class="ace-icon fa fa-check green"></i>
        <?php echo $this->session->flashdata('success'); ?>
    </div>
</div>
<?php endif; ?>
<?php if($this->session->flashdata('error')): ?>
<div class="row">
    <div class="alert alert-block alert-danger" style="margin-bottom: 5px">
        <button type="button" class="close" data-dismiss="alert">
            <i class="ace-icon fa fa-times"></i>
        </button>
        <i class="ace-icon fa fa-times"></i>
        <?php echo $this->session->flashdata('error'); ?>
    </div>
</div>
<?php endif; ?>

<div class="row">
    <?php echo form_open(base_url().'backend/cmsTrack/listTrackAjax'); ?>
    <!-- Tìm kiếm theo tên bài hát -->
    <div class="col-lg-3">
        <input class="form-control" type="text" name="input-name" id="input-name" placeholder="Nhập tên bài hát..." />
    </div>
    <!-- Lọc theo thông tin ca sĩ -->
    <div class="col-lg-3">
        <select class="form-control" name="fBySinger" id="fBySinger">
            <option value="-1">Thông tin ca sĩ</option>
            <option value="1">Đã cập nhật</option>
            <option value="2">Chưa cập nhật</option>
        </select>
    </div>
    <!-- Lọc theo thông tin nhạc sĩ -->
    <div class="col-lg-3">
        <select class="form-control" name="fByComposer" id="fByComposer">
            <option value="-1">Thông tin nhạc sĩ</option>
            <option value="1">Đã cập nhật</option>
            <option value="2">Chưa cập nhật</option>
        </select>
    </div>
    <div class="col-lg-3"></div>
    <div class="col-lg-1">
        <button class="btn btn-sm btn-default" id="delete-filter">Xóa bộ lọc</button>
    </div>
    <?php echo form_close(); ?>
    <div class="col-lg-1" style="float:right;">
        <a class="btn btn-sm btn-success" href="<?php echo base_url('backend/cmsTrack/addTrack');?>">
            <i class="glyphicon-plus"></i> Thêm</a>
    </div>
</div>
<!-- /.row -->
<div class="space-6"></div>
<div class="row">
    <div style="text-align: center" id="data-loading">
        <i class="fa fa-refresh fa-spin bigger-200"></i> Đang tải dữ liệu...
    </div>
    <div class="col-lg-12">
        <div id="div-response"></div>
    </div>
</div>

<script type="text/javascript">
//Thuc hien viec ve bieu do$data
$(document).ready(function() {
    var url = '<?php echo base_url("backend/cmsTrack/listTrackAjax"); ?>';

    // Tìm kiếm theo cú pháp
    var oldTimeout2 = '';
    $('#input-name').keyup(function() {
        clearTimeout(oldTimeout2);
        oldTimeout2 = setTimeout(function() {
            loadDataByAjaxFromInput(url);
        }, 250);
    });

    loadDataByAjaxFromSelectBox('fBySinger', url);
    loadDataByAjaxFromSelectBox('fByComposer', url);

    // Xóa bộ lọc
    $('#delete-filter').click(function() {
        $("#input-name").val('');
        $("#fBySinger").val('-1');
        $("#fByComposer").val('-1');
        changePagination('0', url);
        return false;

    });

    changePagination('0', url);

});

//Ham chung cho cac input
function loadDataByAjaxFromInput(url) {
    $('#data-loading').show();
    callAjax(0, url);
}

//Ham chung cho cac SelectBox
function loadDataByAjaxFromSelectBox(id, url) {
    $('#' + id).change(function() {
        $('#data-loading').show();
        callAjax(0, url);
    });
}

function loadDataByAjaxDateRange(dtFrom, dtTo, url) {
    $('#data-loading').show();
    callAjax(pageId, url);
}

function changePagination(pageId, url) {
    $('#data-loading').show();
    callAjax(pageId, url);
}

function callAjax(pageId, url) {
    var csrf_value = '<?php echo $this->security->get_csrf_hash(); ?>';
    var fByName = $("#input-name").val();
    var fBySinger = $("#fBySinger").val();
    var fByComposer = $("#fByComposer").val();
    //Ajax
    $.ajax({
        type: "POST",
        url: url,
        data: {
            csrf_name: csrf_value,
            fByName: fByName,
            fBySinger: fBySinger,
            fByComposer: fByComposer,
            pageId: pageId
        },
        dataType: "text",
        cache: false,
        success: function(data) {
            $('#div-response').html(data);
            $('#data-loading').hide();
        }
    });
}
</script>