@extends('layouts.app')

@section('content')

<div class="container">
    <table id="example" class="table table-striped" style="width:100%">
        <thead class="bg-light">
            <tr>
                <th class="text-center">#</th>
                <th class="text-center">Message</th>
                <th class="text-center">Date - Time</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($announcements as $index => $notification)
            <tr>
                <th scope="row" class="text-center">{{ $index+1 }}</th>
                <td class="text-center">
                    <p class="fw-bold fs-6">
                        {{ $notification->announcement }}
                    </p>
                </td>
                <td class="text-center">
                    <p class="fw-bold fs-6">
                        {{ $notification->created_at->format('d-m-Y h:i A') }} - {{ $notification->created_at->diffForHumans() }}
                    </p>
                </td>
            </tr>
            @endforeach 
        </tbody>
        <tfoot class="bg-light">
            <tr>
                <th class="text-center">#</th>
                <th class="text-center">Message</th>
                <th class="text-center">Date - Time</th>
            </tr>
        </tfoot>
    </table>
</div>

@endsection