@extends('layouts.app')
@section('title', 'Kelola User - Admin')
@section('content')
<div>
<div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-bottom:2rem">
    <div>
        <h1 class="page-title">Kelola User</h1>
        <p class="page-subtitle">Total {{ $stats['total'] }} user terdaftar</p>
    </div>
    <a href="{{ route('admin.users.create') }}" class="btn btn-primary">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
        Tambah User
    </a>
</div>

{{-- Stats --}}
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.5rem">
    @foreach([['Total',    $stats['total'],  '#DBEAFE','#1A56DB'],['Aktif', $stats['active'],'#D1FAE5','#059669'],['Dinonaktifkan',$stats['banned'],'#FEE2E2','#DC2626'],['Admin',$stats['admin'],'#EDE9FE','#7C3AED']] as [$l,$v,$bg,$c])
    <div style="background:#fff;border:1px solid #E2E8F0;border-radius:12px;padding:1rem;display:flex;align-items:center;gap:10px">
        <div style="width:36px;height:36px;border-radius:9px;background:{{ $bg }};display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:800;color:{{ $c }}">{{ $v }}</div>
        <div style="font-size:.8125rem;color:#64748B">{{ $l }}</div>
    </div>
    @endforeach
</div>

{{-- Filter --}}
<div class="card" style="margin-bottom:1.25rem;padding:1rem 1.25rem">
    <form method="GET" style="display:flex;gap:.75rem;flex-wrap:wrap;align-items:flex-end">
        <div style="flex:1;min-width:200px">
            <label style="font-size:.8rem;font-weight:600;color:#64748B;display:block;margin-bottom:4px">Cari</label>
            <input type="text" name="search" value="{{ request('search') }}" class="form-control" placeholder="Nama atau email..." style="height:38px">
        </div>
        <div>
            <label style="font-size:.8rem;font-weight:600;color:#64748B;display:block;margin-bottom:4px">Role</label>
            <select name="role" class="form-control" style="height:38px;width:120px">
                <option value="">Semua</option>
                <option value="user" {{ request('role')==='user'?'selected':'' }}>User</option>
                <option value="admin" {{ request('role')==='admin'?'selected':'' }}>Admin</option>
            </select>
        </div>
        <div>
            <label style="font-size:.8rem;font-weight:600;color:#64748B;display:block;margin-bottom:4px">Status</label>
            <select name="status" class="form-control" style="height:38px;width:140px">
                <option value="">Semua</option>
                <option value="active" {{ request('status')==='active'?'selected':'' }}>Aktif</option>
                <option value="banned" {{ request('status')==='banned'?'selected':'' }}>Dinonaktifkan</option>
            </select>
        </div>
        <button type="submit" class="btn btn-primary btn-sm" style="height:38px">Filter</button>
        <a href="{{ route('admin.users.index') }}" class="btn btn-secondary btn-sm" style="height:38px">Reset</a>
    </form>
</div>

