{% 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;
        }
        .resource-type-section {
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 15px;
            margin-bottom: 15px;
            background-color: #f9f9f9;
        }
        .resource-type-section h5 {
            margin-bottom: 15px;
            color: #333;
        }
        .current-file {
            background-color: #e9ecef;
            padding: 10px;
            border-radius: 5px;
            margin-bottom: 10px;
        }
        .resource-status {
            margin-top: 10px;
        }
        .status-badge {
            display: inline-block;
            padding: 2px 6px;
            border-radius: 3px;
            font-size: 0.8em;
            color: white;
        }
        .status-published {
            background-color: #28a745;
        }
        .status-draft {
            background-color: #6c757d;
        }
        .status-featured {
            background-color: #ffc107;
            color: #212529;
        }
    </style>
{% endblock %}

{% block sidebar.dashboard %} {% endblock %}
{% block sidebar.resources %} 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-resources' %}" 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 "ویرایش محتوا" %} "{{ resource.title }}"</h4>
                    <form method="post" enctype="multipart/form-data">
                        {% csrf_token %}
                        
                        <div class="form-group">
                            <label for="title">{% trans "عنوان محتوا" %} <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="title" name="title" value="{{ resource.title }}" required>
                        </div>
                        
                        <div class="form-group">
                            <label for="description">{% trans "توضیحات" %}</label>
                            <textarea class="form-control" id="description" name="description" rows="4">{{ resource.description }}</textarea>
                        </div>
                        
                        <div class="form-group">
                            <label for="category_id">{% trans "دسته‌بندی" %} <span class="text-danger">*</span></label>
                            <select class="form-control" id="category_id" name="category_id" required>
                                <option value="">{% trans "انتخاب کنید" %}</option>
                                {% for category in categories_list %}
                                    <option value="{{ category.id }}" {% if resource.category.id == category.id %}selected{% endif %}>
                                        {{ category.name }}
                                    </option>
                                {% endfor %}
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label for="ordering">{% trans "ترتیب نمایش" %}</label>
                            <input type="number" class="form-control" id="ordering" name="ordering" value="{{ resource.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_published" name="is_published" {% if resource.is_published %}checked{% endif %}>
                                <label class="custom-control-label" for="is_published">{% trans "منتشر شده" %}</label>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="is_featured" name="is_featured" {% if resource.is_featured %}checked{% endif %}>
                                <label class="custom-control-label" for="is_featured">{% trans "ویژه" %}</label>
                            </div>
                        </div>
                        
                        <!-- Video Section -->
                        {% if resource.type == 'video' %}
                        <div class="resource-type-section" id="video-section">
                            <h5>{% trans "تنظیمات ویدیو" %}</h5>
                            <div class="form-group">
                                <label for="video_url">{% trans "لینک ویدیو" %} <span class="text-danger">*</span></label>
                                <input type="url" class="form-control" id="video_url" name="video_url" 
                                       value="{% if resource.video %}{{ resource.video.video_url }}{% endif %}">
                                <small class="form-text text-muted">{% trans "لینک ویدیو از YouTube یا سایر پلتفرم‌ها" %}</small>
                            </div>
                            <div class="form-group">
                                <label for="duration_minutes">{% trans "مدت زمان (دقیقه)" %}</label>
                                <input type="number" class="form-control" id="duration_minutes" name="duration_minutes" 
                                       value="{% if resource.video %}{{ resource.video.duration_minutes }}{% endif %}" min="0">
                            </div>
                            <div class="form-group">
                                <label for="thumbnail">{% trans "تصویر پیش‌نمایش" %}</label>
                                {% if resource.video and resource.video.thumbnail %}
                                <div class="current-file">
                                    <strong>{% trans "فایل فعلی:" %}</strong> {{ resource.video.thumbnail.name }}
                                </div>
                                {% endif %}
                                <input type="file" class="form-control-file" id="thumbnail" name="thumbnail" accept="image/*">
                                <small class="form-text text-muted">{% trans "فقط در صورت نیاز به تغییر انتخاب کنید" %}</small>
                            </div>
                        </div>
                        {% endif %}
                        
                        <!-- PDF Section -->
                        {% if resource.type == 'pdf' %}
                        <div class="resource-type-section" id="pdf-section">
                            <h5>{% trans "تنظیمات PDF" %}</h5>
                            <div class="form-group">
                                <label for="pdf_file">{% trans "فایل PDF" %}</label>
                                {% if resource.pdf %}
                                <div class="current-file">
                                    <strong>{% trans "فایل فعلی:" %}</strong> {{ resource.pdf.file.name }}
                                    <br><small>{% trans "حجم:" %} {{ resource.pdf.file_size|filesizeformat }}</small>
                                </div>
                                {% endif %}
                                <input type="file" class="form-control-file" id="pdf_file" name="pdf_file" accept=".pdf">
                                <small class="form-text text-muted">{% trans "فقط در صورت نیاز به تغییر انتخاب کنید. حداکثر حجم: 10 مگابایت" %}</small>
                            </div>
                        </div>
                        {% endif %}
                        
                        <!-- Image Series Section -->
                        {% if resource.type == 'image_series' %}
                        <div class="resource-type-section" id="image_series-section">
                            <h5>{% trans "تنظیمات سری تصاویر" %}</h5>
                            <div class="form-group">
                                <label>{% trans "تصاویر فعلی" %}</label>
                                {% if resource.image_series %}
                                <div class="current-images">
                                    {% for item in resource.image_series.items.all %}
                                    <div class="current-file">
                                        <strong>{% trans "تصویر" %} {{ forloop.counter }}:</strong> {{ item.image.name }}
                                        {% if item.caption %}<br><small>{% trans "توضیح:" %} {{ item.caption }}</small>{% endif %}
                                    </div>
                                    {% endfor %}
                                </div>
                                {% endif %}
                                <small class="form-text text-muted">{% trans "برای تغییر تصاویر، ابتدا محتوا را حذف کرده و دوباره ایجاد کنید." %}</small>
                            </div>
                        </div>
                        {% endif %}
                        
                        <div class="form-group">
                            <button type="submit" class="btn btn-primary">
                                <i class="fa fa-save"></i> {% trans "ذخیره تغییرات" %}
                            </button>
                            <a href="{% url 'panel-manager-resources' %}" 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="resource-info">
                        <p><strong>{% trans "نوع محتوا:" %}</strong> 
                            {% if resource.type == 'video' %}
                                {% trans "ویدیو" %}
                            {% elif resource.type == 'pdf' %}
                                {% trans "PDF" %}
                            {% elif resource.type == 'image_series' %}
                                {% trans "سری تصاویر" %}
                            {% endif %}
                        </p>
                        <p><strong>{% trans "دسته‌بندی:" %}</strong> {{ resource.category.name }}</p>
                        <p><strong>{% trans "تعداد بازدید:" %}</strong> {{ resource.view_count }}</p>
                        <p><strong>{% trans "تاریخ ایجاد:" %}</strong> {{ resource.created_at|date:"Y/m/d H:i" }}</p>
                        <p><strong>{% trans "آخرین ویرایش:" %}</strong> {{ resource.updated_at|date:"Y/m/d H:i" }}</p>
                    </div>
                    
                    <div class="resource-status">
                        <h6>{% trans "وضعیت:" %}</h6>
                        {% if resource.is_published %}
                            <span class="status-badge status-published">{% trans "منتشر شده" %}</span>
                        {% else %}
                            <span class="status-badge status-draft">{% trans "پیش‌نویس" %}</span>
                        {% endif %}
                        
                        {% if resource.is_featured %}
                            <span class="status-badge status-featured">{% 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>
{% endblock %}