@include('front.project._modal_offer')
<div class="project-item top">
<div class="project-info">
@php
    $isOwnerView = isset($hideFavoriteButton) && $hideFavoriteButton && auth()->check() && $project->user_id == auth()->id();
    $statusBadgeStyle = '';
    $hasMenuActions   = false;
    $showPayToFeatureBtn = false;
    if ($isOwnerView) {
        $statusBadgeStyle = match($project->status) {
            \App\Models\Project::DRAFT      => 'background:#6366f1; color:#fff;',
            \App\Models\Project::PENDING    => 'background:#f59e0b; color:#fff;',
            \App\Models\Project::APPROVED   => 'background:#22c55e; color:#fff;',
            \App\Models\Project::REJECTED   => 'background:#f97316; color:#fff;',
            \App\Models\Project::RUNNING    => 'background:#3b82f6; color:#fff;',
            \App\Models\Project::COMPLETED  => 'background:#1a1a2e; color:#fff;',
            \App\Models\Project::CLOSED     => 'background:#9e9e9e; color:#fff;',
            \App\Models\Project::CANCELLED  => 'background:#DC2626; color:#fff;',
            default                         => 'background:#9e9e9e; color:#fff;',
        };
        $showPayToFeatureBtn = isset($showPayToFeature) && $showPayToFeature
            && $project->payment_type == \App\Models\Project::PAYMENT_TYPE_PAID
            && !$project->is_featured_payment;
        $hasMenuActions = in_array($project->status, [
            \App\Models\Project::DRAFT,
            \App\Models\Project::PENDING,
            \App\Models\Project::REJECTED,
            \App\Models\Project::APPROVED,
            \App\Models\Project::CLOSED,
        ]) || $showPayToFeatureBtn;
    }
    $hasOffer = auth()->check() && auth()->user()->isFreelancer()
        ? (isset($userOfferProjectIds) ? in_array($project->id, $userOfferProjectIds) : $project->offers->where('user_id', auth()->id())->first())
        : null;
    $hasHints = $project->is_private || $project->is_featured || $hasOffer;
    $showBadgesRow = $hasHints || $isOwnerView;
@endphp

@if($isOwnerView)
{{-- Hidden Forms --}}
@if($project->status == \App\Models\Project::APPROVED)
<form id="close-project-form-{{ $project->id }}" action="{{ route('user.project.close', $project->uuid) }}" method="POST" style="display:none;">
    @csrf
</form>
@endif
@if($project->status == \App\Models\Project::CLOSED)
<form id="reopen-project-form-{{ $project->id }}" action="{{ route('user.project.reopen', $project->uuid) }}" method="POST" style="display:none;">
    @csrf
</form>
@endif
@endif

