{% extends 'main.html' %}
{% load static %}
{% block content %}

<div class="container">
    <h2 class="my-4">CARES Registrations</h2>
    <div class="card mb-4">
        <div class="card-header">
            <h4>Registration Filters</h4>
        </div>
        <div class="card-body">
            <form method="get" id="filter-form">
                <!-- First row of filters -->
                <div class="row mb-3">
                    <div class="col-md-3">
                        <label for="reg_status">Reg Status:</label>
                        <select name="reg_status" id="reg_status" class="form-select">
                            <option value="">-- All Statuses --</option>
                            {% for value, label in reg_status_options %}
                                <option value="{{ value }}" {% if value == selected_reg_status %}selected{% endif %}>{{ label }}</option>
                            {% endfor %}
                        </select>
                    </div> 
                    <div class="col-md-3">
                        <label for="cares_family">Family:</label>
                        <select name="cares_family" id="cares_family" class="form-select">
                            <option value="">-- All Families --</option>
                            {% for value, label in cares_families %}
                                <option value="{{ value }}" {% if value == selected_cares_family %}selected{% endif %}>{{ label }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label for="approver">Approver:</label>
                        <select name="approver" id="approver" class="form-select">
                            <option value="">-- All Approvers --</option>
                            {% for value, label in approvers %}
                                <option value="{{ value }}" {% if value|stringformat:"s" == selected_approver %}selected{% endif %}>{{ label }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label for="club">Club:</label>
                        <select name="club" id="club" class="form-select">
                            <option value="">-- All Clubs --</option>
                            {% for value, label in clubs %}
                                <option value="{{ value }}" {% if value|stringformat:"s" == selected_club %}selected{% endif %}>{{ label }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
                
                <!-- Second row: Search box -->
                <div class="row mb-3">
                    <div class="col-md-10">
                        <label for="q">Search:</label>
                        <input type="text" name="q" id="q" class="form-control" placeholder="Search by aquarist name, species name, source, or notes..." value="{{ query_text }}">
                    </div>
                    <div class="col-md-2 d-flex align-items-end">
                        {% if selected_cares_family or selected_reg_status or selected_approver or selected_club or query_text %}
                            <a href="{% url request.resolver_match.url_name %}" class="btn btn-secondary btn-sm w-100">Clear Filters</a>
                        {% endif %}
                    </div>
                </div>
                
                <!-- Hidden fields to preserve pagination when only clearing specific filters -->
                <input type="hidden" id="preservedPage" name="page" value="{{ request.GET.page|default:'' }}">
            </form>
        </div>
    </div>
    
    <!-- Registrations List -->
    <div class="card mb-4">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h4>Registrations</h4>
            <span>Total: {{ page_obj.paginator.count }} Registrations found</span>
        </div>
        <div class="card-body">
            {% if registrations_list %}
                <div class="table-responsive">
                    <table class="table table-striped table-hover">                    
                        <thead>
                            <tr>
                                <th>Registration</th>
                                <th style='text-align:center'>Aquarist</th>
                                <th style='text-align:center'>Club</th> 
                                <th style='text-align:center'>Family</th>
                                <th style='text-align:center'>Classification</th>                                
                                <th style='text-align:center'>Approver</th>
                                <th style='text-align:center'>Status</th>
                                <th style='text-align:center'>Updated</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for registration in registrations_list %}
                                <tr>
                                    <td><a href="{% url 'caresRegistration' registration.id %}">{{ registration.species.name }}</a></td>
                                    <td style='text-align:center'>{{ registration.aquarist_name }}</td>
                                    <td style='text-align:center'>{{ registration.affiliate_club.acronym }}</td>
                                    <td style='text-align:center'>{{ registration.species.get_cares_family_display }}</td>
                                    <td style='text-align:center'>{{ registration.species.get_cares_classification_display }}</td>
                                    <td style='text-align:center'>{{ registration.cares_approver.name }}</td>
                                    <td style='text-align:center'>{{ registration.get_status_display }}</td>  
                                    {% if registration.last_report_date %}
                                        <td style='text-align:center'>R: {{ registration.last_report_date | date:'Y-m-d' }}</td>
                                    {% else %}
                                        <td style='text-align:center'>{{ registration.lastUpdated | date:'Y-m-d' }}</td>
                                    {% endif %}
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                {% if is_paginated %}
                <nav aria-label="Page navigation">
                    <ul class="pagination justify-content-center">
                        {% if page_obj.has_previous %}
                            <li class="page-item">
                                <a class="page-link" href="?page=1{% if selected_cares_family %}&cares_family={{ selected_cares_family }}{% endif %}{% if selected_reg_status %}&amp;reg_status={{ selected_reg_status }}{% endif %}{% if selected_approver %}&approver={{ selected_approver }}{% endif %}{% if selected_club %}&club={{ selected_club }}{% endif %}{% if query_text %}&q={{ query_text }}{% endif %}" aria-label="First">
                                    <span aria-hidden="true">&laquo;&laquo;</span>
                                </a>
                            </li>
                            <li class="page-item">
                                <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if selected_cares_family %}&cares_family={{ selected_cares_family }}{% endif %}{% if selected_reg_status %}&amp;reg_status={{ selected_reg_status }}{% endif %}{% if selected_approver %}&approver={{ selected_approver }}{% endif %}{% if selected_club %}&club={{ selected_club }}{% endif %}{% if query_text %}&q={{ query_text }}{% endif %}" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                        {% endif %}
                        
                        {# Show current page and neighboring pages #}
                        {% for i in page_obj.paginator.page_range %}
                            {% if page_obj.number == i %}
                                <li class="page-item active"><span class="page-link">{{ i }}</span></li>
                            {% elif i > page_obj.number|add:'-3' and i < page_obj.number|add:'3' %}
                                <li class="page-item">
                                    <a class="page-link" href="?page={{ i }}{% if selected_cares_family %}&cares_family={{ selected_cares_family }}{% endif %}{% if selected_reg_status %}&amp;reg_status={{ selected_reg_status }}{% endif %}{% if selected_approver %}&approver={{ selected_approver }}{% endif %}{% if selected_club %}&club={{ selected_club }}{% endif %}{% if query_text %}&q={{ query_text }}{% endif %}">{{ i }}</a>
                                </li>
                            {% endif %}
                        {% endfor %}
                        
                        {% if page_obj.has_next %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if selected_cares_family %}&cares_family={{ selected_cares_family }}{% endif %}{% if selected_reg_status %}&amp;reg_status={{ selected_reg_status }}{% endif %}{% if selected_approver %}&approver={{ selected_approver }}{% endif %}{% if selected_club %}&club={{ selected_club }}{% endif %}{% if query_text %}&q={{ query_text }}{% endif %}" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                            <li class="page-item">
                                <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% if selected_cares_family %}&cares_family={{ selected_cares_family }}{% endif %}{% if selected_reg_status %}&amp;reg_status={{ selected_reg_status }}{% endif %}{% if selected_approver %}&approver={{ selected_approver }}{% endif %}{% if selected_club %}&club={{ selected_club }}{% endif %}{% if query_text %}&q={{ query_text }}{% endif %}" aria-label="Last">
                                    <span aria-hidden="true">&raquo;&raquo;</span>
                                </a>
                            </li>
                        {% endif %}
                    </ul>
                </nav>
                {% endif %}
            {% else %}
                <p>None</p>
            {% endif %}
        </div>
    </div>
</div>

<script>
    // Reset page to 1 when any filter changes
    function resetPageAndSubmit() {
        document.getElementById('preservedPage').value = '1';
        document.getElementById('filter-form').submit();
    }
    
    // Reset page when dropdowns change
    document.getElementById('reg_status').addEventListener('change', function() {
        resetPageAndSubmit();
    });
    
    document.getElementById('cares_family').addEventListener('change', function() {
        resetPageAndSubmit();
    });
    
    document.getElementById('approver').addEventListener('change', function() {
        resetPageAndSubmit();
    });
    
    document.getElementById('club').addEventListener('change', function() {
        resetPageAndSubmit();
    });
    
    // Make Enter key work for text search and reset page
    document.getElementById('q').addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            resetPageAndSubmit();
        }
    });
</script>

{% endblock content %}