{% 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;
        }
        .category-item {
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 15px;
            margin-bottom: 10px;
            background-color: #f9f9f9;
        }
        .subcategory-item {
            border: 1px solid #e0e0e0;
            border-radius: 3px;
            padding: 10px;
            margin: 5px 0 5px 20px;
            background-color: #fff;
        }
        .category-actions {
            float: right;
        }
        .category-info {
            margin-bottom: 10px;
        }
        .resource-count {
            color: #666;
            font-size: 0.9em;
        }
    </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-create-category' %}" class="btn btn btn-primary btn-rounded float-right">
                    <i class="fa fa-plus"></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-12">
                {% if categories_list %}
                    {% for category in categories_list %}
                        <div class="category-item">
                            <div class="category-actions">
                                <a href="{% url 'panel-manager-edit-category' category.id %}" class="btn btn-sm btn-info">
                                    <i class="fa fa-edit"></i> {% trans "ویرایش" %}
                                </a>
                                <button type="button" class="btn btn-sm btn-danger" data-toggle="modal" data-target="#delete_category_{{ category.id }}">
                                    <i class="fa fa-trash"></i> {% trans "حذف" %}
                                </button>
                            </div>
                            
                            <div class="category-info">
                                <h5><strong>{{ category.name }}</strong></h5>
                                {% if category.description %}
                                    <p>{{ category.description }}</p>
                                {% endif %}
                                <div class="resource-count">
                                    {% trans "تعداد محتوا:" %} {{ category.resource_count }}
                                </div>
                            </div>

                            {% if category.subcategories.all %}
                                <div class="subcategories">
                                    <h6>{% trans "زیردسته‌ها:" %}</h6>
                                    {% for subcategory in category.subcategories.all %}
                                        <div class="subcategory-item">
                                            <div class="category-actions">
                                                <a href="{% url 'panel-manager-edit-category' subcategory.id %}" class="btn btn-sm btn-info">
                                                    <i class="fa fa-edit"></i> {% trans "ویرایش" %}
                                                </a>
                                                <button type="button" class="btn btn-sm btn-danger" data-toggle="modal" data-target="#delete_category_{{ subcategory.id }}">
                                                    <i class="fa fa-trash"></i> {% trans "حذف" %}
                                                </button>
                                            </div>
                                            
                                            <div class="category-info">
                                                <h6><strong>{{ subcategory.name }}</strong></h6>
                                                {% if subcategory.description %}
                                                    <p>{{ subcategory.description }}</p>
                                                {% endif %}
                                                <div class="resource-count">
                                                    {% trans "تعداد محتوا:" %} {{ subcategory.resource_count }}
                                                </div>
                                            </div>
                                        </div>
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>
                    {% endfor %}
                {% else %}
                    <div class="text-center">
                        <p>{% trans "هیچ دسته‌بندی‌ای یافت نشد." %}</p>
                        <a href="{% url 'panel-manager-create-category' %}" class="btn btn-primary">
                            {% trans "ایجاد اولین دسته‌بندی" %}
                        </a>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
{% endblock %}

{% block delete %}
    {% for category in categories_list %}
        <div id="delete_category_{{ category.id }}" class="modal fade delete-modal" role="dialog">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-body text-center">
                        <img src="{% static 'panel/doctor' %}/img/sent.png" alt="" width="50" height="46">
                        <h3>{% trans "آیا از حذف دسته‌بندی" %} "{{ category.name }}" {% trans "مطمئن هستید؟" %}</h3>
                        <p>{% trans "این عمل غیرقابل بازگشت است." %}</p>
                        <div class="m-t-20"> 
                            <a href="#" class="btn btn-white" data-dismiss="modal">{% trans "بستن" %}</a>
                            <form method="post" action="{% url 'panel-manager-delete-category' category.id %}" style="display: inline;">
                                {% csrf_token %}
                                <button type="submit" class="btn btn-danger">{% trans "حذف" %}</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        {% for subcategory in category.subcategories.all %}
            <div id="delete_category_{{ subcategory.id }}" class="modal fade delete-modal" role="dialog">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-body text-center">
                            <img src="{% static 'panel/doctor' %}/img/sent.png" alt="" width="50" height="46">
                            <h3>{% trans "آیا از حذف زیردسته" %} "{{ subcategory.name }}" {% trans "مطمئن هستید؟" %}</h3>
                            <p>{% trans "این عمل غیرقابل بازگشت است." %}</p>
                            <div class="m-t-20"> 
                                <a href="#" class="btn btn-white" data-dismiss="modal">{% trans "بستن" %}</a>
                                <form method="post" action="{% url 'panel-manager-delete-category' subcategory.id %}" style="display: inline;">
                                    {% csrf_token %}
                                    <button type="submit" class="btn btn-danger">{% trans "حذف" %}</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        {% endfor %}
    {% endfor %}
{% 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>
{% endblock %}