@extends('layouts.admin')
@section('title', 'Citizens')
@section('content')
<div class="page-header mb-4">
    <h1 class="page-title">Citizens</h1>
    <p class="page-subtitle">Manage all citizens registered under your center.</p>
</div>

<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <p class="fw-semibold mb-0 fs-4">All Citizens</p>
        <a href="{{ route('center.citizens.create') }}" class="btn btn-primary">+ Add Citizen</a>
    </div>
    <div class="card-body">
        <form method="GET" action="{{ route('center.citizens.index') }}" class="row g-2 mb-3">
            <div class="col-md-5">
                <input type="text" name="search" class="form-control" placeholder="Search by name or email..." value="{{ request('search') }}">
            </div>
            <div class="col-md-3">
                <select name="kyc" class="form-select">
                    <option value="">All KYC</option>
                    <option value="verified" {{ request('kyc') === 'verified' ? 'selected' : '' }}>Verified</option>
                    <option value="pending" {{ request('kyc') === 'pending' ? 'selected' : '' }}>Pending</option>
                </select>
            </div>
            <div class="col-md-auto d-flex gap-2">
                <button class="btn btn-primary" type="submit"><i class="ti ti-search me-1"></i>Search</button>
                @if(request('search') || request('kyc'))
                    <a href="{{ route('center.citizens.index') }}" class="btn btn-outline-secondary"><i class="ti ti-x me-1"></i>Clear</a>
                @endif
            </div>
        </form>
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="table-light"><tr><th>Citizen</th><th>Contact</th><th>Community</th><th>KYC</th><th>Document</th><th>Actions</th></tr></thead>
                <tbody>
                    @forelse($citizens as $citizen)
                    <tr>
                        <td>
                            <div class="d-flex align-items-center">
                                
                                <span class="fw-semibold">{{ $citizen->name }}</span>
                            </div>
                        </td>
                        <td>
                            <div>{{ $citizen->email }}</div>
                            <div class="small text-muted">{{ $citizen->mobile_no ?: '—' }}</div>
                        </td>
                        <td>{{ $citizen->community ?: '—' }}</td>
                        <td>
                            @if($citizen->kyc_verified)
                                <span class="badge rounded-pill bg-success-subtle text-success">✅ Verified</span>
                            @else
                                <span class="badge rounded-pill bg-warning-subtle text-warning">⏳ Pending</span>
                            @endif
                        </td>
                        <td>
                            @if(is_array($citizen->documents) && count($citizen->documents))
                                @foreach($citizen->documents as $key => $docPath)
                                    <a href="{{ request()->getBasePath() . Storage::url($docPath) }}" target="_blank" class="text-primary fw-semibold small d-block">📂 {{ $key }}</a>
                                @endforeach
                            @else
                                <span class="text-muted small">No document</span>
                            @endif
                        </td>
                        <td>
                            <div class="d-flex gap-2">
                                <a href="{{ route('center.citizens.edit', $citizen) }}" class="btn btn-primary btn-sm"><i class="ti ti-edit me-1"></i>Edit</a>
                                <form action="{{ route('center.citizens.destroy', $citizen) }}" method="POST" class="d-inline" onsubmit="return confirm('Delete this citizen?')">
                                    @csrf @method('DELETE')
                                    <button type="submit" class="btn btn-danger btn-sm"><i class="ti ti-trash me-1"></i>Delete</button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr><td colspan="6" class="text-center text-muted py-4">
                        
                        No citizens registered yet.
                    </td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="mt-3">{{ $citizens->links() }}</div>
    </div>
</div>
@endsection