@php
    $isOnline = false;
    if($user->last_login) {
        try {
            $isOnline = \Carbon\Carbon::parse($user->last_login)->diffInMinutes(now()) < 10;
        } catch (\Exception $e) {
            $isOnline = false;
        }
    }
@endphp
<div class="freelancer-item {{ $isOnline ? 'active' : '' }}">
    <div class="freelancer-img">
        <div style="position: relative; width: 70px; height: 70px;">
            <a href="{{route('freelancers.details',$user->username)}}" class="freelancer-img-link">
                <img src="{{ $user->avatar_thumb_url }}" class="img-fluid" loading="lazy" decoding="async" width="70" height="70">
            </a>
            @if($user->identity_verified_at)
            <span class="verified-badge" title="هوية موثقة">
                <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none">
                    <path d="M9 12l2 2 4-4" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </span>
            @endif
            <span class="status" title="{{ $isOnline ? 'متصل الآن' : 'غير متصل' }}"></span>
        </div>
    </div>
    <div class="freelancer-info">
        <div class="freelancer-head">
            <div>  
            <div style="display: flex; align-items: center; gap: 5px; flex-wrap: wrap;">  
                <a href="{{route('freelancers.details',$user->username)}}" class="freelancer-name">
                    {{$user->name}}
                </a>
                @php $cardHighestBadge = $user->highestBadge(); @endphp
                @if($cardHighestBadge)
                    @php
                        $cardIconSvg = match($cardHighestBadge->slug) {
                            'ready-to-work' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>',
                            'rising-star'   => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>',
                            'profit-pro'    => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>',
                            'ribhi-elite'   => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M5 16L3 5l5.5 5L12 4l3.5 6L21 5l-2 11H5zm0 2h14v2H5v-2z"/></svg>',
                            default => '',
                        };
                    @endphp
                    <div class="badge-icon-only" style="--badge-color: {{ $cardHighestBadge->color }};">
                        <div class="badge-icon-only__icon badge-icon-only__icon--sm" style="background: {{ $cardHighestBadge->color }}20; color: {{ $cardHighestBadge->color }};">
                            {!! $cardIconSvg !!}
                        </div>
                        <div class="badge-icon-only__tooltip">
                            وسم {{ $cardHighestBadge->name }}
                        </div>
                    </div>
                @endif
            </div>

                @if($user->category)
                    <div style="font-size: 12px; color: #707070; margin-bottom: 5px;">
                       @if($user->subCategory)
                           <a style="color: #707070;" href="{{ route('sub_category.show', ['id' => $user->subCategory->id, 'slug' => $user->subCategory->slug]) }}">{{ $user->subCategory->name }}</a>
                       @else
                           <a style="color: #707070;" href="{{ route('category.show', ['id' => $user->category->id, 'slug' => $user->category->slug]) }}">{{ $user->category?->name }}</a>
                       @endif
                    </div>
                @endif
            </div>
            <div class="freelancer-actions">
                @if(auth()->check())
                    <button class="addToFav {{ $user->isFavoritedBy(auth()->id()) ? 'active' : '' }}" 
                            data-fav-url="{{ route('like.toggle', ['type' => 'user', 'id' => $user->id]) }}"
                            title="{{ $user->isFavoritedBy(auth()->id()) ? 'إزالة من المفضلة' : 'إضافة للمفضلة' }}">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
                        </svg>
                    </button>
                @endif

                @if(auth()->check() && auth()->user()->isProjectOwner())
                    <a href="javascript:void(0);"
                       class="sendMsg"
                       title="أرسل مشروع خاص"
                       onclick="openSendProjectModal('{{ $user->username }}', '{{ addslashes($user->first_name) }}', 'دعوة للعمل')">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <line x1="22" y1="2" x2="11" y2="13"></line>
                            <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
                        </svg>
                    </a>
                @endif
            </div>
        </div>
        <div class="freelancer-sec-head">
            <div class="rating">
                <span class="@if($user->rating > 0) active @endif">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 17.554 16.677">
                        <path d="M11.777,16.4,17.2,19.677l-1.439-6.17,4.792-4.152-6.311-.535L11.777,3,9.311,8.819,3,9.355l4.792,4.152-1.439,6.17Z" transform="translate(-3 -3)" />
                    </svg>
                </span>
                <span class="@if($user->rating > 1) active @endif">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 17.554 16.677">
                        <path d="M11.777,16.4,17.2,19.677l-1.439-6.17,4.792-4.152-6.311-.535L11.777,3,9.311,8.819,3,9.355l4.792,4.152-1.439,6.17Z" transform="translate(-3 -3)" />
                    </svg>
                </span>
                <span class="@if($user->rating > 2) active @endif ">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 17.554 16.677">
                        <path d="M11.777,16.4,17.2,19.677l-1.439-6.17,4.792-4.152-6.311-.535L11.777,3,9.311,8.819,3,9.355l4.792,4.152-1.439,6.17Z" transform="translate(-3 -3)" />
                    </svg>
                </span>
                <span class="@if($user->rating > 3) active @endif">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 17.554 16.677">
                        <path d="M11.777,16.4,17.2,19.677l-1.439-6.17,4.792-4.152-6.311-.535L11.777,3,9.311,8.819,3,9.355l4.792,4.152-1.439,6.17Z" transform="translate(-3 -3)" />
                    </svg>
                </span>
                <span class="@if($user->rating > 4) active @endif">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 17.554 16.677">
                        <path d="M11.777,16.4,17.2,19.677l-1.439-6.17,4.792-4.152-6.311-.535L11.777,3,9.311,8.819,3,9.355l4.792,4.152-1.439,6.17Z" transform="translate(-3 -3)" />
                    </svg>
                </span>
            </div>
            <div class="feats">
                <span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#8c8c96" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
                    </svg>
                    % {{ $user->completedProjectsRate() }} إكمال المشاريع
                </span>
                <span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#8c8c96" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <polyline points="20 6 9 17 4 12"></polyline>
                    </svg>
                    {{ $user->totalCompletedProjects() }} مشروع مكتمل
                </span>
            </div>
        </div>
        @php
            $userDesc       = $user->description ? trim(strip_tags($user->description)) : '';
            $userIsLongDesc = mb_strlen($userDesc) > 275;
            $userShortDesc  = $userIsLongDesc ? \Illuminate\Support\Str::limit($userDesc, 275, '') : $userDesc;
        @endphp
        <p class="freelancer-summary">
            @if($userDesc !== '')
                <span id="user-summary-short-{{ $user->id }}">{{ $userShortDesc }}@if($userIsLongDesc)<span class="summary-ellipsis">... </span><a href="javascript:void(0)" class="project-more-link" onclick="toggleUserExtra({{ $user->id }})">@lang('front.More')</a>@endif</span>
                <span id="user-summary-full-{{ $user->id }}" style="display:none;">{{ $userDesc }} <a href="javascript:void(0)" class="project-more-link" onclick="toggleUserExtra({{ $user->id }})">@lang('front.Less')</a></span>
            @else
                <span>لم يكتب نبذة بعد</span>
            @endif
        </p>

        @if($user->skills->isNotEmpty())
            <div class="project-skills-wrapper">
                <button type="button" class="skills-nav skills-nav-prev" aria-label="prev" onclick="scrollSkills(this, -1)">
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                        <polyline points="15 18 9 12 15 6"/>
                    </svg>
                </button>
                <div class="project-skills-tags" onscroll="updateSkillsNav(this)">
                    @foreach($user->skills as $skill)
                        <a href="{{ route('skill.show', ['id' => $skill->id, 'slug' => $skill->slug]) }}" class="skill-tag skill-tag-link">{{ $skill->name }}</a>
                    @endforeach
                </div>
                <button type="button" class="skills-nav skills-nav-next" aria-label="next" onclick="scrollSkills(this, 1)">
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                        <polyline points="9 18 15 12 9 6"/>
                    </svg>
                </button>
            </div>
        @endif

        <div class="feats" style="margin-top: 8px;">
            <span>
                <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#8c8c96" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7z"/>
                </svg>
                {{$user->country?->name}}
            </span>
            <span>
                <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#8c8c96" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <circle cx="12" cy="12" r="9"/>
                    <path d="M12 7v5l3 2"/>
                </svg>
                عضو منذ {{ $user->created_at->diffForHumans(null, true) }}
            </span>
        </div>

    </div>
