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

{% include 'profile/drawer.html' %}
<br><br><br><br>
{% load static %}
<link rel="stylesheet" href="{% static 'admin/jquery.ui.datepicker.jalali/themes/base/jquery-ui.min.css' %}">
<script src="{% static 'admin/js/django_jalali.min.js' %}"></script>
<!-- اضافه کردن Tom Select -->
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/css/tom-select.bootstrap5.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/js/tom-select.complete.min.js"></script>

<div class="container mt-5">
    <h1 class="text-center mb-4">افزودن/ویرایش جلسه</h1>

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

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

                    <div class="col-md-6">
                        <label for="{{ form.date_run.id_for_label }}" class="form-label">تاریخ جلسه</label>
                        {{ form.date_run|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 class="col-12 mt-4">
                        <button type="submit" class="btn btn-primary w-100">ارسال</button>
                    </div>
                    <div class="col-12 mt-2">
                        <a href="meeting/council_list" class="btn btn-secondary w-100">بازگشت</a>
                    </div>
                </div>

            </form>
        </div>
    </div>
</div>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        new TomSelect("#id_persons", {
            valueField: 'id',
            labelField: 'text',
            searchField: 'text',
            load: function (query, callback) {
                if (!query.length) return callback();
                fetch("{% url 'search_persons' %}?q=" + encodeURIComponent(query))
                    .then(response => response.json())
                    .then(data => callback(data))
                    .catch(() => callback());
            },
            placeholder: "جستجو کنید...",
            allowEmptyOption: true,
            create: false
        });
    });
</script>

{% endblock %}