{{-- resources/views/invitations/index.blade.php --}}

<x-ux-layout>
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-8">
        {{-- Header --}}
        <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between mb-6">
            <h1 class="text-xl font-semibold text-gray-900">Einladungen</h1>

            {{-- Desktop button --}}
            <div class="hidden sm:flex">
                <a href="{{ route('invitations.create') }}"
                    class="inline-flex items-center rounded-xl bg-[#00923f] px-4 py-2 text-sm font-semibold text-white shadow-sm hover:opacity-90">
                    Neue Einladung
                </a>
            </div>

            {{-- Mobile button --}}
            <div class="sm:hidden">
                <a href="{{ route('invitations.create') }}"
                    class="inline-flex w-full items-center justify-center gap-2 rounded-xl bg-[#00923f] px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:opacity-90">
                    <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                        aria-hidden="true">
                        <path d="M12 5v14M5 12h14" />
                    </svg>
                    <span class="truncate">Neue Einladung</span>
                </a>
            </div>
        </div>

        @if (session('status'))
            <div class="mb-4 rounded-xl bg-green-50 p-4 text-sm text-green-700 ring-1 ring-green-100">
                {{ session('status') }}
            </div>
        @endif

        <div class="bg-white rounded-2xl shadow-sm ring-1 ring-black/5 overflow-hidden">
            <div class="divide-y divide-gray-100">
                @forelse($invitations as $inv)
                    <div class="p-4 sm:p-5 flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
                        {{-- Left --}}
                        <div class="min-w-0">
                            <div class="text-sm font-semibold text-gray-900 truncate">{{ $inv->name }}</div>
                            <div class="mt-1 text-xs text-gray-500 truncate">{{ $inv->email }}</div>

                            <div class="mt-2 flex flex-wrap gap-2">
                                {{-- TYPE --}}
                                <span
                                    class="inline-flex items-center rounded-full bg-gray-50 px-2.5 py-1 text-xs font-medium text-gray-700">
                                    {{ $inv->type === 'reset' ? 'RESET' : 'INVITE' }}
                                </span>

                                {{-- ROLE --}}
                                <span
                                    class="inline-flex items-center rounded-full bg-gray-50 px-2.5 py-1 text-xs font-medium text-gray-700">
                                    {{ $inv->role }}
                                </span>

                                {{-- STATUS --}}
                                @if ($inv->accepted_at)
                                    <span
                                        class="inline-flex items-center rounded-full bg-green-50 px-2.5 py-1 text-xs font-medium text-green-700">
                                        angenommen {{ $inv->accepted_at->format('d.m.Y H:i') }}
                                    </span>
                                @elseif($inv->expires_at->isPast())
                                    <span
                                        class="inline-flex items-center rounded-full bg-red-50 px-2.5 py-1 text-xs font-medium text-red-700">
                                        abgelaufen
                                    </span>
                                @else
                                    <span
                                        class="inline-flex items-center rounded-full bg-amber-50 px-2.5 py-1 text-xs font-medium text-amber-700">
                                        aktiv bis {{ $inv->expires_at->format('d.m.Y H:i') }}
                                    </span>
                                @endif
                            </div>

                            @if ($inv->type === 'reset' && $inv->target_user_id)
                                <div class="mt-2 text-xs text-gray-500">
                                    Ziel-User ID: <span class="text-gray-700">{{ $inv->target_user_id }}</span>
                                </div>
                            @endif

                            @if (is_array($inv->vehicle_ids) && count($inv->vehicle_ids))
                                <div class="mt-2 text-xs text-gray-500">
                                    Fahrzeuge:
                                    <span class="text-gray-700">
                                        {{ implode(', ', array_map('intval', $inv->vehicle_ids)) }}
                                    </span>
                                </div>
                            @endif
                        </div>

                        {{-- Actions (mobile full width) --}}
                        <div
                            class="w-full sm:w-auto shrink-0 flex flex-col sm:flex-row items-stretch sm:items-center justify-start sm:justify-end gap-2">
                            @if (!$inv->accepted_at)
                                <form method="POST" action="{{ route('invitations.resend', $inv) }}"
                                    class="w-full sm:w-auto">
                                    @csrf
                                    <button type="submit"
                                        class="inline-flex w-full sm:w-auto items-center justify-center rounded-xl px-3 py-2 text-sm font-semibold text-gray-700 ring-1 ring-gray-200 hover:bg-gray-50">
                                        @if ($inv->expires_at->isPast())
                                            Erneuern
                                        @else
                                            Erneut senden
                                        @endif
                                    </button>
                                </form>

                                <form method="POST" action="{{ route('invitations.destroy', $inv) }}"
                                    onsubmit="return confirm('Eintrag wirklich löschen?');" class="w-full sm:w-auto">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit"
                                        class="inline-flex w-full sm:w-auto items-center justify-center rounded-xl px-3 py-2 text-sm font-semibold text-red-700 ring-1 ring-red-200 hover:bg-red-50">
                                        Löschen
                                    </button>
                                </form>
                            @endif
                        </div>
                    </div>
                @empty
                    <div class="p-6 text-sm text-gray-600">Keine Einladungen vorhanden.</div>
                @endforelse
            </div>
        </div>

        <div class="mt-6 overflow-x-auto">
            {{ $invitations->links() }}
        </div>
    </div>
</x-ux-layout>