{% extends 'base.html' %}
{% load static %}
{% block content %}
{% include 'profile/header.html' %}
{% load widget_tweaks %}

{% include 'profile/drawer.html' %}
<br><br><br><br>
<div class="container mt-5">
<h1 class="text-center mb-4">فرم کار آینده</h1>

<div class="card mb-4 animate__animated animate__delay-10s animate__fadeIn">
    <div class="card-body">
<form method="post" enctype="multipart/form-data">
    {% csrf_token %}

    <!-- ردیف اول - دو فیلد در کنار هم -->
    <div class="row mb-4">
        <div class="col-12 col-md-6">
            <label for="{{ form.Council.id_for_label }}" class="form-label">شورا</label>
            {{ form.Council|add_class:"form-control form-control-lg" }}
        </div>
        
        <div class="col-12 col-md-6">
            <label for="{{ form.description.id_for_label }}" class="form-label">توضیحات</label>
            {{ form.description|add_class:"form-control form-control-lg" }}
        </div>
       
    </div>

    <!-- ردیف دوم - دو فیلد در کنار هم -->
    <div class="row mb-4">
        <div class="col-12 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-12 col-md-6">
            <label for="{{ form.status.id_for_label }}" class="form-label"> وضعیت کار</label>
            {{ form.status|add_class:"form-control form-control-lg" }}
        </div>
    </div>

    <!-- ردیف سوم - یک فیلد و یک دکمه -->
    <div class="row mb-4">
        

        <div class="col-12 col-md-6">
            <label for="{{ form.persons.id_for_label }}" class="form-label">افراد انجام دهنده</label>
            {{ form.persons|add_class:"form-control form-control-lg" }}
        </div>
    </div>

    <!-- دکمه‌ها -->
    <div class="row mb-4">
        <div class="col-12 col-md-6">
            <button type="submit" class="btn btn-primary w-100">ذخیره</button>
        </div>
        <div class="col-12 col-md-6">
            <a href="/meeting/futurework/" class="btn btn-secondary w-100">بازگشت</a>
        </div>
    </div>
</div>
</div>
</div>


</form>

<script>
    $(document).ready(function () {
        // فیلد جستجو برای افراد
        $('#id_persons').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",  // کلاس‌های ریسپانسیو برای فرم
        });
    });

    // بارگذاری عنوان بر اساس شورا
    $(document).ready(function () {
        $('#id_Council').change(function () {
            var councilId = $(this).val();  // گرفتن ID شورا
            var url = "{% url 'ajax_load_titles' %}";  // آدرس Ajax

            $.ajax({
                url: url,
                data: {
                    'council_id': councilId
                },
                success: function (data) {
                    var $titleSelect = $('#id_title');
                    $titleSelect.empty();  // پاک کردن مقادیر قبلی
                    data.forEach(function (item) {
                        $titleSelect.append(
                            $('<option></option>').val(item.id).text(item.title)  // اضافه کردن مصوبات جدید
                        );
                    });
                }
            });
        });
    });



    $(document).ready(function () {
    // فیلد جستجو برای افراد
    $('#id_persons').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 "برای شروع جستجو، حداقل یک کاراکتر وارد کنید."; // پیامی برای جستجو با کاراکتر کمتر از حد مجاز
                }
            }  // کلاس‌های ریسپانسیو برای فرم
        
    });

    // فیلد جستجو برای شورا
    $('#id_Council').select2({
        ajax: {
            url: "{% url 'search_councils' %}",  // آدرس درخواست جستجو برای شوراها
            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>

<style>
    /* تغییر سایز فیلدهای select2 در صفحات موبایل */
    @media (max-width: 767px) {
        .select2-container .select2-selection--single {
            font-size: 14px !important; /* تنظیم اندازه فونت */
            height: 40px !important; /* تنظیم ارتفاع فیلد */
        }
        .select2-container--default .select2-selection--single .select2-selection__rendered {
            padding: 5px !important; /* تنظیم پدینگ */
        }
    }

    /* تغییر سایز فیلدهای select2 در صفحات دسکتاپ */
    @media (min-width: 768px) {
        .select2-container .select2-selection--single {
            font-size: 16px ; /* تنظیم اندازه فونت */
            height: 45px !important; /* تنظیم ارتفاع فیلد */
        }
        .select2-container--default .select2-selection--single .select2-selection__rendered {
            padding: 8px !important; /* تنظیم پدینگ */
        }
    }

    /* اعمال ابعاد مشخص برای فیلد select2 */
    .select2-container .select2-selection--single {
        width: 100% !important; /* اطمینان از اینکه فیلد عرض 100% بگیرد */
    }
</style>
{% endblock %}