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


{% block header.add_script %}
    <style rel="stylesheet">
        .dropdown-menu li {
        position: relative;
        }
        .dropdown-menu .dropdown-submenu {
        display: none;
        position: absolute;
        left: 100%;
        top: -7px;
        }
        .dropdown-menu .dropdown-submenu-left {
        right: 100%;
        left: auto;
        }
        .dropdown-menu > li:hover > .dropdown-submenu {
        display: block;
        }
        .form-group {
            margin-bottom: 20px;
        }
        .form-control {
            border-radius: 5px;
        }
        .btn-cancel {
            margin-right: 10px;
        }
        .category-status {
            margin-top: 10px;
        }
    </style>
{% endblock %}

{% block sidebar.dashboard %} {% endblock %}
{% block sidebar.categories %} class="active" {% endblock %}


{% block content %}
    <div class="content">
        <div class="row">
            <div class="col-sm-4 col-3">
                <h4 class="page-title">{% trans "ویرایش دسته‌بندی" %}</h4>
            </div>
            <div class="col-sm-8 col-9 text-right m-b-20">
                <a href="{% url 'panel-manager-categories' %}" class="btn btn btn-secondary btn-rounded float-right">
                    <i class="fa fa-arrow-left"></i> {% trans "بازگشت به لیست" %}
                </a>
            </div>
        </div>
        
        {% if messages %}
            <div class="row">
                <div class="col-md-12">
                    {% 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 %}
                </div>
            </div>
        {% endif %}

        <div class="row">
            <div class="col-md-8">
                <div class="card-box">
                    <h4 class="card-title">{% trans "ویرایش دسته‌بندی" %} "{{ category.name }}"</h4>
                    <form method="post">
                        {% csrf_token %}
                        
                        <div class="form-group">
                            <label for="name">{% trans "نام دسته‌بندی" %} <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="name" name="name" value="{{ category.name }}" required>
                        </div>
                        
                        <div class="form-group">
                            <label for="slug">{% trans "نامک (Slug)" %} <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="slug" name="slug" value="{{ category.slug }}" required>
                            <small class="form-text text-muted">{% trans "نامک باید منحصر به فرد باشد و فقط شامل حروف انگلیسی، اعداد و خط تیره باشد." %}</small>
                        </div>
                        
                        <div class="form-group">
                            <label for="description">{% trans "توضیحات" %}</label>
                            <textarea class="form-control" id="description" name="description" rows="4">{{ category.description }}</textarea>
                        </div>
                        
                        <div class="form-group">
                            <label for="parent_id">{% trans "دسته‌بندی والد" %}</label>
                            <select class="form-control" id="parent_id" name="parent_id">
                                <option value="">{% trans "بدون والد (دسته‌بندی اصلی)" %}</option>
                                {% for parent in parent_categories %}
                                    <option value="{{ parent.id }}" {% if category.parent and category.parent.id == parent.id %}selected{% endif %}>
                                        {{ parent.name }}
                                    </option>
                                {% endfor %}
                            </select>
                            <small class="form-text text-muted">{% trans "اگر خالی باشد، این دسته‌بندی به عنوان دسته‌بندی اصلی در نظر گرفته می‌شود." %}</small>
                        </div>
                        
                        <div class="form-group">
                            <label for="ordering">{% trans "ترتیب نمایش" %}</label>
                            <input type="number" class="form-control" id="ordering" name="ordering" value="{{ category.ordering }}" min="0">
                            <small class="form-text text-muted">{% trans "اعداد کوچکتر اولویت بالاتری دارند." %}</small>
                        </div>
                        
                        <div class="form-group">
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="is_active" name="is_active" {% if category.is_active %}checked{% endif %}>
                                <label class="custom-control-label" for="is_active">{% trans "فعال" %}</label>
                            </div>
                            <small class="form-text text-muted">{% trans "دسته‌بندی‌های غیرفعال نمایش داده نمی‌شوند." %}</small>
                        </div>
                        
                        <div class="form-group">
                            <button type="submit" class="btn btn-primary">
                                <i class="fa fa-save"></i> {% trans "ذخیره تغییرات" %}
                            </button>
                            <a href="{% url 'panel-manager-categories' %}" class="btn btn-secondary btn-cancel">
                                <i class="fa fa-times"></i> {% trans "انصراف" %}
                            </a>
                        </div>
                    </form>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card-box">
                    <h4 class="card-title">{% trans "اطلاعات دسته‌بندی" %}</h4>
                    <div class="category-info">
                        <p><strong>{% trans "تاریخ ایجاد:" %}</strong> {{ category.created_at|date:"Y/m/d H:i" }}</p>
                        <p><strong>{% trans "آخرین ویرایش:" %}</strong> {{ category.updated_at|date:"Y/m/d H:i" }}</p>
                        <p><strong>{% trans "تعداد محتوا:" %}</strong> {{ category.resource_count }}</p>
                        {% if category.parent %}
                            <p><strong>{% trans "دسته‌بندی والد:" %}</strong> {{ category.parent.name }}</p>
                        {% endif %}
                        {% if category.subcategories.all %}
                            <p><strong>{% trans "تعداد زیردسته:" %}</strong> {{ category.subcategories.count }}</p>
                        {% endif %}
                    </div>
                    
                    <div class="category-status">
                        <h6>{% trans "وضعیت:" %}</h6>
                        {% if category.is_active %}
                            <span class="badge badge-success">{% trans "فعال" %}</span>
                        {% else %}
                            <span class="badge badge-danger">{% trans "غیرفعال" %}</span>
                        {% endif %}
                    </div>
                </div>
                
                <div class="card-box">
                    <h4 class="card-title">{% trans "راهنما" %}</h4>
                    <div class="alert alert-info">
                        <h6>{% trans "نکات مهم:" %}</h6>
                        <ul class="mb-0">
                            <li>{% trans "تغییر نام دسته‌بندی ممکن است بر روی محتواهای موجود تأثیر بگذارد." %}</li>
                            <li>{% trans "دسته‌بندی‌های غیرفعال در لیست نمایش داده نمی‌شوند." %}</li>
                            <li>{% trans "تغییر دسته‌بندی والد ممکن است ساختار را تغییر دهد." %}</li>
                            <li>{% trans "پس از ویرایش، تغییرات بلافاصله اعمال می‌شود." %}</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}


