{% 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.name.id_for_label }}" class="form-label">{{ form.name.label }}</label>
                    {{ form.name }}
                    {% if form.name.errors %}
                        <div class="text-danger">
                            {% for error in form.name.errors %}
                                {{ error }}
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
            </div>

            <div class="mb-3">
                <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 class="row mb-3">
                <div class="col-md-3">
                    <label for="{{ form.offer_type.id_for_label }}" class="form-label">{{ form.offer_type.label }}</label>
                    {{ form.offer_type }}
                    {% if form.offer_type.errors %}
                        <div class="text-danger">
                            {% for error in form.offer_type.errors %}
                                {{ error }}
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
                <div class="col-md-3 field-percentage">
                    <label for="{{ form.discount_percentage.id_for_label }}" class="form-label">{{ form.discount_percentage.label }}</label>
                    {{ form.discount_percentage }}
                    {% 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 field-amount">
                    <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 field-percentage field-amount">
                    <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.errors %}
                        <div class="text-danger">
                            {% for error in form.max_discount_amount.errors %}

                                {{ error }}
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
            </div>

            <div class="row mb-3 field-buy-get">
                <div class="col-md-3">
                    <label for="{{ form.buy_quantity.id_for_label }}" class="form-label">{{ form.buy_quantity.label }}</label>
                    {{ form.buy_quantity }}
                    {% if form.buy_quantity.errors %}
                        <div class="text-danger">
                            {% for error in form.buy_quantity.errors %}
                                {{ error }}
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
                <div class="col-md-3">
                    <label for="{{ form.get_quantity.id_for_label }}" class="form-label">{{ form.get_quantity.label }}</label>
                    {{ form.get_quantity }}
                    {% if form.get_quantity.errors %}
                        <div class="text-danger">
                            {% for error in form.get_quantity.errors %}
                                {{ error }}
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
                <div class="col-md-3">
                    <label for="{{ form.get_discount_percent.id_for_label }}" class="form-label">{{ form.get_discount_percent.label }}</label>
                    {{ form.get_discount_percent }}
                    {% if form.get_discount_percent.errors %}
                        <div class="text-danger">
                            {% for error in form.get_discount_percent.errors %}
                                {{ error }}
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
                <div class="col-md-3">
                    <label for="{{ form.gift_product.id_for_label }}" class="form-label">{{ form.gift_product.label }}</label>
                    {{ form.gift_product }}
                    {% if form.gift_product.errors %}
                        <div class="text-danger">
                            {% for error in form.gift_product.errors %}
                                {{ error }}
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
            </div>

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

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

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

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

            <div class="row mb-3">
                <div class="col-md-6">
                    <label for="{{ form.products.id_for_label }}" class="form-label">{{ form.products.label }}</label>
                    {{ form.products }}
                    {% if form.products.errors %}
                        <div class="text-danger">
                            {% for error in form.products.errors %}
                                {{ error }}
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
                <div class="col-md-6">
                    <label for="{{ form.services.id_for_label }}" class="form-label">{{ form.services.label }}</label>
                    {{ form.services }}
                    {% if form.services.errors %}
                        <div class="text-danger">
                            {% for error in form.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 flex-wrap">
                                <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.auto_apply }}
                                    <label class="form-check-label" for="{{ form.auto_apply.id_for_label }}">
                                        {{ form.auto_apply.label }}
                                    </label>
                                </div>
                                <div class="form-check">
                                    {{ form.exclude_sale_items }}
                                    <label class="form-check-label" for="{{ form.exclude_sale_items.id_for_label }}">
                                        {{ form.exclude_sale_items.label }}
                                    </label>
                                </div>
                                <div class="form-check">
                                    {{ form.first_order_only }}
                                    <label class="form-check-label" for="{{ form.first_order_only.id_for_label }}">
                                        {{ form.first_order_only.label }}
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

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

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<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: 'Select options',
            allowClear: true
        });

        function toggleFields() {
            var offerType = $('#id_offer_type').val();
            
            // Hide all conditional fields first
            $('.field-percentage').hide();
            $('.field-amount').hide();
            $('.field-buy-get').hide();

            if (offerType === 'percentage') {
                $('.field-percentage').show();
            } else if (offerType === 'fixed_amount') {
                $('.field-amount').show();
            } else if (offerType === 'buy_x_get_y') {
                $('.field-buy-get').show();
            }
        }

        // Initial check
        toggleFields();

        // Change event
        $('#id_offer_type').change(function() {
            toggleFields();
        });
    });
</script>
{% endblock %}