@extends('backend.layouts.app')


@section('content')
<div class="p-3">
    <div class="card">
        <div class="card-header fw-bold">
            <span class="fw-bold">List of Announcements</span>&emsp;
            <a href="{{ url('admin/announcements/create') }}" class="text-decoration-none">
                <button type="button" class="btn btn-success">
                    <i class="fas fa-edit nav-icon"></i>
                    Add Announcement
                </button>
            </a>
        </div>
        <div class="card-body">
            <table class="table table-striped" style="width:100%">
                <thead>
                    <tr>
                        <th>Image/Thumbnail</th>
                        <th>Title</th>
                        <th>Date Created</th>
                        <th>Content</th>
                        <th style="width: 10%">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($announcements as $items)
                    <tr>
                        <td>
                            <img src="{{ asset('files/' . $items->image) }}" height="80" alt="">
                        </td>
                        <td>{{ $items->title }}</td>
                        <td>{{ date('m-d-y', strtotime($items->created_at)) }}</td>
                        <td>{{ $items->content }}</td>
                        <td>
                            <div>
                                <a href="{{ url('admin/announcements/' .$items->id) }}/edit">
                                    <button type="button" class="btn btn-block btn-outline-primary mb-1">Edit</button>
                                </a>
                                <form action="{{ url('admin/announcements/' .$items->id) }}" method="POST"> @csrf @method('delete')
                                    <button class="btn btn-block btn-danger" type="submit">Delete</button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>

@endsection

@section('js')
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.js"></script>
<script>
    $(document).ready(function() {
        $('.table').DataTable();
    });
</script>
@endsection