{% 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;
        }
    </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 "اطلاعات دسته‌بندی" %}</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" 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" 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"></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 }}">{{ 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="0" min="0">
                            <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="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
        document.getElementById('name').addEventListener('input', function() {
            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
            
            document.getElementById('slug').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 %}