{{define "admin/plans.html"}}
{{template "admin/layout_head" .}}
<div class="cs-admin-page">
{{template "admin_pagehead" (dict "Icon" "bx-package" "Title" (T "admin.plans.title") "Desc" (T "admin.plans.desc"))}}
<div class="cs-admin-section">
  <div class="cs-admin-section__head">
    <div class="cs-admin-section__head-icon"><i class="bx bx-list-ul"></i></div>
    <div class="cs-admin-section__head-text">
      <h2 class="cs-admin-section__head-title">{{T "admin.plans.list_title"}}</h2>
      <p class="cs-admin-section__head-sub">{{T "admin.plans.list_sub_prefix"}} <a href="{{index .Data "PricingURL"}}" target="_blank" rel="noopener">/pricing</a> {{T "admin.plans.list_sub_suffix"}}</p>
    </div>
    <div class="ms-auto flex-shrink-0">
      <button type="button" class="btn btn-primary btn-sm" id="btnAddPlan"><i class="bx bx-plus"></i> {{T "admin.plans.btn_add"}}</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>{{T "admin.plans.col_sort"}}</th>
            <th>ID</th>
            <th>{{T "admin.plans.col_name"}}</th>
            <th>{{T "admin.plans.col_price"}}</th>
            <th>{{T "admin.plans.col_quota"}}</th>
            <th>{{T "admin.plans.col_show"}}</th>
            <th>{{T "admin.plans.col_buy"}}</th>
            <th>{{T "admin.plans.col_status"}}</th>
            <th>{{T "admin.plans.col_actions"}}</th>
          </tr>
        </thead>
        <tbody>
        {{range index .Data "Plans"}}
        <tr>
          <td>{{.sort_order}}</td>
          <td><span class="ut-admin-code">{{.plan_id}}</span>{{if eq (asInt .highlight) 1}} <span class="badge text-bg-warning">{{T "admin.plans.badge_highlight"}}</span>{{end}}</td>
          <td>{{.name}}{{if .name_en}} <span class="text-muted small">/ {{.name_en}}</span>{{end}}</td>
          <td class="small">¥{{.price_yearly}} / ${{.price_yearly_usd}}</td>
          <td class="small">{{.max_sites}} / {{.max_agents}} / {{.max_sessions_month}}</td>
          <td>{{if eq (asInt .show_on_pricing) 1}}<span class="badge text-bg-info">{{T "admin.plans.badge_pricing"}}</span>{{else}}—{{end}}</td>
          <td>{{if eq (asInt .purchasable) 1}}{{T "admin.plans.yes"}}{{else if eq (asInt .contact_only) 1}}{{T "admin.plans.contact"}}{{else}}—{{end}}</td>
          <td>{{if eq (asInt .status) 1}}<span class="badge text-bg-success">{{T "admin.plans.enabled"}}</span>{{else}}<span class="badge text-bg-secondary">{{T "admin.plans.disabled"}}</span>{{end}}</td>
          <td>
            <button type="button" class="btn btn-sm btn-outline-primary js-edit" data-id="{{.plan_id}}">{{T "admin.plans.edit"}}</button>
            <button type="button" class="btn btn-sm btn-outline-danger js-del" data-id="{{.plan_id}}">{{T "admin.plans.delete"}}</button>
          </td>
        </tr>
        {{else}}
        <tr><td colspan="9" class="text-center text-muted py-4">{{T "admin.plans.empty"}}</td></tr>
        {{end}}
        </tbody>
      </table>
    </div>
  </div>
