@extends('layouts.admin')

@section('title', isset($paymentMethod) ? 'Edit Payment Method' : 'Add Payment Method')
@section('page_title', isset($paymentMethod) ? 'Edit Payment Method' : 'Add New Payment Method')

@section('content')
<div class="row">
    <div class="col-md-8">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-light border-bottom">
                <h5 class="mb-0">{{ isset($paymentMethod) ? 'Edit Payment Method' : 'Payment Method Details' }}</h5>
            </div>
            <div class="card-body">
                <form action="{{ isset($paymentMethod) ? route('admin.payment-methods.update', $paymentMethod) : route('admin.payment-methods.store') }}" method="POST">
                    @csrf
                    @if(isset($paymentMethod)) @method('PUT') @endif

                    <!-- Payment Method Name -->
                    <div class="mb-3">
                        <label for="name" class="form-label">Payment Method Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control @error('name') is-invalid @enderror" id="name" name="name" value="{{ old('name', isset($paymentMethod) ? $paymentMethod->name : '') }}" required placeholder="e.g., Credit Card, PayPal">
                        @error('name')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Payment Type -->
                    <div class="mb-3">
                        <label for="type" class="form-label">Payment Type <span class="text-danger">*</span></label>
                        <select class="form-select @error('type') is-invalid @enderror" id="type" name="type" required>
                            <option value="">-- Select Type --</option>
                            <option value="paystack" {{ old('type', isset($paymentMethod) ? $paymentMethod->type : '') == 'paystack' ? 'selected' : '' }}>
                                Paystack
                            </option>
                            <option value="flutterwave" {{ old('type', isset($paymentMethod) ? $paymentMethod->type : '') == 'flutterwave' ? 'selected' : '' }}>
                                Flutterwave
                            </option>
                            <option value="credit_card" {{ old('type', isset($paymentMethod) ? $paymentMethod->type : '') == 'credit_card' ? 'selected' : '' }}>
                                Credit Card
                            </option>
                            <option value="debit_card" {{ old('type', isset($paymentMethod) ? $paymentMethod->type : '') == 'debit_card' ? 'selected' : '' }}>
                                Debit Card
                            </option>
                            <option value="paypal" {{ old('type', isset($paymentMethod) ? $paymentMethod->type : '') == 'paypal' ? 'selected' : '' }}>
                                PayPal
                            </option>
                            <option value="cash_on_delivery" {{ old('type', isset($paymentMethod) ? $paymentMethod->type : '') == 'cash_on_delivery' ? 'selected' : '' }}>
                                Cash On Delivery
                            </option>
                            <option value="mobile_money" {{ old('type', isset($paymentMethod) ? $paymentMethod->type : '') == 'mobile_money' ? 'selected' : '' }}>
                                Mobile Money
                            </option>
                            <option value="bank_transfer" {{ old('type', isset($paymentMethod) ? $paymentMethod->type : '') == 'bank_transfer' ? 'selected' : '' }}>
                                Bank Transfer
                            </option>
                            <option value="wallet" {{ old('type', isset($paymentMethod) ? $paymentMethod->type : '') == 'wallet' ? 'selected' : '' }}>
                                Digital Wallet
                            </option>
                            <option value="cryptocurrency" {{ old('type', isset($paymentMethod) ? $paymentMethod->type : '') == 'cryptocurrency' ? 'selected' : '' }}>
                                Cryptocurrency
                            </option>
                            <option value="other" {{ old('type', isset($paymentMethod) ? $paymentMethod->type : '') == 'other' ? 'selected' : '' }}>
                                Other
                            </option>
                        </select>
                        @error('type')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Description -->
                    <div class="mb-3">
                        <label for="description" class="form-label">Description</label>
                        <textarea class="form-control @error('description') is-invalid @enderror" id="description" name="description" rows="4" placeholder="Enter payment method description or instructions">{{ old('description', isset($paymentMethod) ? $paymentMethod->description : '') }}</textarea>
                        @error('description')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Gateway Settings -->
                    @php
                        $methodSettings = old('settings', isset($paymentMethod) ? ($paymentMethod->settings ?? []) : []);
                    @endphp
                    <div id="gatewaySettings" class="mb-3 d-none">
                        <div class="alert alert-info py-2 px-3 mb-3" role="alert">
                            <strong id="gatewayTitle">Gateway Settings</strong>
                            <div class="small mt-1" id="gatewayHelpText">Enter API keys for the selected payment gateway.</div>
                        </div>
                        <div class="mb-3">
                            <label for="settings_public_key" class="form-label" id="publicKeyLabel">Public Key</label>
                            <input type="text" class="form-control @error('settings.public_key') is-invalid @enderror" id="settings_public_key" name="settings[public_key]" value="{{ $methodSettings['public_key'] ?? '' }}" placeholder="pk_test_..." autocomplete="off">
                            @error('settings.public_key')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="mb-3">
                            <label for="settings_secret_key" class="form-label" id="secretKeyLabel">Secret Key</label>
                            <input type="text" class="form-control @error('settings.secret_key') is-invalid @enderror" id="settings_secret_key" name="settings[secret_key]" value="{{ $methodSettings['secret_key'] ?? '' }}" placeholder="sk_test_..." autocomplete="off">
                            @error('settings.secret_key')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        <div id="currencyField" class="mb-3">
                            <label for="settings_currency" class="form-label">Currency</label>
                            <input type="text" class="form-control @error('settings.currency') is-invalid @enderror" id="settings_currency" name="settings[currency]" value="{{ $methodSettings['currency'] ?? 'NGN' }}" placeholder="NGN" maxlength="3">
                            <small class="form-text text-muted">Used for Flutterwave (defaults to NGN)</small>
                            @error('settings.currency')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-2">
                            <label class="form-label mb-1">Callback URL</label>
                            <input type="text" class="form-control form-control-sm" id="callbackUrl" value="" readonly>
                            <small class="form-text text-muted">Set this URL in your gateway dashboard.</small>
                        </div>
                    </div>

                    <!-- Bank Transfer Settings -->
                    <div id="bankTransferSettings" class="mb-3 d-none">
                        <div class="alert alert-warning py-2 px-3 mb-3" role="alert">
                            <strong>Bank Transfer Details</strong>
                            <div class="small mt-1">Customers will use this information to complete manual transfer after checkout.</div>
                        </div>

                        <div class="mb-3">
                            <label for="settings_bank_name" class="form-label">Bank Name</label>
                            <input type="text" class="form-control @error('settings.bank_name') is-invalid @enderror" id="settings_bank_name" name="settings[bank_name]" value="{{ $methodSettings['bank_name'] ?? '' }}" placeholder="e.g. Access Bank">
                            @error('settings.bank_name')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="settings_account_name" class="form-label">Account Name</label>
                            <input type="text" class="form-control @error('settings.account_name') is-invalid @enderror" id="settings_account_name" name="settings[account_name]" value="{{ $methodSettings['account_name'] ?? '' }}" placeholder="e.g. Store Payments Ltd">
                            @error('settings.account_name')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="settings_account_number" class="form-label">Account Number</label>
                            <input type="text" class="form-control @error('settings.account_number') is-invalid @enderror" id="settings_account_number" name="settings[account_number]" value="{{ $methodSettings['account_number'] ?? '' }}" placeholder="e.g. 0123456789">
                            @error('settings.account_number')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-0">
                            <label for="settings_instructions" class="form-label">Transfer Instructions</label>
                            <textarea class="form-control @error('settings.instructions') is-invalid @enderror" id="settings_instructions" name="settings[instructions]" rows="3" placeholder="Tell customers what reference to include and how to confirm payment.">{{ $methodSettings['instructions'] ?? '' }}</textarea>
                            @error('settings.instructions')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <!-- Is Active -->
                    <div class="mb-3">
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input" id="is_active" name="is_active" value="1" {{ old('is_active', isset($paymentMethod) ? $paymentMethod->is_active : 1) == 1 ? 'checked' : '' }}>
                            <label class="form-check-label" for="is_active">
                                Active Payment Method
                            </label>
                        </div>
                    </div>

                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-check-circle"></i> {{ isset($paymentMethod) ? 'Update Payment Method' : 'Add Payment Method' }}
                        </button>
                        <a href="{{ route('admin.payment-methods.index') }}" class="btn btn-outline-secondary">
                            <i class="bi bi-x-circle"></i> Cancel
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-light border-bottom">
                <h6 class="mb-0">Payment Type Reference</h6>
            </div>
            <div class="card-body">
                <small class="text-muted">
                    <strong>Paystack:</strong> Online card/bank payment gateway<br>
                    <strong>Flutterwave:</strong> Online multi-channel payment gateway<br>
                    <strong>Credit Card:</strong> Visa, Mastercard, American Express<br>
                    <strong>Debit Card:</strong> Direct debit from bank account<br>
                    <strong>PayPal:</strong> PayPal integration<br>
                    <strong>Bank Transfer:</strong> Direct wire transfer<br>
                    <strong>Digital Wallet:</strong> Apple Pay, Google Pay, etc.<br>
                    <strong>Cryptocurrency:</strong> Bitcoin, Ethereum, etc.
                </small>
            </div>
        </div>

        <div class="card border-0 shadow-sm">
            <div class="card-header bg-light border-bottom">
                <h6 class="mb-0">Quick Info</h6>
            </div>
            <div class="card-body">
                @if(isset($paymentMethod))
                    <div class="mb-3">
                        <small class="text-muted">Payment Method ID</small>
                        <p class="h6 mb-0">#{{ $paymentMethod->id }}</p>
                    </div>
                    <div class="mb-3">
                        <small class="text-muted">Type</small>
                        <p class="h6 mb-0">{{ ucwords(str_replace('_', ' ', $paymentMethod->type)) }}</p>
                    </div>
                    <div class="mb-3">
                        <small class="text-muted">Created</small>
                        <p class="h6 mb-0">{{ $paymentMethod->created_at->format('M d, Y') }}</p>
                    </div>
                    <div>
                        <small class="text-muted">Last Updated</small>
                        <p class="h6 mb-0">{{ $paymentMethod->updated_at->format('M d, Y H:i') }}</p>
                    </div>

                    @if(in_array($paymentMethod->type, ['paystack', 'flutterwave', 'paypal']))
                        <hr>
                        <div>
                            <small class="text-muted">Gateway Keys</small>
                            <p class="h6 mb-0">
                                {{ !empty($paymentMethod->settings['public_key']) && !empty($paymentMethod->settings['secret_key']) ? 'Configured' : 'Missing' }}
                            </p>
                        </div>
                    @endif

                    @if($paymentMethod->type === 'bank_transfer')
                        <hr>
                        <div>
                            <small class="text-muted">Bank Details</small>
                            <p class="h6 mb-0">
                                {{ !empty($paymentMethod->settings['bank_name']) && !empty($paymentMethod->settings['account_number']) ? 'Configured' : 'Missing' }}
                            </p>
                        </div>
                    @endif
                @else
                    <p class="text-muted">Fill in the form to add a new payment method</p>
                @endif
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const typeField = document.getElementById('type');
    const gatewaySettings = document.getElementById('gatewaySettings');
    const gatewayTitle = document.getElementById('gatewayTitle');
    const gatewayHelpText = document.getElementById('gatewayHelpText');
    const publicKeyLabel = document.getElementById('publicKeyLabel');
    const secretKeyLabel = document.getElementById('secretKeyLabel');
    const publicKeyInput = document.getElementById('settings_public_key');
    const secretKeyInput = document.getElementById('settings_secret_key');
    const currencyField = document.getElementById('currencyField');
    const callbackUrl = document.getElementById('callbackUrl');
    const bankTransferSettings = document.getElementById('bankTransferSettings');

    const paystackCallback = '{{ route("user.checkout.paystack.callback") }}';
    const flutterwaveCallback = '{{ route("user.checkout.flutterwave.callback") }}';
    const paypalCallback = '{{ route("user.checkout.paypal.callback") }}';

    function toggleGatewaySettings() {
        const selected = typeField.value;
        const isPaystack = selected === 'paystack';
        const isFlutterwave = selected === 'flutterwave';
        const isPaypal = selected === 'paypal';
        const isBankTransfer = selected === 'bank_transfer';
        const isGateway = isPaystack || isFlutterwave || isPaypal;

        gatewaySettings.classList.toggle('d-none', !isGateway);
        bankTransferSettings.classList.toggle('d-none', !isBankTransfer);

        if (!isGateway) {
            return;
        }

        if (isPaystack) {
            gatewayTitle.textContent = 'Paystack Settings';
            gatewayHelpText.textContent = 'Use your Paystack test/live keys to enable checkout redirection and verification.';
            publicKeyLabel.textContent = 'Paystack Public Key';
            secretKeyLabel.textContent = 'Paystack Secret Key';
            publicKeyInput.placeholder = 'pk_test_xxxxx or pk_live_xxxxx';
            secretKeyInput.placeholder = 'sk_test_xxxxx or sk_live_xxxxx';
            currencyField.classList.add('d-none');
            callbackUrl.value = paystackCallback;
        }

        if (isFlutterwave) {
            gatewayTitle.textContent = 'Flutterwave Settings';
            gatewayHelpText.textContent = 'Use your Flutterwave keys and currency for redirect and payment verification.';
            publicKeyLabel.textContent = 'Flutterwave Public Key';
            secretKeyLabel.textContent = 'Flutterwave Secret Key';
            publicKeyInput.placeholder = 'FLWPUBK_TEST-xxxx-X';
            secretKeyInput.placeholder = 'FLWSECK_TEST-xxxx-X';
            currencyField.classList.remove('d-none');
            callbackUrl.value = flutterwaveCallback;
        }

        if (isPaypal) {
            gatewayTitle.textContent = 'PayPal Settings';
            gatewayHelpText.textContent = 'Use your PayPal API credentials for checkout redirect and capture.';
            publicKeyLabel.textContent = 'PayPal Client ID';
            secretKeyLabel.textContent = 'PayPal Secret Key';
            publicKeyInput.placeholder = 'PayPal Client ID';
            secretKeyInput.placeholder = 'PayPal Secret';
            currencyField.classList.remove('d-none');
            callbackUrl.value = paypalCallback;
        }
    }

    typeField.addEventListener('change', toggleGatewaySettings);
    toggleGatewaySettings();
});
</script>
@endsection