@extends('layouts.panel')
@section('content')
    <div class="flex items-end justify-between">
        <div>
            <h2 class="text-4xl text-[#041627]">Articles</h2>
            <p class="text-[#44474c]">Manage submissions and lifecycle states.</p>
        </div>
        <a href="{{ route('articles.create') }}" class="bg-[#041627] text-white px-5 py-2 text-sm font-semibold rounded">New
            Submission</a>
    </div>

    <form method="GET" id="articlesFilter" class="bg-white border border-[#aeb6bf] p-4 flex gap-3 items-center">
        <input name="q" value="{{ $filters['q'] ?? '' }}" placeholder="Search by title..."
            class="flex-1 border border-[#aeb6bf] p-2 bg-[#f7fafc]">
        <select name="status" class="border border-[#aeb6bf] p-2 bg-[#f7fafc]">
            <option value="">All Statuses</option>
            @foreach (['submitted', 'under_review', 'revision_requested', 'resubmitted', 'accepted', 'published'] as $status)
                <option value="{{ $status }}" @selected(($filters['status'] ?? '') === $status)>
                    {{ str_replace('_', ' ', ucfirst($status)) }}</option>
            @endforeach
        </select>
        <button class="bg-[#041627] text-white px-4 py-2 text-sm font-semibold">Filter</button>
    </form>

    <section class="bg-white border border-[#aeb6bf] overflow-hidden">
        <table id="articlesTable" class="w-full">
            <thead>
                <tr class="bg-[#041627] text-white text-xs uppercase">
                    <th class="p-4 text-left">ID / Title</th>
                    <th class="p-4 text-left">Category</th>
                    <th class="p-4 text-left">Status</th>
                    <th class="p-4 text-left">Author</th>
                    <th class="p-4 text-right">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-[#aeb6bf]"></tbody>
        </table>
    </section>
@endsection
@push('scripts')
    <script>
        NerosaDataTables.init('#articlesTable', {
            filterForm: '#articlesFilter',
            columns: [{
                    data: 'identity',
                    name: 'identity',
                    orderable: false,
                    className: 'p-4'
                },
                {
                    data: 'category_name',
                    name: 'category_name',
                    orderable: false,
                    className: 'p-4'
                },
                {
                    data: 'status_badge',
                    name: 'status_badge',
                    orderable: false,
                    className: 'p-4'
                },
                {
                    data: 'author_name',
                    name: 'author_name',
                    orderable: false,
                    className: 'p-4'
                },
                {
                    data: 'actions',
                    name: 'actions',
                    orderable: false,
                    searchable: false,
                    className: 'p-4 text-right'
                },
            ],
        });
    </script>
@endpush