@extends('layouts.demo10.base')

@section('content')
<div class="container max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
        <div>
            <h1 class="text-2xl font-bold text-gray-900 tracking-tight">All Pivot Tables</h1>
            <p class="mt-1 text-sm text-gray-500">Showing all pivot tables from dashboard_builder.json</p>
        </div>
        <a href="{{ route('pivots.index') }}"
           class="inline-flex items-center rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">
            Back to Pivot List
        </a>
    </div>

    @if(empty($pivots))
        <div class="rounded-lg border border-yellow-200 bg-yellow-50 p-4 text-yellow-800">
            No pivots found in dashboard_builder.json
        </div>
    @else
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            @foreach($pivots as $item)
                @php
                    $pivot = $item['pivot'] ?? [];
                    $metricIds  = $pivot['metric_ids'] ?? [];
                    $colHeaders = $pivot['col_headers'] ?? [];
                    $matrix     = $pivot['matrix'] ?? [];
                    $hasCols    = !empty($pivot['col_key'] ?? null);
                    $queryError = $item['queryError'] ?? null;
                @endphp

                <div class="rounded-xl border border-gray-200 bg-white shadow-sm">
                    <div class="border-b border-gray-200 px-4 py-3">
                        <div class="flex items-start justify-between gap-3">
                            <div>
                                <h2 class="text-sm font-semibold text-gray-900">{{ $item['title'] }}</h2>
                                <div class="text-xs text-gray-500 mt-1">{{ $item['logic_id'] }}</div>
                            </div>
                            <a href="{{ route('pivots.show', ['logicId' => rawurlencode($item['logic_id'])]) }}"
                               class="text-xs text-blue-600 hover:underline whitespace-nowrap">
                                Open Single
                            </a>
                        </div>
                        <div class="mt-2 text-xs text-gray-600">
                            Y-axis: <span class="font-medium">{{ $pivot['row_key'] ?? 'Category' }}</span>
                            |
                            X-axis: <span class="font-medium">{{ $pivot['col_key'] ?? 'Metrics' }}</span>
                        </div>
                    </div>

                    <div class="p-4">
                        @if($queryError)
                            <div class="rounded-lg bg-red-50 border border-red-200 p-4 text-sm text-red-700">
                                {{ $queryError }}
                            </div>
                        @elseif(empty($matrix))
                            <div class="rounded-lg bg-blue-50 border border-blue-200 p-4 text-sm text-blue-700">
                                No data available for this pivot.
                            </div>
                        @else
                            <div class="pivot-scroll border border-gray-100 rounded-lg">
                                <table class="pivot-table divide-y divide-gray-200">
                                    <thead class="bg-gray-50">
                                        <tr>
                                            <th class="px-4 py-3 text-left text-xs font-semibold text-gray-900 border-r border-gray-200 w-56 bg-gray-100/70">
                                                {{ $pivot['row_key'] ?? 'Category' }}
                                            </th>

                                            @if($hasCols)
                                                @foreach($colHeaders as $ch)
                                                    <th colspan="{{ count($metricIds) }}"
                                                        class="px-3 py-2 text-center text-xs font-semibold text-gray-900 border-r border-gray-200 last:border-r-0 bg-indigo-50/50">
                                                        {{ $ch ?: '(blank)' }}
                                                    </th>
                                                @endforeach
                                            @else
                                                @foreach($metricIds as $mId)
                                                    <th class="px-3 py-2 text-center text-xs font-semibold text-gray-900 border-r border-gray-200 last:border-r-0">
                                                        {{ $mId }}
                                                    </th>
                                                @endforeach
                                            @endif
                                        </tr>

                                        @if($hasCols)
                                            <tr class="bg-gray-50/50">
                                                <th class="border-r border-gray-200 bg-gray-100/40"></th>
                                                @foreach($colHeaders as $ch)
                                                    @foreach($metricIds as $mId)
                                                        <th class="px-3 py-2 text-center text-[11px] font-medium text-gray-600 uppercase tracking-wide border-r border-gray-200 last:border-r-0">
                                                            {{ $mId }}
                                                        </th>
                                                    @endforeach
                                                @endforeach
                                            </tr>
                                        @endif
                                    </thead>

                                    <tbody class="bg-white divide-y divide-gray-100">
                                        @foreach($matrix as $rowLabel => $cols)
                                            <tr class="hover:bg-gray-50/60">
                                                <th class="px-4 py-3 text-xs font-medium text-gray-900 border-r border-gray-200 bg-gray-50 whitespace-nowrap text-left">
                                                    {{ $rowLabel ?: '(blank)' }}
                                                </th>

                                                @if($hasCols)
                                                    @foreach($colHeaders as $ch)
                                                        @foreach($metricIds as $mId)
                                                            <td class="px-3 py-3 text-xs text-gray-700 text-right border-r border-gray-200 last:border-r-0 tabular-nums">
                                                                {{ $cols[$ch][$mId] ?? 0 }}
                                                            </td>
                                                        @endforeach
                                                    @endforeach
                                                @else
                                                    @foreach($metricIds as $mId)
                                                        <td class="px-3 py-3 text-xs text-gray-700 text-right border-r border-gray-200 last:border-r-0 tabular-nums">
                                                            {{ $cols['__single__'][$mId] ?? 0 }}
                                                        </td>
                                                    @endforeach
                                                @endif
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        @endif
                    </div>
                </div>
            @endforeach
        </div>
    @endif
</div>

<style>
    table {
        border-collapse: separate;
        border-spacing: 0;
    }
    .pivot-scroll {
        height: 440px;
        overflow-x: auto;
        overflow-y: auto;
    }
    .pivot-table {
        width: max-content;
        min-width: 100%;
    }
</style>
@endsection