@extends('layouts.app')

@section('title', 'Members')
@section('kicker', 'Church membership register')

@section('content')
    <div id="members-fragment" data-fragment>
        <div class="page-toolbar mb-3">
            <form class="filter-toolbar" method="GET" data-auto-filter data-refresh-target="#members-fragment">
                <div class="filter-field filter-search-field">
                    <i data-lucide="search"></i>
                    <input type="search" name="search" value="{{ request('search') }}" class="form-control" placeholder="Search name, phone, code">
                </div>
                <select name="jumuiya_id" class="form-select filter-select">
                    <option value="">All Jumuiya</option>
                    @foreach ($jumuiyas as $jumuiya)
                        <option value="{{ $jumuiya->id }}" @selected((string) request('jumuiya_id') === (string) $jumuiya->id)>{{ $jumuiya->name }}</option>
                    @endforeach
                </select>
                <select name="status" class="form-select filter-select filter-select-sm">
                    <option value="">All Status</option>
                    @foreach (['active', 'inactive', 'transferred', 'deceased'] as $status)
                        <option value="{{ $status }}" @selected(request('status') === $status)>{{ ucfirst($status) }}</option>
                    @endforeach
                </select>
                @if (request()->hasAny(['search', 'jumuiya_id', 'status']))
                    <a href="{{ route('members.index') }}" class="btn btn-outline-secondary filter-clear-button" title="Clear filters">
                        <i data-lucide="rotate-ccw"></i>
                    </a>
                @endif
            </form>
            <div class="toolbar-actions">
                <a href="{{ route('members.qr-cards') }}" class="btn btn-outline-primary"><i data-lucide="qr-code"></i><span>QR Cards</span></a>
                <button type="button" class="btn btn-primary" data-modal-url="{{ route('members.create') }}"><i data-lucide="user-plus"></i><span>Register Member</span></button>
            </div>
        </div>

        <div class="table-card">
            <div class="table-responsive">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Member</th>
                            <th>Code</th>
                            <th>Jumuiya</th>
                            <th>Phone</th>
                            <th>Sacrament</th>
                            <th>Status</th>
                            <th class="text-end">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($members as $member)
                            <tr>
                                <td>
                                    <div class="d-flex align-items-center gap-2">
                                        <div class="avatar-initials">{{ strtoupper(substr($member->first_name, 0, 1).substr($member->last_name, 0, 1)) }}</div>
                                        <div>
                                            <a href="{{ route('members.show', $member) }}" class="fw-bold">{{ $member->full_name }}</a>
                                            <div class="text-muted small">{{ $member->position?->name ?? 'No position' }}</div>
                                        </div>
                                    </div>
                                </td>
                                <td>{{ $member->member_code }}</td>
                                <td>{{ $member->jumuiya?->name ?? 'No Jumuiya' }}</td>
                                <td>{{ $member->phone ?? '-' }}</td>
                                <td>
                                    <span class="badge {{ $member->is_allowed_sacrament ? 'badge-soft' : 'badge-soft-gold' }}">
                                        {{ $member->is_allowed_sacrament ? 'Eligible' : 'Not eligible' }}
                                    </span>
                                </td>
                                <td><span class="badge {{ $member->status === 'active' ? 'badge-soft' : 'badge-soft-rose' }}">{{ ucfirst($member->status) }}</span></td>
                                <td class="text-end">
                                    <div class="d-inline-flex gap-1">
                                        <a href="{{ route('members.show', $member) }}" class="btn btn-sm btn-outline-primary" title="Profile"><i data-lucide="eye"></i></a>
                                        <button type="button" class="btn btn-sm btn-outline-secondary" title="Edit" data-modal-url="{{ route('members.edit', $member) }}"><i data-lucide="pencil"></i></button>
                                        <form method="POST" action="{{ route('members.destroy', $member) }}" data-confirm-delete="Member huyu ataondolewa." data-ajax-form data-refresh-target="#members-fragment">
                                            @csrf
                                            @method('DELETE')
                                            <button class="btn btn-sm btn-outline-danger" title="Delete"><i data-lucide="trash-2"></i></button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="7"><div class="empty-state">Hakuna members waliopatikana.</div></td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            {{ $members->links() }}
        </div>
    </div>
@endsection
