@php
    $groupedAnswers = $this->getGroupedAnswers();
@endphp

<x-filament-widgets::widget>
    <x-filament::section :collapsible="true" :collapsed="true">
        <x-slot name="heading">
            <div class="flex items-center gap-2">
                <x-filament::icon icon="heroicon-o-clipboard-document-list" class="h-5 w-5 text-gray-400" />
                <span>Application Responses</span>
            </div>
        </x-slot>
        @if ($groupedAnswers->count() > 0)
            <div class="space-y-8">
                @foreach ($groupedAnswers as $group)
                    <div class="overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700">
                        @if ($group['group_name'])
                            <div class="border-b border-gray-200 bg-gray-50 px-6 py-4 dark:border-gray-700 dark:bg-gray-800">
                                <div class="flex items-center gap-2">
                                    @if ($group['group_icon'])
                                        <x-filament::icon :icon="$group['group_icon']" class="h-5 w-5 text-gray-400" />
                                    @endif
                                    <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">
                                        {{ $group['group_name'] }}
                                    </h3>
                                </div>
                            </div>
                        @endif

                        <table class="w-full divide-y divide-gray-200 dark:divide-gray-700">
                            <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                                @foreach ($group['answers'] as $answer)
                                    <tr class="hover:bg-gray-50/50 dark:hover:bg-gray-800/50">
                                        <td class="w-2/5 px-6 py-4 align-top text-sm font-medium text-gray-600 dark:text-gray-300">
                                            {{ $answer->question_label }}
                                            @if ($answer->question_snapshot['is_required'] ?? false)
                                                <span class="text-danger-500">*</span>
                                            @endif
                                        </td>
                                        <td class="w-3/5 px-6 py-4 align-top text-base text-gray-900 dark:text-gray-100">
                                            @php
                                                $type = $answer->question_type;
                                                $value = $answer->answer;
                                            @endphp

                                            @if ($type === 'switch')
                                                @if ($value === '1' || $value === 'true' || $value === true)
                                                    <x-filament::badge color="success" icon="heroicon-m-check">
                                                        Yes
                                                    </x-filament::badge>
                                                @else
                                                    <x-filament::badge color="gray" icon="heroicon-m-x-mark">
                                                        No
                                                    </x-filament::badge>
                                                @endif
                                            @elseif ($value)
                                                <span class="whitespace-pre-wrap">{{ $value }}</span>
                                            @else
                                                <span class="text-gray-400 italic dark:text-gray-500">Not provided</span>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endforeach
            </div>
        @else
            <p class="text-sm text-gray-500 dark:text-gray-400">No responses found for this application.</p>
        @endif
    </x-filament::section>
</x-filament-widgets::widget>
