@extends('layouts.auth')

@section('content')
<div class="container">
    <h1 class="mb-4">Manage News Articles</h1>

    @if (session('success'))
        <div class="alert alert-success">
            {{ session('success') }}
        </div>
    @endif

    <a href="{{ route('news.create') }}" class="btn btn-primary mb-3">Create New Article</a>

    <div class="table-responsive">
        <table class="table table-bordered table-hover">
            <thead>
                <tr>
                    <th>Title</th>
                    <th>Excerpt</th>
                    <th>Date Published</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($newsItems as $news)
                    <tr>
                        <td>{{ $news->title }}</td>
                        <td>{!! Str::limit($news->excerpt, 50) !!}</td>
                        <!-- Display the publish_date instead of created_at -->
                        <td>{{ $news->publish_date ? \Carbon\Carbon::parse($news->publish_date)->format('M d, Y') : 'Not Published' }}</td>
                        <td>
                            <a href="{{ route('news.show', $news->slug) }}" class="btn btn-info btn-sm">View</a>
                            <a href="{{ route('news.edit', $news->slug) }}" class="btn btn-warning btn-sm">Edit</a>
                            <form action="{{ route('news.destroy', $news->slug) }}" method="POST" style="display:inline-block;">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('Are you sure you want to delete this news article?')">Delete</button>
                            </form>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    <!-- Pagination -->
    <div class="d-flex justify-content-center">
        {{ $newsItems->links() }}
    </div>
</div>
@endsection