@extends('admin.layout.app')

@section('title', $pageTitle ?? 'Check Data')

@section('content')
    <div class="container-fluid py-3 {{ Auth::check() && Auth::user()->is_layout_two == 1 ? 'mt-2 p-0' : '' }}">

        <!-- Page Header & Search Form Card -->
        <div class="card shadow-sm border-0 mb-2 bg-white rounded-lg">
            <div class="card-body p-4">
                <form id="searchForm" onsubmit="handleSearch(event)">
                    <div class="row align-items-end">
                        <div class="col-md-5 mb-3 mb-md-0">
                            <label for="queryInput"
                                class="form-label font-weight-bold text-gray-700 d-inline-flex align-items-center mb-1">
                                Từ khóa tìm kiếm
                                <a href="javascript:void(0)" class="text-primary ml-1" data-toggle="collapse"
                                    data-target="#searchKeywordHelp" title="Bấm để xem chú thích tìm kiếm"
                                    style="text-decoration: none; font-size: 0.95rem;">
                                    <i class="fas fa-question-circle"></i>
                                </a>
                            </label>

                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text bg-light border-right-0"><i
                                            class="fas fa-folder text-primary"></i></span>
                                </div>
                                <input type="text" class="form-control border-left-0 pl-0" id="queryInput"
                                    placeholder="Nhập tên app hoặc mã ST (Ví dụ: 185, ST185)..." autocomplete="off"
                                    value="">
                            </div>
                        </div>

                        <div class="col-md-4 mb-3 mb-md-0">
                            <label for="subQueryInput" class="form-label font-weight-bold text-gray-700">Lọc subfolder
                            </label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text bg-light border-right-0"><i
                                            class="fas fa-filter text-info"></i></span>
                                </div>
                                <input type="text" class="form-control border-left-0 pl-0" id="subQueryInput"
                                    placeholder="Ví dụ: Country_Emoji_Maker, Story_Telling..." autocomplete="off">
                            </div>
                        </div>

                        <div class="col-md-3">
                            <div class="d-flex gap-2">
                                <button type="submit" class="btn btn-primary font-weight-bold flex-grow-1 shadow-sm"
                                    id="searchBtn">
                                    <i class="fas fa-search mr-1"></i> Tìm kiếm
                                </button>
                                <button type="button" class="btn btn-light border text-secondary" onclick="resetSearch()"
                                    title="Xóa tìm kiếm">
                                    <i class="fas fa-undo"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Collapsible Help Note -->
                    <div class="collapse mt-3" id="searchKeywordHelp">
                        <div class="alert alert-info  bg-light mb-0 py-2 px-3 shadow-sm">
                            <div class="d-flex justify-content-between align-items-center mb-1">
                                <span class="font-weight-bold text-primary">
                                    </i> Chú thích từ khóa tìm kiếm:
                                </span>
                                <button type="button" class="close p-0 m-0 text-muted" data-toggle="collapse"
                                    data-target="#searchKeywordHelp" aria-label="Đóng"
                                    style="font-size: 1.2rem; line-height: 1;">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="text-dark small" style="line-height: 1.6;">
                                <div>• <strong>Tìm theo mã ST:</strong> Nhập số hiệu hoặc mã ST (Ví dụ: <code>185</code>,
                                    <code>ST185</code>, <code>204</code>...).
                                </div>
                                <div>• <strong>Tìm theo tên App:</strong> Nhập tên thư mục app (Ví dụ:
                                    <code>Country_Emoji_Maker</code>, <code>Story_Telling</code>, <code>Anime</code>...).
                                </div>
                                <div>• <strong>Lọc Subfolder:</strong> Dùng ô lọc bên cạnh để lọc chính xác folder con mong
                                    muốn.</div>
                                <div>• <strong>Lưu ý:</strong> Data không tìm thấy hoặc không thay đổi được vị trí/avatar
                                    liên hệ admin</div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <!-- Summary Stats Bar (Hidden by default) -->
        <div id="summaryBar" class="mb-2" style="display: none;">
            <div
                class="d-flex flex-wrap justify-content-between align-items-center bg-white p-3 rounded-lg shadow-sm border">
                <div class="d-flex align-items-center gap-3">
                    <span class="font-weight-bold text-dark"><i class="fas fa-chart-pie text-primary mr-2"></i>Kết quả cho:
                        <span id="currentQueryText" class="badge badge-primary px-2 py-1">185</span></span>
                    <span class="badge badge-light border text-muted px-3 py-2" id="totalCombinedBadge"><i
                            class="fas fa-box-open mr-1"></i> 0 kết quả</span>
                </div>

                <!-- Domain filter pills -->
                <div class="btn-group btn-group-toggle mt-2 mt-sm-0" data-toggle="buttons">
                    <label class="btn btn-sm btn-outline-primary active" id="btnFilterAll" onclick="filterDomain('all')">
                        <input type="radio" name="domainFilter" checked> Tất cả API
                    </label>
                    <label class="btn btn-sm btn-outline-success" id="btnFilterSite" onclick="filterDomain('site')">
                        <input type="radio" name="domainFilter"> site
                    </label>
                    <label class="btn btn-sm btn-outline-info" id="btnFilterTech" onclick="filterDomain('tech')">
                        <input type="radio" name="domainFilter"> tech
                    </label>
                </div>
            </div>
        </div>

        <!-- Loading Skeleton -->
        <div id="loadingState" class="text-center py-5" style="display: none;">
            <div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
                <span class="sr-only">Đang tải dữ liệu...</span>
            </div>
            <p class="h5 mt-3 text-dark font-weight-bold">Đang tìm kiếm...</p>
            <p class="text-muted small">Vui lòng chờ trong giây lát</p>
        </div>

        <!-- Initial Welcome / Empty State -->
        <div id="initialState" class="text-center py-5 bg-white rounded-lg shadow-sm border mb-4">
            <div class="py-4">
                <i class="fas fa-search-location fa-4x text-muted mb-3 opacity-50"></i>
                <h5 class="text-secondary font-weight-bold">Nhập từ khóa và bấm Tìm kiếm</h5>

            </div>
        </div>

        <!-- Main Results Container -->
        <div id="resultsContainer" style="display: none;">

            <!-- Domain 1: lvtglobal.site Section -->
            <div class="card shadow-sm border-0 mb-2 domain-section" id="sectionSite">
                <div class="card-header bg-gradient-primary text-white d-flex align-items-center justify-content-between py-3 cursor-pointer"
                    data-toggle="collapse" data-target="#siteCollapse" aria-expanded="true">
                    <div class="d-flex align-items-center">
                        <span class="online-indicator bg-success rounded-circle mr-2"
                            style="width: 10px; height: 10px; display: inline-block;"></span>
                        <h5 class="m-0 font-weight-bold">site</h5>
                    </div>
                    <div class="d-flex align-items-center gap-2">
                        <span class="badge badge-light font-weight-bold px-3 py-2 text-primary" id="siteTotalBadge">0 Thư
                            mục</span>
                    </div>
                </div>
                <div class="collapse show" id="siteCollapse">
                    <div class="" id="siteContent">
                        <!-- App folders rendered here -->
                    </div>
                </div>
            </div>

            <!-- Domain 2: lvtglobal.tech Section -->
            <div class="card shadow-sm border-0 mb-2 domain-section" id="sectionTech">
                <div class="card-header bg-gradient-info text-white d-flex align-items-center justify-content-between py-3 cursor-pointer"
                    data-toggle="collapse" data-target="#techCollapse" aria-expanded="true">
                    <div class="d-flex align-items-center">
                        <span class="online-indicator bg-success rounded-circle mr-2"
                            style="width: 10px; height: 10px; display: inline-block;"></span>
                        <h5 class="m-0 font-weight-bold">tech</h5>
                    </div>
                    <div class="d-flex align-items-center gap-2">
                        <span class="badge badge-light font-weight-bold px-3 py-2 text-info" id="techTotalBadge">0 Thư
                            mục</span>
                    </div>
                </div>
                <div class="collapse show" id="techCollapse">
                    <div class="" id="techContent">
                        <!-- App folders rendered here -->
                    </div>
                </div>
            </div>

        </div>

        <!-- Hidden File Input for Avatar Upload -->
        <input type="file" id="globalAvatarFileInput" accept="image/png,image/webp,image/jpeg,image/jpg"
            style="display: none;">
    @endsection

    @push('styles')
        <style>
            .d-none {
                display: none;
            }

            .gap-2 {
                gap: 0.5rem;
            }

            .gap-3 {
                gap: 1rem;
            }

            .bg-gradient-primary {
                background: linear-gradient(135deg, #4e73df 0%, #224abe 100%);
            }

            .bg-gradient-info {
                background: linear-gradient(135deg, #36b9cc 0%, #258391 100%);
            }

            .avatar-card {
                transition: transform 0.2s ease, box-shadow 0.2s ease;
                border: 1px solid #e3e6f0;
            }

            .avatar-card:hover {
                transform: translateY(-4px);
                box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.12) !important;
            }

            .avatar-img-wrapper {
                position: relative;
                width: 100%;
                padding-top: 100%;
                /* 1:1 Aspect Ratio */
                background-color: #f8f9fc;
                overflow: hidden;
            }

            .avatar-img-wrapper img {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                object-fit: contain;
                padding: 8px;
                transition: transform 0.3s ease;
            }

            .avatar-card:hover .avatar-img-wrapper img {
                transform: scale(1.06);
            }

            .btn-upload-avatar {
                position: absolute;
                top: 6px;
                right: 6px;
                z-index: 15;
                opacity: 0;
                transform: scale(0.8);
                transition: all 0.2s ease-in-out;
                width: 30px;
                height: 30px;
                padding: 0;
                display: flex;
                /* use flex for perfect centering */
                align-items: center;
                justify-content: center;
                border-radius: 50%;
                box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
                border: 1px solid rgba(255, 255, 255, 0.8);
                line-height: 0;
                /* remove extra line height */
            }

            .btn-upload-avatar i {
                font-size: 0.9rem;
                line-height: 1;
                display: block;
            }

            .avatar-card:hover .btn-upload-avatar,
            .avatar-img-wrapper:hover .btn-upload-avatar {
                opacity: 1;
                transform: scale(1);
            }

            .btn-upload-avatar:hover {
                transform: scale(1.15) !important;
                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
            }

            .subfolder-badge {
                font-size: 0.75rem;
                letter-spacing: 0.5px;
                min-width: 0;
                /* Cho phép co lại trong flexbox */
                overflow: hidden;
                /* Cần cho text-truncate hoạt động */
                flex-shrink: 1;
                /* Badge này được phép co */
            }

            .level-badge-wrapper {
                flex-shrink: 0;
                /* levelBadge không bao giờ bị co */
            }

            /* Màn rất nhỏ: thu nhỏ font badge */
            @media (max-width: 400px) {

                .subfolder-badge,
                .level-badge-wrapper .badge {
                    font-size: 0.65rem !important;
                    padding: 2px 4px;
                }
            }

            .avatar-card.has-pos {
                border: 1.5px solid #1cc88a;
            }

            .avatar-card.no-pos {
                border: 1.5px dashed #f6c23e;
                background-color: #fffdf5 !important;
            }

            .avatar-card.no-pos:hover {
                border: 2px dashed #e74a3b !important;
                box-shadow: 0 0.5rem 1.25rem rgba(231, 74, 59, 0.22) !important;
            }

            .no-pos-overlay {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(231, 74, 59, 0.92);
                color: #ffffff;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                opacity: 0;
                transition: opacity 0.25s ease-in-out;
                pointer-events: none;
                padding: 8px;
                text-align: center;
                z-index: 10;
            }

            .cursor-pointer {
                cursor: pointer;
            }

            .toggle-chevron {
                transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }

            .collapsed .toggle-chevron {
                transform: rotate(180deg);
            }

            .btn-toggle-expand {
                background: rgba(255, 255, 255, 0.2);
                border: none;
                color: #ffffff;
                width: 32px;
                height: 32px;
                border-radius: 50%;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                transition: background 0.2s ease, transform 0.2s ease;
            }

            .btn-toggle-expand:hover {
                background: rgba(255, 255, 255, 0.4);
                color: #ffffff;
            }

            .btn-toggle-folder {
                background: #f8f9fc;
                border: 1px solid #d1d3e2;
                color: #4e73df;
                width: 32px;
                height: 32px;
                border-radius: 50%;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                transition: background 0.2s ease, color 0.2s ease;
            }

            .btn-toggle-folder:hover {
                background: #4e73df;
                color: #ffffff;
            }

            .avatar-card.no-pos:hover .no-pos-overlay {
                opacity: 1;
            }

            /* View Creator button (Con mắt 👁️) — nằm cạnh nút upload */
            .btn-view-creator {
                position: absolute;
                top: 6px;
                right: 40px;
                z-index: 15;
                opacity: 0;
                transform: scale(0.8);
                transition: all 0.2s ease-in-out;
                width: 30px;
                height: 30px;
                padding: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
                box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
                border: 1px solid rgba(255, 255, 255, 0.8);
                line-height: 0;
                background: #36b9cc;
                color: #ffffff;
            }

            .btn-view-creator i {
                font-size: 0.85rem;
                line-height: 1;
            }

            .avatar-card:hover .btn-view-creator,
            .avatar-img-wrapper:hover .btn-view-creator {
                opacity: 1;
                transform: scale(1);
            }

            .btn-view-creator:hover {
                transform: scale(1.15) !important;
                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
                background: #258391;
                color: #ffffff;
            }

            /* Download button — nằm bên trái nút upload */
            .btn-download-avatar {
                position: absolute;
                top: 6px;
                right: 74px;
                z-index: 15;
                opacity: 0;
                transform: scale(0.8);
                transition: all 0.2s ease-in-out;
                width: 30px;
                height: 30px;
                padding: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
                box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
                border: 1px solid rgba(255, 255, 255, 0.8);
                line-height: 0;
            }

            .btn-download-avatar i {
                font-size: 0.9rem;
                line-height: 1;
            }

            .avatar-card:hover .btn-download-avatar,
            .avatar-img-wrapper:hover .btn-download-avatar {
                opacity: 1;
                transform: scale(1);
            }

            .btn-download-avatar:hover {
                transform: scale(1.15) !important;
                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
            }

            .sortable-active .sortable-item {
                cursor: grab !important;
            }

            .sortable-active .sortable-item:active {
                cursor: grabbing !important;
            }

            .sortable-ghost {
                opacity: 0.4;
                outline: 2px dashed #4e73df;
                border-radius: 8px;
            }

            .sortable-active {
                outline: 2px solid #f6c23e;
                border-radius: 8px;
                padding: 6px;
                background: #fffdf5;
            }
        </style>
    @endpush

    @push('scripts')
        <script>
            let currentData = null;
            var isAdmin = '{{ Auth::user()->role_id == 1 ? '' : '' }}';
            // console.log(isAdmin);

            document.addEventListener('DOMContentLoaded', function() {
                // Tự động tìm kiếm nếu đã có giá trị trong ô search
                const q = $('#queryInput').val().trim();
                if (q) {
                    fetchSearchResults(q, $('#subQueryInput').val().trim());
                }
            });

            function setQuickSearch(val) {
                $('#queryInput').val(val);
                $('#searchForm').submit();
            }

            function resetSearch() {
                $('#queryInput').val('');
                $('#subQueryInput').val('');
                $('#initialState').show();
                $('#resultsContainer').hide();
                $('#summaryBar').hide();
                $('#loadingState').hide();
            }

            function handleSearch(e) {
                e.preventDefault();
                const q = $('#queryInput').val().trim();
                const r = $('#subQueryInput').val().trim();

                if (!q) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Chưa nhập từ khóa',
                        text: 'Vui lòng nhập tên app hoặc mã ST để tìm kiếm!',
                        confirmButtonColor: '#4e73df'
                    });
                    return;
                }

                fetchSearchResults(q, r);
            }

            function fetchSearchResults(q, r) {
                $('#initialState').hide();
                $('#resultsContainer').hide();
                $('#summaryBar').hide();
                $('#loadingState').show();

                const searchUrl = "{{ route('data.search_api') }}";

                $.ajax({
                    url: searchUrl,
                    method: 'GET',
                    data: {
                        q: q,
                        r: r
                    },
                    dataType: 'json',
                    success: function(response) {
                        $('#loadingState').hide();
                        currentData = response;
                        renderResults(response);
                    },
                    error: function(xhr, status, error) {
                        $('#loadingState').hide();
                        Swal.fire({
                            icon: 'error',
                            title: 'Lỗi tìm kiếm',
                            text: 'Không thể tải dữ liệu từ server: ' + error,
                            confirmButtonColor: '#e74a3b'
                        });
                    }
                });
            }

            function renderResults(res) {
                $('#currentQueryText').text(res.query);
                const api1Total = (res.api1 && res.api1.data) ? res.api1.data.length : 0;
                const api2Total = (res.api2 && res.api2.data) ? res.api2.data.length : 0;
                const combinedTotal = api1Total + api2Total;

                $('#countSiteBadge').text(api1Total);
                $('#countTechBadge').text(api2Total);
                $('#totalCombinedBadge').html(
                    `<i class="fas fa-box-open mr-1"></i> Tổng: <strong>${combinedTotal}</strong> thư mục`);
                $('#summaryBar').show();

                // Render Site
                $('#siteTotalBadge').text(`${api1Total} Thư mục`);
                renderApiSourceContent($('#siteContent'), res.api1, 'site', 'primary');

                // Render Tech
                $('#techTotalBadge').text(`${api2Total} Thư mục`);
                renderApiSourceContent($('#techContent'), res.api2, 'tech', 'info');

                $('#resultsContainer').show();
                filterDomain('all');
            }

            function renderApiSourceContent($container, apiSource, domainName, colorTheme) {
                $container.empty();

                if (!apiSource || !apiSource.success) {
                    $container.html(`
                <div class="alert alert-warning border-left-warning shadow-sm m-0">
                    <i class="fas fa-exclamation-triangle mr-2"></i> Không thể truy cập API <strong>${domainName}</strong>: ${apiSource.message || 'Lỗi không xác định'}
                </div>
            `);
                    return;
                }

                if (!apiSource.data || apiSource.data.length === 0) {
                    $container.html(`
                <div class="text-center py-4 bg-white rounded border">
                    <i class="fas fa-folder-open fa-3x text-gray-300 mb-2"></i>
                    <p class="text-muted mb-0">Không tìm thấy dữ liệu phù hợp trên <strong>${domainName}</strong></p>
                </div>
            `);
                    return;
                }

                const mainUrl = apiSource.main_url || `https://${domainName}`;
                const vpsUrl = apiSource.vps_url || '';

                // Iterate folders
                apiSource.data.forEach(function(folder, index) {
                    const avatarCount = folder.avatars ? folder.avatars.length : 0;
                    let hasPosCount = 0;
                    let noPosCount = 0;

                    if (folder.avatars) {
                        folder.avatars.forEach(function(av) {
                            if (av.has_position) {
                                hasPosCount++;
                            } else {
                                noPosCount++;
                            }
                        });
                    }


                    let folderHtml = `
                <div class="card shadow-sm border-0 mb-2 overflow-hidden rounded-lg bg-white">
                    <div class="card-header bg-white border-bottom py-3 d-flex align-items-center justify-content-between flex-wrap gap-2">
                        <div class="d-flex align-items-center">
                            <i class="fas fa-folder-open text-${colorTheme} fa-lg mr-2"></i>
                            <h5 class="m-0 font-weight-bold text-dark">${escapeHtml(folder.name)}</h5>
                        </div>
                        <div class="d-flex align-items-center flex-wrap gap-2">
                            <button class="btn btn-sm btn-primary" onclick="EditLevel(this, '${escapeHtml(folder.name)}')">Edit Level</button>
                            <span class="badge badge-light border text-dark font-weight-normal py-2 px-3">
                                <i class="fas fa-folder mr-1 text-secondary"></i> Subfolders: <strong>${folder.subfolder_count}</strong>
                            </span>
                            <span class="badge badge-success py-2 px-3" title="Có cấu hình Position trong API">
                                <i class="fas fa-check-circle mr-1"></i> Có Position: <strong>${hasPosCount}</strong>
                            </span>
                            ${noPosCount > 0 ? `
                                                                                                                                                            <span class="badge badge-warning text-dark py-2 px-3" title="Chưa có cấu hình Position trong API">
                                                                                                                                                                <i class="fas fa-exclamation-triangle mr-1"></i> Thiếu Position: <strong>${noPosCount}</strong>
                                                                                                                                                            </span>
                                                                                                                                                            ` : ''}
                            <span class="badge badge-${colorTheme} py-2 px-3">
                                <i class="fas fa-images mr-1"></i> Avatars: <strong>${avatarCount}</strong>
                            </span>
                        </div>
                    </div>
                    <div class="card-body p-3">
            `;

                    if (avatarCount === 0) {
                        folderHtml += `
                    <div class="p-3 text-center text-muted small bg-light rounded">
                        Không có file avatar trong thư mục này.
                    </div>
                `;
                    } else {
                        // Split 5/5 (50% / 50% columns)
                        let leftAvatarsHtml = '';
                        let rightAvatarsHtml = '';

                        folder.avatars.forEach(function(item) {
                            const hasPos = (item.has_position === true);
                            const cardClass = hasPos ? 'has-pos' : 'no-pos';

                            const levelBadge = hasPos ?
                                `<span class="badge badge-success font-weight-bold" title="Có Position, Level: ${item.level}"><i class="fas fa-check-circle mr-1"></i>Lvl: ${item.level}</span>` :
                                `<span class="badge badge-warning text-dark font-weight-bold" title="Không có trong API App Position"><i class="fas fa-exclamation-triangle mr-1"></i>No Position</span>`;

                            const overlayHtml = !hasPos ? `
                            <div class="no-pos-overlay">
                                <i class="fas fa-exclamation-circle text-white fa-2x mb-2"></i>
                                <div class="font-weight-bold small">Chưa có Position</div>
                                <div class="tiny text-white-50 mt-1" style="font-size: 0.7rem;">Không có trong API app position</div>
                            </div>
                        ` : '';

                            const mainImgUrl = item.url_main || item.url;
                            const vpsImgUrl = item.url_vps || item.url;

                            // Left avatar card (Main Domain)
                            leftAvatarsHtml += `
                        <div class="col mb-3 sortable-item" data-subfolder="${escapeHtml(item.subfolder)}">
                            <div class="card h-100 avatar-card ${cardClass} rounded-lg bg-white shadow-sm overflow-hidden position-relative">
                                <div class="avatar-img-wrapper cursor-pointer" onclick="openPreviewModal('${escapeHtml(mainImgUrl)}')">
                                    <img src="${escapeHtml(mainImgUrl)}?v=${new Date().getTime()}" alt="${escapeHtml(item.subfolder)}" onerror="this.onerror=null; this.src='https://via.placeholder.com/150?text=No+Image';">
                                    <button type="button" class="btn btn-info btn-view-creator ${isAdmin}" title="Xem bộ tùy biến nhân vật" onclick="event.stopPropagation(); openCharacterCreator('${escapeHtml(folder.name)}', '${escapeHtml(item.subfolder)}', '${escapeHtml(mainImgUrl)}')">
                                        <i class="fas fa-eye fa-xs" style="margin-left: -4px;"></i>
                                    </button>
                                    <button type="button" class="btn btn-primary btn-upload-avatar" title="Upload / Thay thế ảnh" onclick="event.stopPropagation(); triggerUploadAvatar(this, '${escapeHtml(mainImgUrl)}', '${escapeHtml(folder.name)}', '${escapeHtml(item.subfolder)}')">
                                        <i class="fas fa-upload fa-xs" style="margin-left: -4px;"></i>
                                    </button>
                                  
                                    ${overlayHtml}
                                </div>
                                <div class="card-body p-2 d-flex flex-column justify-content-between">
                                    <div>
                                        <div class="d-flex flex-column align-items-start mb-1" style="gap:3px;">
                                            <span class="badge badge-secondary subfolder-badge" title="${escapeHtml(item.subfolder)}" style="max-width:100%; word-break:break-all; white-space:normal;">
                                                <i class="fas fa-folder-minus mr-1"></i>${escapeHtml(item.subfolder)}
                                            </span>
                                            <span class="level-badge-wrapper">${levelBadge}</span>
                                        </div>
                                      
                                    </div>
                                  
                                </div>
                            </div>
                        </div>
                        `;

                            // Right avatar card (VPS IP)
                            rightAvatarsHtml += `
                        <div class="col mb-3 sortable-item" data-subfolder="${escapeHtml(item.subfolder)}">
                            <div class="card h-100 avatar-card ${cardClass} rounded-lg bg-white shadow-sm overflow-hidden position-relative">
                                <div class="avatar-img-wrapper cursor-pointer" onclick="openPreviewModal('${escapeHtml(vpsImgUrl)}')">
                                    <img src="${escapeHtml(vpsImgUrl)}?v=${new Date().getTime()}" alt="${escapeHtml(item.subfolder)}" onerror="this.onerror=null; this.src='https://via.placeholder.com/150?text=No+Image';">
                                    <button type="button" class="btn btn-info btn-view-creator ${isAdmin}" title="Xem bộ tùy biến nhân vật" onclick="event.stopPropagation(); openCharacterCreator('${escapeHtml(folder.name)}', '${escapeHtml(item.subfolder)}', '${escapeHtml(vpsImgUrl)}')">
                                        <i class="fas fa-eye fa-xs" style="margin-left: -4px;"></i>
                                    </button>
                                    <button type="button" class="btn btn-dark btn-upload-avatar" title="Upload / Thay thế ảnh" onclick="event.stopPropagation(); triggerUploadAvatar(this, '${escapeHtml(vpsImgUrl)}', '${escapeHtml(folder.name)}', '${escapeHtml(item.subfolder)}')">
                                        <i class="fas fa-upload fa-xs" style="margin-left: -4px;"></i>
                                    </button>
                                       
                                    ${overlayHtml}
                                </div>
                                <div class="card-body p-2 d-flex flex-column justify-content-between">
                                    <div>
                                        <div class="d-flex flex-column align-items-start mb-1" style="gap:3px;">
                                            <span class="badge badge-secondary subfolder-badge" title="${escapeHtml(item.subfolder)}" style="max-width:100%; word-break:break-all; white-space:normal;">
                                                <i class="fas fa-folder-minus mr-1"></i>${escapeHtml(item.subfolder)}
                                            </span>
                                            <span class="level-badge-wrapper">${levelBadge}</span>
                                        </div>
                                       
                                    </div>
                                   
                                </div>
                            </div>
                        </div>
                        `;
                        });

                        folderHtml += `
                    <div class="row">
                        <!-- Cột Trái (50%): Main Domain -->
                        <div class="col-lg-6 col-12 border-right mb-4 mb-lg-0 pr-lg-3">
                            <div class="d-flex align-items-center justify-content-between bg-primary text-white p-2 rounded-lg mb-3 shadow-sm">
                                <span class="font-weight-bold"> ${escapeHtml(mainUrl)}</span>
                                <span class="badge badge-light text-primary font-weight-bold px-2 py-1">${avatarCount} ảnh</span>
                            </div>
                            <div class="row row-cols-2 row-cols-sm-3 row-cols-md-3 g-2" id="grid-main-${escapeHtml(folder.name)}" data-folder="${escapeHtml(folder.name)}" data-domain="${domainName}" data-main-url="${escapeHtml(folder['data-main-url'] || mainUrl)}">
                                ${leftAvatarsHtml}
                            </div>
                        </div>

                        <!-- Cột Phải (50%): VPS IP -->
                        <div class="col-lg-6 col-12 pl-lg-3">
                            <div class="d-flex align-items-center justify-content-between bg-dark text-white p-2 rounded-lg mb-3 shadow-sm">
                                <span class="font-weight-bold"> ${escapeHtml(vpsUrl)}</span>
                                <span class="badge badge-light text-dark font-weight-bold px-2 py-1">${avatarCount} ảnh</span>
                            </div>
                            <div class="row row-cols-2 row-cols-sm-3 row-cols-md-3 g-2" id="grid-vps-${escapeHtml(folder.name)}" data-folder="${escapeHtml(folder.name)}" data-domain="${domainName}" data-vps-url="${escapeHtml(folder['data-vps-url'] || vpsUrl)}">
                                ${rightAvatarsHtml}
                            </div>
                        </div>
                    </div>
                    `;
                    }

                    folderHtml += `
                    </div>
                </div>
            `;

                    $container.append(folderHtml);
                });
            }

            function filterDomain(domain) {
                if (domain === 'all') {
                    $('#sectionSite').show();
                    $('#sectionTech').show();
                } else if (domain === 'site') {
                    $('#sectionSite').show();
                    $('#sectionTech').hide();
                } else if (domain === 'tech') {
                    $('#sectionSite').hide();
                    $('#sectionTech').show();
                }
            }




            function copyToClipboard(text, btnElement) {
                if (navigator.clipboard && window.isSecureContext) {
                    navigator.clipboard.writeText(text).then(function() {
                        showCopySuccess(btnElement);
                    }).catch(function(err) {
                        fallbackCopyText(text, btnElement);
                    });
                } else {
                    fallbackCopyText(text, btnElement);
                }
            }

            function fallbackCopyText(text, btnElement) {
                const textArea = document.createElement("textarea");
                textArea.value = text;
                textArea.style.position = "fixed";
                textArea.style.left = "-999999px";
                document.body.appendChild(textArea);
                textArea.focus();
                textArea.select();
                try {
                    document.execCommand('copy');
                    showCopySuccess(btnElement);
                } catch (err) {
                    Swal.fire({
                        toast: true,
                        position: 'top-end',
                        icon: 'error',
                        title: 'Không thể sao chép URL',
                        showConfirmButton: false,
                        timer: 2000
                    });
                }
                document.body.removeChild(textArea);
            }

            function showCopySuccess(btnElement) {
                if (btnElement) {
                    const originalText = $(btnElement).html();
                    $(btnElement).html('<i class="fas fa-check mr-1"></i> Đã Copy').removeClass('btn-outline-primary').addClass(
                        'btn-success');
                    setTimeout(function() {
                        $(btnElement).html(originalText).removeClass('btn-success').addClass('btn-outline-primary');
                    }, 1800);
                }

                Swal.fire({
                    toast: true,
                    position: 'top-end',
                    icon: 'success',
                    title: 'Đã sao chép URL!',
                    showConfirmButton: false,
                    timer: 1800
                });
            }

            function openPreviewModal(url) {
                if (url) {
                    window.open(url, '_blank');
                }
            }

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

            function EditLevel(btnEl, folderName) {
                // Toggle kéo thả trên cả 2 grid (main + vps) của folder này
                const mainGrid = document.getElementById('grid-main-' + folderName);
                const vpsGrid = document.getElementById('grid-vps-' + folderName);

                if (!mainGrid && !vpsGrid) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Không tìm thấy grid',
                        text: folderName,
                        confirmButtonColor: '#4e73df'
                    });
                    return;
                }

                const isEditing = mainGrid && mainGrid.classList.contains('sortable-active');

                [mainGrid, vpsGrid].forEach(function(grid) {
                    if (!grid) return;
                    if (isEditing) {
                        if (grid._sortable) {
                            grid._sortable.destroy();
                            grid._sortable = null;
                        }
                        grid.classList.remove('sortable-active');
                        grid.querySelectorAll('.sortable-item').forEach(function(item, idx) {
                            const badge = item.querySelector('.level-num');
                            if (badge) badge.textContent = idx + 1;
                        });
                    } else {
                        grid.classList.add('sortable-active');
                        grid._sortable = Sortable.create(grid, {
                            animation: 150,
                            ghostClass: 'sortable-ghost',
                            onEnd: function(evt) {
                                // Cập nhật badge level grid hiện tại
                                grid.querySelectorAll('.sortable-item').forEach(function(item, idx) {
                                    const badge = item.querySelector('.level-num');
                                    if (badge) badge.textContent = idx + 1;
                                });

                                // Sync thứ tự sang grid kia
                                const otherGrid = (grid === mainGrid) ? vpsGrid : mainGrid;
                                if (!otherGrid) return;

                                // Lấy thứ tự subfolder mới từ grid vừa kéo
                                const newOrder = [];
                                grid.querySelectorAll('.sortable-item').forEach(function(item) {
                                    newOrder.push(item.dataset.subfolder);
                                });

                                // Reorder grid kia theo đúng thứ tự mới
                                newOrder.forEach(function(subfolder) {
                                    const targetItem = otherGrid.querySelector(
                                        `.sortable-item[data-subfolder="${subfolder}"]`);
                                    if (targetItem) {
                                        otherGrid.appendChild(targetItem);
                                    }
                                });

                                // Cập nhật badge level grid kia
                                otherGrid.querySelectorAll('.sortable-item').forEach(function(item, idx) {
                                    const badge = item.querySelector('.level-num');
                                    if (badge) badge.textContent = idx + 1;
                                });
                            }
                        });
                    }
                });

                // Dùng btnEl trực tiếp — không cần querySelector
                const btn = btnEl;
                if (btn) {
                    if (isEditing) {
                        btn.textContent = 'Edit Level';
                        btn.classList.replace('btn-warning', 'btn-primary');

                        // Build JSON và log khi bấm Done
                        const mainDomain = mainGrid ? (mainGrid.dataset.mainUrl || 'site_chinh') : 'site_chinh';
                        const vpsDomain = vpsGrid ? (vpsGrid.dataset.vpsUrl || 'site_phu') : 'site_phu';

                        const result = {
                            folder: folderName,
                            [mainDomain]: {},
                            [vpsDomain]: {}
                        };
                        if (mainGrid) {
                            mainGrid.querySelectorAll('.sortable-item').forEach(function(item, idx) {
                                result[mainDomain][item.dataset.subfolder] = idx + 1;
                            });
                        }
                        if (vpsGrid) {
                            vpsGrid.querySelectorAll('.sortable-item').forEach(function(item, idx) {
                                result[vpsDomain][item.dataset.subfolder] = idx + 1;
                            });
                        }

                        console.log('[EditLevel] New order:', JSON.stringify(result, null, 2));
                        // ajax
                        $.ajax({
                            url: '{{ route('data.edit-level') }}',
                            type: 'POST',
                            contentType: 'application/json',
                            data: JSON.stringify({
                                _token: '{{ csrf_token() }}',
                                level_mapping: result
                            }),
                            success: function(response) {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Đã lưu thứ tự level!',
                                    showConfirmButton: false,
                                    timer: 1500
                                });
                            },
                            error: function(xhr) {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Lỗi khi lưu',
                                    text: xhr.responseJSON?.message || 'Có lỗi xảy ra',
                                    confirmButtonColor: '#4e73df'
                                });
                            }
                        });

                    } else {
                        btn.textContent = 'Done';
                        btn.classList.replace('btn-primary', 'btn-warning');
                    }
                }
            }

            function openCharacterCreator(tableName, subfolder, serverOrImgUrl) {
                let serverBase = '';
                if (serverOrImgUrl) {
                    try {
                        if (serverOrImgUrl.startsWith('http://') || serverOrImgUrl.startsWith('https://')) {
                            const urlObj = new URL(serverOrImgUrl);
                            serverBase = urlObj.origin;
                        } else {
                            serverBase = serverOrImgUrl;
                        }
                    } catch (e) {
                        serverBase = serverOrImgUrl;
                    }
                }

                // Tạo form ẩn và submit bằng POST để mở tab mới có URL sạch (không param)
                const form = document.createElement('form');
                form.method = 'POST';
                form.action = "{{ route('data.character_creator_page') }}";
                form.target = '_blank';

                const csrfInput = document.createElement('input');
                csrfInput.type = 'hidden';
                csrfInput.name = '_token';
                csrfInput.value = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
                form.appendChild(csrfInput);

                const tableInput = document.createElement('input');
                tableInput.type = 'hidden';
                tableInput.name = 'table';
                tableInput.value = tableName;
                form.appendChild(tableInput);

                const posInput = document.createElement('input');
                posInput.type = 'hidden';
                posInput.name = 'position';
                posInput.value = subfolder;
                form.appendChild(posInput);

                const serverInput = document.createElement('input');
                serverInput.type = 'hidden';
                serverInput.name = 'server';
                serverInput.value = serverBase || '';
                form.appendChild(serverInput);

                document.body.appendChild(form);
                form.submit();
                setTimeout(() => document.body.removeChild(form), 1000);
            }

            function triggerDownloadAvatar(btnEl, url) {
                if (!url) return;
                const proxyUrl = '{{ route('data.download_avatar') }}?url=' + encodeURIComponent(url);

                // Tải trực tiếp qua HTTP stream của backend, không dùng blob revoke để tránh làm đứt file
                const a = document.createElement('a');
                a.style.display = 'none';
                a.href = proxyUrl;
                document.body.appendChild(a);
                a.click();
                setTimeout(() => {
                    document.body.removeChild(a);
                }, 1000);
            }

            let currentUploadTarget = {
                url: '',
                app: '',
                subfolder: ''
            };
            let currentUploadImgEl = null; // tham chiếu tới <img> cần update

            function triggerUploadAvatar(btnEl, url, appName, subfolder) {
                currentUploadTarget = {
                    url: url,
                    app: appName,
                    subfolder: subfolder
                };
                // Lưu reference tới <img> trong cùng wrapper với button
                currentUploadImgEl = $(btnEl).closest('.avatar-img-wrapper').find('img')[0] || null;
                $('#globalAvatarFileInput').val('');
                $('#globalAvatarFileInput').click();
            }

            $(document).on('change', '#globalAvatarFileInput', function() {
                const file = this.files[0];
                if (!file) return;

                const formData = new FormData();
                formData.append('avatar', file);
                if (currentUploadTarget.url) {
                    formData.append('url', currentUploadTarget.url);
                }
                formData.append('app', currentUploadTarget.app);
                formData.append('subfolder', currentUploadTarget.subfolder);

                Swal.fire({
                    title: 'Đang tải ảnh lên...',
                    text: 'Vui lòng chờ trong giây lát',
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });

                // Helper: hiển thị kết quả upload + CF purge
                function showUploadResult(cfPurge, customMsg) {
                    let cfMsg = '';
                    if (cfPurge) {
                        if (cfPurge.skipped) {
                            cfMsg = '\u26a0\ufe0f CF Cache: ' + (cfPurge.reason || 'Skipped');
                        } else if (cfPurge.success) {
                            cfMsg = '\u2705 CF Cache: Purge thành công!';
                        } else {
                            const cfErr = cfPurge.error ||
                                (cfPurge.cf_response && cfPurge.cf_response.errors && cfPurge.cf_response.errors[0] &&
                                    cfPurge.cf_response.errors[0].message) ||
                                'Purge thất bại';
                            cfMsg = '\u274c CF Cache: ' + cfErr;
                        }
                    }
                    console.log('[CF Purge]', cfPurge);
                    Swal.fire({
                        icon: 'success',
                        title: 'Upload thành công!',
                        html: (customMsg || 'Avatar đã được cập nhật.') +
                            (cfMsg ? '<br><small class="text-muted mt-1 d-block">' + cfMsg + '<\/small>' : ''),
                        timer: 3000,
                        showConfirmButton: false
                    });
                }

                $.ajax({
                    url: "{{ route('data.upload_avatar') }}",
                    type: 'POST',
                    data: formData,
                    contentType: false,
                    processData: false,
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(res) {
                        if (res.success) {
                            // Update ảnh của box vừa upload ngay
                            if (currentUploadImgEl && res.url) {
                                const freshUrl = res.url + '?t=' + Date.now();
                                $(currentUploadImgEl).attr('src', freshUrl);
                                $(currentUploadImgEl).closest('.avatar-img-wrapper')
                                    .attr('onclick', `openPreviewModal('${res.url}')`);
                            }
                            currentUploadImgEl = null;

                            showUploadResult(res.cf_purge, res.message);
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Upload thất bại',
                                text: res.message || 'Có lỗi xảy ra khi upload avatar.'
                            });
                        }
                    },
                    error: function(xhr) {
                        let msg = 'Có lỗi xảy ra khi gửi file.';
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            msg = xhr.responseJSON.message;
                        }
                        Swal.fire({
                            icon: 'error',
                            title: 'Lỗi upload',
                            text: msg
                        });
                    }
                });
            });
        </script>
        <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.3/Sortable.min.js"></script>
    @endpush