{{-- Project Details Box - Reusable Component --}}
<div class="box-cont">
    <h3 class="side-title">
        @lang('Project Card')
    </h3>
    <table class="project-details-table">
        {{-- Project Status --}}
        @if(in_array($project->status , [\App\Models\Project::APPROVED, \App\Models\Project::RUNNING, \App\Models\Project::PENDING, \App\Models\Project::COMPLETED, \App\Models\Project::REJECTED, \App\Models\Project::CANCELLED, \App\Models\Project::CLOSED]))
        <tr>
            <td class="details-label">
                <span class="label-content"> حالة المشروع </span>
            </td>
            <td class="details-value">
                @if($project->status == \App\Models\Project::COMPLETED)
                    <span class="project-status project-status-completed">
                    {{$project->getCurrentStatus()}}
                    </span>
                @elseif($project->status == \App\Models\Project::REJECTED)
                    <span class="project-status project-status-rejected">
                    {{$project->getCurrentStatus()}}
                    </span>
                @elseif($project->status == \App\Models\Project::CANCELLED)
                    <span class="project-status project-status-cancelled">
                    {{$project->getCurrentStatus()}}
                    </span>
                @elseif($project->status == \App\Models\Project::PENDING)
                    <span class="project-status project-status-pending">
                    {{$project->getCurrentStatus()}}
                    </span>
                @elseif($project->status == \App\Models\Project::RUNNING)
                    <span class="project-status project-status-running">
                    {{$project->getCurrentStatus()}}
                    </span>
                @elseif($project->status == \App\Models\Project::CLOSED)
                    <span class="project-status project-status-closed">
                    {{$project->getCurrentStatus()}}
                    </span>
                @else
                    <span class="project-status project-status-active">
                    {{$project->getCurrentStatus()}}
                    </span>
                @endif
            </td>
        </tr>
        @endif
        
        <tr>
            <td class="details-label">
                <span class="label-content"> @lang('Category') </span>
            </td>
            <td class="details-value">
                @if($project->category)
                    {{ $project->category->name }}
                @else
                    <span class="value">@lang('N/A')</span>
                @endif
            </td>
        </tr>
        
        <tr>
            <td class="details-label">
                <span class="label-content"> الميزانية </span>
                </span>
            </td>
            <td class="details-value">
                <span class="value">
                    @if($project->budget_type == \App\Models\Project::BUDGET_TYPE_HOURLY)
                        {{$project->price_from}} - {{$project->price_to}} $ @lang('Hourly Based')
                    @else
                        {{$project->price }} $
                    @endif
                </span>
            </td>
        </tr>
        
        <tr>
            <td class="details-label">
                <span class="label-content"> مدة التنفيذ </span>
            </td>
            <td class="details-value">
                <span class="value">
                    @if($project->delivery_days)
                        {{ $project->delivery_days }} @lang('Day')
                    @elseif($project->time)
                        {{ getTrans($project->time->display_name, lang()) }}
                    @endif
                </span>
            </td>
        </tr>
        
        <tr>
            <td class="details-label">
                <span class="label-content">@lang('front.Payment Method')</span>
                </span>
            </td>
            <td class="details-value">
                <span class="value">
                    @if($project->size)
                        {{ getTransPaymentMethodShort($project->size->details, lang()) }}
                    @endif
                </span>
            </td>
        </tr>
        
        <tr>
            <td class="details-label">
                <span class="label-content"> عدد العروض </span>
            </td>
            <td class="details-value">
                <span class="value">{{count($project->offers)}}</span>
            </td>
        </tr>
        
        <tr>
            <td class="details-label">
                <span class="label-content">
                    المشاهدات
                </span>
            </td>
            <td class="details-value">
                <span class="value">{{$project->views_count ?? 0}}</span>
            </td>
        </tr>
        
        <tr>
            <td class="details-label">
                <span class="label-content">
                    تم النشر
                </span>
            </td>
            <td class="details-value">
                <span class="value">{{localized_friendly_time($project->created_at)}}</span>
            </td>
        </tr>
        @if($project->skills->isNotEmpty())
        <tr>
            <td class="details-label">
                <span class="label-content">@lang('Skills')</span>
            </td>
        </tr>
        @endif
    </table>

    @if($project->skills->isNotEmpty())
    <div class="project-skills-wrapper" style="margin-top: -15px; background-color: #fff; padding: 10px;">
        <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($project->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>

@once
<script>
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