@extends('admin.layout')

@section('title', 'Pages')
@section('page-title', 'Pages')
@section('page-subtitle', 'Edit the main pages of your website')

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

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

<div class="tableWrap">
    <table id="dataTable">
        <thead>
            <tr>
                <th>Title</th>
                <th>Slug</th>
                <th>Status</th>
                <th>Last Updated</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            @forelse($pages as $page)
            <tr>
                <td><b>{{ $page->title }}</b></td>
                <td><code>/{{ $page->slug }}</code></td>
                <td>
                    <span class="badge {{ $page->is_active ? '' : 'draft' }}">
                        {{ $page->is_active ? 'Published' : 'Draft' }}
                    </span>
                </td>
                <td>{{ $page->updated_at->format('M d, Y') }}</td>
                <td>
                    <a href="{{ route('admin.pages.edit', $page->id) }}" style="text-decoration:none">
                        <button>Edit</button>
                    </a>
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="5" class="empty">No pages found. Create your first page!</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