@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">Team Members</h2>
    <a href="{{ route('cms.team-members.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.team-members.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=active" class="nav-link {{ ($status??null)==='active' ? 'active' : '' }}">Active <span class="badge bg-light text-dark ms-1">{{ $countActive }}</span></a>
          </li>
          <li class="nav-item me-1">
            <a href="?status=inactive" class="nav-link {{ ($status??null)==='inactive' ? 'active' : '' }}">Inactive <span class="badge bg-light text-dark ms-1">{{ $countInactive }}</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="name, title, email or phone">
            <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-3">
          <label class="form-label small mb-1">Practice Area</label>
          <select name="practice_area_id" class="form-select form-select-sm">
            <option value="">All</option>
            @foreach($practiceAreas as $pa)
              <option value="{{ $pa->id }}" {{ (string)($practiceAreaId??'')===(string)$pa->id?'selected':'' }}>{{ $pa->name }}</option>
            @endforeach
          </select>
        </div>
        <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="display_asc" {{ ($sort??'')==='display_asc'?'selected':'' }}>Display order ↑</option>
            <option value="display_desc" {{ ($sort??'')==='display_desc'?'selected':'' }}>Display order ↓</option>
            <option value="name_asc" {{ ($sort??'')==='name_asc'?'selected':'' }}>Name A→Z</option>
            <option value="name_desc" {{ ($sort??'')==='name_desc'?'selected':'' }}>Name 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.team-members.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>Name</th>
            <th>Title</th>
            <th class="text-center">Active</th>
            <th class="text-center">Order</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          @forelse($items as $it)
            <tr>
              <td class="text-muted small">{{ $it->id }}</td>
              <td>{{ $it->name }}</td>
              <td class="text-muted small">{{ $it->title }}</td>
              <td class="text-center">{!! $it->active ? '<span class="badge bg-success">Yes</span>' : '<span class="badge bg-secondary">No</span>' !!}</td>
              <td class="text-center">{{ $it->display_order }}</td>
              <td class="text-end">
                <a href="{{ route('cms.team-members.edit',$it) }}" class="btn btn-sm btn-outline-primary">Edit</a>
                <form action="{{ route('cms.team-members.destroy',$it) }}" method="post" class="d-inline" onsubmit="return confirm('Delete this member?')">
                  @csrf @method('DELETE')
                  <button class="btn btn-sm btn-outline-danger">Delete</button>
                </form>
              </td>
            </tr>
          @empty
            <tr><td colspan="6" class="text-center text-muted p-4">No team members.</td></tr>
          @endforelse
        </tbody>
      </table>
    </div>
    <div class="card-footer">{{ $items->links() }}</div>
  </div>
</div>
@endsection