{% extends "core/base.html" %}
{% block title %}Create Promo Code - SwiftPOS{% endblock %}
{% block topbar_title %}New Promo Code{% endblock %}

{% block content %}
<div class="container-fluid px-0" style="max-width:560px;">

    <div class="mb-3">
        <a href="{% url 'promo_list' %}" class="btn btn-outline-secondary btn-sm">
            <i class="fas fa-arrow-left me-1"></i> Back to Promo Codes
        </a>
    </div>

    <div class="card shadow-sm">
        <div class="card-header">
            <h6 class="mb-0 fw-bold"><i class="fas fa-tag me-2"></i>Create New Promo Code</h6>
        </div>
        <div class="card-body">
            <form method="post">
                {% csrf_token %}

                <div class="mb-3">
                    <label class="form-label fw-semibold small">Code <span class="text-danger">*</span></label>
                    <input type="text" name="code" class="form-control"
                           placeholder="e.g. SAVE10" style="text-transform:uppercase;" required>
                    <div class="form-text">Cashier will type this at checkout. Will be uppercased automatically.</div>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-semibold small">Description</label>
                    <input type="text" name="description" class="form-control"
                           placeholder="e.g. 10% off for returning customers">
                </div>

                <div class="mb-3">
                    <label class="form-label fw-semibold small">Discount Type</label>
                    <select name="discount_type" class="form-select" id="discount_type">
                        <option value="percentage">Percentage (%)</option>
                        <option value="fixed">Fixed Amount</option>
                    </select>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-semibold small">Discount Value <span class="text-danger">*</span></label>
                    <div class="input-group">
                        <span class="input-group-text" id="discount-prefix">%</span>
                        <input type="number" name="discount_value" step="0.01" min="0.01" class="form-control"
                               placeholder="e.g. 10" required>
                    </div>
                    <div class="form-text" id="discount-hint">Enter 10 for 10% off.</div>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-semibold small">Minimum Order Amount</label>
                    <div class="input-group">
                        <span class="input-group-text">{{ currency_symbol }}</span>
                        <input type="number" name="minimum_order_amount" step="0.01" min="0" value="0" class="form-control">
                    </div>
                    <div class="form-text">0 = no minimum required.</div>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-semibold small">Maximum Uses</label>
                    <input type="number" name="max_uses" min="0" value="0" class="form-control">
                    <div class="form-text">0 = unlimited uses.</div>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-semibold small">Expires On</label>
                    <input type="date" name="expires_at" class="form-control">
                    <div class="form-text">Leave blank for no expiry.</div>
                </div>

                <div class="d-grid gap-2">
                    <button class="btn btn-primary" type="submit">
                        <i class="fas fa-plus me-1"></i>Create Promo Code
                    </button>
                    <a href="{% url 'promo_list' %}" class="btn btn-outline-secondary">Cancel</a>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
document.getElementById('discount_type').addEventListener('change', function() {
    const prefix = document.getElementById('discount-prefix');
    const hint = document.getElementById('discount-hint');
    if (this.value === 'percentage') {
        prefix.textContent = '%';
        hint.textContent = 'Enter 10 for 10% off.';
    } else {
        prefix.textContent = '{{ currency_symbol }}';
        hint.textContent = 'Enter a fixed amount to deduct from the order total.';
    }
});
</script>
{% endblock %}