@extends('admin.layouts.app')

@section('title', 'New Webhook')
@section('breadcrumb')
    <a href="{{ route('admin.webhooks.index') }}">Webhooks</a>
    <span class="current">Create</span>
@endsection

@section('content')
<div class="page-header">
    <h1 class="page-title">
        <span class="title-icon"><i data-lucide="webhook" style="width:20px;height:20px;"></i></span>
        New Webhook
    </h1>
    <p class="page-subtitle">Register a webhook endpoint to receive event notifications</p>
</div>

<div class="admin-card" style="max-width:680px;">
    @if($errors->any())
    <div style="background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.3);border-radius:6px;padding:12px 16px;margin-bottom:16px;font-size:12px;color:#fca5a5;">
        @foreach($errors->all() as $e)<div>{{ $e }}</div>@endforeach
    </div>
    @endif

    <form method="POST" action="{{ route('admin.webhooks.store') }}">
        @csrf

        <div class="form-group">
            <label class="form-label">Webhook Name</label>
            <input type="text" name="name" class="form-input" value="{{ old('name') }}" placeholder="e.g. My Integration" required>
        </div>

        <div class="form-group">
            <label class="form-label">Endpoint URL</label>
            <input type="url" name="url" class="form-input" value="{{ old('url') }}" placeholder="https://example.com/webhook" required>
            <div style="font-size:11px;color:var(--vsc-text-secondary);margin-top:4px;">POST requests with JSON payload will be sent to this URL.</div>
        </div>

        <div class="form-group">
            <label class="form-label">Events to Subscribe</label>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px;">
                @foreach($events as $event)
                <label style="display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--vsc-bg-tertiary);border-radius:4px;cursor:pointer;font-size:12px;">
                    <input type="checkbox" name="events[]" value="{{ $event }}" {{ in_array($event, old('events', [])) ? 'checked' : '' }}
                        style="accent-color:var(--vsc-blue);">
                    <span style="color:var(--vsc-text-active);">{{ $event }}</span>
                </label>
                @endforeach
            </div>
        </div>

        <div style="display:flex;gap:8px;margin-top:20px;">
            <button type="submit" class="btn btn-primary">
                <i data-lucide="save" style="width:14px;height:14px;"></i> Create Webhook
            </button>
            <a href="{{ route('admin.webhooks.index') }}" class="btn btn-secondary">Cancel</a>
        </div>
    </form>
</div>
@endsection