{% block script %}
    <script src="{% static 'panel/doctor' %}/js/jquery-3.2.1.min.js"></script>
    <script src="{% static 'panel/doctor' %}/js/popper.min.js"></script>
    <script src="{% static 'panel/doctor' %}/js/bootstrap.min.js"></script>
    <script src="{% static 'panel/doctor' %}/js/jquery.slimscroll.js"></script>
    <script src="{% static 'panel/doctor' %}/js/select2.min.js"></script>
    <script src="{% static 'panel/doctor' %}/js/jquery.dataTables.min.js"></script>
    <script src="{% static 'panel/doctor' %}/js/dataTables.bootstrap4.min.js"></script>
    <script src="{% static 'panel/doctor' %}/js/moment.min.js"></script>
    <script src="{% static 'panel/doctor' %}/js/bootstrap-datetimepicker.min.js"></script>
    <script src="{% static 'panel/doctor' %}/js/app.js"></script>
    
    <script>
        // Auto-generate slug from name (only if slug is empty)
        document.getElementById('name').addEventListener('input', function() {
            var slugField = document.getElementById('slug');
            if (!slugField.value) {
                var name = this.value;
                var slug = name
                    .toLowerCase()
                    .replace(/[^\u0600-\u06FF\u0750-\u077F\u08A0-\u08FF\uFB50-\uFDFF\uFE70-\uFEFFa-zA-Z0-9\s-]/g, '') // Remove special chars except Persian, English, numbers, spaces, hyphens
                    .replace(/\s+/g, '-') // Replace spaces with hyphens
                    .replace(/-+/g, '-') // Replace multiple hyphens with single hyphen
                    .replace(/^-+|-+$/g, ''); // Remove leading/trailing hyphens
                
                slugField.value = slug;
            }
        });
        
        // Validate slug format
        document.getElementById('slug').addEventListener('input', function() {
            var slug = this.value;
            var isValid = /^[a-zA-Z0-9-]+$/.test(slug);
            
            if (!isValid && slug.length > 0) {
                this.setCustomValidity('نامک فقط باید شامل حروف انگلیسی، اعداد و خط تیره باشد');
            } else {
                this.setCustomValidity('');
            }
        });
    </script>
{% endblock %}