@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">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">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 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">{{ $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="5" 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 -->
<div id="usersModal" class="hidden fixed inset-0 z-50 overflow-y-auto">
    <div class="fixed inset-0 bg-black bg-opacity-50 transition-opacity" onclick="closeModalUsers()"></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-lg">
            <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">Quản lý thành viên: <span id="modalCampaignName"></span></h3>
                <button type="button" onclick="closeModalUsers()"><i data-lucide="x" class="w-5 h-5"></i></button>
            </div>
            
            <form id="syncUserForm" method="POST">
                @csrf
                <div class="px-6 py-6" style="min-height: 150px;">
                    <label class="block text-sm font-medium text-slate-700 mb-2">Tìm và thêm thành viên</label>
                    <select id="user_search_select" name="user_ids[]" multiple placeholder="Nhập tên hoặc email..."></select>
                </div>
                
                <div class="flex items-center justify-end gap-3 px-6 py-4 border-t border-slate-200 bg-slate-50 rounded-b-xl">
                    <button type="button" onclick="closeModalUsers()" class="px-4 py-2 border rounded-lg">Đóng</button>
                    <button class="px-4 py-2 bg-blue-600 text-white rounded-lg">Lưu</button>
                </div>
            </form>
        </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;
    let currentCampaignId = null;

    $(document).ready(function() {
        // Khởi tạo Tom Select 1 lần duy nhất
        userTomSelect = new TomSelect('#user_search_select', {
            maxItems: null,
            valueField: 'id',
            labelField: 'name',
            searchField: ['email'],
            placeholder: "Tìm người dùng...",
            loadThrottle: 300,
            plugins: ['remove_button', 'clear_button', 'checkbox_options'],
            
            load: function(query, callback) {
                if (!query.length) return callback();
                const url = `{{ route('api.users.search') }}?q=${encodeURIComponent(query)}`;
                
                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 gap-2">
                                <div class="font-medium">${escape(data.name)}</div>
                                <div class="text-xs text-gray-500">${escape(data.email || '')}</div>
                            </div>`;
                },
                item: function(data, escape) {
                    return `<div class="ts-item">${escape(data.name)}</div>`;
                }
            },
            // Class Tailwind cho đồng bộ
            controlInput: '<input type="text" autocomplete="off" class="ts-input" />',
            controlClass: 'ts-control custom-ts',
            dropdownClass: 'ts-dropdown custom-ts-dropdown',
        });
    });

    function showModalUsers(id, name) {
        currentCampaignId = id;
        $('#modalCampaignName').text(name);
        $('#syncUserForm').attr('action', `/campaigns/${id}/users/sync`);
        
        // Xóa dữ liệu cũ trong Tom Select
        userTomSelect.clear();
        userTomSelect.clearOptions();

        // Load các user hiện tại của campaign này qua API
        fetch(`/api/campaigns/${id}/users`)
            .then(res => res.json())
            .then(json => {
                const users = json.data;
                // Add các user hiện tại vào option và select luôn
                userTomSelect.addOptions(users);
                users.forEach(u => userTomSelect.addItem(u.id));
                
                $('#usersModal').removeClass('hidden');
                if (typeof lucide !== 'undefined') lucide.createIcons();
            });
    }

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

    // Đóng modal khi nhấn phím ESC
    $(document).keydown(function(e) {
        if (e.keyCode === 27) { // 27 là mã phím ESC
            $('[id^="usersModal-"]').addClass('hidden');
        }
    });

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