@extends('admin.layout')

@section('title', 'Blog Posts')
@section('page-title', 'Blog Posts')
@section('page-subtitle', 'Create, publish and manage articles')

@section('header-actions')
<a href="{{ route('admin.blog.create') }}" class="primary" style="text-decoration:none">+ Add Blog Post</a>
@endsection

@section('content')
<div class="toolbar">
    <input class="search" id="search" placeholder="Search blog posts..." onkeyup="filterTable()">
</div>

<div class="tableWrap">
    <table id="dataTable">
        <thead>
            <tr>
                <th>Title</th>
                <th>Status</th>
                <th>Published Date</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            @forelse($posts as $post)
            <tr>
                <td><b>{{ $post->title }}</b></td>
                <td>
                    <span class="badge {{ $post->is_published ? '' : 'draft' }}">
                        {{ $post->is_published ? 'Published' : 'Draft' }}
                    </span>
                </td>
                <td>{{ $post->published_at ? $post->published_at->format('M d, Y') : 'Not published' }}</td>
                <td>
                    <a href="{{ route('admin.blog.edit', $post->id) }}" style="text-decoration:none">
                        <button>Edit</button>
                    </a>
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="4" class="empty">No blog posts found. Create your first post!</td>
            </tr>
            @endforelse
        </tbody>
    </table>
</div>
@endsection

@push('scripts')
<script>
function filterTable() {
    const input = document.getElementById('search');
    const filter = input.value.toLowerCase();
    const table = document.getElementById('dataTable');
    const rows = table.getElementsByTagName('tr');
    
    for (let i = 1; i < rows.length; i++) {
        const title = rows[i].getElementsByTagName('td')[0];
        if (title) {
            const textValue = title.textContent || title.innerText;
            rows[i].style.display = textValue.toLowerCase().indexOf(filter) > -1 ? '' : 'none';
        }
    }
}
</script>
@endpush