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

<br />
<br />


<br />
<br />  

<div class="container mt-5">
    <h2 class="text-center mb-4">ایجاد حلقه جدید</h2>
    <div class="card shadow-sm border-0 rounded">
        <div class="card-body p-5">
            <form method="post"> 
                {% csrf_token %}

                <!-- ردیف فیلدها -->
                <div class="row mb-4">
                    <!-- فیلد نام حلقه -->
                    <div class="col-md-4">
                        <label for="{{ form.name.id_for_label }}" class="form-label">نام حلقه</label>
                        {{ form.name|add_class:"form-control form-control-lg" }}
                    </div>

                    <!-- فیلد سرگروه -->
                    <div class="col-md-4">
                        <label for="{{ form.person.id_for_label }}" class="form-label">سرگروه</label>
                        {{ form.major|add_class:"form-control form-control-lg select2" }}
                    </div>
                   
                    <!-- فیلد نوع حلقه -->
                    <div class="col-md-4">
                        <label for="{{ form.typee.id_for_label }}" class="form-label">نوع حلقه</label>
                        {{ form.typee|add_class:"form-control form-control-lg" }}
                    </div>
                </div>

                <!-- دکمه‌های ذخیره و بازگشت -->
                <div class="d-flex justify-content-between mt-4">
                    <button type="submit" class="btn btn-success btn-lg px-5">ذخیره</button>
                    <a href="{% url 'rings_with_members' %}" class="btn btn-outline-secondary btn-lg px-5">بازگشت</a>
                </div>
            </form>
        </div>
    </div>
</div>
   
<script>
    $(document).ready(function () {
        // فیلد جستجو برای فرد
        $('#id_major').select2({
            ajax: {
                url: "{% url 'search_p' %}",
                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 %}