@extends('layouts.app')

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

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

@section('content')
    @if (session('success'))
        <div class="mb-4 rounded-lg bg-green-50 p-4 text-sm text-green-800" x-data x-init="setTimeout(() => $el.remove(), 5000)">
            {{ session('success') }}
        </div>
    @endif
    @if ($webhook_secret ?? null)
        <div class="mb-4 rounded-lg border border-amber-200 bg-amber-50 p-4" x-data="{ copied: false }">
            <p class="text-sm font-medium text-amber-800">Your webhook secret (copy now — it won’t be shown again):</p>
            <div class="mt-2 flex items-center gap-2">
                <code class="flex-1 rounded bg-amber-100 px-2 py-1.5 font-mono text-sm text-amber-900 break-all">{{ $webhook_secret }}</code>
                <button type="button" @click="navigator.clipboard.writeText('{{ $webhook_secret }}'); copied = true; setTimeout(() => copied = false, 2000)" class="shrink-0 rounded bg-amber-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-amber-700">
                    <span x-show="!copied">Copy</span>
                    <span x-show="copied" x-cloak>Copied</span>
                </button>
            </div>
        </div>
    @endif

    <div class="max-w-2xl space-y-8">
        <form method="post" action="{{ route('settings.webhooks.update', $webhook) }}" class="rounded-lg border border-gray-200 bg-white p-6 shadow-sm">
            @csrf
            @method('PATCH')
            <div class="space-y-4">
                <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', $webhook->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" />
                    @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', $webhook->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" />
                    @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>
                    <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', $webhook->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>
                    <label class="inline-flex items-center gap-2">
                        <input type="hidden" name="is_active" value="0" />
                        <input type="checkbox" name="is_active" value="1" {{ old('is_active', $webhook->is_active) ? 'checked' : '' }} class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" />
                        <span class="text-sm text-gray-700">Active</span>
                    </label>
                </div>
            </div>
            <div class="mt-6 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">Save</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 class="rounded-lg border border-gray-200 bg-white shadow">
            <h2 class="border-b border-gray-200 px-4 py-3 text-sm font-semibold text-gray-900">Last 50 deliveries</h2>
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th scope="col" class="px-4 py-2 text-left text-xs font-medium uppercase tracking-wider text-gray-500">Event</th>
                            <th scope="col" class="px-4 py-2 text-left text-xs font-medium uppercase tracking-wider text-gray-500">Status</th>
                            <th scope="col" class="px-4 py-2 text-left text-xs font-medium uppercase tracking-wider text-gray-500">Attempts</th>
                            <th scope="col" class="px-4 py-2 text-left text-xs font-medium uppercase tracking-wider text-gray-500">Time</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200 bg-white">
                        @forelse ($deliveries as $d)
                            <tr class="hover:bg-gray-50">
                                <td class="whitespace-nowrap px-4 py-2 text-sm text-gray-900">{{ $d->event }}</td>
                                <td class="whitespace-nowrap px-4 py-2">
                                    @if ($d->delivered_at)
                                        <span class="inline-flex rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800">{{ $d->response_status ?? 'OK' }}</span>
                                    @else
                                        <span class="inline-flex rounded-full bg-red-100 px-2 py-0.5 text-xs font-medium text-red-800">{{ $d->response_status ?? 'Failed' }}</span>
                                    @endif
                                </td>
                                <td class="whitespace-nowrap px-4 py-2 text-sm text-gray-600">{{ $d->attempts }}</td>
                                <td class="whitespace-nowrap px-4 py-2 text-sm text-gray-600">{{ $d->created_at->format('M j, Y H:i') }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="px-4 py-6 text-center text-sm text-gray-500">No deliveries yet.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection