@extends('layouts.panel')
@section('content')
<header class="flex flex-col gap-6">
  <div class="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
    <div>
      <h2 class="text-3xl sm:text-4xl text-[#041627]">{{ ucfirst($role) }} Dashboard</h2>
      <p class="text-[#44474c]">Oversee and manage manuscript lifecycles.</p>
    </div>
  </div>

  <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4 lg:gap-6">
    <div class="bg-white p-4 sm:p-6 border border-[#aeb6bf] rounded-lg"><p class="text-xs text-[#44474c] uppercase tracking-wider">Total Submissions</p><h3 class="text-4xl sm:text-5xl text-[#041627] mt-2">{{ $stats['total'] }}</h3></div>
    <div class="bg-white p-4 sm:p-6 border border-[#aeb6bf] rounded-lg"><p class="text-xs text-[#44474c] uppercase tracking-wider">Pending Assignment</p><h3 class="text-4xl sm:text-5xl text-[#3b6090] mt-2">{{ $stats['submitted'] }}</h3></div>
    <div class="bg-white p-4 sm:p-6 border border-[#aeb6bf] rounded-lg"><p class="text-xs text-[#44474c] uppercase tracking-wider">Under Review</p><h3 class="text-4xl sm:text-5xl text-[#041627] mt-2">{{ $stats['under_review'] }}</h3></div>
    <div class="bg-white p-4 sm:p-6 border border-[#aeb6bf] rounded-lg"><p class="text-xs text-[#44474c] uppercase tracking-wider">Published</p><h3 class="text-4xl sm:text-5xl text-[#00522f] mt-2">{{ $stats['published'] }}</h3></div>
  </div>
</header>

<form method="GET" id="dashboardArticlesFilter" class="bg-white border border-[#aeb6bf] p-4 sm:p-6 grid gap-3 sm:grid-cols-[minmax(0,1fr)_minmax(160px,220px)_auto] sm:items-center">
  <div class="relative">
    <span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-[#74777d]">search</span>
    <input name="q" value="{{ $filters['q'] }}" class="w-full pl-10 pr-4 py-2 bg-[#f7fafc] border border-[#aeb6bf] focus:ring-0 focus:border-[#041627] text-sm" placeholder="Search by title..." type="text"/>
  </div>
  <select name="status" class="bg-[#f7fafc] border border-[#aeb6bf] px-4 py-2 text-sm w-full">
    <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">Apply</button>
</form>

<section class="bg-white border border-[#aeb6bf] overflow-hidden">
  <div class="overflow-x-auto custom-scrollbar">
    <table id="dashboardArticlesTable" class="w-full min-w-[920px] text-left border-collapse">
      <thead>
        <tr class="bg-[#041627] text-white">
          <th class="p-4 text-xs uppercase tracking-wider">ID / Title</th>
          <th class="p-4 text-xs uppercase tracking-wider">Category</th>
          <th class="p-4 text-xs uppercase tracking-wider">Primary Author</th>
          <th class="p-4 text-xs uppercase tracking-wider">Status</th>
          @if($role === 'admin')
          <th class="p-4 text-xs uppercase tracking-wider">Featured</th>
          @endif
          <th class="p-4 text-xs uppercase tracking-wider">Date</th>
          <th class="p-4 text-xs uppercase tracking-wider text-right">Actions</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-[#aeb6bf]"></tbody>
    </table>
  </div>
</section>
@endsection
@push('scripts')
<script>
NerosaDataTables.init('#dashboardArticlesTable', {
  filterForm: '#dashboardArticlesFilter',
  columns: [
    {data: 'identity', name: 'identity', orderable: false, className: 'p-4 max-w-md'},
    {data: 'category_name', name: 'category_name', orderable: false, className: 'p-4'},
    {data: 'author_name', name: 'author_name', orderable: false, className: 'p-4'},
    {data: 'status_badge', name: 'status_badge', orderable: false, className: 'p-4'},
    @if($role === 'admin')
    {data: 'featured', name: 'featured', orderable: false, searchable: false, className: 'p-4'},
    @endif
    {data: 'date', name: 'created_at', searchable: false, className: 'p-4 text-sm text-[#44474c]'},
    {data: 'actions', name: 'actions', orderable: false, searchable: false, className: 'p-4 text-right'},
  ],
});
</script>
@endpush