@extends('layouts.app')
@section('title', 'Pengguna')

@section('content')
<div class="row g-3">
    <div class="col-lg-7">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <span><i class="bi bi-people text-hijau"></i> Daftar Pengguna</span>
                <span class="badge badge-lunas">{{ $users->count() }} akun</span>
            </div>
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead><tr><th>Nama</th><th>Username</th><th>Peran</th><th class="text-end">Aksi</th></tr></thead>
                    <tbody>
                    @foreach($users as $u)
                        <tr>
                            <td><b>{{ $u->name }}</b>@if($u->id === auth()->id())<span class="badge bg-biru-soft ms-1">Anda</span>@endif<br><small class="text-muted">{{ $u->email }}</small></td>
                            <td>{{ $u->username }}</td>
                            <td>
                                @if($u->role === 'admin')<span class="badge bg-hijau">Admin</span>
                                @else<span class="badge bg-biru-soft">Petugas</span>@endif
                            </td>
                            <td class="text-end">
                                @if($u->id !== auth()->id())
                                    <form method="POST" action="{{ route('users.destroy', $u) }}" class="d-inline" onsubmit="return confirm('Hapus pengguna {{ $u->name }}?')">
                                        @csrf @method('DELETE')
                                        <button class="btn btn-sm btn-outline-danger"><i class="bi bi-trash"></i></button>
                                    </form>
                                @else
                                    <span class="text-muted small">—</span>
                                @endif
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="col-lg-5">
        <div class="card">
            <div class="card-header"><i class="bi bi-person-plus text-hijau"></i> Tambah Pengguna</div>
            <div class="card-body">
                    <form method="POST" action="{{ route('users.store') }}">
                        @csrf
                        <div class="mb-2"><label class="form-label small fw-semibold">Nama Lengkap</label>
                            <input name="name" value="{{ old('name') }}" class="form-control" required></div>
                        <div class="row g-2">
                            <div class="col-6 mb-2"><label class="form-label small fw-semibold">Username</label>
                                <input name="username" value="{{ old('username') }}" class="form-control" required></div>
                            <div class="col-6 mb-2"><label class="form-label small fw-semibold">Peran</label>
                                <select name="role" class="form-select" required>
                                    <option value="petugas" @selected(old('role')==='petugas')>Petugas</option>
                                    <option value="admin" @selected(old('role')==='admin')>Admin</option>
                                </select></div>
                        </div>
                        <div class="mb-2"><label class="form-label small fw-semibold">E-mail <span class="text-muted">(opsional)</span></label>
                            <input type="email" name="email" value="{{ old('email') }}" class="form-control"></div>
                        <div class="row g-2">
                            <div class="col-6 mb-3"><label class="form-label small fw-semibold">Password</label>
                                <input type="password" name="password" class="form-control" required></div>
                            <div class="col-6 mb-3"><label class="form-label small fw-semibold">Ulangi</label>
                                <input type="password" name="password_confirmation" class="form-control" required></div>
                        </div>
                        <button class="btn btn-primary w-100"><i class="bi bi-check-lg"></i> Tambah Pengguna</button>
                    </form>
            </div>
        </div>
    </div>
</div>
@endsection