<x-filament-panels::page>
    {{ $this->form }}

    <div class="grid gap-4 lg:grid-cols-3">
        <x-filament::section>
            <x-slot name="heading">{{ __('dberp.purchase_inquiry_comparison.stat_quote_count') }}</x-slot>
            <div class="text-2xl font-bold text-gray-950 dark:text-white">{{ $totals['quote_count'] ?? 0 }}</div>
        </x-filament::section>
        <x-filament::section>
            <x-slot name="heading">{{ __('dberp.purchase_inquiry_comparison.stat_recommended_count') }}</x-slot>
            <div class="text-2xl font-bold text-success-700 dark:text-success-400">{{ $totals['recommended_count'] ?? 0 }}</div>
        </x-filament::section>
        <x-filament::section>
            <x-slot name="heading">{{ __('dberp.purchase_inquiry_comparison.stat_expiring_count') }}</x-slot>
            <div class="text-2xl font-bold text-warning-700 dark:text-warning-400">{{ $totals['expiring_count'] ?? 0 }}</div>
        </x-filament::section>
    </div>

    <x-filament::section>
        <x-slot name="heading">{{ __('dberp.purchase_inquiry_comparison.section_overview') }}</x-slot>

        {{-- 保留 sticky 表头/首列与固定列宽；仅颜色改为支持 dark --}}
        <div class="relative max-h-[70vh] overflow-auto rounded-[10px] border border-gray-200 dark:border-white/10">
            <table class="w-full min-w-[1380px] border-collapse text-[13px] leading-relaxed">
                <colgroup>
                    <col class="w-[130px]">
                    <col class="w-[140px]">
                    <col class="w-[230px]">
                    <col class="w-[170px]">
                    <col class="w-[120px]">
                    <col class="w-[140px]">
                    <col class="w-[170px]">
                    <col class="w-[160px]">
                    <col class="w-[110px]">
                    <col class="w-[110px]">
                    <col class="w-[320px]">
                </colgroup>
                <thead>
                    <tr class="border-b border-gray-200 dark:border-white/10">
                        <th class="sticky top-0 left-0 z-40 whitespace-nowrap bg-gray-50 px-2.5 py-3 text-start font-semibold text-gray-600 shadow-[1px_0_0_#e5e7eb] dark:bg-gray-900 dark:text-gray-300 dark:shadow-[1px_0_0_rgb(255_255_255_/_0.1)]">
                            {{ __('dberp.purchase_inquiry_comparison.col_inquiry_no') }}
                        </th>
                        <th class="sticky top-0 z-30 whitespace-nowrap bg-gray-50 px-2.5 py-3 text-start font-semibold text-gray-600 dark:bg-gray-900 dark:text-gray-300">
                            {{ __('dberp.purchase_inquiry_comparison.col_purchase_request') }}
                        </th>
                        <th class="sticky top-0 z-30 whitespace-nowrap bg-gray-50 px-2.5 py-3 text-start font-semibold text-gray-600 dark:bg-gray-900 dark:text-gray-300">
                            {{ __('dberp.purchase_inquiry_comparison.col_product') }}
                        </th>
                        <th class="sticky top-0 z-30 whitespace-nowrap bg-gray-50 px-2.5 py-3 text-start font-semibold text-gray-600 dark:bg-gray-900 dark:text-gray-300">
                            {{ __('dberp.purchase_inquiry_comparison.col_supplier') }}
                        </th>
                        <th class="sticky top-0 z-30 whitespace-nowrap bg-gray-50 px-2.5 py-3 text-end font-semibold text-gray-600 dark:bg-gray-900 dark:text-gray-300">
                            {{ __('dberp.purchase_inquiry_comparison.col_quote_unit_price') }}
                        </th>
                        <th class="sticky top-0 z-30 whitespace-nowrap bg-gray-50 px-2.5 py-3 text-end font-semibold text-gray-600 dark:bg-gray-900 dark:text-gray-300">
                            {{ __('dberp.purchase_inquiry_comparison.col_lowest_valid_quote') }}
                        </th>
                        <th class="sticky top-0 z-30 whitespace-nowrap bg-gray-50 px-2.5 py-3 text-end font-semibold text-gray-600 dark:bg-gray-900 dark:text-gray-300">
                            {{ __('dberp.purchase_inquiry_comparison.col_supplier_last_deal_price') }}
                        </th>
                        <th class="sticky top-0 z-30 whitespace-nowrap bg-gray-50 px-2.5 py-3 text-end font-semibold text-gray-600 dark:bg-gray-900 dark:text-gray-300">
                            {{ __('dberp.purchase_inquiry_comparison.col_product_last_purchase_price') }}
                        </th>
                        <th class="sticky top-0 z-30 whitespace-nowrap bg-gray-50 px-2.5 py-3 text-end font-semibold text-gray-600 dark:bg-gray-900 dark:text-gray-300">
                            {{ __('dberp.purchase_inquiry_comparison.col_lead_time') }}
                        </th>
                        <th class="sticky top-0 z-30 whitespace-nowrap bg-gray-50 px-2.5 py-3 text-end font-semibold text-gray-600 dark:bg-gray-900 dark:text-gray-300">
                            {{ __('dberp.purchase_inquiry_comparison.col_recent_lead_time') }}
                        </th>
                        <th class="sticky top-0 z-30 whitespace-nowrap bg-gray-50 px-2.5 py-3 text-start font-semibold text-gray-600 dark:bg-gray-900 dark:text-gray-300">
                            {{ __('dberp.purchase_inquiry_comparison.col_hint') }}
                        </th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($rows as $row)
                        <tr class="align-top border-b border-gray-100 dark:border-white/5">
                            <td class="sticky left-0 z-20 whitespace-nowrap bg-white px-2.5 py-[11px] text-gray-700 shadow-[1px_0_0_#f3f4f6] dark:bg-gray-900 dark:text-gray-200 dark:shadow-[1px_0_0_rgb(255_255_255_/_0.05)]">
                                {{ $row['quote_code'] }}
                            </td>
                            <td class="whitespace-nowrap px-2.5 py-[11px] text-gray-600 dark:text-gray-300">{{ $row['purchase_request_code'] }}</td>
                            <td class="px-2.5 py-[11px] text-gray-800 dark:text-gray-100">{{ $row['product_name'] }}{{ $row['product_spec'] ? ' / '.$row['product_spec'] : '' }}</td>
                            <td class="whitespace-nowrap px-2.5 py-[11px] text-gray-700 dark:text-gray-200">{{ $row['supplier_name'] }}</td>
                            <td class="whitespace-nowrap px-2.5 py-[11px] text-end font-semibold text-gray-950 dark:text-white">{{ \App\Support\DberpNumberFormatter::price($row['unit_price'] ?? null) }}</td>
                            <td class="whitespace-nowrap px-2.5 py-[11px] text-end text-gray-600 dark:text-gray-300">{{ $row['lowest_inquiry_unit_price'] ? \App\Support\DberpNumberFormatter::price($row['lowest_inquiry_unit_price']) : '-' }}</td>
                            <td class="whitespace-nowrap px-2.5 py-[11px] text-end text-gray-600 dark:text-gray-300">{{ $row['recent_supplier_transaction_unit_price'] ? \App\Support\DberpNumberFormatter::price($row['recent_supplier_transaction_unit_price']) : '-' }}</td>
                            <td class="whitespace-nowrap px-2.5 py-[11px] text-end text-gray-600 dark:text-gray-300">{{ $row['recent_product_transaction_unit_price'] ? \App\Support\DberpNumberFormatter::price($row['recent_product_transaction_unit_price']) : '-' }}</td>
                            <td class="whitespace-nowrap px-2.5 py-[11px] text-end text-gray-700 dark:text-gray-200">{{ $row['lead_time_days'] !== null ? __('dberp.purchase_inquiry_comparison.lead_time_days_unit', ['days' => $row['lead_time_days']]) : '-' }}</td>
                            <td class="whitespace-nowrap px-2.5 py-[11px] text-end text-gray-500 dark:text-gray-400">{{ $row['recent_supplier_lead_time_days'] !== null ? __('dberp.purchase_inquiry_comparison.lead_time_days_unit', ['days' => $row['recent_supplier_lead_time_days']]) : '-' }}</td>
                            <td class="min-w-[300px] px-2.5 py-[11px] text-gray-600 dark:text-gray-300">
                                <div @class([
                                    'mb-1.5 inline-flex items-center rounded-full px-2.5 py-0.5',
                                    'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300' => $row['is_recommended'],
                                    'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300' => ! $row['is_recommended'],
                                ])>
                                    {{ $row['comparison_label'] }}{{ $row['is_recommended'] ? __('dberp.purchase_inquiry_comparison.recommended_suffix') : '' }}
                                </div>
                                <div class="leading-relaxed text-gray-600 dark:text-gray-300">{{ $row['comparison_note'] }}</div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="11" class="px-2.5 py-[18px] text-center text-gray-500 dark:text-gray-400">
                                {{ __('dberp.purchase_inquiry_comparison.empty_filtered') }}
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </x-filament::section>
</x-filament-panels::page>
