@extends('layouts.admin')
@section('title', $user->name)
@section('header', 'Detail Pengguna')

@section('content')
<style>
    :root { --navy:#0d1b2a; --navy-2:#1a2e45; --gold:#b8962e; --gold-2:#d4af4f; --gold-light:#f7f0dc; --cream:#faf8f4; --cream-2:#f3efe6; --border:#e5e0d5; --muted:#6b6560; }
    .serif { font-family:'Cormorant Garamond',Georgia,serif; }
    .back-link { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); text-decoration:none; margin-bottom:24px; transition:color .15s; }
    .back-link:hover { color:var(--navy); }
    .badge { font-size:10px; font-weight:600; padding:3px 10px; border-radius:20px; display:inline-block; }
    .badge-navy { background:rgba(13,27,42,.08); color:var(--navy); }
    .badge-green { background:#d1fae5; color:#065f46; }
    .badge-gold { background:var(--gold-light); color:var(--gold); }
    .badge-purple { background:#ede9fe; color:#5b21b6; }
    .badge-red { background:#fef2f2; color:#dc2626; }
    .badge-gray { background:#f3f0eb; color:var(--muted); }

    .page-layout { display:grid; grid-template-columns:1fr 280px; gap:20px; align-items:start; }
    @media(max-width:960px) { .page-layout { grid-template-columns:1fr; } }
    .panel { background:#fff; border:1px solid var(--border); border-radius:16px; overflow:hidden; }
    .panel-head { padding:20px 24px 18px; border-bottom:1px solid var(--border); display:flex; align-items:flex-end; justify-content:space-between; }
    .panel-body { padding:20px 24px; }
    .panel-title { font-family:'Cormorant Garamond',serif; font-size:17px; font-weight:600; color:var(--navy); }
    .section-label { font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:500; margin-bottom:3px; }

    /* Hero profile */
    .profile-hero { padding:28px 28px 24px; }
    .profile-flex { display:flex; align-items:flex-start; gap:18px; }
    .profile-av { width:56px; height:56px; border-radius:16px; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:700; flex-shrink:0; }
    .profile-name { font-family:'Cormorant Garamond',serif; font-size:22px; font-weight:600; color:var(--navy); margin-bottom:3px; }
    .profile-email { font-size:13px; color:var(--muted); margin-bottom:8px; }
    .profile-badges { display:flex; gap:6px; flex-wrap:wrap; }

    /* Info rows */
    .info-row { display:flex; justify-content:space-between; align-items:center; padding:11px 0; border-bottom:1px solid #f5f2ec; }
    .info-row:last-child { border-bottom:none; }
    .info-key { font-size:12px; color:var(--muted); }
    .info-val { font-size:13px; font-weight:500; color:var(--navy); }

    /* Progress */
    .prog-wrap { background:#f0ede6; border-radius:100px; height:5px; overflow:hidden; flex:1; }
    .prog-fill { height:5px; border-radius:100px; }

    /* Stat cards */
    .stat-mini { padding:16px; border-radius:12px; text-align:center; border:1px solid var(--border); }
    .stat-mini-num { font-family:'Cormorant Garamond',serif; font-size:28px; font-weight:600; line-height:1; }
    .stat-mini-label { font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin-top:4px; }

    /* Action buttons */
    .action-btn { display:flex; align-items:center; justify-content:center; gap:8px; font-size:13px; font-weight:500; padding:10px 16px; border-radius:10px; text-decoration:none; text-align:center; transition:all .15s; cursor:pointer; font-family:'Inter',sans-serif; border:none; width:100%; }
    .btn-navy { background:var(--navy); color:#fff; }
    .btn-navy:hover { opacity:.87; }
    .btn-outline { background:#fff; color:var(--navy); border:1px solid var(--border); }
    .btn-outline:hover { background:var(--cream-2); }
    .btn-red { background:#fef2f2; color:#dc2626; border:1px solid #fecaca; }
    .btn-red:hover { background:#fee2e2; }

    /* Course row */
    .course-row { display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:1px solid #f5f2ec; gap:12px; }
    .course-row:last-child { border-bottom:none; }
    .empty-state { text-align:center; padding:40px; color:var(--muted); font-size:13px; }
</style>

<a href="{{ route('admin.users.index') }}" class="back-link">
    <i class="fa fa-arrow-left" style="font-size:10px;"></i> Kembali ke Daftar Pengguna
</a>

@php
    $roleKey = strtolower($user->role?->name ?? 'siswa');
    $roleColors = ['admin'=>'badge-navy','guru'=>'badge-gold','siswa'=>'badge-green'];
@endphp

<div class="page-layout">
    {{-- Left Column --}}
    <div>
        {{-- Profile Card --}}
        <div class="panel" style="margin-bottom:16px;">
            <div class="profile-hero">
                <div class="profile-flex">
                    <div class="profile-av">{{ strtoupper(substr($user->name, 0, 1)) }}</div>
                    <div>
                        <div class="profile-name">{{ $user->name }}</div>
                        <div class="profile-email">{{ $user->email }}</div>
                        <div class="profile-badges">
                            <span class="badge {{ $roleColors[$roleKey] ?? 'badge-gray' }}">{{ ucfirst($roleKey) }}</span>
                            <span class="badge {{ $user->is_active ? 'badge-green' : 'badge-red' }}">
                                {{ $user->is_active ? 'Aktif' : 'Nonaktif' }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <div style="padding:0 24px 20px; border-top:1px solid var(--border);">
                <div style="padding-top:16px;">
                    <div class="info-row">
                        <div class="info-key">NIS / NIP</div>
                        <div class="info-val">{{ $user->nis_nip ?? '—' }}</div>
                    </div>
                    <div class="info-row">
                        <div class="info-key">Bergabung</div>
                        <div class="info-val">{{ $user->created_at->format('d F Y') }}</div>
                    </div>
                    <div class="info-row">
                        <div class="info-key">Login Terakhir</div>
                        <div class="info-val">{{ $user->last_login_at ? $user->last_login_at->diffForHumans() : '—' }}</div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Courses Section --}}
        <div class="panel">
            <div class="panel-head">
                <div class="panel-title">{{ $roleKey === 'guru' ? 'Kursus Diajarkan' : 'Kursus Diikuti' }}</div>
            </div>
            <div class="panel-body">
                @if($roleKey === 'guru')
                    @forelse($user->courses ?? [] as $course)
                    <div class="course-row">
                        <div style="min-width:0; flex:1;">
                            <div style="font-size:13px; font-weight:500; color:var(--navy); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">{{ $course->title }}</div>
                            <div style="font-size:11px; color:var(--muted); margin-top:2px;">{{ $course->category?->name }} · {{ $course->enrollments_count }} siswa</div>
                        </div>
                        <span class="badge {{ $course->is_published ? 'badge-green' : 'badge-gray' }}">
                            {{ $course->is_published ? 'Publik' : 'Draft' }}
                        </span>
                    </div>
                    @empty
                    <div class="empty-state"><i class="fa fa-book" style="display:block; font-size:22px; margin-bottom:8px; opacity:.3;"></i>Belum ada kursus.</div>
                    @endforelse
                @else
                    @forelse($user->enrollments ?? [] as $enrollment)
                    <div class="course-row">
                        <div style="min-width:0; flex:1;">
                            <div style="font-size:13px; font-weight:500; color:var(--navy); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:6px;">{{ $enrollment->course->title }}</div>
                            <div style="display:flex; align-items:center; gap:8px;">
                                <div class="prog-wrap">
                                    <div class="prog-fill" style="width:{{ $enrollment->progress }}%; background:{{ $enrollment->progress >= 100 ? '#10b981' : 'var(--navy)' }};"></div>
                                </div>
                                <span style="font-size:11px; font-weight:600; color:var(--navy); white-space:nowrap;">{{ $enrollment->progress }}%</span>
                            </div>
                        </div>
                    </div>
                    @empty
                    <div class="empty-state"><i class="fa fa-graduation-cap" style="display:block; font-size:22px; margin-bottom:8px; opacity:.3;"></i>Belum mengikuti kursus apapun.</div>
                    @endforelse
                @endif
            </div>
        </div>
    </div>

    {{-- Right Sidebar --}}
    <div>
        {{-- Stats --}}
        @if($roleKey === 'siswa')
        <div style="display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px;">
            <div class="stat-mini" style="background:#eff6ff; border-color:#bfdbfe;">
                <div class="stat-mini-num" style="color:#1d4ed8;">{{ $user->enrollments?->count() ?? 0 }}</div>
                <div class="stat-mini-label">Kursus</div>
            </div>
            <div class="stat-mini" style="background:#d1fae5; border-color:#a7f3d0;">
                <div class="stat-mini-num" style="color:#065f46;">{{ $user->enrollments?->where('progress', 100)->count() ?? 0 }}</div>
                <div class="stat-mini-label">Selesai</div>
            </div>
        </div>
        @elseif($roleKey === 'guru')
        <div style="display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px;">
            <div class="stat-mini" style="background:#eff6ff; border-color:#bfdbfe;">
                <div class="stat-mini-num" style="color:#1d4ed8;">{{ $user->courses?->count() ?? 0 }}</div>
                <div class="stat-mini-label">Kursus</div>
            </div>
            <div class="stat-mini" style="background:var(--gold-light); border-color:rgba(184,150,46,.2);">
                <div class="stat-mini-num" style="color:var(--gold);">{{ $user->courses?->sum('enrollments_count') ?? 0 }}</div>
                <div class="stat-mini-label">Siswa</div>
            </div>
        </div>
        @endif

        {{-- Actions --}}
        <div class="panel" style="overflow:visible;">
            <div class="panel-head">
                <div class="panel-title">Aksi</div>
            </div>
            <div class="panel-body" style="display:flex; flex-direction:column; gap:8px;">
                <a href="{{ route('admin.users.edit', $user) }}" class="action-btn btn-navy">
                    <i class="fa fa-pen" style="font-size:11px;"></i> Edit Pengguna
                </a>
                <form method="POST" action="{{ route('admin.users.toggle', $user) }}">
                    @csrf @method('PATCH')
                    <button type="submit" class="action-btn btn-outline">
                        <i class="fa {{ $user->is_active ? 'fa-ban' : 'fa-check' }}" style="font-size:11px;"></i>
                        {{ $user->is_active ? 'Nonaktifkan' : 'Aktifkan' }}
                    </button>
                </form>
                <form method="POST" action="{{ route('admin.users.destroy', $user) }}"
                      onsubmit="return confirm('Hapus pengguna ini?')">
                    @csrf @method('DELETE')
                    <button type="submit" class="action-btn btn-red">
                        <i class="fa fa-trash" style="font-size:11px;"></i> Hapus Pengguna
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

@endsection