@extends('cms.layout')
@section('cms')
<div class="container-fluid">
  <div class="d-flex justify-content-between align-items-center mb-3">
    <h2 class="mb-0">Insights</h2>
    <a href="{{ route('cms.insights.create') }}" class="btn btn-primary btn-sm">Add</a>
  </div>

  @if(session('success'))
    <div class="alert alert-success">{{ session('success') }}</div>
  @endif

  <div class="card shadow-sm mb-3">
    <div class="card-body py-3">
      <div class="d-flex flex-wrap align-items-center mb-2">
        <ul class="nav nav-pills me-auto mb-2 mb-md-0">
          <li class="nav-item me-1">
            <a href="{{ route('cms.insights.index') }}" class="nav-link {{ empty($status) ? 'active' : '' }}">All <span class="badge bg-light text-dark ms-1">{{ $total }}</span></a>
          </li>
          <li class="nav-item me-1">
            <a href="?status=draft" class="nav-link {{ ($status??null)==='draft' ? 'active' : '' }}">Draft <span class="badge bg-light text-dark ms-1">{{ $countDraft }}</span></a>
          </li>
          <li class="nav-item me-1">
            <a href="?status=published" class="nav-link {{ ($status??null)==='published' ? 'active' : '' }}">Published <span class="badge bg-light text-dark ms-1">{{ $countPublished }}</span></a>
          </li>
        </ul>
        <form method="get" class="ms-auto" style="min-width:280px">
          @if($status)
            <input type="hidden" name="status" value="{{ $status }}">
          @endif
          <div class="input-group input-group-sm">
            <input type="text" name="q" value="{{ $q }}" class="form-control" placeholder="title or excerpt">
            <button class="btn btn-outline-secondary" type="submit">Search</button>
          </div>
        </form>
      </div>
      <form method="get" class="row align-items-end g-2">
        @if($status)
          <input type="hidden" name="status" value="{{ $status }}">
        @endif
        <div class="col-sm-6 col-md-3 col-lg-2">
          <label class="form-label small mb-1">Sort</label>
          <select name="sort" class="form-select form-select-sm">
            <option value="published_desc" {{ ($sort??'')==='published_desc'?'selected':'' }}>Published ↓</option>
            <option value="published_asc" {{ ($sort??'')==='published_asc'?'selected':'' }}>Published ↑</option>
            <option value="title_asc" {{ ($sort??'')==='title_asc'?'selected':'' }}>Title A→Z</option>
            <option value="title_desc" {{ ($sort??'')==='title_desc'?'selected':'' }}>Title Z→A</option>
          </select>
        </div>
        <div class="col-sm-6 col-md-3 col-lg-2">
          <label class="form-label small mb-1">Per page</label>
          <select name="per_page" class="form-select form-select-sm">
            @foreach([20,50,100] as $pp)
              <option value="{{ $pp }}" {{ (int)$perPage===$pp?'selected':'' }}>{{ $pp }}</option>
            @endforeach
          </select>
        </div>
        <div class="col-sm-12 col-md-6 col-lg-4 text-end ms-auto">
          <button class="btn btn-sm btn-primary me-1">Apply</button>
          <a href="{{ route('cms.insights.index') }}" class="btn btn-sm btn-outline-secondary">Reset</a>
        </div>
      </form>
    </div>
  </div>

  <div class="card">
    <div class="card-body table-responsive p-0">
      <table class="table table-striped table-hover mb-0">
        <thead>
          <tr>
            <th class="text-muted">#</th>
            <th>Title</th>
            <th>Status</th>
            <th>Published</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          @forelse($items as $it)
            <tr>
              <td class="text-muted small">{{ $it->id }}</td>
              <td>{{ $it->title }}</td>
              <td><span class="badge bg-secondary">{{ $it->status }}</span></td>
              <td class="text-muted small">{{ optional($it->published_at)->format('Y-m-d') }}</td>
              <td class="text-end">
                <a href="{{ route('cms.insights.edit',$it) }}" class="btn btn-sm btn-outline-primary">Edit</a>
                <form action="{{ route('cms.insights.destroy',$it) }}" method="post" class="d-inline" onsubmit="return confirm('Delete this post?')">
                  @csrf @method('DELETE')
                  <button class="btn btn-sm btn-outline-danger">Delete</button>
                </form>
              </td>
            </tr>
          @empty
            <tr><td colspan="5" class="text-center text-muted p-4">No posts.</td></tr>
          @endforelse
        </tbody>
      </table>
    </div>
    <div class="card-footer">{{ $items->links() }}</div>
  </div>
</div>
@endsection