{% extends 'orientation/base.html' %}
{% load i18n %}
{% load humanize %}
{% load custom_filters %}

{% block details %}
    <div class="panel panel-primary">
        <div class="panel-body" style="min-height: 100px;">
            <table class="table table-striped table-hover">
                <thead>
                    <tr>
                        <th>{% translate "Name" %}</th>
                        <th>{% translate "Created Date" %}</th>
                        <th>{% translate "Status" %}</th>
                        <th>{% translate "Actions" %}</th>
                    </tr>
                </thead>
                <tbody>
                    {% if members %}
                        {% for member in members %}
                            <tr class="{% if member.member_talked_state == member.MembershipStates.TALKED %}table-success{% endif %}" id="member-{{ member.id }}">
                                <td>{{ member.member_app.user.username|replace_underscore_with_space }}</td>
                                <td>{{ member.created_date|date:"M d, Y H:i" }}</td>
                                <td>
                                    {% if member.member_talked_state == member.MembershipStates.TALKED %}
                                        {% translate "Talked To" %}
                                    {% else %}
                                        {% translate "Not Talked To" %}
                                    {% endif %}
                                </td>
                                <td>
                                    {% if member.member_talked_state != member.MembershipStates.TALKED %}
                                        <button class="btn btn-success btn-mark-talked" data-id="{{ member.id }}">
                                            {% translate "Mark as Talked" %}
                                        </button>
                                    {% endif %}
                                </td>
                            </tr>
                        {% endfor %}
                    {% else %}
                    <tr>
                        <td colspan="4">{% translate "No members to show." %}</td>
                    </tr>
                    {% endif %}
                </tbody>
            </table>
        </div>
    </div>
{% endblock %}

{% block extra_javascript %}
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            document.querySelectorAll('.btn-mark-talked').forEach(button => {
                button.addEventListener('click', function () {
                    const memberId = this.dataset.id;
                    fetch("{% url 'orientation:mark_talked' %}", {
                        method: 'POST',
                        headers: {
                            'X-CSRFToken': '{{ csrf_token }}',
                            'Content-Type': 'application/x-www-form-urlencoded',
                        },
                        body: new URLSearchParams({ member_id: memberId })
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            const row = document.getElementById(`member-${memberId}`);
                            row.classList.add('table-success');
                            row.querySelector('td:nth-child(3)').innerText = '{% translate "Talked To" %}';
                            const buttonCell = row.querySelector('td:nth-child(4)');
                            buttonCell.innerHTML = '';
                        } else {
                            alert(data.error || '{% translate "Failed to update member." %}');
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        alert('{% translate "An error occurred." %}');
                    });
                });
            });
        });
    </script>
{% endblock %}

{% block extra_css %}
<style>
    .table-success {
        background-color: #d4edda !important;
    }

    td {
        align-content: center;
    }
</style>
{% endblock %}
