@php
    /**
     * $product   — App\Product (with product_variations.variations.variation_location_details loaded)
     * $colors    — array<int, string> row axis
     * $sizes     — array<int, string> column axis
     * $cells     — array<string color, array<string size, ['variation_id', 'price', 'stock', 'sub_sku', 'is_active']>>
     * $priceBand — ['single' => bool, 'summary' => string]  precomputed by controller
     * $tiers     — array of tier summaries derived from B2BPortalSetting::cart_total_tiers
     * $moq       — product-level MOQ display
     * $apiToken  — portal token for links
     */
    $summary = $priceBand['summary'] ?? '';
    $singlePrice = ! empty($priceBand['single']);
    $currency = config('constants.currency_symbol', '₹');
@endphp
<section class="mb-10"
    x-data="{ openColors: {} }">
    <div class="flex flex-col md:flex-row md:items-start gap-4">
        <div class="md:w-48 shrink-0">
            @if(!empty($product->image_url))
                <img src="{{ $product->image_url }}" alt="{{ $product->name }}"
                     class="w-full h-auto rounded border border-ink-100 object-cover">
            @else
                <div class="w-full aspect-square rounded bg-ink-50 flex items-center justify-center text-ink-300 text-4xl">👕</div>
            @endif
            <a href="{{ url('/b2bportal/shop/'.$apiToken.'/product/'.$product->id) }}"
               class="mt-2 block text-sm font-semibold text-ink-800 hover:text-brand-700">
                {{ $product->name }}
            </a>
            @if($product->product_description)
                <p class="text-xs text-ink-500 mt-1 line-clamp-3">{{ strip_tags($product->product_description) }}</p>
            @endif
            @if(!empty($moq))
                <p class="text-xs text-ink-500 mt-1">MOQ: {{ $moq }} pcs</p>
            @endif
        </div>

        <div class="grow">
            {{-- ============================ DESKTOP TABLE ============================ --}}
            <div class="hidden sm:block overflow-x-auto">
                <table class="b2b-matrix">
                    <thead>
                        <tr>
                            <th class="text-left" style="min-width:8rem;">{{ $product->sku }}</th>
                            @foreach($sizes as $size)
                                <th>{{ $size }}</th>
                            @endforeach
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($colors as $color)
                            @php $colorImg = $colorImages[$color] ?? null; @endphp
                            <tr>
                                <td class="color-cell">
                                    <div class="flex items-center gap-2">
                                        @if($colorImg)
                                            <img src="{{ $colorImg }}" alt="{{ $color }}"
                                                 class="w-8 h-8 rounded-full object-cover border border-ink-200 cursor-zoom-in"
                                                 x-on:click="$dispatch('b2b:zoom', { src: @js($colorImg), label: @js($color) })">
                                        @else
                                            <span class="w-8 h-8 rounded-full bg-ink-100 border border-ink-200 flex items-center justify-center text-[10px] text-ink-400">–</span>
                                        @endif
                                        <span>{{ $color }}</span>
                                    </div>
                                </td>
                                @foreach($sizes as $size)
                                    @php
                                        $cell = $cells[$color][$size] ?? null;
                                        $vid = $cell['variation_id'] ?? null;
                                        $inStock = $cell && $cell['is_active'] && ($cell['stock'] ?? 0) > 0;
                                    @endphp
                                    @if($cell && $inStock)
                                        <td>
                                            <input type="number" min="0" step="1"
                                                :value="$store.b2bCart.qtyOf({{ $vid }})"
                                                x-on:input="$store.b2bCart.set({{ $vid }}, $event.target.value); $dispatch('b2b:cart-updated', { variation_id: {{ $vid }}, quantity: Number($event.target.value) })"
                                                aria-label="{{ $color }} {{ $size }}">
                                            @if(!$singlePrice)
                                                <span class="cell-price">{{ $currency }}{{ number_format($cell['price'], 0) }}</span>
                                            @endif
                                        </td>
                                    @else
                                        <td class="cell-oos" title="Out of stock or unavailable">—</td>
                                    @endif
                                @endforeach
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            {{-- ============================ MOBILE ACCORDION ============================ --}}
            <div class="sm:hidden space-y-2">
                @foreach($colors as $color)
                    @php
                        $rowCells = collect($sizes)
                            ->map(fn ($size) => [$size, $cells[$color][$size] ?? null])
                            ->filter(fn ($pair) => $pair[1] && ($pair[1]['is_active'] ?? false));
                        $rowStock = $rowCells->sum(fn ($pair) => (float) ($pair[1]['stock'] ?? 0));
                        $colorImg = $colorImages[$color] ?? null;
                    @endphp
                    <details class="rounded border border-ink-200"
                        x-data="{ open: false }"
                        x-on:toggle="open = $event.target.open">
                        <summary class="flex items-center justify-between px-3 py-2 cursor-pointer select-none">
                            <div class="flex items-center gap-2">
                                @if($colorImg)
                                    <img src="{{ $colorImg }}" alt="{{ $color }}"
                                         class="w-8 h-8 rounded-full object-cover border border-ink-200">
                                @endif
                                <span class="font-medium text-ink-800">{{ $color }}</span>
                            </div>
                            <span class="text-xs text-ink-500">
                                @if($rowStock > 0)
                                    {{ $rowCells->count() }} size(s) in stock
                                @else
                                    <span class="text-red-500">out of stock</span>
                                @endif
                            </span>
                        </summary>
                        <div class="border-t border-ink-100 px-3 py-2 grid grid-cols-3 gap-2">
                            @foreach($sizes as $size)
                                @php
                                    $cell = $cells[$color][$size] ?? null;
                                    $vid = $cell['variation_id'] ?? null;
                                    $inStock = $cell && $cell['is_active'] && ($cell['stock'] ?? 0) > 0;
                                @endphp
                                <div class="rounded p-2 text-center @if(!$inStock) bg-ink-50 text-ink-400 @endif">
                                    <div class="text-xs uppercase text-ink-500">{{ $size }}</div>
                                    @if($inStock)
                                        <input type="number" min="0" step="1"
                                            class="mt-1 w-full rounded border-ink-200 text-center"
                                            :value="$store.b2bCart.qtyOf({{ $vid }})"
                                            x-on:input="$store.b2bCart.set({{ $vid }}, $event.target.value); $dispatch('b2b:cart-updated', { variation_id: {{ $vid }}, quantity: Number($event.target.value) })"
                                            aria-label="{{ $color }} {{ $size }}">
                                        @if(!$singlePrice)
                                            <div class="text-[10px] text-ink-500 mt-1">{{ $currency }}{{ number_format($cell['price'], 0) }}</div>
                                        @endif
                                    @else
                                        <div class="mt-2 text-xs">—</div>
                                    @endif
                                </div>
                            @endforeach
                        </div>
                    </details>
                @endforeach
            </div>

            <div class="mt-3 flex flex-wrap items-center gap-4 text-sm">
                @if($summary)
                    <span class="rounded bg-ink-50 px-3 py-1 font-medium text-ink-700">{{ $summary }}</span>
                @endif
                @foreach(($tiers ?? []) as $tier)
                    <span class="text-xs text-ink-500">
                        @if(!empty($tier['min_qty']))≥{{ $tier['min_qty'] }} pcs @endif
                        @if(!empty($tier['discount_pct']))— {{ $tier['discount_pct'] }}% off @endif
                        @if(!empty($tier['flat_off_per_pc']))— {{ $currency }}{{ $tier['flat_off_per_pc'] }}/pc off @endif
                    </span>
                @endforeach
            </div>
        </div>
    </div>
</section>