@extends('front.layouts.master-auth')
@section('content')
<!-- Start Page Content -->
<section class="page-content">
    <div class="container">
        <div class="userAdmin-page-title">
            <h1 class="user-name">
                @lang('Hello') ،
                {{auth()->user()->name}}
            </h1>
        </div>

        <div class="UserAdmin-page-cont">
            <div class="dash-profile-card">
                <a href="{{ route('freelancers.details', auth()->user()->username) }}" class="dash-profile-avatar-wrap">
                    <div class="dash-profile-avatar">
                        <img src="{{ auth()->user()->avatar_thumb_url }}" alt="{{ auth()->user()->name }}" class="img-fluid">
                    </div>
                    @if(auth()->user()->identity_verified_at)
                    <span class="dash-profile-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
                </a>
                <a href="{{ route('freelancers.details', auth()->user()->username) }}" class="dash-profile-name">{{ auth()->user()->name }}</a>
                <a href="{{ route('user.profile') }}" class="dash-profile-edit-btn">
                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
                        <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
                    </svg>
                    تعديل الملف الشخصي
                </a>
            </div>

            <div class="side-cont">
                {{-- Messages box --}}
                <div class="dash-side-box">
                    <h5 class="dash-side-box-title">الرسائل</h5>
                    <ul class="dash-side-stats-list">
                        <li class="dash-side-stat-item">
                            <a href="{{ route('chat.index') }}" class="dash-side-stat-label dash-side-unread-link">
                                <span class="dash-side-unread-dot {{ $unreadMessagesCount > 0 ? 'active' : '' }}"></span>
                                غير المقروءة
                            </a>
                            <a href="{{ route('chat.index') }}" class="dash-side-stat-value dash-side-stat-unread {{ $unreadMessagesCount > 0 ? 'has-unread' : '' }}">
                                {{ $unreadMessagesCount }}
                            </a>
                        </li>
                        <li class="dash-side-stat-item">
                            <a href="{{ route('chat.index') }}" class="dash-side-stat-label dash-side-chat-link">الرسائل الواردة</a>
                            <a href="{{ route('chat.index') }}" class="dash-side-stat-value dash-side-chat-link">{{ $receivedMessagesCount }}</a>
                        </li>
                        <li class="dash-side-stat-item">
                            <a href="{{ route('chat.index') }}" class="dash-side-stat-label dash-side-chat-link">الرسائل الصادرة</a>
                            <a href="{{ route('chat.index') }}" class="dash-side-stat-value dash-side-chat-link">{{ $sentMessagesCount }}</a>
                        </li>
                        <li class="dash-side-stat-item dash-side-stat-total">
                            <a href="{{ route('chat.index') }}" class="dash-side-stat-label dash-side-chat-link">إجمالي الرسائل</a>
                            <a href="{{ route('chat.index') }}" class="dash-side-stat-value dash-side-chat-link">{{ $totalMessagesCount }}</a>
                        </li>
                    </ul>
                </div>

                {{-- Works / Portfolio box --}}
                @if(auth()->user()->isFreelancer())
                <div class="dash-side-box">
                    <h5 class="dash-side-box-title">الأعمال</h5>
                    <div class="dash-side-works-row">
                        <a href="{{ route('portfolio.show', auth()->user()->username) }}" class="dash-side-works-count">
                            <span class="dash-side-works-num">{{ $worksCount }}</span>
                            <span class="dash-side-works-lbl">إجمالي الأعمال</span>
                        </a>
                        @if(auth()->user()->isFreelancer())
                        <a href="{{ route('work.create') }}" class="dash-side-add-btn">
                            + أضف عملاً
                        </a>
                        @endif
                    </div>
                </div>
                @endif

                {{-- Ratings & Level box --}}
                @if(auth()->user()->isFreelancer())
                <div class="dash-side-box">
                    <h5 class="dash-side-box-title">التقييمات والمستوى</h5>

                    {{-- Stars rating --}}
                    <a href="{{ route('freelancers.rating', auth()->user()->username) }}" class="dash-rating-stars-row">
                        <div class="dash-rating-stars">
                            @for($s = 1; $s <= 5; $s++)
                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"
                                 fill="{{ $s <= round($userRating) ? '#f59e0b' : '#e5e7eb' }}"
                                 stroke="{{ $s <= round($userRating) ? '#f59e0b' : '#d1d5db' }}"
                                 stroke-width="1">
                                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
                            </svg>
                            @endfor
                        </div>
                        <span class="dash-rating-score">{{ number_format($userRating, 1) }}</span>
                    </a>

                    <ul class="dash-side-stats-list" style="margin-top:12px">
                        <li class="dash-side-stat-item">
                            <a href="{{ route('freelancers.rating', auth()->user()->username) }}" class="dash-side-stat-label dash-side-chat-link">عدد التقييمات</a>
                            <a href="{{ route('freelancers.rating', auth()->user()->username) }}" class="dash-side-stat-value dash-side-chat-link">{{ $ratingsCount }}</a>
                        </li>
                        <li class="dash-side-stat-item">
                            <a href="{{ route('freelancers.rating', auth()->user()->username) }}" class="dash-side-stat-label dash-side-chat-link">نسبة إتمام العقود</a>
                            <a href="{{ route('freelancers.rating', auth()->user()->username) }}"
                               class="dash-side-stat-value dash-side-chat-link"
                               style="background:{{ $completionRate >= 80 ? '#f0fdf4' : ($completionRate >= 50 ? '#fffbeb' : '#fff5f5') }};color:{{ $completionRate >= 80 ? '#4ade80' : ($completionRate >= 50 ? '#fbbf24' : '#f87171') }}">
                                {{ $completionRate }}%
                            </a>
                        </li>
                    </ul>

                    {{-- Completion rate bar --}}
                    <a href="{{ route('freelancers.rating', auth()->user()->username) }}" class="dash-completion-bar-wrap">
                        <div class="dash-completion-bar-track">
                            <div class="dash-completion-bar-fill"
                                 style="width:{{ $completionRate }}%;background:{{ $completionRate >= 80 ? '#4ade80' : ($completionRate >= 50 ? '#fbbf24' : '#f87171') }}">
                            </div>
                        </div>
                    </a>
                </div>
                @endif

            </div>
            <div class="analytical-cont">
                <div class="balance-summary-block">
                    <div class="block-head">
                        <h3 class="balance-title">
                            رصيد الحساب
                        </h3>
                        <a href="{{route('user.transactions')}}">
                            @lang('All Your Transactions')
                            <span class="arrow">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="54" height="26.12"
                                         viewBox="0 0 54 26.12">
                                        <g data-name="Group 3706">
                                            <path data-name="Path 15111"
                                                  d="M-776.774 202.806a5.291 5.291 0 0 0 .537-.414q3.386-3.355 6.765-6.718a2.057 2.057 0 0 0 .576-2.169 1.988 1.988 0 0 0-1.548-1.429 2.106 2.106 0 0 0-2.054.662q-3.846 3.827-7.7 7.646-1.551 1.54-3.1 3.084a2.1 2.1 0 0 0-.01 3.208q5.411 5.39 10.838 10.765a2.094 2.094 0 0 0 3.057.069 2.1 2.1 0 0 0-.091-3.054q-3.392-3.387-6.8-6.76c-.136-.135-.291-.252-.437-.377l.044-.135h44.297a2.132 2.132 0 0 0 2.358-2.074 2.107 2.107 0 0 0-1.976-2.134c-.193-.012-.386-.005-.58-.005h-44.06z"
                                                  transform="translate(784.044 -192.019)" />
                                        </g>
                                    </svg>
                                </span>
                        </a>
                    </div>
                    <div class="block-body">
                        <a href="{{ route('user.transactions') }}" class="item balance-item-link">
                            <h6>
                                @lang('Available to withdraw')
                            </h6>
                            <strong>
                                {{$amountToUse}} $
                            </strong>
                            <p>
                                @lang('The balance you deposited, which you can use to pay for the project auction.')
                            </p>
                        </a>
                        <a href="{{ route('user.transactions') }}" class="item balance-item-link">
                            <h6>
                                @lang('The Pending')
                            </h6>
                            <strong>
                                {{$pendingAmount}} $
                            </strong>
                            <p>
                                @lang('It includes the budget of your ongoing projects and any amount you requested to withdraw that is still in transfer, in addition to your profits in the last 14 days.')
                            </p>
                        </a>
                        <a href="{{ route('user.transactions') }}" class="item balance-item-link">
                            <h6>
                                @lang('Balance To Withdraw')
                            </h6>
                            <strong>
                                {{$amountProfit}} $
                            </strong>
                            <p>
                                @lang('It includes your profits from projects that can be withdrawn.')
                            </p>
                        </a>
                    </div>
                </div>

                <div class="states-block">
                    <div class="states-block-heading">
                        <h5>
                            @if(auth()->user()->isFreelancer())
                                إحصائيات العروض
                            @else
                                إحصائيات المشاريع
                            @endif
                        </h5>
                        @if(auth()->user()->isFreelancer())
                        <a href="{{ route('offer.list') }}" class="states-block-all-link">
                            جميع العروض
                            <span class="arrow">
                                <svg xmlns="http://www.w3.org/2000/svg" width="54" height="26.12" viewBox="0 0 54 26.12">
                                    <g data-name="Group 3706">
                                        <path data-name="Path 15111"
                                              d="M-776.774 202.806a5.291 5.291 0 0 0 .537-.414q3.386-3.355 6.765-6.718a2.057 2.057 0 0 0 .576-2.169 1.988 1.988 0 0 0-1.548-1.429 2.106 2.106 0 0 0-2.054.662q-3.846 3.827-7.7 7.646-1.551 1.54-3.1 3.084a2.1 2.1 0 0 0-.01 3.208q5.411 5.39 10.838 10.765a2.094 2.094 0 0 0 3.057.069 2.1 2.1 0 0 0-.091-3.054q-3.392-3.387-6.8-6.76c-.136-.135-.291-.252-.437-.377l.044-.135h44.297a2.132 2.132 0 0 0 2.358-2.074 2.107 2.107 0 0 0-1.976-2.134c-.193-.012-.386-.005-.58-.005h-44.06z"
                                              transform="translate(784.044 -192.019)" />
                                    </g>
                                </svg>
                            </span>
                        </a>
                        @else
                        <a href="{{ route('project.user.list') }}" class="states-block-all-link">
                            جميع المشاريع
                            <span class="arrow">
                                <svg xmlns="http://www.w3.org/2000/svg" width="54" height="26.12" viewBox="0 0 54 26.12">
                                    <g data-name="Group 3706">
                                        <path data-name="Path 15111"
                                              d="M-776.774 202.806a5.291 5.291 0 0 0 .537-.414q3.386-3.355 6.765-6.718a2.057 2.057 0 0 0 .576-2.169 1.988 1.988 0 0 0-1.548-1.429 2.106 2.106 0 0 0-2.054.662q-3.846 3.827-7.7 7.646-1.551 1.54-3.1 3.084a2.1 2.1 0 0 0-.01 3.208q5.411 5.39 10.838 10.765a2.094 2.094 0 0 0 3.057.069 2.1 2.1 0 0 0-.091-3.054q-3.392-3.387-6.8-6.76c-.136-.135-.291-.252-.437-.377l.044-.135h44.297a2.132 2.132 0 0 0 2.358-2.074 2.107 2.107 0 0 0-1.976-2.134c-.193-.012-.386-.005-.58-.005h-44.06z"
                                              transform="translate(784.044 -192.019)" />
                                    </g>
                                </svg>
                            </span>
                        </a>
                        @endif
                    </div>
                    @if(auth()->user()->isFreelancer())
                    {{-- ===== Freelancer: Available Offers + Progress Bars ===== --}}
                    <div class="states-body">
                    <a class="states-title" href="{{ route('offer.list') }}">
                        <span>{{ $monthlyOffersRemaining }}<small style="font-size:22px;font-weight:500;opacity:.7">/{{ $monthlyOffersLimit }}</small></span>
                        العروض المتاحة
                    </a>
                    <div class="states-cont">
                        @php
                            $progressItems = [
                                ['label' => 'المتاحة',          'value' => $monthlyOffersRemaining, 'color' => '#22c55e'],
                                ['label' => 'بانتظار الموافقة', 'value' => $pendingOffers,          'color' => '#f59e0b'],
                                ['label' => 'قيد التنفيذ',      'value' => $runningOffersCount,     'color' => '#3b82f6'],
                                ['label' => 'المكتملة',         'value' => $completedOffers,        'color' => '#60d049'],
                                ['label' => 'المستبعدة',        'value' => $rejectedOffers,         'color' => '#dd3e3e'],
                                ['label' => 'الملغاة / المغلقة','value' => $cancelledOffers,        'color' => '#9333ea'],
                            ];
                            $progressLimit = $monthlyOffersLimit > 0 ? $monthlyOffersLimit : 1;
                        @endphp
                        <ul class="offers-progress-list offers-progress-grid">
                            @foreach($progressItems as $item)
                            <li class="offers-progress-item rp-clickable-item">
                                <a href="{{ route('offer.list') }}" class="rp-item-link">
                                    <div class="offers-progress-header">
                                        <span class="offers-progress-label">{{ $item['label'] }}</span>
                                        <span class="offers-progress-count" style="color:{{ $item['color'] }}">{{ $item['value'] }}</span>
                                    </div>
                                    <div class="offers-progress-track">
                                        <div class="offers-progress-fill"
                                             style="width:{{ min(100, round($item['value'] / $progressLimit * 100)) }}%;background:{{ $item['color'] }}">
                                        </div>
                                    </div>
                                </a>
                            </li>
                            @endforeach
                        </ul>
                    </div>
                    </div>{{-- end states-body --}}
                    @else
                    {{-- ===== Project Owner: Projects Progress Bars ===== --}}
                    <div class="states-body">
                    <a class="states-title" href="{{ route('project.user.list') }}">
                        <span>{{$allProjectsChartCount}}</span>
                        إجمالي المشاريع
                    </a>
                    <div class="states-cont">
                        @php
                            $projectProgressItems = [
                                ['label' => 'المكتملة',        'value' => $projectCompletedCount, 'color' => '#4ade80'],
                                ['label' => 'الجارية',         'value' => $projectRunningCount,   'color' => '#60a5fa'],
                                ['label' => 'المفتوحة',        'value' => $projectOpenCount,      'color' => '#fbbf24'],
                                ['label' => 'الملغية/المغلقة', 'value' => $projectCanceledCount,  'color' => '#f87171'],
                            ];
                            $projectProgressLimit = $allProjectsChartCount > 0 ? $allProjectsChartCount : 1;
                        @endphp
                        <ul class="offers-progress-list offers-progress-grid">
                            @foreach($projectProgressItems as $item)
                            <li class="offers-progress-item rp-clickable-item">
                                <a href="{{ route('project.user.list') }}" class="rp-item-link">
                                    <div class="offers-progress-header">
                                        <span class="offers-progress-label">{{ $item['label'] }}</span>
                                        <span class="offers-progress-count" style="color:{{ $item['color'] }}">{{ $item['value'] }}</span>
                                    </div>
                                    <div class="offers-progress-track">
                                        <div class="offers-progress-fill"
                                             style="width:{{ min(100, round($item['value'] / $projectProgressLimit * 100)) }}%;background:{{ $item['color'] }}">
                                        </div>
                                    </div>
                                </a>
                            </li>
                            @endforeach
                        </ul>
                    </div>
                    </div>{{-- end states-body --}}
                    @endif
                </div>

                @if(!auth()->user()->isFreelancer())
                {{-- ===== Running Projects Block - Project Owner ===== --}}
                <div class="running-projects-block states-block">
                    <div class="states-block-heading">
                        <h5>المشاريع الجارية</h5>
                        @if(!$runningOffers->isEmpty())
                        <a href="{{ route('project.user.list') }}" class="states-block-all-link">
                            جميع المشاريع
                            <span class="arrow">
                                <svg xmlns="http://www.w3.org/2000/svg" width="54" height="26.12" viewBox="0 0 54 26.12">
                                    <g data-name="Group 3706">
                                        <path data-name="Path 15111"
                                              d="M-776.774 202.806a5.291 5.291 0 0 0 .537-.414q3.386-3.355 6.765-6.718a2.057 2.057 0 0 0 .576-2.169 1.988 1.988 0 0 0-1.548-1.429 2.106 2.106 0 0 0-2.054.662q-3.846 3.827-7.7 7.646-1.551 1.54-3.1 3.084a2.1 2.1 0 0 0-.01 3.208q5.411 5.39 10.838 10.765a2.094 2.094 0 0 0 3.057.069 2.1 2.1 0 0 0-.091-3.054q-3.392-3.387-6.8-6.76c-.136-.135-.291-.252-.437-.377l.044-.135h44.297a2.132 2.132 0 0 0 2.358-2.074 2.107 2.107 0 0 0-1.976-2.134c-.193-.012-.386-.005-.58-.005h-44.06z"
                                              transform="translate(784.044 -192.019)" />
                                    </g>
                                </svg>
                            </span>
                        </a>
                        @endif
                    </div>

                    @if($runningProjects->isEmpty())
                    <div class="running-projects-empty">
                        <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#ccc" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                            <rect x="2" y="7" width="20" height="14" rx="2"/>
                            <path d="M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2"/>
                            <line x1="12" y1="12" x2="12" y2="16"/>
                            <line x1="10" y1="14" x2="14" y2="14"/>
                        </svg>
                        <p>لا توجد مشاريع جارية حالياً</p>
                    </div>
                    @else
                    <div class="states-body">
                        <a class="states-title" href="{{ route('project.user.list') }}">
                            <span>{{ $projectRunningCount }}</span>
                            مشروع جارٍ
                        </a>
                        <div class="states-cont">
                            <ul class="offers-progress-list offers-progress-grid rp-grid">
                                @foreach($runningProjects as $runProject)
                                @php
                                    $totalDays     = $runProject->delivery_days ?? 1;
                                    $startRaw      = $runProject->updated_at ?? $runProject->created_at;
                                    $startDate     = $startRaw ? \Carbon\Carbon::parse($startRaw) : null;
                                    $elapsedDays   = $startDate ? (int) $startDate->diffInDays(now()) : 0;
                                    $remainingDays = max(0, $totalDays - $elapsedDays);
                                    $progressPct   = $totalDays > 0 ? min(100, round($elapsedDays / $totalDays * 100)) : 100;
                                    $remainingPct  = 100 - $progressPct;

                                    if ($remainingPct <= 20 || $remainingDays == 0) {
                                        $barColor = '#f87171';
                                    } elseif ($remainingPct <= 40) {
                                        $barColor = '#fbbf24';
                                    } else {
                                        $barColor = '#4ade80';
                                    }

                                    $daysLabel = $remainingDays == 0
                                        ? 'انتهى الموعد'
                                        : $remainingDays . ' يوم متبقٍ';
                                @endphp
                                <li class="offers-progress-item rp-clickable-item">
                                    <a href="{{ route('project.details', ['id' => $runProject->id, 'slug' => $runProject->slug ?? '']) }}" class="rp-item-link">
                                        <div class="offers-progress-header">
                                            <span class="rp-project-link">
                                                {{ Str::limit($runProject->title, 28) }}
                                            </span>
                                            <span class="offers-progress-count" style="color:{{ $barColor }}">{{ $daysLabel }}</span>
                                        </div>
                                        <div class="offers-progress-track">
                                            <div class="offers-progress-fill"
                                                 style="width:{{ $progressPct }}%;background:{{ $barColor }}">
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                    @endif
                </div>
                @endif

                @if(auth()->user()->isFreelancer())
                {{-- ===== Running Projects Block ===== --}}
                <div class="running-projects-block states-block">
                    {{-- Heading row --}}
                    <div class="states-block-heading">
                        <h5>المشاريع الجارية</h5>
                        @if(!$runningOffers->isEmpty())
                        <a href="{{ route('project.list') }}" class="states-block-all-link">
                            تصفح المشاريع
                            <span class="arrow">
                                <svg xmlns="http://www.w3.org/2000/svg" width="54" height="26.12" viewBox="0 0 54 26.12">
                                    <g data-name="Group 3706">
                                        <path data-name="Path 15111"
                                              d="M-776.774 202.806a5.291 5.291 0 0 0 .537-.414q3.386-3.355 6.765-6.718a2.057 2.057 0 0 0 .576-2.169 1.988 1.988 0 0 0-1.548-1.429 2.106 2.106 0 0 0-2.054.662q-3.846 3.827-7.7 7.646-1.551 1.54-3.1 3.084a2.1 2.1 0 0 0-.01 3.208q5.411 5.39 10.838 10.765a2.094 2.094 0 0 0 3.057.069 2.1 2.1 0 0 0-.091-3.054q-3.392-3.387-6.8-6.76c-.136-.135-.291-.252-.437-.377l.044-.135h44.297a2.132 2.132 0 0 0 2.358-2.074 2.107 2.107 0 0 0-1.976-2.134c-.193-.012-.386-.005-.58-.005h-44.06z"
                                              transform="translate(784.044 -192.019)" />
                                    </g>
                                </svg>
                            </span>
                        </a>
                        @endif
                    </div>

                    @if($runningOffers->isEmpty())
                    <div class="running-projects-empty">
                        <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#ccc" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                            <rect x="2" y="7" width="20" height="14" rx="2"/>
                            <path d="M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2"/>
                            <line x1="12" y1="12" x2="12" y2="16"/>
                            <line x1="10" y1="14" x2="14" y2="14"/>
                        </svg>
                        <p>لا توجد مشاريع جارية حالياً</p>
                    </div>
                    @else
                    {{-- Body: big counter + progress bars side by side --}}
                    <div class="states-body">
                        <a class="states-title" href="{{ route('offer.list') }}">
                            <span>{{ $runningOffersCount }}</span>
                            مشروع جارٍ
                        </a>
                        <div class="states-cont">
                            <ul class="offers-progress-list offers-progress-grid rp-grid">
                                @foreach($runningOffers as $runOffer)
                                @php
                                    $totalDays     = $runOffer->delivery_days ?? $runOffer->project->delivery_days ?? 1;
                                    $startRaw      = $runOffer->approved_at ?? $runOffer->created_at;
                                    $startDate     = $startRaw ? \Carbon\Carbon::parse($startRaw) : null;
                                    $elapsedDays   = $startDate ? (int) $startDate->diffInDays(now()) : 0;
                                    $remainingDays = max(0, $totalDays - $elapsedDays);
                                    $progressPct   = $totalDays > 0 ? min(100, round($elapsedDays / $totalDays * 100)) : 100;
                                    $remainingPct  = 100 - $progressPct;

                                    if ($remainingPct <= 20 || $remainingDays == 0) {
                                        $barColor = '#f87171';
                                    } elseif ($remainingPct <= 40) {
                                        $barColor = '#fbbf24';
                                    } else {
                                        $barColor = '#22c55e';
                                    }

                                    $daysLabel = $remainingDays == 0
                                        ? 'انتهى الموعد'
                                        : $remainingDays . ' يوم متبقٍ';
                                @endphp
                                <li class="offers-progress-item rp-clickable-item">
                                    <a href="{{ route('offer.show', $runOffer->uuid) }}" class="rp-item-link">
                                        <div class="offers-progress-header">
                                            <span class="rp-project-link">
                                                {{ Str::limit($runOffer->project->title, 28) }}
                                            </span>
                                            <span class="offers-progress-count" style="color:{{ $barColor }}">{{ $daysLabel }}</span>
                                        </div>
                                        <div class="offers-progress-track">
                                            <div class="offers-progress-fill"
                                                 style="width:{{ $progressPct }}%;background:{{ $barColor }}">
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                    @endif
                </div>
                @endif

            </div>
        </div>

    </div>
</section>
<!-- End Page Content -->
@endsection