@extends('layouts.demo10.base')

@section('content')
<div class="container max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <!-- Header -->
    <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">
                {{ $logicId }}
            </h1>
            <p class="mt-1 text-sm text-gray-500">Pivot Table View</p>
        </div>
        <a href="{{ url('dashboard/pivots') }}"
           class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-lg text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors">
            ← Back to Pivots
        </a>
    </div>

    @php
        $metricIds  = $pivot['metric_ids'] ?? [];
        $colHeaders = $pivot['col_headers'] ?? [];
        $matrix     = $pivot['matrix'] ?? [];
        $hasCols    = !empty($pivot['col_key'] ?? null);
        $queryError = $queryError ?? null;
    @endphp

    @if($queryError)
        <div class="rounded-xl bg-red-50 border border-red-200 p-5">
            <div class="text-red-700 font-medium mb-1">Pivot query failed</div>
            <div class="text-red-600/90 text-sm">
                {{ $queryError }}
            </div>
        </div>
    @elseif(empty($matrix))
        <div class="rounded-xl bg-blue-50 border border-blue-200 p-5 text-center">
            <div class="text-blue-700 font-medium mb-1">No data available</div>
            <div class="text-blue-600/80 text-sm">
                No data returned for this pivot.<br>
                Check joins, columns and filters in <code class="font-mono bg-blue-100 px-1.5 py-0.5 rounded">dashboard_builder.json</code>.
            </div>
        </div>
    @else
        <div class="shadow-sm border border-gray-200 rounded-xl overflow-hidden bg-white">
            <div class="pivot-scroll">
                <table class="pivot-table divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <!-- First header row (group labels or row key) -->
                        <tr>
                            <th scope="col"
                                class="px-5 py-4 text-left text-sm font-semibold text-gray-900 border-r border-gray-200 w-64 bg-gray-100/70">
                                {{ $pivot['row_key'] ?? 'Category' }}
                            </th>

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

                        <!-- Second header row (metric names under groups) -->
                        @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 scope="col"
                                        class="px-4 py-2.5 text-center text-xs font-medium text-gray-600 uppercase tracking-wider 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/70 transition-colors">
                                <th scope="row"
                                    class="px-5 py-4 text-sm font-medium text-gray-900 border-r border-gray-200 bg-gray-50 whitespace-nowrap">
                                    {{ $rowLabel ?: '(blank)' }}
                                </th>

                                @if($hasCols)
                                    @foreach($colHeaders as $ch)
                                        @foreach($metricIds as $mId)
                                            <td class="px-5 py-4 text-sm 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-5 py-4 text-sm 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>
        </div>

        <div class="mt-4 text-xs text-gray-500 text-right">
            Showing {{ count($matrix) }} row{{ count($matrix) === 1 ? '' : 's' }}
            @if($hasCols) × {{ count($colHeaders) }} column group{{ count($colHeaders) === 1 ? '' : 's' }} @endif
        </div>
    @endif
</div>

<style>
    /* Optional: better number alignment & subtle improvements */
    td, th {
        font-feature-settings: "tnum" 1;
    }
    table {
        border-collapse: separate;
        border-spacing: 0;
    }
    .pivot-scroll {
        height: 520px;
        overflow-x: auto;
        overflow-y: auto;
    }
    .pivot-table {
        width: max-content;
        min-width: 100%;
    }
    th:first-child, td:first-child {
        position: sticky;
        left: 0;
        z-index: 10;
        background: inherit;
    }
    thead th:first-child {
        z-index: 20;
    }
</style>
@endsection