{% extends "base.html" %}

{% block content %}
<div class="container py-5">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h2">Volunteer Directory</h1>
        <div class="d-flex gap-2">
            <a href="{% url 'volunteer_add' %}" class="btn btn-primary btn-sm">+ Add New Volunteer</a>
        </div>
    </div>

    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body p-4">
            <form action="." method="GET" class="row g-3">
                <div class="col-md-6">
                    <input type="text" name="q" class="form-control" placeholder="Search by name or email..." value="{{ query|default:'' }}">
                </div>
                <div class="col-md-4">
                    <select name="interest" class="form-select">
                        <option value="">All Interests</option>
                        {% for interest in interests %}
                        <option value="{{ interest.id }}" {% if selected_interest == interest.id|stringformat:"s" %}selected{% endif %}>
                            {{ interest.name }}
                        </option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-2">
                    <button type="submit" class="btn btn-primary w-100">Filter</button>
                </div>
            </form>
        </div>
    </div>

    <div class="card border-0 shadow-sm">
        <div class="card-header bg-white py-3 border-0 d-flex justify-content-between align-items-center">
            <h5 class="mb-0 fw-bold">Volunteers ({{ volunteers.paginator.count }})</h5>
            <div id="bulk-actions" class="d-none">
                <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#smsModal">
                    <i class="bi bi-chat-left-text me-1"></i> Send Bulk SMS
                </button>
            </div>
        </div>
        <div class="table-responsive">
            <table class="table table-hover mb-0 align-middle">
                <thead class="bg-light">
                    <tr>
                        <th class="ps-4" style="width: 40px;">
                            <input type="checkbox" class="form-check-input" id="select-all">
                        </th>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Phone</th>
                        <th class="pe-4">Interests</th>
                    </tr>
                </thead>
                <tbody>
                    {% for volunteer in volunteers %}
                    <tr>
                        <td class="ps-4">
                            <input type="checkbox" name="selected_volunteers" value="{{ volunteer.id }}" class="form-check-input volunteer-checkbox">
                        </td>
                        <td>
                            <a href="{% url 'volunteer_detail' volunteer.id %}" class="fw-semibold text-primary text-decoration-none d-block">
                                {{ volunteer.first_name }} {{ volunteer.last_name }}
                            </a>
                        </td>
                        <td>{{ volunteer.email }}</td>
                        <td>{{ volunteer.phone|default:"-" }}</td>
                        <td class="pe-4">
                            {% for interest in volunteer.interests.all %}
                                <span class="badge bg-info-subtle text-info border border-info-subtle">{{ interest.name }}</span>
                            {% empty %}
                                <span class="text-muted small">No interests listed</span>
                            {% endfor %}
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="5" class="text-center py-5 text-muted">
                            <p class="mb-0">No volunteers found matching your search.</p>
                            <a href="{% url 'volunteer_add' %}" class="btn btn-link">Add the first volunteer</a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        
        {% if volunteers.paginator.num_pages > 1 %}
        <div class="card-footer bg-white border-0 py-3">
            <nav aria-label="Page navigation">
                <ul class="pagination justify-content-center mb-0">
                    {% if volunteers.has_previous %}
                    <li class="page-item">
                        <a class="page-link" href="?page=1{% if query %}&q={{ query }}{% endif %}{% if selected_interest %}&interest={{ selected_interest }}{% endif %}" aria-label="First">
                            <span aria-hidden="true">&laquo;&laquo;</span>
                        </a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="?page={{ volunteers.previous_page_number }}{% if query %}&q={{ query }}{% endif %}{% if selected_interest %}&interest={{ selected_interest }}{% endif %}" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    {% endif %}

                    <li class="page-item active"><span class="page-link">{{ volunteers.number }} of {{ volunteers.paginator.num_pages }}</span></li>

                    {% if volunteers.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ volunteers.next_page_number }}{% if query %}&q={{ query }}{% endif %}{% if selected_interest %}&interest={{ selected_interest }}{% endif %}" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="?page={{ volunteers.paginator.num_pages }}{% if query %}&q={{ query }}{% endif %}{% if selected_interest %}&interest={{ selected_interest }}{% endif %}" aria-label="Last">
                            <span aria-hidden="true">&raquo;&raquo;</span>
                        </a>
                    </li>
                    {% endif %}
                </ul>
            </nav>
        </div>
        {% endif %}
    </div>
</div>

<!-- SMS Modal -->
<div class="modal fade" id="smsModal" tabindex="-1" aria-labelledby="smsModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title fw-bold" id="smsModalLabel">Send Bulk SMS</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{% url 'volunteer_bulk_send_sms' %}" method="POST" id="sms-form">
                {% csrf_token %}
                <div class="modal-body py-4">
                    <p class="small text-muted mb-3">Messages will be sent to selected volunteers with a phone number on file.</p>
                    <div id="selected-volunteers-container">
                        <!-- Volunteer IDs will be injected here -->
                    </div>
                    <div class="mb-0">
                        <label for="message_body" class="form-label small fw-bold text-muted">Message Body</label>
                        <textarea class="form-control" id="message_body" name="message_body" rows="4" required placeholder="Type your message here..."></textarea>
                    </div>
                </div>
                <div class="modal-footer border-0 pt-0">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary px-4">Send Bulk SMS</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const selectAll = document.getElementById('select-all');
    const checkboxes = document.querySelectorAll('.volunteer-checkbox');
    const bulkActions = document.getElementById('bulk-actions');

    function updateBulkActionsVisibility() {
        const checkedCount = document.querySelectorAll('.volunteer-checkbox:checked').length;
        if (checkedCount > 0) {
            bulkActions.classList.remove('d-none');
        } else {
            bulkActions.classList.add('d-none');
        }
    }

    if (selectAll) {
        selectAll.addEventListener('change', function() {
            checkboxes.forEach(cb => {
                cb.checked = selectAll.checked;
            });
            updateBulkActionsVisibility();
        });
    }

    checkboxes.forEach(cb => {
        cb.addEventListener('change', function() {
            const allChecked = Array.from(checkboxes).every(c => c.checked);
            if (selectAll) selectAll.checked = allChecked;
            updateBulkActionsVisibility();
        });
    });

    const smsModal = document.getElementById('smsModal');
    if (smsModal) {
        smsModal.addEventListener('show.bs.modal', function () {
            const container = document.getElementById('selected-volunteers-container');
            container.innerHTML = '';
            checkboxes.forEach(cb => {
                if (cb.checked) {
                    const input = document.createElement('input');
                    input.type = 'hidden';
                    input.name = 'selected_volunteers';
                    input.value = cb.value;
                    container.appendChild(input);
                }
            });
        });
    }
});
</script>
{% endblock %}