{{define "admin/payment_interfaces.html"}}
{{template "admin/layout_head" .}}
<div class="cs-admin-page">
{{template "admin_pagehead" (dict "Icon" "bx-credit-card" "Title" (T "admin.payment.title") "Desc" (T "admin.payment.page_desc"))}}
<div class="cs-admin-section">
  <div class="cs-admin-section__head">
    <div class="cs-admin-section__head-icon"><i class="bx bx-wallet"></i></div>
    <div class="cs-admin-section__head-text">
      <h2 class="cs-admin-section__head-title">{{T "admin.payment.list"}}</h2>
      <p class="cs-admin-section__head-sub">{{T "admin.payment.list_sub"}}</p>
    </div>
    <div class="ms-auto flex-shrink-0">
      <button type="button" class="btn btn-primary btn-sm" id="btnAddIface"><i class="bx bx-plus"></i> {{T "admin.payment.add_btn"}}</button>
    </div>
  </div>
  <div class="cs-admin-section__body cs-admin-section__body--flush">
    <div class="table-responsive">
      <table class="table table-hover mb-0 align-middle">
        <thead class="table-light">
          <tr><th>ID</th><th>{{T "admin.payment.col_name"}}</th><th>{{T "admin.payment.col_type"}}</th><th>{{T "admin.payment.col_merchant"}}</th><th>{{T "admin.payment.col_status"}}</th><th>{{T "admin.payment.col_default"}}</th><th>{{T "admin.payment.col_actions"}}</th></tr>
        </thead>
        <tbody>
        {{range index .Data "Interfaces"}}
        <tr>
          <td><span class="ut-admin-code">{{.id}}</span></td>
          <td>{{.interface_name}}</td>
          <td>{{.interface_type}}</td>
          <td class="small">{{.merchant_id}}</td>
          <td>{{if eq (asInt .status) 1}}<span class="badge text-bg-success">{{T "admin.payment.enabled"}}</span>{{else}}<span class="badge text-bg-secondary">{{T "admin.payment.disabled"}}</span>{{end}}</td>
          <td>{{if eq (asInt .is_default) 1}}{{T "admin.payment.yes"}}{{else}}—{{end}}</td>
          <td>
            <button type="button" class="btn btn-sm btn-outline-primary js-edit" data-id="{{.id}}">{{T "admin.payment.edit"}}</button>
            <button type="button" class="btn btn-sm btn-outline-danger js-del" data-id="{{.id}}">{{T "admin.payment.delete"}}</button>
          </td>
        </tr>
        {{else}}
        <tr><td colspan="7" class="text-center text-muted py-4">{{T "admin.payment.empty_list"}}</td></tr>
        {{end}}
        </tbody>
      </table>
    </div>
  </div>
</div>
</div>
<div class="modal fade" id="ifaceFormModal" tabindex="-1" aria-labelledby="ifaceFormModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
    <div class="modal-content border-0 shadow">
      <div class="modal-header">
        <h2 class="modal-title fs-6 fw-semibold" id="ifaceFormModalLabel">{{T "admin.payment.modal_add"}}</h2>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{T "admin.payment.close"}}"></button>
      </div>
      <div class="modal-body">
        <form id="ifaceForm" class="sc-pay-iface-form">
          <input type="hidden" name="id" value="0">
          <div class="row g-2">
            <div class="col-md-6">
              <label class="form-label">{{T "admin.payment.col_name"}}</label>
              <input class="form-control" name="interface_name" required>
            </div>
            <div class="col-md-6">
              <label class="form-label">{{T "admin.payment.col_type"}}</label>
              <select class="form-select" name="interface_type">
                <option value="alipay_rsa">{{T "admin.payment.type_alipay_rsa"}}</option>
                <option value="paypal">PayPal</option>
              </select>
            </div>
            <div class="col-md-6">
              <label class="form-label">{{T "admin.payment.field_merchant"}}</label>
              <input class="form-control" name="merchant_id">
            </div>
            <div class="col-md-6">
              <label class="form-label">{{T "admin.payment.field_appid"}}</label>
              <input class="form-control" name="app_id">
            </div>
            <div class="col-12">
              <label class="form-label">{{T "admin.payment.field_secret"}}</label>
              <textarea class="form-control" name="merchant_key" rows="3"></textarea>
            </div>
            <div class="col-12">
              <label class="form-label">{{T "admin.payment.field_pubkey"}}</label>
              <textarea class="form-control" name="public_key" rows="3"></textarea>
            </div>
            <div class="col-md-4">
              <label class="form-label">{{T "admin.payment.field_env"}}</label>
              <input class="form-control" name="api_url" placeholder="{{T "admin.payment.env_ph"}}">
            </div>
            <div class="col-md-4">
              <label class="form-label">{{T "admin.payment.col_status"}}</label>
              <select class="form-select" name="status">
                <option value="1" selected>{{T "admin.payment.enabled"}}</option>
                <option value="0">{{T "admin.payment.disabled"}}</option>
              </select>
            </div>
            <div class="col-md-4">
              <label class="form-label">{{T "admin.payment.field_default"}}</label>
              <select class="form-select" name="is_default">
                <option value="0">{{T "admin.payment.no"}}</option>
                <option value="1">{{T "admin.payment.yes"}}</option>
              </select>
            </div>
            <div class="col-12">
              <label class="form-label">{{T "admin.payment.field_note"}}</label>
              <input class="form-control" name="description">
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-light btn-sm" data-bs-dismiss="modal">{{T "admin.payment.cancel"}}</button>
        <button type="button" class="btn btn-primary btn-sm" id="ifaceFormSave">{{T "admin.payment.save"}}</button>
      </div>
    </div>
  </div>
