{% extends "base.html" %}

{% block content %}
    <h1>Create New Assessment</h1>
    <form method="POST">
        <div class="form-group">
            <label for="name">Assessment Name</label>
            <input type="text" id="name" name="name" class="form-control" required>
        </div>
        <div class="form-group">
            <label for="description">Description</label>
            <textarea id="description" name="description" class="form-control" rows="3" required></textarea>
        </div>
        <div class="form-group">
            <label for="assessment_type">Assessment Type</label>
            <select id="assessment_type" name="assessment_type" class="form-control" required>
                <option value="Mixed">Mixed</option>
                <option value="Yes/No">Yes/No</option>
                <option value="Likert Scale">Likert Scale</option>
            </select>
        </div>
        <div class="form-group form-check">
            <input type="checkbox" class="form-check-input" id="is_free" name="is_free" onchange="togglePriceField()">
            <label class="form-check-label" for="is_free">This is a free assessment</label>
        </div>
        <div class="form-group" id="price_field">
            <label for="price">Price per Unit (₹)</label>
            <input type="number" id="price" name="price" class="form-control" min="0" step="0.01" value="0.0" required>
            <small class="form-text text-muted">Set the price per unit for this assessment. This will be used when consultants request this assessment.</small>
        </div>
        <div class="form-group" id="min_quantity_field">
            <label for="min_quantity">Minimum Quantity</label>
            <input type="number" id="min_quantity" name="min_quantity" class="form-control" min="1" step="1" value="1" required>
            <small class="form-text text-muted">Set the minimum units that can be requested for this assessment.</small>
        </div>
        <div class="form-group form-check">
            <input type="checkbox" class="form-check-input" id="show_domain_wise" name="show_domain_wise">
            <label class="form-check-label" for="show_domain_wise">Display assessment with domain-wise tabs</label>
        </div>
        <button type="submit" class="btn btn-primary">Create Assessment</button>
    </form>
{% endblock %}

{% block scripts %}
<script>
    function togglePriceField() {
        const isFreeCheckbox = document.getElementById('is_free');
        const priceField = document.getElementById('price_field');
        const priceInput = document.getElementById('price');
        const minQtyField = document.getElementById('min_quantity_field');
        const minQtyInput = document.getElementById('min_quantity');
        
        if (isFreeCheckbox.checked) {
            priceField.style.display = 'none';
            priceInput.required = false;
            priceInput.value = '0.0';
            minQtyField.style.display = 'none';
            minQtyInput.required = false;
        } else {
            priceField.style.display = 'block';
            priceInput.required = true;
            minQtyField.style.display = 'block';
            minQtyInput.required = true;
        }
    }
    
    // Initialize on page load
    document.addEventListener('DOMContentLoaded', function() {
        togglePriceField();
    });
</script>
{% endblock %}