@extends('root')

@section('content')
<div class="container-fluid">
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0">Webhooks Configuration</h5>
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createWebhookModal">
                <i class="ti ti-plus me-1"></i> Add Webhook
            </button>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>URL</th>
                            <th>Event Type</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($webhooks as $webhook)
                        <tr>
                            <td>{{ $webhook->url }}</td>
                            <td><span class="badge bg-secondary">{{ $webhook->event_type }}</span></td>
                            <td>
                                @if($webhook->is_active)
                                    <span class="badge bg-success">Active</span>
                                @else
                                    <span class="badge bg-danger">Inactive</span>
                                @endif
                            </td>
                            <td>
                                <button class="btn btn-sm btn-outline-danger btn-delete" data-id="{{ $webhook->id }}">
                                    <i class="ti ti-trash"></i>
                                </button>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="4" class="text-center text-muted">No webhooks configured</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            
            
        </div>
    </div>
</div>

<!-- Create Modal -->
<div class="modal fade" id="createWebhookModal" tabindex="-1">
    <div class="modal-dialog">
        <form action="{{ route('client.webhooks.store') }}" method="POST" class="modal-content" id="formCreateWebhook">
            @csrf
            <div class="modal-header">
                <h5 class="modal-title">Add Webhook</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label">Event Type</label>
                    <select name="event_type" class="form-control" required>
                        <option value="meta.webhook">Meta Webhook (Semua data dari Meta – payload penuh)</option>
                        </select>
                </div>
                <div class="mb-3">
                    <label class="form-label">URL</label>
                    <input type="url" name="url" class="form-control" placeholder="https://..." required>
                </div>
                <div class="mb-3">
                    <label class="form-label">Secret Token (Optional)</label>
                    <input type="text" name="secret_token" class="form-control" placeholder="For HMAC Signature">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary">Save</button>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
    $('#formCreateWebhook').on('submit', function(e) {
        e.preventDefault();
        var form = $(this);
        $.post(form.attr('action'), form.serialize())
            .done(function(res) {
                if(res.success) {
                    location.reload();
                } else {
                    alert('Error: ' + res.message);
                }
            })
            .fail(function(xhr) {
                alert('Error processing request');
            });
    });

    $('.btn-delete').on('click', function() {
        if(!confirm('Delete this webhook?')) return;
        var id = $(this).data('id');
        $.ajax({
            url: '/client/webhooks/' + id,
            type: 'DELETE',
            data: { _token: '{{ csrf_token() }}' },
            success: function(res) {
                if(res.success) location.reload();
            }
        });
    });
</script>
@endpush
@endsection