@extends('layouts.app')
@section('title', 'Quản Lý Thành Viên')
@section('content')
<div class="w-full space-y-6">
    <div class="rounded-2xlx border border-neutral-200 bg-white shadow-soft">
        <div class="px-6 py-4 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between border-b border-neutral-100">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-slate-700 to-slate-900 flex items-center justify-center">
                    <i class="ri-group-line text-white text-lg"></i>
                </div>
                <div>
                    <div class="text-lg font-semibold text-neutral-800">Danh Sách Thành Viên</div>
                    <div class="text-xs text-neutral-500">Xem và quản lý tất cả thành viên trong hệ thống</div>
                </div>
            </div>
            <div class="flex items-center gap-2">
                <div class="relative w-full sm:w-64">
                    <i class="ri-search-line absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400 text-base"></i>
                    <input id="admin-users-search" type="text" placeholder="Có không giữ mất thì tìm..." class="w-full rounded-lg border border-neutral-200 bg-neutral-50 pl-10 pr-3 py-2 text-sm text-neutral-700 focus:border-heybank focus:bg-white focus:outline-none focus:ring-0" />
                </div>
                <div class="relative w-full sm:w-48 hidden sm:block ">
                    <select id="admin-users-role" class="w-full appearance-none pl-3 pr-9 py-2 text-sm border border-neutral-200 rounded-lg focus:border-heybank focus:ring-0 bg-neutral-50 text-neutral-700">
                        <option value="">Tất Cả Thành Viên</option>
                        <option value="0">Quản Trị Viên</option>
                        <option value="1">Thành Viên</option>
                    </select>
                    <i class="ri-arrow-down-s-line pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 text-base"></i>
                </div>
                <button id="admin-users-refresh" class="whitespace-nowrap px-4 h-9 inline-flex items-center justify-center text-xs spin rounded-lg border border-neutral-200 bg-white text-neutral-700 hover:bg-neutral-50 transition-colors">
                    <i class="ri-refresh-line text-xs mr-1"></i>
                    Làm Mới
                </button>
            </div>
        </div>
        <div class="p-4 sm:p-6">
            <div class="overflow-y-auto rounded-xl border border-neutral-200">
                <table id="admin-users-table" class="min-w-full">
                    <thead class="bg-gradient-to-r from-neutral-50 to-neutral-100">
                        <tr class="whitespace-nowrap text-left text-xs font-semibold uppercase tracking-wider text-neutral-600">
                            <th class="px-4 py-3">STT</th>
                            <!-- <th class="px-4 py-3">UID</th> -->
                            <th class="px-4 py-3">Tài Khoản</th>
                            <th class="px-4 py-3 text-right">Số Dư</th>
                            <th class="px-4 py-3">Quyền Hạn</th>
                            <th class="px-4 py-3">Trạng Thái</th>
                            <th class="px-4 py-3">Ngày Tham Gia</th>
                            <th class="px-4 py-3 text-right">Thao Tác</th>
                        </tr>
                    </thead>
                    <tbody id="admin-users-table-body" class="bg-white divide-y divide-neutral-200"></tbody>
                </table>
            </div>
            <div id="admin-users-pagination" class="flex flex-col items-center gap-3 mt-6 sm:flex-row sm:items-center sm:justify-between hidden">
                <div id="admin-users-pagination-text" class="text-sm text-neutral-500"></div>
                <div id="admin-users-pagination-buttons" class="flex items-center gap-2"></div>
            </div>
        </div>
    </div>
</div>

