@php
    $class= "warning";
    $progressWidth = 0;
    $itemCount = 0;
    $itemCompleted = 0;
    $itemTemporarilyCompleted = 0;
    // $itemNotCompletedCompleted = 0;
    $participants = $reasons = collect();
    $notes   = "";

    $items = $data->items;

    $reasons = $reasons->merge($data->items->whereNotNull('reason'));
    $participants = $participants->merge($data->items->whereNotNull('completed_by'));

    $itemCount = $data->total_items;

    $itemCompleted = $data->completed_items;

    $itemTemporarilyCompleted = $data->temporarily_completed_items_total;
        // $itemNotCompletedCompleted += $checklist->not_completable_items_total;

    $itemCount = $itemCount == 0 ? 1 : $itemCount;

    $progressWidth = 100 * ( $itemCompleted / $itemCount );

    if($data->status == "completed") {
        $class = $data->approved ? "stroke-custom-blue-300" : "stroke-custom-green-300";
    } elseif($data->status == "due") {
        $class = "stroke-custom-yellow-500";
    } elseif($data->status == "pending") {
        $class = "stroke-custom-orange-300";
        if($progressWidth >= 75) {
            $class = "stroke-custom-light-green-300";
        } if($progressWidth < 25) {
            $class = "stroke-custom-yellow-300";
        }
    } else {
        $class = "stroke-custom-red-300";
    }

    $circumference =  22.61 * 2 * pi();
@endphp


<div class="flex justify-center items-center gap-2">
    <div class="progress-container relative w-[56px] h-[56px]" id="progress-bar-{{$data->id}}">
        <div class="progress-content w-[56px] h-[56px]">
            <svg class="" width="56" height="56" stroke-linecap="round">
                <circle r="22.61" cx="28" cy="28" class="stroke-custom-grey-200 fill-none stroke-[5.53px]">
                </circle>
                <circle style="stroke-dasharray: {{ $circumference }}; stroke-dashoffset: {{ $circumference - $progressWidth / 100 * $circumference }};"
                    r="22.61" cx="28" cy="28"
                    class="progress {{ $class }} fill-none stroke-[5.53px] -rotate-90 origin-center">
                </circle>
            </svg>
        </div>
        <div class="absolute top-[50%] left-[50%] -translate-x-1/2 -translate-y-1/2 text-custom-grey-900 flex flex-col justify-center items-center font-normal">
            <span class=" text-[10px] text-custom-grey-800 font-semibold">{{(round($progressWidth)).'%'}}</span>
        </div>
    </div>

    @if( $progressWidth == 100 && $itemTemporarilyCompleted == 0 )
        @if( $data->supervisors()->contains('id', $user->id) )
            @if(!$data->approved)
                <a  href="javascript:;"
                    class="btn-checklist-approved-all btn-checklist-approved"
                    data-checklist-id="{{$data->id}}"
                    data-id="all"
                    >
                    <x-svg-icon icon="icon-check" width="24" height="24" />
                </a>
            @endif
        @endif
    @endif

    @if($reasons->isNotEmpty())
        @foreach ($reasons as $key => $value)
            @php
            $notes .= ($value->reason != "" ) ? ("<li><b>".($value->title)."</b><br/>- ".$value->reason."</li>") : '';
            @endphp
        @endforeach

        @if($notes != "")
            <a  class=""
                href="javascript:;"
                data-html="true"
                data-toggle="popover"
                data-placement="top"
                title=""
                data-content="<ul>{!!$notes!!}</ul>">
                <x-svg-icon class="text-custom-blue-500" icon="icon-info" width="24" height="24" />
            </a>
        @endif
    @endif

    @php
        $topicables = $topic_cases->where('topicable_id', $data->id);
    @endphp

    @if($participants->isNotEmpty())
        <a href="javascript:;" class="participants-popup text-custom-grey-500"
            data-id="{{$data->id}}"
            >
            <x-svg-icon icon="icon-users" width="28" height="28" />
        </a>
    @endif

    @if($topicables->isNotEmpty())
        <a href="javascript:;">
            <x-svg-icon icon="icon-annotation-question" width="24" height="24" />
        </a>
    @endif
</div>