{% extends 'superuser/base_superuser.html' %}

{% block title %}{% if object %}Edit Package{% else %}Create Package{% endif %} | ChatLab{% endblock %}
{% block packages_active %}active{% endblock %}

{% block workspace %}
<div class="page-header">
    <div>
        <h2 class="page-title">{% if object %}Edit Package{% else %}Create Package{% endif %}</h2>
        <p class="page-subtitle">Configure subscription limits, duration, and price.</p>
    </div>
    <a href="{% url 'superuser_package_list' %}" class="btn btn-secondary">← Back</a>
</div>

<div class="glass-card" style="padding:2rem; margin-top:1rem; max-width:600px;">
    <form method="post" id="package-form">
        {% csrf_token %}
        <div class="form-group" style="margin-bottom:1.25rem;">
            <label class="form-label" style="font-weight:600; display:block; margin-bottom:0.5rem;">Package Name</label>
            <input type="text" name="name" class="form-input" required placeholder="e.g., Starter Pack, Gold Standard" value="{% if object %}{{ object.name }}{% endif %}" style="width:100%;" />
        </div>
        
        <div class="form-group" style="margin-bottom:1.25rem; display:flex; align-items:center; gap:0.5rem; background:rgba(0,0,0,0.02); padding:0.75rem; border-radius:8px; border:1px dashed var(--border-color);">
            <input type="checkbox" id="is_unlimited" name="is_unlimited" {% if object.is_unlimited %}checked{% endif %} style="width:18px; height:18px; cursor:pointer;" />
            <label for="is_unlimited" style="font-weight:600; cursor:pointer; user-select:none;">Unlimited Messages Plan</label>
        </div>
        
        <div class="form-group" id="message-limit-group" style="margin-bottom:1.25rem;">
            <label class="form-label" style="font-weight:600; display:block; margin-bottom:0.5rem;">Message Limit</label>
            <input type="number" id="message_limit" name="message_limit" class="form-input" min="0" placeholder="e.g., 1000" value="{% if object %}{{ object.message_limit }}{% else %}1000{% endif %}" style="width:100%;" />
            <span style="font-size:0.85rem; color:var(--text-muted); display:block; margin-top:0.25rem;">Total bot messages allowed during the validity period.</span>
        </div>
        
        <div class="form-group" style="margin-bottom:1.25rem;">
            <label class="form-label" style="font-weight:600; display:block; margin-bottom:0.5rem;">Validity Duration (Days)</label>
            <input type="number" name="days_valid" class="form-input" required min="1" placeholder="e.g., 30" value="{% if object %}{{ object.days_valid }}{% else %}30{% endif %}" style="width:100%;" />
            <span style="font-size:0.85rem; color:var(--text-muted); display:block; margin-top:0.25rem;">Number of days this subscription lasts.</span>
        </div>
        
        <div class="form-group" style="margin-bottom:1.5rem;">
            <label class="form-label" style="font-weight:600; display:block; margin-bottom:0.5rem;">Price (৳)</label>
            <input type="number" step="0.01" name="price" class="form-input" required min="0" placeholder="e.g., 4900" value="{% if object %}{{ object.price }}{% else %}0.00{% endif %}" style="width:100%;" />
        </div>
        
        <div class="form-actions" style="display:flex; gap:1rem; margin-top:2rem;">
            <button class="btn btn-primary" type="submit" style="padding:0.75rem 1.5rem;">{% if object %}Update Package{% else %}Create Package{% endif %}</button>
            <a href="{% url 'superuser_package_list' %}" class="btn btn-secondary" style="padding:0.75rem 1.5rem;">Cancel</a>
        </div>
    </form>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const isUnlimitedCheckbox = document.getElementById('is_unlimited');
        const messageLimitGroup = document.getElementById('message-limit-group');
        const messageLimitInput = document.getElementById('message_limit');
        
        function toggleMessageLimit() {
            if (isUnlimitedCheckbox.checked) {
                messageLimitGroup.style.opacity = '0.5';
                messageLimitInput.disabled = true;
                messageLimitInput.value = '0';
            } else {
                messageLimitGroup.style.opacity = '1';
                messageLimitInput.disabled = false;
                if (messageLimitInput.value === '0') {
                    messageLimitInput.value = '1000';
                }
            }
        }
        
        isUnlimitedCheckbox.addEventListener('change', toggleMessageLimit);
        // Initial run
        toggleMessageLimit();
    });
</script>
{% endblock %}