@extends('admin.layouts.app')

@section('title', 'Webhooks')
@section('breadcrumb')
    <span class="current">Webhooks</span>
@endsection

@section('content')
<div class="page-header" style="display:flex;align-items:center;justify-content:space-between;">
    <div>
        <h1 class="page-title">
            <span class="title-icon"><i data-lucide="webhook" style="width:20px;height:20px;"></i></span>
            Webhooks
        </h1>
        <p class="page-subtitle">Manage webhook endpoints for real-time event notifications</p>
    </div>
    <a href="{{ route('admin.webhooks.create') }}" class="btn btn-primary">
        <i data-lucide="plus" style="width:14px;height:14px;"></i>
        New Webhook
    </a>
</div>

<div class="admin-table-wrap">
    <div class="admin-table-header">
        <div class="admin-table-title">
            <i data-lucide="webhook" class="icon" style="width:14px;height:14px;"></i>
            Registered Webhooks
        </div>
    </div>
    <div class="table-responsive">
        <table class="admin-table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>URL</th>
                    <th>Events</th>
                    <th>Deliveries</th>
                    <th>Status</th>
                    <th style="text-align:right;">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($webhooks as $webhook)
                <tr>
                    <td>
                        <a href="{{ route('admin.webhooks.show', $webhook) }}" style="font-weight:500;color:var(--vsc-text-active);">
                            {{ $webhook->name }}
                        </a>
                    </td>
                    <td style="font-size:11px;color:var(--vsc-text-secondary);font-family:'JetBrains Mono',monospace;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
                        {{ $webhook->url }}
                    </td>
                    <td>
                        <div style="display:flex;gap:3px;flex-wrap:wrap;">
                            @foreach(($webhook->events ?? []) as $evt)
                            <span class="badge badge-blue" style="font-size:9px;">{{ $evt }}</span>
                            @endforeach
                        </div>
                    </td>
                    <td>{{ $webhook->deliveries_count }}</td>
                    <td>
                        <span class="badge badge-{{ $webhook->is_active ? 'green' : 'red' }}">
                            {{ $webhook->is_active ? 'Active' : 'Inactive' }}
                        </span>
                        @if($webhook->failure_count > 0)
                        <span class="badge badge-yellow" style="margin-left:2px;">{{ $webhook->failure_count }} fails</span>
                        @endif
                    </td>
                    <td style="text-align:right;">
                        <div style="display:flex;gap:4px;justify-content:flex-end;">
                            <form method="POST" action="{{ route('admin.webhooks.test', $webhook) }}" style="display:inline;">
                                @csrf
                                <button type="submit" class="btn btn-sm" style="padding:4px 8px;font-size:11px;background:var(--vsc-bg-tertiary);border:1px solid var(--vsc-border-light);color:var(--vsc-text-secondary);border-radius:4px;cursor:pointer;">
                                    <i data-lucide="play" style="width:10px;height:10px;"></i> Test
                                </button>
                            </form>
                            <form method="POST" action="{{ route('admin.webhooks.toggle', $webhook) }}" style="display:inline;">
                                @csrf
                                <button type="submit" class="btn btn-sm" style="padding:4px 8px;font-size:11px;background:var(--vsc-bg-tertiary);border:1px solid var(--vsc-border-light);color:var(--vsc-text-secondary);border-radius:4px;cursor:pointer;">
                                    {{ $webhook->is_active ? 'Disable' : 'Enable' }}
                                </button>
                            </form>
                            <form method="POST" action="{{ route('admin.webhooks.destroy', $webhook) }}" onsubmit="return confirm('Delete this webhook?');" style="display:inline;">
                                @csrf @method('DELETE')
                                <button type="submit" class="btn btn-sm" style="padding:4px 8px;font-size:11px;background:var(--vsc-bg-tertiary);border:1px solid var(--vsc-border-light);color:#ef4444;border-radius:4px;cursor:pointer;">
                                    <i data-lucide="trash-2" style="width:10px;height:10px;"></i>
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="6" style="text-align:center;padding:32px;color:var(--vsc-text-secondary);">No webhooks registered yet.</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

{{ $webhooks->links() }}
@endsection