<div class="mb-3 row">
    <label for="settings[paypal][enabled]" class="col-sm-2 control-label">Enable PayPal</label>
    <div class="col-sm-3">
        <select class="form-control" id="settings[paypal][enabled]" name="settings[paypal][enabled]">
            <option value="yes" @if ( old('settings.paypal.enabled', setting('paypal.enabled')) == 'yes' ) SELECTED @endif>Yes</option>
            <option value="no" @if ( old('settings.paypal.enabled', setting('paypal.enabled')) == 'no' ) SELECTED @endif>No</option>
        </select>
    </div>
</div>

<div class="mb-3 row">
    <label for="settings[paypal][sandbox_mode]" class="col-sm-2 control-label">Enable Sandbox mode</label>
    <div class="col-sm-3">
        <select class="form-control" id="settings[paypal][sandbox_mode]" name="settings[paypal][sandbox_mode]">
            <option value="yes" @if ( old('settings.paypal.sandbox_mode', setting('paypal.sandbox_mode')) == 'yes' ) SELECTED @endif>Yes</option>
            <option value="no" @if ( old('settings.paypal.sandbox_mode', setting('paypal.sandbox_mode')) == 'no' ) SELECTED @endif>No</option>
        </select>
        <p class="lh-1 mt-2" style="font-size: 12px;">Please use <strong>Sandbox Account Settings</strong> below if Sandbox mode is enabled.</p>
    </div>
</div>

<h3 class="sub-settings">PayPal Account Settings</h3>

<div class="mb-3 row">
    <label for="settings[paypal][username]" class="col-sm-2 control-label">PayPal API Username</label>
    <div class="col-sm-4">
        <input type="text" class="form-control" id="settings[paypal][username]" name="settings[paypal][username]" value="{{ old('settings.paypal.username', setting('paypal.username')) }}">
    </div>
</div>

<div class="mb-3 row">
    <label for="settings[paypal][password]" class="col-sm-2 control-label">PayPal API Password</label>
    <div class="col-sm-4">
        <input type="password" class="form-control" id="settings[paypal][password]" name="settings[paypal][password]" value="{{ old('settings.paypal.password', setting('paypal.password')) }}">
    </div>
</div>

<div class="mb-3 row">
    <label for="settings[paypal][signature]" class="col-sm-2 control-label">PayPal API Signature</label>
    <div class="col-sm-4">
        <input type="password" class="form-control" id="settings[paypal][signature]" name="settings[paypal][signature]" value="{{ old('settings.paypal.signature', setting('paypal.signature')) }}">
    </div>
</div>
<hr>

<h3 class="sub-settings">PayPal IPN Settings</h3>

<div class="mb-3 row">
    <label class="col-sm-2 control-label">IPN (Instant Payment Notification)</label>
    <div class="col-sm-10">
        <p style="font-size: 13px;">
            PayPal's <strong>Instant Payment Notification (IPN)</strong> is a message service that sends real-time payment notifications to your system.
            It is essential for confirming transactions, automating order processing, and improving the reliability of payment handling.
        </p>

        <p style="font-size: 13px;">
            You need to set the following IPN URL in your PayPal account:
        </p>

        <div class="input-group" style="max-width: 600px;">
            <input type="text" class="form-control" id="ipn-url" readonly value="{{ route('gateway.ipn', ['PayPal']) }}">
            <button type="button" class="btn btn-danger" id="copy-ipn-url">Copy</button>
        </div>
        <p class="mt-2 text-success" id="copy-success" style="display: none; font-size: 12px;">
            ✅ IPN URL copied to clipboard!
        </p>

        <p class="mt-3" style="font-size: 12px;">
            <strong>How to configure in PayPal:</strong><br>
            1. Log in to your PayPal Business account.<br>
            2. Go to <em>Account Settings → Notifications</em>.<br>
            3. Click <strong>Update</strong> next to <em>Instant Payment Notification</em>.<br>
            4. Select <strong>Choose IPN Settings</strong>.<br>
            5. Paste the above URL in the Notification URL field.<br>
            6. Enable IPN and click Save.
        </p>
    </div>
</div>

@push('scripts')
    <!-- Copy to clipboard script -->
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const copyBtn = document.getElementById('copy-ipn-url');
            const ipnInput = document.getElementById('ipn-url');
            const successMsg = document.getElementById('copy-success');

            copyBtn.addEventListener('click', function () {
                ipnInput.select();
                ipnInput.setSelectionRange(0, 99999); // for mobile

                try {
                    document.execCommand('copy');
                    successMsg.style.display = 'block';
                    setTimeout(() => {
                        successMsg.style.display = 'none';
                    }, 2000);
                } catch (err) {
                    alert('Failed to copy IPN URL');
                }
            });
        });
    </script>
@endpush
