{% 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">
        <div class="card-body">
            <form method="POST" enctype="multipart/form-data">
                {% csrf_token %}
                <div class="row mb-8">
                    <div class="col-md-12">
                        <label for="{{ form.person.id_for_label }}" class="form-label"> فرد</label>
                        {{ form.person|add_class:"form-control form-control-lg select2" }}
                    </div>
                    
                </div>
                <button type="submit" class="btn btn-primary w-100 mt-5">ارسال</button>

                <a href="{% url 'edit_ring_members' ring.pk %}"type="button" class="btn btn-secondary w-100 mt-5">بازگشت</a>
            </form>
        </div>
    </div>
</div>

<script>
    // فعال‌سازی select2 برای فیلد person با جستجو
    $(document).ready(function() {
        $('#id_person').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>

<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 %}