<?php @$data['modal_title'] = '';
echo view('layouts/common/modal/modal_top', @$data);

if (!empty($payments)) : ?>
  <style>
    .payment-card {
      background: #ffffff;
      border-radius: 24px;
      border: 1px solid #f1f5f9;
      box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
      transition: transform 0.3s ease;
    }
    
    .brand-logo-wrapper {
      background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
      border-radius: 16px;
      width: 120px;
      height: 60px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 10px;
      border: 1px solid #e2e8f0;
    }

    .custom-input-group {
      position: relative;
    }

    .custom-input-group .currency-symbol {
      position: absolute;
      left: 16px;
      top: 50%;
      transform: translateY(-50%);
      color: #94a3b8;
      font-weight: 600;
      font-size: 18px;
      pointer-events: none;
    }

    .modern-input {
      border: 2px solid #e2e8f0;
      border-radius: 16px;
      font-size: 16px;
      font-weight: 600;
      color: #1e293b;
      padding: 16px 16px 16px 40px; /* Left padding space for currency symbol */
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      background-color: #f8fafc;
    }

    .modern-input:focus {
      background-color: #fff;
      border-color: #6366f1;
      box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12);
      outline: 0;
    }

    .modern-input::placeholder {
      color: #94a3b8;
      font-weight: 400;
    }

    .notice-box {
      background-color: #fdf2f2;
      border-left: 4px solid #ef4444;
      border-radius: 8px;
    }

    .terms-gradient-card {
      background: #f8fafc;
      border-radius: 16px;
      border: 1px solid #e2e8f0;
      transition: all 0.2s ease;
    }

    .terms-gradient-card:hover {
      border-color: #cbd5e1;
      background: #f1f5f9;
    }

    .custom-checkbox {
      cursor: pointer;
      width: 20px;
      height: 20px;
      border: 2px solid #cbd5e1;
      border-radius: 6px;
      flex-shrink: 0;
      transition: all 0.2s ease;
    }

    .custom-checkbox:checked {
      background-color: #6366f1;
      border-color: #6366f1;
    }

    .btn-gradient-submit {
      background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
      color: white;
      border: none;
      border-radius: 16px;
      font-size: 16px;
      letter-spacing: 0.5px;
      transition: all 0.25s ease;
      box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
    }

    .btn-gradient-submit:hover {
      background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
      color: white;
      transform: translateY(-1px);
      box-shadow: 0 6px 20px rgba(79, 70, 229, 0.4);
    }

    .btn-gradient-submit:active {
      transform: translateY(1px);
    }
  </style>

  <section class="add-funds-wrapper py-4 px-3 mx-auto" style="max-width: 480px;">
    <div class="container-fluid p-0">
      <div class="row justify-content-center" id="result_ajaxSearch">
        <div class="col-12">
          
          <div class="payment-card p-4 p-sm-5 text-center">
            <form class="form actionAddFundsForm" action="#" method="POST">
              
              <?php
              @$option           = get_value(@$payments->params, 'option');
              @$min_amount       = get_value(@$payments->params, 'min');
              @$max_amount       = get_value(@$payments->params, 'max');
              @$type             = get_value(@$payments->params, 'type');
              @$tnx_fee          = get_value(@$option, 'tnx_fee');
              ?>

              <div class="brand-profile mb-4">
                <div class="brand-logo-wrapper mb-3">
                  <img src="<?= base_url(get_value(@$option, 'logo')) ?>" alt="<?= @$payments->name ?>" style="max-width: 100%; max-height: 100%; object-fit: contain;">
                </div>
                <h4 class="fw-extrabold text-dark mb-1" style="font-size: 1.4rem; letter-spacing: -0.5px;">
                  <?= @$payments->name ?> Gateway
                </h4>
                <p class="text-muted small mb-0">
                  Securely top up your account balance
                </p>
              </div>

              <div class="amount-wrapper mb-4 text-start">
                <div class="d-flex justify-content-between align-items-center mb-2">
                  <label class="form-label small fw-bold text-dark mb-0">
                    <?= lang("Enter Amount") ?>
                  </label>
                  <span class="text-muted" style="font-size: 11px; font-weight: 500;">
                    (<?= !empty($min_amount) ? 'Min: ' . $min_amount : '0.00'; ?><?= !empty($max_amount) ? ' / Max: ' . $max_amount : '' ?>)
                  </span>
                </div>
                
                <div class="custom-input-group">
                  <span class="currency-symbol"></span>
                  <input class="form-control modern-input text-start" type="number" step="any" name="amount" placeholder="<?= @$min_amount ? $min_amount : '0.00'; ?>" required>
                </div>
                
                <?php if(!empty($tnx_fee) && $tnx_fee > 0): ?>
                  <div class="notice-box p-2.5 mt-2.5 small text-danger d-flex align-items-center gap-2 fw-medium" style="font-size: 12px; padding: 10px;">
                    <i class="bi bi-exclamation-triangle-fill"></i>
                    <span>* <?= lang("Transaction Fee") ?>: <strong><?= $tnx_fee ?></strong></span>
                  </div>
                <?php endif; ?>
              </div>

              <div class="terms-gradient-card p-3 mb-4 text-start">
                <div class="form-check d-flex align-items-start m-0 p-0">
                  <input type="checkbox" class="form-check-input custom-checkbox me-3 mt-0.5" id="agree_terms" name="agree" value="1" required>
                  <label class="form-check-label text-secondary" for="agree_terms" style="font-size: 12px; line-height: 1.6; cursor: pointer; color: #475569 !important; font-weight: 500;">
                    I understand and agree that once these funds are successfully credited to my wallet, I will not initiate any unauthorized disputes, claims, or fraudulent chargebacks.
                  </label>
                </div>
              </div>

              <div class="action-button-wrapper">
                <input type="hidden" name="payment_id" value="<?= @$payments->id; ?>">
                <input type="hidden" name="payment_method" value="<?= @$payments->type; ?>">
                
                <button type="submit" class="btn btn-gradient-submit w-100 py-3 fw-bold shadow-sm">
                  <span class="me-1"><?= lang("Pay Now") ?></span> →
                </button>
              </div>

            </form>
          </div>

        </div>
      </div>
    </div>
  </section>
<?php endif; ?>
<?php echo view('layouts/common/modal/modal_bottom'); ?>
