@extends('backend.master')
@section('title', 'Bài viết')
@section('content')
<link rel="stylesheet" href="https://cdn.datatables.net/v/bs4/dt-1.10.16/datatables.min.css"/>
<script src="https://cdn.datatables.net/v/bs4/dt-1.10.16/datatables.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.16/api/fnReloadAjax.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/rowreorder/1.2.6/js/dataTables.rowReorder.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.bootstrap.min.css"/>
<link data-require="jqueryui@*" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
<script data-require="jqueryui@*" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
<section class="content-header">
    <h1 class="text-center font-weight-600">
        Danh sách bài viết
        <a href="{{ url('/admincp/articles/create') }}" class="btn btn-success btn-sm" title="Thêm mới bài viết">
        Thêm mới
        </a>
    </h1>
</section>
<section class="content">
    <div class="row">
        <div class="col-md-12">
            <div class="row">
                <div class="col-sm-2 col-sm-offset-5 form-group">
                    <label>Ngôn ngữ: </label>
                    <select name="language" class="form-control">
                        <option value="en" @if (Request::get('language') == 'en') selected @endif>English</option>
                        <option value="vi" @if (Request::get('language') == 'vi') selected @endif>Vietnammese</option>
                    </select>
                </div>
                {{-- <div class="col-sm-2 form-group">
                    <label>Danh mục: </label>
                    <select name="cat_id" class="form-control select2 wrap">
                        <option value="" class="font-weight-600">--Tất cả--</option>
                        @if ($cache_all_categories)
                            @foreach($cache_all_categories as $value)
                            <option value="{{$value->id}}">{{$value->title}}</option>
                            @endforeach
                        @endif
                    </select>
                </div> --}}
                <div class="col-sm-4 form-group">
                    <label>Từ khóa: </label>
                    <input class="form-control" type="text" name="keyword">
                </div>
                <div class="col-sm-1 form-group">
                    <button type="button" class="btn btn-primary btn-sm" style="margin-top:26px" id="search">Tìm kiếm</button>
                </div>
            </div>
        </div>
        <div class="col-md-12">
            <div class="table-responsive">
                <table class="table table-bordered" id="article-table">
                    <thead class="thead-custom">
                        <tr>
                            <th class="id-field" width="1%">
                                <input type="checkbox" id="select-all-btn" data-check="false">
                            </th>
                            <th scope="col">Ảnh đại diện</th>
                            <th>Tên bài viết</th>
                            {{-- <th>Danh mục</th> --}}
                            <th>Ngày tạo</th>
                            <th>Ngày cập nhật</th>
                            <th>
                                <img src="{{ asset('backend/images/en.png') }}" title="English">
                                <img src="{{ asset('backend/images/vi.png') }}" title="Tiếng Việt">
                            </th>
                            <th width="8%">Thao tác</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
                <p class="action-selected-rows">
                    <span >Hành động trên các hàng đã chọn:</span>
                    <span class="btn btn-info ml-2" id="apply-all-btn">Xóa</span>
                </p>
            </div>
        </div>
    </div>