</div>

@once
<script>
function toggleUserExtra(id) {
    var shortEl = document.getElementById('user-summary-short-' + id);
    var fullEl  = document.getElementById('user-summary-full-' + id);
    if (!shortEl || !fullEl) return;
    var showFull = fullEl.style.display === 'none';
    shortEl.style.display = showFull ? 'none'   : 'inline';
    fullEl.style.display  = showFull ? 'inline' : 'none';
}

if (typeof window.scrollSkills !== 'function') {
    window.scrollSkills = function (btn, dir) {
        var wrap   = btn.closest('.project-skills-wrapper');
        var track  = wrap.querySelector('.project-skills-tags');
        var amount = Math.max(120, Math.floor(track.clientWidth * 0.7));
        var isRTL  = getComputedStyle(track).direction === 'rtl';
        var delta  = (isRTL ? -dir : dir) * amount;
        track.scrollBy({ left: delta, behavior: 'smooth' });
    };
}

if (typeof window.updateSkillsNav !== 'function') {
    window.updateSkillsNav = function (track) {
        var wrap = track.closest('.project-skills-wrapper');
        if (!wrap) return;
        var prev = wrap.querySelector('.skills-nav-prev');
        var next = wrap.querySelector('.skills-nav-next');
        var maxScroll   = track.scrollWidth - track.clientWidth;
        var atStart     = Math.abs(track.scrollLeft) < 4;
        var atEnd       = Math.abs(Math.abs(track.scrollLeft) - maxScroll) < 4;
        var hasOverflow = maxScroll > 2;
        if (prev) prev.style.display = (hasOverflow && !atStart) ? 'flex' : 'none';
        if (next) next.style.display = (hasOverflow && !atEnd)   ? 'flex' : 'none';
    };
}

if (typeof window.updateAllSkillsNav !== 'function') {
    window.updateAllSkillsNav = function () {
        document.querySelectorAll('.project-skills-wrapper .project-skills-tags').forEach(window.updateSkillsNav);
    };
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', window.updateAllSkillsNav);
    } else {
        window.updateAllSkillsNav();
    }
    window.addEventListener('resize', window.updateAllSkillsNav);
}
</script>
@endonce