{% 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;
        }
        .image-upload-section {
            border: 2px dashed #ccc;
            border-radius: 5px;
            padding: 20px;
            text-align: center;
            margin-bottom: 10px;
        }
        .image-upload-section.dragover {
            border-color: #007bff;
            background-color: #f8f9fa;
        }
        .image-preview {
            max-width: 200px;
            max-height: 150px;
            margin: 10px;
        }
    </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 "اطلاعات محتوا" %}</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" required>
                        </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="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 }}">{{ category.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label for="type">{% trans "نوع محتوا" %} <span class="text-danger">*</span></label>
                            <select class="form-control" id="type" name="type" required>
                                <option value="">{% trans "انتخاب کنید" %}</option>
                                <option value="video">{% trans "ویدیو" %}</option>
                                <option value="pdf">{% trans "PDF" %}</option>
                                <option value="image_series">{% trans "سری تصاویر" %}</option>
                            </select>
                        </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">
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="is_published" name="is_published">
                                <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">
                                <label class="custom-control-label" for="is_featured">{% trans "ویژه" %}</label>
                            </div>
                        </div>
                        
                        <!-- Video Section -->
                        <div class="resource-type-section" id="video-section" style="display: none;">
                            <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">
                                <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" min="0">
                            </div>
                            <div class="form-group">
                                <label for="thumbnail">{% trans "تصویر پیش‌نمایش" %}</label>
                                <input type="file" class="form-control-file" id="thumbnail" name="thumbnail" accept="image/*">
                            </div>
                        </div>
                        
                        <!-- PDF Section -->
                        <div class="resource-type-section" id="pdf-section" style="display: none;">
                            <h5>{% trans "تنظیمات PDF" %}</h5>
                            <div class="form-group">
                                <label for="pdf_file">{% trans "فایل PDF" %} <span class="text-danger">*</span></label>
                                <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>
                        
                        <!-- Image Series Section -->
                        <div class="resource-type-section" id="image_series-section" style="display: none;">
                            <h5>{% trans "تنظیمات سری تصاویر" %}</h5>
                            <div class="form-group">
                                <label>{% trans "تصاویر" %} <span class="text-danger">*</span></label>
                                <div class="image-upload-section" id="image-upload-area">
                                    <i class="fa fa-cloud-upload fa-3x text-muted"></i>
                                    <p class="mt-2">{% trans "تصاویر را اینجا بکشید یا کلیک کنید تا انتخاب کنید" %}</p>
                                    <input type="file" id="images" name="images" multiple accept="image/*" style="display: none;">
                                </div>
                                <div id="image-preview-container"></div>
                                <small class="form-text text-muted">{% trans "می‌توانید چندین تصویر انتخاب کنید" %}</small>
                            </div>
                        </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-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="alert alert-info">
                        <h6>{% trans "نکات مهم:" %}</h6>
                        <ul class="mb-0">
                            <li>{% trans "عنوان محتوا باید منحصر به فرد باشد." %}</li>
                            <li>{% trans "نوع محتوا پس از انتخاب قابل تغییر نیست." %}</li>
                            <li>{% trans "فایل‌های PDF حداکثر 10 مگابایت مجاز هستند." %}</li>
                            <li>{% trans "تصاویر باید در فرمت‌های JPG، PNG یا GIF باشند." %}</li>
                            <li>{% trans "محتواهای منتشر شده برای کاربران قابل مشاهده هستند." %}</li>
                        </ul>
                    </div>
                </div>
                
                <div class="card-box">
                    <h4 class="card-title">{% trans "انواع محتوا" %}</h4>
                    <div class="resource-types-info">
                        <div class="mb-3">
                            <h6><i class="fa fa-video-camera text-danger"></i> {% trans "ویدیو" %}</h6>
                            <small class="text-muted">{% trans "لینک ویدیو از YouTube یا سایر پلتفرم‌ها" %}</small>
                        </div>
                        <div class="mb-3">
                            <h6><i class="fa fa-file-pdf-o text-primary"></i> {% trans "PDF" %}</h6>
                            <small class="text-muted">{% trans "فایل PDF برای دانلود یا مشاهده" %}</small>
                        </div>
                        <div class="mb-3">
                            <h6><i class="fa fa-images text-success"></i> {% trans "سری تصاویر" %}</h6>
                            <small class="text-muted">{% trans "مجموعه‌ای از تصاویر مرتبط" %}</small>
                        </div>
                    </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>
        $(document).ready(function() {
            // Show/hide resource type sections based on selection
            $('#type').change(function() {
                var selectedType = $(this).val();
                
                // Hide all sections
                $('.resource-type-section').hide();
                
                // Show selected section
                if (selectedType === 'video') {
                    $('#video-section').show();
                } else if (selectedType === 'pdf') {
                    $('#pdf-section').show();
                } else if (selectedType === 'image_series') {
                    $('#image_series-section').show();
                }
            });
            
            // Image upload handling
            $('#image-upload-area').click(function() {
                $('#images').click();
            });
            
            $('#images').change(function() {
                var files = this.files;
                var container = $('#image-preview-container');
                container.empty();
                
                for (var i = 0; i < files.length; i++) {
                    var file = files[i];
                    var reader = new FileReader();
                    
                    reader.onload = function(e) {
                        var img = $('<img>').attr('src', e.target.result).addClass('image-preview');
                        container.append(img);
                    };
                    
                    reader.readAsDataURL(file);
                }
            });
            
            // Drag and drop functionality
            $('#image-upload-area').on('dragover', function(e) {
                e.preventDefault();
                $(this).addClass('dragover');
            });
            
            $('#image-upload-area').on('dragleave', function(e) {
                e.preventDefault();
                $(this).removeClass('dragover');
            });
            
            $('#image-upload-area').on('drop', function(e) {
                e.preventDefault();
                $(this).removeClass('dragover');
                
                var files = e.originalEvent.dataTransfer.files;
                $('#images')[0].files = files;
                $('#images').trigger('change');
            });
        });
    </script>
{% endblock %}