<div id="admin-users-edit" class="fixed inset-0 z-[100000009] hidden items-center justify-center bg-black/40 px-4">
    <div class="w-full max-w-[460px] rounded-2xl bg-white shadow-soft overflow-hidden">
        <div class="p-6">
            <div class="flex items-start justify-between">
                <div class="text-[19px] font-semibold flex items-center gap-2">
                    <i class="ri-user-settings-line text-heybank"></i>
                    Sửa Thông Tin TV
                </div>
                <button type="button" class="close-modal h-8 w-8 grid place-content-center rounded-full hover:bg-neutral-100">
                    <i class="ri-close-line text-lg"></i>
                </button>
            </div>
            <form id="admin-users-edit-form" class="mt-5 space-y-4">
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <label class="block text-sm w-full">
                        <span class="text-neutral-600 text-xs uppercase font-semibold">UID</span>
                        <input type="text" name="uid" class="mt-1 w-full rounded-lg border border-neutral-200 bg-neutral-100 px-3 py-2 text-sm text-neutral-600" disabled />
                    </label>
                    <label class="block text-sm w-full">
                        <span class="text-neutral-600 text-xs uppercase font-semibold">User ID</span>
                        <input type="text" name="user_id" class="mt-1 w-full rounded-lg border border-neutral-200 bg-neutral-100 px-3 py-2 text-sm text-neutral-600" readonly />
                    </label>
                </div>
                <label class="block text-sm">
                    <span class="text-neutral-600 text-xs uppercase font-semibold">Tài Khoản</span>
                    <input type="text" name="username" class="mt-1 w-full rounded-lg border border-neutral-200 bg-neutral-100 px-3 py-2 text-sm text-neutral-600" disabled />
                </label>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <label class="block text-sm">
                        <span class="text-neutral-600 text-xs uppercase font-semibold">Quyền Hạn</span>
                        <select name="role" class="mt-1 w-full rounded-lg border border-neutral-200 px-3 py-2 text-sm focus:border-heybank focus:ring-0">
                            <option value="1">Thành Viên</option>
                            <option value="0">Quản Trị Viên</option>
                        </select>
                    </label>
                    <label class="block text-sm">
                        <span class="text-neutral-600 text-xs uppercase font-semibold">Số dư</span>
                        <input type="text" name="balance" data-format-number="," data-max-text="11" class="mt-1 w-full rounded-lg border border-neutral-200 px-3 py-2 text-sm focus:border-heybank focus:ring-0" min="0" step="1" />
                    </label>
                </div>
                <label class="block text-sm">
                    <span class="text-neutral-600 text-xs uppercase font-semibold">Tạo lúc</span>
                    <input type="text" name="created_at" class="mt-1 w-full rounded-lg border border-neutral-200 bg-neutral-100 px-3 py-2 text-sm text-neutral-600" disabled />
                </label>
                <div class="flex gap-3 pt-2">
                    <button type="button" class="close-modal flex-1 h-10 inline-flex items-center justify-center gap-2 rounded-lg border border-neutral-300 bg-white text-neutral-700 hover:bg-neutral-50 transition-colors">
                        <span class="text-sm"><i class="ri-close-line mr-1"></i>Hủy</span>
                    </button>
                    <button type="button" data-submit-form="admin-users-edit-form" class="flex-1 h-10 inline-flex items-center justify-center gap-2 rounded-lg bg-heybank text-white shadow-lg shadow-heybank/30 hover:bg-heybank/90 transition-colors">
                        <span class="text-sm font-semibold"><i class="ri-check-line mr-1"></i>Xác Nhận</span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
<div id="admin-users-balance" class="fixed inset-0 z-[100000009] hidden items-center justify-center bg-black/40 px-4">
    <div class="w-full max-w-[420px] rounded-2xl bg-white shadow-soft overflow-hidden">
        <div class="p-6">
            <div class="flex items-start justify-between">
                <div class="text-[19px] font-semibold flex items-center gap-2 text-emerald-500">
                    <i class="ri-add-line"></i>
                    Cộng Tiền
                </div>
                <button type="button" class="close-modal h-8 w-8 grid place-content-center rounded-full hover:bg-neutral-100">
                    <i class="ri-close-line text-lg"></i>
                </button>
            </div>
            <form id="admin-users-balance-form" class="mt-5 space-y-4">
                <input type="hidden" name="user_id">
                <div class="rounded-xl border border-emerald-100 bg-emerald-50 px-4 py-3 text-sm text-emerald-600" id="admin-users-balance-summary"></div>
                <label class="block text-sm">
                    <span class="text-neutral-600 text-xs uppercase font-semibold">Số tiền cộng</span>
                    <div class="relative">
                        <input type="text" name="amount" min="1" data-max-text="11" data-format-number="," class="mt-1 w-full rounded-lg border border-neutral-200 px-3 py-2 text-sm focus:border-heybank focus:ring-0 pr-10" placeholder="Nhập số tiền (VND)" required />
                        <span class="absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 text-sm">₫</span>
                    </div>
                </label>
                <div class="flex gap-3 pt-2">
                    <button type="button" class="close-modal flex-1 h-10 inline-flex items-center justify-center gap-2 rounded-lg border border-neutral-300 bg-white text-neutral-700 hover:bg-neutral-50 transition-colors">
                        <span class="text-sm"><i class="ri-close-line mr-1"></i>Hủy</span>
                    </button>
                    <button type="button" data-submit-form="admin-users-balance-form" class="flex-1 h-10 inline-flex items-center justify-center gap-2 rounded-lg bg-emerald-500 text-white shadow-lg shadow-emerald-500/30 hover:bg-emerald-600 transition-colors">
                        <span class="text-sm font-semibold"><i class="ri-check-line mr-1"></i>Xác Nhận</span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection