<%- include('includes/header', { username: admin[0].name, email: admin[0].email }) %>

<div class="body-wrapper">
  <div class="container-fluid">

    <div class="card bg-info-subtle shadow-none position-relative overflow-hidden mb-4">
      <div class="card-body px-4 py-3">
        <h4 class="fw-semibold mb-1">Payment Gateway</h4>
      </div>
    </div>

    <div class="datatables">
                <div class="card">
                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="zero_config" class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <th>Name</th>
                                        <th>Fixed Charge</th>
                                        <th>Frontend show</th>
                                        <th class="action-col">Action</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

  </div>
</div>

<!-- MODAL -->
<div class="modal fade" id="gatewayModal">
  <div class="modal-dialog modal-md">
    <div class="modal-content">
      <form id="gatewayForm">

        <div class="modal-header">
          <h5 class="modal-title">Payment Gateway</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>

        <div class="modal-body">
          <input type="hidden" id="gatewayId">

          <div class="mb-3">
            <label>Name</label>
            <input type="text" id="name" class="form-control" required>
          </div>

          <!-- 🔥 Dynamic ClientId -->
          <div class="mb-3" id="clientIdWrapper">
            <label id="clientIdLabel">Client ID</label>
            <input type="text" id="clientId" class="form-control">
          </div>

          <!-- 🔥 Secret Key -->
          <div class="mb-3" id="secretKeyWrapper">
            <label id="secretKeyLabel">Secret Key<span class="text-danger">*</span></label>
            <input type="text" id="secretKey" class="form-control" required>
          </div>

          <!-- 🔥 Braintree Only -->
          <div class="mb-3 d-none" id="publicKeyWrapper">
            <label>Public Key</label>
            <input type="text" id="publicKey" class="form-control">
          </div>

          <div class="mb-3 d-none" id="privateKeyWrapper">
            <label>Private Key</label>
            <input type="text" id="privateKey" class="form-control">
          </div>

          <div class="mb-3">
            <label>Webhook<span class="text-danger">*</span></label>
            <input type="text" id="webhookUrl" class="form-control" required>
               <small class="text-muted d-block mt-1">
                      <strong>Note:</strong> Webhook configuration is required for secure payment verification. 
Stripe requires a webhook secret key, while other gateways requires a webhook URL.
                    </small>
          </div>

          <div class="mb-3">
            <label>Fixed Charge<span class="text-danger">*</span></label>
            <input type="number" id="fixedCharge" class="form-control" value="0">
          </div>

          <div class="mb-3">
            <label>Icon Name (Lucide)<span class="text-danger">*</span></label>
            <input type="text" id="iconName" class="form-control" required>
          </div>

          <div class="mb-3">
            <label class="form-label d-block">Gateway Status</label>
            <div class="form-check form-switch">
              <input class="form-check-input" type="checkbox" id="enabled" checked>
              <label class="form-check-label" for="enabled" id="enabledLabel">Enabled</label>
            </div>
          </div>

        </div>

        <div class="modal-footer">
          <button class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
          <button class="btn btn-primary">Save</button>
        </div>

      </form>
    </div>
  </div>
</div>

<%- include('includes/allscripts') %>
<script src="/js/view/paymentgateway.js"></script>