@extends('layouts.app')

@section('title', 'Add webhook - ' . config('app.name'))

@section('header-left')
    <h1 class="text-lg font-semibold text-gray-900">Add webhook</h1>
@endsection

@section('content')
    <div class="max-w-2xl">
        <form method="post" action="{{ route('settings.webhooks.store') }}" class="space-y-6 rounded-lg border border-gray-200 bg-white p-6 shadow-sm">
            @csrf
            <div>
                <label for="name" class="block text-sm font-medium text-gray-700">Name</label>
                <input id="name" type="text" name="name" value="{{ old('name') }}" required maxlength="255" class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" placeholder="e.g. My integration" />
                @error('name')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>
            <div>
                <label for="url" class="block text-sm font-medium text-gray-700">URL</label>
                <input id="url" type="url" name="url" value="{{ old('url') }}" required maxlength="2048" class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" placeholder="https://example.com/webhook" />
                @error('url')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700">Events</label>
                <p class="mt-1 text-xs text-gray-500">Select which events will trigger this webhook.</p>
                <div class="mt-2 flex flex-wrap gap-3">
                    @foreach (\App\Models\Webhook::supportedEvents() as $event)
                        <label class="inline-flex items-center gap-1.5">
                            <input type="checkbox" name="events[]" value="{{ $event }}" {{ in_array($event, old('events', [])) ? 'checked' : '' }} class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" />
                            <span class="text-sm text-gray-700">{{ $event }}</span>
                        </label>
                    @endforeach
                </div>
                @error('events')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>
            <div class="flex gap-3">
                <button type="submit" class="rounded-md bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700">Create webhook</button>
                <a href="{{ route('settings.webhooks.index') }}" class="rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">Cancel</a>
            </div>
        </form>
    </div>
@endsection