<x-app-layout title="Webhooks">
    <div class="mx-auto max-w-xl">
        <h1 class="text-xl font-semibold text-slate-900">Webhooks</h1>
        <p class="mt-1 text-sm text-slate-600">Notify sibling Ladill apps when meetings change</p>

        <form method="POST" action="{{ route('meet.settings.webhooks.store') }}" class="mt-6 space-y-4 rounded-2xl border border-slate-200 bg-white p-6">
            @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 w-full">Add endpoint</button>
        </form>

        <ul class="mt-6 divide-y divide-slate-100 rounded-2xl border border-slate-200 bg-white">
            @forelse ($endpoints as $endpoint)
                <li class="flex items-center justify-between px-6 py-4 text-sm">
                    <div>
                        <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')<button class="text-red-600 hover:underline">Remove</button></form>
                </li>
            @empty
                <li class="px-6 py-8 text-center text-slate-500">No webhook endpoints configured.</li>
            @endforelse
        </ul>
    </div>
</x-app-layout>
