@extends('admin.layout')
@section('title', 'Signaleringsplannen')

@section('content')
<div class="space-y-5">

    {{-- Stats --}}
    <div class="grid gap-4" style="grid-template-columns:repeat(3,minmax(0,1fr))">
        <div class="bg-white rounded-xl border border-gray-200 p-5">
            <p class="text-xs text-gray-500 uppercase tracking-wide">{{ __('Total') }}</p>
            <p class="text-3xl font-bold text-gray-800 mt-1">{{ number_format($stats['total']) }}</p>
        </div>
        <div class="bg-white rounded-xl border border-gray-200 p-5">
            <p class="text-xs text-gray-500 uppercase tracking-wide">{{ __('Setup complete') }}</p>
            <p class="text-3xl font-bold text-green-600 mt-1">{{ number_format($stats['setup']) }}</p>
            @if($stats['total'] > 0)
                <p class="text-xs text-gray-400 mt-1">{{ round($stats['setup'] / $stats['total'] * 100) }}%</p>
            @endif
        </div>
        <div class="bg-white rounded-xl border border-gray-200 p-5">
            <p class="text-xs text-gray-500 uppercase tracking-wide">{{ __('With zones') }}</p>
            <p class="text-3xl font-bold text-indigo-600 mt-1">{{ number_format($stats['with_zones']) }}</p>
            @if($stats['total'] > 0)
                <p class="text-xs text-gray-400 mt-1">{{ round($stats['with_zones'] / $stats['total'] * 100) }}%</p>
            @endif
        </div>
    </div>

    {{-- Filters --}}
    <form method="GET" class="bg-white rounded-xl border border-gray-200 p-4 flex flex-wrap gap-3 items-end">
        <div class="flex-1" style="min-width:200px">
            <label class="block text-xs text-gray-500 mb-1">{{ __('Search') }}</label>
            <input type="text" name="q" value="{{ request('q') }}"
                   placeholder="{{ __('Name or email…') }}"
                   class="w-full border border-gray-300 rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400">
        </div>
        <div>
            <label class="block text-xs text-gray-500 mb-1">{{ __('Setup') }}</label>
            <select name="setup" class="border border-gray-300 rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400">
                <option value="">{{ __('All') }}</option>
                <option value="1" @selected(request('setup') === '1')>{{ __('Complete') }}</option>
                <option value="0" @selected(request('setup') === '0')>{{ __('Incomplete') }}</option>
            </select>
        </div>
        <button type="submit" class="px-4 py-1.5 bg-indigo-600 text-white text-sm rounded-lg hover:bg-indigo-700 transition">
            {{ __('Filter') }}
        </button>
        @if(request()->hasAny(['q','setup','sort','dir']))
            <a href="{{ route('admin.signal-plans.index') }}" class="px-4 py-1.5 bg-gray-100 text-gray-600 text-sm rounded-lg hover:bg-gray-200 transition">
                {{ __('Reset') }}
            </a>
        @endif
    </form>

    {{-- Table --}}
    <div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
        @php
            $th = fn(string $col, string $label) =>
                '<th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wide whitespace-nowrap">'
                . '<a href="' . request()->fullUrlWithQuery(['sort' => $col, 'dir' => (request('sort') === $col && request('dir') === 'asc') ? 'desc' : 'asc']) . '" class="flex items-center gap-1 hover:text-gray-800">'
                . $label
                . (request('sort') === $col ? (request('dir') === 'asc' ? ' ▲' : ' ▼') : '')
                . '</a></th>';
        @endphp
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead class="bg-gray-50 border-b border-gray-200">
                    <tr>
                        {!! $th('id', 'ID') !!}
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wide">{{ __('User') }}</th>
                        <th class="px-4 py-3 text-center text-xs font-semibold text-gray-500 uppercase tracking-wide">{{ __('Setup') }}</th>
                        {!! $th('zones_count', __('Zones')) !!}
                        <th class="px-4 py-3 text-center text-xs font-semibold text-gray-500 uppercase tracking-wide col-lg">{{ __('Thoughts') }}</th>
                        <th class="px-4 py-3 text-center text-xs font-semibold text-gray-500 uppercase tracking-wide col-lg">{{ __('Reframes') }}</th>
                        <th class="px-4 py-3 text-center text-xs font-semibold text-gray-500 uppercase tracking-wide col-lg">{{ __('Sensory') }}</th>
                        {!! $th('created_at', __('Created')) !!}
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    @forelse($plans as $plan)
                        <tr class="hover:bg-gray-50 transition">
                            <td class="px-4 py-3 text-gray-400 text-xs">{{ $plan->id }}</td>
                            <td class="px-4 py-3">
                                @if($plan->user)
                                    <a href="{{ route('admin.users.show', $plan->user) }}"
                                       class="font-medium text-indigo-600 hover:underline">
                                        <span class="text-gray-400 font-normal text-xs">#{{ $plan->user->id }}</span> {{ $plan->user->name }}
                                    </a>
                                    <p class="text-xs text-gray-400">{{ $plan->user->email }}</p>
                                @else
                                    <span class="text-gray-300">—</span>
                                @endif
                            </td>
                            <td class="px-4 py-3 text-center">
                                @if($plan->is_setup)
                                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs bg-green-100 text-green-700">{{ __('Yes') }}</span>
                                @else
                                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs bg-gray-100 text-gray-500">{{ __('No') }}</span>
                                @endif
                            </td>
                            <td class="px-4 py-3 text-center font-mono text-sm">{{ $plan->zones_count }}</td>
                            <td class="px-4 py-3 text-center col-lg">
                                {{ $plan->has_thoughts ? '✓' : '—' }}
                            </td>
                            <td class="px-4 py-3 text-center col-lg">
                                {{ $plan->has_reframes ? '✓' : '—' }}
                            </td>
                            <td class="px-4 py-3 text-center col-lg">
                                {{ $plan->has_sensory ? '✓' : '—' }}
                            </td>
                            <td class="px-4 py-3 text-xs text-gray-400 whitespace-nowrap">
                                {{ $plan->created_at->format('d M Y') }}
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="px-4 py-10 text-center text-gray-400">{{ __('No signal plans found.') }}</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($plans->hasPages())
            <div class="px-4 py-3 border-t border-gray-100">
                {{ $plans->links() }}
            </div>
        @endif
    </div>
</div>
@endsection