@extends('layouts.app')

@section('css')
    <link href="{{ asset('plugins/jquery-datatable/skin/bootstrap/css/dataTables.bootstrap.css') }}" rel="stylesheet">
    <link href="{{ asset('css/responsive.dataTables.min.css') }}" rel="stylesheet">
@endsection

@section('contenido')
	<div class="card">
        <div class="header">
        <div class="user-info">
        <div class="image">
            <img src="{{ asset('img/logo.png') }}" width="250" height="100" alt="Logo" />
        </div>
    </div>
    <P></P>
            <div class="row clearfix">
	            <div class="col-xs-8 col-sm-10 col-md-10">
	                <h1>
	                    NOTIFICACIONES
	                </h1>
	            </div>
	            <div class="col-xs-4 col-sm-2 col-md-2">
                      <a href="javascript:setUnreadNotifications();" class="btn btn-block btn-lg btn-info  waves-effect">Marcar Como Leidas</a>
	            </div>
         	</div>
        </div>
        <div class="body">
        	<div class="row">
        		<div class="col-sm-8">
					<table id="table_id" class="table dt-responsive" style="width: 100%">
					    <thead>
					        <tr>
                                <th></th>

					        </tr>
					    </thead>
					    <tbody>

					    </tbody>
					</table>
				</div>
			</div>
        </div>
    </div>
@endsection

@section('scripts')
<script src="{{ asset('plugins/jquery-datatable/jquery.dataTables.js') }}"></script>
<script src="{{ asset('js/dataTables.responsive.min.js') }}"></script>
<script src="{{ asset('plugins/jquery-datatable/skin/bootstrap/js/dataTables.bootstrap.js') }}"></script>

	<script>
      function setUnreadNotifications() {
            var token = '{{csrf_token()}}';
            var data={_token:token};
            $.ajax({
                type: 'POST',
                url: "/SetUnreadNotifications",
                dataType: 'json',
                data: data,
                success: function (data) {
                    location.reload();
                }
            });
        };

	$(document).ready(function() {
        $('#table_id').DataTable({
            processing: true,
            serverSide: true,
            searching: false,
            ordering: false,
            pageLength: 25,
            lengthChange: false,
            deferRender: true,
            responsive:true,
            minifiedAjax:true,
            ajax: "{{route('notifications.ajax.list')}}",
            columns: [
                { data: 'action' , name: 'action',searchable:false,ordering:false},

            ]
        });

	} );
</script>

@endsection