@extends('layout.app')

@section('title', 'Pengaturan Pembayaran - Sistem Manajemen ISP')

@section('content')
@php
    $availableMethods = [
        'Payment Gateway' => 'Payment Gateway Otomatis (Tripay/Flip) - REKOMENDASI',
        'Bank Transfer' => 'Transfer Bank Manual',
        'QRIS' => 'QRIS',
        'E-Wallet' => 'Dompet Digital'
    ];

    $selectedMethods = old('payment_methods', $settings['payment_methods'] ?? []);
    
    // Auto-select Payment Gateway if no selection
    if (empty($selectedMethods)) {
        $selectedMethods = ['Payment Gateway'];
    }
@endphp

<x-material-page-header 
    title="Pengaturan Pembayaran" 
    subtitle="Kelola metode dan gateway pembayaran pelanggan"
    :breadcrumbs="[
        ['name' => 'Pengaturan', 'url' => route('pengaturan.pembayaran')],
        ['name' => 'Pembayaran']
    ]"
>
    <button type="button" class="btn btn-sm bg-gradient-secondary mb-0 me-2" onclick="exportSettings()">
        <i class="material-symbols-rounded" style="font-size: 16px; vertical-align: middle;">download</i> Export
    </button>
    <button type="button" class="btn btn-sm bg-gradient-secondary mb-0 me-2" data-bs-toggle="modal" data-bs-target="#importModal">
        <i class="material-symbols-rounded" style="font-size: 16px; vertical-align: middle;">upload</i> Import
    </button>
    <button type="button" class="btn btn-sm bg-gradient-secondary mb-0" onclick="loadStats()">
        <i class="material-symbols-rounded" style="font-size: 16px; vertical-align: middle;">bar_chart</i> Refresh Statistik
    </button>
</x-material-page-header>

