@extends('layouts.app')
@section('title', 'Webhooks')
@section('page-title', 'Webhooks')
@section('content')
<div class="row g-3">
    <div class="col-md-4">
        <div class="card">
            <div class="card-header bg-white"><h6 class="mb-0">Add Webhook</h6></div>
            <div class="card-body">
                <form method="POST" action="{{ route('dashboard.webhooks.store') }}">
                    @csrf
                    <div class="mb-3">
                        <label class="form-label">Webhook URL</label>
                        <input type="url" name="url" class="form-control" placeholder="https://your-app.com/webhook" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Device (optional)</label>
                        <select name="device_id" class="form-select">
                            <option value="">All Devices</option>
                            @foreach(auth()->user()->devices as $d)
                                <option value="{{ $d->id }}">{{ $d->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Secret (optional)</label>
                        <input type="text" name="secret" class="form-control" placeholder="For signature verification">
                    </div>
                    <button type="submit" class="btn btn-whatsapp w-100">Add Webhook</button>
                </form>
            </div>
        </div>
    </div>
    <div class="col-md-8">
        <div class="card">
            <div class="card-header bg-white"><h6 class="mb-0">Configured Webhooks</h6></div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead class="table-light">
                            <tr><th>URL</th><th>Device</th><th>Status</th><th>Success/Fail</th><th>Last Triggered</th><th>Actions</th></tr>
                        </thead>
                        <tbody>
                            @forelse($webhooks as $webhook)
                            <tr>
                                <td class="text-truncate" style="max-width: 200px;"><code class="small">{{ $webhook->url }}</code></td>
                                <td>{{ $webhook->device?->name ?? 'All' }}</td>
                                <td><span class="badge bg-{{ $webhook->is_active ? 'success' : 'secondary' }}">{{ $webhook->is_active ? 'Active' : 'Inactive' }}</span></td>
                                <td class="small"><span class="text-success">{{ $webhook->success_count }}</span> / <span class="text-danger">{{ $webhook->failure_count }}</span></td>
                                <td class="small">{{ $webhook->last_triggered_at?->diffForHumans() ?? 'Never' }}</td>
                                <td>
                                    <div class="btn-group btn-group-sm">
                                        <form action="{{ route('dashboard.webhooks.toggle', $webhook->id) }}" method="POST" class="d-inline">@csrf
                                            <button class="btn btn-outline-{{ $webhook->is_active ? 'warning' : 'success' }} btn-sm"><i class="bi bi-{{ $webhook->is_active ? 'pause' : 'play' }}"></i></button>
                                        </form>
                                        <form action="{{ route('dashboard.webhooks.destroy', $webhook->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Delete?')">@csrf @method('DELETE')
                                            <button class="btn btn-outline-danger btn-sm"><i class="bi bi-trash"></i></button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                            @empty
                            <tr><td colspan="6" class="text-center text-muted py-4">No webhooks configured</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="mt-3">{{ $webhooks->links() }}</div>
    </div>
</div>
@endsection