<!-- PayPal Settings Modal -->
<div class="modal fade" id="paypalSettingsModal" tabindex="-1" aria-labelledby="paypalSettingsModalLabel" aria-hidden="true">
    <form class="paypal" action="/settings/api/paypal/create" method="post" enctype="multipart/form-data">
        <div class="modal-dialog modal-xl modal-dialog-scrollable">
            <div class="modal-content">
                <!-- Modal Header -->
                <div class="modal-header bg-info text-white">
                    <h5 class="modal-title" id="paypalSettingsModalLabel">
                        <i class="bi bi-paypal me-2"></i> PayPal API Settings
                    </h5>
                    <button type="button" class="btn btn-sm-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <!-- Modal Body -->
                <div class="modal-body">
                    <div class="container-fluid">
                        <!-- Warning Alert -->
                        <div class="alert alert-warning mb-4">
                            <i class="bi bi-exclamation-triangle-fill me-2"></i>
                            <strong>Important:</strong> Please use below PayPal Developer Settings only if you know what it does...
                        </div>

                        <!-- Information Card -->
                        <div class="card mb-4">
                            <div class="card-body">
                                <h6 class="card-title"><i class="bi bi-info-circle me-2"></i>Configure PayPal API Settings</h6>
                                <p class="card-text mb-0">Configure your PayPal API credentials for payment processing and subscriptions.</p>
                            </div>
                        </div>

                        <!-- Settings Form -->
                        <form id="paypalApiSettingsForm">
                            <div class="row g-3">
                                <!-- Basic Settings -->
                                <div class="col-12">
                                    <h6 class="border-bottom pb-2 mb-3">Basic Settings</h6>
                                </div>

                                <!-- Email - Linked to -->
                                <div class="col-md-6 col-lg-4">
                                    <label for="clientEmail" class="form-label">Linked Email *</label>
                                    <input type="email" class="form-control" id="clientEmail" name="clientEmail" placeholder="Enter linked email address">
                                </div>

                                <!-- Environment -->
                                <div class="col-md-6 col-lg-4">
                                    <label for="apiEnvironment" class="form-label">Environment *</label>
                                    <select class="form-select searchSelect" id="apiEnvironment" name="apiEnvironment" required>
                                        <option value="live">Live</option>
                                        <option value="sandbox">Sandbox</option>
                                    </select>
                                </div>

                                <!-- Status -->
                                <div class="col-md-6 col-lg-4">
                                    <label for="apiStatus" class="form-label">Status *</label>
                                    <select class="form-select searchSelect" id="apiStatus" name="apiStatus" required>
                                        <option value="active">Active</option>
                                        <option value="inactive">Inactive</option>
                                    </select>
                                </div>

                                <!-- Currency -->
                                <div class="col-md-6 col-lg-4">
                                    <label for="apiCurrency" class="form-label">Default Currency *</label>
                                    <select class="form-select searchSelect" id="apiCurrency" name="apiCurrency" required>
                                        <option value="USD">USD - US Dollar</option>
                                        <option value="EUR">EUR - Euro</option>
                                        <option value="GBP">GBP - British Pound</option>
                                        <option value="CAD">CAD - Canadian Dollar</option>
                                        <option value="AUD">AUD - Australian Dollar</option>
                                    </select>
                                </div>

                                <!-- API Credentials -->
                                <div class="col-12 mt-3">
                                    <h6 class="border-bottom pb-2 mb-3">API Credentials</h6>
                                </div>

                                <!-- Client ID -->
                                <div class="col-md-6">
                                    <label for="clientId" class="form-label">Client ID *</label>
                                    <div class="input-group">
                                        <input type="text" class="form-control" id="clientId" name="clientId" placeholder="Enter Client ID" required>
                                        <button class="btn btn-sm btn-outline-secondary toggle-password" type="button" data-target="clientId">
                                            <i class="bi bi-eye"></i>
                                        </button>
                                    </div>
                                </div>

                                <!-- Client Secret -->
                                <div class="col-md-6">
                                    <label for="clientSecret" class="form-label">Client Secret *</label>
                                    <div class="input-group">
                                        <input type="text" class="form-control" id="clientSecret" name="clientSecret" placeholder="Enter Client Secret" required>
                                        <button class="btn btn-sm btn-outline-secondary toggle-password" type="button" data-target="clientSecret">
                                            <i class="bi bi-eye"></i>
                                        </button>
                                    </div>
                                    <div class="form-text">
                                        <small>Obtain from PayPal Developer Dashboard under REST API apps</small>
                                    </div>
                                </div>

                                <!-- Webhook Settings -->
                                <div class="col-12 mt-3">
                                    <h6 class="border-bottom pb-2 mb-3">Webhook Settings</h6>
                                </div>

                                <!-- Webhook ID -->
                                <div class="col-md-6">
                                    <label for="webhookId" class="form-label">Webhook ID</label>
                                    <input type="text" class="form-control" id="webhookId" name="webhookId" placeholder="Enter Webhook ID">
                                </div>

                                <!-- Webhook URL -->
                                <div class="col-md-6">
                                    <label for="webhookUrl" class="form-label">Webhook URL *</label>
                                    <input type="url" class="form-control" id="webhookUrl" name="webhookUrl"
                                        placeholder="https://yourdomain.com/api/paypal/webhook" required>
                                </div>

                                <!-- Payment Settings -->
                                <div class="col-12 mt-3">
                                    <h6 class="border-bottom pb-2 mb-3">Payment Settings</h6>
                                </div>

                                <!-- Transaction Type -->
                                <div class="col-md-6">
                                    <label for="transactionType" class="form-label">Transaction Type *</label>
                                    <select class="form-select searchSelect" id="transactionType" name="transactionType" required>
                                        <option value="authorize">Authorize Only</option>
                                        <option value="capture">Authorize and Capture</option>
                                        <option value="sale">Direct Sale</option>
                                    </select>
                                    <div class="form-text">
                                        <small>How payments should be processed</small>
                                    </div>
                                </div>

                                <!-- Payment Intent -->
                                <div class="col-md-6">
                                    <label for="paymentIntent" class="form-label">Payment Intent *</label>
                                    <select class="form-select searchSelect" id="paymentIntent" name="paymentIntent" required>
                                        <option value="CAPTURE">Capture</option>
                                        <option value="AUTHORIZE">Authorize</option>
                                    </select>
                                </div>

                                <!-- Payment Methods -->
                                <div class="col-md-12">
                                    <label class="form-label">Accepted Payment Methods *</label>
                                    <div class="border rounded p-3">
                                        <div class="row">
                                            <div class="col-md-4">
                                                <div class="form-check mb-2">
                                                    <input class="form-check-input" type="checkbox" id="paymentPaypal" name="paymentMethods[]" value="paypal" checked>
                                                    <label class="form-check-label" for="paymentPaypal">
                                                        <i class="bi bi-wallet2 me-1"></i> PayPal Wallet
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-check mb-2">
                                                    <input class="form-check-input" type="checkbox" id="paymentCards" name="paymentMethods[]" value="credit_cards" checked>
                                                    <label class="form-check-label" for="paymentCards">
                                                        <i class="bi bi-credit-card me-1"></i> Credit/Debit Cards
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-check mb-2">
                                                    <input class="form-check-input" type="checkbox" id="paymentLater" name="paymentMethods[]" value="paylater">
                                                    <label class="form-check-label" for="paymentLater">
                                                        <i class="bi bi-clock me-1"></i> Pay Later
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Redirect URLs -->
                                <div class="col-12 mt-3">
                                    <h6 class="border-bottom pb-2 mb-3">Redirect URLs</h6>
                                </div>

                                <!-- Return URL -->
                                <div class="col-md-6">
                                    <label for="returnUrl" class="form-label">Return URL *</label>
                                    <input type="url" class="form-control" id="returnUrl" name="returnUrl"
                                        placeholder="https://yourdomain.com/payment/success" required>
                                    <div class="form-text">
                                        <small>URL for successful payment redirect</small>
                                    </div>
                                </div>

                                <!-- Cancel URL -->
                                <div class="col-md-6">
                                    <label for="cancelUrl" class="form-label">Cancel URL *</label>
                                    <input type="url" class="form-control" id="cancelUrl" name="cancelUrl"
                                        placeholder="https://yourdomain.com/payment/cancel" required>
                                    <div class="form-text">
                                        <small>URL for cancelled payment redirect</small>
                                    </div>
                                </div>

                                <!-- Advanced Settings -->
                                <div class="col-12 mt-3">
                                    <h6 class="border-bottom pb-2 mb-3">Advanced Settings</h6>
                                </div>

                                <!-- Experience Profile ID -->
                                <div class="col-md-6">
                                    <label for="experienceProfile" class="form-label">Experience Profile ID</label>
                                    <input type="text" class="form-control" id="experienceProfile" name="experienceProfile" placeholder="Enter Experience Profile ID">
                                    <div class="form-text">
                                        <small>Optional custom payment experience</small>
                                    </div>
                                </div>

                                <!-- Webhook Events -->
                                <div class="col-md-6">
                                    <label class="form-label">Webhook Events *</label>
                                    <div class="border rounded p-3">
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="checkbox" id="webhookPayment" name="webhookEvents[]" value="PAYMENT.CAPTURE.COMPLETED" checked>
                                            <label class="form-check-label" for="webhookPayment">
                                                Payment Captured
                                            </label>
                                        </div>
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="checkbox" id="webhookDenied" name="webhookEvents[]" value="PAYMENT.CAPTURE.DENIED" checked>
                                            <label class="form-check-label" for="webhookDenied">
                                                Payment Denied
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="webhookSubscription" name="webhookEvents[]" value="BILLING.SUBSCRIPTION.ACTIVATED">
                                            <label class="form-check-label" for="webhookSubscription">
                                                Subscription Activated
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                <!-- Modal Footer -->
                <div class="modal-footer">
                    <div class="d-flex justify-content-between w-100">
                        <div>
                            <button type="button" class="btn btn-sm btn-outline-secondary" id="resetPaypalForm">
                                <i class="bi bi-arrow-clockwise me-2"></i> Reset
                            </button>
                            <button type="button" class="btn btn-sm btn-outline-danger" id="clearPaypalForm">
                                <i class="bi bi-trash me-2"></i> Clear All
                            </button>
                        </div>
                        <div>
                            <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">
                                <i class="bi bi-x-circle me-2"></i> Cancel
                            </button>
                            <button type="submit" class="btn btn-sm btn-primary text-white create-api-setting-btn">
                                <i class="bi bi-save me-2"></i> Save Settings
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>