@extends('admin.layout')

@section('title', 'Payment Gateway')

@section('content')
@php
    $selectedGateway = old('active_gateway', $legacyGatewayActive ? 'belibayar' : $activeGateway);
    $belibayarHasError = $errors->has('belibayar_api_key')
        || $errors->has('belibayar_secret_key')
        || $errors->has('belibayar_webhook_secret')
        || $errors->has('belibayar_environment');
    $binderpayHasError = $errors->has('binderpay_partner_id')
        || $errors->has('binderpay_private_key')
        || $errors->has('binderpay_public_key')
        || $errors->has('binderpay_environment');
    $initialSection = $binderpayHasError ? 'binderpay' : ($belibayarHasError ? 'belibayar' : 'overview');
@endphp

<div class="admin-settings-page admin-payment-page" data-payment-page data-initial-section="{{ $initialSection }}">
    <section class="admin-section-header admin-payment-page-header">
        <div>
            <h1 class="admin-section-title font-display">Payment <span>Gateway</span></h1>
            <p class="admin-section-description">
                Pilih Belibayar atau BinderPay untuk QRIS. Kredensial disimpan terenkripsi dan tidak pernah ditampilkan kembali.
            </p>
        </div>
    </section>

    @if ($legacyGatewayActive)
        <section class="admin-payment-alert is-danger" role="alert">
            <span class="admin-payment-alert-icon">!</span>
            <div>
                <strong>Gateway lama masih tercatat aktif</strong>
                <p>Pakasir/DompetX tidak lagi tersedia untuk order baru. Lengkapi salah satu gateway baru, uji koneksi, lalu simpan.</p>
            </div>
        </section>
    @endif

    @if ($errors->any())
        <section class="admin-payment-alert is-danger" role="alert">
            <span class="admin-payment-alert-icon">!</span>
            <div>
                <strong>Perubahan belum disimpan</strong>
                <p>{{ $errors->first() }}</p>
            </div>
        </section>
    @endif

    <nav class="admin-payment-tabs" aria-label="Payment Gateway">
        <button type="button" class="admin-payment-tab" data-payment-tab="overview">Ringkasan</button>
        <button type="button" class="admin-payment-tab" data-payment-tab="belibayar">Belibayar</button>
        <button type="button" class="admin-payment-tab" data-payment-tab="binderpay">BinderPay</button>
        <button type="button" class="admin-payment-tab" data-payment-tab="guide">Panduan</button>
    </nav>

    <form id="payment-gateway-form" method="POST" action="{{ route('admin.settings.update') }}" class="admin-settings-form admin-payment-form">
        @csrf

        <section class="admin-payment-view" data-payment-panel="overview">
            <div class="admin-payment-surface">
                <header class="admin-payment-surface-header">
                    <div>
                        <span class="admin-payment-section-label">Order baru</span>
                        <h2>Pilih gateway QRIS</h2>
                    </div>
                    <p>Order lama tetap menyimpan nama gateway asal untuk histori.</p>
                </header>

                <div class="admin-payment-provider-grid">
                    @foreach ([
                        'belibayar' => ['label' => 'Belibayar', 'ready' => $belibayarReady, 'copy' => 'Direct API · HMAC-SHA256'],
                        'binderpay' => ['label' => 'BinderPay', 'ready' => $binderpayReady, 'copy' => 'SNAP BI · RSA-SHA256'],
                    ] as $provider => $meta)
                        <article class="admin-payment-provider-card {{ $selectedGateway === $provider ? 'is-selected' : '' }}"
                                 data-provider-card="{{ $provider }}">
                            <input type="radio" name="active_gateway" value="{{ $provider }}" @checked($selectedGateway === $provider) hidden>
                            <div class="admin-payment-provider-topline">
                                <div class="admin-payment-provider-identity">
                                    <span class="admin-payment-provider-icon" aria-hidden="true">
                                        <svg viewBox="0 0 24 24" focusable="false">
                                            <path d="M4 4h6v6H4zM14 4h6v6h-6zM4 14h6v6H4zM14 14h2v2h-2zM18 14h2v6h-2zM14 18h2v2h-2z"></path>
                                        </svg>
                                    </span>
                                    <div>
                                        <h3>{{ $meta['label'] }}</h3>
                                        <p>{{ $meta['copy'] }}</p>
                                    </div>
                                </div>
                                <span class="admin-payment-status {{ $activeGateway === $provider ? 'is-active' : ($meta['ready'] ? 'is-ready' : 'is-warning') }}"
                                      data-provider-status="{{ $provider }}">
                                    {{ $activeGateway === $provider ? 'Aktif saat ini' : ($meta['ready'] ? 'Kredensial lengkap' : 'Belum lengkap') }}
                                </span>
                            </div>
                            <dl class="admin-payment-provider-summary">
                                <div><dt>Metode</dt><dd>QRIS dinamis</dd></div>
                                <div><dt>Webhook</dt><dd>Signature wajib</dd></div>
                            </dl>
                            <div class="admin-payment-provider-actions">
                                <button type="button" class="admin-button admin-button-primary" data-choose-provider="{{ $provider }}">
                                    {{ $selectedGateway === $provider ? 'Dipilih' : 'Gunakan '.$meta['label'] }}
                                </button>
                                <button type="button" class="admin-button admin-button-ghost" data-open-section="{{ $provider }}">Atur kredensial</button>
                            </div>
                        </article>
                    @endforeach
                </div>

                @error('active_gateway')<p class="admin-form-error admin-payment-inline-error">{{ $message }}</p>@enderror
            </div>
        </section>

        <section class="admin-payment-view" data-payment-panel="belibayar" hidden>
            <div class="admin-payment-surface">
                <header class="admin-payment-surface-header">
                    <div>
                        <span class="admin-payment-section-label">Belibayar</span>
                        <h2>Kredensial Direct API</h2>
                    </div>
                    <span class="admin-payment-status {{ $belibayarReady ? 'is-ready' : 'is-warning' }}">
                        {{ $belibayarReady ? 'Tersimpan' : 'Belum lengkap' }}
                    </span>
                </header>

                <div class="admin-payment-pakasir-form">
                    <div class="admin-form-group">
                        <label class="admin-form-label" for="belibayar-environment">Environment</label>
                        <select id="belibayar-environment" name="belibayar_environment" class="admin-form-control">
                            <option value="sandbox" @selected(old('belibayar_environment', $belibayarEnvironment) === 'sandbox')>Sandbox (untuk uji coba)</option>
                            <option value="production" @selected(old('belibayar_environment', $belibayarEnvironment) === 'production')>Production (uang sungguhan)</option>
                        </select>
                        @error('belibayar_environment')<p class="admin-form-error">{{ $message }}</p>@enderror
                    </div>
                    <div class="admin-form-group">
                        <label class="admin-form-label" for="belibayar-api-key">API Key</label>
                        <input id="belibayar-api-key" type="password" name="belibayar_api_key" value="" class="admin-form-control font-figures"
                               placeholder="{{ $belibayarStored['api_key'] ? 'Tersimpan — isi hanya untuk mengganti' : 'byr_test_... atau byr_live_...' }}" autocomplete="new-password">
                        @error('belibayar_api_key')<p class="admin-form-error">{{ $message }}</p>@enderror
                    </div>
                    <div class="admin-form-group">
                        <label class="admin-form-label" for="belibayar-secret-key">Secret Key</label>
                        <input id="belibayar-secret-key" type="password" name="belibayar_secret_key" value="" class="admin-form-control font-figures"
                               placeholder="{{ $belibayarStored['secret_key'] ? 'Tersimpan — isi hanya untuk mengganti' : 'Secret Key Direct API' }}" autocomplete="new-password">
                        @error('belibayar_secret_key')<p class="admin-form-error">{{ $message }}</p>@enderror
                    </div>
                    <div class="admin-form-group">
                        <label class="admin-form-label" for="belibayar-webhook-secret">Webhook Secret</label>
                        <input id="belibayar-webhook-secret" type="password" name="belibayar_webhook_secret" value="" class="admin-form-control font-figures"
                               placeholder="{{ $belibayarStored['webhook_secret'] ? 'Tersimpan — isi hanya untuk mengganti' : 'Webhook Secret dari dashboard' }}" autocomplete="new-password">
                        @error('belibayar_webhook_secret')<p class="admin-form-error">{{ $message }}</p>@enderror
                    </div>
                </div>

                <details class="admin-payment-technical" open>
                    <summary>Callback URL yang harus dipasang di Belibayar</summary>
                    <div class="admin-payment-webhook-block">
                        <code data-webhook-url="belibayar">{{ $belibayarWebhookUrl }}</code>
                        <button type="button" class="admin-button admin-button-ghost admin-payment-copy-button" data-copy-webhook="belibayar">Salin URL</button>
                    </div>
                </details>

                <div class="admin-payment-provider-actions">
                    <button type="button" class="admin-button admin-button-ghost" data-test-provider="belibayar" data-test-url="{{ route('admin.settings.belibayar.test') }}">Uji Koneksi</button>
                    <span class="admin-payment-field-note" data-test-result="belibayar">Uji ini tidak membuat transaksi.</span>
                </div>
            </div>
        </section>

        <section class="admin-payment-view" data-payment-panel="binderpay" hidden>
            <div class="admin-payment-surface">
                <header class="admin-payment-surface-header">
                    <div>
                        <span class="admin-payment-section-label">BinderPay</span>
                        <h2>Kredensial SNAP API</h2>
                    </div>
                    <span class="admin-payment-status {{ $binderpayReady ? 'is-ready' : 'is-warning' }}">
                        {{ $binderpayReady ? 'Tersimpan' : 'Belum lengkap' }}
                    </span>
                </header>

                <div class="admin-payment-pakasir-form">
                    <div class="admin-form-group">
                        <label class="admin-form-label" for="binderpay-environment">Environment</label>
                        <select id="binderpay-environment" name="binderpay_environment" class="admin-form-control">
                            <option value="sandbox" @selected(old('binderpay_environment', $binderpayEnvironment) === 'sandbox')>Sandbox (untuk uji coba)</option>
                            <option value="production" @selected(old('binderpay_environment', $binderpayEnvironment) === 'production')>Production (uang sungguhan)</option>
                        </select>
                        @error('binderpay_environment')<p class="admin-form-error">{{ $message }}</p>@enderror
                    </div>
                    <div class="admin-form-group">
                        <label class="admin-form-label" for="binderpay-partner-id">Partner ID</label>
                        <input id="binderpay-partner-id" type="password" name="binderpay_partner_id" value="" class="admin-form-control font-figures"
                               placeholder="{{ $binderpayStored['partner_id'] ? 'Tersimpan — isi hanya untuk mengganti' : 'X-PARTNER-ID' }}" autocomplete="new-password">
                        @error('binderpay_partner_id')<p class="admin-form-error">{{ $message }}</p>@enderror
                    </div>
                    <div class="admin-form-group">
                        <label class="admin-form-label" for="binderpay-private-key">Private Key milik merchant</label>
                        <textarea id="binderpay-private-key" name="binderpay_private_key" rows="7" class="admin-form-control font-figures"
                                  placeholder="{{ $binderpayStored['private_key'] ? 'Tersimpan — tempel hanya untuk mengganti' : '-----BEGIN PRIVATE KEY-----' }}" autocomplete="off"></textarea>
                        <p class="admin-payment-field-note">Rahasia. Jangan kirim private key melalui chat atau WhatsApp.</p>
                        @error('binderpay_private_key')<p class="admin-form-error">{{ $message }}</p>@enderror
                    </div>
                    <div class="admin-form-group">
                        <label class="admin-form-label" for="binderpay-public-key">Public Key BinderPay untuk callback</label>
                        <textarea id="binderpay-public-key" name="binderpay_public_key" rows="7" class="admin-form-control font-figures"
                                  placeholder="{{ $binderpayStored['public_key'] ? 'Tersimpan — tempel hanya untuk mengganti' : '-----BEGIN PUBLIC KEY-----' }}" autocomplete="off"></textarea>
                        <p class="admin-payment-field-note">Unduh public key resmi dari halaman dokumentasi BinderPay, lalu tempel seluruh isi PEM.</p>
                        @error('binderpay_public_key')<p class="admin-form-error">{{ $message }}</p>@enderror
                    </div>
                </div>

                <details class="admin-payment-technical" open>
                    <summary>Callback URL yang harus didaftarkan di BinderPay</summary>
                    <div class="admin-payment-webhook-block">
                        <code data-webhook-url="binderpay">{{ $binderpayWebhookUrl }}</code>
                        <button type="button" class="admin-button admin-button-ghost admin-payment-copy-button" data-copy-webhook="binderpay">Salin URL</button>
                    </div>
                </details>

                <div class="admin-payment-provider-actions">
                    <button type="button" class="admin-button admin-button-ghost" data-test-provider="binderpay" data-test-url="{{ route('admin.settings.binderpay.test') }}">Uji Koneksi</button>
                    <span class="admin-payment-field-note" data-test-result="binderpay">Uji ini hanya melakukan inquiry sentinel, bukan membuat QRIS.</span>
                </div>
            </div>
        </section>

        <section class="admin-payment-view" data-payment-panel="guide" hidden>
            <div class="admin-payment-surface">
                <header class="admin-payment-surface-header">
                    <div><span class="admin-payment-section-label">Panduan</span><h2>Urutan aktivasi yang aman</h2></div>
                </header>
                <div class="admin-payment-guide-list">
                    <article class="admin-payment-guide-item"><span>1</span><div><h3>Mulai dari Sandbox</h3><p>Isi kredensial sandbox, pasang callback URL, whitelist IP server untuk Belibayar, lalu tekan Uji Koneksi.</p></div></article>
                    <article class="admin-payment-guide-item"><span>2</span><div><h3>Lakukan pembayaran percobaan</h3><p>Pilih gateway di Ringkasan, simpan, lalu checkout produk murah/dummy dan pastikan status invoice berubah otomatis.</p></div></article>
                    <article class="admin-payment-guide-item"><span>3</span><div><h3>Pindah ke Production</h3><p>Ganti environment dan masukkan kredensial production. Sistem akan menguji lagi sebelum mengaktifkan.</p></div></article>
                    <article class="admin-payment-guide-item"><span>4</span><div><h3>Jangan hapus order lama</h3><p>Nama Pakasir/DompetX hanya dipertahankan pada histori order. Keduanya tidak dapat dipilih lagi untuk checkout baru.</p></div></article>
                </div>
            </div>
        </section>

        <section class="admin-payment-savebar" data-payment-savebar>
            <div class="admin-payment-savebar-copy">
                <strong>Uji, simpan, dan aktifkan</strong>
                <span>Password admin wajib untuk mencegah penggantian rekening tanpa izin.</span>
            </div>
            <div class="admin-payment-savebar-actions">
                <div class="admin-form-group admin-payment-password-group">
                    <label for="current-password" class="admin-form-label">Password admin</label>
                    <input id="current-password" type="password" name="current_password" class="admin-form-control" autocomplete="current-password" placeholder="Password admin saat ini">
                    @error('current_password')<p class="admin-form-error">{{ $message }}</p>@enderror
                </div>
                <button type="submit" class="admin-button admin-button-primary admin-settings-submit-button">Simpan Pengaturan</button>
            </div>
        </section>
    </form>
