@extends('layouts.app')
@section('title','Global Search')
@section('page-label','Global Search')
@section('content')
<x-ui.page-toolbar title="Global Search" description="Find customers, loans, collateral and payment records you are authorized to access." :breadcrumbs="[['label'=>'Dashboard','url'=>route('dashboard')],['label'=>'Global Search']]" />

<form method="GET" action="{{ route('global-search.index') }}" class="mf-card mf-card-body mb-4" data-ui="form-shell">
    <div class="flex gap-2">
        <input class="mf-input flex-1" type="search" name="q" value="{{ $term }}" placeholder="Customer, phone, NIN, loan, collateral, receipt or payment reference" autocomplete="off" autofocus>
        <button class="mf-btn mf-btn-primary" type="submit">Search</button>
    </div>
    <div class="mt-2 text-xs text-muted-foreground">Enter at least 2 characters. Results are limited to your permitted modules and assigned branches.</div>
</form>

@if($term === '')
    <div class="mf-card mf-card-body text-sm text-muted-foreground">Start typing to search across your accessible operational records.</div>
@elseif(mb_strlen($term) < 2)
    <div class="mf-card mf-card-body text-sm text-muted-foreground">Enter at least 2 characters to search.</div>
@elseif($total === 0)
    <div class="mf-card mf-card-body text-sm text-muted-foreground">No accessible records match “{{ $term }}”.</div>
@else
    <div class="mb-3 text-xs text-muted-foreground">{{ $total }} result{{ $total === 1 ? '' : 's' }} across {{ count($groups) }} section{{ count($groups) === 1 ? '' : 's' }}.</div>
    <div class="grid gap-3 lg:grid-cols-2">
        @foreach($groups as $group)
            <section class="mf-card">
                <div class="flex items-center justify-between border-b border-border px-4 py-3">
                    <h2 class="text-sm font-semibold">{{ $group['label'] }}</h2>
                    <span class="mf-badge">{{ count($group['results']) }}</span>
                </div>
                <div class="divide-y divide-border">
                    @foreach($group['results'] as $result)
                        <a href="{{ $result['url'] }}" class="block px-4 py-3 transition-colors hover:bg-muted/60 focus:bg-muted/60">
                            <div class="flex items-start justify-between gap-3">
                                <div class="min-w-0">
                                    <div class="flex min-w-0 items-center gap-2">
                                        <div class="truncate text-sm font-medium text-foreground">{{ $result['title'] }}</div>
                                        @if(filled($result['identifier'] ?? null))<span class="mf-badge shrink-0">{{ $result['identifier'] }}</span>@endif
                                    </div>
                                    <div class="mt-0.5 truncate text-xs text-muted-foreground">{{ $result['subtitle'] }}</div>
                                </div>
                                <div class="shrink-0 text-[11px] font-medium text-muted-foreground">Open →</div>
                            </div>
                        </a>
                    @endforeach
                </div>
            </section>
        @endforeach
    </div>
@endif
@endsection
