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

<br />
<br />
<br />
<br />

<style>
    .table td, .table th {
        vertical-align: middle !important; /* تراز عمودی وسط */
        text-align: center; /* تراز افقی وسط */
    }

    .search-box {
        border: 2px solid #ddd;
        border-radius: 8px;
        padding: 15px;
        background-color: #f8f9fa;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        margin-bottom: 30px;
    }

    .search-box input,
    .search-box select {
        width: 100%;
        padding: 10px;
        margin: 5px 0;
        border: 1px solid #ddd;
        border-radius: 5px;
        font-size: 16px;
    }

    .search-box button {
        padding: 10px 15px;
        border: none;
        background-color: #007bff;
        color: white;
        border-radius: 5px;
        cursor: pointer;
    }

    .search-box button:hover {
        background-color: #0056b3;
    }
</style>

<div class="container mt-5">
    <h1 class="text-center mb-4">لیست کاربران</h1>
    {% include 'profile/message.html' %}

    <!-- فرم جستجو -->
    <form method="GET" class="mb-4">
        <div class="search-box">
            <div class="row g-2">
                <div class="col-md-6">
                    <label for="search" class="form-label">جستجو:</label>
                    <input type="text" name="search" value="{% if search_query %}{{ search_query }}{% else %}{{ '' }}{% endif %}" placeholder="جستجو" class="form-control">
                </div>
                <div class="col-md-4">
                    <label for="searchField" class="form-label">فیلد جستجو:</label>
                    <select name="search_field" class="form-control">
                        <option value="first_name" {% if search_field == 'first_name' %}selected{% endif %}>نام</option>
                        <option value="last_name" {% if search_field == 'last_name' %}selected{% endif %}>نام خانوادگی</option>
                        <option value="national_code" {% if search_field == 'national_code' %}selected{% endif %}>کد ملی</option>
                        <option value="birthday" {% if search_field == 'birthday' %}selected{% endif %}>تاریخ تولد</option>
                        <option value="sardoshi_categories" {% if search_field == 'sardoshi_categories' %}selected{% endif %}>سردوشی</option>
                        <option value="ozviat_categories" {% if search_field == 'ozviat_categories' %}selected{% endif %}>نوع عضویت</option>
                        <option value="tarbyat_categories" {% if search_field == 'tarbyat_categories' %}selected{% endif %}>رده تربیتی</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <button type="submit" class="w-100 mt-9">جستجو</button>
                </div>
            </div>
        </div>
    </form>

    <!-- جدول کاربران -->
    <form method="GET" action="{% url 'download_excel' %}" onsubmit="return validateSelection();">
        <div class="d-flex justify-content-between mb-4">
            <a href="add_user" class="btn btn-warning animate__animated animate__bounce" style="height: 38px;">اضافه کردن افراد</a>
            <button type="submit" class="btn btn-success animate__animated animate__bounce" style="height: 38px;">دانلود اکسل</button>
        </div>
    
        <!-- نمایش پیام هشدار اگر فردی انتخاب نشده باشد -->
        <div id="noSelectionAlert" class="alert alert-danger mt-3 d-none" role="alert">
            لطفاً حداقل یک فرد را انتخاب کنید.
        </div>
    
        <div class="table-responsive text-center animate__animated animate__delay-0.1s animate__fadeIn">
            <table class="table table-striped table-bordered">
                <thead class="table-dark">
                    <tr class="text-center align-middle">
                        <th><input type="checkbox" id="selectAll"></th>
                        <th>شماره</th>
                        <th>عکس</th>
                        <th>نام</th>
                        <th>نام خانوادگی</th>
                        <th>کد ملی</th>
                        <th>تاریخ تولد</th>
                        <th>نوع عضویت</th>
                        <th>رده تربیتی</th>
                        <th>سردوشی</th>
                        <th>عملیات</th>
                    </tr>
                </thead>
                <tbody>
                    {% if people_data %}
                        {% for person in people_data %}
                            <tr class="text-center align-middle">
                                <td><input type="checkbox" name="users" value="{{ person.id }}"></td>
                                <td>{{ forloop.counter|add:page_obj.start_index|add:-1 }}</td>
                                <td>
                                    {% if person.pic %}
                                        <img src="{{ person.pic.url }}" alt="تصویر" width="60" height="60" class="rounded-circle"/>
                                    {% else %}
                                        <img src="{% static 'media\users\default_profile.png' %}" alt="بدون تصویر" width="60" height="60" class="rounded-circle"/>
                                    {% endif %}
                                </td>
                                <td>{{ person.first_name }}</td>
                                <td>{{ person.last_name }}</td>
                                <td>{{ person.national_code }}</td>
                                <td>{{ person.birthday }}</td>
                                <td>{{ person.ozviat_categories }}</td>
                                <td>{{ person.tarbyat_categories }}</td>
                                <td>{{ person.sardoshi_categories }}</td>
                                <td>
                                    <div class="d-flex justify-content-center">
                                        <a href="{% url 'view' person.id %}" class="text-primary mx-1" title="مشاهده">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                        {% if not roles_status.حفاظت%}
                                        <a href="{% url 'update' person.id %}" class="text-warning mx-1" title="ویرایش">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                        <a href="{% url 'delete' person.id %}" class="text-danger mx-1" title="حذف">
                                            <i class="fas fa-trash"></i>
                                        </a>
                                        {%endif%}
                                    </div>
                                </td>
                            </tr>
                        {% endfor %}
                    {% else %}
                        <tr>
                            <td colspan="10" class="text-center text-danger align-middle">هیچ نتیجه‌ای برای جستجو یافت نشد.</td>
                        </tr>
                    {% endif %}
                </tbody>
            </table>
        </div>
    </form>
