@extends('layouts.demo10.base')

@section('content')
<div class="p-6">
    <div class="flex items-center justify-between mb-4">
        <div>
            <h1 class="text-xl font-semibold">Pivot Dashboards</h1>
            <p class="text-sm text-gray-500">Select a pivot to open the table.</p>
        </div>
        <a href="{{ route('pivots.all') }}"
           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">
            Show All Tables
        </a>
    </div>

    <div class="mb-4">
        <input
            id="pivotSearch"
            type="text"
            placeholder="Search pivots (e.g., tranche, district, grievance, VRC)..."
            class="w-full max-w-xl rounded-lg border border-gray-300 px-4 py-2 focus:outline-none focus:ring"
            oninput="filterPivots(this.value)"
        />
    </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 id="pivotGrid" class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
            @foreach($pivots as $p)
                <a
                 href="{{ url('dashboard/pivots/'.rawurlencode($p['logic_id'])) }}"
                    class="pivot-card block rounded-xl border border-gray-200 bg-white p-4 shadow-sm hover:shadow-md transition"
                    data-title="{{ strtolower($p['title']) }}"
                    data-id="{{ strtolower($p['logic_id']) }}"
                >
                    <div class="flex items-start justify-between gap-3">
                        <div>
                            <div class="text-sm font-semibold text-gray-900 leading-5">
                                {{ $p['title'] }}
                            </div>
                            <div class="mt-1 text-xs text-gray-500 break-all">
                                {{ $p['logic_id'] }}
                            </div>
                        </div>

                        <div class="text-xs text-gray-400">
                            →
                        </div>
                    </div>
                </a>
            @endforeach
        </div>

        <div id="noResults" class="hidden mt-4 rounded-lg border border-gray-200 bg-gray-50 p-4 text-gray-600">
            No pivots match your search.
        </div>
    @endif
</div>

<script>
function filterPivots(q) {
    q = (q || '').toLowerCase().trim();
    const cards = document.querySelectorAll('.pivot-card');
    let shown = 0;

    cards.forEach(card => {
        const title = card.dataset.title || '';
        const id = card.dataset.id || '';
        const ok = !q || title.includes(q) || id.includes(q);
        card.style.display = ok ? 'block' : 'none';
        if (ok) shown++;
    });

    const noResults = document.getElementById('noResults');
    if (noResults) noResults.classList.toggle('hidden', shown !== 0);
}
</script>
@endsection