@extends('layouts.app')

@section('title', $jumuiya->name)
@section('kicker', 'Jumuiya profile and members')

@section('content')
    <div class="row g-4">
        <div class="col-lg-4">
            <div class="content-card">
                <div class="section-title mb-3">Cell Details</div>
                <p class="mb-2"><strong>Code:</strong> {{ $jumuiya->code }}</p>
                <p class="mb-2"><strong>Leader:</strong> {{ $jumuiya->leader_name ?? '-' }}</p>
                <p class="mb-2"><strong>Assistant:</strong> {{ $jumuiya->assistant_leader ?? '-' }}</p>
                <p class="mb-2"><strong>Phone:</strong> {{ $jumuiya->phone ?? '-' }}</p>
                <p class="mb-2"><strong>Location:</strong> {{ $jumuiya->location ?? '-' }}</p>
                <span class="badge {{ $jumuiya->status === 'active' ? 'badge-soft' : 'badge-soft-rose' }}">{{ ucfirst($jumuiya->status) }}</span>
            </div>
        </div>
        <div class="col-lg-8">
            <div class="table-card">
                <div class="section-title mb-3">Cell Members</div>
                <div class="table-responsive">
                    <table class="table">
                        <thead><tr><th>Member</th><th>Phone</th><th>Position</th><th>Status</th></tr></thead>
                        <tbody>
                            @forelse ($jumuiya->members as $member)
                                <tr>
                                    <td><a href="{{ route('members.show', $member) }}" class="fw-semibold">{{ $member->full_name }}</a></td>
                                    <td>{{ $member->phone ?? '-' }}</td>
                                    <td>{{ $member->position?->name ?? '-' }}</td>
                                    <td><span class="badge badge-soft">{{ ucfirst($member->status) }}</span></td>
                                </tr>
                            @empty
                                <tr><td colspan="4"><div class="empty-state">Hakuna member kwenye jumuiya hii bado.</div></td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection
