<?= $this->extend('admin/layout/default') ?>
<?= $this->section('content') ?>
<section class="content-header">
  <div class="container-fluid">
    <div class="row mb-2">
      <div class="col-sm-6">
        <h1>Payment Settings</h1>
      </div>
      <div class="col-sm-6">
        <ol class="breadcrumb float-sm-right">
          <li class="breadcrumb-item"><a href="<?= url('/') ?>">Home</a></li>
          <li class="breadcrumb-item active">Payment Settings</li>
        </ol>
      </div>
    </div>
  </div>
</section>
<section class="content">
  <div class="row">
    <div class="col-sm-3">
      <?= $this->include('admin/settings/sidebar'); ?>
    </div>
    <div class="col-sm-9">
      <div class="card">
        <div class="card-header with-border">
          <h3 class="card-title">Payment Settings</h3>
        </div>
        <?= form_open('settings/paymentUpdate', ['method' => 'post']) ?>
        <div class="card-body">
          <div class="form-group">
            <?php $gateway = (string) setting('payment_gateway', 'razorpay'); ?>
            <?php $gatewayEnabled = $gateway !== '0'; ?>
            <label>Payment Option</label>
            <select name="payment_gateway_mode" id="payment_gateway_mode" class="form-control">
              <option value="0" <?= $gatewayEnabled ? '' : 'selected' ?>>No payment Gateway</option>
              <option value="1" <?= $gatewayEnabled ? 'selected' : '' ?>>Payment Gateway</option>
            </select>
          </div>
          <div id="payment_gateway_settings">
            <div class="form-group">
            <label>Select Payment Gateway</label>
            <select name="payment_gateway" id="payment_gateway" class="form-control">
              <?php $selectedGateway = $gatewayEnabled ? $gateway : 'razorpay'; ?>
              <option value="razorpay" <?= $selectedGateway === 'razorpay' ? 'selected' : '' ?>>Razorpay</option>
              <option value="phonepe" <?= $selectedGateway === 'phonepe' ? 'selected' : '' ?>>PhonePe</option>
            </select>
          </div>
          <div id="razorpay_fields">
            <div class="form-group">
              <label>Razorpay Key</label>
              <input type="text" name="razorpay_key" class="form-control" value="<?= esc(setting('razorpay_key', '')) ?>" placeholder="Enter Razorpay key">
            </div>
            <div class="form-group">
              <label>Razorpay Key Secret</label>
              <input type="text" name="razorpay_secret" class="form-control" value="<?= esc(setting('razorpay_secret', '')) ?>" placeholder="Enter Razorpay key secret">
            </div>
            <div class="form-group">
              <label>Razorpay Webhook Secret</label>
              <input type="text" name="razorpay_webhook_secret" class="form-control" value="<?= esc(setting('razorpay_webhook_secret', '')) ?>" placeholder="Enter Razorpay webhook secret">
            </div>
          </div>
          <div id="phonepe_fields">
            <div class="form-group">
              <label>PhonePe Client Id</label>
              <input type="text" id="phonepe_client_id" name="phonepe_client_id" class="form-control" value="<?= esc(setting('phonepe_client_id', '')) ?>" placeholder="Enter PhonePe client id">
            </div>
            <div class="form-group">
              <label>PhonePe Client Version</label>
              <input type="number" id="phonepe_client_version" name="phonepe_client_version" class="form-control" value="<?= esc(setting('phonepe_client_version', '1')) ?>" placeholder="Enter PhonePe client version">
            </div>
            <div class="form-group">
              <label>PhonePe Client Secret</label>
              <input type="text" id="phonepe_client_secret" name="phonepe_client_secret" class="form-control" value="<?= esc(setting('phonepe_client_secret', '')) ?>" placeholder="Enter PhonePe client secret">
            </div>
            <div class="form-group">
              <label>PhonePe Webhook URL</label>
              <input type="text" id="phonepe_webhook_url" name="phonepe_webhook_url" class="form-control" value="<?= esc(setting('phonepe_webhook_url', '')) ?>" placeholder="Enter PhonePe webhook url">
            </div>
            <div class="form-group">
              <label>PhonePe Username</label>
              <input type="text" id="phonepe_webhook_username" name="phonepe_webhook_username" class="form-control" value="<?= esc(setting('phonepe_webhook_username', '')) ?>" placeholder="Enter PhonePe username">
            </div>
            <div class="form-group">
              <label>PhonePe Password</label>
              <input type="text" id="phonepe_webhook_password" name="phonepe_webhook_password" class="form-control" value="<?= esc(setting('phonepe_webhook_password', '')) ?>" placeholder="Enter PhonePe password">
            </div>
          </div>
          </div>
        </div>
        <div class="card-footer">
          <button type="submit" class="btn btn-primary">Submit</button>
        </div>
        <?= form_close() ?>
      </div>
    </div>
  </div>
</section>
<script>
  (function () {
    var mode = document.getElementById('payment_gateway_mode');
    var settings = document.getElementById('payment_gateway_settings');
    var gateway = document.getElementById('payment_gateway');
    var razorpayFields = document.getElementById('razorpay_fields');
    var phonepeFields = document.getElementById('phonepe_fields');
    function toggleGatewayFields() {
      var selected = gateway.value;
      razorpayFields.style.display = selected === 'razorpay' ? 'block' : 'none';
      phonepeFields.style.display = selected === 'phonepe' ? 'block' : 'none';
    }
    function toggleMode() {
      var enabled = mode.value === '1';
      settings.style.display = enabled ? 'block' : 'none';
      if (enabled) {
        toggleGatewayFields();
      }
    }
    mode.addEventListener('change', toggleMode);
    gateway.addEventListener('change', toggleGatewayFields);
    toggleMode();
  })();
</script>
<?= $this->endSection() ?>