</div>
<script>
(function () {
  function fillForm($form, d) {
    $form.find('[name=id]').val(d.id || 0);
    $form.find('[name=interface_name]').val(d.interface_name || '');
    $form.find('[name=interface_type]').val(d.interface_type || 'alipay_rsa');
    $form.find('[name=merchant_id]').val(d.merchant_id || '');
    $form.find('[name=app_id]').val(d.app_id || '');
    $form.find('[name=merchant_key]').val(d.merchant_key || '');
    $form.find('[name=public_key]').val(d.public_key || '');
    $form.find('[name=api_url]').val(d.api_url || '');
    $form.find('[name=status]').val(String(d.status == null ? 1 : d.status));
    $form.find('[name=is_default]').val(String(d.is_default == null ? 0 : d.is_default));
    $form.find('[name=description]').val(d.description || '');
  }
  function openForm(title, data) {
    var modalEl = document.getElementById('ifaceFormModal');
    if (!modalEl || !window.bootstrap || typeof bootstrap.Modal !== 'function') {
      showAdminToast(false, {{jsString (T "admin.payment.modal_missing")}});
      return;
    }
    document.getElementById('ifaceFormModalLabel').textContent = title;
    fillForm($('#ifaceForm'), data || { id: 0, status: 1, is_default: 0, interface_type: 'alipay_rsa' });
    bootstrap.Modal.getOrCreateInstance(modalEl).show();
  }
  $('#btnAddIface').on('click', function () {
    openForm({{jsString (T "admin.payment.modal_add")}}, { id: 0, status: 1, is_default: 0, interface_type: 'alipay_rsa' });
  });
  var ifaceModalEl = document.getElementById('ifaceFormModal');
  if (ifaceModalEl && ifaceModalEl.parentNode !== document.body) {
    document.body.appendChild(ifaceModalEl);
  }
  $('#ifaceFormSave').on('click', function () {
    var $form = $('#ifaceForm');
    if (!$form.length) return;
    if (!$form[0].reportValidity()) return;
    var $btn = $(this).prop('disabled', true);
    $.post('/api/admin/payment-interfaces/save', $form.serialize(), null, 'json')
      .done(function (res) {
        showAdminToast(!!res.success, (res.data && res.data.message) || res.message || {{jsString (T "admin.payment.saved")}});
        if (res.success) {
          var modalEl = document.getElementById('ifaceFormModal');
          if (modalEl && window.bootstrap) bootstrap.Modal.getOrCreateInstance(modalEl).hide();
          setTimeout(function () { location.reload(); }, 400);
        }
      })
      .fail(function (xhr) {
        var msg = {{jsString (T "admin.payment.err_save")}};
        try { msg = JSON.parse(xhr.responseText).message || msg; } catch (err) {}
        showAdminToast(false, msg);
      })
      .always(function () { $btn.prop('disabled', false); });
  });
  $('.js-edit').on('click', function () {
    var id = $(this).data('id');
    $.getJSON('/api/admin/payment-interfaces/get', { id: id }, function (res) {
      if (!res.success || !res.data) {
        showAdminToast(false, res.message || {{jsString (T "admin.payment.read_fail")}});
        return;
      }
      openForm({{jsString (T "admin.payment.modal_edit")}}, res.data);
    }).fail(function (xhr) {
      var msg = {{jsString (T "admin.payment.read_fail")}};
      try { msg = JSON.parse(xhr.responseText).message || msg; } catch (err) {}
      showAdminToast(false, msg);
    });
  });
  $('.js-del').on('click', function () {
    var id = $(this).data('id');
    var run = function () {
      $.post('/api/admin/payment-interfaces/delete', { id: id }, null, 'json')
        .done(function (res) {
          showAdminToast(!!res.success, (res.data && res.data.message) || res.message || {{jsString (T "admin.payment.deleted")}});
          if (res.success) setTimeout(function () { location.reload(); }, 400);
        })
        .fail(function (xhr) {
          var msg = {{jsString (T "admin.payment.err_delete")}};
          try { msg = JSON.parse(xhr.responseText).message || msg; } catch (err) {}
          showAdminToast(false, msg);
        });
    };
    if (typeof window.adminBsConfirm === 'function') {
      window.adminBsConfirm({ title: {{jsString (T "admin.payment.del_title")}}, message: {{jsString (T "admin.payment.del_msg")}}, okText: {{jsString (T "admin.payment.delete")}}, okClass: 'btn-danger' }).then(function (ok) {
        if (ok) run();
      });
      return;
    }
    if (confirm({{jsString (T "admin.payment.del_msg")}})) run();
  });
})();
</script>
{{template "admin/layout_foot" .}}
{{end}}