{{-- Unified badges row: hints + status + 3-dots --}}
@if($showBadgesRow)
<div style="display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin-bottom:6px;">

    {{-- Hint badges (private, featured, applied) --}}
    @if($project->is_private)
    <span class="hint" style="display:inline-flex; align-items:center; gap:4px; font-size:10px; padding:2px 10px; background:#fc8b8b; color:#fff; border-radius:3px; font-weight:600;">
        <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="currentColor">
            <path d="M12 1C8.676 1 6 3.676 6 7v2H5c-1.103 0-2 .897-2 2v9c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2v-9c0-1.103-.897-2-2-2h-1V7c0-3.324-2.676-6-6-6zm0 2c2.206 0 4 1.794 4 4v2H8V7c0-2.206 1.794-4 4-4zm0 10c-1.103 0-2 .897-2 2s.897 2 2 2 2-.897 2-2-.897-2-2-2z"/>
        </svg>
        مشروع خاص
    </span>
    @endif
    @if($project->is_featured)
    <span class="hint" style="display:inline-flex; align-items:center; gap:4px; font-size:10px; padding:2px 10px; background:#b0a5f3; color:#fff; border-radius:3px; font-weight:600;">
        <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" 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>
        @lang('front.featured_project')
    </span>
    @endif
    @if($hasOffer)
    <span class="hint" style="display:inline-flex; align-items:center; gap:4px; font-size:10px; padding:2px 10px; background:#60d049; color:#fff; border-radius:3px; font-weight:600;">
        <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="currentColor">
            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
        </svg>
        تم التقديم
    </span>
    @endif

    {{-- Status badge (owner only) --}}
    @if($isOwnerView)
    <span class="project-status-badge" style="display:inline-block; font-size:10px; padding:2px 10px; border-radius:3px; font-weight:600; {{ $statusBadgeStyle }}">
        {{ $project->getCurrentStatus() }}
    </span>
    @endif

    {{-- 3-Dots menu (owner only, pushed to end) --}}
    @if($isOwnerView && $hasMenuActions)
    <div class="project-actions-menu" style="position:relative; margin-inline-start:auto;">
        <button type="button"
                class="project-actions-toggle"
                onclick="toggleProjectMenu(event, 'project-menu-{{ $project->id }}')"
                style="background:none; border:none; cursor:pointer; padding:4px 6px; border-radius:4px; color:#8c8c96; line-height:1; display:flex; align-items:center; transition:background 0.2s;"
                title="خيارات">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                <circle cx="12" cy="5" r="2"/>
                <circle cx="12" cy="12" r="2"/>
                <circle cx="12" cy="19" r="2"/>
            </svg>
        </button>
        <div id="project-menu-{{ $project->id }}"
             class="project-actions-dropdown">

            @if($project->status == \App\Models\Project::DRAFT)
            <a href="{{ route('user.project.edit', $project->uuid) }}"
               style="display:flex; align-items:center; gap:8px; padding:10px 14px; font-size:13px; color:#6366f1; text-decoration:none; font-weight:600;">
                <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none">
                    <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                أكمل وأرسل الطلب
            </a>
            @endif
            @if(in_array($project->status, [\App\Models\Project::PENDING, \App\Models\Project::REJECTED]))
            <a href="{{ route('user.project.edit', $project->uuid) }}"
               style="display:flex; align-items:center; gap:8px; padding:10px 14px; font-size:13px; color:inherit; text-decoration:none;">
                <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none">
                    <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                @lang('Edit Project')
            </a>
            @endif

            @if($showPayToFeatureBtn ?? false)
            <a href="{{ route('user.transactions.charge') . '?project_id=' . urlencode($project->uuid) . '&amount=' . urlencode(getProjectCommission()) }}"
               style="display:flex; align-items:center; gap:8px; padding:10px 14px; font-size:13px; color:inherit; text-decoration:none;">
                <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none">
                    <path d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 0 0 3-3V8a3 3 0 0 0-3-3H6a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                @lang('pay to feature')
            </a>
            @endif

            @if($project->status == \App\Models\Project::APPROVED)
            <button type="button"
                    onclick="closeProjectMenu('project-menu-{{ $project->id }}'); $('#confirm-close-modal-{{ $project->id }}').modal('show');"
                    style="display:flex; align-items:center; gap:8px; padding:10px 14px; font-size:13px; color:inherit; background:none; border:none; width:100%; cursor:pointer; text-align:right;">
                <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none">
                    <path d="M18 6L6 18M6 6l12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                إغلاق المشروع
            </button>
            @endif

            @if($project->status == \App\Models\Project::CLOSED)
            <button type="button"
                    onclick="closeProjectMenu('project-menu-{{ $project->id }}'); document.getElementById('reopen-project-form-{{ $project->id }}').submit();"
                    style="display:flex; align-items:center; gap:8px; padding:10px 14px; font-size:13px; color:inherit; background:none; border:none; width:100%; cursor:pointer; text-align:right;">
                <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none">
                    <path d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                إعادة نشر
            </button>
            @endif

        </div>
    </div>
    @endif

</div>
@endif

{{-- Confirm Close Project Modal --}}
@if($project->status == \App\Models\Project::APPROVED)
<div class="modal" id="confirm-close-modal-{{ $project->id }}" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog confirm-modal modal-md modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="modal-title">تأكيد إغلاق المشروع</h2>
            </div>
            <div class="first-confirm">
                <div class="modal-body">
                    <p>هل أنت متأكد من إغلاق المشروع؟</p>
                    <p style="font-size: 13px; color: #666; margin-top: 8px; line-height: 1.7;">
                        في حال إغلاق المشروع، لن يتمكن المستقلون من إضافة عروض جديدة عليه. ومع ذلك، سيظل بإمكانك مراجعة العروض المقدمة مسبقًا، واختيار العرض المناسب، ثم الموافقة عليه لبدء العمل.
                    </p>
                </div>
                <div class="modal-footer">
                    <a type="button" class="submit" onclick="document.getElementById('close-project-form-{{ $project->id }}').submit()">
                        تأكيد الإغلاق
                    </a>
                    <a type="button" class="cancel" data-dismiss="modal">إلغاء</a>
                </div>
            </div>
        </div>
    </div>
</div>
@endif
<div class="project-head">
<a href="{{route('project.details', [$project->id, createProjectSlug($project->title)])}}" class="project-name">
    {{$project->title}}
</a>

@if(!isset($hideFavoriteButton) || !$hideFavoriteButton)
<button class="addToFav @if(isset($favoritedProjectIds) && in_array($project->id, $favoritedProjectIds)) active @endif" 
        type="button" 
        data-fav-url="{{route('project.user.addFav',$project->uuid)}}"
        data-project-uuid="{{$project->uuid}}">
    <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">
        <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
</div>
<div class="project-sub">
<div class="foot-item">
    <div class="item-icon">
        <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>
    </div>
    <div class="item-text">
        {{localized_friendly_time($project->created_at)}}
    </div>
</div>

<div class="foot-item">
    <div class="item-icon">
        <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">
            <line x1="12" y1="1" x2="12" y2="23"></line>
            <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
        </svg>
    </div>
    <div class="item-text">
        الميزانية: {{$project->price ?? $project->price_from}}$
    </div>
