@extends('layouts.merchant')

@section('title', 'Новая интеграция')

@section('content')
<div class="max-w-2xl">
    <a href="{{ route('merchant.integration.index') }}"
       class="inline-flex items-center gap-1 text-sm font-semibold text-[var(--color-muted)] hover:text-[var(--color-primary)]">
        <i data-lucide="chevron-left" class="h-4 w-4"></i> Все интеграции
    </a>

    <h1 class="mt-2 text-2xl font-extrabold tracking-tight text-[var(--color-ink)]">Что подключаем</h1>

    @foreach ($groups as $group)
        <section class="mt-6">
            <div class="flex items-center gap-2">
                <i data-lucide="{{ $group->icon() }}" class="h-4 w-4 text-[var(--color-muted)]"></i>
                <h2 class="text-sm font-extrabold uppercase tracking-wide text-[var(--color-muted)]">{{ $group->label() }}</h2>
            </div>

            <div class="mt-3 space-y-2">
                @foreach (\App\Enums\IntegrationType::inGroup($group) as $type)
                    <form method="POST" action="{{ route('merchant.integration.store') }}">
                        @csrf
                        <input type="hidden" name="type" value="{{ $type->value }}">
                        <button type="submit"
                                class="flex w-full items-start gap-3 rounded-[var(--radius-lg)] border border-[var(--color-line)] bg-white p-4 text-left transition hover:border-[var(--color-primary)]">
                            <span class="min-w-0 flex-1">
                                <span class="block text-sm font-bold text-[var(--color-ink)]">{{ $type->label() }}</span>
                                <span class="mt-0.5 block text-xs text-[var(--color-slate)]">{{ $type->hint() }}</span>
                            </span>
                            <i data-lucide="chevron-right" class="mt-0.5 h-4 w-4 shrink-0 text-[var(--color-muted)]"></i>
                        </button>
                    </form>
                @endforeach
            </div>
        </section>
    @endforeach
</div>
@endsection