<div class="page-header d-print-none"><div class="col"><h2 class="page-title"><%= title %></h2></div></div>
<div class="card"><div class="card-body">
<% if (error) { %><div class="alert alert-danger"><%= error %></div><% } %>
<form action="<%= pkg ? '/admin/pricing-packages/' + pkg.id : '/admin/pricing-packages' %>" method="post" id="pricing-form">
  <div class="row">
    <div class="col-md-6">
      <div class="mb-3"><label class="form-label">Name</label><input type="text" name="name" class="form-control" value="<%= pkg ? pkg.name : '' %>" required></div>
      <div class="mb-3"><label class="form-label">Slug</label><input type="text" name="slug" class="form-control" value="<%= pkg ? (pkg.slug || '') : '' %>" placeholder="pro-monthly"></div>
      <div class="mb-3"><label class="form-label">Description</label><textarea name="description" class="form-control" rows="3"><%= pkg ? (pkg.description || '') : '' %></textarea></div>
      <div class="mb-3">
        <label class="form-check">
          <input type="checkbox" name="talkToSales" id="talkToSales" class="form-check-input" <%= pkg && (pkg.talkToSales || pkg.talk_to_sales) ? 'checked' : '' %>>
          <span class="form-check-label">Talk to Sales (hide price, show “Talk to Sales” in app)</span>
        </label>
      </div>
      <div id="price-fields">
        <div class="mb-3"><label class="form-label">Price</label><input type="number" step="0.01" min="0" name="price" id="priceInput" class="form-control" value="<%= pkg ? pkg.price : '0' %>"></div>
        <div class="mb-3"><label class="form-label">Currency</label><input type="text" name="currency" id="currencyInput" class="form-control" value="<%= pkg ? (pkg.currency || 'AED') : 'AED' %>" maxlength="10"></div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="mb-3">
        <label class="form-label">Billing Period</label>
        <select name="billingPeriod" class="form-select">
          <% billingPeriods.forEach(function(bp) { %>
          <option value="<%= bp %>" <%= pkg && (pkg.billingPeriod === bp) ? 'selected' : '' %>><%= bp %></option>
          <% }); %>
        </select>
      </div>
      <div class="mb-3">
        <label class="form-label">Status</label>
        <select name="status" class="form-select">
          <% statuses.forEach(function(st) { %>
          <option value="<%= st %>" <%= pkg && pkg.status === st ? 'selected' : '' %>><%= st %></option>
          <% }); %>
        </select>
      </div>
      <div class="mb-3"><label class="form-label">Sort Order</label><input type="number" name="sortOrder" class="form-control" value="<%= pkg ? (pkg.sortOrder || 0) : 0 %>"></div>
      <div class="mb-3">
        <label class="form-check">
          <input type="checkbox" name="isPopular" class="form-check-input" <%= pkg && pkg.isPopular ? 'checked' : '' %>>
          <span class="form-check-label">Mark as popular package</span>
        </label>
      </div>
      <div class="mb-3">
        <label class="form-label">Package Contents (one feature per line)</label>
        <textarea name="features" class="form-control" rows="8" placeholder="Unlimited offers&#10;Priority support&#10;Ad-free experience"><%= pkg ? (pkg.featuresText || '') : '' %></textarea>
      </div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Save</button>
  <a href="/admin/pricing-packages" class="btn btn-link">Cancel</a>
</form>
</div></div>
<script>
(function () {
  var talk = document.getElementById('talkToSales');
  var priceFields = document.getElementById('price-fields');
  var priceInput = document.getElementById('priceInput');
  function syncPriceFields() {
    var hide = talk && talk.checked;
    if (priceFields) priceFields.style.opacity = hide ? '0.5' : '1';
    if (priceInput) priceInput.required = !hide;
  }
  if (talk) talk.addEventListener('change', syncPriceFields);
  syncPriceFields();
})();
</script>