</div>
<div class="foot-item">
    <div class="item-icon">
        <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="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
        </svg>
    </div>
    <div class="item-text">
        {{$project->offers_count ?? count($project->offers)}} @lang('offers')
    </div>
</div>

<div class="foot-item">
    <div class="item-icon">
        <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>
    </div>
    <div class="item-text">
        {{$project->user?->country?->name}}
    </div>
</div>

</div>

@php
    $fullDesc  = strip_tags($project->description);
    $isLongDesc = mb_strlen($fullDesc) > 310;
    $shortDesc = $isLongDesc ? \Illuminate\Support\Str::limit($fullDesc, 310, '') : $fullDesc;
@endphp

<p class="project-summary">
    <span id="summary-short-{{ $project->id }}">{{ $shortDesc }}@if($isLongDesc)<span class="summary-ellipsis">... </span><a href="javascript:void(0)" class="project-more-link" onclick="toggleProjectExtra({{ $project->id }})">@lang('front.More')</a>@endif</span>
    <span id="summary-full-{{ $project->id }}" style="display:none;">{{ $fullDesc }} <a href="javascript:void(0)" class="project-more-link" onclick="toggleProjectExtra({{ $project->id }})">@lang('front.Less')</a></span>
</p>

{{-- @if($project->category)
<a href="{{ route('category.show', $project->category->id) }}" class="project-job project-job-link">
    {{ $project->category->name }}
</a>
@else
<span class="project-job"></span>
@endif --}}


@if($project->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($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

{{-- Always-visible extras: payment verified + rating + delivery days + payment method --}}
<div class="project-sub project-extra-info" style="flex-wrap:wrap; gap:7px; margin-top:8px;">

    {{-- Payment Verification --}}
    <div class="foot-item">
        @if($project->user?->payment_verified)
        <div class="item-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#8c8c96" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                <polyline points="20 6 9 17 4 12"/>
            </svg>
        </div>
        <div class="item-text">الدفع موثق</div>
        @else
        <div class="item-icon">
            <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">
                <line x1="18" y1="6" x2="6" y2="18"/>
                <line x1="6" y1="6" x2="18" y2="18"/>
            </svg>
        </div>
        <div class="item-text">الدفع غير موثق</div>
        @endif
    </div>

    {{-- Owner Rating --}}
    @if(($project->user?->rating ?? 0) > 0)
    <div class="foot-item" title="تقييم صاحب المشروع">
        <div class="item-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 18 18">
                <path d="M9 0l2.163 6.636h6.987l-5.65 4.104 2.163 6.636L9 13.272l-5.65 4.104 2.163-6.636L0 6.636h6.987z" fill="#8c8c96"/>
            </svg>
        </div>
        <div class="item-text">{{ number_format($project->user->rating, 1) }}</div>
    </div>
    @endif

    {{-- Delivery Days --}}
    @if($project->delivery_days)
    <div class="foot-item">
        <div class="item-icon">
            <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">
                <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/>
            </svg>
        </div>
        <div class="item-text">{{ $project->delivery_days }} @lang('Day')</div>
    </div>
    @elseif($project->time)
    <div class="foot-item">
        <div class="item-icon">
            <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">
                <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/>
            </svg>
        </div>
        <div class="item-text">{{ getTrans($project->time->display_name, lang()) }}</div>
    </div>
    @endif

    {{-- Payment Method --}}
    @if($project->size)
    <div class="foot-item">
        <div class="item-icon">
            <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">
                <rect x="1" y="4" width="22" height="16" rx="2" ry="2"/><line x1="1" y1="10" x2="23" y2="10"/>
            </svg>
        </div>
        <div class="item-text">{{ getTransPaymentMethodShort($project->size->details, lang()) }}</div>
    </div>
    @endif

</div>

</div>
</div>

@once
<script>
function toggleProjectExtra(id) {
    var shortEl = document.getElementById('summary-short-' + id);
    var fullEl  = document.getElementById('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';
}

function scrollSkills(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' });
}

function updateSkillsNav(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';
}

window.updateAllSkillsNav = function () {
    document.querySelectorAll('.project-skills-wrapper .project-skills-tags').forEach(updateSkillsNav);
};

if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', window.updateAllSkillsNav);
} else {
    window.updateAllSkillsNav();
}
window.addEventListener('resize', window.updateAllSkillsNav);
function toggleProjectMenu(event, menuId) {
    event.stopPropagation();
    var menu = document.getElementById(menuId);
    var isOpen = menu.style.display === 'block';
    document.querySelectorAll('.project-actions-dropdown').forEach(function(m) {
        m.style.display = 'none';
    });
    menu.style.display = isOpen ? 'none' : 'block';
}
function closeProjectMenu(menuId) {
    var menu = document.getElementById(menuId);
    if (menu) menu.style.display = 'none';
}
document.addEventListener('click', function() {
    document.querySelectorAll('.project-actions-dropdown').forEach(function(m) {
        m.style.display = 'none';
    });
});
</script>
@endonce