@php
    $report = $getRecord();
    $columns = $report->template->getLocalizedColumns();
    $rows = $report->getRows();
    $locale = app()->getLocale();
    $summary = $report->getSummary();
    $hasOutOfLimits = $report->has_out_of_limits;
    $outOfLimitsCount = $summary['out_of_limits_count'] ?? 0;
@endphp

<div class="bg-white dark:bg-gray-900 rounded-xl shadow-sm ring-1 ring-gray-950/5 dark:ring-white/10 overflow-hidden">
    {{-- Header --}}
    <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
        <div>
            <h3 class="text-base font-semibold text-gray-900 dark:text-white">
                {{ __('reports.sections.data') }}
            </h3>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-0.5">
                {{ count($rows) }} {{ __('reports.fields.rows_count') }}
                @if($outOfLimitsCount > 0)
                    <span class="text-danger-600 dark:text-danger-400 ms-2">
                        ({{ $outOfLimitsCount }} {{ __('reports.limits.outside') }})
                    </span>
                @endif
            </p>
        </div>
        @if($hasOutOfLimits)
            <div class="flex items-center gap-2 px-3 py-1.5 bg-danger-100 dark:bg-danger-900/30 rounded-lg">
                <x-heroicon-o-exclamation-triangle class="w-4 h-4 text-danger-500" />
                <span class="text-sm text-danger-600 dark:text-danger-400">
                    {{ __('reports.limits.outside') }}
                </span>
            </div>
        @else
            <div class="flex items-center gap-2 px-3 py-1.5 bg-success-100 dark:bg-success-900/30 rounded-lg">
                <x-heroicon-o-check-circle class="w-4 h-4 text-success-500" />
                <span class="text-sm text-success-600 dark:text-success-400">
                    {{ __('reports.limits.all_within') }}
                </span>
            </div>
        @endif
    </div>

    {{-- Table --}}
    <div class="overflow-auto max-h-[70vh]">
        <table class="w-full">
            <thead>
                <tr class="bg-gray-50 dark:bg-gray-800">
                    <th class="w-14 px-4 py-3 text-center text-xs font-semibold text-gray-500 dark:text-gray-400 border-b border-gray-200 dark:border-gray-700">
                        #
                    </th>
                    @foreach($columns as $column)
                        @php $colColor = $column['color'] ?? '#6b7280'; @endphp
                        <th
                            class="px-3 py-3 text-start border-b border-gray-200 dark:border-gray-700"
                            style="min-width: 140px; border-top: 3px solid {{ $colColor }};"
                        >
                            <div class="font-semibold text-sm text-gray-700 dark:text-gray-200">
                                {{ $column['label'] }}
                            </div>
                            @if(isset($column['unit']) || isset($column['limits']))
                                <div class="text-xs text-gray-400 dark:text-gray-500 mt-0.5">
                                    @if(isset($column['unit']))
                                        {{ $column['unit'] }}
                                    @endif
                                    @if(isset($column['limits']))
                                        <span class="ms-1">({{ $column['limits']['min'] ?? '0' }}-{{ $column['limits']['max'] ?? '∞' }})</span>
                                    @endif
                                </div>
                            @endif
                        </th>
                    @endforeach
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
                @forelse($rows as $rowIndex => $row)
                    <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50">
                        <td class="px-4 py-2 text-center text-sm font-medium text-gray-400">
                            {{ $rowIndex + 1 }}
                        </td>
                        @foreach($columns as $column)
                            @php
                                $value = $row[$column['key']] ?? null;
                                $isOutOfLimit = in_array($column['key'], $row['_out_of_limits'] ?? []);
                                $colColor = $column['color'] ?? '#6b7280';
                                $hasValue = $value !== null && $value !== '';
                            @endphp
                            <td class="px-1 py-1">
                                <div
                                    class="h-10 px-3 text-sm rounded-lg border-2 flex items-center
                                        {{ $hasValue ? 'bg-gray-50 dark:bg-gray-800' : 'bg-white dark:bg-gray-900' }}
                                        {{ $isOutOfLimit
                                            ? 'border-danger-300 dark:border-danger-600 text-danger-600 dark:text-danger-400'
                                            : 'border-gray-200 dark:border-gray-700 text-gray-900 dark:text-gray-100' }}"
                                    style="{{ $hasValue && !$isOutOfLimit ? 'border-inline-start: 3px solid ' . $colColor : '' }}"
                                >
                                    <span class="flex-1 {{ $column['type'] === 'number' ? 'text-center tabular-nums font-medium' : '' }}">
                                        @if($column['type'] === 'select' && isset($column['options']))
                                            @php
                                                $option = collect($column['options'])->firstWhere('value', $value);
                                                $label = $option ? ($option["label_{$locale}"] ?? $option['label_ar'] ?? $value) : ($value ?? '-');
                                            @endphp
                                            {{ $label }}
                                        @else
                                            {{ $hasValue ? $value : '-' }}
                                        @endif
                                    </span>
                                    @if($isOutOfLimit)
                                        <span class="relative flex h-2 w-2 ms-2">
                                            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-danger-400 opacity-75"></span>
                                            <span class="relative inline-flex rounded-full h-2 w-2 bg-danger-500"></span>
                                        </span>
                                    @endif
                                </div>
                            </td>
                        @endforeach
                    </tr>
                @empty
                    <tr>
                        <td colspan="{{ count($columns) + 1 }}" class="px-4 py-8 text-center">
                            <div class="flex flex-col items-center gap-2">
                                <x-heroicon-o-table-cells class="w-8 h-8 text-gray-300 dark:text-gray-600" />
                                <span class="text-sm text-gray-500 dark:text-gray-400">
                                    {{ __('common.messages.no_data') }}
                                </span>
                            </div>
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>