@extends('layouts.admin')
@section('title', 'Manajemen User')
@section('page-title', 'Manajemen User')

@section('content')
<div class="page-header">
    <div class="page-header-left">
        <div class="breadcrumb"><a href="{{ route('admin.dashboard') }}">Dashboard</a><span class="breadcrumb-sep">›</span><span>Manajemen User</span></div>
        <h1 class="page-header-title">Manajemen User</h1>
    </div>
    <div class="page-header-actions">
        <a href="{{ route('admin.users.create') }}" class="btn btn-primary">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" width="16" height="16"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /></svg>
            Tambah User
        </a>
    </div>
</div>

<form method="GET" action="{{ route('admin.users.index') }}">
<div class="filter-bar">
    <div class="filter-group" style="flex:1;min-width:200px;">
        <label class="filter-label">Cari</label>
        <input type="text" name="search" class="filter-control" placeholder="Nama, username, email..." value="{{ request('search') }}">
    </div>
    <div class="filter-group">
        <label class="filter-label">Role</label>
        <select name="role" class="filter-control">
            <option value="">Semua Role</option>
            <option value="admin"    {{ request('role')=='admin'    ? 'selected' : '' }}>Admin</option>
            <option value="petugas"  {{ request('role')=='petugas'  ? 'selected' : '' }}>Petugas</option>
            <option value="operator" {{ request('role')=='operator' ? 'selected' : '' }}>Operator</option>
        </select>
    </div>
    <div class="filter-group">
        <label class="filter-label">Status</label>
        <select name="status" class="filter-control">
            <option value="">Semua Status</option>
            <option value="aktif"    {{ request('status')=='aktif'    ? 'selected' : '' }}>Aktif</option>
            <option value="pending"  {{ request('status')=='pending'  ? 'selected' : '' }}>Pending</option>
            <option value="nonaktif" {{ request('status')=='nonaktif' ? 'selected' : '' }}>Nonaktif</option>
        </select>
    </div>
    <div class="filter-actions">
        <button type="submit" class="btn btn-primary btn-sm">Filter</button>
        <a href="{{ route('admin.users.index') }}" class="btn btn-outline btn-sm">Reset</a>
    </div>
</div>
</form>

<div class="card">
    <div class="table-wrapper" style="border:none;">
        <table>
            <thead>
                <tr>
                    <th>#</th>
                    <th>Nama</th>
                    <th>Username</th>
                    <th>Email</th>
                    <th>Role</th>
                    <th>Wilayah</th>
                    <th>Status</th>
                    <th>Aksi</th>
                </tr>
            </thead>
            <tbody>
                @forelse($users as $user)
                <tr>
                    <td class="text-muted">{{ $users->firstItem() + $loop->index }}</td>
                    <td class="fw-bold">{{ $user->name }}</td>
                    <td class="nowrap">{{ $user->username }}</td>
                    <td class="text-muted">{{ $user->email ?? '-' }}</td>
                    <td>
                        <span class="badge {{ $user->role==='admin' ? 'badge-danger' : ($user->role==='petugas' ? 'badge-primary' : 'badge-info') }}">
                            {{ ucfirst($user->role) }}
                        </span>
                    </td>
                    <td style="font-size:.82rem;">
                        @if($user->role === 'operator')
                            {{ $user->desa?->nama ?? '-' }}
                        @elseif($user->role === 'petugas')
                            {{ $user->kecamatans->pluck('nama')->join(', ') ?: '-' }}
                        @else
                            <span class="text-muted">—</span>
                        @endif
                    </td>
                    <td>
                        <span class="badge {{ $user->status==='aktif' ? 'badge-success' : ($user->status==='pending' ? 'badge-warning' : 'badge-gray') }}">
                            {{ ucfirst($user->status) }}
                        </span>
                    </td>
                    <td>
                        <div class="td-actions">
                            <a href="{{ route('admin.users.edit', $user) }}" class="btn btn-outline btn-sm">Edit</a>
                            <form method="POST" action="{{ route('admin.users.destroy', $user) }}"
                                  onsubmit="return confirm('Hapus user ini?')">
                                @csrf @method('DELETE')
                                <button type="submit" class="btn btn-danger btn-sm">Hapus</button>
                            </form>
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="8">
                        <div class="empty-state">
                            <div class="empty-state-icon">👤</div>
                            <div class="empty-state-title">Belum ada user</div>
                            <div class="empty-state-text">Tambahkan user pertama melalui tombol di atas.</div>
                        </div>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    @if($users->hasPages())
    <div class="pagination-wrapper">
        <span class="pagination-info">Menampilkan {{ $users->firstItem() }}–{{ $users->lastItem() }} dari {{ $users->total() }} data</span>
        {{ $users->links('components.pagination') }}
    </div>
    @endif
</div>
@endsection