@extends('layouts.master')

@section('title', __('tr.Notifications') )
@section('subtitle', __('tr.Notifications Management'))
@section('titleicon', "icon-chat")

@section('content')

    <!-- BEGIN .main-content -->
    <div class="main-content">

        <div class="row gutters">
            <div class="col-lg-12 col-xs-12 col-md-12 col-sm-12">
                <div class="card">
                    <div class="card-body pb-0">
                        <div class="filter-box">
                            <div class="row">

                                <div class="col-md-4">
                                    <input type="text" placeholder="@lang('tr.TextSearch')" id="text_search" name="text_search">
                                </div>

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

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

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

                <div class="card">
                    <div class="card-header">
                        <span id="transactions">@lang('tr.Notifications')</span>

                        <button id="clear_all_notifications" type='seen_all' type="button" class="btn btn-sm btn-secondary float-right">
                            @lang('tr.Clear all notifications')
                        </button>
                    </div>

                    <div class="col-lg-12 col-md-12 col-xs-12 col-sm-12">
                        <div class="card-body">
                            <table id="notifications_table" class="display" style="width:100%">
                                <thead>
                                <tr>
                                    <th width="15%">@lang('tr.Date')</th>
                                    <th width="85%">@lang('tr.Message')</th>
                                </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!-- END: .main-content -->
@endsection

@section('pagejs')
    <script type="text/javascript">

        $(document).ready(function() {

            var table = $('#notifications_table').DataTable({
                processing: true,
                serverSide: true,
                retrieve: true,
                scrollX: true,
                stateSave: false,
                language: dataTableLanguage,
                order: [[ 0, "desc" ]],
                rowId: 'id',
                "ajax": {
                    "url": "{{ route('notifications') }}",
                    "dataSrc": "data.data",
                },
                "columns": [
                    { "data": "created_at", "name": "created_at",
                        fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {
                            $(nTd).html(renderDateTime(oData.created_at));
                        }
                    },
                    { "data": "message", "name": "message",
                        fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {

                            var html = "";

                            if(oData.route)
                                html += "<a target='_blank' title='@lang('tr.Message')' href='"+oData.route+"'>"+oData.message+"</a>";
                            else
                                html += oData.message;

                            $(nTd).html(html);
                        }
                    },
                ],
            });

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

            $('#search_button').on( 'click', function () {
                table.search($("#text_search").val());
                table.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');
            } );

            $(window).keydown(function(event){
                if(event.keyCode == 13) {
                    event.preventDefault();
                    $('#search_button').trigger('click');
                }
            });

            $(document).on("click", "#clear_all_notifications", function () {

                var url = '{{ route('notification_seen') }}';
                var type = $(this).attr('type');
                var textSearch = $("#text_search").val();

                $.post(url, {"_token": '{{ csrf_token() }}', 'type': type,'text_search':textSearch }, function(data, status){
                    table.draw(false);
                });

            });
        });
    </script>
@endsection