@extends('layouts-v2.app')

@section('title', 'Danh sách người dùng')

@section('content')
<div class="bg-gray-50 text-gray-700">
    {{-- Breadcrumb --}}
    <div class="flex items-center gap-2 text-slate-500 text-sm mb-2">
        <a href="{{ route('v2.dashboard') }}" class="hover:text-blue-600 cursor-pointer">Trang chủ</a>
        <i data-lucide="chevron-right" class="w-4 h-4"></i>
        <span>Danh sách người dùng</span>
    </div>
    <h1 class="text-3xl font-bold text-slate-900 mb-6 uppercase">Danh sách người dùng</h1>

    <div class="bg-white rounded shadow-sm border border-gray-200 p-6 mb-6">
        <h3 class="text-lg font-medium mb-4">Tìm kiếm</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <x-floating-input type="email" name="email" label="Email" id="user_email" clearable />
            {{-- Trạng thái (Dropdown) --}}
            <div class="col-span-1 md:col-span-1">
                <x-floating-select 
                    name="user_status"
                    id="user_status"
                    label="Trạng thái"
                    :options="[
                        '' => 'Tất cả',
                        '0' => 'Không hoạt động',
                        '1' => 'Hoạt động'
                    ]"
                />
            </div>
        </div>
        <div class="flex justify-end mt-6">
            <button id="btnFilter" class="bg-blue-500 hover:bg-blue-600 text-white px-16 py-2 rounded font-semibold uppercase tracking-widest transition text-sm">
                LỌC
            </button>
        </div>
    </div>

    <div class="bg-white rounded-md shadow-sm border border-gray-200 overflow-hidden">
        <div class="p-4 border-b border-gray-100">
            {{-- Số lượng hiển thị --}}
            <x-floating-select 
                name="perpage"
                id="perpage"
                class="w-40"
                label="Số lượng hiển thị"
                :options="[
                    '' => '10',
                    '20' => '20',
                    '30' => '30',
                    '50' => '50',
                    '100' => '100'
                ]"
            />
        </div>

        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse">
                <thead class="bg-gray-50 uppercase text-xs font-semibold text-gray-400 border-b border-gray-200">
                    <tr>
                        <th class="px-6 py-4">ID</th>
                        <th class="px-6 py-4">NGƯỜI DÙNG</th>
                        <th class="px-6 py-4">VAI TRÒ</th>
                        <th class="px-6 py-4 text-center">TRẠNG THÁI</th>
                        <th class="px-6 py-4 text-center">HÀNH ĐỘNG</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100" id="tbody-oa-users">
                    <tr>
                        <td colspan="5" class="px-6 py-4 whitespace-nowrap text-center text-sm font-medium text-gray-900">
                            <div class="flex items-center justify-center">
                                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><style>@keyframes loader2{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}</style><path fill="#265BFF" d="M17.179 13.605a.431.431 0 00.279.514l.775.245a.393.393 0 00.499-.268 7.318 7.318 0 00-4.5-8.658.39.39 0 00-.507.255l-.245.775a.43.43 0 00.261.523 5.69 5.69 0 013.438 6.614z" style="animation:loader2 1s cubic-bezier(.63,-.71,.32,1.28) infinite both;transform-origin:center center"/></svg>
                            </div>            
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    {{-- Phân trang --}}
    <div class="mt-6 flex justify-center" id="pagination"></div>


</div>
<script>
    window.routes = {
        getOAUsers: "{{ route('oa-users.getUsers') }}",
        detailOAUser: "{{ route('oa-users.detail' , ['id' => ':id']) }}",
    }
</script>
<script src="{{ asset('js/OA/utils.js') }}"></script>
<script src="{{ asset('js/OA/oa-user.index.js') }}"></script>
@endsection