<div>
@php
$prevStage = '';
$uniqueStages = collect($activities)->pluck('old_stage')->unique();
@endphp
@foreach($uniqueStages as $stage)
<div class="bg-white dark:bg-gray-900 rounded-lg py-2 mb-3 relative">
<div class="absolute right-3 top-1 text-xs font-bold dark:text-gray-300">
{{ ucwords(stage_name($stage)) }}
</div>
@foreach($activities as $key => $item)
@php
$nextActivity = ($key + 1 < count($activities)) ? $activities[$key + 1]->old_stage : '';
$stageMatch = ($item->old_stage === $stage);
$showStage = ($stageMatch && ($nextActivity !== $stage));
@endphp
<div class="relative py-2 px-5">
@if(in_array($item->type, $this->typesWithOnlyTitle))
<div class="relative flex items-start space-x-3">
<div class="relative">
<img src="{{ $item->user->image_url ?? default_404_image() }}"
class="h-8 w-8 object-cover rounded-full bg-gray-400 flex items-center justify-center"
alt="img">
</div>
<div class="min-w-0 flex-1">
<div class="flex items-center">
<div class="text-sm font-medium text-gray-900 dark:text-gray-300">
<span class="font-bold">{{ $item->user->name ?? '' }}</span>
{{ $item->title }}
</div>
</div>
<div class="mt-px text-xs text-gray-600 dark:text-gray-300">
{{ format_date($item->created_at, FORMAT_DATE_LONG) }}
</div>
</div>
</div>
@else
@if($item->child)
<span class="absolute ml-4 w-0.5 bg-gray-200 dark:bg-gray-800"
style="height: 81%"
aria-hidden="true"></span>
<div class="relative flex items-start space-x-3">
<div class="relative">
<img
src="{{ $item->user->image_url ?? default_404_image() }}"
class="h-8 w-8 object-cover rounded-full bg-gray-400 flex items-center justify-center"
alt="img">
</div>
<div class="min-w-0 flex-1">
<div class="flex items-center">
<div class="text-sm font-medium text-gray-900 dark:text-gray-300">
<span class="font-bold">{{ $item->user->name ?? '' }}</span>
{{ $item->title }}
</div>
</div>
<div class="mt-px text-xs text-gray-600 dark:text-gray-300">
{{ format_date($item->created_at, FORMAT_DATE_LONG) }}
</div>
@php($newStatusBadge = status($item->status))
@php($oldStatusBadge = status($item->old_status))
<div class="text-sm text-gray-700 dark:text-gray-300">
<div class="flex pt-2">
<div
class="{{ $oldStatusBadge['classes'] ?? '-' }} border-2 rounded-md py-px px-2 uppercase font-semibold"
style="font-size: 9px">{{ $oldStatusBadge['name'] ?? '-' }}</div>
<p class="px-1">
<svg xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2"
d="M17 8l4 4m0 0l-4 4m4-4H3"/>
</svg>
</p>
<div
class="{{ $newStatusBadge['classes'] ?? '-' }} border-2 rounded-md py-px px-2 uppercase font-semibold"
style="font-size: 9px">{{ $newStatusBadge['name'] ?? 'NN' }}</div>
</div>
</div>
</div>
</div>
<ul class="mt-3 relative">
<li>
<span class="absolute top-10 left-4 h-0.5 w-12 bg-gray-200 dark:bg-gray-800"
aria-hidden="true"></span>
</li>
<li class="ml-20">
<div class="relative flex space-x-2">
<div class="min-w-0 flex-1">
<div class="flex items-center">
<div class="text-sm font-medium text-gray-900 dark:text-gray-300">
<span class="font-bold">{{ $item->user->name ?? '' }}</span>
changed
the Stage
</div>
</div>
<div class="text-sm text-gray-700 dark:text-gray-300">
<div class="flex pt-2">
<div
class="border-2 rounded-md border-gray-400 py-px px-2 uppercase font-semibold"
style="font-size: 9px">
{{ stage_name($item->child->data['old_stage']) }}
</div>
<span class="px-1"><svg xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6" fill="none"
viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
</svg></span>
<div
class="border-2 rounded-md border-gray-400 py-px px-2 uppercase font-semibold"
style="font-size: 9px">
{{ stage_name($item->child->data['new_stage']) }}
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
@endif
@if(!$item->child)
<div class="relative flex items-start space-x-3">
<div class="relative">
<img
src="{{ $item->user->image_url ?? default_404_image() }}"
class="h-8 w-8 object-cover rounded-full bg-gray-400 flex items-center justify-center"
alt="img">
</div>
<div class="min-w-0 flex-1">
<div class="flex items-center">
<div class="text-sm font-medium text-gray-900 dark:text-gray-300">
<span class="font-bold">{{ $item->user->name ?? '' }}</span>
{{ $item->title }}
</div>
</div>
<div class="mt-px text-xs text-gray-600 dark:text-gray-300">
{{ format_date($item->created_at, FORMAT_DATE_LONG) }}
</div>
@php($newStatusBadge = ($item->data['new_title'] ?? null) ?? ($item->data['new_description'] ?? null) ?? ($item->data['new'] ?? null) ?? status($item->status))
@php($oldStatusBadge = ($item->data['old_title'] ?? null) ?? ($item->data['old_description'] ?? null) ?? ($item->data['old'] ?? null) ?? status($item->old_status))
<div class="text-sm text-gray-700 dark:text-gray-300">
<div class="flex pt-2">
<div
class="{{ $oldStatusBadge['classes'] ?? '-' }} border-2 rounded-md py-px px-2 uppercase font-semibold"
style="font-size: 9px">
@if(is_array($oldStatusBadge) )
{{ $oldStatusBadge['name'] }}
@else
{{$oldStatusBadge}}
@endif
</div>
<p class="px-1">
<svg xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2"
d="M17 8l4 4m0 0l-4 4m4-4H3"/>
</svg>
</p>
<div
class="{{ $newStatusBadge['classes'] ?? '-' }} border-2 rounded-md py-px px-2 uppercase font-semibold"
style="font-size: 9px">
@if(is_array($newStatusBadge))
{{ $newStatusBadge['name'] }}
@else
{{$newStatusBadge}}
@endif
</div>
</div>
</div>
</div>
</div>
@endif
@endif
</div>
@if ($showStage)
@break
@endif
@endforeach
</div>
@endforeach
</div>