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

<br />
<br />
<div class="container mt-4">
    <h2 class="mb-4 text-center">اعضای حلقه</h2>
    
    <form method="POST" action="{% url 'export_selected_members' %}">
        {% csrf_token %}
        <div class="table-responsive">
            <table class="table table-bordered bg-light text-center">
                <thead class="bg-dark text-white">
                    <tr>
                        <th><input type="checkbox" id="select-all"></th>
                        <th>#</th>
                        <th>عکس</th>
                        <th>نام</th>
                        <th>نام خانوادگی</th>
                        <th>تاریخ تولد</th>
                        <th>شماره موبایل</th>
                        <th>مشاهده اطلاعات و دادن کارنامه</th>
                    </tr>
                </thead>
                <tbody>
                    {% for member in members %}
                    <tr>
                        <td class="align-middle">
                            <input type="checkbox" name="selected_members" value="{{ member.id }}">
                        </td>
                        <td class="align-middle">{{ forloop.counter }}</td>
                        <td class="align-middle">
                            {% if member.private_info.pic %}
                                <img src="{{ member.private_info.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 class="align-middle">{{ member.person.user.first_name }}</td>
                        <td class="align-middle">{{ member.person.user.last_name }}</td>
                        <td class="align-middle">
                            {{ member.private_info.birthday|default:"ثبت نشده" }}
                        </td>
                        <td class="align-middle">
                            {{ member.private_info.phone|default:"ثبت نشده" }}
                        </td>
                        <td class="align-middle">
                            <div class="d-flex justify-content-center">
                                {% if member.person.reportcards.exists %}
                                    <a href="{% url 'reportcard_detail' member.person.reportcards.first.id %}" title="مشاهده کارنامه">
                                        <i class="fas fa-plus-circle fa-lg text-success"></i>
                                    </a>
                                {% else %}
                                    <a href="{% url 'reportcard_create' %}" title="ایجاد کارنامه جدید">
                                        <i class="fas fa-plus-circle fa-lg text-primary"></i>
                                    </a>
                                {% endif %}
                                <a href="{% url '1' member.person.id %}" class="text-primary mx-2" title="مشاهده">
                                    <i class="fas fa-eye"></i>
                                </a>
                            </div>
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="8" class="text-center">عضوی یافت نشد.</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        <button type="submit" class="btn btn-success mt-3">دانلود اکسل</button>
    </form>
</div>

<script>
    document.getElementById("select-all")?.addEventListener("click", function() {
        document.querySelectorAll("input[name='selected_members']").forEach(checkbox => {
            checkbox.checked = this.checked;
        });
    });
</script>

{% endblock %}