@php
    $completed = 100 * ($onboarding->completed_checklists_total / ($onboarding->checklists_count == 0 ? 1 : $onboarding->checklists_count));
@endphp
<div id="onboarding-{{ $onboarding->id }}" data-id="{{ $onboarding->id }}" class="w-full border p-5 rounded-lg flex flex-col-reverse gap-2 sm:flex-row justify-between relative overflow-hidden cursor-pointer {{ isset($isActive) && $isActive ? "active border-custom-orange-500 shadow-cstm" : "hover:border-custom-orange-500 hover:shadow-cstm"}} onboarding">
    <div class="flex-1 flex flex-col gap-4 z-[10] onboarding-content">
        <div>
            <h1 class="text-md-semibold text-custom-grey-900">
                {{ $onboarding->name }} {!! $onboarding->mandatory == 1 ? "<span class='text-custom-red-600'>*</span>" : "" !!}
            </h1>
            <div class="w-full flex flex-col lg:flex-row  gap-2">
                <p class="text-sm-regular text-custom-grey-600">

                    @php
                        $deadline = "";
                        if ( ! $onboarding->due_at ) { $deadline = ''; }

                        $daysDiff  = (Carbon\Carbon::parse($onboarding->due_at)->startOfDay())
                                        ->diff(Carbon\Carbon::parse('today')->startOfDay())
                                        ->days;

                        $created_at = parseFromFormat($user->created_at);

                        $created_at->addDays($daysDiff);

                        $deadline = $created_at->format(config('settings.date_format'));
                        //." ".config('settings.time_format')
                    @endphp

                    {{ trans('tables.due_date_title') }} : {{ $deadline }}
                    <span class="completed-date">
                        @if($onboarding->isCompleted())
                            | {{ __('forms.lbl_completed') }} : {{ App\Services\DateUtils::parseIsoDate($onboarding->useronboardings->first()->updated_at)->format(config('settings.date_format')) }}
                        @endif
                    </span>
                </p>

                {{-- <div class="flex gap-2">
                    @if ($onboarding->users->count() == 1 && $onboarding->users->contains(request()->user()->id) && $onboarding->created_by == request()->user()->id)
                        <a class="onboarding-edit" href="{{ url('tasks/'.$onboarding->id)}}/edit">
                            <x-svg-icon icon="icon-edit"/>
                        </a>

                        <a href="javscript:;" class="btn-delete"
                            data-target-parent="#onboarding-{{ $onboarding->id }}"
                            data-uri="{{url('settings/tasks/'.$onboarding->id) }}" data-id="{{ $onboarding->id }}">
                            <x-svg-icon icon="icon-trash" />
                        </a>
                    @endif
                </div> --}}

            </div>
        </div>

        <div>
            <div class="w-3/4 h-2 bg-custom-orange-25 rounded-[40px]">
                <div style="width:{{ $completed }}%" class="h-2 bg-custom-orange-500 rounded-[40px] completed_total"></div>
            </div>
        </div>

        <div class="flex lg:hidden">
            <button data-modal-id="todos-modal" class="openModal btn-primary-sm"
                type="button">
                {{ trans('title.see_tasks') }}
            </button>
        </div>
    </div>

    <div class="onboarding-content">
        <button type="button" class="{{ $onboarding->isCompleted() ? "btn-light-success" : "btn-light-danger" }} text-xs-medium completed_status">
            {{ $onboarding->isCompleted() ? trans('menu.lbl_complete') : trans('menu.lbl_incomplete') }}
        </button>
    </div>

    <div class="absolute top-12 right-4 onboarding-footer">
        <h1 class="text-custom-blue-50 text-[72px] text-wrap font-bold z-0">
            {{ $todoIndex?? 1 }}
        </h1>
    </div>
</div>