<div class="container-fluid py-4">
    @if(session('success'))
        <div class="alert alert-success text-white alert-dismissible fade show" role="alert">
            <span class="alert-icon"><i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">check_circle</i></span>
            <span class="alert-text">{{ session('success') }}</span>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    @if(session('error'))
        <div class="alert alert-danger text-white alert-dismissible fade show" role="alert">
            <span class="alert-icon"><i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">error</i></span>
            <span class="alert-text">{{ session('error') }}</span>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <div class="row">
        <div class="col-xl-8">
            <div class="card mb-4" style="border: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);">
                <div class="card-header pb-3">
                    <h6 class="mb-0 font-weight-bold d-flex align-items-center" style="font-size: 0.875rem; color: #344767;">
                        <i class="material-symbols-rounded me-2" style="font-size: 20px; line-height: 1; color: #5e72e4;">credit_card</i> Metode Pembayaran
                    </h6>
                </div>
                <div class="card-body pt-3">
                    <div class="alert alert-success text-white alert-dismissible fade show" role="alert">
                        <h5 class="alert-heading">
                            <i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">rocket_launch</i>Payment Gateway Otomatis Direkomendasikan!
                        </h5>
                        <p class="mb-2">
                            Sistem telah dikonfigurasi untuk menggunakan <strong>Payment Gateway Otomatis</strong> 
                            sebagai metode pembayaran utama. Dengan menggunakan Tripay atau Flip, pelanggan dapat:
                        </p>
                        <ul class="mb-0">
                            <li>Membayar melalui Virtual Account, QRIS, E-Wallet secara otomatis</li>
                            <li>Mendapatkan konfirmasi pembayaran real-time tanpa perlu approval manual</li>
                            <li>Mempercepat proses pembayaran dan mengurangi beban admin</li>
                        </ul>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                    
                    <form action="{{ route('pengaturan.pembayaran.update') }}" method="POST" id="payment-settings-form">
                        @csrf
                        <div class="form-group mb-3">
                            <label class="form-label">Metode yang Ditawarkan</label>
                            <small class="text-muted d-block mb-2">
                                <i class="material-symbols-rounded me-1" style="font-size: 16px; vertical-align: middle;">info</i>Payment Gateway akan otomatis dipilih sebagai metode default
                            </small>
                            <div class="row">
                                @foreach($availableMethods as $value => $label)
                                    <div class="col-md-6">
                                        <div class="form-check form-switch mb-2">
                                            <input type="checkbox"
                                                   class="form-check-input"
                                                   id="method_{{ \Illuminate\Support\Str::slug($value, '_') }}"
                                                   name="payment_methods[]"
                                                   value="{{ $value }}"
                                                   {{ in_array($value, $selectedMethods, true) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="method_{{ \Illuminate\Support\Str::slug($value, '_') }}">
                                                {{ $label }}
                                            </label>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                            @error('payment_methods')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label class="form-label">Nominal Auto Approve</label>
                                    <div class="input-group">
                                        <span class="input-group-text">Rp</span>
                                        <input type="number"
                                               min="0"
                                               name="auto_approve_amount"
                                               class="form-control @error('auto_approve_amount') is-invalid @enderror"
                                               value="{{ old('auto_approve_amount', $settings['auto_approve_amount'] ?? 0) }}">
                                    </div>
                                    <small class="text-muted">Pembayaran ≤ nominal ini akan otomatis disetujui.</small>
                                    @error('auto_approve_amount')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label class="form-label">Pengingat Jatuh Tempo (hari)</label>
                                    <input type="number"
                                           min="1"
                                           max="30"
                                           name="payment_reminder_days"
                                           class="form-control @error('payment_reminder_days') is-invalid @enderror"
                                           value="{{ old('payment_reminder_days', $settings['payment_reminder_days'] ?? 7) }}">
                                    @error('payment_reminder_days')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-check form-switch mb-3">
                                    <input type="checkbox"
                                           class="form-check-input"
                                           id="notification_enabled"
                                           name="notification_enabled"
                                           value="1"
                                           {{ old('notification_enabled', $settings['notification_enabled'] ?? true) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="notification_enabled">
                                        <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">notifications</i>Kirim Notifikasi
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-check form-switch mb-3">
                                    <input type="checkbox"
                                           class="form-check-input"
                                           id="email_notifications"
                                           name="email_notifications"
                                           value="1"
                                           {{ old('email_notifications', $settings['email_notifications'] ?? true) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="email_notifications">
                                        <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">email</i>Email
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-check form-switch mb-3">
                                    <input type="checkbox"
                                           class="form-check-input"
                                           id="whatsapp_notifications"
                                           name="whatsapp_notifications"
                                           value="1"
                                           {{ old('whatsapp_notifications', $settings['whatsapp_notifications'] ?? false) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="whatsapp_notifications">
                                        <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">chat</i>WhatsApp
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label class="form-label">Informasi Transfer Bank</label>
                                    <textarea class="form-control @error('bank_transfer_info') is-invalid @enderror"
                                              name="bank_transfer_info"
                                              rows="3"
                                              placeholder="Nama bank, nomor rekening, atas nama">{{ old('bank_transfer_info', $settings['bank_transfer_info'] ?? '') }}</textarea>
                                    @error('bank_transfer_info')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label class="form-label">Informasi QRIS / E-Wallet</label>
                                    <textarea class="form-control @error('qris_info') is-invalid @enderror"
                                              name="qris_info"
                                              rows="3"
                                              placeholder="Instruksi pembayaran via QRIS">{{ old('qris_info', $settings['qris_info'] ?? '') }}</textarea>
                                    @error('qris_info')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="form-group mb-3">
                            <label class="form-label">Catatan E-Wallet</label>
                            <textarea class="form-control @error('ewallet_info') is-invalid @enderror"
                                      name="ewallet_info"
                                      rows="3"
                                      placeholder="Nomor akun dompet digital">{{ old('ewallet_info', $settings['ewallet_info'] ?? '') }}</textarea>
                            @error('ewallet_info')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        <hr class="my-4">

                        <!-- PPN Settings -->
                        <div class="card mb-4" style="border: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                            <div class="card-header pb-3 bg-transparent border-0">
                                <h6 class="mb-0 font-weight-bold d-flex align-items-center text-white" style="font-size: 0.875rem;">
                                    <i class="material-symbols-rounded me-2" style="font-size: 20px; line-height: 1;">payments</i> Pengaturan PPN (Pajak Pertambahan Nilai)
                                </h6>
                            </div>
                            <div class="card-body pt-3">
                                <div class="form-check form-switch mb-3">
                                    <input type="checkbox" 
                                           class="form-check-input" 
                                           id="ppn_enabled" 
                                           name="ppn_enabled" 
                                           value="1"
                                           {{ old('ppn_enabled', $settings['ppn_enabled'] ?? false) ? 'checked' : '' }}>
                                    <label class="form-check-label text-white font-weight-bold" for="ppn_enabled">
                                        Aktifkan PPN
                                    </label>
                                    <small class="text-white-50 d-block mt-2">
                                        <i class="material-symbols-rounded me-1" style="font-size: 16px; vertical-align: middle;">info</i>
                                        Jika diaktifkan, PPN akan otomatis ditambahkan ke semua tagihan baru
                                    </small>
                                </div>

                                <div class="form-group mb-3" id="ppn-percentage-group">
                                    <label class="form-label text-white">
                                        Persentase PPN <span class="text-danger">*</span>
                                    </label>
                                    <div class="input-group">
                                        <input type="number" 
                                               class="form-control @error('ppn_percentage') is-invalid @enderror" 
                                               id="ppn_percentage" 
                                               name="ppn_percentage" 
                                               value="{{ old('ppn_percentage', $settings['ppn_percentage'] ?? 11) }}"
                                               min="0" 
                                               max="100" 
                                               step="0.01"
                                               required>
                                        <span class="input-group-text">%</span>
                                    </div>
                                    <small class="text-white-50 d-block mt-2">
                                        <i class="material-symbols-rounded me-1" style="font-size: 16px; vertical-align: middle;">info</i>
                                        Default: 11% (sesuai ketentuan PPN di Indonesia)
                                    </small>
                                    @error('ppn_percentage')
                                        <div class="invalid-feedback d-block text-white">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="alert alert-warning text-white mt-3 mb-0">
                                    <strong><i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">warning</i>Catatan:</strong>
                                    <ul class="mb-0 mt-2">
                                        <li>PPN hanya akan diterapkan pada tagihan baru yang dibuat setelah pengaturan ini disimpan</li>
                                        <li>Tagihan yang sudah dibuat sebelumnya tidak akan terpengaruh</li>
                                        <li>PPN dihitung dari subtotal (jumlah tagihan + denda) sebelum PPN</li>
                                        <li>Pastikan Anda memiliki NPWP dan terdaftar sebagai PKP (Pengusaha Kena Pajak) sebelum mengaktifkan PPN</li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <button type="submit" class="btn bg-gradient-primary mb-0">
                                <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">save</i> Simpan Pengaturan
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-xl-4">
            <div class="card mb-4" style="border: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);">
                <div class="card-header pb-3">
                    <h6 class="mb-0 font-weight-bold d-flex align-items-center" style="font-size: 0.875rem; color: #344767;">
                        <i class="material-symbols-rounded me-2" style="font-size: 20px; line-height: 1; color: #5e72e4;">list</i> Fitur Pengaturan
                    </h6>
                </div>
                <div class="card-body pt-3">
                    <ul class="list-unstyled mb-0">
                        <li class="media align-items-center mb-3">
                            <div class="media-body">
                                <h6 class="mb-0 text-primary">Metode Pembayaran</h6>
                                <small class="text-muted">Atur kombinasi Bank Transfer, QRIS, E-Wallet & gateway otomatis.</small>
                            </div>
                        </li>
                        <li class="media align-items-center mb-3">
                            <div class="media-body">
                                <h6 class="mb-0 text-success">Auto Approve & Reminder</h6>
                                <small class="text-muted">Tetapkan nominal auto-approve, pengingat, dan grace period.</small>
                            </div>
                        </li>
                        <li class="media align-items-center mb-3">
                            <div class="media-body">
                                <h6 class="mb-0 text-info">Notifikasi Multi Channel</h6>
                                <small class="text-muted">Aktifkan email & WhatsApp untuk pengingat pembayaran.</small>
                            </div>
                        </li>
                        <li class="media align-items-center mb-3">
                            <div class="media-body">
                                <h6 class="mb-0 text-warning">Gateway Terintegrasi</h6>
                                <small class="text-muted">Kelola kredensial Tripay dan Flip untuk pembayaran otomatis.</small>
                            </div>
                        </li>
                        <li class="media align-items-center">
                            <div class="media-body">
                                <h6 class="mb-0 text-dark">Import / Export</h6>
                                <small class="text-muted">Backup dan restore konfigurasi pembayaran dalam format JSON.</small>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="card mb-4" style="border: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);">
                <div class="card-header pb-3">
                    <h6 class="mb-0 font-weight-bold d-flex align-items-center" style="font-size: 0.875rem; color: #344767;">
                        <i class="material-symbols-rounded me-2" style="font-size: 20px; line-height: 1; color: #5e72e4;">pie_chart</i> Statistik Pembayaran
                    </h6>
                </div>
                <div class="card-body pt-3">
                    <div class="row">
                        <div class="col-6 text-center mb-3">
                            <h5 class="text-muted text-uppercase">Total</h5>
                            <span class="h2 font-weight-bold" id="total-payments">-</span>
                        </div>
                        <div class="col-6 text-center mb-3">
                            <h5 class="text-muted text-uppercase">Pending</h5>
                            <span class="h2 font-weight-bold text-warning" id="pending-payments">-</span>
                        </div>
                        <div class="col-6 text-center">
                            <h5 class="text-muted text-uppercase">Disetujui</h5>
                            <span class="h2 font-weight-bold text-success" id="approved-payments">-</span>
                        </div>
                        <div class="col-6 text-center">
                            <h5 class="text-muted text-uppercase">Rata-rata (jam)</h5>
                            <span class="h2 font-weight-bold text-info" id="avg-time">-</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card mb-4" style="border: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);">
                <div class="card-header pb-3">
                    <h6 class="mb-0 font-weight-bold d-flex align-items-center" style="font-size: 0.875rem; color: #344767;">
                        <i class="material-symbols-rounded me-2" style="font-size: 20px; line-height: 1; color: #5e72e4;">settings</i> Konfigurasi Gateway
                    </h6>
                </div>
                <div class="card-body pt-3">
                    @if(isset($gateways) && $gateways->count())
                        @php
                            $fieldLabels = [
                                'tripay' => [
                                    'api_key' => 'API Key',
                                    'api_secret' => 'Private Key',
                                    'merchant_id' => 'Merchant Code'
                                ],
                                'flip' => [
                                    'api_key' => 'Secret Key',
                                    'api_secret' => 'Validation Token',
                                ],
                            ];
                            
                            $gatewayDescriptions = [
                                'tripay' => 'Payment gateway untuk Virtual Account, E-Wallet (GoPay, OVO, DANA, ShopeePay), QRIS, dan Retail (Alfamart/Indomaret)',
                                'flip' => 'Payment gateway untuk disbursement dan money transfer antar bank',
                            ];
                            
                            // Filter hanya Tripay dan Flip
                            $allowedGateways = $gateways->whereIn('gateway_type', ['tripay', 'flip', 'manual']);
                        @endphp
                        
                        @if($allowedGateways->count() > 0)
                            @foreach($allowedGateways as $gateway)
                                @php
                                    $defaultConfig = config('payment.gateways.' . $gateway->gateway_type, []);
                                    $labels = $fieldLabels[$gateway->gateway_type] ?? ['api_key' => 'API Key', 'api_secret' => 'API Secret'];
                                    $environment = $gateway->environment ?? (($defaultConfig['is_production'] ?? false) ? 'production' : 'sandbox');
                                    $description = $gatewayDescriptions[$gateway->gateway_type] ?? '';
                                @endphp
                                <div class="mb-4 pb-4 {{ !$loop->last ? 'border-bottom' : '' }}">
                                    <div class="d-flex justify-content-between align-items-center mb-3">
                                        <div>
                                            <h5 class="mb-1 font-weight-bold">
                                                @if($gateway->gateway_type === 'tripay')
                                                    <i class="material-symbols-rounded text-primary me-2" style="font-size: 20px; vertical-align: middle;">account_balance_wallet</i>
                                                @elseif($gateway->gateway_type === 'flip')
                                                    <i class="material-symbols-rounded text-info me-2" style="font-size: 20px; vertical-align: middle;">swap_horiz</i>
                                                @else
                                                    <i class="material-symbols-rounded text-success me-2" style="font-size: 20px; vertical-align: middle;">payments</i>
                                                @endif
                                                {{ $gateway->name }}
                                            </h5>
                                            @if($description)
                                                <small class="text-muted d-block">{{ $description }}</small>
                                            @endif
                                        </div>
                                        <div class="form-check form-switch">
                                            <input type="checkbox"
                                                   class="form-check-input gateway-toggle"
                                                   id="gateway_{{ $gateway->id }}"
                                                   data-gateway-id="{{ $gateway->id }}"
                                                   {{ $gateway->is_active ? 'checked' : '' }}>
                                            <label class="form-check-label" for="gateway_{{ $gateway->id }}"></label>
                                        </div>
                                    </div>

                                    @if($gateway->gateway_type !== 'manual')
                                        <div class="alert alert-light border mb-3">
                                            <small class="text-muted">
                                                <strong>Status:</strong> 
                                                <span class="badge badge-sm bg-gradient-{{ $gateway->is_active ? 'success' : 'secondary' }}">
                                                    {{ $gateway->is_active ? 'Aktif' : 'Nonaktif' }}
                                                </span>
                                                <span class="mx-2">|</span>
                                                <strong class="mx-2">Environment:</strong>
                                                <span class="badge badge-sm bg-gradient-{{ $environment === 'production' ? 'primary' : 'warning' }}">
                                                    {{ ucfirst($environment) }}
                                                </span>
                                            </small>
                                        </div>


                                        <form class="gateway-config-form" data-gateway-id="{{ $gateway->id }}">
                                            @csrf
                                            <input type="hidden" name="gateway_id" value="{{ $gateway->id }}">
                                            <input type="hidden" name="is_active" value="{{ $gateway->is_active ? 1 : 0 }}" id="is_active_{{ $gateway->id }}">
                                            
                                            @foreach($labels as $field => $label)
                                                @php
                                                    $value = $gateway->{$field} ?? ($defaultConfig[$field] ?? ($defaultConfig[$field === 'merchant_id' ? 'merchant_code' : $field] ?? ''));
                                                @endphp
                                                <div class="form-group mb-3">
                                                    <label class="form-label">
                                                        {{ $label }}
                                                        <span class="text-danger">*</span>
                                                    </label>
                                                    <div class="input-group">
                                                        <span class="input-group-text">
                                                            <i class="material-symbols-rounded" style="font-size: 18px; vertical-align: middle;">key</i>
                                                        </span>
                                                        <input type="{{ $field === 'api_secret' ? 'password' : 'text' }}"
                                                               name="{{ $field }}"
                                                               class="form-control @error($field) is-invalid @enderror"
                                                               value="{{ $value }}"
                                                               placeholder="Masukkan {{ strtolower($label) }}"
                                                               {{ $gateway->gateway_type === 'tripay' && $field === 'merchant_id' ? 'readonly' : '' }}
                                                               required>
                                                        @if($field === 'api_secret')
                                                            <button class="btn btn-outline-secondary toggle-password" type="button">
                                                                <i class="material-symbols-rounded" style="font-size: 18px; vertical-align: middle;">visibility</i>
                                                            </button>
                                                        @endif
                                                    </div>
                                                    @error($field)
                                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                                    @enderror
                                                    @if($gateway->gateway_type === 'tripay' && $field === 'merchant_id')
                                                        <small class="text-info d-block mt-1">
                                                            <i class="material-symbols-rounded me-1" style="font-size: 16px; vertical-align: middle;">info</i>
                                                            Merchant Code telah ditetapkan: <strong>T33603</strong>
                                                        </small>
                                                    @elseif($gateway->gateway_type === 'tripay' && $field === 'api_key')
                                                        <small class="text-muted d-block mt-1">
                                                            Dapatkan API Key di dashboard Tripay → <a href="https://tripay.co.id/member/merchant" target="_blank">Member Area</a>
                                                        </small>
                                                    @elseif($gateway->gateway_type === 'tripay' && $field === 'api_secret')
                                                        <small class="text-muted d-block mt-1">
                                                            Private Key untuk signature verification webhook
                                                        </small>
                                                    @elseif($gateway->gateway_type === 'flip' && $field === 'api_key')
                                                        <small class="text-muted d-block mt-1">
                                                            Dapatkan Secret Key di dashboard Flip → <a href="https://flip.id/dashboard-v2/developer" target="_blank">Developer Settings</a>
                                                        </small>
                                                    @endif
                                                </div>
                                            @endforeach
                                            
                                            <div class="form-group mb-3">
                                                <label class="form-label">
                                                    Environment <span class="text-danger">*</span>
                                                </label>
                                                <select name="environment"
                                                        class="form-control gateway-environment @error('environment') is-invalid @enderror"
                                                        data-gateway-id="{{ $gateway->id }}"
                                                        required>
                                                    <option value="sandbox" {{ $environment === 'sandbox' ? 'selected' : '' }}>
                                                        Sandbox (Testing)
                                                    </option>
                                                    <option value="production" {{ $environment === 'production' ? 'selected' : '' }}>
                                                        Production (Live)
                                                    </option>
                                                </select>
                                                <small class="text-muted d-block mt-1">
                                                    Gunakan Sandbox untuk testing, Production untuk transaksi real
                                                </small>
                                                @error('environment')
                                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                                @enderror
                                            </div>
                                            
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <button type="submit" class="btn bg-gradient-primary mb-0 w-100">
                                                        <i class="material-symbols-rounded me-1" style="font-size: 18px; vertical-align: middle;">save</i>Simpan Konfigurasi
                                                    </button>
                                                </div>
                                                <div class="col-md-6">
                                                    <button type="button" class="btn bg-gradient-info mb-0 w-100 test-gateway-btn" data-gateway-type="{{ $gateway->gateway_type }}" data-gateway-id="{{ $gateway->id }}">
                                                        <i class="material-symbols-rounded me-1" style="font-size: 18px; vertical-align: middle;">send</i>Test Koneksi
                                                    </button>
                                                </div>
                                            </div>
                                        </form>
                                    @else
                                        <div class="alert alert-info text-white mb-0">
                                            <i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">info</i>
                                            <strong>Pembayaran Manual</strong>
                                            <p class="mb-0 mt-2">Pelanggan upload bukti pembayaran, lalu admin konfirmasi secara manual. Informasi rekening bank dan instruksi pembayaran dapat diatur pada form di sebelah kiri.</p>
                                        </div>
                                    @endif
                                </div>
                            @endforeach
                        @else
                            <div class="py-4">
                                <div class="alert alert-warning text-white mb-4">
                                    <h6 class="alert-heading">
                                        <i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">warning</i>Gateway Belum Tersedia
                                    </h6>
                                    <p class="mb-0">Tripay dan Flip belum terdaftar dalam sistem. Gunakan form di bawah untuk menambahkan gateway.</p>
                                </div>
                                
                                <form action="{{ route('pengaturan.pembayaran.store-gateway') }}" method="POST" id="add-gateway-form-existing">
                                    @csrf
                                    <div class="form-group mb-3">
                                        <label class="form-label font-weight-bold">
                                            Tipe Gateway <span class="text-danger">*</span>
                                        </label>
                                        <select name="gateway_type" class="form-control" id="gateway_type_select_existing" required>
                                            <option value="">Pilih Gateway</option>
                                            <option value="tripay">Tripay</option>
                                            <option value="flip">Flip</option>
                                            <option value="manual">Pembayaran Manual</option>
                                        </select>
                                        <small class="text-muted d-block mt-1">
                                            <i class="material-symbols-rounded me-1" style="font-size: 16px; vertical-align: middle;">info</i>Pilih gateway yang ingin ditambahkan
                                        </small>
                                    </div>

                                    <div id="gateway-config-fields-existing" style="display: none;">
                                        <div class="form-group mb-3">
                                            <label class="form-label font-weight-bold">Nama Gateway</label>
                                            <input type="text" name="name" class="form-control" placeholder="Nama gateway (opsional)">
                                            <small class="text-muted d-block mt-1">Kosongkan untuk menggunakan nama default</small>
                                        </div>

                                        <div class="form-group mb-3" id="api_key_field_existing">
                                            <label class="form-label font-weight-bold">API Key</label>
                                            <input type="text" name="api_key" class="form-control" placeholder="Masukkan API Key">
                                        </div>

                                        <div class="form-group mb-3" id="api_secret_field_existing">
                                            <label class="form-label font-weight-bold">API Secret / Private Key</label>
                                            <div class="input-group">
                                                <input type="password" name="api_secret" class="form-control" placeholder="Masukkan API Secret">
                                                <button class="btn btn-outline-secondary toggle-password-add-existing" type="button">
                                                    <i class="material-symbols-rounded" style="font-size: 18px; vertical-align: middle;">visibility</i>
                                                </button>
                                            </div>
                                        </div>

                                        <div class="form-group mb-3" id="merchant_id_field_existing">
                                            <label class="form-label font-weight-bold">Merchant ID / Code</label>
                                            <input type="text" name="merchant_id" class="form-control" placeholder="Masukkan Merchant ID">
                                            <small class="text-info d-block mt-1" id="merchant_id_hint_existing" style="display: none;">
                                                <i class="material-symbols-rounded me-1" style="font-size: 16px; vertical-align: middle;">info</i>Merchant Code default: <strong>T33603</strong>
                                            </small>
                                        </div>

                                        <div class="form-group mb-3">
                                            <label class="form-label font-weight-bold">
                                                Environment <span class="text-danger">*</span>
                                            </label>
                                            <select name="environment" class="form-control" required>
                                                <option value="sandbox">Sandbox (Testing)</option>
                                                <option value="production">Production (Live)</option>
                                            </select>
                                            <small class="text-muted d-block mt-1">
                                                Gunakan Sandbox untuk testing, Production untuk transaksi real
                                            </small>
                                        </div>

                                        <div class="form-group mb-3">
                                            <div class="form-check form-switch">
                                                <input type="checkbox" class="form-check-input" id="is_active_add_existing" name="is_active" value="1">
                                                <label class="form-check-label" for="is_active_add_existing">Aktifkan Gateway</label>
                                            </div>
                                        </div>

                                        <button type="submit" class="btn bg-gradient-primary mb-0 w-100">
                                            <i class="material-symbols-rounded me-1" style="font-size: 18px; vertical-align: middle;">add</i>Tambah Gateway
                                        </button>
                                    </div>
                                </form>
                            </div>
                        @endif
                    @else
                        <div class="py-4">
                            <div class="alert alert-info text-white mb-4">
                                <h6 class="alert-heading">
                                    <i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">info</i>Tambah Payment Gateway
                                </h6>
                                <p class="mb-0">Pilih gateway pembayaran yang ingin ditambahkan ke sistem.</p>
                            </div>
                            
                            <form action="{{ route('pengaturan.pembayaran.store-gateway') }}" method="POST" id="add-gateway-form">
                                @csrf
                                <div class="form-group mb-3">
                                    <label class="form-label font-weight-bold">
                                        Tipe Gateway <span class="text-danger">*</span>
                                    </label>
                                    <select name="gateway_type" class="form-control" id="gateway_type_select" required>
                                        <option value="">Pilih Gateway</option>
                                        <option value="tripay">Tripay</option>
                                        <option value="flip">Flip</option>
                                        <option value="manual">Pembayaran Manual</option>
                                    </select>
                                    <small class="text-muted d-block mt-1">
                                        <i class="material-symbols-rounded me-1" style="font-size: 16px; vertical-align: middle;">info</i>Pilih gateway yang ingin ditambahkan
                                    </small>
                                </div>

                                <div id="gateway-config-fields" style="display: none;">
                                    <div class="form-group mb-3">
                                        <label class="form-label font-weight-bold">Nama Gateway</label>
                                        <input type="text" name="name" class="form-control" placeholder="Nama gateway (opsional)">
                                        <small class="text-muted d-block mt-1">Kosongkan untuk menggunakan nama default</small>
                                    </div>

                                    <div class="form-group mb-3" id="api_key_field">
                                        <label class="form-label font-weight-bold">API Key</label>
                                        <input type="text" name="api_key" class="form-control" placeholder="Masukkan API Key">
                                    </div>

                                    <div class="form-group mb-3" id="api_secret_field">
                                        <label class="form-label font-weight-bold">API Secret / Private Key</label>
                                        <div class="input-group">
                                            <input type="password" name="api_secret" class="form-control" placeholder="Masukkan API Secret">
                                            <button class="btn btn-outline-secondary toggle-password-add" type="button">
                                                <i class="material-symbols-rounded" style="font-size: 18px; vertical-align: middle;">visibility</i>
                                            </button>
                                        </div>
                                    </div>

                                    <div class="form-group mb-3" id="merchant_id_field">
                                        <label class="form-label font-weight-bold">Merchant ID / Code</label>
                                        <input type="text" name="merchant_id" class="form-control" placeholder="Masukkan Merchant ID">
                                        <small class="text-info d-block mt-1" id="merchant_id_hint" style="display: none;">
                                            <i class="material-symbols-rounded me-1" style="font-size: 16px; vertical-align: middle;">info</i>Merchant Code default: <strong>T33603</strong>
                                        </small>
                                    </div>

                                    <div class="form-group mb-3">
                                        <label class="form-label font-weight-bold">
                                            Environment <span class="text-danger">*</span>
                                        </label>
                                        <select name="environment" class="form-control" required>
                                            <option value="sandbox">Sandbox (Testing)</option>
                                            <option value="production">Production (Live)</option>
                                        </select>
                                        <small class="text-muted d-block mt-1">
                                            Gunakan Sandbox untuk testing, Production untuk transaksi real
                                        </small>
                                    </div>

                                    <div class="form-check form-switch mb-3">
                                        <input type="checkbox" class="form-check-input" id="is_active_add" name="is_active" value="1">
                                        <label class="form-check-label" for="is_active_add">Aktifkan Gateway</label>
                                    </div>

                                    <button type="submit" class="btn bg-gradient-primary mb-0 w-100">
                                        <i class="material-symbols-rounded me-1" style="font-size: 18px; vertical-align: middle;">add</i>Tambah Gateway
                                    </button>
                                </div>
                            </form>
                        </div>
                    @endif
                </div>
            </div>

            <div class="card mb-4" style="border: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);">
                <div class="card-header pb-3">
                    <h6 class="mb-0 font-weight-bold d-flex align-items-center" style="font-size: 0.875rem; color: #344767;">
                        <i class="material-symbols-rounded me-2" style="font-size: 20px; line-height: 1; color: #5e72e4;">menu_book</i> Panduan Integrasi
                    </h6>
                </div>
                <div class="card-body pt-3">
                    <div class="mb-4">
                        <h6 class="text-primary font-weight-bold mb-2">
                            <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">account_balance_wallet</i>Tripay
                        </h6>
                        <ol class="pl-3 mb-0 small">
                            <li>Daftar di <a href="https://tripay.co.id" target="_blank">tripay.co.id</a></li>
                            <li>Verifikasi akun dan lengkapi data bisnis</li>
                            <li>Dapatkan API Key dan Private Key di Member Area</li>
                            <li>Merchant Code sudah ditetapkan: <code>T33603</code></li>
                            <li>Set webhook URL ke sistem Anda</li>
                            <li>Aktifkan metode pembayaran yang diinginkan</li>
                        </ol>
                        <div class="mt-2">
                            <a href="https://tripay.co.id/developer" target="_blank" class="btn btn-sm bg-gradient-primary mb-0">
                                <i class="material-symbols-rounded me-1" style="font-size: 16px; vertical-align: middle;">menu_book</i>Dokumentasi API
                            </a>
                        </div>
                    </div>

                    <div class="border-top pt-4">
                        <h6 class="text-info font-weight-bold mb-2">
                            <i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">swap_horiz</i>Flip
                        </h6>
                        <ol class="ps-3 mb-0 small">
                            <li>Daftar di <a href="https://flip.id" target="_blank">flip.id</a></li>
                            <li>Verifikasi akun dan lengkapi KYB</li>
                            <li>Dapatkan Secret Key di Developer Settings</li>
                            <li>Untuk disbursement, isi saldo terlebih dahulu</li>
                            <li>Set webhook callback URL</li>
                            <li>Test dengan API sandbox sebelum production</li>
                        </ol>
                        <div class="mt-2">
                            <a href="https://docs.flip.id" target="_blank" class="btn btn-sm bg-gradient-info mb-0">
                                <i class="material-symbols-rounded me-1" style="font-size: 16px; vertical-align: middle;">menu_book</i>Dokumentasi API
                            </a>
                        </div>
                    </div>

                    <div class="alert alert-warning text-white mt-4 mb-0">
                        <small>
                            <strong><i class="material-symbols-rounded me-1" style="font-size: 16px; vertical-align: middle;">warning</i>Penting:</strong>
                            Jangan share API Key/Secret Key ke siapapun. Simpan dengan aman dan jangan commit ke repository public.
                        </small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Import Modal -->
<div class="modal fade" id="importModal" tabindex="-1" aria-labelledby="importModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content" style="border: none; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);">
            <div class="modal-header border-bottom">
                <h5 class="modal-title font-weight-bold" id="importModalLabel" style="color: #344767;">
                    <i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">upload</i> Import Pengaturan Pembayaran
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{ route('pengaturan.pembayaran.import') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="modal-body py-4">
                    <div class="alert alert-info text-white mb-3">
                        <i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">info</i>
                        <strong>Petunjuk:</strong> Pilih file JSON hasil export pengaturan pembayaran sebelumnya.
                    </div>
                    <div class="form-group mb-3">
                        <label class="form-label">File JSON <span class="text-danger">*</span></label>
                        <input type="file" 
                               name="settings_file" 
                               class="form-control @error('settings_file') is-invalid @enderror" 
                               accept=".json" 
                               required>
                        <small class="text-muted">Ukuran maksimal 1 MB.</small>
                        @error('settings_file')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
                <div class="modal-footer border-top">
                    <button type="button" class="btn bg-gradient-secondary mb-0" data-bs-dismiss="modal">
                        <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">close</i> Batal
                    </button>
                    <button type="submit" class="btn bg-gradient-primary mb-0">
                        <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">upload</i> Import
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
// Show/hide PPN percentage field based on checkbox
document.addEventListener('DOMContentLoaded', function() {
    const ppnEnabled = document.getElementById('ppn_enabled');
    const ppnPercentageGroup = document.getElementById('ppn-percentage-group');
    const ppnPercentage = document.getElementById('ppn_percentage');
    
    function togglePpnPercentage() {
        if (ppnEnabled.checked) {
            ppnPercentageGroup.style.display = 'block';
            ppnPercentage.required = true;
        } else {
            ppnPercentageGroup.style.display = 'none';
            ppnPercentage.required = false;
        }
    }
    
    // Initial state
    togglePpnPercentage();
    
    // Toggle on change
    ppnEnabled.addEventListener('change', togglePpnPercentage);
});
</script>
<script>
@php
    try {
        $updateGatewayRoute = route('pengaturan.pembayaran.update-gateway');
        $statsRoute = route('pengaturan.pembayaran.stats');
        $testRoute = route('pengaturan.pembayaran.test-gateway');
        $exportRoute = route('pengaturan.pembayaran.export');
    } catch (\Exception $e) {
        $updateGatewayRoute = '/pengaturan/pembayaran/update-gateway';
        $statsRoute = '/pengaturan/pembayaran/stats';
        $testRoute = '/pengaturan/pembayaran/test-gateway';
        $exportRoute = '/pengaturan/pembayaran/export';
    }
@endphp

const updateGatewayRoute = @json($updateGatewayRoute);
const statsRoute = @json($statsRoute);
const testRoute = @json($testRoute);
const exportRoute = @json($exportRoute);

// Show SweetAlert for session messages
@if(session('success'))
    Swal.fire({
        icon: 'success',
        title: 'Berhasil!',
        text: @json(session('success')),
        confirmButtonColor: '#5e72e4',
        timer: 3000,
        timerProgressBar: true,
        showConfirmButton: false
    });
@endif

@if(session('error'))
    Swal.fire({
        icon: 'error',
        title: 'Gagal!',
        text: @json(session('error')),
        confirmButtonColor: '#5e72e4'
    });
@endif

async function parseJsonResponse(response) {
    const contentType = response.headers.get('content-type') || '';
    if (contentType.includes('application/json')) {
        return response.json();
    }
    const text = await response.text();
    throw new Error(text || 'Server mengembalikan respons tidak valid.');
}

function exportSettings() {
    window.location.href = exportRoute;
}

function getGatewayEnvironment(id) {
    // Validate id before creating querySelector
    if (!id || id === '' || id === 'null' || id === 'undefined') {
        console.warn('getGatewayEnvironment called with invalid id:', id);
        return 'sandbox';
    }
    try {
        const select = document.querySelector(`.gateway-environment[data-gateway-id="${id}"]`);
        return select ? select.value : 'sandbox';
    } catch (error) {
        console.warn('Error in getGatewayEnvironment:', error);
        return 'sandbox';
    }
}

function loadStats() {
    fetch(statsRoute)
        .then(res => res.json())
        .then(data => {
            const totalPayments = document.getElementById('total-payments');
            const pendingPayments = document.getElementById('pending-payments');
            const approvedPayments = document.getElementById('approved-payments');
            const avgTime = document.getElementById('avg-time');
            
            if (totalPayments) totalPayments.textContent = data.total_payments ?? '0';
            if (pendingPayments) pendingPayments.textContent = data.pending_payments ?? '0';
            if (approvedPayments) approvedPayments.textContent = data.approved_payments ?? '0';
            if (avgTime) avgTime.textContent = (data.average_payment_time ?? 0) + ' jam';
        })
        .catch(() => {
            const totalPayments = document.getElementById('total-payments');
            const pendingPayments = document.getElementById('pending-payments');
            const approvedPayments = document.getElementById('approved-payments');
            const avgTime = document.getElementById('avg-time');
            
            if (totalPayments) totalPayments.textContent = '-';
            if (pendingPayments) pendingPayments.textContent = '-';
            if (approvedPayments) approvedPayments.textContent = '-';
            if (avgTime) avgTime.textContent = '-';
        });
}

// Wrap in IIFE to prevent conflicts with other scripts
(function() {
    'use strict';
    
    // Flag to prevent operations during page unload
    let isPageUnloading = false;
    
    // Set flag when page is unloading to prevent further operations
    window.addEventListener('beforeunload', function() {
        isPageUnloading = true;
    });
    
    // Wait for DOM and ensure all scripts are loaded
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        // DOM already loaded, wait a bit for other scripts
        setTimeout(init, 100);
    }
    
    function init() {
        // Check if page is unloading
        if (isPageUnloading) {
            return;
        }
        
        try {
            loadStats();
        } catch (error) {
            console.warn('Error loading stats:', error);
        }

    // Handle main payment settings form submission with SweetAlert confirmation
    try {
        const paymentSettingsForm = document.getElementById('payment-settings-form');
        if (paymentSettingsForm) {
            paymentSettingsForm.addEventListener('submit', function(e) {
                e.preventDefault();
                const form = this;
                
                Swal.fire({
                    title: 'Konfirmasi Penyimpanan',
                    text: 'Apakah Anda yakin ingin menyimpan pengaturan pembayaran ini?',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonColor: '#5e72e4',
                    cancelButtonColor: '#f5365c',
                    confirmButtonText: '<i class="ni ni-check-bold mr-1"></i> Ya, Simpan',
                    cancelButtonText: '<i class="ni ni-fat-remove mr-1"></i> Batal',
                    showLoaderOnConfirm: true,
                    preConfirm: () => {
                        return new Promise((resolve) => {
                            form.submit();
                            resolve();
                        });
                    },
                    allowOutsideClick: () => !Swal.isLoading()
                });
            });
        }
    } catch (error) {
        console.warn('Error setting up payment settings form:', error);
    }

    // Toggle password visibility with error handling
    try {
        document.querySelectorAll('.toggle-password, .toggle-password-add, .toggle-password-add-existing').forEach(btn => {
            btn.addEventListener('click', function(e) {
                try {
                    e.preventDefault();
                    const inputGroup = this.closest('.input-group');
                    if (!inputGroup) return;
                    
                    const input = inputGroup.querySelector('input');
                    const icon = this.querySelector('i');
                    
                    if (!input || !icon) return;
                    
                    if (input.type === 'password') {
                        input.type = 'text';
                        icon.classList.remove('fa-eye');
                        icon.classList.add('fa-eye-slash');
                    } else {
                        input.type = 'password';
                        icon.classList.remove('fa-eye-slash');
                        icon.classList.add('fa-eye');
                    }
                } catch (error) {
                    console.warn('Error toggling password visibility:', error);
                }
            });
        });
    } catch (error) {
        console.warn('Error setting up password toggles:', error);
    }

    // Function to handle gateway type selection with error handling
    function setupGatewayTypeHandler(selectId, fieldsId, apiKeyId, apiSecretId, merchantIdId, merchantHintId, isActiveId) {
        try {
            const gatewayTypeSelect = document.getElementById(selectId);
            const gatewayConfigFields = document.getElementById(fieldsId);
            const apiKeyField = document.getElementById(apiKeyId);
            const apiSecretField = document.getElementById(apiSecretId);
            const merchantIdField = document.getElementById(merchantIdId);
            const merchantIdHint = document.getElementById(merchantHintId);
            const isActiveCheckbox = document.getElementById(isActiveId);

            if (!gatewayTypeSelect || !gatewayConfigFields) {
                return; // Elements don't exist, skip setup
            }

            gatewayTypeSelect.addEventListener('change', function() {
                try {
                    const gatewayType = this.value;
                    
                    if (gatewayType) {
                        if (gatewayConfigFields) {
                            gatewayConfigFields.style.display = 'block';
                        }
                        
                        // Show/hide fields based on gateway type
                        if (gatewayType === 'manual') {
                            // Manual payment doesn't need API keys
                            if (apiKeyField) apiKeyField.style.display = 'none';
                            if (apiSecretField) apiSecretField.style.display = 'none';
                            if (merchantIdField) merchantIdField.style.display = 'none';
                            if (merchantIdHint) merchantIdHint.style.display = 'none';
                            if (isActiveCheckbox) isActiveCheckbox.checked = true;
                        } else {
                            // Tripay and Flip need API keys
                            if (apiKeyField) apiKeyField.style.display = 'block';
                            if (apiSecretField) apiSecretField.style.display = 'block';
                            if (merchantIdField) merchantIdField.style.display = 'block';
                            
                            // Show merchant ID hint for Tripay
                            if (gatewayType === 'tripay' && merchantIdHint) {
                                merchantIdHint.style.display = 'block';
                            } else if (merchantIdHint) {
                                merchantIdHint.style.display = 'none';
                            }
                            
                            if (isActiveCheckbox) isActiveCheckbox.checked = false;
                        }
                    } else {
                        if (gatewayConfigFields) {
                            gatewayConfigFields.style.display = 'none';
                        }
                    }
                } catch (error) {
                    console.warn('Error handling gateway type change:', error);
                }
            });
        } catch (error) {
            console.warn('Error setting up gateway type handler for ' + selectId + ':', error);
        }
    }

    // Setup handlers for both forms with error handling
    try {
        setupGatewayTypeHandler(
            'gateway_type_select',
            'gateway-config-fields',
            'api_key_field',
            'api_secret_field',
            'merchant_id_field',
            'merchant_id_hint',
            'is_active_add'
        );

        setupGatewayTypeHandler(
            'gateway_type_select_existing',
            'gateway-config-fields-existing',
            'api_key_field_existing',
            'api_secret_field_existing',
            'merchant_id_field_existing',
            'merchant_id_hint_existing',
            'is_active_add_existing'
        );
    } catch (error) {
        console.warn('Error setting up gateway handlers:', error);
    }

    // Check Server IP button
    try {
        const checkServerIpBtn = document.getElementById('check-server-ip-btn');
        if (checkServerIpBtn) {
            checkServerIpBtn.addEventListener('click', function(e) {
                e.preventDefault();
                
                const originalText = this.innerHTML;
                this.disabled = true;
                this.innerHTML = '<span class="spinner-border spinner-border-sm mr-1"></span>Checking...';
                
                fetch('{{ route('pengaturan.pembayaran.get-server-ip') }}')
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            let htmlContent = '<div class="text-left">';
                            htmlContent += '<h6 class="mb-3"><i class="fas fa-server text-info mr-2"></i>Server IP Address</h6>';
                            
                            if (data.ipv6) {
                                htmlContent += '<div class="mb-3">';
                                htmlContent += '<label class="font-weight-bold text-primary">IPv6 Address:</label>';
                                htmlContent += '<div class="input-group mb-2">';
                                htmlContent += '<input type="text" class="form-control" value="' + data.ipv6 + '" id="ipv6-copy" readonly>';
                                htmlContent += '<div class="input-group-append">';
                                htmlContent += '<button class="btn btn-primary btn-sm" onclick="copyToClipboard(\'' + data.ipv6 + '\', \'IPv6\')" type="button">';
                                htmlContent += '<i class="fas fa-copy"></i> Copy</button>';
                                htmlContent += '</div></div></div>';
                            }
                            
                            if (data.ipv4) {
                                htmlContent += '<div class="mb-3">';
                                htmlContent += '<label class="font-weight-bold text-success">IPv4 Address:</label>';
                                htmlContent += '<div class="input-group mb-2">';
                                htmlContent += '<input type="text" class="form-control" value="' + data.ipv4 + '" id="ipv4-copy" readonly>';
                                htmlContent += '<div class="input-group-append">';
                                htmlContent += '<button class="btn btn-success btn-sm" onclick="copyToClipboard(\'' + data.ipv4 + '\', \'IPv4\')" type="button">';
                                htmlContent += '<i class="fas fa-copy"></i> Copy</button>';
                                htmlContent += '</div></div></div>';
                            }
                            
                            htmlContent += '<hr class="my-3">';
                            htmlContent += '<h6 class="mb-2"><i class="fas fa-clipboard-check text-success mr-2"></i>Langkah Selanjutnya:</h6>';
                            htmlContent += '<ol class="small mb-0 pl-3">';
                            htmlContent += '<li>Copy IP address di atas</li>';
                            htmlContent += '<li>Login ke <a href="https://tripay.co.id/member" target="_blank">Tripay Member Area</a></li>';
                            htmlContent += '<li>Buka menu <strong>Merchant → API Settings</strong></li>';
                            htmlContent += '<li>Tambahkan IP ke <strong>Whitelist IP</strong></li>';
                            htmlContent += '<li>Simpan dan test koneksi kembali</li>';
                            htmlContent += '</ol>';
                            
                            if (data.server_info) {
                                htmlContent += '<hr class="my-3">';
                                htmlContent += '<details class="small text-muted">';
                                htmlContent += '<summary class="cursor-pointer">Server Information</summary>';
                                htmlContent += '<ul class="mb-0 mt-2">';
                                htmlContent += '<li>Server: ' + data.server_info.server_name + '</li>';
                                htmlContent += '<li>OS: ' + data.server_info.os + '</li>';
                                htmlContent += '<li>PHP: ' + data.server_info.php_version + '</li>';
                                htmlContent += '</ul></details>';
                            }
                            
                            htmlContent += '</div>';
                            
                            Swal.fire({
                                icon: 'info',
                                title: '🔍 Server IP Information',
                                html: htmlContent,
                                width: '600px',
                                confirmButtonText: '<i class="fas fa-external-link-alt mr-1"></i> Buka Tripay Dashboard',
                                showCancelButton: true,
                                cancelButtonText: '<i class="fas fa-times mr-1"></i> Tutup',
                                confirmButtonColor: '#5e72e4',
                                cancelButtonColor: '#6c757d',
                                customClass: {
                                    htmlContainer: 'text-left'
                                }
                            }).then((result) => {
                                if (result.isConfirmed) {
                                    window.open('https://tripay.co.id/member/merchant', '_blank');
                                }
                            });
                        } else {
                            throw new Error(data.message || 'Gagal mendapatkan IP address');
                        }
                    })
                    .catch(err => {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: err.message || 'Gagal mendapatkan IP address server',
                            confirmButtonColor: '#5e72e4'
                        });
                    })
                    .finally(() => {
                        this.disabled = false;
                        this.innerHTML = originalText;
                    });
            });
        }
    } catch (error) {
        console.warn('Error setting up check server IP button:', error);
    }

    // Test gateway button with error handling
    try {
        document.querySelectorAll('.test-gateway-btn').forEach(btn => {
            btn.addEventListener('click', function(e) {
                try {
                    e.preventDefault();
                    
                    // Prevent execution during page unload
                    if (isPageUnloading) {
                        return;
                    }
                    
                    const gatewayType = this.getAttribute('data-gateway-type');
                    const gatewayId = this.getAttribute('data-gateway-id');
                    
                    // Validate gatewayType and gatewayId
                    if (!gatewayType || gatewayType === '' || gatewayType === 'null' || gatewayType === 'undefined') {
                        console.warn('Test gateway button clicked with invalid gateway type:', gatewayType);
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'Tipe gateway tidak valid',
                            confirmButtonColor: '#5e72e4'
                        });
                        return;
                    }
                    
                    if (!gatewayId || gatewayId === '' || gatewayId === 'null' || gatewayId === 'undefined') {
                        console.warn('Test gateway button clicked with invalid gateway ID:', gatewayId);
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'ID gateway tidak valid',
                            confirmButtonColor: '#5e72e4'
                        });
                        return;
                    }
                    
                    const form = this.closest('form');
                    
                    if (!form) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'Form tidak ditemukan',
                            confirmButtonColor: '#5e72e4'
                        });
                        return;
                    }
                    
                    const apiKeyInput = form.querySelector('input[name="api_key"]');
                    const apiSecretInput = form.querySelector('input[name="api_secret"]');
                    const environmentSelect = form.querySelector('select[name="environment"]');
                    
                    if (!apiKeyInput || !apiSecretInput || !environmentSelect) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Form Tidak Lengkap',
                            text: 'Form tidak lengkap',
                            confirmButtonColor: '#5e72e4'
                        });
                        return;
                    }
                    
                    const apiKey = apiKeyInput.value;
                    const apiSecret = apiSecretInput.value;
                    const environment = environmentSelect.value;
                    
                    if (!apiKey || !apiSecret) {
                        Swal.fire({
                            icon: 'warning',
                            title: 'Data Belum Lengkap',
                            text: 'Mohon isi API Key dan API Secret terlebih dahulu',
                            confirmButtonColor: '#5e72e4'
                        });
                        return;
                    }
                    
                    const originalText = this.innerHTML;
                    this.disabled = true;
                    this.innerHTML = '<span class="spinner-border spinner-border-sm mr-1"></span>Testing...';
                    
                    const csrfToken = document.querySelector('meta[name="csrf-token"]');
                    if (!csrfToken) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'CSRF token tidak ditemukan',
                            confirmButtonColor: '#5e72e4'
                        });
                        this.disabled = false;
                        this.innerHTML = originalText;
                        return;
                    }
                    
                    fetch(testRoute, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': csrfToken.content,
                            'Accept': 'application/json'
                        },
                        body: JSON.stringify({
                            gateway_type: gatewayType,
                            api_key: apiKey,
                            api_secret: apiSecret,
                            environment: environment
                        })
                    })
                    .then(parseJsonResponse)
                    .then(data => {
                        if (data.success) {
                            Swal.fire({
                                icon: 'success',
                                title: 'Koneksi Berhasil!',
                                text: data.message || 'Gateway ' + gatewayType + ' terhubung dengan baik.',
                                confirmButtonColor: '#5e72e4',
                                timer: 3000,
                                timerProgressBar: true
                            });
                        } else {
                            throw new Error(data.message || 'Test koneksi gagal');
                        }
                    })
                    .catch(err => {
                        // Format message for better display (preserve line breaks)
                        const message = err.message || 'Terjadi kesalahan saat test koneksi';
                        const isWhitelistError = message.includes('IP Whitelist Error') || message.includes('Whitelist IP');
                        
                        Swal.fire({
                            icon: 'error',
                            title: isWhitelistError ? '⚠️ IP Whitelist Error' : 'Test Koneksi Gagal!',
                            html: message.replace(/\n/g, '<br>'), // Convert line breaks to HTML
                            confirmButtonColor: '#5e72e4',
                            confirmButtonText: isWhitelistError ? 
                                '<i class="fas fa-external-link-alt mr-1"></i> Buka Tripay Dashboard' : 
                                '<i class="fas fa-check mr-1"></i> OK',
                            showCancelButton: isWhitelistError,
                            cancelButtonText: '<i class="fas fa-times mr-1"></i> Tutup',
                            cancelButtonColor: '#6c757d',
                            width: isWhitelistError ? '600px' : '500px',
                            customClass: {
                                htmlContainer: 'text-left'
                            }
                        }).then((result) => {
                            if (result.isConfirmed && isWhitelistError) {
                                window.open('https://tripay.co.id/member/merchant', '_blank');
                            }
                        });
                    })
                    .finally(() => {
                        this.disabled = false;
                        this.innerHTML = originalText;
                    });
                } catch (error) {
                    console.warn('Error testing gateway:', error);
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Terjadi kesalahan saat testing gateway',
                        confirmButtonColor: '#5e72e4'
                    });
                    this.disabled = false;
                }
            });
        });
    } catch (error) {
        console.warn('Error setting up test gateway buttons:', error);
    }

    // Gateway toggle with error handling
    try {
        document.querySelectorAll('.gateway-toggle').forEach(toggle => {
            toggle.addEventListener('change', function () {
                try {
                    // Prevent execution during page unload
                    if (isPageUnloading) {
                        return;
                    }
                    
                    const gatewayId = this.getAttribute('data-gateway-id');
                    
                    // Validate gatewayId before proceeding
                    if (!gatewayId || gatewayId === '' || gatewayId === 'null' || gatewayId === 'undefined') {
                        console.warn('Gateway toggle change event with invalid gateway ID:', gatewayId);
                        return;
                    }
                    
                    const isActive = this.checked;
                    const isActiveInput = document.getElementById('is_active_' + gatewayId);
                    if (isActiveInput) {
                        isActiveInput.value = isActive ? 1 : 0;
                    }

                    const csrfToken = document.querySelector('meta[name="csrf-token"]');
                    if (!csrfToken) {
                        this.checked = !isActive;
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'CSRF token tidak ditemukan',
                            confirmButtonColor: '#5e72e4'
                        });
                        return;
                    }

                    fetch(updateGatewayRoute, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': csrfToken.content,
                            'Accept': 'application/json'
                        },
                        body: JSON.stringify({
                            gateway_id: gatewayId,
                            is_active: isActive,
                            environment: getGatewayEnvironment(gatewayId)
                        })
                    })
                    .then(parseJsonResponse)
                    .then(data => {
                        if (!data.success) {
                            throw new Error(data.message || 'Gagal memperbarui gateway');
                        }
                    })
                    .catch(err => {
                        this.checked = !isActive;
                        Swal.fire({
                            icon: 'error',
                            title: 'Gagal Memperbarui Gateway',
                            text: err.message,
                            confirmButtonColor: '#5e72e4'
                        });
                    });
                } catch (error) {
                    console.warn('Error toggling gateway:', error);
                    this.checked = !this.checked;
                }
            });
        });
    } catch (error) {
        console.warn('Error setting up gateway toggles:', error);
    }

    // Gateway config form with error handling
    try {
        document.querySelectorAll('.gateway-config-form').forEach(form => {
            form.addEventListener('submit', function (e) {
                try {
                    e.preventDefault();
                    
                    // Prevent execution during page unload
                    if (isPageUnloading) {
                        return;
                    }
                    
                    const gatewayId = this.getAttribute('data-gateway-id');
                    
                    // Validate gatewayId
                    if (!gatewayId || gatewayId === '' || gatewayId === 'null' || gatewayId === 'undefined') {
                        console.warn('Form submit with invalid gateway ID:', gatewayId);
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'ID Gateway tidak valid',
                            confirmButtonColor: '#5e72e4'
                        });
                        return;
                    }
                    
                    const toggle = document.getElementById('gateway_' + gatewayId);
                    const isActiveInput = document.getElementById('is_active_' + gatewayId);
                    if (toggle && isActiveInput) {
                        isActiveInput.value = toggle.checked ? 1 : 0;
                    }

                    const submitBtn = this.querySelector('button[type="submit"]');
                    if (!submitBtn) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'Submit button tidak ditemukan',
                            confirmButtonColor: '#5e72e4'
                        });
                        return;
                    }

                    const originalText = submitBtn.innerHTML;
                    submitBtn.disabled = true;
                    submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm mr-1"></span>Simpan...';

                    const csrfToken = document.querySelector('meta[name="csrf-token"]');
                    if (!csrfToken) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'CSRF token tidak ditemukan',
                            confirmButtonColor: '#5e72e4'
                        });
                        submitBtn.disabled = false;
                        submitBtn.innerHTML = originalText;
                        return;
                    }

                    fetch(updateGatewayRoute, {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': csrfToken.content,
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest'
                        },
                        body: new FormData(this)
                    })
                    .then(async response => {
                        const contentType = response.headers.get('content-type');
                        if (contentType && contentType.includes('application/json')) {
                            return response.json();
                        }
                        // If not JSON, try to parse as text
                        const text = await response.text();
                        console.error('Non-JSON response:', text);
                        throw new Error('Server mengembalikan respons tidak valid (bukan JSON). Cek console untuk detail.');
                    })
                    .then(data => {
                        if (!data.success) {
                            throw new Error(data.message || 'Gagal menyimpan konfigurasi');
                        }
                        Swal.fire({
                            icon: 'success',
                            title: 'Berhasil!',
                            text: data.message || 'Konfigurasi gateway berhasil disimpan',
                            confirmButtonColor: '#5e72e4',
                            timer: 2000,
                            timerProgressBar: true
                        });
                    })
                    .catch(err => {
                        console.error('Gateway config save error:', err);
                        Swal.fire({
                            icon: 'error',
                            title: 'Gagal Menyimpan',
                            text: err.message || 'Terjadi kesalahan saat menyimpan konfigurasi',
                            confirmButtonColor: '#5e72e4'
                        });
                    })
                    .finally(() => {
                        submitBtn.disabled = false;
                        submitBtn.innerHTML = originalText;
                    });
                } catch (error) {
                    console.warn('Error submitting gateway config form:', error);
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Terjadi kesalahan saat menyimpan konfigurasi',
                        confirmButtonColor: '#5e72e4'
                    });
                    const submitBtn = this.querySelector('button[type="submit"]');
                    if (submitBtn) {
                        submitBtn.disabled = false;
                    }
                }
            });
        });
    } catch (error) {
        console.warn('Error setting up gateway config forms:', error);
    }

    // Handle add gateway form submissions with AJAX
    try {
        const addGatewayForms = document.querySelectorAll('#add-gateway-form, #add-gateway-form-existing');
        addGatewayForms.forEach(form => {
            form.addEventListener('submit', function(e) {
                e.preventDefault();
                
                const submitBtn = this.querySelector('button[type="submit"]');
                if (!submitBtn) return;
                
                const originalText = submitBtn.innerHTML;
                submitBtn.disabled = true;
                submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm mr-1"></span>Menyimpan...';
                
                const formData = new FormData(this);
                const csrfToken = document.querySelector('meta[name="csrf-token"]');
                
                if (!csrfToken) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'CSRF token tidak ditemukan',
                        confirmButtonColor: '#5e72e4'
                    });
                    submitBtn.disabled = false;
                    submitBtn.innerHTML = originalText;
                    return;
                }
                
                fetch(this.action, {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': csrfToken.content,
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    body: formData
                })
                .then(async response => {
                    const contentType = response.headers.get('content-type');
                    
                    // Check if response is JSON
                    if (contentType && contentType.includes('application/json')) {
                        return response.json();
                    }
                    
                    // If redirect response, reload page
                    if (response.redirected || response.status === 302 || response.status === 200) {
                        // Check if response contains HTML (redirect response)
                        const text = await response.text();
                        if (text.trim().startsWith('<!DOCTYPE') || text.trim().startsWith('<html')) {
                            // It's a redirect HTML response, reload the page
                            window.location.reload();
                            return;
                        }
                        return { success: true, message: 'Gateway berhasil ditambahkan' };
                    }
                    
                    throw new Error('Unexpected response format');
                })
                .then(data => {
                    if (data && data.success) {
                        // Show success message and reload page
                        Swal.fire({
                            icon: 'success',
                            title: 'Berhasil!',
                            text: data.message || 'Gateway berhasil ditambahkan',
                            confirmButtonColor: '#5e72e4',
                            timer: 2000,
                            timerProgressBar: true,
                            showConfirmButton: false
                        }).then(() => {
                            window.location.reload();
                        });
                    } else if (data && !data.success) {
                        throw new Error(data.message || 'Gagal menambahkan gateway');
                    }
                })
                .catch(err => {
                    console.error('Error adding gateway:', err);
                    Swal.fire({
                        icon: 'error',
                        title: 'Gagal Menambahkan Gateway',
                        text: err.message || 'Terjadi kesalahan saat menambahkan gateway',
                        confirmButtonColor: '#5e72e4'
                    });
                    submitBtn.disabled = false;
                    submitBtn.innerHTML = originalText;
                });
            });
        });
    } catch (error) {
        console.warn('Error setting up add gateway forms:', error);
    }
    } // End init function
})(); // End IIFE

