@extends('layouts.admin')
@section('title', 'Pengurus RT')
@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 pengurus atau jabatan..."></form><a class="btn-admin-primary" href="{{ route('admin.officials.create') }}"><i class="fa-solid fa-plus"></i> Tambah Pengurus</a>
</div>
<div class="admin-card overflow-hidden">
    <div class="overflow-x-auto">
        <table class="w-full min-w-[800px] text-sm">
            <thead class="bg-slate-50 text-left text-xs uppercase text-slate-500">
                <tr>
                    <th class="p-4">Jabatan</th>
                    <th>Warga</th>
                    <th>WA</th>
                    <th>Email</th>
                    <th>Urutan</th>
                    <th>Aksi</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-100">@foreach($officials as $o)<tr>
                    <td class="p-4"><span class="badge-blue">{{ $o->position }}</span></td>
                    <td class="font-black">{{ $o->resident->name ?? $o->name }}</td>
                    <td>{{ $o->phone }}</td>
                    <td>{{ $o->email }}</td>
                    <td>{{ $o->sort_order }}</td>
                    <td>
                        <div class="flex gap-2"><a class="btn-soft" href="{{ route('admin.officials.edit',$o) }}">Edit</a>
                            <form method="post" action="{{ route('admin.officials.destroy',$o) }}" onsubmit="return confirm('Hapus pengurus?')">@csrf @method('DELETE')<button class="btn-danger">Hapus</button></form>
                        </div>
                    </td>
                </tr>@endforeach</tbody>
        </table>
    </div>
    <div class="p-4">{{ $officials->links() }}</div>
</div>
@endsection