@extends('layouts.dashboard')

@section('title', 'Active Members Roster | AICDS Admin')

@section('dashboard_content')

<div class="card p-4 border rounded-4 shadow-sm bg-white mb-4">
    <div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">
        <h4 class="fw-bold mb-0">Active Members Roster</h4>
        <div class="d-flex gap-2">
            <a href="{{ route('admin.members') }}" class="btn btn-sm {{ empty(request('category')) ? 'btn-primary' : 'btn-outline-primary' }}">All</a>
            <a href="{{ route('admin.members') }}?category=student" class="btn btn-sm {{ request('category') === 'student' ? 'btn-primary' : 'btn-outline-primary' }}">Student</a>
            <a href="{{ route('admin.members') }}?category=professional" class="btn btn-sm {{ request('category') === 'professional' ? 'btn-primary' : 'btn-outline-primary' }}">Professional</a>
            <a href="{{ route('admin.members') }}?category=institutional" class="btn btn-sm {{ request('category') === 'institutional' ? 'btn-primary' : 'btn-outline-primary' }}">Institutional</a>
        </div>
    </div>

    <!-- Search input -->
    <div class="mb-4">
        <form action="{{ route('admin.members') }}" method="GET" class="d-flex gap-2">
            <input type="text" name="search" value="{{ request('search') }}" class="form-control" placeholder="Search by membership number, name, or email...">
            <button type="submit" class="default__button px-4 py-2 border-0">Search</button>
            <a href="{{ route('admin.members') }}" class="btn btn-outline-secondary">Reset</a>
        </form>
    </div>

    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
            <thead class="table-light">
                <tr>
                    <th>Membership No</th>
                    <th>Member Name</th>
                    <th>Category &amp; Tier</th>
                    <th>Affiliated Institution</th>
                    <th>Validity Period</th>
                    <th>Status</th>
                </tr>
            </thead>
            <tbody>
                @forelse($members as $mem)
                    <tr>
                        <td><code class="fw-bold">{{ $mem->membership_number }}</code></td>
                        <td>
                            <strong>{{ $mem->user->name }}</strong><br>
                            <small class="text-muted">{{ $mem->user->email }}</small>
                        </td>
                        <td>
                            <span class="badge bg-primary-subtle text-primary">{{ $mem->plan->name ?? $mem->category }}</span>
                        </td>
                        <td>{{ $mem->user->organization ?? ($mem->application->institution_or_company ?? 'Individual') }}</td>
                        <td class="small">
                            From {{ $mem->start_date->format('M d, Y') }}
                            @if($mem->expiry_date)
                                to {{ $mem->expiry_date->format('M d, Y') }}
                            @else
                                <span class="badge bg-warning text-dark">Lifetime</span>
                            @endif
                        </td>
                        <td>
                            <span class="badge {{ $mem->status === 'active' ? 'bg-success' : 'bg-danger' }} text-uppercase">{{ $mem->status }}</span>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6" class="text-center text-muted py-4">No active members found.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div class="mt-4">{{ $members->links() }}</div>
</div>

@endsection