{% extends 'manager/base.html' %}
{% load static %}
{% load i18n %}

{% block sidebar.payment_plans %} class="active" {% endblock %}

{% block content %}
<div class="page-wrapper">
    <div class="content">
        <div class="row">
            <div class="col-sm-12">
                <h4 class="page-title">
                    {% if action == 'create' %}
                        {% trans "افزودن طرح پرداخت جدید" %}
                    {% else %}
                        {% trans "ویرایش طرح پرداخت" %}
                    {% endif %}
                </h4>
            </div>
        </div>
        
        {% if messages %}
            {% for message in messages %}
                <div class="alert alert-{% if message.tags == 'error' %}danger{% else %}{{ message.tags }}{% endif %} alert-dismissible fade show" role="alert">
                    {{ message }}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            {% endfor %}
        {% endif %}
        
        <div class="row">
            <div class="col-md-12">
                <div class="card-box">
                    <div class="card-header">
                        <h4 class="card-title">
                            {% if action == 'create' %}
                                {% trans "اطلاعات طرح جدید" %}
                            {% else %}
                                {% trans "ویرایش اطلاعات طرح" %}
                            {% endif %}
                        </h4>
                    </div>
                    <div class="card-body">
                        <form method="post" class="needs-validation" novalidate>
                            {% csrf_token %}
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="name">{% trans "نام طرح" %} <span class="text-danger">*</span></label>
                                        <input type="text" 
                                               class="form-control {% if form.name.errors %}is-invalid{% endif %}" 
                                               id="name" 
                                               name="name" 
                                               value="{% if plan.name %}{{ plan.name }}{% endif %}" 
                                               required>
                                        {% if form.name.errors %}
                                            <div class="invalid-feedback">{{ form.name.errors.0 }}</div>
                                        {% endif %}
                                        <small class="form-text text-muted">{% trans "نام منحصر به فرد برای طرح" %}</small>
                                    </div>
                                </div>
                                
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="plan_database_id">{% trans "شناسه دیتابیس" %}</label>
                                        <input type="number" 
                                               class="form-control {% if form.plan_database_id.errors %}is-invalid{% endif %}" 
                                               id="plan_database_id" 
                                               name="plan_database_id" 
                                               min="1" 
                                               value="{% if plan.plan_database_id %}{{ plan.plan_database_id }}{% endif %}">
                                        {% if form.plan_database_id.errors %}
                                            <div class="invalid-feedback">{{ form.plan_database_id.errors.0 }}</div>
                                        {% endif %}
                                        <small class="form-text text-muted">{% trans "شناسه عددی منحصر به فرد برای طرح (اختیاری)" %}</small>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="price">{% trans "قیمت (تومان)" %} <span class="text-danger">*</span></label>
                                        <input type="number" 
                                               class="form-control {% if form.price.errors %}is-invalid{% endif %}" 
                                               id="price" 
                                               name="price" 
                                               step="0.01" 
                                               min="0" 
                                               value="{% if plan.price %}{{ plan.price }}{% endif %}" 
                                               required>
                                        {% if form.price.errors %}
                                            <div class="invalid-feedback">{{ form.price.errors.0 }}</div>
                                        {% endif %}
                                    </div>
                                </div>
                                
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="subscription_period">{% trans "دوره اشتراک" %} <span class="text-danger">*</span></label>
                                        <select class="form-control {% if form.subscription_period.errors %}is-invalid{% endif %}" 
                                                id="subscription_period" 
                                                name="subscription_period" 
                                                required>
                                            <option value="">{% trans "انتخاب کنید" %}</option>
                                            <option value="Monthly" {% if plan.subscription_period == 'Monthly' %}selected{% endif %}>{% trans "ماهانه" %}</option>
                                            <option value="Quarterly" {% if plan.subscription_period == 'Quarterly' %}selected{% endif %}>{% trans "سه ماهه" %}</option>
                                            <option value="Semi-Annual" {% if plan.subscription_period == 'Semi-Annual' %}selected{% endif %}>{% trans "شش ماهه" %}</option>
                                            <option value="Annual" {% if plan.subscription_period == 'Annual' %}selected{% endif %}>{% trans "سالانه" %}</option>
                                            <option value="Lifetime" {% if plan.subscription_period == 'Lifetime' %}selected{% endif %}>{% trans "مادام‌العمر" %}</option>
                                        </select>
                                        {% if form.subscription_period.errors %}
                                            <div class="invalid-feedback">{{ form.subscription_period.errors.0 }}</div>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="price_with_promotion">{% trans "قیمت با تخفیف (تومان)" %}</label>
                                        <input type="number" 
                                               class="form-control {% if form.price_with_promotion.errors %}is-invalid{% endif %}" 
                                               id="price_with_promotion" 
                                               name="price_with_promotion" 
                                               step="0.01" 
                                               min="0" 
                                               value="{% if plan.price_with_promotion %}{{ plan.price_with_promotion }}{% endif %}">
                                        {% if form.price_with_promotion.errors %}
                                            <div class="invalid-feedback">{{ form.price_with_promotion.errors.0 }}</div>
                                        {% endif %}
                                        <small class="form-text text-muted">{% trans "اختیاری - در صورت وجود تخفیف" %}</small>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="promotion">{% trans "توضیحات تخفیف" %}</label>
                                        <textarea class="form-control {% if form.promotion.errors %}is-invalid{% endif %}" 
                                                  id="promotion" 
                                                  name="promotion" 
                                                  rows="2" 
                                                  placeholder="{% trans 'مثال: تخفیف 20% برای ثبت‌نام اول' %}">{% if plan.promotion %}{{ plan.promotion }}{% endif %}</textarea>
                                        {% if form.promotion.errors %}
                                            <div class="invalid-feedback">{{ form.promotion.errors.0 }}</div>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="items_included">{% trans "موارد شامل" %}</label>
                                        <textarea class="form-control {% if form.items_included.errors %}is-invalid{% endif %}" 
                                                  id="items_included" 
                                                  name="items_included" 
                                                  rows="4" 
                                                  placeholder="{% trans 'مثال: مشاوره تخصصی & رژیم غذایی & پیگیری هفتگی & پشتیبانی 24/7' %}">{% if plan.items_included %}{{ plan.items_included }}{% endif %}</textarea>
                                        {% if form.items_included.errors %}
                                            <div class="invalid-feedback">{{ form.items_included.errors.0 }}</div>
                                        {% endif %}
                                        <small class="form-text text-muted">{% trans "موارد را با علامت & از هم جدا کنید" %}</small>
                                    </div>
                                </div>
                                
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="items_excluded">{% trans "موارد مستثنی" %}</label>
                                        <textarea class="form-control {% if form.items_excluded.errors %}is-invalid{% endif %}" 
                                                  id="items_included" 
                                                  name="items_excluded" 
                                                  rows="4" 
                                                  placeholder="{% trans 'مثال: مشاوره تلفنی & ویزیت حضوری & داروهای خاص' %}">{% if plan.items_excluded %}{{ plan.items_excluded }}{% endif %}</textarea>
                                        {% if form.items_excluded.errors %}
                                            <div class="invalid-feedback">{{ form.items_excluded.errors.0 }}</div>
                                        {% endif %}
                                        <small class="form-text text-muted">{% trans "موارد را با علامت & از هم جدا کنید" %}</small>
                                    </div>
                                </div>
                            </div>
                            
                            {% if action == 'edit' %}
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" 
                                                       class="custom-control-input" 
                                                       id="is_active" 
                                                       name="is_active" 
                                                       {% if plan.is_active %}checked{% endif %}>
                                                <label class="custom-control-label" for="is_active">
                                                    {% trans "طرح فعال است" %}
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            {% endif %}
                            
                            <div class="row mt-4">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <button type="submit" class="btn btn-primary">
                                            <i class="fa fa-save"></i>
                                            {% if action == 'create' %}
                                                {% trans "ایجاد طرح" %}
                                            {% else %}
                                                {% trans "ذخیره تغییرات" %}
                                            {% endif %}
                                        </button>
                                        <a href="{% url 'panel-manager-payment-plans' %}" class="btn btn-secondary">
                                            <i class="fa fa-times"></i> {% trans "انصراف" %}
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block footer %}
<script>
$(document).ready(function() {
    // Form validation
    var forms = document.getElementsByClassName('needs-validation');
    var validation = Array.prototype.filter.call(forms, function(form) {
        form.addEventListener('submit', function(event) {
            if (form.checkValidity() === false) {
                event.preventDefault();
                event.stopPropagation();
            }
            form.classList.add('was-validated');
        }, false);
    });
    
    // Auto-hide alerts after 5 seconds
    setTimeout(function() {
        $('.alert').fadeOut('slow');
    }, 5000);
    
    // Price with promotion validation
    $('#price_with_promotion').on('input', function() {
        var price = parseFloat($('#price').val()) || 0;
        var promoPrice = parseFloat($(this).val()) || 0;
        
        if (promoPrice > 0 && promoPrice >= price) {
            $(this).addClass('is-invalid');
            $(this).next('.invalid-feedback').remove();
            $(this).after('<div class="invalid-feedback">{% trans "قیمت تخفیف باید کمتر از قیمت اصلی باشد" %}</div>');
        } else {
            $(this).removeClass('is-invalid');
            $(this).next('.invalid-feedback').remove();
        }
    });
});
</script>
{% endblock %}