@extends('layouts.admin')
@section('title', 'Data Warga')
@section('admin_content')
<div class="mb-5 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
    <form class="relative w-full sm:w-96"><i class="fa-solid fa-magnifying-glass absolute left-4 top-1/2 -translate-y-1/2 text-slate-400"></i><input class="admin-input pl-11" name="q" value="{{ request('q') }}" placeholder="Cari warga, alamat, WA, email..."></form><a class="btn-admin-primary" href="{{ route('admin.residents.create') }}"><i class="fa-solid fa-plus"></i> Tambah Warga</a>
</div>
<div class="admin-card overflow-hidden">
    <div class="overflow-x-auto">
        <table class="w-full min-w-[1000px] text-sm">
            <thead class="bg-slate-50 text-left text-xs uppercase text-slate-500">
                <tr>
                    <th class="p-4">Nama</th>
                    <th>NIK</th>
                    <th>KK</th>
                    <th>Alamat</th>
                    <th>WA</th>
                    <th>Email/Akun</th>
                    <th>Jabatan</th>
                    <th>Status</th>
                    <th>Aksi</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-100">@foreach($residents as $r)<tr>
                    <td class="p-4 font-black">{{ $r->name }}</td>
                    <td>{{ $r->nik }}</td>
                    <td>{{ $r->kk_number }}</td>
                    <td>{{ $r->address }}</td>
                    <td>{{ $r->phone }}</td>
                    <td>{{ $r->email }}<br><span class="text-xs {{ $r->user ? 'text-emerald-600' : 'text-rose-600' }}">{{ $r->user ? 'Akun aktif' : 'Belum ada akun' }}</span></td>
                    <td>@foreach($r->officials as $o)<span class="badge-blue mb-1">{{ $o->position }}</span>@endforeach</td>
                    <td><span class="badge">{{ $r->status }}</span></td>
                    <td>
                        <div class="flex gap-2"><a class="btn-soft" href="{{ route('admin.residents.edit',$r) }}"><i class="fa-solid fa-pen"></i></a>
                            <form method="post" action="{{ route('admin.residents.destroy',$r) }}" onsubmit="return confirm('Hapus data warga beserta akun dan jabatan terkait?')">@csrf @method('DELETE')<button class="btn-danger"><i class="fa-solid fa-trash"></i></button></form>
                        </div>
                    </td>
                </tr>@endforeach</tbody>
        </table>
    </div>
    <div class="p-4">{{ $residents->links() }}</div>
</div>
@endsection