<section>
    <header>
        <h2 class="text-lg font-medium text-gray-900">
            {{ __('Payment Methods') }}
        </h2>

        <p class="mt-1 text-sm text-gray-600">
            {{ __('Set up your preferred payment methods for selling items. Buyers will see these options when purchasing from you.') }}
        </p>
    </header>

    <form method="post" action="{{ route('profile.payment-methods') }}" class="mt-6 space-y-6">
        @csrf
        @method('patch')

        @php
            $paymentMethods = auth()->user()->payment_methods ?? [];
            $availableMethods = [
                'paypal' => ['name' => 'PayPal', 'placeholder' => 'PayPal email address'],
                'venmo' => ['name' => 'Venmo', 'placeholder' => 'Venmo username'],
                'cashapp' => ['name' => 'Cash App', 'placeholder' => 'Cash App $cashtag'],
                'zelle' => ['name' => 'Zelle', 'placeholder' => 'Zelle email or phone'],
                'crypto_bitcoin' => ['name' => 'Bitcoin', 'placeholder' => 'Bitcoin wallet address'],
                'crypto_ethereum' => ['name' => 'Ethereum', 'placeholder' => 'Ethereum wallet address'],
                'bank_transfer' => ['name' => 'Bank Transfer', 'placeholder' => 'Instructions for bank transfer'],
                'cash' => ['name' => 'Cash (In Person)', 'placeholder' => 'Preferred meeting locations'],
            ];
        @endphp

        <div class="space-y-4">
            @foreach($availableMethods as $methodKey => $methodInfo)
                @php
                    $enabled = $paymentMethods[$methodKey]['enabled'] ?? false;
                    $address = $paymentMethods[$methodKey]['address'] ?? '';
                @endphp
                
                <div class="border border-gray-200 rounded-lg p-4">
                    <div class="flex items-start space-x-3">
                        <div class="flex items-center h-5">
                            <input id="method_{{ $methodKey }}" 
                                   name="payment_methods[{{ $methodKey }}][enabled]" 
                                   type="checkbox" 
                                   value="1"
                                   {{ $enabled ? 'checked' : '' }}
                                   class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
                                   onchange="togglePaymentMethod('{{ $methodKey }}')">
                        </div>
                        <div class="flex-1">
                            <label for="method_{{ $methodKey }}" class="text-sm font-medium text-gray-700">
                                {{ $methodInfo['name'] }}
                            </label>
                            <div class="mt-2">
                                <input type="text" 
                                       name="payment_methods[{{ $methodKey }}][address]" 
                                       id="address_{{ $methodKey }}"
                                       value="{{ $address }}"
                                       placeholder="{{ $methodInfo['placeholder'] }}"
                                       class="block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm {{ $enabled ? '' : 'bg-gray-100' }}"
                                       {{ $enabled ? '' : 'disabled' }}>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
            <div class="flex">
                <svg class="h-5 w-5 text-blue-400 mr-2" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
                </svg>
                <div class="text-sm text-blue-700">
                    <p class="font-semibold mb-1">Important Security Notes:</p>
                    <ul class="list-disc list-inside space-y-1 text-xs">
                        <li>Only provide payment information you're comfortable sharing publicly</li>
                        <li>Never share passwords, PINs, or account login details</li>
                        <li>For crypto, only provide wallet addresses (never private keys)</li>
                        <li>Consider using business/dedicated accounts for marketplace transactions</li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="flex items-center gap-4">
            <x-primary-button>{{ __('Save Payment Methods') }}</x-primary-button>

            @if (session('status') === 'payment-methods-updated')
                <p
                    x-data="{ show: true }"
                    x-show="show"
                    x-transition
                    x-init="setTimeout(() => show = false, 2000)"
                    class="text-sm text-gray-600"
                >{{ __('Saved.') }}</p>
            @endif
        </div>
    </form>

    <script>
        function togglePaymentMethod(methodKey) {
            const checkbox = document.getElementById('method_' + methodKey);
            const addressInput = document.getElementById('address_' + methodKey);
            
            if (checkbox.checked) {
                addressInput.disabled = false;
                addressInput.classList.remove('bg-gray-100');
            } else {
                addressInput.disabled = true;
                addressInput.classList.add('bg-gray-100');
                addressInput.value = '';
            }
        }
    </script>
</section>