{% load static %}
{% load widget_tweaks %}

{% block content %}
{% include 'profile/header.html' %}
{% include 'profile/drawer.html' %}


<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> 
 
<div class="container mt-5">
    <h1 class="text-center mb-4 text-primary">افزودن/ویرایش مقاله</h1>

    <div class="card shadow-lg border-0">
        <div class="card-body p-5">
            <!-- فرم ایجاد/ویرایش مقاله -->
            <form method="POST" enctype="multipart/form-data">
                {% csrf_token %}

                <!-- نویسنده و دسته‌بندی -->
                <div class="row mb-4">
                    <div class="col-12 col-md-6">
                        <label for="{{ form.author.id_for_label }}" class="form-label">نویسنده</label>
                        {{ form.author|add_class:"form-control form-control-lg" }}
                    </div>
                
                
                    
                    
           
                    <div class="col-md-6">
                        <label for="{{ form.category.id_for_label }}" class="form-label">دسته‌بندی</label>
                        <div class="input-group">
                            {{ form.category|add_class:"form-control form-control-lg" }}
                            <button type="button" class="btn btn-success ms-2" data-bs-toggle="modal" data-bs-target="#categoryModal">
                                <i class="bi bi-plus-circle"></i> افزودن
                            </button>
                            <button type="button" class="btn btn-warning ms-2" onclick="window.location.href='{% url 'category_management' %}'">
                                <i class="bi bi-pencil-square"></i> ویرایش
                            </button>
                        </div>
                    </div>
                </div>

                <!-- عنوان و محتوا -->
                <div class="row mb-4">
                    <div class="col-md-6">
                        <label for="{{ form.title.id_for_label }}" class="form-label">عنوان</label>
                        {{ form.title|add_class:"form-control form-control-lg" }}
                    </div>
                    <div class="col-md-6">
                        <label for="{{ form.content.id_for_label }}" class="form-label">محتوا </label>
                        {{ form.content|add_class:"form-control form-control-lg" }}
                    </div>
                </div>

                <!-- پوستر و تاریخ انتشار -->
                <div class="row mb-4">
                    <div class="col-md-6">
                        <label for="{{ form.poster.id_for_label }}" class="form-label">پوستر</label>
                        {{ form.poster|add_class:"form-control form-control-lg" }}
                    </div>
        
                </div>

                <!-- لایک و بازدید -->
               

                <!-- دکمه ارسال -->
                <button type="submit" class="btn btn-primary w-100 mt-4 py-3" name="submit_post">
                    <i class="bi bi-send"></i> ارسال مقاله
                </button>
                
                <a href="{% url 'post-list' %}" class="btn btn-secondary w-100 mt-3 py-3">
                    <i class="bi bi-arrow-left"></i> بازگشت
                </a>
            </form>
        </div>
    </div>
</div>

<!-- Modal افزودن دسته‌بندی -->
<div class="modal fade" id="categoryModal" tabindex="-1" aria-labelledby="categoryModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title" id="categoryModalLabel">افزودن دسته‌بندی جدید</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="بستن"></button>
            </div>
            <div class="modal-body">
                <form method="POST" action="{% url 'create-category-ajax' %}" id="categoryForm">
                    {% csrf_token %}
                    {{ category_form.as_p }}
                    <button type="submit" class="btn btn-primary w-100 mt-3" name="submit_category">
                        <i class="bi bi-save"></i> افزودن
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function () {
         // فیلد جستجو برای افراد
         $('#id_author').select2({
             ajax: {
                 url: "{% url 'search_persons' %}",
                 dataType: 'json',
                 delay: 250,
                 data: function (params) {
                     return {
                         q: params.term  // ارسال عبارت جستجو به سرور
                     };
                 },
                 processResults: function (data) {
                     return {
                         results: data  // داده‌های جستجو شده را به صورت نتایج باز می‌گرداند
                     };
                 },
                 cache: true
             },
             minimumInputLength: 1,  // حداقل تعداد کاراکتر برای شروع جستجو
             placeholder: "جستجو کنید...",
             allowClear: true,
             width: '100%',  // تنظیم عرض فیلد به 100% برای ریسپانسیو شدن
             containerCssClass: "form-control-lg form-control-sm",
             language: {
                 noResults: function() {
                     return "درخواست مورد نظر وجود ندارد"; // پیام برای زمانی که جستجو نتایجی ندارد
                 },
                 inputTooShort: function () {
                     return "برای شروع جستجو، حداقل یک کاراکتر وارد کنید."; // پیامی برای جستجو با کاراکتر کمتر از حد مجاز
                 }
             }  // کلاس‌های ریسپانسیو برای فرم
         
         });
     });
 
 
 
 
 
 
 
 
 </script>
 <script>
    // بررسی حجم فایل تصویری در فرم
    document.addEventListener("DOMContentLoaded", function () {
        const posterInput = document.querySelector('#id_poster');
        const form = document.querySelector('form'); // فرم اصلی

        // بررسی تغییرات فایل انتخاب شده
        posterInput.addEventListener('change', function () {
            const file = posterInput.files[0];
            const maxSize = 1 * 1024 * 1024  

            // اگر فایل وجود داشته باشد و حجم آن بیشتر از حد مجاز باشد
            if (file && file.size > maxSize) {
                alert('حجم تصویر نباید بیشتر از 1 مگابایت باشد.');
                posterInput.value = ''; // پاک کردن فایل انتخاب شده
            }
        });

        // قبل از ارسال فرم، مجدد حجم فایل را بررسی می‌کنیم
        form.addEventListener('submit', function (e) {
            const file = posterInput.files[0];
            if (file && file.size > maxSize) {
                e.preventDefault();  // جلوگیری از ارسال فرم
                alert('حجم تصویر نباید بیشتر از 100 کیلوبایت باشد.');
            }
        });
    });
</script>

<style>
    /* استایل برای ورودی جستجو */
    #searchInput {
        width: 100%;
        padding: 10px;
        border-radius: 5px;
        border: 1px solid #ccc;
        font-size: 16px;
        display: inline-block;
        position: relative;
    }

    /* استایل برای نمایش نتایج جستجو */
    #searchResults {
        margin-top: 5px;
        border: 1px solid #ddd;
        max-height: 200px;
        overflow-y: auto;
        border-radius: 5px;
        background-color: #fff;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        position: absolute;
        width: calc(100% - 20px);
        z-index: 999;
    }

    /* استایل برای هر آیتم نتیجه */
    .result-item {
        padding: 10px;
        cursor: pointer;
        border-bottom: 1px solid #eee;
    }

    /* تغییر رنگ پس‌زمینه هنگام hover */
    .result-item:hover {
        background-color: #f5f5f5;
    }

    /* استایل برای حذف انتخاب */
    .selected-item {
        display: inline-flex;
        align-items: center;
        padding: 5px;
        background-color: #d1e7fd;
        border-radius: 5px;
        margin-right: 5px;
        margin-top: 5px;
        font-size: 14px;
    }

    .selected-item .close {
        font-size: 16px;
        margin-left: 5px;
        cursor: pointer;
        color: #888;
    }

    /* زمانی که موس روی دکمه ضربدر است */
    .selected-item .close:hover {
        color: #ff0000;
    }
</style>



{% endblock %}