@extends('admin.layouts.app')

@section('content')

<div class="page-container" style="padding:28px 32px; background:#f1f5f9; min-height:100vh; font-family:'Figtree','Segoe UI',sans-serif;">
    <style>
        .hover-card {
            transition: all .3s ease;
            cursor: pointer;
        }

        .hover-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 18px 35px rgba(15, 23, 42, .12);
        }

        @media (max-width: 768px) {
            .page-container { padding: 16px 12px !important; }
            .header-flex { flex-direction: column !important; gap: 16px !important; }
            .stats-grid { grid-template-columns: 1fr !important; }
            .toolbar-flex { flex-direction: column !important; align-items: stretch !important; gap: 16px !important; }
            .toolbar-right { flex-direction: column !important; align-items: stretch !important; }
            .search-input { width: 100% !important; }
            .btn-tambah { justify-content: center !important; }
            .header-badges { flex-wrap: wrap; }
            .table-wrap table { min-width: 800px !important; }
        }
    </style>
    {{-- HEADER --}}
    <div class="header-flex" style="display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:24px;">
        <div>
            <p style="font-size:11px; font-weight:700; color:#94a3b8; letter-spacing:1.8px; margin:0 0 6px; text-transform:uppercase;">
                Panel Kendali Sistem
            </p>
            <h1 style="font-size:30px; font-weight:800; color:#0f172a; margin:0 0 4px;">
                Manajemen Pengguna
            </h1>
            <p style="margin:0; color:#94a3b8; font-size:13px;">
                Kelola seluruh akun dan hak akses pengguna sistem
            </p>
        </div>

        <div class="header-badges" style="display:flex; align-items:center; gap:10px;">
            <div style="background:#fff; border:1px solid #e2e8f0; padding:9px 14px; border-radius:10px; font-size:13px; color:#64748b; display:flex; align-items:center; gap:6px;">
                <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                    <rect x="3" y="4" width="18" height="18" rx="2" />
                    <line x1="16" y1="2" x2="16" y2="6" />
                    <line x1="8" y1="2" x2="8" y2="6" />
                    <line x1="3" y1="10" x2="21" y2="10" />
                </svg>
                {{ now()->translatedFormat('l, d F Y') }}
            </div>
            <div style="background:#eef2ff; color:#4338ca; padding:9px 14px; border-radius:10px; font-size:12px; font-weight:700; display:flex; align-items:center; gap:6px;">
                <div style="width:8px; height:8px; background:#4338ca; border-radius:50%;"></div>
                {{ strtoupper(session('user')['role'] ?? 'ADMINISTRATOR') }}
            </div>
        </div>
    </div>

    {{-- STATISTIC CARDS --}}
    <div class="stats-grid" style="display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:24px;">

        {{-- Card 1 --}}
        <a href="{{ route('admin.superadmin.user.index') }}" 
           class="hover-card"
           style="text-decoration:none; display:block; background:#fff; border-radius:16px; padding:22px 24px; border:1px solid #e2e8f0; position:relative; overflow:hidden;">
            <div style="position:absolute; top:0; left:0; right:0; height:3px; background:#3b82f6;"></div>
            <div style="display:flex; justify-content:space-between; align-items:flex-start;">
                <div>
                    <p style="font-size:11px; font-weight:700; color:#94a3b8; letter-spacing:1.2px; margin:0 0 10px; text-transform:uppercase;">
                        Total Pengguna
                    </p>
                    <h2 style="font-size:36px; font-weight:800; margin:0 0 4px; color:#0f172a;">
                        {{ $stats['total'] }}
                    </h2>
                    <p style="font-size:12px; color:#94a3b8; margin:0;">Seluruh akun terdaftar</p>
                </div>
                <div style="width:44px; height:44px; background:#eff6ff; border-radius:12px; display:flex; align-items:center; justify-content:center;">
                    <svg width="20" height="20" fill="none" stroke="#3b82f6" stroke-width="2" viewBox="0 0 24 24">
                        <circle cx="12" cy="8" r="4" />
                        <path d="M4 20c0-4 3.6-7 8-7s8 3 8 7" />
                    </svg>
                </div>
            </div>
        </a>

        {{-- Card 2 --}}
        <a href="{{ route('admin.superadmin.user.index') }}" 
           class="hover-card"
           style="text-decoration:none; display:block; background:#fff; border-radius:16px; padding:22px 24px; border:1px solid #e2e8f0; position:relative; overflow:hidden;">
            <div style="position:absolute; top:0; left:0; right:0; height:3px; background:#10b981;"></div>
            <div style="display:flex; justify-content:space-between; align-items:flex-start;">
                <div>
                    <p style="font-size:11px; font-weight:700; color:#94a3b8; letter-spacing:1.2px; margin:0 0 10px; text-transform:uppercase;">
                        Pengguna Aktif
                    </p>
                    <h2 style="font-size:36px; font-weight:800; margin:0 0 4px; color:#0f172a;">
                        {{ $stats['active'] }}
                    </h2>
                    <p style="font-size:12px; color:#94a3b8; margin:0;">Memiliki aktivitas tercatat</p>
                </div>
                <div style="width:44px; height:44px; background:#f0fdf4; border-radius:12px; display:flex; align-items:center; justify-content:center;">
                    <svg width="20" height="20" fill="none" stroke="#10b981" stroke-width="2" viewBox="0 0 24 24">
                        <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
                        <polyline points="22 4 12 14.01 9 11.01" />
                    </svg>
                </div>
            </div>
        </a>

        {{-- Card 3 --}}
        <div class="hover-card" style="background:#fff; border-radius:16px; padding:22px 24px; border:1px solid #e2e8f0; position:relative; overflow:hidden;">
            <div style="position:absolute; top:0; left:0; right:0; height:3px; background:#8b5cf6;"></div>
            <div style="display:flex; justify-content:space-between; align-items:flex-start;">
                <div>
                    <p style="font-size:11px; font-weight:700; color:#94a3b8; letter-spacing:1.2px; margin:0 0 10px; text-transform:uppercase;">
                        Total Aktivitas
                    </p>
                    <h2 style="font-size:36px; font-weight:800; margin:0 0 4px; color:#0f172a;">
                        {{ $stats['activities'] }}
                    </h2>
                    <p style="font-size:12px; color:#94a3b8; margin:0;">Dari seluruh pengguna</p>
                </div>
                <div style="width:44px; height:44px; background:#f5f3ff; border-radius:12px; display:flex; align-items:center; justify-content:center;">
                    <svg width="20" height="20" fill="none" stroke="#8b5cf6" stroke-width="2" viewBox="0 0 24 24">
                        <polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
                    </svg>
                </div>
            </div>
        </div>

    </div>

    {{-- TABLE CARD --}}
    <div style="background:#fff; border-radius:16px; border:1px solid #e2e8f0; overflow:hidden;">

        {{-- TABLE TOOLBAR --}}
        <div class="toolbar-flex" style="padding:18px 24px; border-bottom:1px solid #f1f5f9; display:flex; justify-content:space-between; align-items:center; gap:12px;">

            <div style="display:flex; align-items:center; gap:10px;">
                <div style="width:32px; height:32px; background:#eff6ff; border-radius:8px; display:flex; align-items:center; justify-content:center;">
                    <svg width="16" height="16" fill="none" stroke="#2563eb" stroke-width="2" viewBox="0 0 24 24">
                        <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
                        <circle cx="9" cy="7" r="4" />
                        <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
                        <path d="M16 3.13a4 4 0 0 1 0 7.75" />
                    </svg>
                </div>
                <div>
                    <h3 style="margin:0; font-size:15px; font-weight:700; color:#0f172a;">Daftar Pengguna Sistem</h3>
                </div>
                <span style="background:#eff6ff; color:#2563eb; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:700;">
                    Total: {{ $stats['total'] }} Pengguna
                </span>
            </div>

            <div class="toolbar-right" style="display:flex; align-items:center; gap:10px;">
                {{-- SEARCH --}}
                <div style="position:relative; flex:1;">
                    <svg style="position:absolute; left:10px; top:50%; transform:translateY(-50%); color:#94a3b8;" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <circle cx="11" cy="11" r="8" />
                        <line x1="21" y1="21" x2="16.65" y2="16.65" />
                    </svg>
                    <input type="text" placeholder="Cari nama atau username..." class="search-input"
                        style="padding:9px 12px 9px 32px; border:1px solid #e2e8f0; border-radius:10px; font-size:13px; color:#475569; outline:none; width:220px; background:#f8fafc; box-sizing:border-box;">
                </div>

                {{-- TAMBAH --}}
                <a href="{{ route('admin.superadmin.user.create') }}" class="btn-tambah"
                    style="background:#2563eb; color:#fff; text-decoration:none; padding:9px 16px; border-radius:10px; font-size:13px; font-weight:700; display:flex; align-items:center; gap:6px; white-space:nowrap; box-sizing:border-box;">
                    <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                        <line x1="12" y1="5" x2="12" y2="19" />
                        <line x1="5" y1="12" x2="19" y2="12" />
                    </svg>
                    Tambah Pengguna
                </a>
            </div>

        </div>

        {{-- TABLE --}}
        <div class="table-wrap" style="overflow-x:auto;">
            <table style="width:100%; border-collapse:collapse; min-width:800px;">
                <thead>
                    <tr style="background:#f8fafc;">
                        <th style="padding:13px 16px; text-align:left; font-size:11px; font-weight:700; color:#94a3b8; letter-spacing:.8px; width:40px;">#</th>
                        <th style="padding:13px 16px; text-align:left; font-size:11px; font-weight:700; color:#94a3b8; letter-spacing:.8px;">PENGGUNA</th>
                        <th style="padding:13px 16px; text-align:left; font-size:11px; font-weight:700; color:#94a3b8; letter-spacing:.8px;">USERNAME</th>
                        <th style="padding:13px 16px; text-align:left; font-size:11px; font-weight:700; color:#94a3b8; letter-spacing:.8px;">ROLE</th>
                        <th style="padding:13px 16px; text-align:left; font-size:11px; font-weight:700; color:#94a3b8; letter-spacing:.8px;">KEGIATAN</th>
                        <th style="padding:13px 16px; text-align:left; font-size:11px; font-weight:700; color:#94a3b8; letter-spacing:.8px;">TERDAFTAR</th>
                        <th style="padding:13px 16px; text-align:center; font-size:11px; font-weight:700; color:#94a3b8; letter-spacing:.8px;">AKSI</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($users as $index => $user)
                    <tr style="border-top:1px solid #f1f5f9; transition:background .15s;" onmouseover="this.style.background='#fafbff'" onmouseout="this.style.background='transparent'">

                        {{-- NO --}}
                        <td style="padding:16px; color:#94a3b8; font-size:13px; font-weight:600;">
                            {{ $loop->iteration }}
                        </td>

                        {{-- USER --}}
                        <td style="padding:16px;">
                            <div style="display:flex; align-items:center; gap:11px;">
                                @php
                                $colors = ['#2563eb','#7c3aed','#059669','#dc2626','#d97706'];
                                $color = $colors[$user->id % count($colors)];
                                $initials = strtoupper(substr($user->name, 0, 2));
                                @endphp
                                <div style="width:38px; height:38px; border-radius:10px; background:{{ $color }}; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; flex-shrink:0;">
                                    {{ $initials }}
                                </div>
                                <div>
                                    <div style="font-weight:700; color:#0f172a; font-size:14px;">{{ $user->name }}</div>
                                    <div style="font-size:12px; color:#94a3b8;">ID #{{ $user->id }}</div>
                                </div>
                            </div>
                        </td>

                        {{-- USERNAME --}}
                        <td style="padding:16px; color:#475569; font-size:13px;">{{ $user->username }}</td>

                        {{-- ROLE --}}
                        <td style="padding:16px;">
                            @if($user->role == 'superadmin')
                            <span style="background:#fef9c3; color:#854d0e; padding:5px 12px; border-radius:999px; font-size:12px; font-weight:700;">Super Admin</span>
                            @elseif($user->role == 'admin')
                            <span style="background:#dbeafe; color:#1d4ed8; padding:5px 12px; border-radius:999px; font-size:12px; font-weight:700;">Administrator</span>
                            @else
                            <span style="background:#dcfce7; color:#15803d; padding:5px 12px; border-radius:999px; font-size:12px; font-weight:700;">Petugas</span>
                            @endif
                        </td>

                        {{-- ACTIVITY --}}
                        <td style="padding:16px;">
                            <div style="display:flex; align-items:center; gap:8px;">
                                <span style="font-weight:700; color:#0f172a; font-size:14px;">{{ $user->activities_count }}</span>
                                <div style="height:4px; width:40px; background:#f1f5f9; border-radius:4px; overflow:hidden;">
                                    @php $maxAct = max($stats['max_activities'] ?? 1, 1); @endphp
                                    <div style="height:100%; background:#3b82f6; border-radius:4px; width:{{ min(($user->activities_count / $maxAct) * 100, 100) }}%;"></div>
                                </div>
                            </div>
                        </td>

                        {{-- CREATED --}}
                        <td style="padding:16px; color:#64748b; font-size:13px;">
                            {{ $user->created_at->translatedFormat('d M Y') }}
                        </td>

                        {{-- ACTION --}}
                        <td style="padding:16px; text-align:center;">
                            <div style="display:flex; justify-content:center; gap:6px;">
                                @php
                                    $editRoute = (session('user')['role'] ?? '') === 'superadmin' ? route('admin.superadmin.user.edit', $user->id) : route('admin.users.edit', $user->id);
                                @endphp
                                <a href="{{ $editRoute }}"
                                    style="background:#eff6ff; color:#2563eb; padding:7px 14px; border-radius:8px; text-decoration:none; font-size:12px; font-weight:700; display:inline-flex; align-items:center; gap:4px;">
                                    <svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                        <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
                                        <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
                                    </svg>
                                    Edit
                                </a>

                                @if($user->role !== 'superadmin')
                                <form action="{{ route('admin.superadmin.user.destroy', $user->id) }}" method="POST"
                                    onsubmit="return confirm('Yakin ingin menghapus pengguna ini?')" style="margin:0;">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit"
                                        style="background:#fef2f2; color:#dc2626; padding:7px 14px; border:none; border-radius:8px; font-size:12px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:4px;">
                                        <svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                            <polyline points="3 6 5 6 21 6" />
                                            <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
                                            <path d="M10 11v6" />
                                            <path d="M14 11v6" />
                                            <path d="M9 6V4h6v2" />
                                        </svg>
                                        Hapus
                                    </button>
                                </form>
                                @endif
                            </div>
                        </td>

                    </tr>
                    @empty
                    <tr>
                        <td colspan="7" style="padding:48px; text-align:center; color:#94a3b8; font-size:14px;">
                            <div style="display:flex; flex-direction:column; align-items:center; gap:8px;">
                                <svg width="36" height="36" fill="none" stroke="#cbd5e1" stroke-width="1.5" viewBox="0 0 24 24">
                                    <circle cx="12" cy="8" r="4" />
                                    <path d="M4 20c0-4 3.6-7 8-7s8 3 8 7" />
                                </svg>
                                Belum ada pengguna terdaftar.
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        {{-- FOOTER / PAGINATION --}}
        <div style="padding:14px 24px; border-top:1px solid #f1f5f9; display:flex; justify-content:space-between; align-items:center;">
            <p style="font-size:13px; color:#94a3b8; margin:0;">
                Menampilkan 1–{{ $users->count() }} dari {{ $users->count() }} pengguna
            </p>

            {{-- Pagination (if using paginate()) --}}
            @if(method_exists($users, 'links'))
            <div>{{ $users->links() }}</div>
            @else
            <div style="display:flex; gap:4px;">
                <button style="width:32px; height:32px; border:1px solid #e2e8f0; background:#fff; border-radius:8px; font-size:13px; color:#94a3b8; cursor:pointer;">&lt;</button>
                <button style="width:32px; height:32px; border:1px solid #2563eb; background:#2563eb; border-radius:8px; font-size:13px; color:#fff; font-weight:700; cursor:pointer;">1</button>
                <button style="width:32px; height:32px; border:1px solid #e2e8f0; background:#fff; border-radius:8px; font-size:13px; color:#94a3b8; cursor:pointer;">&gt;</button>
            </div>
            @endif
        </div>

    </div>

</div>

@endsection