<?= $this->extend('layout/management_layout') ?>
<?= $this->section('content') ?>

<div class="container mt-4">
    <h1>Create Discount Voucher</h1>

    <?php if (session()->getFlashdata('error')): ?>
        <div class="alert alert-danger"><?= session()->getFlashdata('error') ?></div>
    <?php endif; ?>
    <?php if (session()->getFlashdata('success')): ?>
        <div class="alert alert-success"><?= session()->getFlashdata('success') ?></div>
    <?php endif; ?>

    <form method="post" action="">
        <?= csrf_field() ?>

        <div class="mb-3">
            <label for="code" class="form-label">Voucher Code</label>
            <div class="input-group">
                <input type="text" name="code" id="code" class="form-control"
                       value="<?= esc($voucher['code'] ?? '') ?>"
                       placeholder="Enter or generate a code (e.g. WELCOME10)" required>
                <button type="button" class="btn btn-outline-secondary" id="generateCodeBtn">Auto Generate</button>
            </div>
        </div>

        <!-- NEW: Description / Reason -->
        <div class="mb-3">
            <label for="description" class="form-label">Description / Reason</label>
            <textarea name="description" id="description" class="form-control" rows="3"
                      placeholder="Reason for this voucher."><?= esc($voucher['description'] ?? '') ?></textarea>
            <div class="form-text">Visible to admins only; not shown to parents.</div>
        </div>

        <div class="mb-3">
            <label for="discount_type" class="form-label">Discount Type</label>
            <select name="discount_type" id="discount_type" class="form-select" required>
                <option value="percent" <?= (isset($voucher) && $voucher['discount_type'] == 'percent') ? 'selected' : '' ?>>Percentage (%)</option>
                <option value="fixed"   <?= (isset($voucher) && $voucher['discount_type'] == 'fixed')   ? 'selected' : '' ?>>Fixed Amount ($)</option>
            </select>
        </div>

        <div class="mb-3">
            <label for="discount_value" class="form-label">Discount Value</label>
            <input type="number" name="discount_value" id="discount_value" class="form-control"
                   step="0.01" min="0"
                   value="<?= esc($voucher['discount_value'] ?? '') ?>"
                   placeholder="Enter discount value (e.g. 10 for 10% or 50 for $50)" required>
        </div>

        <div class="mb-3">
            <label for="max_uses" class="form-label">Maximum Uses</label>
            <input type="number" name="max_uses" id="max_uses" class="form-control"
                   value="<?= esc($voucher['max_uses'] ?? '') ?>"
                   placeholder="Leave empty for unlimited">
        </div>

        <div class="mb-3">
            <label for="valid_from" class="form-label">Valid From</label>
            <input type="date" name="valid_from" id="valid_from" class="form-control"
                   value="<?= esc($voucher['valid_from'] ?? '') ?>">
        </div>

        <div class="mb-3">
            <label for="valid_until" class="form-label">Valid Until</label>
            <input type="date" name="valid_until" id="valid_until" class="form-control"
                   value="<?= esc($voucher['valid_until'] ?? '') ?>">
        </div>

        <div class="form-check mb-3">
            <input type="checkbox" name="is_active" id="is_active" class="form-check-input"
                   <?= (isset($voucher) ? ($voucher['is_active'] ? 'checked' : '') : 'checked') ?>>
            <label for="is_active" class="form-check-label">Active</label>
        </div>

        <button type="submit" class="btn btn-success">Save Voucher</button>
        <button type="button" class="btn btn-info" onclick="window.location.href='/discounts/list'">Cancel</button>
    </form>
    <br>
</div>

<?= $this->endSection() ?>

<?= $this->section('scripts') ?>
<script>
document.getElementById('generateCodeBtn').addEventListener('click', function() {
  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
  let code = '';
  for (let i = 0; i < 10; i++) code += chars.charAt(Math.floor(Math.random() * chars.length));
  document.getElementById('code').value = code;

  // Remove any existing auto-generated prefix from Description (if present)
  const desc = document.getElementById('description');
  if (desc) {
    desc.value = desc.value.replace(/^Auto-generated on \d{4}-\d{2}-\d{2}\s*[—-]\s*reason:\s*/i, '');
  }
});
</script>
<?= $this->endSection() ?>
