@extends('layouts.app')
@include('plugins.datatables')

@section('content')
<div class="app-content content">
    <div class="content-overlay"></div>
    <div class="content-wrapper">
        <div class="content-header row">
            <div class="content-header-left col-md-6 col-12 mb-2">
                <h3 class="content-header-title">Inbox</h3>
                <div class="row breadcrumbs-top">
                    <div class="breadcrumb-wrapper col-12">
                        {{ Breadcrumbs::render('menuconfiguration') }}
                    </div>
                </div>
            </div>
        </div>
        <div class="content-body">
            <section>
                <div class="card">
                    <div class="card-header">
                        <h2 class="card-title">Inbox</h2>
                    </div>
                    <div class="card-body">
                        <table class="table" id="table">
                            <thead>
                                <tr>
                                    <th class="fit">No.</th>
                                    <th>Subject</th>
                                    <th>Sender</th>
                                    <th>Date / Time</th>
                                    <th>Status</th>
                                    <th class="fit">Action</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </section>
        </div>
    </div>
</div>
@endsection
@push('js')
<script type="text/javascript">

var table = $('#table');
var settings = {
    "processing": true,
    "serverSide": true,
    "deferRender": true,
    "ajax": "{{ fullUrl() }}",
    "columns": [
        { data: 'index', defaultContent: '', orderable: false, searchable: false, render: function (data, type, row, meta) {
            return meta.row + meta.settings._iDisplayStart + 1;
            }},
            { data: "subject", name: "subject"}, 
            { data: "sender.name", name: "sender.name"},
            { data: "created_at", name: "created_at"}, 
            { data: "status.name", name: "status.name", render: function(data, type, row){
                return $("<div/>").html(data).text();
            }},
            { data: "action", name: "action", orderable: false, searchable: false},
    ],
    "iDisplayLength": 200
};
table.dataTable(settings);

    function view(id) {
        $("#modal-div").load("{{ route('inboxnotification') }}/"+id);
        table.api().ajax.reload(null, false);
    }
</script>
@endpush