</div>
</div>
<div class="modal fade" id="planFormModal" tabindex="-1" aria-labelledby="planFormModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl 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="planFormModalLabel">{{T "admin.plans.modal_add"}}</h2>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{T "admin.plans.close"}}"></button>
      </div>
      <div class="modal-body">
        <form id="planForm" class="sc-plan-form">
          <input type="hidden" name="is_new" value="1">
          <div class="row g-2">
            <div class="col-md-4">
              <label class="form-label">{{T "admin.plans.field_id"}}</label>
              <input class="form-control" name="plan_id" required pattern="[a-z][a-z0-9_]{1,31}" placeholder="{{T "admin.plans.id_ph"}}">
              <div class="form-text">{{T "admin.plans.id_hint"}}</div>
            </div>
            <div class="col-md-4">
              <label class="form-label">{{T "admin.plans.field_name_zh"}}</label>
              <input class="form-control" name="name" required>
            </div>
            <div class="col-md-4">
              <label class="form-label">{{T "admin.plans.field_name_en"}}</label>
              <input class="form-control" name="name_en">
            </div>
            <div class="col-md-3">
              <label class="form-label">{{T "admin.plans.price_m_cny"}}</label>
              <input class="form-control" type="number" min="0" name="price_monthly" value="0">
            </div>
            <div class="col-md-3">
              <label class="form-label">{{T "admin.plans.price_y_cny"}}</label>
              <input class="form-control" type="number" min="0" name="price_yearly" value="0">
            </div>
            <div class="col-md-3">
              <label class="form-label">{{T "admin.plans.price_m_usd"}}</label>
              <input class="form-control" type="number" min="0" name="price_monthly_usd" value="0">
            </div>
            <div class="col-md-3">
              <label class="form-label">{{T "admin.plans.price_y_usd"}}</label>
              <input class="form-control" type="number" min="0" name="price_yearly_usd" value="0">
            </div>
            <div class="col-md-3">
              <label class="form-label">{{T "admin.plans.max_sites"}}</label>
              <input class="form-control" type="number" min="0" name="max_sites" value="1">
            </div>
            <div class="col-md-3">
              <label class="form-label">{{T "admin.plans.max_agents"}}</label>
              <input class="form-control" type="number" min="0" name="max_agents" value="1">
            </div>
            <div class="col-md-3">
              <label class="form-label">{{T "admin.plans.max_sessions"}}</label>
              <input class="form-control" type="number" min="0" name="max_sessions_month" value="500">
            </div>
            <div class="col-md-3">
              <label class="form-label">{{T "admin.plans.retention_days"}}</label>
              <input class="form-control" type="number" min="0" name="history_retention_days" value="30">
            </div>
            <div class="col-md-3">
              <label class="form-label">{{T "admin.plans.col_sort"}}</label>
              <input class="form-control" type="number" name="sort_order" value="100">
            </div>
            <div class="col-md-3">
              <label class="form-label">{{T "admin.plans.col_status"}}</label>
              <select class="form-select" name="status">
                <option value="1" selected>{{T "admin.plans.enabled"}}</option>
                <option value="0">{{T "admin.plans.disabled"}}</option>
              </select>
            </div>
            <div class="col-md-3">
              <label class="form-label">{{T "admin.plans.badge_zh"}}</label>
              <input class="form-control" name="badge" placeholder="{{T "admin.plans.badge_highlight"}}">
            </div>
            <div class="col-md-3">
              <label class="form-label">{{T "admin.plans.badge_en_label"}}</label>
              <input class="form-control" name="badge_en" placeholder="Popular">
            </div>
            <div class="col-12">
              <div class="d-flex flex-wrap gap-3 pt-1">
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" name="show_on_pricing" value="1" id="chkShow" checked>
                  <label class="form-check-label" for="chkShow">{{T "admin.plans.show_pricing"}}</label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" name="purchasable" value="1" id="chkBuy">
                  <label class="form-check-label" for="chkBuy">{{T "admin.plans.can_buy"}}</label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" name="contact_only" value="1" id="chkContact">
                  <label class="form-check-label" for="chkContact">{{T "admin.plans.contact_only"}}</label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" name="highlight" value="1" id="chkHL">
                  <label class="form-check-label" for="chkHL">{{T "admin.plans.highlight_check"}}</label>
                </div>
              </div>
            </div>
            <div class="col-12">
              <label class="form-label">{{T "admin.plans.features"}}</label>
              <div class="d-flex flex-wrap gap-2" id="featBox">
                {{range index .Data "FeatureItems"}}
                <div class="form-check form-check-inline">
                  <input class="form-check-input feat-cb" type="checkbox" name="feat_{{.Key}}" value="1" id="feat_{{.Key}}" title="{{.Key}}">
                  <label class="form-check-label" for="feat_{{.Key}}" title="{{.Key}}">{{.Label}}</label>
                </div>
                {{end}}
              </div>
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-light btn-sm" data-bs-dismiss="modal">{{T "admin.plans.cancel"}}</button>
        <button type="button" class="btn btn-primary btn-sm" id="planFormSave">{{T "admin.plans.save"}}</button>
      </div>
    </div>
  </div>
