@extends('layouts.master')
@section('title', __('tr.Publications') )
@section('subtitle', __('tr.Publications Information'))
@section('titleicon', "icon-file-text")

@section('content')
    <!-- BEGIN .main-content -->
    <div class="main-content">
        <div class="row gutters">
            <div class="col-lg-12 col-md-12 col-xs-12 col-sm-12">
                <div class="card">
                    <div class="card-body pb-0">
                        <form action="" method="post" id="filter_form">                            
                            {{ csrf_field() }}

                            <div class="row filter-box">                             

                                {{--Text search[en_name, ar_name, code]--}}
                                <div class="col-md-3">
                                    <input data-placement="top" type="text" name="text_search" id="text_search" autocomplete="off" placeholder="@lang('tr.TextSearch')" class="form-control typeahead">
                                </div>

                                {{--Button--}}
                                <div class="col-md-2 float">
                                    <button class="btn btn-primary" type="button" id="search_button">@lang('tr.Search')</button>
                                </div>

                                {{--Button--}}
                                <div class="col-md-2 float">
                                    <button class="btn btn-danger" type="button" id="reset_button">@lang('tr.Reset')</button>
                                </div>

                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="col-lg-12 col-xs-12 col-md-12 col-sm-12">
                <div class="card">
                    <div class="card-header">
                        <span>@lang('tr.Publications')</span>
                        <div class="btn-group float-right">
                            <div class="btn-group">
                                <a target="_blank" href="{{ route('add_publication') }}" class='btn btn-sm btn-primary'><i class="icon-plus"></i> @lang('tr.Add Publication')</a>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <table id="publications_table" class="display" style="width:100%">
                            <thead>
                            <tr>
                                <th width="30%">@lang('tr.Title')</th>
                                <th width="30%">@lang('tr.Journal Name')</th>
                                <th width="30%">@lang('tr.Authors')</th>
                                <th width="5%">@lang('tr.Year')</th>
                                <th width="5%"></th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!-- Row end -->
    </div>
    <!-- END: .main-content -->
@endsection

@section('pagejs')

    <script type="text/javascript">

        var editURL = '{{ route('edit_publication', ['publication'=>'#id']) }}';
        var showURL = '{{ route('show_publication', ['publication'=>'#id']) }}';

        function initUsers(element) {

            var users = element.selectize({
                valueField: 'id',
                labelField: 'name',
                searchField: 'search',
                plugins: ['remove_button'],
                options: [],
                create: false,
                render: {
                    option: function(item, escape) {
                        return "<div style='padding:5px;'>"+escape(item.name)+"</div>";
                    }
                },
                load: function(query, callback) {
                    if (!query.length) return callback();
                    var namesUrl = '{{ route('users_names') }}';

                    $.ajax({
                        url: namesUrl,
                        type: 'GET',
                        dataType: 'jsonp',
                        jsonp: 'callback',
                        jsonpCallback: 'callback',
                        data: {
                            query: query,
                            limit: 10
                        },
                        error: function() {
                            callback();
                        },
                        success: function(res) {
                            callback(res);
                        }
                    });
                }
            });

            return users;
        }  

        $(document).ready(function() {
        
            $("#loader").show();

            publicationsTable = $('#publications_table').DataTable({
                processing: false,
                serverSide: true,
                scrollX: true,
                stateSave: false,
                rowId: 'id',
                language: dataTableLanguage,
                "ajax": {
                    "url": '{{ route('publications') }}',
                    "dataSrc": "data.data"
                },
                "columns": [
                    { "data": "title", "name": "title"},
                    { "data": "journal_name", "name": "journal_name" },
                    { "data": "info", "name": "info",
                        fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {
                            var html = "";

                            if(oData.contributors) 
                                html += "<span class='badge-course'>@lang('tr.Authors'):</span><small> " + oData.contributors + "</small>";

                            $(nTd).html("<small>"+html+"</small>");
                        }
                    },
                    { "data": "year", "name": "year" },
                    { "data": "id", "name": "id", "orderable":false,
                        fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {

                            var html = "";
                            html += "<a target='_blank' title='@lang('tr.View')' href='" + showURL.replace('#id', oData.id) + "'><i class='icon-eye'></i></a>&nbsp;";
                            html += "<a target='_blank' href='"+editURL.replace('#id',oData.id)+"'><i class='icon-edit'></i></a>&nbsp;";
                            html += "<a title='@lang('tr.Delete')' href='javascript:void(0)' class='delete_publication'><i class='icon-delete'></i></a>";

                            $(nTd).html("<span class='action-column'>"+html+"</span>");
                        }
                    },
                ]
            });

            publicationsTable.on('preDraw', function () {
                $("#loader").show();
            })
            .on('draw.dt', function () {
                $("#loader").hide();
            });

            $(".dataTables_filter").hide();

            $('#search_button').on( 'click', function () {
                publicationsTable.search($("#text_search").val());
                publicationsTable.draw();
            });

            $('#text_search').keyup(function (e){
                if(e.keyCode == 13)
                    $('#search_button').trigger('click');
            });

            $('#reset_button').on( 'click', function () {
                $("#text_search").val("");
                $('#search_button').trigger('click');
            });

            $allowSubmit = false;

            $('#filter_form').on('submit', function(event) {
                if(!$allowSubmit) event.preventDefault();
            });

            $(document).on("click", ".delete_publication", function () {
                var deleteURL = '{{ route('delete_publication', ['publication'=>'#id']) }}';
                var row = $(this).closest('tr');
                var data = publicationsTable.row(row).data();
                var url = deleteURL.replace('#id', data.id);
                var message = "@lang('confirm.Are you sure you want to delete') (<B>"+data.title+"</B>) ?";

                warningBox(message, function() {
                    $.post(url, {"_token": '{{ csrf_token() }}' }, function(data, status){
                        publicationsTable.row("#"+data.id).remove().draw(false);
                        infoBox('@lang('tr.DeletedSuccessfully')');
                    });
                });
            });
        });
    </script>
@stop