@extends('layouts.app')

@section('tajuk', 'Senarai Pengguna')

@section('kandungan')
    <div class="kad">
        <div style="display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:0.5rem;">
            <h1 class="mb-0">Pengguna</h1>
            <a href="{{ route('pengguna.create') }}" class="btn">+ Daftar Pengguna</a>
        </div>
    </div>

    @if ($pengguna->isEmpty())
        <div class="kad teks-tengah">
            <p>Tiada pengguna lagi.</p>
        </div>
    @else
        <div class="kad" style="overflow-x:auto; padding:0;">
            <table class="jadual">
                <thead>
                    <tr>
                        <th>Nama</th>
                        <th>E-mel</th>
                        <th>Peranan</th>
                        <th>DUN</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($pengguna as $p)
                        <tr>
                            <td>{{ $p->name }}</td>
                            <td>{{ $p->email }}</td>
                            <td>
                                {{ match ($p->role) {
                                    'admin' => 'Admin',
                                    'pengurus' => 'Pengurus DUN',
                                    'kaunter' => 'Kaunter',
                                    default => $p->role,
                                } }}
                            </td>
                            <td>{{ $p->dun ? $p->dun->code . ' — ' . $p->dun->nama : '-' }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @endif
@endsection