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

<br />
<br />

<br />
<br />
<style>
    @media print {
        .no-print {
            display: none !important; /* مخفی کردن دکمه یا المان با این کلاس */
        }
    }
</style>
<div class="container mt-4">
    <h2 class="mb-4 text-center ">حلقه‌ها و اعضای آنها</h2>
    {%include 'profile/message.html'%}

    <div class="d-flex justify-content-between mb-4">
        <a href="{% url 'ring_createe' %}" class="btn btn-success  no-print">افزودن حلقه جدید</a>

        <div class="btn-group mr-2 ml-2" role="group">
        <button type="button"  id="export-excel" class="btn btn-primary  no-print">خروجی Excel</button>
        <button type="button"  class="btn btn-warning  no-print" onclick="window.print()">پرینت صفحه</button>
        </div>

    </div>

    <div class="row">
        {% for ring in rings %}
        <div class="col-md-4 mb-4">
            <div class="card shadow-sm rounded-lg h-100">
                <div class="card-header bg-dark text-white text-center rounded-top">
                    <h5 class="card-title mb-0" style="font-size: 1rem;">{{ ring.name }}</h5> <!-- هدر کوچکتر -->
                </div>
                <div class="card-body d-flex flex-column">
                    <h6 class="card-subtitle mb-3 text-muted">سرگروه: {{ ring.major }}</h6>
                    <p class="card-text mb-3">اعضا:</p>
                    <ul class="list-unstyled">
                        {% for member in ring.members.all %}
                        <li class="d-flex align-items-center mb-2">
                            <span class="badge badge-pill badge-primary me-2"></span>
                            <!-- اضافه کردن نقطه در کنار هر عضو -->
                            |{{ member.person.user.first_name }}-{{ member.person.user.last_name }}|
                        </li>
                        {% empty %}
                        <li>عضوی ندارد.</li>
                        {% endfor %}
                    </ul>
                </div>
                <div class="card-footer bg-light text-center rounded-bottom">
                   
                    <a href="{% url 'edit_ring_members' ring.pk %}" class="text-warning mx-2" title="ویرایش">
                        <i class="fas fa-edit"></i>
                    </a>
                    <a href="{% url 'ring_delete' ring.pk %}" class="text-danger mx-2" title="حذف">
                        <i class="fas fa-trash"></i>
                    </a>
                </div>
            </div>
        </div>
        {% empty %}
        <div class="col-12">
            <div class="alert alert-warning text-center">حلقه‌ای یافت نشد.</div>
        </div>
        {% endfor %}
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js"></script>
<script>
    document.getElementById("export-excel").addEventListener("click", function () {
        const workbook = XLSX.utils.book_new(); // ایجاد یک ورک‌بوک جدید

        // جمع آوری تمامی داده‌ها از حلقه‌ها
        const membersData = [
            ["نام حلقه", "سرگروه", "نام عضو", "نام خانوادگی"]
        ];

        {% for ring in rings %}
        {% for member in ring.members.all %}
        membersData.push([
            "{{ ring.name }}", // نام حلقه
            "{{ ring.major }}", // سرگروه
            "{{ member.person.user.first_name }}", // نام عضو
            "{{ member.person.user.last_name }}" // نام خانوادگی عضو
        ]);
        {% empty %}
        // اگر حلقه عضو ندارد، اطلاعات آن را به صورت خالی می‌ریزیم
        membersData.push([
            "{{ ring.name }}", // نام حلقه
            "{{ ring.major }}", // سرگروه
            "عضوی ندارد", // نام عضو
            "" // نام خانوادگی عضو
        ]);
        {% endfor %}
        {% endfor %}

        // ایجاد شیت از داده‌ها
        const sheet = XLSX.utils.aoa_to_sheet(membersData);

        // افزودن شیت به ورک‌بوک
        XLSX.utils.book_append_sheet(workbook, sheet, "Rings and Members");

        // ذخیره فایل Excel
        XLSX.writeFile(workbook, "RingsAndMembers.xlsx");
    });
</script>

{% endblock %}