{% extends 'base.html' %}

{% block title %}{{ title }}{% endblock %}

{% block extra_css %}
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" />
<style>
    .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
        font-size: 0.85rem;
    }
</style>
{% endblock %}

{% block content %}
<div class="card">
    <div class="card-header">
        <h5 class="mb-0">{{ title }}</h5>
    </div>
    <div class="card-body">
        <form method="post">
            {% csrf_token %}
            
            <div class="row mb-3">
                <div class="col-md-6">
                    <label for="{{ form.code.id_for_label }}" class="form-label">{{ form.code.label }}</label>
                    {{ form.code }}
                    {% if form.code.errors %}
                        <div class="text-danger">
                            {% for error in form.code.errors %}
                                {{ error }}
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
                <div class="col-md-6">
                    <label for="{{ form.description.id_for_label }}" class="form-label">{{ form.description.label }}</label>
                    {{ form.description }}
                    {% if form.description.errors %}
                        <div class="text-danger">
                            {% for error in form.description.errors %}
                                {{ error }}
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
            </div>

            <div class="row mb-3">
                <div class="col-md-3">
                    <label for="{{ form.discount_type.id_for_label }}" class="form-label">{{ form.discount_type.label }}</label>
                    {{ form.discount_type }}
                    {% if form.discount_type.errors %}
                        <div class="text-danger">
                            {% for error in form.discount_type.errors %}
                                {{ error }}
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
                <div class="col-md-3">
                    <label for="{{ form.discount_percentage.id_for_label }}" class="form-label">{{ form.discount_percentage.label }}</label>
                    {{ form.discount_percentage }}
                    {% if form.discount_percentage.help_text %}
                        <div class="form-text">{{ form.discount_percentage.help_text }}</div>
                    {% endif %}
                    {% if form.discount_percentage.errors %}
                        <div class="text-danger">
                            {% for error in form.discount_percentage.errors %}
                                {{ error }}
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
                <div class="col-md-3">
                    <label for="{{ form.discount_amount.id_for_label }}" class="form-label">{{ form.discount_amount.label }}</label>
                    {{ form.discount_amount }}
                    {% if form.discount_amount.errors %}
                        <div class="text-danger">
                            {% for error in form.discount_amount.errors %}
                                {{ error }}
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
                <div class="col-md-3">
                    <label for="{{ form.max_discount_amount.id_for_label }}" class="form-label">{{ form.max_discount_amount.label }}</label>
                    {{ form.max_discount_amount }}
                    {% if form.max_discount_amount.help_text %}
                        <div class="form-text">{{ form.max_discount_amount.help_text }}</div>
                    {% endif %}
                    {% if form.max_discount_amount.errors %}
                        <div class="text-danger">
                            {% for error in form.max_discount_amount.errors %}
                                {{ error }}
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
            </div>

            <div class="row mb-3">
                <div class="col-md-6">
                    <label for="{{ form.valid_from.id_for_label }}" class="form-label">{{ form.valid_from.label }}</label>
                    {{ form.valid_from }}
                    {% if form.valid_from.errors %}
                        <div class="text-danger">
                            {% for error in form.valid_from.errors %}
                                {{ error }}
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
                <div class="col-md-6">
                    <label for="{{ form.valid_until.id_for_label }}" class="form-label">{{ form.valid_until.label }}</label>
                    {{ form.valid_until }}
                    {% if form.valid_until.errors %}
                        <div class="text-danger">
                            {% for error in form.valid_until.errors %}
                                {{ error }}
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
            </div>

            <div class="row mb-3">
                <div class="col-md-4">
                    <label for="{{ form.minimum_amount.id_for_label }}" class="form-label">{{ form.minimum_amount.label }}</label>
                    {{ form.minimum_amount }}
                    {% if form.minimum_amount.errors %}
                        <div class="text-danger">
                            {% for error in form.minimum_amount.errors %}
                                {{ error }}
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
                <div class="col-md-4">
                    <label for="{{ form.maximum_uses_total.id_for_label }}" class="form-label">{{ form.maximum_uses_total.label }}</label>
                    {{ form.maximum_uses_total }}
                    {% if form.maximum_uses_total.help_text %}
                        <div class="form-text">{{ form.maximum_uses_total.help_text }}</div>
                    {% endif %}
                    {% if form.maximum_uses_total.errors %}
                        <div class="text-danger">
                            {% for error in form.maximum_uses_total.errors %}
                                {{ error }}
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
                <div class="col-md-4">
                    <label for="{{ form.maximum_uses_per_user.id_for_label }}" class="form-label">{{ form.maximum_uses_per_user.label }}</label>
                    {{ form.maximum_uses_per_user }}
                    {% if form.maximum_uses_per_user.help_text %}
                        <div class="form-text">{{ form.maximum_uses_per_user.help_text }}</div>
                    {% endif %}
                    {% if form.maximum_uses_per_user.errors %}
                        <div class="text-danger">
                            {% for error in form.maximum_uses_per_user.errors %}
                                {{ error }}
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
            </div>

            <div class="row mb-3">
                <div class="col-md-4">
                    <label for="{{ form.apply_to_all_brands.id_for_label }}" class="form-label">{{ form.apply_to_all_brands.label }}</label>
                    {{ form.apply_to_all_brands }}
                    <div class="form-text">{{ form.apply_to_all_brands.help_text }}</div>
                    {% if form.apply_to_all_brands.errors %}
                        <div class="text-danger">
                            {% for error in form.apply_to_all_brands.errors %}
                                {{ error }}
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
                <div class="col-md-4">
                    <label for="{{ form.apply_to_all_products.id_for_label }}" class="form-label">{{ form.apply_to_all_products.label }}</label>
                    {{ form.apply_to_all_products }}
                    <div class="form-text">{{ form.apply_to_all_products.help_text }}</div>
                    {% if form.apply_to_all_products.errors %}
                        <div class="text-danger">
                            {% for error in form.apply_to_all_products.errors %}
                                {{ error }}
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
                <div class="col-md-4">
                    <label for="{{ form.apply_to_all_services.id_for_label }}" class="form-label">{{ form.apply_to_all_services.label }}</label>
                    {{ form.apply_to_all_services }}
                    <div class="form-text">{{ form.apply_to_all_services.help_text }}</div>
                    {% if form.apply_to_all_services.errors %}
                        <div class="text-danger">
                            {% for error in form.apply_to_all_services.errors %}
                                {{ error }}
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
            </div>

            <div class="row mb-3">
                <div class="col-12">
                    <div class="card bg-light">
                        <div class="card-body">
                            <h6 class="card-title">Settings</h6>
                            <div class="d-flex gap-4">
                                <div class="form-check">
                                    {{ form.is_active }}
                                    <label class="form-check-label" for="{{ form.is_active.id_for_label }}">
                                        {{ form.is_active.label }}
                                    </label>
                                </div>
                                <div class="form-check">
                                    {{ form.single_use }}
                                    <label class="form-check-label" for="{{ form.single_use.id_for_label }}">
                                        {{ form.single_use.label }}
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <button type="submit" class="btn btn-primary">Save</button>
            <a href="{% url 'discount_list' %}" class="btn btn-secondary">Cancel</a>
        </form>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
    $(document).ready(function() {
        $('.select2-multiple').select2({
            theme: 'bootstrap-5',
            width: '100%',
            placeholder: $(this).data('placeholder'),
            closeOnSelect: false,
            allowClear: true
        });
    });
</script>
{% endblock %}