@extends('layouts.app')

@section('content')
<div class="flex-1 space-y-6">
    <!-- Breadcrumb -->
    <div class="flex items-center gap-2 text-slate-500 text-sm mb-2">
        <a href="{{ route('dashboard') }}" class="hover:text-blue-600 transition-colors">Trang chủ</a>
        <i data-lucide="chevron-right" class="w-4 h-4"></i>
        <span class="text-slate-700 font-medium">Quản lý người dùng</span>
    </div>

    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
            <h1 class="text-3xl font-bold text-slate-900 mb-1 flex items-center gap-2">
                <i data-lucide="users" class="w-8 h-8 text-blue-600"></i>
                Quản lý người dùng
            </h1>
            <p class="text-slate-600 text-sm">Quản lý tài khoản, phân quyền vai trò và mã đại sứ trong tổ chức.</p>
        </div>
        <button type="button" onclick="openCreateModal()"
            class="hidden inline-flex items-center gap-2 px-4 py-2.5 bg-blue-600 text-white rounded-xl text-sm font-semibold hover:bg-blue-700 transition-all shadow-md shadow-blue-500/20 active:scale-95">
            <i data-lucide="user-plus" class="w-4 h-4"></i>
            Thêm người dùng
        </button>
    </div>

    <!-- Bộ lọc -->
    <div class="bg-white rounded-xl p-5 border border-slate-200/80 shadow-sm mb-6">
        <form id="filterForm" onsubmit="event.preventDefault(); fetchData(1);" class="space-y-4">
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 items-end">
            <div class="md:col-span-2">
                <label for="search" class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-1.5">Tìm kiếm</label>
                <div class="relative">
                    <i data-lucide="search" class="w-4 h-4 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2"></i>
                    <input type="text" id="search" name="search" placeholder="Nhập tên, email hoặc mã đại sứ..."
                        class="w-full pl-9 pr-3 py-2 bg-white border border-slate-300 rounded-lg text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none shadow-sm transition-all">
                </div>
            </div>
            <div>
                <label for="role_id" class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-1.5">Vai trò</label>
                <select id="role_id" name="role_id"
                    class="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none shadow-sm transition-all">
                    <option value="">-- Tất cả vai trò --</option>
                    @foreach($roles as $role)
                    <option value="{{ $role->id }}">
                        {{ $role->name }}
                    </option>
                    @endforeach
                </select>
            </div>
            <div class="flex items-center gap-2">
                <button
                    class="inline-flex items-center justify-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors shadow-sm w-full sm:w-auto">
                    <i data-lucide="filter" class="w-4 h-4"></i>
                    Lọc
                </button>
                <button type="button" id="resetBtn" onclick="resetFilter()"
                    class="hidden inline-flex items-center justify-center gap-2 px-3 py-2 bg-slate-100 text-slate-600 rounded-lg text-sm font-medium hover:bg-slate-200 transition-colors">
                    <i data-lucide="x" class="w-4 h-4"></i>
                    Xóa lọc
                </button>
            </div>
        </div>
        </form>
    </div>

    <!-- Bảng danh sách người dùng -->
    <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-slate-200">
                <thead class="bg-slate-50/80">
                    <tr>
                        <th class="px-4 py-3 text-left text-xs font-bold text-slate-600 uppercase tracking-wider w-16">STT</th>
                        <th class="px-4 py-3 text-left text-xs font-bold text-slate-600 uppercase tracking-wider">Người dùng</th>
                        <th class="px-4 py-3 text-left text-xs font-bold text-slate-600 uppercase tracking-wider">Email</th>
                        <th class="px-4 py-3 text-left text-xs font-bold text-slate-600 uppercase tracking-wider">Mã đại sứ</th>
                        <th class="px-4 py-3 text-left text-xs font-bold text-slate-600 uppercase tracking-wider">Vai trò</th>
                        <th class="px-4 py-3 text-left text-xs font-bold text-slate-600 uppercase tracking-wider">Ngày tạo</th>
                        <th class="px-4 py-3 text-center text-xs font-bold text-slate-600 uppercase tracking-wider w-32">Thao tác</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-200 bg-white" id="user-tbody">
                    <tr>
                        <td colspan="7" class="px-4 py-12 text-center text-slate-400">
                            <i data-lucide="loader-2" class="w-8 h-8 mx-auto text-blue-500 animate-spin mb-2"></i>
                            <p class="text-sm font-medium">Đang tải dữ liệu...</p>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- Phân trang -->
        <div class="px-6 py-4 border-t border-slate-200 bg-white flex items-center justify-between text-xs text-slate-500 font-medium flex-wrap gap-2" id="pagination-container">
        </div>
    </div>
</div>

