@extends('layouts.app')

@section('content')
<div class="flex-1 space-y-6">
    <!-- Header -->
    <div class="flex items-center gap-2 text-slate-500 text-sm mb-2">
        <a href="{{ route('dashboard') }}" class="hover:text-blue-600 cursor-pointer">Trang chủ</a>
        <i data-lucide="chevron-right" class="w-4 h-4"></i>
        <span>Quản lý sản phẩm</span>
    </div>
    <h1 class="text-3xl font-bold text-slate-900 mb-6">Quản lý sản phẩm</h1>

    <!-- Notifications -->
    <div class="message-class">
        @if(session('success'))
        <div class="fixed top-4 right-4 z-50 max-w-md bg-green-500 text-white px-4 py-3 rounded-lg shadow-lg flex items-center gap-3" id="success-flash">
            {{ session('success') }}
            <button type="button" onclick="document.getElementById('success-flash').remove()" class="text-white hover:text-slate-200">
                <i data-lucide="x" class="w-5 h-5"></i>
            </button>
        </div>
        @endif
        @if(session('error'))
        <div class="fixed top-4 right-4 z-50 max-w-md bg-red-500 text-white px-4 py-3 rounded-lg shadow-lg flex items-center gap-3" id="error-flash">
            {{ session('error') }}
            <button type="button" onclick="document.getElementById('error-flash').remove()" class="text-white hover:text-slate-200">
                <i data-lucide="x" class="w-5 h-5"></i>
            </button>
        </div>
        @endif
    </div>

    <!-- Toolbar -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <p class="text-sm text-slate-600">Tổng số sản phẩm: <span class="font-semibold text-slate-900">{{ $campaigns->total() }}</span></p>
        <a href="{{ route('campaigns.create') }}" class="inline-flex items-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">
            <i data-lucide="plus" class="w-4 h-4"></i>
            Tạo sản phẩm
        </a>
    </div>

    <!-- Table -->
    <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">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">STT</th>
                        <th class="px-6 py-3 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">ID</th>
                        <th class="px-6 py-3 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">Mã sản phẩm</th>
                        <th class="px-6 py-3 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">Tên sản phẩm</th>
                        <th class="px-6 py-3 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">Email cấu hình</th>
                        <th class="px-6 py-3 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">Ngày tạo</th>
                        <th class="px-6 py-3 text-center text-xs font-semibold text-slate-600 uppercase tracking-wider">Hành động</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-slate-200">
                    @forelse($campaigns as $index => $campaign)
                    @php
                    $createdAt = \Carbon\Carbon::parse($campaign->created_at)->addHours(7);
                    @endphp
                    <tr id="campaign-{{ $campaign->id }}" class="hover:bg-slate-50 transition-colors">
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-700">{{ ($campaigns->currentPage() - 1) * $campaigns->perPage() + $index + 1 }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-700">{{ $campaign->id }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-slate-900">{{ $campaign->code }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-700">{{ $campaign->name }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-700">{{ $campaign->email ?? '-' }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-700">{{ $createdAt->format('d/m/Y H:i') }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-center">
                            <button type="button"
                                onclick="showModalUsers({{ $campaign->id }}, '{{ $campaign->name }}')"
                                class="inline-flex p-2 text-indigo-600 hover:bg-indigo-50 rounded-lg">
                                <i data-lucide="users" class="w-4 h-4"></i>
                            </button>
                            <a href="{{ route('campaigns.edit', ['id' => $campaign->id]) }}" title="Chỉnh sửa campaign" class="inline-flex p-2 text-green-600 hover:bg-green-50 rounded-lg transition-colors">
                                <i data-lucide="pencil" class="w-4 h-4"></i>
                            </a>
                            <button type="button" class="item-delete btnDeleteCampaign inline-flex p-2 text-red-600 hover:bg-red-50 rounded-lg transition-colors" data-campaign-id="{{ $campaign->id }}" data-campaign-name="{{ $campaign->name }}" onclick="showModalDeleteCampaign(this)" title="Xóa sản phẩm">
                                <i data-lucide="trash-2" class="w-4 h-4"></i>
                            </button>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7" class="px-6 py-6 text-center text-sm text-slate-500">
                            Không có dữ liệu.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <!-- Pagination -->
        @if($campaigns->hasPages())
        <div class="px-4 md:px-6 py-4 border-t border-slate-200 bg-slate-50">
            <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
                <div class="text-xs sm:text-sm text-slate-600 whitespace-nowrap">
                    Hiển thị {{ $campaigns->firstItem() ?? 0 }} - {{ $campaigns->lastItem() ?? 0 }} trong tổng số {{ $campaigns->total() }} kết quả
                </div>
                <div class="flex items-center gap-1.5 sm:gap-2 overflow-x-auto w-full sm:w-auto -mx-4 sm:mx-0 px-4 sm:px-0">
                    @if($campaigns->onFirstPage())
                    <span class="px-2.5 sm:px-3 py-1.5 text-xs sm:text-sm text-slate-400 bg-slate-100 rounded-lg cursor-not-allowed flex-shrink-0">
                        <i data-lucide="chevron-left" class="w-4 h-4 inline-block"></i>
                    </span>
                    @else
                    <a href="{{ $campaigns->appends(request()->all())->previousPageUrl() }}" class="px-2.5 sm:px-3 py-1.5 text-xs sm:text-sm text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors flex-shrink-0">
                        <i data-lucide="chevron-left" class="w-4 h-4 inline-block"></i>
                    </a>
                    @endif
                    @foreach($campaigns->getUrlRange(1, $campaigns->lastPage()) as $page => $url)
                    @if($page == $campaigns->currentPage())
                    <span class="px-2.5 sm:px-3 py-1.5 text-xs sm:text-sm font-medium text-white bg-blue-600 rounded-lg flex-shrink-0 min-w-[2rem] text-center">{{ $page }}</span>
                    @else
                    <a href="{{ $url }}" class="px-2.5 sm:px-3 py-1.5 text-xs sm:text-sm text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors flex-shrink-0 min-w-[2rem] text-center">{{ $page }}</a>
                    @endif
                    @endforeach
                    @if($campaigns->hasMorePages())
                    <a href="{{ $campaigns->appends(request()->all())->nextPageUrl() }}" class="px-2.5 sm:px-3 py-1.5 text-xs sm:text-sm text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors flex-shrink-0">
                        <i data-lucide="chevron-right" class="w-4 h-4 inline-block"></i>
                    </a>
                    @else
                    <span class="px-2.5 sm:px-3 py-1.5 text-xs sm:text-sm text-slate-400 bg-slate-100 rounded-lg cursor-not-allowed flex-shrink-0">
                        <i data-lucide="chevron-right" class="w-4 h-4 inline-block"></i>
                    </span>
                    @endif
                </div>
            </div>
        </div>
        @endif
    </div>
</div>

<!-- Cấu hình luồng trả kết quả exam_final cho phía FE -->
<div id="result-modal" class="fixed inset-0 z-[60] hidden" aria-labelledby="modal-title" role="dialog" aria-modal="true">
    <div class="fixed inset-0 bg-gray-900 bg-opacity-50 backdrop-blur-sm transition-opacity" onclick="closeResultModal()"></div>
    <div class="flex items-center justify-center min-h-screen p-4 text-center sm:p-0">
        <div class="inline-block align-bottom bg-gray-50 rounded-2xl text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:align-middle sm:max-w-5xl sm:w-full flex flex-col" style="max-height: 90vh;">

            <div class="bg-gradient-to-r from-amber-500 to-orange-600 px-6 py-4 flex justify-between items-center shadow-md z-10">
                <h3 class="text-xl font-bold text-white flex items-center gap-2" id="result-modal-title">
                    <i data-lucide="target" class="w-5 h-5 text-amber-100"></i> Cấu hình Kết quả - Campaign
                </h3>
                <button onclick="closeResultModal()" class="text-white hover:text-red-200 transition-colors">
                    <i data-lucide="x" class="w-6 h-6"></i>
                </button>
            </div>

            <div class="p-6 overflow-y-auto flex-1 bg-gray-50" id="result-builder-container">
                <div class="flex justify-between items-center mb-4">
                    <p class="text-sm text-gray-600">Thiết lập tổ hợp đáp án để hệ thống trả về bài test tương ứng.</p>
                    <button type="button" onclick="addRuleCard()" class="flex items-center gap-2 bg-emerald-100 text-emerald-700 hover:bg-emerald-200 font-bold py-2 px-4 rounded-lg transition-colors text-sm">
                        <i data-lucide="plus" class="w-4 h-4"></i> Thêm Quy Tắc Mới
                    </button>
                </div>

                <div id="rules-container" class="space-y-6">
                </div>
            </div>

            <div class="bg-white px-6 py-4 border-t border-gray-200 flex flex-row-reverse gap-3 z-10">
                <button type="button" onclick="saveResultConfig()" class="inline-flex items-center gap-2 justify-center rounded-xl bg-gradient-to-r from-amber-500 to-orange-600 px-5 py-2.5 text-sm font-semibold text-white shadow-md hover:from-amber-600 hover:to-orange-700 transition-all">
                    <i data-lucide="save" class="w-4 h-4"></i> Lưu Cấu Hình
                </button>
                <button type="button" onclick="closeResultModal()" class="inline-flex items-center justify-center rounded-xl border border-gray-300 bg-white px-5 py-2.5 text-sm font-semibold text-gray-700 shadow-sm hover:bg-gray-50 transition-all">
                    Đóng
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Delete Modal -->
<div id="deleteCampaignModal" 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" id="delete-campaign-modal-backdrop"></div>
    <div class="flex min-h-full items-center justify-center p-4">
        <div class="relative bg-white rounded-xl shadow-xl w-full max-w-md overflow-hidden">
            <div class="flex items-center justify-between px-6 py-4 border-b border-slate-200">
                <h3 class="text-lg font-semibold text-slate-900">Xóa sản phẩm</h3>
                <button type="button" class="text-slate-400 hover:text-slate-600 transition-colors" onclick="closeModalDeleteCampaign()">
                    <i data-lucide="x" class="w-5 h-5"></i>
                </button>
            </div>
            <div class="px-6 py-6">
                <form action="" id="deleteCampaignForm" method="post">
                    @csrf
                    @method('DELETE')
                    <input type="hidden" name="campaign_id" id="campaign_id">
                    <p class="text-sm text-slate-600">Bạn có chắc chắn xoá "<strong class="this_item_name text-slate-900">test</strong>" khỏi hệ thống?</p>
                </form>
            </div>
            <div class="flex items-center justify-end gap-3 px-6 py-4 border-t border-slate-200 bg-slate-50">
                <button type="button" 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" onclick="closeModalDeleteCampaign()">Huỷ bỏ</button>
                <button type="button" class="px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700 transition-colors btn-action-delete-campaign">
                    <i data-lucide="trash-2" class="w-4 h-4 inline-block mr-1"></i>
                    Xoá
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Campaign Users Modal (Bảng Phân Trang & Thao tác AJAX) -->
<div id="usersModal" class="hidden fixed inset-0 z-50 overflow-y-auto" aria-modal="true">
    <div class="fixed inset-0 bg-slate-900/60 backdrop-blur-sm transition-opacity" onclick="closeModalUsers()"></div>
    <div class="flex min-h-full items-center justify-center p-3 sm:p-6">
        <div class="relative bg-white rounded-2xl shadow-2xl w-full max-w-6xl flex flex-col max-h-[90vh] border border-slate-200 overflow-hidden">

            <!-- Header -->
            <div class="flex items-center justify-between px-6 py-4 border-b border-slate-200 bg-slate-50">
                <div class="flex items-center gap-2.5">
                    <span class="p-2 rounded-xl bg-indigo-100 text-indigo-700">
                        <i data-lucide="users" class="w-5 h-5"></i>
                    </span>
                    <div>
                        <h3 class="text-base sm:text-lg font-bold text-slate-900 flex items-center gap-2">
                            Quản lý thành viên: <span id="modalCampaignName" class="text-indigo-600"></span>
                            <span id="modalUsersCountBadge" class="px-2.5 py-0.5 text-xs font-semibold rounded-full bg-indigo-100 text-indigo-700 border border-indigo-200">
                                0 thành viên
                            </span>
                        </h3>
                        <p class="text-xs text-slate-500 mt-0.5">Thêm hoặc gỡ quyền truy cập của người dùng đối với sản phẩm này</p>
                    </div>
                </div>
                <button type="button" class="p-2 text-slate-400 hover:text-slate-700 hover:bg-slate-200/60 rounded-xl transition-colors cursor-pointer" onclick="closeModalUsers()">
                    <i data-lucide="x" class="w-5 h-5"></i>
                </button>
            </div>

            <!-- Body Modal (Scrollable) -->
            <div class="flex-1 overflow-y-auto p-6 space-y-6 bg-slate-50/50">

                <!-- Phần 1: Thêm thành viên mới -->
                <div class="bg-white p-4 rounded-xl border border-slate-200 shadow-xs space-y-3">
                    <label class="block text-xs font-bold uppercase tracking-wider text-slate-700">
                        Thêm thành viên mới vào sản phẩm
                    </label>
                    <div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-3">
                        <div class="flex-1 min-w-0">
                            <select id="user_search_select" multiple placeholder="Tìm theo tên hoặc email người dùng..."></select>
                        </div>
                        <button type="button" id="btnAddUsersToCampaign" onclick="addSelectedUsersToCampaign()"
                            class="inline-flex items-center justify-center gap-1.5 px-4 py-2 text-xs sm:text-sm font-semibold text-white bg-indigo-600 hover:bg-indigo-700 rounded-xl transition-all shadow-sm cursor-pointer whitespace-nowrap h-10">
                            <i data-lucide="user-plus" class="w-4 h-4"></i>
                            <span>Thêm thành viên</span>
                        </button>
                    </div>
                </div>

                <!-- Phần 2: Bảng danh sách thành viên hiện có -->
                <div class="bg-white rounded-xl border border-slate-200 shadow-xs overflow-hidden">
                    <!-- Toolbar bảng thành viên -->
                    <div class="px-4 py-3 border-b border-slate-200 flex flex-col sm:flex-row items-center justify-between gap-3 bg-slate-50">
                        <div class="relative w-full sm:w-72">
                            <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="member_search_input"
                                placeholder="Tìm theo tên, email, mã ref..."
                                class="w-full pl-9 pr-8 py-1.5 text-xs bg-white border border-slate-300 rounded-lg focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition-all shadow-xs">
                            <button type="button" id="member_clear_search" class="hidden absolute right-2.5 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 cursor-pointer">
                                <i data-lucide="x-circle" class="w-3.5 h-3.5"></i>
                            </button>
                        </div>

                        <div class="flex items-center gap-2 w-full sm:w-auto justify-end">
                            <button type="button" id="btnBulkRemoveMembers" onclick="bulkRemoveMembers()" style="display: none;"
                                class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold text-red-700 bg-red-50 hover:bg-red-100 border border-red-200 rounded-lg transition-all shadow-xs cursor-pointer">
                                <i data-lucide="user-x" class="w-3.5 h-3.5"></i>
                                <span>Gỡ đã chọn (<span id="bulkRemoveCount">0</span>)</span>
                            </button>

                            <button type="button" onclick="loadCampaignMembers(currentMembersPage)" title="Làm mới danh sách"
                                class="p-1.5 text-slate-500 hover:text-slate-800 hover:bg-slate-100 rounded-lg border border-slate-200 transition-colors cursor-pointer">
                                <i data-lucide="refresh-cw" class="w-3.5 h-3.5"></i>
                            </button>
                        </div>
                    </div>

                    <!-- Table container -->
                    <div class="overflow-x-auto min-h-[220px]">
                        <table class="min-w-full divide-y divide-slate-200 text-left">
                            <thead class="bg-slate-50/80 text-slate-600 text-xs font-bold uppercase tracking-wider">
                                <tr>
                                    <th class="px-4 py-3 w-10 text-center">
                                        <input type="checkbox" id="checkAllMembers" onchange="toggleSelectAllMembers(this)"
                                            class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500 cursor-pointer">
                                    </th>
                                    <th class="px-4 py-3 w-12 text-center">STT</th>
                                    <th class="px-4 py-3">Họ và tên</th>
                                    <th class="px-4 py-3">Email</th>
                                    <th class="px-4 py-3">Mã Ref</th>
                                    <th class="px-4 py-3 w-24 text-center">Thao tác</th>
                                </tr>
                            </thead>
                            <tbody id="campaignMembersTbody" class="divide-y divide-slate-100 text-xs sm:text-sm">
                                <tr>
                                    <td colspan="6" class="px-4 py-12 text-center text-slate-400">
                                        <div class="flex flex-col items-center justify-center gap-2">
                                            <i data-lucide="loader-2" class="w-5 h-5 animate-spin text-indigo-500"></i>
                                            <span>Đang tải danh sách thành viên...</span>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <!-- Table pagination footer -->
                    <div class="px-4 py-3 bg-slate-50 border-t border-slate-200 flex flex-col sm:flex-row items-center justify-between gap-3">
                        <div id="membersPaginationInfo" class="text-xs text-slate-500 font-medium">
                            Đang hiển thị 0 - 0 của 0 thành viên
                        </div>
                        <div id="membersPaginationContainer" class="flex items-center gap-1">
                            <!-- Phân trang render động -->
                        </div>
                    </div>
                </div>

            </div>

            <!-- Footer Modal -->
            <div class="px-6 py-3.5 border-t border-slate-200 bg-white flex justify-end">
                <button type="button" onclick="closeModalUsers()"
                    class="px-4 py-2 text-xs sm:text-sm font-semibold text-slate-700 bg-white border border-slate-300 hover:bg-slate-50 rounded-xl transition-colors shadow-xs cursor-pointer">
                    Đóng
                </button>
            </div>

        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    function showModalDeleteCampaign(button) {
        const campaignId = $(button).attr('data-campaign-id');
        const campaignName = $(button).attr('data-campaign-name');
        $('.this_item_name').text(campaignName);
        const deleteUrl = '{{ route("campaigns.destroy", ["id" => ":id"]) }}'.replace(':id', campaignId);
        $('#deleteCampaignForm').attr('action', deleteUrl);
        $('#deleteCampaignModal').removeClass('hidden');
        if (typeof lucide !== 'undefined') lucide.createIcons();
    }

    function closeModalDeleteCampaign() {
        $('#deleteCampaignModal').addClass('hidden');
    }
    $('#delete-campaign-modal-backdrop').on('click', function() {
        closeModalDeleteCampaign();
    });
    $('.btn-action-delete-campaign').on('click', function() {
        $('#deleteCampaignForm').submit();
    });

    let userTomSelect = null;
    let currentCampaignId = null;
    let currentMembersPage = 1;
    let currentMembersSearch = '';
    let membersSearchTimeout = null;
    let selectedMemberIds = new Set();
    const csrfToken = '{{ csrf_token() }}';

    $(document).ready(function() {
        // Khởi tạo Tom Select cho việc tìm kiếm và chọn thêm mới thành viên
        userTomSelect = new TomSelect('#user_search_select', {
            maxItems: null,
            valueField: 'id',
            labelField: 'name',
            searchField: ['name', 'email', 'ref_code'],
            placeholder: "Nhập tên hoặc email người dùng cần thêm...",
            loadThrottle: 300,
            plugins: ['remove_button', 'clear_button'],

            load: function(query, callback) {
                if (!query.length) return callback();
                const url = `{{ route('api.users.search') }}?q=${encodeURIComponent(query)}&campaign_id=${currentCampaignId || ''}`;

                fetch(url)
                    .then(res => res.json())
                    .then(json => callback(json.data || []))
                    .catch(() => callback());
            },

            render: {
                option: function(data, escape) {
                    return `<div class="py-2 px-3 flex items-center justify-between">
                                <div>
                                    <div class="font-medium text-slate-800">${escape(data.name)}</div>
                                    <div class="text-xs text-slate-500">${escape(data.email || '')}</div>
                                </div>
                                ${data.ref_code ? `<span class="text-[10px] font-mono bg-indigo-50 text-indigo-700 px-1.5 py-0.5 rounded border border-indigo-200 font-bold">${escape(data.ref_code)}</span>` : ''}
                            </div>`;
                },
                item: function(data, escape) {
                    return `<div class="ts-item flex items-center gap-1 font-medium">${escape(data.name)}</div>`;
                }
            },
            controlInput: '<input type="text" autocomplete="off" class="ts-input" />',
            controlClass: 'ts-control custom-ts',
            dropdownClass: 'ts-dropdown custom-ts-dropdown',
        });

        // Tìm kiếm thành viên trong bảng debounce
        $('#member_search_input').on('input', function() {
            const val = $(this).val().trim();
            if (val.length > 0) {
                $('#member_clear_search').removeClass('hidden');
            } else {
                $('#member_clear_search').addClass('hidden');
            }

            clearTimeout(membersSearchTimeout);
            membersSearchTimeout = setTimeout(function() {
                currentMembersSearch = val;
                currentMembersPage = 1;
                loadCampaignMembers(1);
            }, 300);
        });

        $('#member_clear_search').on('click', function() {
            $('#member_search_input').val('').trigger('input');
        });
    });

    function showModalUsers(id, name) {
        currentCampaignId = id;
        currentMembersPage = 1;
        currentMembersSearch = '';
        selectedMemberIds.clear();
        updateBulkRemoveButton();

        $('#modalCampaignName').text(name);
        $('#modalUsersCountBadge').text('Đang tải...');
        $('#member_search_input').val('');
        $('#member_clear_search').addClass('hidden');

        // Xóa lựa chọn cũ trong Tom Select
        if (userTomSelect) {
            userTomSelect.clear();
            userTomSelect.clearOptions();
        }

        $('#usersModal').removeClass('hidden');
        if (typeof lucide !== 'undefined') lucide.createIcons();

        loadCampaignMembers(1);
    }

    function closeModalUsers() {
        $('#usersModal').addClass('hidden');
    }

    function loadCampaignMembers(page = 1) {
        if (!currentCampaignId) return;
        currentMembersPage = page;

        $('#campaignMembersTbody').html(`
            <tr>
                <td colspan="6" class="px-4 py-12 text-center text-slate-400">
                    <div class="flex flex-col items-center justify-center gap-2">
                        <i data-lucide="loader-2" class="w-5 h-5 animate-spin text-indigo-500"></i>
                        <span class="text-xs">Đang tải danh sách thành viên...</span>
                    </div>
                </td>
            </tr>
        `);
        if (typeof lucide !== 'undefined') lucide.createIcons();

        $('#checkAllMembers').prop('checked', false);

        $.ajax({
            url: `/api/campaigns/${currentCampaignId}/users`,
            type: 'GET',
            data: {
                page: currentMembersPage,
                per_page: 10,
                search: currentMembersSearch
            },
            success: function(res) {
                if (res.success) {
                    $('#modalUsersCountBadge').text(`${res.pagination.total} thành viên`);
                    renderCampaignMembersTable(res.data, res.pagination);
                    renderCampaignMembersPagination(res.pagination);
                } else {
                    $('#campaignMembersTbody').html(`<tr><td colspan="6" class="text-center py-8 text-red-500">${res.message || 'Lỗi tải dữ liệu'}</td></tr>`);
                }
            },
            error: function(xhr) {
                $('#campaignMembersTbody').html('<tr><td colspan="6" class="text-center py-8 text-red-500">Không thể kết nối máy chủ!</td></tr>');
            }
        });
    }

    function renderCampaignMembersTable(users, pagination) {
        if (!users || users.length === 0) {
            $('#campaignMembersTbody').html(`
                <tr>
                    <td colspan="6" class="px-4 py-10 text-center text-slate-400">
                        <div class="flex flex-col items-center justify-center gap-1">
                            <i data-lucide="users-2" class="w-8 h-8 text-slate-300"></i>
                            <span class="font-medium text-slate-600 mt-1">Chưa có thành viên nào trong sản phẩm này</span>
                            <span class="text-xs text-slate-400">Tìm kiếm và chọn người dùng ở ô bên trên để thêm.</span>
                        </div>
                    </td>
                </tr>
            `);
            if (typeof lucide !== 'undefined') lucide.createIcons();
            return;
        }

        let html = '';
        const startIndex = (pagination.current_page - 1) * pagination.per_page;

        users.forEach((user, idx) => {
            const stt = startIndex + idx + 1;
            const isChecked = selectedMemberIds.has(user.id) ? 'checked' : '';
            const userNameEsc = escapeAttr(user.name || '');

            html += `
                <tr class="hover:bg-slate-50/80 transition-colors border-b border-slate-100">
                    <td class="px-4 py-3 text-center">
                        <input type="checkbox" value="${user.id}" ${isChecked} onchange="toggleSelectMember(this, ${user.id})"
                            class="member-checkbox rounded border-slate-300 text-indigo-600 focus:ring-indigo-500 cursor-pointer">
                    </td>
                    <td class="px-4 py-3 text-center text-xs text-slate-500 font-medium">${stt}</td>
                    <td class="px-4 py-3">
                        <div class="font-semibold text-slate-800">${escapeHtml(user.name)}</div>
                    </td>
                    <td class="px-4 py-3 text-slate-600">
                        ${escapeHtml(user.email || '-')}
                    </td>
                    <td class="px-4 py-3">
                        ${user.ref_code ? `
                            <span class="inline-flex items-center text-[10px] font-mono font-bold bg-indigo-50 text-indigo-700 px-1.5 py-0.5 rounded border border-indigo-200">
                                ${escapeHtml(user.ref_code)}
                            </span>
                        ` : '<span class="text-slate-400 text-xs">-</span>'}
                    </td>
                    <td class="px-4 py-3 text-center">
                        <button type="button" onclick="removeMemberFromCampaign(${user.id}, '${userNameEsc}')"
                            title="Gỡ khỏi sản phẩm"
                            class="inline-flex items-center gap-1 px-2.5 py-1 text-xs font-semibold text-red-600 hover:text-red-800 hover:bg-red-50 rounded-lg border border-transparent hover:border-red-200 transition-all cursor-pointer">
                            <i data-lucide="user-minus" class="w-3.5 h-3.5"></i>
                            <span>Gỡ</span>
                        </button>
                    </td>
                </tr>
            `;
        });

        $('#campaignMembersTbody').html(html);
        if (typeof lucide !== 'undefined') lucide.createIcons();
    }

    function renderCampaignMembersPagination(meta) {
        const info = $('#membersPaginationInfo');
        const container = $('#membersPaginationContainer');

        if (!meta || meta.total === 0) {
            info.text('Không có thành viên');
            container.html('');
            return;
        }

        info.html(`Hiển thị <span class="font-bold text-slate-800">${meta.from} - ${meta.to}</span> trên <span class="font-bold text-slate-800">${meta.total}</span> thành viên`);

        if (meta.last_page <= 1) {
            container.html('');
            return;
        }

        let html = '';

        // Nút trước
        html += `
            <button onclick="loadCampaignMembers(${meta.current_page - 1})" ${meta.current_page === 1 ? 'disabled' : ''}
                class="p-1.5 rounded-lg border border-slate-200 text-slate-500 hover:bg-slate-100 disabled:opacity-30 disabled:cursor-not-allowed text-xs transition-all cursor-pointer">
                <i data-lucide="chevron-left" class="w-3.5 h-3.5"></i>
            </button>
        `;

        for (let p = 1; p <= meta.last_page; p++) {
            if (p === 1 || p === meta.last_page || Math.abs(p - meta.current_page) <= 1) {
                const isActive = p === meta.current_page;
                html += `
                    <button onclick="loadCampaignMembers(${p})" 
                        class="min-w-[28px] h-7 px-2 rounded-lg text-xs font-bold transition-all cursor-pointer border ${isActive
                        ? 'bg-indigo-600 border-indigo-600 text-white'
                        : 'border-slate-200 text-slate-600 hover:border-indigo-400 hover:text-indigo-600 bg-white'
                    }">
                        ${p}
                    </button>
                `;
            } else if (p === meta.current_page - 2 || p === meta.current_page + 2) {
                html += `<span class="px-1 text-slate-400 text-xs">...</span>`;
            }
        }

        // Nút sau
        html += `
            <button onclick="loadCampaignMembers(${meta.current_page + 1})" ${meta.current_page === meta.last_page ? 'disabled' : ''}
                class="p-1.5 rounded-lg border border-slate-200 text-slate-500 hover:bg-slate-100 disabled:opacity-30 disabled:cursor-not-allowed text-xs transition-all cursor-pointer">
                <i data-lucide="chevron-right" class="w-3.5 h-3.5"></i>
            </button>
        `;

        container.html(html);
        if (typeof lucide !== 'undefined') lucide.createIcons();
    }

    // Thêm các user đã chọn trong TomSelect vào campaign
    function addSelectedUsersToCampaign() {
        if (!currentCampaignId) return;

        const userIds = userTomSelect.getValue();
        if (!userIds || (Array.isArray(userIds) && userIds.length === 0) || userIds === '') {
            Swal.fire({
                icon: 'warning',
                title: 'Chưa chọn người dùng',
                text: 'Vui lòng chọn ít nhất một người dùng cần thêm vào sản phẩm!',
            });
            return;
        }

        const idsArray = Array.isArray(userIds) ? userIds : [userIds];

        const btn = $('#btnAddUsersToCampaign');
        btn.prop('disabled', true).addClass('opacity-75');

        $.ajax({
            url: `/api/campaigns/${currentCampaignId}/users/add`,
            type: 'POST',
            data: {
                _token: csrfToken,
                user_ids: idsArray
            },
            success: function(res) {
                if (res.success) {
                    Swal.fire({
                        icon: 'success',
                        title: res.message || 'Đã thêm thành viên thành công!',
                        timer: 1500,
                        showConfirmButton: false
                    });
                    userTomSelect.clear();
                    userTomSelect.clearOptions();
                    loadCampaignMembers(1);
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Lỗi',
                        text: res.message || 'Không thể thêm thành viên'
                    });
                }
            },
            error: function(xhr) {
                Swal.fire({
                    icon: 'error',
                    title: 'Lỗi',
                    text: xhr.responseJSON?.message || 'Có lỗi xảy ra khi thêm thành viên'
                });
            },
            complete: function() {
                btn.prop('disabled', false).removeClass('opacity-75');
            }
        });
    }

    // Gỡ 1 thành viên khỏi campaign
    function removeMemberFromCampaign(userId, userName) {
        if (!currentCampaignId) return;

        Swal.fire({
            title: 'Gỡ thành viên?',
            text: `Bạn có chắc muốn gỡ thành viên "${userName}" khỏi sản phẩm này?`,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#ef4444',
            cancelButtonColor: '#64748b',
            confirmButtonText: 'Gỡ ngay',
            cancelButtonText: 'Hủy'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: `/api/campaigns/${currentCampaignId}/users/remove`,
                    type: 'POST',
                    data: {
                        _token: csrfToken,
                        user_ids: [userId]
                    },
                    success: function(res) {
                        if (res.success) {
                            Swal.fire({
                                icon: 'success',
                                title: res.message || 'Đã gỡ thành viên!',
                                timer: 1500,
                                showConfirmButton: false
                            });
                            selectedMemberIds.delete(userId);
                            updateBulkRemoveButton();
                            loadCampaignMembers(currentMembersPage);
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Lỗi',
                                text: res.message
                            });
                        }
                    },
                    error: function(xhr) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Lỗi',
                            text: xhr.responseJSON?.message || 'Lỗi khi gỡ thành viên'
                        });
                    }
                });
            }
        });
    }

    // Checkbox selection
    function toggleSelectMember(checkbox, userId) {
        if (checkbox.checked) {
            selectedMemberIds.add(userId);
        } else {
            selectedMemberIds.delete(userId);
        }
        updateBulkRemoveButton();
    }

    function toggleSelectAllMembers(masterCheckbox) {
        const isChecked = masterCheckbox.checked;
        $('.member-checkbox').each(function() {
            const userId = parseInt($(this).val(), 10);
            $(this).prop('checked', isChecked);
            if (isChecked) {
                selectedMemberIds.add(userId);
            } else {
                selectedMemberIds.delete(userId);
            }
        });
        updateBulkRemoveButton();
    }

    function updateBulkRemoveButton() {
        const count = selectedMemberIds.size;
        $('#bulkRemoveCount').text(count);
        if (count > 0) {
            $('#btnBulkRemoveMembers').show();
        } else {
            $('#btnBulkRemoveMembers').hide();
        }
    }

    function bulkRemoveMembers() {
        if (!currentCampaignId || selectedMemberIds.size === 0) return;

        Swal.fire({
            title: `Gỡ ${selectedMemberIds.size} thành viên?`,
            text: `Bạn có chắc muốn gỡ đồng loạt ${selectedMemberIds.size} thành viên đã chọn khỏi sản phẩm này?`,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#ef4444',
            cancelButtonColor: '#64748b',
            confirmButtonText: 'Gỡ tất cả',
            cancelButtonText: 'Hủy'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: `/api/campaigns/${currentCampaignId}/users/remove`,
                    type: 'POST',
                    data: {
                        _token: csrfToken,
                        user_ids: Array.from(selectedMemberIds)
                    },
                    success: function(res) {
                        if (res.success) {
                            Swal.fire({
                                icon: 'success',
                                title: res.message || 'Đã gỡ các thành viên thành công!',
                                timer: 1500,
                                showConfirmButton: false
                            });
                            selectedMemberIds.clear();
                            updateBulkRemoveButton();
                            loadCampaignMembers(1);
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Lỗi',
                                text: res.message
                            });
                        }
                    },
                    error: function(xhr) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Lỗi',
                            text: xhr.responseJSON?.message || 'Có lỗi khi gỡ thành viên'
                        });
                    }
                });
            }
        });
    }

    function escapeHtml(str) {
        if (!str) return '';
        return String(str)
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#039;');
    }

    function escapeAttr(str) {
        if (!str) return '';
        return String(str)
            .replace(/\\/g, '\\\\')
            .replace(/"/g, '&quot;')
            .replace(/'/g, "\\'")
            .replace(/\n/g, ' ')
            .replace(/\r/g, '');
    }

    // Đóng modal khi nhấn phím ESC
    $(document).keydown(function(e) {
        if (e.keyCode === 27) {
            closeModalUsers();
        }
    });


    if (typeof lucide !== 'undefined') lucide.createIcons();
</script>
@endsection