<script src="/public/lib/dataTable/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="/public/lib/dataTable/js/dataTable.bootstrap.min.js" type="text/javascript"></script>
<link href="/public/lib/dataTable/js/dataTables.bootstrap.css" rel="stylesheet" type="text/css"/>

<section class="mainPage">
    <h1 class="textMain">
      <?=$this->Get_Lang->gl("atranslate",$adminLang)?>
    </h1>

    <div class="addingBar addBtn">
        <div class="btn-group" role="group" aria-label="...">
            <a href="/admin/add_edit_atranslate/<?=$isAdmin?>" class="btn btn-primary right">
                <i class="fa fa-plus" aria-hidden="true"></i>
      <?=$this->Get_Lang->gl("add",$adminLang)?>
            </a>
        </div>
    </div>

    <div class="detailsCont">

        <div class="col-md-12 theDataTable">
            <div class="row">
                <div id="no-more-tables">

                    <table id="dataTable" class="col-md-12 table-bordered table-striped table-condensed cf">
                        <thead class="cf">
                            <tr>
                                <th>Define Word</th>
                                <th>Arabic</th>
                                <th>English</th>
                                <th>Turkish</th>
                                <th style="border-right: #9999996e solid 1px;"><?=$this->Get_Lang->gl("action",$adminLang)?></th>
                            </tr>
                        </thead>
                        <tbody>


                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</section>


<script>

    $(document).ready(function () {
        var theVal = 0;
        
        $(".langId").on("change", function(){
            theVal =  $('.langId').val();
           dtBuilder();
        });
        
        var dTableVar;
        function dtBuilder() {
            var options = {
                ajaxUrl: "/admin/ajax/getAtranslate/<?=$isAdmin?>",
                innerFunc: function () {
                    $(".deleteButton").click(function () {
                        mText = "<?=$this->Get_Lang->gl('ru_sure_delete',$adminLang)?>";
                        mTitle = "<?=$this->Get_Lang->gl('delete',$adminLang)?>";
                        mCancelLabel = "<?=$this->Get_Lang->gl('cancel',$adminLang)?>";
                        mOkLabel = "<?=$this->Get_Lang->gl('delete',$adminLang)?>";
                        modalConfirm($(this), mText, mTitle, mCancelLabel, mOkLabel, function () {
                            $(".paginate_button.active").trigger("click");
                            dtBuilder();
                        });
                    });
                }
            };
            var dtOpt = {
                "bProcessing": true,
                "bServerSide": true,
                "sAjaxSource": options.ajaxUrl,
                "sPaginationType": "full_numbers",
                //"aaSorting": [],
                "bSort": false,
                //"sDom": '',
                //"lengthMenu": [[100, -1], [100, "All"]],
                "fnDrawCallback": function () {
                    if (options.innerFunc)
                        options.innerFunc.call();
                },
                "fnServerData": function (sSource, aoData, fnCallback, oSettings) {
                    aoData.push({"name": "langId", "value": theVal});
                    oSettings.jqXHR = $.ajax({
                        "dataType": 'json',
                        "type": "POST",
                        "url": sSource,
                        "data": aoData,
                        "success": fnCallback
                    });
                },
                "language": {
                        "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/<?=$alang?>.json"
                    }
            };
            if (dTableVar)
                dTableVar.fnDestroy();

            dTableVar = $("#dataTable").dataTable(dtOpt);
            

            $("#searchTable").keyup(function () {
                var val = $(this).val();
                dTableVar.fnFilter(val);
            });
        }

        dtBuilder();
        $(".dtFilters select, .dtFilters input").change(function () {
            dtBuilder();
        });


    });

</script>