<!-- Modal Thêm / Sửa Người dùng -->
<div id="userModal" class="hidden fixed inset-0 z-50 overflow-y-auto" aria-modal="true">
    <div class="fixed inset-0 bg-black bg-opacity-50 transition-opacity" onclick="closeUserModal()"></div>
    <div class="flex min-h-full items-center justify-center p-4">
        <div class="relative bg-white rounded-2xl shadow-xl w-full max-w-lg flex flex-col overflow-hidden">
            <!-- Modal Header -->
            <div class="flex items-center justify-between px-6 py-4 border-b border-slate-200 bg-slate-50">
                <h3 class="text-lg font-bold text-slate-800 flex items-center gap-2" id="modalTitle">
                    <i data-lucide="user-plus" class="w-5 h-5 text-blue-600"></i>
                    Thêm người dùng mới
                </h3>
                <button type="button" class="text-slate-400 hover:text-slate-600 transition-colors p-1 rounded-lg hover:bg-slate-200" onclick="closeUserModal()">
                    <i data-lucide="x" class="w-5 h-5"></i>
                </button>
            </div>

            <!-- Modal Body -->
            <form id="userForm" onsubmit="saveUser(event)" class="p-6 space-y-4">
                <input type="hidden" id="modal_user_id" name="user_id">

                <!-- Họ tên -->
                <div class="space-y-1">
                    <label class="block text-xs font-bold text-slate-700 uppercase tracking-wider">Họ và tên <span class="text-red-500">*</span></label>
                    <input type="text" id="modal_name" name="name" required placeholder="Nguyễn Văn A"
                        class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none transition-all shadow-sm">
                </div>

                <!-- Email -->
                <div class="space-y-1">
                    <label class="block text-xs font-bold text-slate-700 uppercase tracking-wider">
                        Email <span class="text-red-500">*</span>
                        <span id="email_lock_hint" class="text-[11px] font-normal text-slate-400 lowercase hidden">(không thể sửa)</span>
                    </label>
                    <input type="email" id="modal_email" name="email" required placeholder="user@example.com"
                        class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none transition-all shadow-sm">
                </div>

                <!-- Mật khẩu -->
                <div class="space-y-1">
                    <label class="block text-xs font-bold text-slate-700 uppercase tracking-wider">
                        Mật khẩu <span id="password_required_star" class="text-red-500">*</span>
                        <span id="password_hint" class="text-[11px] font-normal text-slate-400 lowercase hidden">(để trống nếu không muốn đổi)</span>
                    </label>
                    <input type="password" id="modal_password" name="password" placeholder="Tối thiểu 6 ký tự"
                        class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none transition-all shadow-sm">
                </div>

                <!-- Mã đại sứ (ref_code) -->
                <div class="space-y-1">
                    <label class="block text-xs font-bold text-slate-700 uppercase tracking-wider">
                        Mã đại sứ
                        <span id="ref_code_lock_hint" class="text-[11px] font-normal text-slate-400 lowercase hidden">(không thể sửa)</span>
                    </label>
                    <input type="text" id="modal_ref_code" name="ref_code" placeholder="VD: DAISU01, CTV_HN..."
                        class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none transition-all shadow-sm">
                    <p class="text-[11px] text-slate-400">Dùng để định danh và theo dõi link chia sẻ UTM của người này.</p>
                </div>

                <!-- Vai trò (Roles) -->
                <div class="space-y-2 pt-2 border-t border-slate-100">
                    <label class="block text-xs font-bold text-slate-700 uppercase tracking-wider">Phân quyền vai trò</label>
                    <div class="grid grid-cols-2 gap-2 max-h-40 overflow-y-auto p-1 bg-slate-50/70 rounded-lg border border-slate-200">
                        @foreach($roles as $role)
                        <label class="flex items-center gap-2 p-2 rounded-md hover:bg-white transition-colors cursor-pointer border border-transparent hover:border-slate-200">
                            <input type="checkbox" name="role_ids[]" value="{{ $role->id }}" class="modal-role-checkbox rounded text-blue-600 focus:ring-blue-500">
                            <span class="text-xs font-medium text-slate-700">{{ $role->name }}</span>
                        </label>
                        @endforeach
                    </div>
                </div>

                <!-- Modal Footer -->
                <div class="pt-4 border-t border-slate-200 flex items-center justify-end gap-3">
                    <button type="button" onclick="closeUserModal()"
                        class="px-4 py-2 text-sm font-medium text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors shadow-sm">
                        Hủy
                    </button>
                    <button type="submit" id="submitBtn"
                        class="inline-flex items-center gap-2 px-5 py-2 bg-blue-600 text-white rounded-lg text-sm font-semibold hover:bg-blue-700 transition-colors shadow-sm">
                        <i data-lucide="check" class="w-4 h-4"></i>
                        <span>Lưu thông tin</span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    window.routes = {
        list: "{{ route('user-management.list') }}",
        store: "{{ route('user-management.store') }}",
        show: "{{ route('user-management.show', ['id' => ':id']) }}",
        update: "{{ route('user-management.update', ['id' => ':id']) }}",
        destroy: "{{ route('user-management.destroy', ['id' => ':id']) }}"
    };
</script>
<script src="{{ asset('js/utils/utils.js') }}"></script>
<script src="{{ asset('js/user-management/user-management.js') }}"></script>
@endsection