@extends('admin.layouts.main')
@section('title','Manajemen Anggota & Staff')

@push('styles')
<style>
.role-pill { display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:3px 10px;border-radius:100px; }
.role-admin { background:#dbeafe;color:#2563eb;border:1px solid #bfdbfe; }
.role-staff { background:#f0fdfa;color:#0d9488;border:1px solid #99f6e4; }
.user-avatar-sm { width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-family:var(--ffd);font-size:14px;font-weight:800;flex-shrink:0;color:#fff; }
.perm-chip { display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:600;background:var(--c-50);border:1px solid var(--c-200);color:var(--c-600);padding:2px 8px;border-radius:100px;margin:2px; }
</style>
@endpush

@section('content')
<div class="page-header d-flex align-items-center justify-content-between flex-wrap gap-3">
    <div>
        <h1 class="page-title">Manajemen Anggota & Staff</h1>
        <p class="page-sub">Kelola pengguna, role, dan hak akses sistem</p>
    </div>
    <div class="d-flex gap-2">
        <a href="{{ route('admin.users.permissions') }}" class="btn-adm btn-outline-adm">
            <i class="fas fa-shield-alt"></i> Atur Hak Akses
        </a>
        @if(auth()->user()->can('create_users'))
        <a href="{{ route('admin.users.create') }}" class="btn-adm btn-primary-adm">
            <i class="fas fa-user-plus"></i> Tambah Anggota
        </a>
        @endif
    </div>
</div>

{{-- Stats --}}
<div class="row g-3 mb-4">
    @foreach([
        ['Total Anggota',$stats['total'],'fas fa-users','#dbeafe','#2563eb'],
        ['Super Admin',$stats['admin'],'fas fa-user-shield','#f5f3ff','#7c3aed'],
        ['Staff',$stats['staff'],'fas fa-user-tie','#f0fdfa','#0d9488'],
        ['Aktif',$stats['active'],'fas fa-check-circle','#dcfce7','#16a34a'],
    ] as $s)
    <div class="col-md-3 col-6">
        <div style="background:var(--white);border:1px solid var(--c-200);border-radius:12px;padding:16px 18px;display:flex;align-items:center;gap:12px;">
            <div style="width:42px;height:42px;background:{{ $s[3] }};border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                <i class="{{ $s[2] }}" style="color:{{ $s[4] }};font-size:.9rem;"></i>
            </div>
            <div>
                <div style="font-family:var(--ffd);font-size:1.5rem;font-weight:800;color:var(--c-900);line-height:1;">{{ $s[1] }}</div>
                <div style="font-size:12px;color:var(--c-500);">{{ $s[0] }}</div>
            </div>
        </div>
    </div>
    @endforeach
</div>

{{-- Filter --}}
<div class="adm-card mb-4">
    <div class="adm-card-body" style="padding:14px 18px;">
        <form method="GET" action="{{ route('admin.users.index') }}" class="row g-3 align-items-end">
            <div class="col-md-4">
                <div style="position:relative;">
                    <i class="fas fa-search" style="position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--c-400);font-size:12px;pointer-events:none;"></i>
                    <input type="text" name="search" class="form-control" style="padding-left:32px;" placeholder="Nama, email, posisi..." value="{{ request('search') }}">
                </div>
            </div>
            <div class="col-md-2">
                <select name="role" class="form-select">
                    <option value="">Semua Role</option>
                    <option value="admin" {{ request('role')=='admin'?'selected':'' }}>Admin</option>
                    <option value="staff" {{ request('role')=='staff'?'selected':'' }}>Staff</option>
                </select>
            </div>
            <div class="col-md-2">
                <select name="status" class="form-select">
                    <option value="">Semua Status</option>
                    <option value="active"   {{ request('status')=='active'?'selected':'' }}>Aktif</option>
                    <option value="inactive" {{ request('status')=='inactive'?'selected':'' }}>Nonaktif</option>
                </select>
            </div>
            <div class="col-md-2 d-flex gap-2">
                <button type="submit" class="btn-adm btn-primary-adm"><i class="fas fa-filter"></i> Filter</button>
                <a href="{{ route('admin.users.index') }}" class="btn-adm btn-outline-adm"><i class="fas fa-times"></i></a>
            </div>
        </form>
    </div>
</div>

{{-- Table --}}
<div class="adm-card">
    <div class="adm-card-header">
        <div class="adm-card-title"><i class="fas fa-users"></i> Daftar Anggota ({{ $users->total() }})</div>
    </div>
    <div style="overflow-x:auto;">
        <table class="adm-table">
            <thead>
                <tr>
                    <th>Anggota</th>
                    <th>Role & Posisi</th>
                    <th>Hak Akses</th>
                    <th>Login Terakhir</th>
                    <th>Status</th>
                    <th class="text-center">Aksi</th>
                </tr>
            </thead>
            <tbody>
                @forelse($users as $user)
                <tr>
                    <td>
                        <div class="d-flex align-items-center gap-10" style="gap:10px;">
                            <div class="user-avatar-sm" style="background:{{ $user->role_color }};">
                                {{ $user->initials }}
                            </div>
                            <div>
                                <div style="font-weight:700;color:var(--c-900);font-size:13.5px;">
                                    {{ $user->name }}
                                    @if($user->id === auth()->id())
                                    <span class="abadge abadge-blue" style="font-size:10px;vertical-align:middle;">Anda</span>
                                    @endif
                                </div>
                                <div style="font-size:12px;color:var(--c-500);">{{ $user->email }}</div>
                                @if($user->phone)
                                <div style="font-size:11.5px;color:var(--c-400);"><i class="fas fa-phone" style="font-size:9px;"></i> {{ $user->phone }}</div>
                                @endif
                            </div>
                        </div>
                    </td>
                    <td>
                        <span class="role-pill {{ $user->role === 'admin' ? 'role-admin' : 'role-staff' }}">
                            <i class="fas fa-{{ $user->role === 'admin' ? 'user-shield' : 'user-tie' }}" style="font-size:9px;"></i>
                            {{ $user->role_label }}
                        </span>
                        @if($user->position)
                        <div style="font-size:11.5px;color:var(--c-500);margin-top:3px;">{{ $user->position }}</div>
                        @endif
                    </td>
                    <td>
                        @if($user->role === 'admin')
                            <span class="abadge abadge-purple" style="font-size:10px;"><i class="fas fa-infinity" style="font-size:8px;"></i> Semua Akses</span>
                        @else
                            @php $perms = \App\Models\RolePermission::getPermissionsForRole($user->role); @endphp
                            <span style="font-size:12px;color:var(--c-600);">{{ count($perms) }} hak akses</span>
                            <a href="{{ route('admin.users.permissions', ['role' => $user->role]) }}" style="font-size:11px;color:var(--c-blue);display:block;margin-top:2px;">Lihat detail →</a>
                        @endif
                    </td>
                    <td style="font-size:12.5px;color:var(--c-500);">
                        {{ $user->last_login_at ? $user->last_login_at->diffForHumans() : 'Belum pernah' }}
                        @if($user->last_login_at)
                        <div style="font-size:11px;color:var(--c-400);">{{ $user->last_login_at->format('d M Y H:i') }}</div>
                        @endif
                    </td>
                    <td>
                        @if($user->is_active)
                            <span class="abadge abadge-green"><i class="fas fa-circle" style="font-size:7px;"></i> Aktif</span>
                        @else
                            <span class="abadge abadge-red"><i class="fas fa-circle" style="font-size:7px;"></i> Nonaktif</span>
                        @endif
                    </td>
                    <td>
                        <div class="d-flex justify-content-center gap-1">
                            <a href="{{ route('admin.users.show', $user->id) }}" class="btn-icon btn-icon-view" title="Detail"><i class="fas fa-eye"></i></a>
                            @if(auth()->user()->can('edit_users'))
                            <a href="{{ route('admin.users.edit', $user->id) }}" class="btn-icon btn-icon-edit" title="Edit"><i class="fas fa-edit"></i></a>
                            @if($user->id !== auth()->id())
                            <form action="{{ route('admin.users.toggle', $user->id) }}" method="POST">
                                @csrf
                                <button type="submit" class="btn-icon btn-icon-toggle" title="{{ $user->is_active ? 'Nonaktifkan' : 'Aktifkan' }}">
                                    <i class="fas fa-{{ $user->is_active ? 'ban' : 'check' }}"></i>
                                </button>
                            </form>
                            @endif
                            @endif
                            @if(auth()->user()->can('delete_users') && $user->id !== auth()->id())
                            <form action="{{ route('admin.users.destroy', $user->id) }}" method="POST" id="del-u-{{ $user->id }}">
                                @csrf @method('DELETE')
                                <button type="button" class="btn-icon btn-icon-del" onclick="confirmDelete('del-u-{{ $user->id }}')" title="Hapus"><i class="fas fa-trash"></i></button>
                            </form>
                            @endif
                        </div>
                    </td>
                </tr>
                @empty
                <tr><td colspan="6" style="text-align:center;padding:32px;color:var(--c-400);">Belum ada anggota</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($users->hasPages())
    <div style="padding:14px 18px;border-top:1px solid var(--c-100);">{{ $users->links() }}</div>
    @endif
</div>
@endsection