@extends('admin.layouts.main')
@section('title','Detail Anggota: ' . $user->name)

@section('content')
<div class="page-header d-flex align-items-center justify-content-between">
    <div>
        <h1 class="page-title">Detail Anggota</h1>
        <p class="page-sub">Informasi lengkap dan hak akses {{ $user->name }}</p>
    </div>
    <div class="d-flex gap-2">
        @if(auth()->user()->can('edit_users'))
        <a href="{{ route('admin.users.edit', $user->id) }}" class="btn-adm btn-primary-adm btn-adm-sm"><i class="fas fa-edit"></i> Edit</a>
        @endif
        <a href="{{ route('admin.users.index') }}" class="btn-adm btn-outline-adm btn-adm-sm"><i class="fas fa-arrow-left"></i> Kembali</a>
    </div>
</div>

<div class="row g-4">
    {{-- Profile Card --}}
    <div class="col-lg-4">
        <div class="adm-card mb-4 text-center" style="padding:32px 24px;">
            <div style="width:80px;height:80px;border-radius:20px;background:{{ $user->role_color }};display:flex;align-items:center;justify-content:center;font-family:var(--ffd);font-size:1.8rem;font-weight:800;color:#fff;margin:0 auto 16px;">
                {{ $user->initials }}
            </div>
            <h3 style="font-size:1.1rem;font-weight:800;color:var(--c-900);margin-bottom:4px;">{{ $user->name }}</h3>
            <div style="font-size:13px;color:var(--c-500);margin-bottom:12px;">{{ $user->email }}</div>
            <span style="display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;padding:5px 14px;border-radius:100px;background:{{ $user->role === 'admin' ? '#dbeafe' : '#f0fdfa' }};color:{{ $user->role_color }};border:1px solid {{ $user->role === 'admin' ? '#bfdbfe' : '#99f6e4' }};">
                <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:13px;color:var(--c-600);margin-top:10px;font-weight:500;">{{ $user->position }}</div>
            @endif
            <div style="margin-top:16px;padding-top:16px;border-top:1px solid var(--c-100);">
                @if($user->is_active)
                <span class="abadge abadge-green"><i class="fas fa-circle" style="font-size:7px;"></i> Akun Aktif</span>
                @else
                <span class="abadge abadge-red"><i class="fas fa-circle" style="font-size:7px;"></i> Nonaktif</span>
                @endif
            </div>
        </div>

        {{-- Info --}}
        <div class="adm-card">
            <div class="adm-card-header"><div class="adm-card-title"><i class="fas fa-info-circle"></i> Info Akun</div></div>
            <div class="adm-card-body" style="padding:0;">
                @foreach([
                    ['fas fa-envelope','Email',$user->email],
                    ['fas fa-phone','Telepon',$user->phone ?? '-'],
                    ['fas fa-calendar','Bergabung',$user->created_at->format('d M Y')],
                    ['fas fa-clock','Login Terakhir',$user->last_login_at ? $user->last_login_at->format('d M Y H:i') : 'Belum pernah'],
                    ['fas fa-id-badge','ID Pengguna','#'.$user->id],
                ] as $info)
                <div style="display:flex;gap:10px;align-items:flex-start;padding:10px 16px;border-bottom:1px solid var(--c-100);">
                    <i class="{{ $info[0] }}" style="color:var(--c-400);font-size:12px;margin-top:2px;width:14px;flex-shrink:0;"></i>
                    <div>
                        <div style="font-size:10.5px;font-weight:700;color:var(--c-400);text-transform:uppercase;letter-spacing:.05em;">{{ $info[1] }}</div>
                        <div style="font-size:13.5px;color:var(--c-700);">{{ $info[2] }}</div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>

    {{-- Permissions --}}
    <div class="col-lg-8">
        <div class="adm-card">
            <div class="adm-card-header">
                <div class="adm-card-title"><i class="fas fa-shield-alt"></i> Hak Akses</div>
                @if($user->role !== 'admin')
                <a href="{{ route('admin.users.permissions', ['role' => $user->role]) }}" class="btn-adm btn-outline-adm btn-adm-sm">Atur Hak Akses</a>
                @endif
            </div>
            <div class="adm-card-body">
                @if($user->role === 'admin')
                <div style="text-align:center;padding:20px;">
                    <div style="width:60px;height:60px;background:#eff6ff;border-radius:15px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;">
                        <i class="fas fa-infinity" style="color:#2563eb;font-size:1.4rem;"></i>
                    </div>
                    <div style="font-size:14px;font-weight:700;color:var(--c-900);">Akses Penuh</div>
                    <div style="font-size:13px;color:var(--c-500);margin-top:4px;">Super Admin memiliki semua hak akses sistem</div>
                </div>
                @else
                <div style="margin-bottom:12px;">
                    <span class="abadge abadge-blue">{{ count($perms) }} dari {{ count($allPermissions) }} izin aktif</span>
                </div>
                @foreach($allGroups as $gName => $gPerms)
                @php $activeInGroup = array_filter($gPerms, fn($p) => in_array($p, $perms) && isset($allPermissions[$p])); @endphp
                @if(!empty($activeInGroup))
                <div style="margin-bottom:14px;">
                    <div style="font-size:11.5px;font-weight:700;color:var(--c-500);text-transform:uppercase;letter-spacing:.06em;margin-bottom:7px;">{{ $gName }}</div>
                    <div style="display:flex;flex-wrap:wrap;gap:6px;">
                        @foreach($activeInGroup as $pName)
                        <span style="display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;background:#f0fdf4;border:1px solid #bbf7d0;color:#16a34a;padding:4px 10px;border-radius:100px;">
                            <i class="fas fa-check" style="font-size:9px;"></i>
                            {{ $allPermissions[$pName]['label'] }}
                        </span>
                        @endforeach
                    </div>
                </div>
                @endif
                @endforeach
                @php $deniedPerms = array_diff(array_keys($allPermissions), $perms); @endphp
                @if(count($deniedPerms) > 0)
                <div style="margin-top:14px;padding-top:14px;border-top:1px solid var(--c-100);">
                    <div style="font-size:11.5px;font-weight:700;color:var(--c-400);text-transform:uppercase;letter-spacing:.06em;margin-bottom:7px;">Tidak Memiliki Akses</div>
                    <div style="display:flex;flex-wrap:wrap;gap:5px;">
                        @foreach($deniedPerms as $pName)
                        @if(isset($allPermissions[$pName]))
                        <span style="display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:500;background:var(--c-100);border:1px solid var(--c-200);color:var(--c-400);padding:3px 9px;border-radius:100px;">
                            <i class="fas fa-times" style="font-size:8px;"></i>
                            {{ $allPermissions[$pName]['label'] }}
                        </span>
                        @endif
                        @endforeach
                    </div>
                </div>
                @endif
                @endif
            </div>
        </div>
    </div>
</div>
@endsection