{{-- Table --}}
<div class="card" style="padding:0">
    <div class="table-wrapper">
        <table class="table">
            <thead>
                <tr>
                    <th>User</th>
                    <th>Role</th>
                    <th style="text-align:center">Analisis</th>
                    <th>Bergabung</th>
                    <th style="text-align:center">Status</th>
                    <th style="text-align:center">Aksi</th>
                </tr>
            </thead>
            <tbody>
                @forelse($users as $u)
                <tr>
                    <td>
                        <div style="display:flex;align-items:center;gap:10px">
                            <div style="width:36px;height:36px;border-radius:9px;background:{{ $u->isAdmin()?'linear-gradient(135deg,#7C3AED,#A855F7)':'linear-gradient(135deg,#1A56DB,#06B6D4)' }};display:flex;align-items:center;justify-content:center;color:white;font-weight:700;font-size:.875rem;flex-shrink:0">
                                {{ strtoupper(substr($u->name,0,1)) }}
                            </div>
                            <div>
                                <div style="font-weight:600;color:#1E293B">{{ $u->name }}</div>
                                <div style="font-size:.75rem;color:#94A3B8">{{ $u->email }}</div>
                            </div>
                        </div>
                    </td>
                    <td>
                        @if($u->isAdmin())
                        <span style="background:#EDE9FE;color:#7C3AED;padding:3px 10px;border-radius:20px;font-size:.75rem;font-weight:700">Admin</span>
                        @else
                        <span style="background:#F1F5F9;color:#64748B;padding:3px 10px;border-radius:20px;font-size:.75rem;font-weight:700">User</span>
                        @endif
                    </td>
                    <td style="text-align:center;font-weight:700;color:#1E293B">{{ $u->analyses_count }}</td>
                    <td style="font-size:.8125rem;color:#64748B">{{ $u->created_at->format('d/m/Y') }}</td>
                    <td style="text-align:center">
                        @if($u->isBanned())
                        <span style="background:#FEE2E2;color:#991B1B;padding:3px 10px;border-radius:20px;font-size:.75rem;font-weight:700">Nonaktif</span>
                        @else
                        <span style="background:#D1FAE5;color:#065F46;padding:3px 10px;border-radius:20px;font-size:.75rem;font-weight:700">Aktif</span>
                        @endif
                    </td>
                    <td style="text-align:center">
                        <div style="display:flex;align-items:center;justify-content:center;gap:6px">
                            <a href="{{ route('admin.users.show',$u->id) }}" style="color:#1A56DB" title="Detail">
                                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                            </a>
                            <a href="{{ route('admin.users.edit',$u->id) }}" style="color:#D97706" title="Edit">
                                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>
                            </a>
                            @if($u->id !== Auth::id())
                                @if($u->isBanned())
                                <form action="{{ route('admin.users.unban',$u->id) }}" method="POST" style="display:inline">@csrf
                                    <button type="submit" style="background:none;border:none;cursor:pointer;color:#059669" title="Aktifkan">
                                        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
                                    </button>
                                </form>
                                @else
                                <button onclick="document.getElementById('ban-{{ $u->id }}').style.display='flex'" style="background:none;border:none;cursor:pointer;color:#DC2626" title="Nonaktifkan">
                                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/></svg>
                                </button>
                                @endif
                                <form action="{{ route('admin.users.destroy',$u->id) }}" method="POST" style="display:inline" onsubmit="return confirm('Hapus user {{ addslashes($u->name) }} beserta semua datanya?')">
                                    @csrf @method('DELETE')
                                    <button type="submit" style="background:none;border:none;cursor:pointer;color:#DC2626" title="Hapus">
                                        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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"/></svg>
                                    </button>
                                </form>
                            @endif
                        </div>
                    </td>
                </tr>

                {{-- Ban Modal --}}
                <tr style="display:none" id="ban-{{ $u->id }}">
                    <td colspan="6" style="background:#FEF2F2;padding:1rem 1.25rem">
                        <form action="{{ route('admin.users.ban',$u->id) }}" method="POST" style="display:flex;align-items:flex-end;gap:.75rem;flex-wrap:wrap">
                            @csrf
                            <div style="flex:1;min-width:200px">
                                <label style="font-size:.8rem;font-weight:600;color:#991B1B;display:block;margin-bottom:4px">Alasan penonaktifan <em>(opsional)</em></label>
                                <input type="text" name="reason" class="form-control" placeholder="Contoh: Melanggar ketentuan penggunaan" style="border-color:#FCA5A5">
                            </div>
                            <button type="submit" class="btn btn-danger btn-sm">Nonaktifkan</button>
                            <button type="button" onclick="document.getElementById('ban-{{ $u->id }}').style.display='none'" class="btn btn-secondary btn-sm">Batal</button>
                        </form>
                    </td>
                </tr>
                @empty
                <tr><td colspan="6" style="text-align:center;padding:3rem;color:#94A3B8">Tidak ada user ditemukan</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($users->hasPages())
    <div style="padding:1rem 1.5rem;border-top:1px solid #E2E8F0">{{ $users->links() }}</div>
    @endif
</div>
</div>
@endsection