<x-app-layout title="Webhooks">
    <x-settings.page title="Webhooks" description="Notify sibling Ladill apps when meetings change.">
        <x-settings.card title="Add endpoint">
            <form method="POST" action="{{ route('meet.settings.webhooks.store') }}" class="space-y-4">
                @csrf
                <div>
                    <label class="block text-sm font-medium text-slate-700">Endpoint URL</label>
                    <input type="url" name="url" required class="mt-1 w-full rounded-lg border-slate-300 text-sm" placeholder="https://care.ladill.com/webhooks/meet">
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700">Signing secret (optional)</label>
                    <input type="text" name="secret" class="mt-1 w-full rounded-lg border-slate-300 text-sm">
                </div>
                <fieldset class="space-y-2">
                    <legend class="text-sm font-medium text-slate-700">Events</legend>
                    @foreach ($events as $event)
                        <label class="flex items-center gap-2 text-sm"><input type="checkbox" name="events[]" value="{{ $event }}" checked class="rounded border-slate-300"> {{ $event }}</label>
                    @endforeach
                </fieldset>
                <button type="submit" class="btn-primary">Add endpoint</button>
            </form>
        </x-settings.card>

        <x-settings.card title="Configured endpoints">
            <ul class="-mx-6 divide-y divide-slate-100">
                @forelse ($endpoints as $endpoint)
                    <li class="flex items-center justify-between gap-4 px-6 py-4 text-sm">
                        <div class="min-w-0">
                            <p class="font-mono text-slate-900">{{ $endpoint->url }}</p>
                            <p class="text-slate-500">{{ implode(', ', $endpoint->events ?? []) }}</p>
                        </div>
                        <form method="POST" action="{{ route('meet.settings.webhooks.destroy', $endpoint) }}">@csrf @method('DELETE')<x-btn type="submit" variant="danger" size="sm" class="shrink-0">Remove</x-btn></form>
                    </li>
                @empty
                    <li class="px-6 py-8 text-center text-slate-500">No webhook endpoints configured.</li>
                @endforelse
            </ul>
        </x-settings.card>
    </x-settings.page>
</x-app-layout>
