@extends('layouts.admin')
@section('title', 'Manajemen Pengguna')
@section('header', 'Manajemen 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; }
    .section-label { font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:500; }
    .badge { font-size:10px; font-weight:600; padding:3px 9px; border-radius:20px; display:inline-block; white-space:nowrap; }
    .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-gray { background:#f3f0eb; color:var(--muted); }
    .badge-purple { background:#ede9fe; color:#5b21b6; }
    .badge-red { background:#fef2f2; color:#dc2626; }

    .filter-bar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
    .filter-group { display:flex; gap:8px; }
    .el-input { border:1px solid var(--border); border-radius:10px; padding:9px 14px; font-size:13px; background:#fff; color:var(--navy); outline:none; font-family:'Inter',sans-serif; transition:border-color .15s; }
    .el-input:focus { border-color:var(--gold-2); }
    .btn-filter { background:var(--cream-2); border:1px solid var(--border); border-radius:10px; padding:9px 16px; font-size:12px; font-weight:500; color:var(--navy); cursor:pointer; font-family:'Inter',sans-serif; }
    .btn-filter:hover { background:#ece8de; }
    .btn-primary { display:inline-flex; align-items:center; gap:7px; background:var(--navy); color:#fff; font-size:12px; font-weight:500; padding:9px 18px; border-radius:10px; text-decoration:none; border:none; cursor:pointer; font-family:'Inter',sans-serif; }
    .btn-primary:hover { opacity:.87; }

    .alert-success { background:#d1fae5; border:1px solid #a7f3d0; border-radius:12px; padding:12px 16px; font-size:13px; color:#065f46; margin-bottom:20px; }

    /* Table */
    .panel { background:#fff; border:1px solid var(--border); border-radius:16px; overflow:hidden; }
    .el-table { width:100%; border-collapse:collapse; }
    .el-table th { font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:600; padding:11px 20px; text-align:left; background:var(--cream); border-bottom:1px solid var(--border); }
    .el-table th.center { text-align:center; }
    .el-table td { padding:13px 20px; font-size:13px; border-bottom:1px solid #f5f2ec; vertical-align:middle; }
    .el-table tr:last-child td { border-bottom:none; }
    .el-table tr:hover td { background:#faf8f4; }

    .av { width:34px; height:34px; border-radius:9px; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; flex-shrink:0; }

    .action-group { display:flex; align-items:center; justify-content:flex-end; gap:2px; }
    .act-btn { font-size:11px; font-weight:500; padding:5px 10px; border-radius:7px; text-decoration:none; cursor:pointer; font-family:'Inter',sans-serif; border:none; background:transparent; transition:background .12s; display:inline-block; }
    .act-btn:hover { background:var(--cream-2); color:var(--navy); }
    .act-btn.blue { color:#3b82f6; }
    .act-btn.blue:hover { background:#eff6ff; }
    .act-btn.amber { color:#d97706; }
    .act-btn.amber:hover { background:#fffbeb; }
    .act-btn.red { color:#dc2626; }
    .act-btn.red:hover { background:#fef2f2; }

    .form-inline { display:inline; }
    .empty-row td { text-align:center; padding:48px; color:var(--muted); font-size:13px; }
</style>

@if(session('success'))
<div class="alert-success"><i class="fa fa-check-circle" style="margin-right:6px;"></i>{{ session('success') }}</div>
@endif

<div class="filter-bar">
    <form method="GET" class="filter-group">
        <input name="search" value="{{ request('search') }}" placeholder="Cari nama atau email..." class="el-input" style="width:240px;">
        <button type="submit" class="btn-filter"><i class="fa fa-magnifying-glass" style="font-size:11px; margin-right:5px;"></i>Cari</button>
    </form>
    <a href="{{ route('admin.users.create') }}" class="btn-primary">
        <i class="fa fa-plus" style="font-size:10px;"></i> Tambah Pengguna
    </a>
</div>

<div class="panel">
    <table class="el-table">
        <thead><tr>
            <th>Pengguna</th>
            <th>NIS / NIP</th>
            <th class="center">Role</th>
            <th class="center">Status</th>
            <th class="center">Bergabung</th>
            <th style="text-align:right; padding-right:20px;">Aksi</th>
        </tr></thead>
        <tbody>
            @forelse($users as $user)
            @php
                $roleColors = ['admin'=>'badge-navy','guru'=>'badge-gold','siswa'=>'badge-green'];
                $roleKey = strtolower($user->role?->name ?? 'siswa');
            @endphp
            <tr>
                <td>
                    <div style="display:flex; align-items:center; gap:10px;">
                        <div class="av">{{ strtoupper(substr($user->name, 0, 1)) }}</div>
                        <div>
                            <div style="font-weight:500; color:var(--navy);">{{ $user->name }}</div>
                            <div style="font-size:11px; color:var(--muted);">{{ $user->email }}</div>
                        </div>
                    </div>
                </td>
                <td style="color:var(--muted);">{{ $user->nis_nip ?? '—' }}</td>
                <td style="text-align:center;">
                    <span class="badge {{ $roleColors[$roleKey] ?? 'badge-gray' }}">{{ ucfirst($roleKey) }}</span>
                </td>
                <td style="text-align:center;">
                    <span class="badge {{ $user->is_active ? 'badge-green' : 'badge-red' }}">
                        {{ $user->is_active ? 'Aktif' : 'Nonaktif' }}
                    </span>
                </td>
                <td style="text-align:center; font-size:12px; color:var(--muted);">{{ $user->created_at->format('d M Y') }}</td>
                <td>
                    <div class="action-group">
                        <a href="{{ route('admin.users.show', $user) }}" class="act-btn blue">Detail</a>
                        <a href="{{ route('admin.users.edit', $user) }}" class="act-btn">Edit</a>
                        <form class="form-inline" method="POST" action="{{ route('admin.users.toggle', $user) }}">
                            @csrf @method('PATCH')
                            <button type="submit" class="act-btn amber">{{ $user->is_active ? 'Nonaktifkan' : 'Aktifkan' }}</button>
                        </form>
                        <form class="form-inline" method="POST" action="{{ route('admin.users.destroy', $user) }}"
                              onsubmit="return confirm('Hapus pengguna ini?')">
                            @csrf @method('DELETE')
                            <button type="submit" class="act-btn red">Hapus</button>
                        </form>
                    </div>
                </td>
            </tr>
            @empty
            <tr class="empty-row">
                <td colspan="6">
                    <i class="fa fa-users" style="font-size:24px; display:block; margin-bottom:8px; opacity:.3;"></i>
                    Belum ada data pengguna.
                </td>
            </tr>
            @endforelse
        </tbody>
    </table>
</div>
<div style="margin-top:16px;">{{ $users->links() }}</div>

@endsection