</div>

<!-- فرم جستجو برای تعداد نمایش در هر صفحه -->
<div class="d-flex justify-content-center">
    <form method="GET" class="mb-4">
        <div class="search-box">
            <div class="row g-2 align-items-center">
                <div class="col-auto">
                    <label for="per_page" class="form-label">تعداد نمایش در هر صفحه:</label>
                </div>
                <div class="col-auto">
                    <select name="per_page" class="form-control" onchange="this.form.submit()">
                        <option value="10" {% if per_page == "10" %}selected{% endif %}>10</option>
                        <option value="25" {% if per_page == "25" %}selected{% endif %}>25</option>
                        <option value="50" {% if per_page == "50" %}selected{% endif %}>50</option>
                        <option value="100" {% if per_page == "100" %}selected{% endif %}>100</option>
                        <option value="all" {% if per_page == "all" %}selected{% endif %}>نمایش همه</option>
                    </select>
                </div>
            </div>
        </div>
    </form>
</div>

<!-- صفحه‌بندی -->
<div class="pagination-container">
    <ul class="pagination">
        {% if page_obj.has_previous %}
            <li class="page-item">
                <a class="page-link" href="users/?page=1&per_page={{ per_page }}{% if search_query %}&search={{ search_query }}&search_field={{ search_field }}{% endif %}" aria-label="اولین صفحه">«</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="users/?page={{ page_obj.previous_page_number }}&per_page={{ per_page }}{% if search_query %}&search={{ search_query }}&search_field={{ search_field }}{% endif %}" aria-label="صفحه قبلی">قبلی</a>
            </li>
        {% endif %}

        <li class="page-item disabled">
            <span class="page-link">صفحه {{ page_obj.number }} از {{ page_obj.paginator.num_pages }}</span>
        </li>

        {% if page_obj.has_next %}
            <li class="page-item">
                <a class="page-link" href="users/?page={{ page_obj.next_page_number }}&per_page={{ per_page }}{% if search_query %}&search={{ search_query }}&search_field={{ search_field }}{% endif %}" aria-label="صفحه بعدی">بعدی</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="users/?page={{ page_obj.paginator.num_pages }}&per_page={{ per_page }}{% if search_query %}&search={{ search_query }}&search_field={{ search_field }}{% endif %}" aria-label="آخرین صفحه">»</a>
            </li>
        {% endif %}
    </ul>
</div>

<!-- اسکریپت‌های جاوااسکریپت -->
<script>
    document.getElementById("selectAll").addEventListener("click", function() {
        let checkboxes = document.querySelectorAll('input[name="users"]');
        checkboxes.forEach(checkbox => {
            checkbox.checked = this.checked;
        });
    });

    function validateSelection() {
        const userIds = document.querySelectorAll('input[name="users"]:checked');
        const alertElement = document.getElementById('noSelectionAlert');
        
        // اگر هیچ فردی انتخاب نشده باشد، فرم ارسال نمی‌شود و هشدار نمایش داده می‌شود.
        if (userIds.length === 0) {
            alertElement.classList.remove('d-none'); // نمایش پیام هشدار
            return false;  // جلوگیری از ارسال فرم
        } else {
            alertElement.classList.add('d-none'); // مخفی کردن پیام هشدار
            return true; // ارسال فرم
        }
    }
</script>

<style>
    .pagination .page-item .page-link {
        border-radius: 10px;
        margin: 0 5px;
        color: #007bff;
        transition: all 0.3s ease-in-out;
    }

    .pagination .page-item .page-link:hover {
        background-color: #007bff;
        color: white;
    }

    .pagination .page-item.active .page-link {
        background-color: #007bff;
        color: white;
        border: none;
    }

    .pagination .page-item.disabled .page-link {
        color: #6c757d;
        background-color: #f8f9fa;
        border-radius: 10px;
    }

    .pagination-container {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
    }
</style>

{% endblock %}