</section>
<script>
    var $select2 = $('.select2').select2({
        containerCssClass: "wrap",
        width: '100%',
    })
    language = 'vi';
    var dataTable           = null;
    var userCheckList       = [];
    var curr_user_name      = '';
    var curr_user_email     = '';
    var current_page        = 0;
    var old_search          = '';
    var errorConnect        = "Please check your internet connection and try again.";
    
    $(document).ready(function(){
    
        var dataObject = [
            { 
                data: "rows",
                class: "rows-item",
                render: function(data, type, row){
                    return '<input type="checkbox" name="selectCol" class="check-article" value="' + data + '" data-column="' + data + '">';
                },
                orderable: false
            },
            { 
                data: "image",
                class: "text-center",
                render: function(data, type, row){
                    return '<img src="'+ baseURL +'/filemanager/thumbs-images/'+data+'" width=60px>';
                },
                orderable: false
            },
            { 
                data: "title",
                render: function(data, type, row){
                    var html = '';
                    html += '<a href="' + baseURL + '/admincp/articles/'+ row.action +'/edit" title="Sửa">'+data+'</a>';
                    return html;
                },
            },
            // { 
            //     data: "cat_name",
            //     name: "article_categories.title",
            //     render: function(data, type, row){
            //         var html = '';
            //         html += '<a href="#" title="'+data+'" class="find-category" data-catId="'+row.cat_id+'">'+data+'</a>';
            //         return html;
            //     },
            // },
            { 
                data: "created_at",
                class: "created_at text-center"
            },
            { 
                data: "updated_at",
                class: "updated_at text-center"
            },
            { 
                data: "action", 
                class: "text-center",
                render: function(data, type, row){
                    var html = '';
                    html += '<a href="' + baseURL + '/admincp/articles/'+ data +'/edit?language=en"  class="btn-edit" title="Sửa"><i class="fa fa-edit"></i></a>';
                    html += '<a href="' + baseURL + '/admincp/articles/'+ data +'/edit?language=vi"  class="btn-edit" title="Sửa"><i class="fa fa-edit"></i></a>';
                    return html;
                },
                orderable: false
            },
            { 
                data: "action", 
                class: "text-center",
                render: function(data, type, row){
                    var html = '';
                    // html += '<a href="' + baseURL + '/admincp/articles/'+ data +'/edit?language='+ language +'"  class="btn-edit mr-2" title="Sửa"><i class="fa fa-edit"></i></a>';
                    html += '<a class="btn-delete" data-id="'+data+'" title="Xóa"><i class="fa fa-trash" aria-hidden="true"></i></a>';
                    return html;
                },
                orderable: false
            },
        ];
    
        dataTable = $('#article-table').DataTable( {
                        serverSide: true,
                        responsive: true,
                        aaSorting: [],
                        stateSave: false,
                        searching: false,
                        ajax:{
                            url: "{{ url('/') }}/admincp/articles/getDataAjax",
                            beforeSend: function() {
                                $(".ajax_waiting").addClass("loading");
                            },
                            complete: function() {
                                $(".ajax_waiting").removeClass("loading");
                            }
                        }, 

                        columns: dataObject,
                        order: [[ 4, "desc" ]],
                        // bLengthChange: false,
                        // pageLength: 10,
                        colReorder: {
                            fixedColumnsRight: 1,
                            fixedColumnsLeft: 1
                        },
                        oLanguage: {
                            sSearch: "Tìm kiếm",
                            sLengthMenu: "Hiển thị _MENU_ bản ghi",
                            // zeroRecords: "Không tìm thấy bản ghi",
                            sInfo: "Hiển thị  _START_ - _END_ /_TOTAL_ bản ghi",
                            sInfoFiltered: "",
                            sInfoEmpty: "",
                            sZeroRecords: "Không tìm thấy kết quả tìm kiếm",
                            oPaginate: {
                                sPrevious: "Trang trước",
                                sNext: "Trang sau",
    
                            },
                        },
    
                        createdRow: function(row, data, dataIndex) {
                            var $dateCell_created_at = $(row).find('td.created_at');
                            var dateOrder_created_at = $dateCell_created_at.text(); 
                            $dateCell_created_at.data('order', dateOrder_created_at).text(moment(dateOrder_created_at).format('DD/MM/Y')); 
    
                            var $dateCell_updated_at = $(row).find('td.updated_at');
                            var dateOrder_updated_at = $dateCell_updated_at.text(); 
                            $dateCell_updated_at.data('order', dateOrder_updated_at).text(moment(dateOrder_updated_at).format('DD/MM/Y')); 
    
                            var $date_cell_price = $(row).find('td.price');
                            var date_price = $date_cell_price.text(); 
                            $date_cell_price.data('order', date_price).text(formatNumber(date_price, '.', ',')); 
                        },
    
                        initComplete: function () {
                        },
    
                        fnServerParams: function ( aoData ) {
                            aoData.language = $('select[name=language]').val();
                            aoData.cat_id = $('select[name=cat_id]').val();
                            aoData.keyword = $('input[name=keyword]').val();
                        },
    
                        fnDrawCallback: function( oSettings ) {
                            addEventListener();
                            checkCheckboxChecked();
                        },
                    });
    
        $('#article-table').css('width', '100%');
    
        $("#datepicker_from").datepicker({
            dateFormat: 'dd/mm/yy',
        })
        
        $("#datepicker_to").datepicker({
            dateFormat: 'dd/mm/yy',
        })

        $("#search").click(function(){
            dataTable.draw();
            language = $('select[name=language]').val();
        });

        $("select[name=language]").change(function(){  
            language = $('select[name=language]').val();
            var request = $.ajax({
                url: "{{ route('info-cat-article-by-lang') }}" + "?language=" + language,
                method: "GET",
                dataType: "html"
            });

            request.done(function (msg) {
                $("select[name=cat_id]").html('<option value="0">--Tất cả--</option>');
                $("select[name=cat_id]").select2().select2('val', "0");
                $('.select2').select2({
                                        containerCssClass: "wrap",
                                        width: '100%',
                                    });
                $("select[name=cat_id] option").after(msg);
            });

            request.fail(function (jqXHR, textStatus) {
                alert("Request failed: " + textStatus);
            });
        });

        $("#select-all-btn").change(function(){  
            $('#article-table tbody input[type="checkbox"]').prop('checked', $(this).prop("checked"));
            // save localstore
            setCheckboxChecked();
        });
    
        $('body').on('click', '#article-table tbody input[type="checkbox"]', function() {
            if(false == $(this).prop("checked")){
                $("#select-all-btn").prop('checked', false); 
            }
            if ($('#article-table tbody input[type="checkbox"]:checked').length == $('#article-table tbody input[type="checkbox"]').length ){
                $("#select-all-btn").prop('checked', true);
            }
    
            // save localstore
            setCheckboxChecked();
        });
    
        function setCheckboxChecked(){
            userCheckList = [];
            $.each($('.check-article'), function( index, value ) {
                if($(this).prop('checked')){
                    userCheckList.push($(this).val());
                }
            });
            // console.log(userCheckList);
        }
    
        function checkCheckboxChecked(){
            // console.log(userCheckList);
            var count_row = 0;
            var listUser = $('.check-article');
            if(listUser.length > 0){
                $.each(listUser, function( index, value ) {
                    if(containsObject($(this).val(), userCheckList)){
                        $(this).prop('checked', 'true');
                        count_row++;
                    }
                });
    
                if(count_row == listUser.length){
                    $('#select-all-btn').prop('checked', true);
                }else{
                    $('#select-all-btn').prop('checked', false);
                }
            }else{
                $('#select-all-btn').prop('checked', false);
            }
        }
    
        function containsObject(obj, list) {
            var i;
            for (i = 0; i < list.length; i++) {
                if (list[i] === obj) {
                    return true;
                }
            }
    
            return false;
        }
    
        function checkEmptyTable(){
            if ($('#article-table').DataTable().data().count() <= 1 && current_page > 0) {
                current_page = current_page - 1;
            }
            return current_page;
        }
    
    
        $('#apply-all-btn').click(function (){
            $.ajsrConfirm({
                message: "Bạn có chắc chắn muốn xóa ?",
                okButton: "Đồng ý",
                onConfirm: function() {
                    var $id_list = '';
                    $.each($('.check-article'), function (key, value){
                        if($(this).prop('checked') == true) {
                            $id_list += $(this).attr("data-column") + ',';
                        }
                    });
    
                    if ($id_list.length > 0) {
                        var $id_list = '';
                        $.each($('.check-article'), function (key, value){
                            if($(this).prop('checked') == true) {
                                $id_list += $(this).attr("data-column") + ',';
                            }
                        });
    
                        if($id_list.length > 0){
                            var data = {
                                id_list:$id_list,
                                _method:'delete'
                            };
                            $.ajax({
                                type: "post",
                                url: "{{ url('/') }}/admincp/articles/delMulti",
                                data: data,
                                success: function (response) {
                                    var obj = $.parseJSON(response);
                                    if(obj.status == 200){
                                        $.each($('.check-article'), function (key, value){
                                            if($(this).prop('checked') == true) {
                                                $(this).parent().parent().hide("slow");
                                            }
                                        });
                                        dataTable.ajax.reload(); 
                                        $().toastmessage('showSuccessToast', obj.Message);
                                    }
                                },
                                error: function (data) {
                                    if(data.status == 401){
                                      window.location.replace(baseURL);
                                    }else{
                                     $().toastmessage('showErrorToast', errorConnect);
                                    }
                                }
                            });
                        }
                    }
                },
                nineCorners: false,
            });
    
        });
    
        function addEventListener(){
            $('.btn-delete').off('click');
            $('.btn-delete').click(function(){
                var _self   = $(this);
                var id      = $(this).attr('data-id');
                $.ajsrConfirm({
                    message: "Bạn có chắc chắn muốn xóa ?",
                    okButton: "Đồng ý",
                    onConfirm: function() {
                        var data    = {
                            _method             : "DELETE"
                        };
                        $.ajaxSetup({
                            headers: {
                              'X-CSRF-TOKEN'    : $('meta[name="csrf-token"]').attr('content')
                            }
                        });
                        $.ajax({
                            url: baseURL+"/admincp/articles/" + id,
                            data: data,
                            method: "DELETE",
                            dataType:'json',
                            beforeSend: function(r, a){
                                current_page = dataTable.page.info().page;
                            },
                            success: function (response) {
                                var html_data = '';
                                if(response.status == 200){
                                  dataTable.page(checkEmptyTable()).draw(false);
                                  $().toastmessage('showSuccessToast', response.message);
                                }else{
                                  $().toastmessage('showErrorToast', response.message);
                                }
                            },
                            error: function (data) {
                                if(data.status == 401){
                                  window.location.replace(baseURL);
                                }else{
                                 $().toastmessage('showErrorToast', errorConnect);
                                }
                            }
                        });
                    },
                    nineCorners: false,
                });
            });

            $('.find-category').click(function(){
                var category_name = $(this).attr('data-catId');
                $('select[name=cat_id]').val(category_name);
                $('select[name=cat_id]').select2('val',category_name);
                $('button#search').click();
            });
        }

        
    });
</script>
@endsection