{% extends 'base.html' %}

{% block content %}
<div class="container mt-5">
    <h2 class="mb-4 text-center">ویرایش اعضای حلقه: {{ ring.name }}</h2>
    {% include 'profile/message.html' %}

    <!-- جدول اعضای حلقه -->
    <table class="table table-bordered table-hover">
        <thead class="thead-dark">
            <tr>
                <th>نام عضو</th>
                <th class="text-center">عملیات</th>
            </tr>
        </thead>
        <tbody>
            {% for member in members %}
            <tr>
                <td>{{ member.person.user.first_name }} {{ member.person.user.last_name }}</td>
                <td class="text-center">
                    <!-- دکمه حذف -->
                    <button type="button" class="btn btn-danger btn-sm" onclick="showConfirmDelete({{ member.pk }})">
                        حذف
                    </button>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>

    <a href="{% url 'add_member_to_ring' ring.pk %}" class="btn btn-primary btn-lg mb-4">اضافه کردن عضو جدید</a>
    <a href="{% url 'rings_with_members' %}" class="btn btn-outline-success btn-lg mb-4">ذخیره</a>

    <!-- Modal تایید حذف -->
    <div id="confirmDeleteModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="confirmDeleteModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="confirmDeleteModalLabel">آیا مطمئن هستید که می‌خواهید عضو را حذف کنید؟</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>اگر حذف را تایید کنید، عضو به طور دائم از حلقه حذف می‌شود.</p>
                </div>
                <div class="modal-footer">
                    <form method="post" id="confirmDeleteForm" action="">
                        {% csrf_token %}
                        <input type="hidden" name="delete_member" id="memberPkToDelete">
                        <button type="submit" class="btn btn-danger">حذف</button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">لغو</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

</div>

<script>
    function showConfirmDelete(memberPk) {
        // تنظیم فرم حذف برای ارسال به صورت پنهان
        document.getElementById('confirmDeleteForm').action = "{% url 'edit_ring_members' ring.pk %}";
        document.getElementById('memberPkToDelete').value = memberPk;
        
        // نمایش modal برای تایید حذف
        $('#confirmDeleteModal').modal('show');
    }
</script>

{% endblock %}