</div>
<script>
(function () {
  function setCheck($el, on) {
    $el.prop('checked', !!on);
  }
  function fillForm($form, d, isNew) {
    $form.find('[name=is_new]').val(isNew ? '1' : '0');
    var $pid = $form.find('[name=plan_id]');
    $pid.val(d.plan_id || '').prop('readonly', !isNew);
    $form.find('[name=name]').val(d.name || '');
    $form.find('[name=name_en]').val(d.name_en || '');
    $form.find('[name=price_monthly]').val(d.price_monthly != null ? d.price_monthly : 0);
    $form.find('[name=price_yearly]').val(d.price_yearly != null ? d.price_yearly : 0);
    $form.find('[name=price_monthly_usd]').val(d.price_monthly_usd != null ? d.price_monthly_usd : 0);
    $form.find('[name=price_yearly_usd]').val(d.price_yearly_usd != null ? d.price_yearly_usd : 0);
    $form.find('[name=max_sites]').val(d.max_sites != null ? d.max_sites : 1);
    $form.find('[name=max_agents]').val(d.max_agents != null ? d.max_agents : 1);
    $form.find('[name=max_sessions_month]').val(d.max_sessions_month != null ? d.max_sessions_month : 500);
    $form.find('[name=history_retention_days]').val(d.history_retention_days != null ? d.history_retention_days : 30);
    $form.find('[name=sort_order]').val(d.sort_order != null ? d.sort_order : 100);
    $form.find('[name=status]').val(String(d.status == null ? 1 : d.status));
    $form.find('[name=badge]').val(d.badge || '');
    $form.find('[name=badge_en]').val(d.badge_en || '');
    setCheck($form.find('[name=show_on_pricing]'), d.show_on_pricing == null ? true : !!Number(d.show_on_pricing));
    setCheck($form.find('[name=purchasable]'), !!Number(d.purchasable));
    setCheck($form.find('[name=contact_only]'), !!Number(d.contact_only));
    setCheck($form.find('[name=highlight]'), !!Number(d.highlight));
    $form.find('.feat-cb').each(function () {
      var key = this.name.replace(/^feat_/, '');
      var feats = d.features || {};
      setCheck($(this), !!feats[key]);
    });
  }
  function openForm(title, data, isNew) {
    var modalEl = document.getElementById('planFormModal');
    if (!modalEl || !window.bootstrap || typeof bootstrap.Modal !== 'function') {
      showAdminToast(false, {{jsString (T "admin.plans.modal_missing")}});
      return;
    }
    document.getElementById('planFormModalLabel').textContent = title;
    fillForm($('#planForm'), data || {}, !!isNew);
    bootstrap.Modal.getOrCreateInstance(modalEl).show();
  }
  $('#btnAddPlan').on('click', function () {
    openForm({{jsString (T "admin.plans.modal_add")}}, { status: 1, show_on_pricing: 1, sort_order: 100, features: {} }, true);
  });
  var planModalEl = document.getElementById('planFormModal');
  if (planModalEl && planModalEl.parentNode !== document.body) {
    document.body.appendChild(planModalEl);
  }
  $('#planFormSave').on('click', function () {
    var $form = $('#planForm');
    if (!$form.length) return;
    if (!$form[0].reportValidity()) return;
    var $btn = $(this).prop('disabled', true);
    $.post('/api/admin/plans/save', $form.serialize(), null, 'json')
      .done(function (res) {
        showAdminToast(!!res.success, (res.data && res.data.message) || res.message || {{jsString (T "admin.plans.saved")}});
        if (res.success) {
          var modalEl = document.getElementById('planFormModal');
          if (modalEl && window.bootstrap) bootstrap.Modal.getOrCreateInstance(modalEl).hide();
          setTimeout(function () { location.reload(); }, 400);
        }
      })
      .fail(function (xhr) {
        var msg = {{jsString (T "admin.plans.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/plans/get', { plan_id: id }, function (res) {
      if (!res.success || !res.data) {
        showAdminToast(false, res.message || {{jsString (T "admin.plans.read_fail")}});
        return;
      }
      openForm({{jsString (T "admin.plans.modal_edit")}}, res.data, false);
    }).fail(function (xhr) {
      var msg = {{jsString (T "admin.plans.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/plans/delete', { plan_id: id }, null, 'json')
        .done(function (res) {
          showAdminToast(!!res.success, (res.data && res.data.message) || res.message || {{jsString (T "admin.plans.deleted")}});
          if (res.success) setTimeout(function () { location.reload(); }, 400);
        })
        .fail(function (xhr) {
          var msg = {{jsString (T "admin.plans.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.plans.del_title")}}, message: {{jsString (T "admin.plans.del_msg_prefix")}} + id + {{jsString (T "admin.plans.del_msg_suffix")}}, okText: {{jsString (T "admin.plans.delete")}}, okClass: 'btn-danger' }).then(function (ok) {
        if (ok) run();
      });
      return;
    }
    if (confirm({{jsString (T "admin.plans.confirm_del")}})) run();
  });
})();
</script>
{{template "admin/layout_foot" .}}
{{end}}