@extends('layouts.template.main')

@push('styles')
    <link rel="stylesheet" href="{{ asset('css/project-follow.css') }}">
    <style>
        /* ── Supervisor Tabs ── */
        .supervisor-tabs-wrap {
            border-bottom: 0;
        }

        .nav-tabs-supervisor {
            gap: 4px;
            flex-wrap: nowrap;
            overflow-x: auto;
            scrollbar-width: none;
            border-bottom: 2px solid #dee2e6;
        }

        .nav-tabs-supervisor::-webkit-scrollbar {
            display: none;
        }

        .nav-tabs-supervisor .nav-link {
            font-size: 12.5px;
            font-weight: 500;
            color: #6c757d;
            padding: 6px 14px;
            border-radius: 8px 8px 0 0;
            border: 1px solid transparent;
            border-bottom: none;
            white-space: nowrap;
            display: flex;
            align-items: center;
            gap: 5px;
            transition: color .15s, background .15s;
        }

        .nav-tabs-supervisor .nav-link:hover {
            color: #343a40;
            background: #f8f9fa;
        }

        .nav-tabs-supervisor .nav-link.active {
            color: #0d6efd;
            font-weight: 700;
            background: #fff;
            border-color: #dee2e6 #dee2e6 #fff;
        }

        .sv-tab-avatar {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #6366f1;
            color: #fff;
            font-size: 10px;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .nav-link.active .sv-tab-avatar {
            background: #0d6efd;
        }

        .sv-tab-role {
            font-size: 10px;
            padding: 1px 6px;
            border-radius: 20px;
            background: #e9ecef;
            color: #6c757d;
            font-weight: 600;
        }
    </style>
@endpush
@section('title', 'Project Follow LVT')
@section('content')
    @php
        $designersMap = collect($designers ?? [])->keyBy('id');
        $developersMap = collect($developers ?? [])->keyBy('id');
        $testersMap = collect($testers ?? [])->keyBy('id');
        $mktMap = collect($mktUsers ?? [])->keyBy('id');
        $dataMap = collect($dataUsers ?? [])->keyBy('id');
    @endphp
    {{-- Các biến $canEdit*, $canCreateApp, $canEditApp, $canDeleteApp được truyền từ AppAndroidController::index() --}}
    <main>
        <header class="page-header page-header-compact page-header-light border-bottom bg-white mb-1">
            <div class="container-full px-4">
                <div class="page-header-content">
                    <div class="row align-items-center justify-content-between pt-1">
                        <div class="col-auto py-2">
                            <h1 class="page-header-title">
                                <div class="page-header-icon">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                        stroke-linejoin="round" class="feather feather-bar-chart">
                                        <line x1="12" y1="20" x2="12" y2="10"></line>
                                        <line x1="18" y1="20" x2="18" y2="4"></line>
                                        <line x1="6" y1="20" x2="6" y2="16"></line>
                                    </svg>
                                </div>
                                Project Follow LVT
                            </h1>
                        </div>
                        <div class="col-auto py-2">
                            <div class="d-flex gap-2 align-items-center">
                                <form method="GET" action="{{ route('app_follow') }}"
                                    class="d-flex align-items-center m-0" id="search-app-form">
                                    <div class="input-group input-group-joined" style="min-width: 320px;">
                                        <button type="submit"
                                            class="input-group-text bg-white border-end-0 btn p-0 px-3 text-muted"
                                            title="Tìm kiếm (hoặc nhấn Enter)" style="border: none; cursor: pointer;">
                                            <i class="fa fa-search"></i>
                                        </button>
                                        <input type="text" name="search" id="input-search-app"
                                            class="form-control border-start-0 ps-0"
                                            placeholder="Tìm kiếm STT, App name, Package... (Enter)"
                                            value="{{ request('search') }}" autocomplete="off">
                                        @if (request('search'))
                                            <a href="{{ route('app_follow', request()->except(['search', 'page'])) }}"
                                                class="btn btn-outline-secondary border-start-0 d-flex align-items-center"
                                                title="Xóa tìm kiếm">
                                                <i class="fa-solid fa-xmark"></i>
                                            </a>
                                        @endif
                                    </div>
                                    @if (request('sort'))
                                        <input type="hidden" name="sort" value="{{ request('sort') }}">
                                    @endif
                                    @if (request('direction'))
                                        <input type="hidden" name="direction" value="{{ request('direction') }}">
                                    @endif
                                </form>
                                @if ($canCreateApp)
                                    <a class="btn btn-primary text-nowrap" href="{{ route('app_create') }}">
                                        Thêm mới
                                    </a>
                                @endif
                                <a class="btn btn-secondary text-nowrap" href="{{ route('fix-vite') }}">
                                    Reset
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>
        <!-- Main page content-->
        <div class="container-full px-2 mt-1">

            @if (session('success'))
                <div class="alert alert-success alert-dismissible fade show mb-4" role="alert">
                    <i class="fa-solid fa-circle-check me-2"></i>{{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif

            @if (session('error'))
                <div class="alert alert-danger alert-dismissible fade show mb-4" role="alert">
                    <i class="fa-solid fa-circle-exclamation me-2"></i>{{ session('error') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif

            @if ($errors->any())
                <div class="alert alert-danger alert-dismissible fade show mb-4" role="alert">
                    <ul class="mb-0">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif

            <div class="row">
                <div class="col-xl-12">
                    <!-- Account details card-->
                    <div class="card mb-4">
                        <div class="card-body p-0">

                            {{-- ── SUPERVISOR TABS (chỉ hiện khi user phụ trách ít nhất 1 người) ── --}}
                            @if (!empty($supervisorTargets))
                                <div class="supervisor-tabs-wrap px-3 pt-3 pb-0">
                                    <ul class="nav nav-tabs nav-tabs-supervisor" id="supervisorTabList" role="tablist">
                                        {{-- Tab "Của tôi" --}}
                                        <li class="nav-item" role="presentation">
                                            <button class="nav-link active" data-target-id="mine" id="svtab-mine"
                                                type="button" role="tab">
                                                <i class="fa fa-user me-1" style="font-size:11px;"></i>
                                                Của tôi
                                            </button>
                                        </li>
                                        {{-- Tab từng người được phụ trách --}}
                                        @foreach ($supervisorTargets as $target)
                                            <li class="nav-item" role="presentation">
                                                <button class="nav-link" data-target-id="{{ $target['id'] }}"
                                                    id="svtab-{{ $target['id'] }}" type="button" role="tab">
                                                    <span
                                                        class="sv-tab-avatar">{{ strtoupper(substr($target['name'], 0, 1)) }}</span>
                                                    {{ $target['name'] }}
                                                    @if (!empty($target['role']))
                                                        <span class="sv-tab-role">{{ $target['role'] }}</span>
                                                    @endif
                                                </button>
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif

                            <div class="table-scroll-wrap">
                                <div class="table-scroll-inner">
                                    <table
                                        class="table table-compact table-striped table-bordered table-hover align-middle mb-0">
                                        <thead class="table-light thead-sticky">
                                            @include('components.tr-project-follow-lvt')
                                        </thead>
                                        <tbody>
                                            @php
                                                $isColVisible = function (string $key) use ($visibleColumns): bool {
                                                    return !isset($visibleColumns) || !empty($visibleColumns[$key]);
                                                };
                                            @endphp
                                            @forelse ($apps ?? [] as $app)
                                                @php
                                                    $currentBg = $app->status->background ?? '#ffffff';
                                                    $currentColor = $app->status->color ?? '#000000';
                                                    $statusName = $app->status->name ?? '';
                                                    $isDefaultExcluded = in_array(strtolower(trim($statusName)), [
                                                        'remove',
                                                        'unpublic',
                                                    ]);

                                                    // Tính supervised-by: list target_id có tên trong app này
                                                    $appSupervisedBy = [];
                                                    foreach ($supervisorTargets ?? [] as $target) {
                                                        $tid = $target['id'];
                                                        $inDesigner =
                                                            !empty($app->designer_ids) &&
                                                            in_array($tid, (array) $app->designer_ids);
                                                        $inDeveloper =
                                                            !empty($app->developer_ids) &&
                                                            in_array($tid, (array) $app->developer_ids);
                                                        $inTester =
                                                            !empty($app->tester_ids) &&
                                                            in_array($tid, (array) $app->tester_ids);
                                                        $inMkt = $app->mkt_user_id == $tid;
                                                        $inData = $app->data_user_id == $tid;
                                                        if (
                                                            $inDesigner ||
                                                            $inDeveloper ||
                                                            $inTester ||
                                                            $inMkt ||
                                                            $inData
                                                        ) {
                                                            $appSupervisedBy[] = $tid;
                                                        }
                                                    }

                                                    // Kiểm tra user hiện tại có trực tiếp trong app không
                                                    $myId = auth()->id();
                                                    $isDirectMember =
                                                        $app->created_by == $myId ||
                                                        $app->mkt_user_id == $myId ||
                                                        $app->data_user_id == $myId ||
                                                        (!empty($app->designer_ids) &&
                                                            in_array($myId, (array) $app->designer_ids)) ||
                                                        (!empty($app->developer_ids) &&
                                                            in_array($myId, (array) $app->developer_ids)) ||
                                                        (!empty($app->tester_ids) &&
                                                            in_array($myId, (array) $app->tester_ids));
                                                @endphp
                                                <tr id="app-row-{{ $app->id }}" class="app-row"
                                                    data-supervised-by="{{ json_encode($appSupervisedBy) }}"
                                                    data-direct-member="{{ $isDirectMember ? '1' : '0' }}"
                                                    style="{{ $isDefaultExcluded ? 'display: none;' : '' }} --bs-table-bg: {{ $currentBg }}; --bs-table-color: {{ $currentColor }}; background-color: {{ $currentBg }}; color: {{ $currentColor }} !important; transition: background-color 0.2s ease;">
                                                    @if ($isColVisible('stt'))
                                                        <td class="text-center fw-bold"
                                                            data-stt="{{ $app->st_app ?? $loop->iteration }}">
                                                            {{ $app->st_app ?? $loop->iteration }}</td>
                                                    @endif

                                                    @if ($isColVisible('app_name'))
                                                        <td>
                                                            <span class="fw-bold">{{ $app->app_name }}</span>
                                                        </td>
                                                    @endif

                                                    @if ($isColVisible('package'))
                                                        <td>
                                                            @if ($app->package)
                                                                <span class="copy-package-btn"
                                                                    data-package="{{ $app->package }}"
                                                                    title="Nhấp để copy Package: {{ $app->package }}">
                                                                    <code class="fw-bold"
                                                                        style="color: inherit;">{{ $app->package }}</code>
                                                                </span>
                                                            @else
                                                                <span>-</span>
                                                            @endif
                                                        </td>
                                                    @endif

                                                    @if ($isColVisible('status'))
                                                        <td>
                                                            @if ($canEditStatus)
                                                                <select
                                                                    class="form-select form-select-sm status-select fw-bold"
                                                                    data-id="{{ $app->id }}"
                                                                    style="background-color: {{ $currentBg }}; color: {{ $currentColor }} !important; border-color: rgba(0,0,0,0.3); min-width: 100px; max-width: 130px; cursor: pointer; padding-right: 1.4rem; background-position: left 107px center;"
                                                                    {{ $canEditStatus ? '' : 'disabled' }}>
                                                                    @foreach ($statuses ?? [] as $st)
                                                                        <option value="{{ $st->id }}"
                                                                            data-background="{{ $st->background }}"
                                                                            data-color="{{ $st->color }}"
                                                                            class="bg-white text-dark"
                                                                            {{ ($app->status_id ?? 1) == $st->id ? 'selected' : '' }}>
                                                                            {{ $st->name }}
                                                                        </option>
                                                                    @endforeach
                                                                </select>
                                                            @else
                                                                <span class="fw-bold"
                                                                    style="background-color: {{ $currentBg }}; color: {{ $currentColor }} !important; border-color: rgba(0,0,0,0.3); min-width: 130px; cursor: pointer;">{{ $app?->status?->name ?? '-' }}</span>
                                                            @endif
                                                        </td>
                                                    @endif

                                                    @if ($isColVisible('store'))
                                                        <td>
                                                            @if ($canEditStore)
                                                                <select
                                                                    class="form-select form-select-sm app-field-select text-dark bg-white fw-semibold"
                                                                    data-id="{{ $app->id }}" data-field="store_id"
                                                                    style="width: 100%; min-width: 120px; cursor: pointer;"
                                                                    {{ $canEditStore ? '' : 'disabled' }}>
                                                                    <option value="">----</option>
                                                                    @foreach ($stores ?? [] as $st)
                                                                        <option value="{{ $st->id }}"
                                                                            {{ $app->store_id == $st->id ? 'selected' : '' }}>
                                                                            {{ $st->name }}
                                                                        </option>
                                                                    @endforeach
                                                                </select>
                                                            @else
                                                                <span class="fw-bold"
                                                                    style="background-color: {{ $currentBg }}; color: {{ $currentColor }} !important; border-color: rgba(0,0,0,0.3); min-width: 130px; cursor: pointer;">{{ $app?->store?->name ?? '-' }}</span>
                                                            @endif
                                                        </td>
                                                    @endif

                                                    @if ($isColVisible('admob'))
                                                        <td>
                                                            @if ($canEditAdmob)
                                                                <select
                                                                    class="form-select form-select-sm app-field-select text-dark bg-white fw-semibold"
                                                                    data-id="{{ $app->id }}" data-field="admob_id"
                                                                    style="width: 100%; min-width: 130px;max-width: 135px; cursor: pointer;padding-right: 1.4rem; background-position: left 107px center;"
                                                                    {{ $canEditAdmob ? '' : 'disabled' }}>
                                                                    <option value="">----</option>
                                                                    @foreach ($admobs ?? [] as $ad)
                                                                        <option value="{{ $ad->id }}"
                                                                            {{ $app->admob_id == $ad->id ? 'selected' : '' }}>
                                                                            {{ $ad->name }}
                                                                        </option>
                                                                    @endforeach
                                                                </select>
                                                            @else
                                                                <span class="fw-bold"
                                                                    style="background-color: {{ $currentBg }}; color: {{ $currentColor }} !important; border-color: rgba(0,0,0,0.3); min-width: 130px; cursor: pointer;">{{ $app?->admob?->name ?? '-' }}</span>
                                                            @endif
                                                        </td>
                                                    @endif

                                                    @if ($isColVisible('test_case'))
                                                        <td class="text-center col-checkbox-td">
                                                            <input type="checkbox"
                                                                class="form-check-input app-checkbox-field"
                                                                data-id="{{ $app->id }}" data-field="has_test_case"
                                                                {{ $app->has_test_case ? 'checked' : '' }}
                                                                title="Đánh dấu Test Case"
                                                                {{ $canEditTestCase ? '' : 'disabled' }}>
                                                        </td>
                                                    @endif

                                                    @if ($isColVisible('ads_script'))
                                                        <td class="text-center col-checkbox-td">
                                                            <input type="checkbox"
                                                                class="form-check-input app-checkbox-field"
                                                                data-id="{{ $app->id }}" data-field="has_ads_script"
                                                                {{ $app->has_ads_script ? 'checked' : '' }}
                                                                title="Đánh dấu có ads script"
                                                                {{ $canEditAdsScript ? '' : 'disabled' }}>
                                                        </td>
                                                    @endif

                                                    @if ($isColVisible('check_app'))
                                                        <td class="text-center col-checkbox-td">
                                                            <input type="checkbox"
                                                                class="form-check-input app-checkbox-field"
                                                                data-id="{{ $app->id }}" data-field="has_check_ads"
                                                                {{ $app->check_update ? 'checked' : '' }}
                                                                title="Đánh dấu check app"
                                                                {{ $canEditCheckAds ? '' : 'disabled' }}>
                                                        </td>
                                                    @endif

                                                    @if ($isColVisible('designer'))
                                                        <td>
                                                            <div class="user-pills-wrap"
                                                                data-app-id="{{ $app->id }}"
                                                                data-field="designer_ids"
                                                                data-can-edit="{{ $canEditDesigner ? '1' : '0' }}">
                                                                @foreach ($app->designer_ids ?? [] as $uid)
                                                                    @php $dUser = $designersMap[$uid] ?? null;@endphp
                                                                    @if ($dUser)
                                                                        <span
                                                                            class="user-pill {{ $dUser->status == 'active' ? '' : 'check-inactive' }}"
                                                                            data-uid="{{ $uid }}">
                                                                            {{ $dUser->name }}
                                                                            @if ($canEditDesigner)
                                                                                <span class="btn-remove-user"
                                                                                    title="Xóa">&times;</span>
                                                                            @endif
                                                                        </span>
                                                                    @endif
                                                                @endforeach
                                                                @if ($canEditDesigner)
                                                                    <button type="button" class="btn-add-user-circle"
                                                                        title="Thêm Designer">+</button>
                                                                @endif
                                                            </div>
                                                        </td>
                                                    @endif

                                                    @if ($isColVisible('developer'))
                                                        <td>
                                                            <div class="user-pills-wrap"
                                                                data-app-id="{{ $app->id }}"
                                                                data-field="developer_ids"
                                                                data-can-edit="{{ $canEditDeveloper ? '1' : '0' }}">
                                                                @foreach ($app->developer_ids ?? [] as $uid)
                                                                    @php $u = $developersMap[$uid] ?? null; @endphp
                                                                    @if ($u)
                                                                        <span
                                                                            class="user-pill {{ $u->status == 'active' ? '' : 'check-inactive' }}"
                                                                            data-uid="{{ $uid }}">
                                                                            {{ $u->name }}
                                                                            @if ($canEditDeveloper)
                                                                                <span class="btn-remove-user"
                                                                                    title="Xóa">&times;</span>
                                                                            @endif
                                                                        </span>
                                                                    @endif
                                                                @endforeach
                                                                @if ($canEditDeveloper)
                                                                    <button type="button" class="btn-add-user-circle"
                                                                        title="Thêm Developer">+</button>
                                                                @endif
                                                            </div>
                                                        </td>
                                                    @endif

                                                    @if ($isColVisible('tester'))
                                                        <td>
                                                            <div class="user-pills-wrap"
                                                                data-app-id="{{ $app->id }}" data-field="tester_ids"
                                                                data-can-edit="{{ $canEditTester ? '1' : '0' }}">
                                                                @foreach ($app->tester_ids ?? [] as $uid)
                                                                    @php $u = $testersMap[$uid] ?? null; @endphp
                                                                    @if ($u)
                                                                        <span
                                                                            class="user-pill {{ $u->status == 'active' ? '' : 'check-inactive' }}   "
                                                                            data-uid="{{ $uid }}">
                                                                            {{ $u->name }}
                                                                            @if ($canEditTester)
                                                                                <span class="btn-remove-user"
                                                                                    title="Xóa">&times;</span>
                                                                            @endif
                                                                        </span>
                                                                    @endif
                                                                @endforeach
                                                                @if ($canEditTester)
                                                                    <button type="button" class="btn-add-user-circle"
                                                                        title="Thêm Tester">+</button>
                                                                @endif
                                                            </div>
                                                        </td>
                                                    @endif

                                                    @if ($isColVisible('mkt'))
                                                        <td>
                                                            <div class="user-pills-wrap"
                                                                data-app-id="{{ $app->id }}"
                                                                data-field="mkt_user_id" data-single="1"
                                                                data-can-edit="{{ $canEditMkt ? '1' : '0' }}">
                                                                @if ($app->mkt_user_id && isset($mktMap[$app->mkt_user_id]))
                                                                    <span
                                                                        class="user-pill {{ $mktMap[$app->mkt_user_id]->status == 'active' ? '' : 'check-inactive' }}"
                                                                        data-uid="{{ $app->mkt_user_id }}">
                                                                        {{ $mktMap[$app->mkt_user_id]->name }}
                                                                        @if ($canEditMkt)
                                                                            <span class="btn-remove-user"
                                                                                title="Xóa">&times;</span>
                                                                        @endif
                                                                    </span>
                                                                @endif
                                                                @if ($canEditMkt)
                                                                    <button type="button" class="btn-add-user-circle"
                                                                        title="Chọn MKT">+</button>
                                                                @endif
                                                            </div>
                                                        </td>
                                                    @endif

                                                    @if ($isColVisible('data'))
                                                        <td>
                                                            <div class="user-pills-wrap"
                                                                data-app-id="{{ $app->id }}"
                                                                data-field="data_user_id" data-single="1"
                                                                data-can-edit="{{ $canEditData ? '1' : '0' }}">
                                                                @if ($app->data_user_id && isset($dataMap[$app->data_user_id]))
                                                                    <span
                                                                        class="user-pill {{ $dataMap[$app->data_user_id]->status == 'active' ? '' : 'check-inactive' }}"
                                                                        data-uid="{{ $app->data_user_id }}">
                                                                        {{ $dataMap[$app->data_user_id]->name }}
                                                                        @if ($canEditData)
                                                                            <span class="btn-remove-user"
                                                                                title="Xóa">&times;</span>
                                                                        @endif
                                                                    </span>
                                                                @endif
                                                                @if ($canEditData)
                                                                    <button type="button" class="btn-add-user-circle"
                                                                        title="Chọn Data">+</button>
                                                                @endif
                                                            </div>
                                                        </td>
                                                    @endif

                                                    @if ($isColVisible('design_link'))
                                                        <td class="text-center col-design-link-td">
                                                            <div class="design-link-container"
                                                                data-app-id="{{ $app->id }}"
                                                                data-design-link="{{ $app->design_link ?? '' }}">
                                                                <a href="{{ $app->design_link ?: '#' }}" target="_blank"
                                                                    class="btn btn-sm btn-icon btn-dark text-white btn-design-view {{ empty($app->design_link) ? 'd-none' : '' }}"
                                                                    title="Xem Figma/Design">
                                                                    <i class="fa-brands fa-figma"></i>
                                                                </a>
                                                                <span
                                                                    class="text-muted design-empty-dash {{ empty($app->design_link) ? '' : 'd-none' }}">-</span>
                                                                @if ($canEditDesignLink)
                                                                    <button type="button" class="btn-edit-design"
                                                                        title="Sửa link Design">
                                                                        <i class="fa-solid fa-pen"></i>
                                                                    </button>
                                                                @endif
                                                            </div>
                                                        </td>
                                                    @endif

                                                    @if ($isColVisible('folder_link'))
                                                        <td class="text-center">
                                                            @if ($app->folder_link)
                                                                <a href="{{ $app->folder_link }}" target="_blank"
                                                                    class="btn btn-sm btn-icon btn-dark text-white"
                                                                    title="Mở Drive Folder">
                                                                    <i class="fa-solid fa-folder-open"></i>
                                                                </a>
                                                            @else
                                                                <span>-</span>
                                                            @endif
                                                        </td>
                                                    @endif

                                                    @if ($isColVisible('git_link'))
                                                        <td class="text-center">
                                                            @if ($app->git_link)
                                                                <a href="{{ $app->git_link }}" target="_blank"
                                                                    class="btn btn-sm btn-icon btn-dark text-white"
                                                                    title="Mở Git Repo">
                                                                    <i class="fa-brands fa-github"></i>
                                                                </a>
                                                            @else
                                                                <span>-</span>
                                                            @endif
                                                        </td>
                                                    @endif

                                                    @if ($isColVisible('app_link'))
                                                        <td>
                                                            @php
                                                                $appUrl =
                                                                    $app->store_link ?:
                                                                    ($app->package
                                                                        ? 'https://play.google.com/store/apps/details?id=' .
                                                                            $app->package
                                                                        : null);
                                                            @endphp
                                                            @if ($appUrl)
                                                                <a href="{{ $appUrl }}" target="_blank"
                                                                    class="btn btn-sm btn-dark text-white text-truncate"
                                                                    style="max-width: 140px;"
                                                                    title="{{ $appUrl }}">
                                                                    <i class="fa-brands fa-google-play me-1"></i> CH Play
                                                                </a>
                                                            @else
                                                                <span>-</span>
                                                            @endif
                                                        </td>
                                                    @endif

                                                    @if ($isColVisible('actions'))
                                                        <td class="text-center">
                                                            @if ($canEditApp)
                                                                <a href="{{ route('app_edit', $app->id) }}"
                                                                    class="btn btn-datatable btn-icon btn-transparent-dark me-1"
                                                                    title="Chỉnh sửa">
                                                                    <i data-feather="edit"></i>
                                                                </a>
                                                            @endif
                                                            @if ($canDeleteApp)
                                                                <form action="{{ route('app_delete', $app->id) }}"
                                                                    method="POST" class="d-inline"
                                                                    onsubmit="return confirm('Bạn có chắc chắn muốn xóa app này không?')">
                                                                    @csrf
                                                                    @method('DELETE')
                                                                    <button type="submit"
                                                                        class="btn btn-datatable btn-icon btn-transparent-dark"
                                                                        title="Xóa">
                                                                        <i data-feather="trash-2"></i>
                                                                    </button>
                                                                </form>
                                                            @endif
                                                        </td>
                                                    @endif
                                                </tr>

                                                {{-- @if (!$canEditApp && !$canDeleteApp)
                                    <span class="text-muted small">-</span>
                                @endif --}}
                                                </tr>
                                            @empty
                                                <tr>
                                                    <td colspan="18" class="text-center py-4 text-muted">
                                                        Chưa có dữ liệu ứng dụng nào.
                                                    </td>
                                                </tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>{{-- end table-scroll-inner --}}
                            </div>{{-- end table-scroll-wrap --}}

                            <div class="d-flex justify-content-end mt-3 px-3">
                                @if (isset($apps) && method_exists($apps, 'links'))
                                    {{ $apps->links('pagination::bootstrap-5') }}
                                @endif
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- Batch Attendance Modal -->
    <div class="modal fade" id="batchAttendanceModal" tabindex="-1" aria-labelledby="batchAttendanceModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="batchAttendanceModalLabel">Tạo mới chấm công hàng loạt</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="batchAttendanceForm">
                    @csrf
                    <div class="modal-body">
                        <div class="alert alert-info py-2 small">
                            Hệ thống sẽ tự động lấy giờ vào/ra theo lịch làm việc (Work Schedule) của nhân viên đã chọn
                            trong ngày tương ứng.
                        </div>
                        <div class="mb-3">
                            <label for="batch_date" class="form-label">Chọn ngày <span
                                    class="text-danger">*</span></label>
                            <input type="date" name="date" id="batch_date" class="form-control" required
                                value="{{ date('Y-m-d') }}">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Chọn nhân viên <span class="text-danger">*</span></label>
                            <div class="border rounded p-3" style="max-height: 250px; overflow-y: auto;">
                                <div class="form-check mb-2 border-bottom pb-2">
                                    <input class="form-check-input" type="checkbox" id="selectAllEmployees">
                                    <label class="form-check-label fw-bold" for="selectAllEmployees">
                                        Chọn tất cả
                                    </label>
                                </div>
                                <div class="row">
                                    {{-- @foreach (\App\Models\User::role(['employee', 'manager'])->orderBy('name')->get() as $emp)
                                        <div class="col-md-6">
                                            <div class="form-check">
                                                <input class="form-check-input employee-checkbox" type="checkbox"
                                                    name="employee_ids[]" value="{{ $emp->id }}"
                                                    id="emp_{{ $emp->id }}">
                                                <label class="form-check-label" for="emp_{{ $emp->id }}">
                                                    {{ $emp->name }}
                                                </label>
                                            </div>
                                        </div>
                                    @endforeach --}}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Hủy</button>
                        <button type="submit" class="btn btn-primary" id="btnSubmitBatch">
                            <span class="spinner-border spinner-border-sm d-none me-1" role="status"
                                aria-hidden="true"></span>
                            Tạo chấm công
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    @push('scripts')
        <script>
            window.APP_ROLE_USERS = {
                'designer_ids': @json($designers ?? []),
                'developer_ids': @json($developers ?? []),
                'tester_ids': @json($testers ?? []),
                'mkt_user_id': @json($mktUsers ?? []),
                'data_user_id': @json($dataUsers ?? [])
            };

            // Danh sách target mà user này phụ trách (rỗng nếu admin hoặc không phụ trách ai)
            var SUPERVISOR_TARGETS = @json($supervisorTargets ?? []);

            $(document).ready(function() {

                // ===================== TOAST NOTIFICATION HELPER =====================
                var FIELD_LABELS = {
                    'store_id': 'Store',
                    'admob_id': 'Admob',
                    'has_test_case': 'Test Case',
                    'has_check_ads': 'Check App',
                    'has_ads_script': 'Ads Script',
                    'designer_ids': 'Designer',
                    'developer_ids': 'Developer',
                    'tester_ids': 'Tester',
                    'mkt_user_id': 'MKT',
                    'data_user_id': 'Data',
                    'design_link': 'Link Design'
                };

                // Đảm bảo có container toast
                if ($('#app-toast-container').length === 0) {
                    $('body').append('<div id="app-toast-container"></div>');
                }

                function showAppToast(type, title, message) {
                    var iconHtml = '';
                    var borderClass = '';
                    var iconBg = '';

                    if (type === 'success') {
                        iconHtml = '<i class="fa-solid fa-circle-check" style="color: #10b981; font-size: 20px;"></i>';
                        borderClass = 'border-success';
                        iconBg = '#ecfdf5';
                    } else if (type === 'error' || type === 'danger') {
                        iconHtml = '<i class="fa-solid fa-circle-xmark" style="color: #ef4444; font-size: 20px;"></i>';
                        borderClass = 'border-danger';
                        iconBg = '#fef2f2';
                    } else if (type === 'warning') {
                        iconHtml =
                            '<i class="fa-solid fa-triangle-exclamation" style="color: #f59e0b; font-size: 20px;"></i>';
                        borderClass = 'border-warning';
                        iconBg = '#fffbeb';
                    } else {
                        iconHtml = '<i class="fa-solid fa-circle-info" style="color: #3b82f6; font-size: 20px;"></i>';
                        borderClass = 'border-info';
                        iconBg = '#eff6ff';
                    }

                    var $toast = $(
                        '<div class="app-custom-toast ' + borderClass + '">' +
                        '<div class="app-toast-icon" style="background-color: ' + iconBg + ';">' + iconHtml +
                        '</div>' +
                        '<div class="app-toast-content">' +
                        '<div class="app-toast-title">' + (title || (type === 'success' ? 'Thành công' :
                            'Thông báo')) + '</div>' +
                        '<div class="app-toast-message">' + message + '</div>' +
                        '</div>' +
                        '<button type="button" class="app-toast-close">&times;</button>' +
                        '<div class="app-toast-progress"><div class="app-toast-progress-bar ' + (type ===
                            'success' ? 'bg-success' : (type === 'error' || type === 'danger' ? 'bg-danger' :
                                'bg-primary')) + '"></div></div>' +
                        '</div>'
                    );

                    $('#app-toast-container').append($toast);

                    var timer = setTimeout(function() {
                        dismissToast($toast);
                    }, 3500);

                    $toast.find('.app-toast-close').on('click', function() {
                        clearTimeout(timer);
                        dismissToast($toast);
                    });

                    function dismissToast($el) {
                        $el.addClass('toast-hide');
                        setTimeout(function() {
                            $el.remove();
                        }, 300);
                    }
                }

                // ===================== PILL UI (Designer/Developer/Tester/MKT/Data) =====================
                var UPDATE_URL = "{{ route('app_quick_update_field') }}";
                var CSRF = "{{ csrf_token() }}";

                // Tạo 1 dropdown singleton dùng chung, append vào body
                var $dropdown = $('<div id="user-add-dropdown-global" class="user-add-dropdown">' +
                    '<div class="dropdown-search"><input type="text" placeholder="Tìm..." class="user-search-input" /></div>' +
                    '<div class="dropdown-options"></div>' +
                    '</div>').appendTo('body');

                var $activeWrap = null;

                function getSelectedIds(wrap) {
                    var ids = [];
                    wrap.find('.user-pill').each(function() {
                        // Ép về number để tránh gửi string lên backend
                        var uid = parseInt($(this).data('uid'), 10);
                        if (!isNaN(uid)) ids.push(uid);
                    });
                    return ids;
                }

                function saveField(wrap, actionMsg) {
                    var appId = wrap.data('app-id');
                    var field = wrap.data('field');
                    var isSingle = wrap.data('single') == 1;
                    var ids = getSelectedIds(wrap);
                    var value = isSingle ? (ids.length > 0 ? ids[0] : '') : ids;
                    var fieldLabel = FIELD_LABELS[field] || 'thành viên';

                    if (typeof updateSingleRowIndex === 'function') {
                        updateSingleRowIndex(wrap.closest('tr')[0]);
                    }

                    // Gửi JSON để array được PHP nhận đúng
                    $.ajax({
                        url: UPDATE_URL,
                        type: 'POST',
                        contentType: 'application/json',
                        headers: {
                            'X-CSRF-TOKEN': CSRF
                        },
                        data: JSON.stringify({
                            id: appId,
                            field: field,
                            value: value
                        }),
                        success: function(response) {
                            if (response.success) {
                                showAppToast('success', fieldLabel, actionMsg || ('Đã cập nhật ' +
                                    fieldLabel + ' thành công!'));
                            }
                        },
                        error: function() {
                            showAppToast('error', fieldLabel, 'Có lỗi xảy ra khi cập nhật ' + fieldLabel +
                                '.');
                        }
                    });
                }

                // Xóa user pill khi click X
                $(document).on('click', '.user-pill .btn-remove-user', function(e) {
                    e.stopPropagation();
                    if (!confirm('Bạn có chắc chắn muốn xóa?')) {
                        return;
                    }
                    var pill = $(this).closest('.user-pill');
                    var uid = pill.data('uid');
                    var wrap = pill.closest('.user-pills-wrap');

                    // Kiểm tra quyền chỉnh sửa
                    if (wrap.data('can-edit') === '0') {
                        return;
                    }

                    var field = wrap.data('field');
                    var fieldLabel = FIELD_LABELS[field] || 'thành viên';
                    var userName = pill.contents().filter(function() {
                        return this.nodeType === 3;
                    }).text().trim() || 'thành viên';

                    $dropdown.find('.user-option[data-uid="' + uid + '"]').removeClass('disabled');
                    pill.remove();
                    saveField(wrap, 'Đã gỡ ' + userName + ' khỏi ' + fieldLabel);
                });

                // Mở/đóng dropdown khi click nút +
                $(document).on('click', '.btn-add-user-circle', function(e) {
                    e.stopPropagation();
                    var btn = $(this);
                    var wrap = btn.closest('.user-pills-wrap');

                    // Kiểm tra quyền
                    if (wrap.data('can-edit') === '0') {
                        return;
                    }

                    // Nếu đang mở cho wrap này thì đóng lại
                    if ($dropdown.is(':visible') && $activeWrap && $activeWrap.is(wrap)) {
                        $dropdown.hide();
                        $activeWrap = null;
                        return;
                    }

                    $activeWrap = wrap;

                    // Lấy danh sách users theo field của wrap từ biến global
                    var field = wrap.data('field');
                    var userList = (window.APP_ROLE_USERS && window.APP_ROLE_USERS[field]) ? window
                        .APP_ROLE_USERS[field] : [];
                    var selectedIds = getSelectedIds(wrap);
                    var optionsHtml = '';
                    userList.forEach(function(u) {
                        var uid = u.id;
                        var name = u.name;
                        var disabled = selectedIds.indexOf(uid) > -1 ? ' disabled' : '';
                        var displayNone = u.status === "inactive" ? ' d-none' : '';
                        optionsHtml += '<div class="user-option' + disabled + displayNone +
                            '" data-uid="' + uid +
                            '" data-name="' + name + '">' + name + '</div>';
                    });
                    $dropdown.find('.dropdown-options').html(optionsHtml);
                    $dropdown.find('.user-search-input').val('');
                    $dropdown.find('.user-option').show();

                    // Định vị dropdown theo vị trí nút +
                    var rect = btn[0].getBoundingClientRect();
                    var scrollTop = $(window).scrollTop();
                    var scrollLeft = $(window).scrollLeft();
                    var dropH = 220;
                    var spaceBelow = window.innerHeight - rect.bottom;
                    var top, left;

                    if (spaceBelow > dropH || spaceBelow > rect.top) {
                        top = rect.bottom + scrollTop + 4;
                    } else {
                        top = rect.top + scrollTop - dropH - 4;
                    }
                    left = rect.left + scrollLeft;

                    $dropdown.css({
                        top: top,
                        left: left
                    }).show();
                    $dropdown.find('.user-search-input').focus();
                });

                // Tìm kiếm trong dropdown
                $(document).on('input', '#user-add-dropdown-global .user-search-input', function() {
                    var q = $(this).val().toLowerCase();
                    $dropdown.find('.user-option').each(function() {
                        var name = $(this).data('name').toLowerCase();
                        $(this).toggle(name.indexOf(q) > -1);
                    });
                });

                // Chọn user từ dropdown
                $(document).on('click', '#user-add-dropdown-global .user-option:not(.disabled)', function(e) {
                    e.stopPropagation();
                    if (!$activeWrap) return;
                    var opt = $(this);
                    var uid = opt.data('uid');
                    var name = opt.data('name');
                    var isSingle = $activeWrap.data('single') == 1;
                    var field = $activeWrap.data('field');
                    var fieldLabel = FIELD_LABELS[field] || 'thành viên';

                    // Nếu single-select và đã có pill: xóa pill cũ trước
                    if (isSingle) {
                        $activeWrap.find('.user-pill').remove();
                    }

                    // Thêm pill mới vào wrap trước nút +
                    var btn = $activeWrap.find('.btn-add-user-circle');
                    var pill = $('<span class="user-pill" data-uid="' + uid + '">' +
                        name +
                        '<span class="btn-remove-user" title="Xóa">&times;</span>' +
                        '</span>');
                    btn.before(pill);

                    // Nếu single, ẩn nút + sau khi chọn
                    if (isSingle) {
                        btn.hide();
                    } else {
                        opt.addClass('disabled');
                    }

                    saveField($activeWrap, 'Đã gán ' + name + ' vào ' + fieldLabel);
                    $dropdown.hide();
                    $activeWrap = null;
                });

                // Khi xóa pill: nếu single-select thì hiện lại nút +
                $(document).on('click', '.user-pill .btn-remove-user', function(e) {
                    // (Đã xử lý ở trên, chỉ bổ sung hiện nút + cho single)
                    var wrap = $(this).closest('.user-pills-wrap');
                    if (wrap.data('single') == 1) {
                        wrap.find('.btn-add-user-circle').show();
                    }
                });

                // Đóng dropdown khi click ra ngoài
                $(document).on('click', function(e) {
                    if (!$(e.target).closest('.btn-add-user-circle, #user-add-dropdown-global').length) {
                        $dropdown.hide();
                        $activeWrap = null;
                    }
                });

                // ===================== END PILL UI =====================

                // Initialize tooltips
                var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
                var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
                    return new bootstrap.Tooltip(tooltipTriggerEl)
                })


                // Cập nhật trạng thái
                $('.status-select').on('change', function() {
                    var select = $(this);
                    var id = select.data('id');
                    var statusId = select.val();
                    var selectedOption = select.find('option:selected');
                    var newBg = selectedOption.data('background') || '#ffffff';
                    var newColor = selectedOption.data('color') || '#000000';
                    var statusName = selectedOption.text().trim();
                    var row = select.closest('tr');

                    // Cập nhật màu sắc của dropdown và cả dòng bản ghi ngay lập tức
                    select.css({
                        'background-color': newBg,
                        'border-color': 'rgba(0,0,0,0.3)',
                        'color': newColor
                    });

                    row.css({
                        '--bs-table-bg': newBg,
                        '--bs-table-color': newColor,
                        'background-color': newBg,
                        'border-left': '4px solid ' + newColor,
                        'color': newColor
                    });

                    $.ajax({
                        url: "{{ route('app_quick_update_status') }}",
                        type: "POST",
                        data: {
                            _token: "{{ csrf_token() }}",
                            id: id,
                            status_id: statusId
                        },
                        success: function(response) {
                            if (response.success) {
                                var resBg = response.background || newBg;
                                var resColor = response.color || newColor;
                                var finalStatusName = response.status_name || statusName;
                                select.css({
                                    'background-color': resBg,
                                    'border-color': 'rgba(0,0,0,0.3)',
                                    'color': resColor
                                });
                                row.css({
                                    '--bs-table-bg': resBg,
                                    '--bs-table-color': resColor,
                                    'background-color': resBg,
                                    'border-left': '4px solid ' + resColor,
                                    'color': resColor
                                });
                                // Cập nhật index sau khi AJAX thành công để đảm bảo dữ liệu index khớp với DOM
                                updateSingleRowIndex(select.closest('tr')[0]);
                                invalidateFilterCache('status');
                                showAppToast('success', 'Trạng thái',
                                    'Đã chuyển trạng thái sang: ' + finalStatusName);
                            }
                        },
                        error: function(xhr) {
                            showAppToast('error', 'Trạng thái',
                                'Có lỗi xảy ra khi cập nhật trạng thái.');
                        }
                    });
                });

                // Xử lý thay đổi Store và Admob trực tiếp
                $('.app-field-select').on('change', function() {
                    var select = $(this);
                    var id = select.data('id');
                    var field = select.data('field');
                    var value = select.val();
                    var fieldLabel = FIELD_LABELS[field] || 'thông tin';
                    var selectedText = select.find('option:selected').text().trim();

                    $.ajax({
                        url: "{{ route('app_quick_update_field') }}",
                        type: "POST",
                        data: {
                            _token: "{{ csrf_token() }}",
                            id: id,
                            field: field,
                            value: value
                        },
                        success: function(response) {
                            if (response.success) {
                                var detail = value ? (': ' + selectedText) : ' (đã bỏ chọn)';
                                showAppToast('success', fieldLabel, 'Đã cập nhật ' + fieldLabel +
                                    detail);
                            }
                        },
                        error: function(xhr) {
                            showAppToast('error', fieldLabel, 'Có lỗi xảy ra khi cập nhật ' +
                                fieldLabel + '.');
                        }
                    });
                });

                // Xử lý thay đổi Test Case checkbox
                $(document).on('change', '.app-checkbox-field', function() {
                    var checkbox = $(this);
                    var id = checkbox.data('id');
                    var field = checkbox.data('field');
                    var value = checkbox.is(':checked') ? 1 : 0;
                    var fieldLabel = FIELD_LABELS[field] || 'Test Case';

                    $.ajax({
                        url: "{{ route('app_quick_update_field') }}",
                        type: "POST",
                        data: {
                            _token: "{{ csrf_token() }}",
                            id: id,
                            field: field,
                            value: value
                        },
                        success: function(response) {
                            if (response.success) {
                                var statusText = value ? 'Đã có Test Case' : 'Chưa có Test Case';
                                showAppToast('success', fieldLabel, 'Đã cập nhật: ' + statusText);
                            }
                        },
                        error: function(xhr) {
                            checkbox.prop('checked', !value);
                            showAppToast('error', fieldLabel, 'Có lỗi xảy ra khi cập nhật ' +
                                fieldLabel + '.');
                        }
                    });
                });

                @if (!empty($canEditDesignLink))
                    // ===================== DESIGN LINK INLINE EDIT =====================
                    var $designPopover = $(
                        '<div id="design-link-popover" class="card shadow-lg">' +
                        '<div class="card-header py-2 px-3 bg-light d-flex align-items-center justify-content-between border-bottom">' +
                        '<span class="fw-bold fs-7 text-dark"><i class="fa-brands fa-figma text-danger me-1"></i> Sửa link Design</span>' +
                        '<button type="button" class="btn-close btn-close-sm btn-cancel-design-popover" aria-label="Close" style="font-size: 10px;"></button>' +
                        '</div>' +
                        '<div class="card-body p-2">' +
                        '<div class="input-group input-group-sm mb-2">' +
                        '<span class="input-group-text bg-white"><i class="fa-solid fa-link text-muted"></i></span>' +
                        '<input type="url" class="form-control form-control-sm input-design-link" placeholder="https://www.figma.com/..." />' +
                        '</div>' +
                        '<div class="d-flex justify-content-between align-items-center">' +
                        '<button type="button" class="btn btn-sm btn-outline-danger btn-clear-design-link py-1 px-2" style="font-size: 11px;" title="Xóa link">' +
                        '<i class="fa-solid fa-trash-can me-1"></i> Xóa link' +
                        '</button>' +
                        '<div class="d-flex gap-1">' +
                        '<button type="button" class="btn btn-sm btn-secondary btn-cancel-design-popover py-1 px-2" style="font-size: 11px;">Hủy</button>' +
                        '<button type="button" class="btn btn-sm btn-primary btn-save-design-link py-1 px-2" style="font-size: 11px;">' +
                        '<i class="fa-solid fa-check me-1"></i> Lưu' +
                        '</button>' +
                        '</div>' +
                        '</div>' +
                        '</div>' +
                        '</div>'
                    ).appendTo('body');

                    var $activeDesignBtn = null;
                    var $activeDesignWrap = null;

                    function closeDesignPopover() {
                        $designPopover.hide();
                        if ($activeDesignBtn) {
                            $activeDesignBtn.removeClass('active');
                        }
                        $activeDesignBtn = null;
                        $activeDesignWrap = null;
                    }

                    $(document).on('click', '.btn-edit-design', function(e) {
                        e.stopPropagation();
                        var $btn = $(this);
                        var $wrap = $btn.closest('.design-link-container');

                        if ($designPopover.is(':visible') && $activeDesignBtn && $activeDesignBtn.is($btn)) {
                            closeDesignPopover();
                            return;
                        }

                        $activeDesignBtn = $btn;
                        $activeDesignWrap = $wrap;
                        $('.btn-edit-design').removeClass('active');
                        $btn.addClass('active');

                        var currentVal = $wrap.attr('data-design-link') || '';
                        $designPopover.find('.input-design-link').val(currentVal);

                        // Định vị popover dưới nút
                        var rect = $btn[0].getBoundingClientRect();
                        var popoverWidth = 320;
                        var popoverHeight = 110;
                        var top = rect.bottom + 6;
                        var left = rect.left - (popoverWidth / 2) + (rect.width / 2);

                        if (left + popoverWidth > window.innerWidth - 10) {
                            left = window.innerWidth - popoverWidth - 10;
                        }
                        if (left < 10) left = 10;

                        if (top + popoverHeight > window.innerHeight - 10) {
                            top = rect.top - popoverHeight - 6;
                        }

                        $designPopover.css({
                            top: top + 'px',
                            left: left + 'px',
                            display: 'block'
                        });

                        setTimeout(function() {
                            $designPopover.find('.input-design-link').focus().select();
                        }, 50);
                    });

                    $designPopover.on('click', '.btn-cancel-design-popover', function(e) {
                        e.stopPropagation();
                        closeDesignPopover();
                    });

                    $designPopover.on('click', '.btn-clear-design-link', function(e) {
                        e.stopPropagation();
                        $designPopover.find('.input-design-link').val('');
                        submitDesignLink('');
                    });

                    $designPopover.on('click', '.btn-save-design-link', function(e) {
                        e.stopPropagation();
                        var val = $designPopover.find('.input-design-link').val().trim();
                        submitDesignLink(val);
                    });

                    $designPopover.on('keydown', '.input-design-link', function(e) {
                        if (e.key === 'Enter') {
                            e.preventDefault();
                            var val = $(this).val().trim();
                            submitDesignLink(val);
                        } else if (e.key === 'Escape') {
                            e.preventDefault();
                            closeDesignPopover();
                        }
                    });

                    function submitDesignLink(newLink) {
                        if (!$activeDesignWrap) return;
                        var $wrap = $activeDesignWrap;
                        var appId = $wrap.data('app-id');
                        var $saveBtn = $designPopover.find('.btn-save-design-link');

                        $saveBtn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm"></span>');

                        $.ajax({
                            url: UPDATE_URL,
                            type: 'POST',
                            contentType: 'application/json',
                            headers: {
                                'X-CSRF-TOKEN': CSRF
                            },
                            data: JSON.stringify({
                                id: appId,
                                field: 'design_link',
                                value: newLink
                            }),
                            success: function(res) {
                                $saveBtn.prop('disabled', false).html(
                                    '<i class="fa-solid fa-check me-1"></i> Lưu');
                                if (res.success) {
                                    $wrap.attr('data-design-link', newLink);
                                    var $viewBtn = $wrap.find('.btn-design-view');
                                    var $dash = $wrap.find('.design-empty-dash');

                                    if (newLink) {
                                        $viewBtn.attr('href', newLink).removeClass('d-none');
                                        $dash.addClass('d-none');
                                    } else {
                                        $viewBtn.attr('href', '#').addClass('d-none');
                                        $dash.removeClass('d-none');
                                    }

                                    showAppToast('success', 'Link Design', newLink ?
                                        'Đã lưu link Design thành công!' : 'Đã xóa link Design!');
                                    closeDesignPopover();
                                } else {
                                    showAppToast('error', 'Link Design', res.message ||
                                        'Không thể cập nhật link Design.');
                                }
                            },
                            error: function(xhr) {
                                $saveBtn.prop('disabled', false).html(
                                    '<i class="fa-solid fa-check me-1"></i> Lưu');
                                var msg = (xhr.responseJSON && xhr.responseJSON.message) ? xhr.responseJSON
                                    .message : 'Lỗi kết nối khi cập nhật link Design.';
                                showAppToast('error', 'Link Design', msg);
                            }
                        });
                    }

                    $(document).on('click', function(e) {
                        if (!$(e.target).closest('#design-link-popover, .btn-edit-design').length) {
                            closeDesignPopover();
                        }
                    });

                    $('.table-scroll-inner').on('scroll', function() {
                        if ($designPopover.is(':visible')) {
                            closeDesignPopover();
                        }
                    });
                @endif

                // ===================== COPY PACKAGE NAME =====================
                $(document).on('click', '.copy-package-btn', function(e) {
                    e.preventDefault();
                    var $btn = $(this);
                    var pkg = $btn.data('package') || $btn.text().trim();
                    if (!pkg) return;

                    function copySuccess() {
                        $btn.addClass('copy-success');
                        showAppToast('success', 'Copy Package', 'Đã sao chép: ' + pkg);
                        setTimeout(function() {
                            $btn.removeClass('copy-success');
                        }, 1200);
                    }

                    if (navigator.clipboard && window.isSecureContext) {
                        navigator.clipboard.writeText(pkg).then(copySuccess).catch(function() {
                            fallbackCopy(pkg);
                        });
                    } else {
                        fallbackCopy(pkg);
                    }

                    function fallbackCopy(text) {
                        var $temp = $('<textarea>');
                        $('body').append($temp);
                        $temp.val(text).select();
                        try {
                            document.execCommand('copy');
                            copySuccess();
                        } catch (err) {
                            showAppToast('error', 'Lỗi copy', 'Không thể tự động copy text.');
                        }
                        $temp.remove();
                    }
                });

                // Batch attendance creation
                $('#selectAllEmployees').on('change', function() {
                    $('.employee-checkbox').prop('checked', $(this).is(':checked'));
                });

                // ===================== EXCEL-STYLE COLUMN DROPDOWN FILTER =====================
                var $filterPopup = $('<div id="table-column-filter-popup" class="table-column-filter-popup">' +
                    '<div class="filter-header">' +
                    '<span id="col-filter-title">Filter</span>' +
                    '<span class="btn-close-filter" id="btn-close-filter">&times;</span>' +
                    '</div>' +
                    '<div class="filter-search-box">' +
                    '<i class="fa fa-search"></i>' +
                    '<input type="text" id="col-filter-search-input" placeholder="Search..." autocomplete="off">' +
                    '</div>' +
                    '<label class="filter-item filter-select-all" id="filter-item-all-wrap">' +
                    '<input type="checkbox" id="col-filter-check-all" checked>' +
                    '<span class="item-text" id="col-filter-all-label">All</span>' +
                    '</label>' +
                    '<div class="filter-options-list" id="col-filter-options-container"></div>' +
                    '<div class="filter-actions">' +
                    '<button type="button" class="btn-filter-reset" id="btn-col-filter-reset" title="Bỏ lọc cột này"><i class="fa fa-rotate-left me-1"></i>Reset</button>' +
                    '<button type="button" class="btn-filter-apply" id="btn-col-filter-apply">APPLY</button>' +
                    '</div>' +
                    '</div>').appendTo('body');

                var COLUMN_LABELS = {
                    'stt': 'STT',
                    'app_name': 'App Name',
                    'package': 'Package',
                    'status': 'Status',
                    'store': 'Store',
                    'admob': 'Admob',
                    'designer': 'Designer',
                    'developer': 'Developer',
                    'tester': 'Tester',
                    'mkt': 'MKT',
                    'data': 'Data'
                };

                var activeFilters = {}; // { targetCol: Set(...) }
                var currentTargetCol = null;
                var currentTriggerBtn = null;
                var appTableIndex = [];

                // Cache filter options, chỉ tính lại khi data thay đổi
                var filterOptionsCache = {}; // { colName: { counts, sortedVals } }

                function invalidateFilterCache(col) {
                    if (col) delete filterOptionsCache[col];
                    else filterOptionsCache = {};
                }

                function getCachedFilterOptions(targetCol) {
                    if (filterOptionsCache[targetCol]) return filterOptionsCache[targetCol];
                    var counts = getUniqueValuesAndCounts(targetCol);
                    var sortedVals = Object.keys(counts).sort(function(a, b) {
                        if (a === '(Trống)' || a === '(Chưa chọn)') return 1;
                        if (b === '(Trống)' || b === '(Chưa chọn)') return -1;
                        return a.localeCompare(b, undefined, {
                            numeric: true,
                            sensitivity: 'base'
                        });
                    });
                    filterOptionsCache[targetCol] = {
                        counts: counts,
                        sortedVals: sortedVals
                    };
                    return filterOptionsCache[targetCol];
                }

                // Hàm trích xuất tên user không dùng clone -> nhanh gấp 1000 lần
                function extractPillTexts(td) {
                    if (!td) return ['(Trống)'];
                    var pills = td.getElementsByClassName('user-pill');
                    if (!pills || pills.length === 0) return ['(Trống)'];
                    var names = [];
                    for (var i = 0; i < pills.length; i++) {
                        var t = pills[i].textContent.replace(/×/g, '').trim();
                        if (t) names.push(t);
                    }
                    return names.length ? names : ['(Trống)'];
                }

                function buildRowIndex(row, origIdx) {
                    var cells = row.cells;
                    var stt = cells[0] ? cells[0].textContent.trim() : '';
                    var sttNum = parseFloat(stt);
                    var app_name = cells[1] ? cells[1].textContent.trim() : '';
                    var pkg = cells[2] ? cells[2].textContent.trim() : '';

                    // Duyệt DOM 1 lần duy nhất thay vì nhiều querySelector riêng lẻ
                    var selects = row.getElementsByTagName('select');
                    var statusSel = null,
                        storeSel = null,
                        admobSel = null;
                    for (var i = 0; i < selects.length; i++) {
                        var f = selects[i].getAttribute('data-field');
                        if (selects[i].classList.contains('status-select')) statusSel = selects[i];
                        else if (f === 'store_id') storeSel = selects[i];
                        else if (f === 'admob_id') admobSel = selects[i];
                    }

                    var wraps = row.getElementsByClassName('user-pills-wrap');
                    var wrapMap = {};
                    for (var j = 0; j < wraps.length; j++) {
                        wrapMap[wraps[j].getAttribute('data-field')] = wraps[j];
                    }

                    var status = statusSel && statusSel.selectedIndex >= 0 ? [statusSel.options[statusSel.selectedIndex]
                            .text.trim()
                        ] :
                        (cells[3] ? [cells[3].textContent.trim() || '-'] : ['-']);

                    var storeText = storeSel && storeSel.selectedIndex >= 0 ? storeSel.options[storeSel.selectedIndex]
                        .text.trim() : '';
                    var store = (!storeText || storeText === '-- Chọn Store --') ? ['(Chưa chọn)'] : [storeText];

                    var admobText = admobSel && admobSel.selectedIndex >= 0 ? admobSel.options[admobSel.selectedIndex]
                        .text.trim() : '';
                    var admob = (!admobText || admobText === '-- Chọn Admob --') ? ['(Chưa chọn)'] : [admobText];

                    var designer = extractPillTexts(wrapMap['designer_ids'] ? wrapMap['designer_ids'].closest('td') :
                        cells[9]);
                    var developer = extractPillTexts(wrapMap['developer_ids'] ? wrapMap['developer_ids'].closest('td') :
                        cells[10]);
                    var tester = extractPillTexts(wrapMap['tester_ids'] ? wrapMap['tester_ids'].closest('td') : cells[
                        11]);
                    var mkt = extractPillTexts(wrapMap['mkt_user_id'] ? wrapMap['mkt_user_id'].closest('td') : cells[
                        12]);
                    var data = extractPillTexts(wrapMap['data_user_id'] ? wrapMap['data_user_id'].closest('td') : cells[
                        13]);

                    var searchStr = (stt + ' ' + app_name + ' ' + pkg).toLowerCase();

                    return {
                        el: row,
                        stt: stt ? [stt] : ['-'],
                        sttNum: isNaN(sttNum) ? null : sttNum,
                        app_name: app_name ? [app_name] : ['(Trống)'],
                        package: pkg ? [pkg] : ['(Trống)'],
                        searchStr: searchStr,
                        status: status,
                        store: store,
                        admob: admob,
                        designer: designer,
                        developer: developer,
                        tester: tester,
                        mkt: mkt,
                        data: data,
                        origIndex: origIdx
                    };
                }

                // Khởi tạo index in-memory
                function initAppTableIndex() {
                    var rows = document.querySelectorAll('table tbody tr.app-row');
                    appTableIndex = [];
                    for (var i = 0; i < rows.length; i++) {
                        rows[i].setAttribute('data-original-index', i);
                        appTableIndex.push(buildRowIndex(rows[i], i));
                    }
                }

                initAppTableIndex();

                function updateSingleRowIndex(row) {
                    if (!row) return;
                    for (var i = 0; i < appTableIndex.length; i++) {
                        if (appTableIndex[i].el === row) {
                            appTableIndex[i] = buildRowIndex(row, appTableIndex[i].origIndex);
                            // Xóa toàn bộ cache vì không biết cột nào thay đổi
                            invalidateFilterCache();
                            break;
                        }
                    }
                }

                // Lấy danh sách giá trị lọc cực nhanh từ bộ nhớ
                function getUniqueValuesAndCounts(targetCol) {
                    var counts = {};
                    for (var i = 0; i < appTableIndex.length; i++) {
                        var vals = appTableIndex[i][targetCol] || [];
                        for (var j = 0; j < vals.length; j++) {
                            var v = vals[j];
                            counts[v] = (counts[v] || 0) + 1;
                        }
                    }
                    return counts;
                }

                // Mở dropdown lọc
                $(document).on('click', '.btn-table-col-filter', function(e) {
                    e.stopPropagation();
                    var btn = $(this);
                    var targetCol = btn.data('col-target');

                    if ($filterPopup.is(':visible') && currentTargetCol === targetCol) {
                        $filterPopup.hide();
                        return;
                    }

                    currentTargetCol = targetCol;
                    currentTriggerBtn = btn;

                    var colName = COLUMN_LABELS[targetCol] || targetCol;
                    $('#col-filter-title').text('Filter ' + colName);
                    $('#col-filter-search-input').val('').attr('placeholder', 'Search ' + colName
                        .toLowerCase() + '...');
                    $('#col-filter-all-label').text('All ' + colName);

                    var cached = getCachedFilterOptions(targetCol);
                    var counts = cached.counts;
                    var sortedVals = cached.sortedVals;

                    var selectedSet = activeFilters[targetCol] || null;
                    var isAllChecked = (selectedSet === null || selectedSet.size === sortedVals.length);

                    var html = '';
                    sortedVals.forEach(function(val) {
                        var isChecked = isAllChecked || (selectedSet && selectedSet.has(val));
                        var escVal = $('<div>').text(val).html();
                        html += '<label class="filter-item" data-val="' + escVal + '">' +
                            '<input type="checkbox" class="col-filter-chk-item" value="' + escVal +
                            '" ' + (isChecked ? 'checked' : '') + '>' +
                            '<span class="item-text" title="' + escVal + '">' + escVal + '</span>' +
                            '<span class="item-count">' + counts[val] + '</span>' +
                            '</label>';
                    });

                    $('#col-filter-options-container').html(html);
                    $('#col-filter-check-all').prop('checked', isAllChecked);

                    var rect = btn[0].getBoundingClientRect();
                    var popupWidth = 260;
                    var left = rect.left;
                    if (left + popupWidth > $(window).width() - 10) {
                        left = $(window).width() - popupWidth - 10;
                    }

                    $filterPopup.css({
                        top: (rect.bottom + 6) + 'px',
                        left: Math.max(10, left) + 'px',
                        display: 'block'
                    });

                    $('#col-filter-search-input').focus();
                });

                // Tìm kiếm trong dropdown lọc
                $('#col-filter-search-input').on('input', function() {
                    var query = $(this).val().toLowerCase().trim();
                    $('#col-filter-options-container .filter-item').each(function() {
                        var text = $(this).text().toLowerCase();
                        $(this).toggle(text.indexOf(query) !== -1);
                    });
                });

                // Chọn / Bỏ chọn tất cả
                $('#col-filter-check-all').on('change', function() {
                    var isChecked = $(this).is(':checked');
                    $('#col-filter-options-container .filter-item:visible .col-filter-chk-item').prop('checked',
                        isChecked);
                });

                // Cập nhật Select All khi thay đổi item
                $(document).on('change', '.col-filter-chk-item', function() {
                    var total = $('#col-filter-options-container .col-filter-chk-item').length;
                    var checked = $('#col-filter-options-container .col-filter-chk-item:checked').length;
                    $('#col-filter-check-all').prop('checked', total === checked);
                });

                // Áp dụng bộ lọc (APPLY)
                $('#btn-col-filter-apply').on('click', function() {
                    if (!currentTargetCol) return;

                    var total = $('#col-filter-options-container .col-filter-chk-item').length;
                    var checkedItems = $('#col-filter-options-container .col-filter-chk-item:checked');

                    if (total === 0 || checkedItems.length === total) {
                        // Không có option hoặc chọn tất cả -> bỏ lọc
                        delete activeFilters[currentTargetCol];
                        if (currentTriggerBtn) currentTriggerBtn.removeClass('active');
                    } else if (checkedItems.length === 0) {
                        // Không chọn gì -> lọc ra rỗng hoàn toàn (không match bất kỳ dòng nào)
                        activeFilters[currentTargetCol] = new Set();
                        if (currentTriggerBtn) currentTriggerBtn.addClass('active');
                    } else {
                        var selectedSet = new Set();
                        checkedItems.each(function() {
                            selectedSet.add(this.value);
                        });
                        activeFilters[currentTargetCol] = selectedSet;
                        if (currentTriggerBtn) currentTriggerBtn.addClass('active');
                    }

                    applyAllTableFilters();
                    $filterPopup.hide();
                });

                // Reset bộ lọc
                $('#btn-col-filter-reset').on('click', function() {
                    if (!currentTargetCol) return;
                    delete activeFilters[currentTargetCol];
                    if (currentTriggerBtn) {
                        currentTriggerBtn.removeClass('active');
                    }
                    applyAllTableFilters();
                    $filterPopup.hide();
                });

                // ===================== SERVER-SIDE SEARCH WITH DEBOUNCE / ENTER =====================
                var searchSubmitTimer = null;
                var initialSearchVal = $('#input-search-app').val() ? $('#input-search-app').val().trim() : '';

                // Giữ focus và con trỏ ở cuối input khi trang vừa tải lại sau khi tìm kiếm
                if (initialSearchVal) {
                    var searchInputEl = document.getElementById('input-search-app');
                    if (searchInputEl) {
                        var valLen = searchInputEl.value.length;
                        searchInputEl.focus();
                        searchInputEl.setSelectionRange(valLen, valLen);
                    }
                }

                $('#input-search-app').on('keydown', function(e) {
                    if (e.key === 'Enter') {
                        e.preventDefault();
                        if (searchSubmitTimer) clearTimeout(searchSubmitTimer);
                        $('#search-app-form').submit();
                    }
                });

                $('#input-search-app').on('input', function() {
                    var val = $(this).val().trim();
                    if (val === initialSearchVal) return;

                    if (searchSubmitTimer) clearTimeout(searchSubmitTimer);
                    // Tự động tìm kiếm server-side sau 750ms ngừng gõ
                    searchSubmitTimer = setTimeout(function() {
                        $('#search-app-form').submit();
                    }, 750);
                });

                // Áp dụng tất cả bộ lọc với hiệu năng cao 
                function applyAllTableFilters() {
                    var filterCols = Object.keys(activeFilters);
                    var hasFilterCols = filterCols.length > 0;
                    var visibleCount = 0;

                    for (var i = 0; i < appTableIndex.length; i++) {
                        var item = appTableIndex[i];
                        var match = true;

                        // 1. Kiểm tra các bộ lọc cột Excel
                        if (match && hasFilterCols) {
                            for (var j = 0; j < filterCols.length; j++) {
                                var col = filterCols[j];
                                var allowedSet = activeFilters[col];
                                if (allowedSet) {
                                    var vals = item[col] || [];
                                    var hasMatch = false;
                                    for (var k = 0; k < vals.length; k++) {
                                        if (allowedSet.has(vals[k])) {
                                            hasMatch = true;
                                            break;
                                        }
                                    }
                                    if (!hasMatch) {
                                        match = false;
                                        break;
                                    }
                                }
                            }
                        }

                        // Thay đổi display trực tiếp trên DOM Element không qua jQuery wrapper
                        if (match) {
                            if (item.el.style.display === 'none') item.el.style.display = '';
                            visibleCount++;
                        } else {
                            if (item.el.style.display !== 'none') item.el.style.display = 'none';
                        }
                    }

                    var $noResultRow = $('#table-no-filter-results');
                    if (visibleCount === 0 && appTableIndex.length > 0) {
                        if ($noResultRow.length === 0) {
                            var colCount = document.querySelectorAll('table thead tr th').length || 14;
                            $('table tbody').append('<tr id="table-no-filter-results"><td colspan="' + colCount +
                                '" class="text-center py-4 text-muted"><i class="fa fa-info-circle me-2"></i>Không tìm thấy dữ liệu phù hợp với tìm kiếm hoặc bộ lọc.</td></tr>'
                            );
                        } else {
                            $noResultRow.show();
                        }
                    } else if ($noResultRow.length) {
                        $noResultRow.hide();
                    }
                }

                // Cập nhật khi có thay đổi store / admob / user
                $('.app-field-select').on('change', function() {
                    var field = $(this).data('field');
                    updateSingleRowIndex(this.closest('tr'));
                    invalidateFilterCache(field === 'store_id' ? 'store' : field === 'admob_id' ? 'admob' :
                        null);
                });

                // ===================== SUPERVISOR TABS =====================
                var activeSupervisorTab = 'mine'; // 'mine' hoặc target_id dạng string

                function applySupervisorTabFilter() {
                    if (!SUPERVISOR_TARGETS || SUPERVISOR_TARGETS.length === 0) return;
                    for (var i = 0; i < appTableIndex.length; i++) {
                        var row = appTableIndex[i].el;
                        var supervisedBy = [];
                        try {
                            var raw = row.getAttribute('data-supervised-by');
                            supervisedBy = raw ? JSON.parse(raw) : [];
                        } catch (e) {
                            supervisedBy = [];
                        }

                        if (activeSupervisorTab === 'mine') {
                            // Chỉ hiện row mà user trực tiếp tham gia (data-direct-member="1")
                            if (row.getAttribute('data-direct-member') === '0') {
                                row.setAttribute('data-sv-hidden', '1');
                            } else {
                                row.removeAttribute('data-sv-hidden');
                            }
                        } else {
                            var tid = parseInt(activeSupervisorTab, 10);
                            if (supervisedBy.indexOf(tid) === -1) {
                                row.setAttribute('data-sv-hidden', '1');
                            } else {
                                row.removeAttribute('data-sv-hidden');
                            }
                        }
                    }
                    // Không tự gọi applyAllTableFilters() — để caller quyết định
                }

                // Wrap applyAllTableFilters để tích hợp sv-hidden
                var _origApply = applyAllTableFilters;
                applyAllTableFilters = function() {
                    var filterCols = Object.keys(activeFilters);
                    var hasFilterCols = filterCols.length > 0;
                    var visibleCount = 0;
                    for (var i = 0; i < appTableIndex.length; i++) {
                        var item = appTableIndex[i];
                        var match = true;
                        if (item.el.getAttribute('data-sv-hidden') === '1') match = false;
                        if (match && hasFilterCols) {
                            for (var j = 0; j < filterCols.length; j++) {
                                var col = filterCols[j];
                                var allowedSet = activeFilters[col];
                                if (allowedSet) {
                                    var vals = item[col] || [];
                                    var hasMatch = false;
                                    for (var k = 0; k < vals.length; k++) {
                                        if (allowedSet.has(vals[k])) {
                                            hasMatch = true;
                                            break;
                                        }
                                    }
                                    if (!hasMatch) {
                                        match = false;
                                        break;
                                    }
                                }
                            }
                        }
                        if (match) {
                            if (item.el.style.display === 'none') item.el.style.display = '';
                            visibleCount++;
                        } else {
                            if (item.el.style.display !== 'none') item.el.style.display = 'none';
                        }
                    }
                    var $noResultRow = $('#table-no-filter-results');
                    if (visibleCount === 0 && appTableIndex.length > 0) {
                        if ($noResultRow.length === 0) {
                            var colCount = document.querySelectorAll('table thead tr th').length || 14;
                            $('table tbody').append('<tr id="table-no-filter-results"><td colspan="' + colCount +
                                '" class="text-center py-4 text-muted"><i class="fa fa-info-circle me-2"></i>Không tìm thấy dữ liệu phù hợp.</td></tr>'
                            );
                        } else {
                            $noResultRow.show();
                        }
                    } else if ($noResultRow.length) {
                        $noResultRow.hide();
                    }
                };

                $(document).on('click', '#supervisorTabList .nav-link', function() {
                    $('#supervisorTabList .nav-link').removeClass('active');
                    $(this).addClass('active');
                    activeSupervisorTab = $(this).data('target-id').toString();
                    applySupervisorTabFilter();
                    applyAllTableFilters();
                });
                // ===================== END SUPERVISOR TABS =====================

                // ===================== DEFAULT STATUS FILTER (Remove & Unpublic) =====================
                function isDefaultExcludedStatus(statusName) {
                    var s = (statusName || '').trim().toLowerCase();
                    return s === 'remove' || s === 'unpublic';
                }

                function initDefaultStatusFilter() {
                    var statusCounts = getUniqueValuesAndCounts('status');
                    var statusVals = Object.keys(statusCounts);
                    var hasExcluded = statusVals.some(function(st) {
                        return isDefaultExcludedStatus(st);
                    });

                    if (hasExcluded) {
                        var defaultAllowedSet = new Set();
                        statusVals.forEach(function(st) {
                            if (!isDefaultExcludedStatus(st)) {
                                defaultAllowedSet.add(st);
                            }
                        });

                        if (defaultAllowedSet.size > 0) {
                            activeFilters['status'] = defaultAllowedSet;
                            $('.btn-table-col-filter[data-col-target="status"]').addClass('active');
                        }
                    }
                }

                // Khởi tạo lọc mặc định khi tải trang
                initDefaultStatusFilter();
                // Áp dụng supervisor tab ngay khi load (tab "Của tôi" active mặc định)
                applySupervisorTabFilter();
                applyAllTableFilters();

                $('#btn-close-filter').on('click', function() {
                    $filterPopup.hide();
                });

                $(document).on('click', function(e) {
                    if (!$(e.target).closest('#table-column-filter-popup, .btn-table-col-filter').length) {
                        $filterPopup.hide();
                    }
                });

                $filterPopup.on('click', function(e) {
                    e.stopPropagation();
                });

                // ===================== SERVER-SIDE COLUMN SORTING =====================
                $(document).on('click', '.btn-table-col-sort', function(e) {
                    e.preventDefault();
                    var targetCol = $(this).data('col-target');
                    var url = new URL(window.location.href);
                    var currentSort = url.searchParams.get('sort') || 'stt';
                    var currentDir = (url.searchParams.get('direction') || 'desc').toLowerCase();

                    var nextDir = 'asc';
                    if (currentSort === targetCol) {
                        nextDir = (currentDir === 'asc') ? 'desc' : 'asc';
                    } else {
                        nextDir = 'asc';
                    }

                    url.searchParams.set('sort', targetCol);
                    url.searchParams.set('direction', nextDir);
                    url.searchParams.delete('page'); // Luôn quay về trang 1 khi thay đổi thứ tự sắp xếp
                    window.location.href = url.toString();
                });

            });
        </script>
    @endpush
@endsection