// Global function to copy text to clipboard (needed for SweetAlert HTML buttons)
function copyToClipboard(text, label) {
    // Try modern clipboard API first
    if (navigator.clipboard && window.isSecureContext) {
        navigator.clipboard.writeText(text).then(function() {
            Swal.fire({
                icon: 'success',
                title: 'Copied!',
                text: label + ' address berhasil di-copy ke clipboard',
                timer: 1500,
                showConfirmButton: false,
                toast: true,
                position: 'top-end'
            });
        }).catch(function(err) {
            fallbackCopy(text, label);
        });
    } else {
        fallbackCopy(text, label);
    }
}

// Fallback copy method for older browsers
function fallbackCopy(text, label) {
    const textArea = document.createElement('textarea');
    textArea.value = text;
    textArea.style.position = 'fixed';
    textArea.style.left = '-999999px';
    document.body.appendChild(textArea);
    textArea.focus();
    textArea.select();
    
    try {
        const successful = document.execCommand('copy');
        if (successful) {
            Swal.fire({
                icon: 'success',
                title: 'Copied!',
                text: label + ' address berhasil di-copy ke clipboard',
                timer: 1500,
                showConfirmButton: false,
                toast: true,
                position: 'top-end'
            });
        } else {
            throw new Error('Copy command failed');
        }
    } catch (err) {
        Swal.fire({
            icon: 'error',
            title: 'Copy Failed',
            text: 'Gagal copy ke clipboard. Silakan copy manual.',
            timer: 2000,
            showConfirmButton: false,
            toast: true,
            position: 'top-end'
        });
    }
    
    document.body.removeChild(textArea);
}
</script>
@endsection