</div>

<script>
(() => {
    const page = document.querySelector('[data-payment-page]');
    const form = document.getElementById('payment-gateway-form');
    const csrf = @json(csrf_token());

    function setSection(section) {
        document.querySelectorAll('[data-payment-panel]').forEach(panel => panel.hidden = panel.dataset.paymentPanel !== section);
        document.querySelectorAll('[data-payment-tab]').forEach(tab => tab.classList.toggle('is-active', tab.dataset.paymentTab === section));
        const savebar = document.querySelector('[data-payment-savebar]');
        if (savebar) savebar.hidden = section === 'guide';
    }

    document.querySelectorAll('[data-payment-tab]').forEach(tab => tab.addEventListener('click', () => setSection(tab.dataset.paymentTab)));
    document.querySelectorAll('[data-open-section]').forEach(button => button.addEventListener('click', () => setSection(button.dataset.openSection)));

    document.querySelectorAll('[data-choose-provider]').forEach(button => button.addEventListener('click', () => {
        const provider = button.dataset.chooseProvider;
        const input = form.querySelector(`input[name="active_gateway"][value="${provider}"]`);
        if (!input) return;
        input.checked = true;
        document.querySelectorAll('[data-provider-card]').forEach(card => card.classList.toggle('is-selected', card.dataset.providerCard === provider));
        document.querySelectorAll('[data-choose-provider]').forEach(item => {
            item.textContent = item.dataset.chooseProvider === provider ? 'Dipilih' : `Gunakan ${item.dataset.chooseProvider === 'binderpay' ? 'BinderPay' : 'Belibayar'}`;
        });
    }));

    document.querySelectorAll('[data-copy-webhook]').forEach(button => button.addEventListener('click', async () => {
        const target = document.querySelector(`[data-webhook-url="${button.dataset.copyWebhook}"]`);
        if (!target) return;
        await navigator.clipboard.writeText(target.textContent.trim());
        const original = button.textContent;
        button.textContent = 'Tersalin';
        window.setTimeout(() => button.textContent = original, 1400);
    }));

    document.querySelectorAll('[data-test-provider]').forEach(button => button.addEventListener('click', async () => {
        const result = document.querySelector(`[data-test-result="${button.dataset.testProvider}"]`);
        const original = button.textContent;
        const payload = Object.fromEntries(new FormData(form).entries());
        delete payload.current_password;
        button.disabled = true;
        button.textContent = 'Menguji...';

        try {
            const response = await fetch(button.dataset.testUrl, {
                method: 'POST',
                headers: {'Accept': 'application/json', 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf},
                body: JSON.stringify(payload),
            });
            const data = await response.json();
            if (result) result.textContent = data.message || (response.ok ? 'Koneksi berhasil.' : 'Koneksi gagal.');
            window.pushToast?.(data.message || 'Pemeriksaan selesai.', response.ok && data.ready ? 'success' : 'error');
        } catch (error) {
            if (result) result.textContent = 'Server tidak dapat menjalankan uji koneksi.';
            window.pushToast?.('Uji koneksi gagal dijalankan.', 'error');
        } finally {
            button.disabled = false;
            button.textContent = original;
        }
    }));

    setSection(page?.dataset.initialSection || 'overview');
})();
</script>
@endsection