@php
    $curSort = request('sort', 'stt');
    $curDir = strtolower((string) request('direction', 'desc'));
    if (!in_array($curDir, ['asc', 'desc'])) {
        $curDir = 'desc';
    }
    $isColVisible = function(string $key) use ($visibleColumns): bool {
        return !isset($visibleColumns) || !empty($visibleColumns[$key]);
    };
@endphp
<tr>
    @if ($isColVisible('stt'))
    <th class="col-filter-th" style="width: 75px;">
        <div class="d-flex align-items-center justify-content-between gap-1">
            <span class="btn-table-col-sort d-inline-flex align-items-center gap-1 cursor-pointer {{ ($curSort === 'stt' || $curSort === 'st_app') ? 'active-sort' : '' }}" data-col-target="stt"
                data-sort-dir="{{ ($curSort === 'stt' || $curSort === 'st_app') ? $curDir : 'none' }}" title="Nhấp để sắp xếp STT ({{ ($curSort === 'stt' || $curSort === 'st_app') && $curDir === 'asc' ? 'Đang Tăng dần - Nhấp để Giảm dần' : 'Đang Giảm dần - Nhấp để Tăng dần' }})">
                <span>STT</span>
                <span class="sort-icon-wrap d-inline-flex align-items-center">
                    @if (($curSort === 'stt' || $curSort === 'st_app') && $curDir === 'asc')
                        <i class="fa-solid fa-sort-up text-primary" style="font-size: 11px;"></i>
                    @elseif (($curSort === 'stt' || $curSort === 'st_app') && $curDir === 'desc')
                        <i class="fa-solid fa-sort-down text-primary" style="font-size: 11px;"></i>
                    @else
                        <i class="fa-solid fa-sort sort-icon-default text-muted" style="font-size: 11px;"></i>
                    @endif
                </span>
            </span>
            <button type="button" class="btn-table-col-filter" data-col-target="stt" title="Lọc STT">
                <i class="fa fa-filter"></i>
            </button>
        </div>
    </th>
    @endif

    @if ($isColVisible('app_name'))
    <th class="col-filter-th" style="min-width: 140px;">
        <div class="d-flex align-items-center justify-content-between gap-1">
            <span class="btn-table-col-sort d-inline-flex align-items-center gap-1 cursor-pointer {{ $curSort === 'app_name' ? 'active-sort' : '' }}" data-col-target="app_name"
                data-sort-dir="{{ $curSort === 'app_name' ? $curDir : 'none' }}" title="Nhấp để sắp xếp App Name ({{ $curSort === 'app_name' && $curDir === 'asc' ? 'Đang Tăng dần - Nhấp để Giảm dần' : 'Đang Giảm dần - Nhấp để Tăng dần' }})">
                <span>APP Name</span>
                <span class="sort-icon-wrap d-inline-flex align-items-center">
                    @if ($curSort === 'app_name' && $curDir === 'asc')
                        <i class="fa-solid fa-sort-up text-primary" style="font-size: 11px;"></i>
                    @elseif ($curSort === 'app_name' && $curDir === 'desc')
                        <i class="fa-solid fa-sort-down text-primary" style="font-size: 11px;"></i>
                    @else
                        <i class="fa-solid fa-sort sort-icon-default text-muted" style="font-size: 11px;"></i>
                    @endif
                </span>
            </span>
            <button type="button" class="btn-table-col-filter" data-col-target="app_name" title="Lọc App Name">
                <i class="fa fa-filter"></i>
            </button>
        </div>
    </th>
    @endif

    @if ($isColVisible('package'))
    <th class="col-filter-th" style="min-width: 140px;">
        <div class="d-flex align-items-center justify-content-between gap-1">
            <span class="btn-table-col-sort d-inline-flex align-items-center gap-1 cursor-pointer {{ $curSort === 'package' ? 'active-sort' : '' }}" data-col-target="package"
                data-sort-dir="{{ $curSort === 'package' ? $curDir : 'none' }}" title="Nhấp để sắp xếp Package ({{ $curSort === 'package' && $curDir === 'asc' ? 'Đang Tăng dần - Nhấp để Giảm dần' : 'Đang Giảm dần - Nhấp để Tăng dần' }})">
                <span>Package</span>
                <span class="sort-icon-wrap d-inline-flex align-items-center">
                    @if ($curSort === 'package' && $curDir === 'asc')
                        <i class="fa-solid fa-sort-up text-primary" style="font-size: 11px;"></i>
                    @elseif ($curSort === 'package' && $curDir === 'desc')
                        <i class="fa-solid fa-sort-down text-primary" style="font-size: 11px;"></i>
                    @else
                        <i class="fa-solid fa-sort sort-icon-default text-muted" style="font-size: 11px;"></i>
                    @endif
                </span>
            </span>
            <button type="button" class="btn-table-col-filter" data-col-target="package" title="Lọc Package">
                <i class="fa fa-filter"></i>
            </button>
        </div>
    </th>
    @endif

    @if ($isColVisible('status'))
    <th class="col-filter-th" style="min-width: 150px;">
        <div class="d-flex align-items-center justify-content-between gap-1">
            <span>Status</span>
            <button type="button" class="btn-table-col-filter active" data-col-target="status" title="Lọc Status">
                <i class="fa fa-filter"></i>
            </button>
        </div>
    </th>
    @endif

    @if ($isColVisible('store'))
    <th class="col-filter-th" style="min-width: 210px;">
        <div class="d-flex align-items-center justify-content-between gap-1">
            <span>Store</span>
            <button type="button" class="btn-table-col-filter" data-col-target="store" title="Lọc Store">
                <i class="fa fa-filter"></i>
            </button>
        </div>
    </th>
    @endif

    @if ($isColVisible('admob'))
    <th class="col-filter-th" style="min-width: 150px;">
        <div class="d-flex align-items-center justify-content-between gap-1">
            <span>Admob</span>
            <button type="button" class="btn-table-col-filter" data-col-target="admob" title="Lọc Admob">
                <i class="fa fa-filter"></i>
            </button>
        </div>
    </th>
    @endif

    @if ($isColVisible('test_case'))
    <th class="col-filter-th text-center col-checkbox-th">Test Case</th>
    @endif

    @if ($isColVisible('ads_script'))
    <th class="col-filter-th text-center col-checkbox-th">Ads Script</th>
    @endif

    @if ($isColVisible('check_app'))
    <th class="col-filter-th text-center col-checkbox-th">Check App</th>
    @endif

    @if ($isColVisible('designer'))
    <th class="col-filter-th" style="min-width: 140px;">
        <div class="d-flex align-items-center justify-content-between gap-1">
            <span>Designer</span>
            <button type="button" class="btn-table-col-filter" data-col-target="designer" title="Lọc Designer">
                <i class="fa fa-filter"></i>
            </button>
        </div>
    </th>
    @endif

    @if ($isColVisible('developer'))
    <th class="col-filter-th" style="min-width: 140px;">
        <div class="d-flex align-items-center justify-content-between gap-1">
            <span>Developer</span>
            <button type="button" class="btn-table-col-filter" data-col-target="developer" title="Lọc Developer">
                <i class="fa fa-filter"></i>
            </button>
        </div>
    </th>
    @endif

    @if ($isColVisible('tester'))
    <th class="col-filter-th" style="min-width: 140px;">
        <div class="d-flex align-items-center justify-content-between gap-1">
            <span>Tester</span>
            <button type="button" class="btn-table-col-filter" data-col-target="tester" title="Lọc Tester">
                <i class="fa fa-filter"></i>
            </button>
        </div>
    </th>
    @endif

    @if ($isColVisible('mkt'))
    <th class="col-filter-th" style="min-width: 130px;">
        <div class="d-flex align-items-center justify-content-between gap-1">
            <span>MKT</span>
            <button type="button" class="btn-table-col-filter" data-col-target="mkt" title="Lọc MKT">
                <i class="fa fa-filter"></i>
            </button>
        </div>
    </th>
    @endif

    @if ($isColVisible('data'))
    <th class="col-filter-th" style="min-width: 130px;">
        <div class="d-flex align-items-center justify-content-between gap-1">
            <span>Data</span>
            <button type="button" class="btn-table-col-filter" data-col-target="data" title="Lọc Data">
                <i class="fa fa-filter"></i>
            </button>
        </div>
    </th>
    @endif

    @if ($isColVisible('design_link'))
    <th class="col-filter-th">Design</th>
    @endif

    @if ($isColVisible('folder_link'))
    <th class="col-filter-th">Folder</th>
    @endif

    @if ($isColVisible('git_link'))
    <th class="col-filter-th">Git</th>
    @endif

    @if ($isColVisible('app_link'))
    <th class="col-filter-th">Link App</th>
    @endif

    @if ($isColVisible('actions'))
    <th class="col-filter-th" style="width: 100px;">Hành động</th>
    @endif
</tr>