@extends('layouts.admin')

@section('title', 'Blog Posts')

@section('content')
<div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px;">
    <div>
        <h1 class="serif" style="font-size: 26px; margin: 0; color: #0f172a;">Blog Articles Management</h1>
        <p style="color: var(--text-muted); font-size: 14px; margin-top: 4px;">Publish skincare tips, routine guides, and botanical ingredient stories.</p>
    </div>
    <a href="{{ route('admin.posts.create') }}" class="btn-admin btn-primary">
        <i data-lucide="plus" style="width: 18px;"></i> Write Article
    </a>
</div>

<div class="admin-card">
    @if($posts->isEmpty())
        <div style="padding: 40px; text-align: center; color: var(--text-muted);">
            No blog articles published yet.
        </div>
    @else
        <table class="admin-table">
            <thead>
                <tr>
                    <th>Title & Excerpt</th>
                    <th>Category</th>
                    <th>Read Time</th>
                    <th>Published Date</th>
                    <th>Status</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach($posts as $post)
                    <tr>
                        <td>
                            <strong style="color: #0f172a; font-size: 15px;">{{ $post->title }}</strong>
                            <div style="font-size: 12px; color: var(--text-muted);">{{ Str::limit($post->excerpt, 60) }}</div>
                        </td>
                        <td><span class="badge" style="background: #f1f5f9; color: #334155;">{{ $post->category }}</span></td>
                        <td>{{ $post->read_time }}</td>
                        <td>{{ $post->created_at->format('M d, Y') }}</td>
                        <td>
                            <span class="badge {{ $post->is_published ? 'badge-active' : 'badge-inactive' }}">
                                {{ $post->is_published ? 'Published' : 'Draft' }}
                            </span>
                        </td>
                        <td>
                            <div style="display: flex; gap: 8px;">
                                <a href="{{ route('admin.posts.edit', $post) }}" class="btn-admin btn-secondary" style="padding: 6px 10px; font-size: 12px;">
                                    <i data-lucide="edit-3" style="width: 14px;"></i> Edit
                                </a>
                                <form action="{{ route('admin.posts.destroy', $post) }}" method="POST" onsubmit="return confirm('Delete article?')" style="margin: 0;">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn-admin btn-danger" style="padding: 6px 10px; font-size: 12px;">
                                        <i data-lucide="trash-2" style="width: 14px;"></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>

        <div style="margin-top: 20px;">
            {{ $posts->links() }}
        </div>
    @endif
</div>
@endsection