{{-- Add history dropdown if approvals exist --}}
<div class="flex items-center gap-2">
    @if ($data->status == "accepted")
        <div id="status-{{ $data->id }}" class="flex gap-[4px] px-2 py-[2px] rounded-2xl items-center w-max font-medium text-[12px] leading-[18px] !text-custom-green-500 !bg-custom-green-100">{{ __('forms.lbl_accepted') }}</div>
    @elseif ($data->status == "rejected")
        <div id="status-{{ $data->id }}" class="flex gap-[4px] px-2 py-[2px] rounded-2xl items-center w-max font-medium text-[12px] leading-[18px] !text-custom-red-500 !bg-custom-red-100">{{ __('forms.lbl_rejected') }}</div>
    @elseif ($data->status == "cancelled")
        <div id="status-{{ $data->id }}" class="flex gap-[4px] px-2 py-[2px] rounded-2xl items-center w-max font-medium text-[12px] leading-[18px] !text-custom-red-500 !bg-custom-red-100">{{ __('forms.lbl_cancelled') }}</div>
    @else
        <div id="status-{{ $data->id }}" class="flex gap-[4px] px-2 py-[2px] rounded-2xl items-center w-max font-medium text-[12px] leading-[18px] !text-custom-orange-500 !bg-custom-orange-100">{{ __('forms.lbl_requested') }}</div>
    @endif
    @if ($data->approvals->count() > 0 || (in_array($data->status, ['accepted', 'cancelled', 'rejected']) && $data->modified_by > 0))
        @php
            $historyHtml = '<div class="flex flex-col gap-1 p-3 min-w-[250px]">';
        @endphp

        @forelse ($data->approvals as $approval)
            @php
                $statusClass = $approval->status === 'accepted' ? 'text-custom-green-500' : 'text-custom-red-500';
                $icon = $approval->status === 'accepted' ? '✓' : '✗';

                $stepText = $data->approvals->count() > 1 ? '<div class="h-6 w-6 rounded-full text-center py-[4px] text-custom-orange-500 text-xs-medium bg-custom-orange-100 badge-count">'. $approval->level . '</div>' : '';

                $historyHtml .= sprintf(
                    '<div class="flex flex-col gap-1 text-sm">
                        <span class="text-custom-grey-600">%s</span>
                        
                        <div class="flex items-center gap-2">
                            <img src="%s" class="rounded-full max-w-6 user-img %s" data-toggle="tooltip" data-title="%s" />
                            <span class="text-custom-grey-500 text-xs">%s</span>
                        </div>
                        
                        <div class="flex items-center gap-2 pl-8">
                            <span class="text-custom-grey-500 text-xs">%s</span>
                            <span class="%s font-medium">%s</span>
                        </div>
                    </div>',
                    $stepText,
                    getMediaUrl($approval->approvedBy, "photograph", "thumb"),
                    $approval->approvedBy?->status ? '' : 'inactive',
                    $approval->approvedBy?->display_name ?? '',
                    $approval->approvedBy?->display_name ?? '',
                    parseFromFormat($approval->created_at)->format(config('settings.date_format')),
                    $statusClass,
                    $icon,
                );

            @endphp
        @empty
            @php
                $statusClass = $data->status === 'accepted' ? 'text-custom-green-500' : 'text-custom-red-500';
                $icon = $data->status === 'accepted' ? '✓' : '✗';

                $stepText = '';

                $historyHtml .= sprintf(
                    '<div class="flex flex-col gap-1 text-sm">
                        <span class="text-custom-grey-600">%s</span>
                        
                        <div class="flex items-center gap-2">
                            <img src="%s" class="rounded-full w-6 h-6" data-toggle="tooltip" data-title="%s" />
                            <span class="text-custom-grey-500 text-xs">%s</span>
                        </div>

                        <div class="flex items-center gap-2 pl-8">
                            <span class="text-custom-grey-500 text-xs">%s</span>
                            <span class="%s font-medium">%s</span>
                        </div>
                    </div>',
                    $stepText,
                    getMediaUrl($data->modifiedBy, "photograph", "thumb"),
                    $data->modifiedBy?->display_name ?? '',
                    $data->modifiedBy?->display_name ?? '',
                    parseFromFormat($data->updated_at)->format(config('settings.date_format')),
                    $statusClass,
                    $icon,
                );

            @endphp
        @endforelse

        @php
            $historyHtml .= '</div>';
        @endphp

        <div x-data="{ open: false }" class="relative" @mouseleave="open = false">
            <button @mouseenter="open = true" class="p-1 hover:bg-custom-grey-100 rounded-full transition-colors">
                <x-svg-icon icon="icon-annotation-question" />
            </button>
                <div x-show="open"
                        @mouseenter="open = true"
                        x-transition:enter="transition ease-out duration-200"
                        x-transition:enter-start="opacity-0 scale-95"
                        x-transition:enter-end="opacity-100 scale-100"
                        x-transition:leave="transition ease-in duration-150"
                        x-transition:leave-start="opacity-100 scale-100"
                        x-transition:leave-end="opacity-0 scale-95"
                        class="absolute z-[9999] right-0 mt-1 bg-white rounded-lg shadow-lg border border-custom-grey-200"
                style="display: none;">
                {!! $historyHtml !!}
            </div>
        </div>
    @endif
</div>