<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kelola Pengguna — Loves Semprong</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
    <style>
        :root {
            --ink:       #0f172a;
            --ink-2:     #334155;
            --ink-3:     #64748b;
            --surface:   #ffffff;
            --surface-2: #f8fafc;
            --surface-3: #f1f5f9;
            --border:    #e2e8f0;
            --r:         10px;
            --mono:      'JetBrains Mono', monospace;
        }
        * { box-sizing: border-box; }
        body { background: var(--surface-3); font-family: 'Inter', sans-serif; font-size: 12px; color: var(--ink); }

        .page-card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--r);
            overflow: hidden;
            margin-bottom: 16px;
        }
        .page-card-header {
            background: var(--ink);
            color: #fff;
            padding: 10px 16px;
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: .05em;
            display: flex;
            align-items: center;
            gap: 7px;
        }
        .page-card-header i { font-size: 14px; }
        .page-card-body { padding: 16px; }

        .tbl { width: 100%; border-collapse: collapse; font-size: 11px; }
        .tbl th {
            background: var(--ink);
            color: #fff;
            padding: 9px 12px;
            font-size: 10px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: .04em;
            white-space: nowrap;
        }
        .tbl td { padding: 9px 12px; border-bottom: 1px solid var(--surface-3); vertical-align: middle; }
        .tbl tr:last-child td { border-bottom: none; }
        .tbl tr:hover td { background: var(--surface-2); }

        .role-badge {
            display: inline-block;
            padding: 2px 10px;
            border-radius: 20px;
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .03em;
        }
        .role-admin  { background: #fef3c7; color: #92400e; }
        .role-cs     { background: #dbeafe; color: #1e40af; }
        .role-gudang { background: #d1fae5; color: #065f46; }

        .btn-sm-act {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            font-size: 10px;
            font-weight: 600;
            padding: 3px 9px;
            border-radius: 6px;
            border: 1px solid var(--border);
            background: var(--surface);
            color: var(--ink-2);
            cursor: pointer;
            text-decoration: none;
            transition: all .12s;
            font-family: 'Inter', sans-serif;
        }
        .btn-sm-act:hover { background: var(--surface-3); color: var(--ink); }
        .btn-sm-act.danger { color: #dc2626; border-color: #fecaca; }
        .btn-sm-act.danger:hover { background: #fee2e2; }
        .btn-sm-act i { font-size: 12px; }

        .form-label-sm { font-size: 11px; font-weight: 600; color: var(--ink-2); margin-bottom: 4px; }
        .form-control-sm-custom {
            width: 100%;
            padding: 6px 10px;
            border: 1px solid var(--border);
            border-radius: 7px;
            font-size: 12px;
            font-family: 'Inter', sans-serif;
            color: var(--ink);
            background: var(--surface);
            outline: none;
            transition: border-color .15s;
        }
        .form-control-sm-custom:focus { border-color: #1d4ed8; }

        .alert-success-custom {
            background: #f0fdf4;
            color: #166534;
            border: 1px solid #bbf7d0;
            border-radius: 8px;
            padding: 8px 14px;
            font-size: 12px;
            margin-bottom: 14px;
        }
        .alert-danger-custom {
            background: #fef2f2;
            color: #991b1b;
            border: 1px solid #fecaca;
            border-radius: 8px;
            padding: 8px 14px;
            font-size: 12px;
            margin-bottom: 14px;
        }

        /* Modal */
        .modal-custom { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:1050; align-items:center; justify-content:center; }
        .modal-custom.show { display:flex; }
        .modal-box {
            background: var(--surface);
            border-radius: 12px;
            width: 420px;
            max-width: 95vw;
            padding: 20px;
            box-shadow: 0 8px 32px rgba(0,0,0,.18);
        }
        .modal-title { font-size: 14px; font-weight: 700; margin-bottom: 16px; color: var(--ink); }
    </style>
</head>
<body>
@include('layouts.navbar')

<div class="container-fluid px-4 pb-5">

    <div class="d-flex justify-content-between align-items-center mb-4 pt-3">
        <div>
            <h4 style="font-size:17px;font-weight:700;margin:0;color:var(--ink)">Kelola Pengguna</h4>
            <div style="font-size:11px;color:var(--ink-3)">Tambah, edit, dan hapus akun pengguna sistem</div>
        </div>
        <button onclick="document.getElementById('modalTambah').classList.add('show')"
            style="display:inline-flex;align-items:center;gap:6px;background:#0f172a;color:#fff;border:none;padding:7px 14px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif">
            <i class="ti ti-user-plus" style="font-size:14px"></i> Tambah User
        </button>
    </div>

    @if(session('success'))
        <div class="alert-success-custom"><i class="ti ti-circle-check" style="font-size:14px;vertical-align:-2px"></i> {{ session('success') }}</div>
    @endif
    @if(session('error'))
        <div class="alert-danger-custom"><i class="ti ti-alert-circle" style="font-size:14px;vertical-align:-2px"></i> {{ session('error') }}</div>
    @endif

    {{-- STAT CARDS --}}
    @php
        $admins  = $users->where('role','admin')->count();
        $css     = $users->where('role','cs')->count();
        $gudangs = $users->where('role','gudang')->count();
    @endphp
    <div class="row g-3 mb-4">
        <div class="col-4">
            <div style="background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;border-left:4px solid #f59e0b">
                <div style="font-size:10px;font-weight:700;text-transform:uppercase;color:#92400e">Admin</div>
                <div style="font-size:24px;font-weight:700;font-family:var(--mono);color:#92400e">{{ $admins }}</div>
            </div>
        </div>
        <div class="col-4">
            <div style="background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;border-left:4px solid #3b82f6">
                <div style="font-size:10px;font-weight:700;text-transform:uppercase;color:#1e40af">Customer Service</div>
                <div style="font-size:24px;font-weight:700;font-family:var(--mono);color:#1e40af">{{ $css }}</div>
            </div>
        </div>
        <div class="col-4">
            <div style="background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;border-left:4px solid #10b981">
                <div style="font-size:10px;font-weight:700;text-transform:uppercase;color:#065f46">Staff Gudang</div>
                <div style="font-size:24px;font-weight:700;font-family:var(--mono);color:#065f46">{{ $gudangs }}</div>
            </div>
        </div>
    </div>

    {{-- TABEL USER --}}
    <div class="page-card">
        <div class="page-card-header"><i class="ti ti-users"></i> Daftar Pengguna ({{ $users->count() }})</div>
        <table class="tbl">
            <thead>
                <tr>
                    <th>No</th>
                    <th>Nama</th>
                    <th>Email</th>
                    <th>Role</th>
                    <th>Dibuat</th>
                    <th>Aksi</th>
                </tr>
            </thead>
            <tbody>
                @forelse($users as $i => $u)
                <tr>
                    <td style="color:var(--ink-3)">{{ $i + 1 }}</td>
                    <td>
                        <div style="font-weight:600">{{ $u->name }}</div>
                        @if($u->id === auth()->id())
                            <div style="font-size:10px;color:#1d4ed8">Akun kamu</div>
                        @endif
                    </td>
                    <td style="font-family:var(--mono);font-size:10.5px">{{ $u->email }}</td>
                    <td>
                        <span class="role-badge role-{{ $u->role }}">{{ strtoupper($u->role) }}</span>
                    </td>
                    <td style="font-family:var(--mono);font-size:10.5px">{{ $u->created_at ? $u->created_at->format('d/m/Y') : '-' }}</td>
                    <td>
                        <div class="d-flex gap-1">
                            <button onclick='openEditUser({{ $u->id }}, "{{ addslashes($u->name) }}", "{{ $u->email }}", "{{ $u->role }}")'
                                class="btn-sm-act"><i class="ti ti-edit"></i> Edit</button>
                            @if($u->id !== auth()->id())
                            <form action="/admin/users/{{ $u->id }}" method="POST" onsubmit="return confirm('Hapus user {{ $u->name }}?')">
                                @csrf @method('DELETE')
                                <button type="submit" class="btn-sm-act danger"><i class="ti ti-trash"></i> Hapus</button>
                            </form>
                            @endif
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="6" class="text-center py-4" style="color:var(--ink-3)">Belum ada pengguna.</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

{{-- MODAL TAMBAH USER --}}
<div class="modal-custom" id="modalTambah">
    <div class="modal-box">
        <div class="modal-title"><i class="ti ti-user-plus" style="font-size:16px;vertical-align:-2px"></i> Tambah Pengguna Baru</div>
        <form action="/admin/users" method="POST">
            @csrf
            <div class="mb-3">
                <div class="form-label-sm">Nama Lengkap *</div>
                <input type="text" name="name" class="form-control-sm-custom" placeholder="Nama lengkap" required>
            </div>
            <div class="mb-3">
                <div class="form-label-sm">Email *</div>
                <input type="email" name="email" class="form-control-sm-custom" placeholder="email@example.com" required>
            </div>
            <div class="mb-3">
                <div class="form-label-sm">Password *</div>
                <input type="password" name="password" class="form-control-sm-custom" placeholder="Min. 6 karakter" required>
            </div>
            <div class="mb-4">
                <div class="form-label-sm">Role *</div>
                <select name="role" class="form-control-sm-custom" required>
                    <option value="">-- Pilih Role --</option>
                    <option value="admin">Admin</option>
                    <option value="cs">Customer Service</option>
                    <option value="gudang">Staff Gudang</option>
                </select>
            </div>
            <div class="d-flex gap-2 justify-content-end">
                <button type="button" onclick="document.getElementById('modalTambah').classList.remove('show')"
                    class="btn-sm-act" style="padding:6px 14px">Batal</button>
                <button type="submit"
                    style="background:#0f172a;color:#fff;border:none;padding:6px 14px;border-radius:7px;font-size:12px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif">
                    Simpan
                </button>
            </div>
        </form>
    </div>
</div>

{{-- MODAL EDIT USER --}}
<div class="modal-custom" id="modalEdit">
    <div class="modal-box">
        <div class="modal-title"><i class="ti ti-edit" style="font-size:16px;vertical-align:-2px"></i> Edit Pengguna</div>
        <form id="formEdit" action="" method="POST">
            @csrf @method('PUT')
            <div class="mb-3">
                <div class="form-label-sm">Nama Lengkap *</div>
                <input type="text" name="name" id="editName" class="form-control-sm-custom" required>
            </div>
            <div class="mb-3">
                <div class="form-label-sm">Email *</div>
                <input type="email" name="email" id="editEmail" class="form-control-sm-custom" required>
            </div>
            <div class="mb-3">
                <div class="form-label-sm">Password Baru <span style="color:var(--ink-3);font-weight:400">(kosongkan jika tidak diubah)</span></div>
                <input type="password" name="password" class="form-control-sm-custom" placeholder="Min. 6 karakter">
            </div>
            <div class="mb-4">
                <div class="form-label-sm">Role *</div>
                <select name="role" id="editRole" class="form-control-sm-custom" required>
                    <option value="admin">Admin</option>
                    <option value="cs">Customer Service</option>
                    <option value="gudang">Staff Gudang</option>
                </select>
            </div>
            <div class="d-flex gap-2 justify-content-end">
                <button type="button" onclick="document.getElementById('modalEdit').classList.remove('show')"
                    class="btn-sm-act" style="padding:6px 14px">Batal</button>
                <button type="submit"
                    style="background:#0f172a;color:#fff;border:none;padding:6px 14px;border-radius:7px;font-size:12px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif">
                    Perbarui
                </button>
            </div>
        </form>
    </div>
</div>

<script>
function openEditUser(id, name, email, role) {
    document.getElementById('editName').value  = name;
    document.getElementById('editEmail').value = email;
    document.getElementById('editRole').value  = role;
    document.getElementById('formEdit').action = '/admin/users/' + id;
    document.getElementById('modalEdit').classList.add('show');
}
// Tutup modal klik di luar
document.querySelectorAll('.modal-custom').forEach(m => {
    m.addEventListener('click', function(e) {
        if (e.target === this) this.classList.remove('show');
    });
});
</script>
</body>
</html>
