@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fas fa-webhook"></i>
                        Dokumentasi Webhook Payment Gateway
                    </h3>
                    <div class="card-tools">
                        <a href="{{ route('payment-gateways.index') }}" class="btn btn-default btn-sm">
                            <i class="fas fa-arrow-left"></i> Kembali
                        </a>
                    </div>
                </div>
                
                <div class="card-body">
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle"></i>
                        <strong>Webhook</strong> adalah notifikasi otomatis yang dikirim oleh payment gateway ketika status pembayaran berubah.
                        Konfigurasi webhook diperlukan untuk memastikan status pembayaran di aplikasi selalu up-to-date.
                    </div>

                    <!-- Midtrans Webhook -->
                    <div class="row">
                        <div class="col-md-4">
                            <div class="card border-primary">
                                <div class="card-header bg-primary text-white">
                                    <h5 class="mb-0">
                                        <i class="fas fa-credit-card"></i>
                                        Midtrans Webhook
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <h6>Webhook URL:</h6>
                                    <div class="input-group mb-3">
                                        <input type="text" class="form-control" value="{{ $webhookUrls['midtrans'] ?? '#' }}" readonly>
                                        <div class="input-group-append">
                                            <button class="btn btn-outline-secondary" type="button" onclick="copyToClipboard('{{ $webhookUrls['midtrans'] ?? '#' }}')">
                                                <i class="fas fa-copy"></i>
                                            </button>
                                        </div>
                                    </div>
                                    
                                    <h6>Konfigurasi di Midtrans:</h6>
                                    <ol class="small">
                                        <li>Login ke <a href="https://dashboard.midtrans.com" target="_blank">Midtrans Dashboard</a></li>
                                        <li>Pilih Environment (Sandbox/Production)</li>
                                        <li>Masuk ke menu <strong>Settings → Configuration</strong></li>
                                        <li>Isi <strong>Payment Notification URL</strong> dengan URL webhook di atas</li>
                                        <li>Klik <strong>Save</strong></li>
                                    </ol>
                                    
                                    <div class="alert alert-warning small">
                                        <i class="fas fa-exclamation-triangle"></i>
                                        Midtrans menggunakan IP whitelisting, pastikan server dapat diakses dari internet.
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Xendit Webhook -->
                        <div class="col-md-4">
                            <div class="card border-success">
                                <div class="card-header bg-success text-white">
                                    <h5 class="mb-0">
                                        <i class="fas fa-university"></i>
                                        Xendit Webhook
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <h6>Webhook URL:</h6>
                                    <div class="input-group mb-3">
                                        <input type="text" class="form-control" value="{{ $webhookUrls['xendit'] ?? '#' }}" readonly>
                                        <div class="input-group-append">
                                            <button class="btn btn-outline-secondary" type="button" onclick="copyToClipboard('{{ $webhookUrls['xendit'] ?? '#' }}')">
                                                <i class="fas fa-copy"></i>
                                            </button>
                                        </div>
                                    </div>
                                    
                                    <h6>Konfigurasi di Xendit:</h6>
                                    <ol class="small">
                                        <li>Login ke <a href="https://dashboard.xendit.co" target="_blank">Xendit Dashboard</a></li>
                                        <li>Masuk ke menu <strong>Settings → Webhooks</strong></li>
                                        <li>Klik <strong>+ Add webhook endpoint</strong></li>
                                        <li>Isi URL dengan webhook URL di atas</li>
                                        <li>Pilih events yang diperlukan:
                                            <ul>
                                                <li>Virtual Account Paid</li>
                                                <li>E-wallet Payment</li>
                                                <li>Invoice Paid</li>
                                                <li>Credit Card Payment</li>
                                            </ul>
                                        </li>
                                        <li>Klik <strong>Create webhook</strong></li>
                                    </ol>
                                    
                                    <div class="alert alert-info small">
                                        <i class="fas fa-info-circle"></i>
                                        Xendit menggunakan callback token untuk validasi webhook.
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Tripay Webhook -->
                        <div class="col-md-4">
                            <div class="card border-warning">
                                <div class="card-header bg-warning text-dark">
                                    <h5 class="mb-0">
                                        <i class="fas fa-wallet"></i>
                                        Tripay Webhook
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <h6>Webhook URL:</h6>
                                    <div class="input-group mb-3">
                                        <input type="text" class="form-control" value="{{ $webhookUrls['tripay'] ?? '#' }}" readonly>
                                        <div class="input-group-append">
                                            <button class="btn btn-outline-secondary" type="button" onclick="copyToClipboard('{{ $webhookUrls['tripay'] ?? '#' }}')">
                                                <i class="fas fa-copy"></i>
                                            </button>
                                        </div>
                                    </div>
                                    
                                    <h6>Konfigurasi di Tripay:</h6>
                                    <ol class="small">
                                        <li>Login ke <a href="https://tripay.co.id/member" target="_blank">Tripay Dashboard</a></li>
                                        <li>Masuk ke menu <strong>API → Settings</strong></li>
                                        <li>Scroll ke bagian <strong>Callback URL</strong></li>
                                        <li>Isi URL dengan webhook URL di atas</li>
                                        <li>Klik <strong>Save Settings</strong></li>
                                    </ol>
                                    
                                    <div class="alert alert-warning small">
                                        <i class="fas fa-exclamation-triangle"></i>
                                        Tripay menggunakan signature validation untuk keamanan webhook.
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Testing Webhook -->
                    <div class="row mt-4">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header">
                                    <h5><i class="fas fa-vials"></i> Testing Webhook</h5>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <h6>Cara Test Webhook:</h6>
                                            <ol>
                                                <li>Pastikan semua gateway sudah dikonfigurasi dengan benar</li>
                                                <li>Lakukan test transaksi kecil (minimal amount)</li>
                                                <li>Monitor log aplikasi untuk melihat webhook yang masuk</li>
                                                <li>Verifikasi status pembayaran ter-update otomatis</li>
                                            </ol>
                                        </div>
                                        <div class="col-md-6">
                                            <h6>Troubleshooting:</h6>
                                            <ul>
                                                <li><strong>Webhook tidak diterima:</strong> Periksa firewall dan pastikan server dapat diakses dari internet</li>
                                                <li><strong>Status tidak update:</strong> Periksa log error dan validasi signature</li>
                                                <li><strong>Duplicate notification:</strong> Implementasikan idempotency check</li>
                                                <li><strong>SSL Error:</strong> Pastikan menggunakan SSL certificate yang valid</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Webhook Security -->
                    <div class="row mt-4">
                        <div class="col-12">
                            <div class="card border-danger">
                                <div class="card-header bg-danger text-white">
                                    <h5><i class="fas fa-shield-alt"></i> Keamanan Webhook</h5>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <h6>Validasi Signature:</h6>
                                            <ul class="small">
                                                <li>Semua webhook harus memvalidasi signature</li>
                                                <li>Gunakan secret key yang aman</li>
                                                <li>Tolak request dengan signature tidak valid</li>
                                            </ul>
                                        </div>
                                        <div class="col-md-4">
                                            <h6>HTTPS Only:</h6>
                                            <ul class="small">
                                                <li>Selalu gunakan HTTPS untuk webhook URL</li>
                                                <li>SSL certificate harus valid</li>
                                                <li>Jangan gunakan self-signed certificate</li>
                                            </ul>
                                        </div>
                                        <div class="col-md-4">
                                            <h6>Rate Limiting:</h6>
                                            <ul class="small">
                                                <li>Implementasikan rate limiting</li>
                                                <li>Log semua webhook request</li>
                                                <li>Monitor untuk anomali</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
function copyToClipboard(text) {
    navigator.clipboard.writeText(text).then(function() {
        toastr.success('Webhook URL berhasil disalin ke clipboard');
    }, function(err) {
        console.error('Could not copy text: ', err);
        
        // Fallback for older browsers
        const textArea = document.createElement("textarea");
        textArea.value = text;
        document.body.appendChild(textArea);
        textArea.focus();
        textArea.select();
        try {
            document.execCommand('copy');
            toastr.success('Webhook URL berhasil disalin ke clipboard');
        } catch (err) {
            toastr.error('Gagal menyalin URL. Copy manual: ' + text);
        }
        document.body.removeChild(textArea);
    });
}
</script>
@endpush