<!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;
        border-bottom: 2px solid #334155;
        }

        .tbl { width: 100%; border-collapse: collapse; font-size: 11px; }
        .tbl th { background: var(--surface-2); color: var(--ink-2); padding: 9px 12px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--border); }
        .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); }

        .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; }

        .form-label-sm { font-size: 11px; font-weight: 600; color: var(--ink-2); margin-bottom: 4px; }
        .form-ctrl {
            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-ctrl: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; }

        .aktif-badge { font-size: 9px; font-weight: 700; padding: 2px 8px; border-radius: 20px; text-transform: uppercase; }
        .aktif-ya  { background: #d1fae5; color: #065f46; }
        .aktif-non { background: #fee2e2; color: #991b1b; }

        .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: 380px; 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)">Kelola nama CS yang muncul di form input pesanan</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 CS
        </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 --}}
<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 #0f172a">
            <div style="font-size:10px;font-weight:700;text-transform:uppercase;color:#0f172a">Total CS</div>
            <div style="font-size:28px;font-weight:700;font-family:var(--mono);color:#0f172a">{{ $csNames->count() }}</div>
            <div style="font-size:10px;color:var(--ink-3);margin-top:2px">Semua CS terdaftar</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">CS Aktif</div>
            <div style="font-size:28px;font-weight:700;font-family:var(--mono);color:#065f46">{{ $csNames->where('aktif', true)->count() }}</div>
            <div style="font-size:10px;color:var(--ink-3);margin-top:2px">Muncul di form input</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 #dc2626">
            <div style="font-size:10px;font-weight:700;text-transform:uppercase;color:#991b1b">CS Nonaktif</div>
            <div style="font-size:28px;font-weight:700;font-family:var(--mono);color:#991b1b">{{ $csNames->where('aktif', false)->count() }}</div>
            <div style="font-size:10px;color:var(--ink-3);margin-top:2px">Tidak muncul di form</div>
        </div>
    </div>
</div>

    {{-- TABEL --}}
    <div class="page-card">
        <div class="page-card-header"><i class="ti ti-users"></i> Daftar Customer Service ({{ $csNames->count() }})</div>
        <table class="tbl">
            <thead>
                <tr>
                    <th>No</th>
                    <th>Nama CS</th>
                    <th style="text-align:center">Status</th>
                    <th>Aksi</th>
                </tr>
            </thead>
            <tbody>
                @forelse($csNames as $i => $cs)
                <tr>
                    <td style="color:var(--ink-3)">{{ $i + 1 }}</td>
                    <td style="font-weight:600; color:var(--ink); font-size:12.5px; letter-spacing:0.2px">{{ $cs->nama }}</td>
                    <td style="text-align:center">
                        <span class="aktif-badge {{ $cs->aktif ? 'aktif-ya' : 'aktif-non' }}">
                            {{ $cs->aktif ? 'Aktif' : 'Nonaktif' }}
                        </span>
                    </td>
                    <td>
                        <div class="d-flex gap-1">
                            <button onclick='openEdit({{ $cs->id }}, "{{ addslashes($cs->nama) }}", {{ $cs->aktif ? "true" : "false" }})'
                                class="btn-sm-act"><i class="ti ti-edit"></i> Edit</button>
                            <button type="button" onclick="openHapus({{ $cs->id }}, '{{ addslashes($cs->nama) }}')"
                                class="btn-sm-act danger"><i class="ti ti-trash"></i> Hapus</button>
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="4" class="text-center py-4" style="color:var(--ink-3)">Belum ada data CS.</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

{{-- MODAL TAMBAH --}}
<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 CS Baru</div>
        <form action="/admin/pengguna" method="POST">
            @csrf
            <div class="mb-4">
                <div class="form-label-sm">Nama CS *</div>
                <input type="text" name="nama" class="form-ctrl" placeholder="Nama lengkap CS" required>
            </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 --}}
<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 CS</div>
        <form id="formEdit" action="" method="POST">
            @csrf @method('PUT')
            <div class="mb-3">
                <div class="form-label-sm">Nama CS *</div>
                <input type="text" name="nama" id="editNama" class="form-ctrl" required>
            </div>
            <div class="mb-4">
                <label style="display:flex;align-items:center;gap:8px;cursor:pointer;font-size:12px;font-weight:600;color:var(--ink-2)">
                    <input type="checkbox" name="aktif" id="editAktif" style="width:15px;height:15px;cursor:pointer">
                    CS Aktif (muncul di dropdown form input pesanan)
                </label>
            </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>

{{-- MODAL HAPUS --}}
<div class="modal-custom" id="modalHapus">
    <div class="modal-box" style="width:380px">
        <div style="display:flex;gap:12px;align-items:flex-start;margin-bottom:20px">
            <div style="flex-shrink:0;width:36px;height:36px;border-radius:50%;background:#fee2e2;display:flex;align-items:center;justify-content:center">
                <i class="ti ti-trash" style="font-size:18px;color:#dc2626"></i>
            </div>
            <div>
                <div style="font-size:14px;font-weight:700;color:var(--ink);margin-bottom:4px">Hapus CS?</div>
                <div style="font-size:12px;color:var(--ink-3);line-height:1.5">
                    Hapus <strong id="hapusNamaCS" style="color:var(--ink-2)"></strong> dari daftar CS?
                </div>
            </div>
        </div>
        <form id="formHapus" action="" method="POST">
            @csrf @method('DELETE')
            <div class="d-flex gap-2 justify-content-end">
                <button type="button" onclick="document.getElementById('modalHapus').classList.remove('show')"
                    class="btn-sm-act" style="padding:6px 14px">Batal</button>
                <button type="submit"
                    style="background:#dc2626;color:#fff;border:none;padding:6px 14px;border-radius:7px;font-size:12px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif">
                    Ya, Hapus
                </button>
            </div>
        </form>
    </div>
</div>

<script>
function openHapus(id, nama) {
    document.getElementById('hapusNamaCS').textContent = nama;
    document.getElementById('formHapus').action = '/admin/pengguna/' + id;
    document.getElementById('modalHapus').classList.add('show');
}

function openEdit(id, nama, aktif) {
    document.getElementById('editNama').value  = nama;
    document.getElementById('editAktif').checked = aktif;
    document.getElementById('formEdit').action = '/admin/pengguna/' + id;
    document.getElementById('modalEdit').classList.add('show');
}
document.querySelectorAll('.modal-custom').forEach(m => {
    m.addEventListener('click', function(e) { if (e.target === this) this.classList.remove('show'); });
});
</script>
</body>
</html>