{% 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">Door Visits</h1>
        <div>
            <span class="badge bg-primary rounded-pill px-3">{{ households.paginator.count }} Unvisited Households</span>
        </div>
    </div>

    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body p-4">
            <h5 class="card-title mb-3 text-primary">Filters</h5>
            <form action="." method="GET" class="row g-3">
                <div class="col-md-3">
                    <label class="form-label small text-muted fw-bold">District</label>
                    <input type="text" name="district" class="form-control" placeholder="Filter by district..." value="{{ district_filter }}">
                </div>
                <div class="col-md-3">
                    <label class="form-label small text-muted fw-bold">Neighborhood</label>
                    <input type="text" name="neighborhood" class="form-control" placeholder="Partial neighborhood..." value="{{ neighborhood_filter }}">
                </div>
                <div class="col-md-4">
                    <label class="form-label small text-muted fw-bold">Address</label>
                    <input type="text" name="address" class="form-control" placeholder="Partial address..." value="{{ address_filter }}">
                </div>
                <div class="col-md-2 d-flex align-items-end">
                    <button type="submit" class="btn btn-primary w-100 py-2">Apply Filters</button>
                </div>
            </form>
        </div>
    </div>

    <div class="card border-0 shadow-sm overflow-hidden">
        <div class="card-header bg-white py-3 border-bottom">
            <h5 class="mb-0">Unvisited Households</h5>
        </div>
        <div class="table-responsive">
            <table class="table table-hover mb-0 align-middle">
                <thead class="bg-light">
                    <tr>
                        <th class="ps-4" style="min-width: 250px;">Target Voters</th>
                        <th>Neighborhood</th>
                        <th>Address</th>
                        <th>City, State</th>
                        <th class="text-end pe-4">Action</th>
                    </tr>
                </thead>
                <tbody>
                    {% for household in households %}
                    <tr>
                        <td class="ps-4">
                            {% for voter in household.target_voters %}
                                <a href="{% url 'voter_detail' voter.id %}" class="fw-semibold text-primary text-decoration-none hover-underline">
                                    {{ voter.first_name }} {{ voter.last_name }}
                                </a>{% if not forloop.last %}<span class="text-muted">, </span>{% endif %}
                            {% endfor %}
                        </td>
                        <td>
                            {% if household.neighborhood %}
                                <span class="badge bg-primary-subtle text-primary border border-primary-subtle px-2 py-1">{{ household.neighborhood }}</span>
                            {% else %}
                                <span class="text-muted small italic">None</span>
                            {% endif %}
                        </td>
                        <td><span class="fw-medium text-dark">{{ household.address_street }}</span></td>
                        <td>{{ household.city }}, {{ household.state }}</td>
                        <td class="text-end pe-4">
                            <button type="button" class="btn btn-success btn-sm px-3 shadow-sm" 
                                    data-bs-toggle="modal" 
                                    data-bs-target="#logVisitModal"
                                    data-address="{{ household.address_street }}"
                                    data-city="{{ household.city }}"
                                    data-state="{{ household.state }}"
                                    data-zip="{{ household.zip_code }}">
                                <i class="bi bi-journal-check me-1"></i> Log Visit
                            </button>
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="5" class="text-center py-5">
                            <div class="text-muted">
                                <i class="bi bi-house-door fs-1 text-secondary opacity-25 mb-3 d-block"></i>
                                <p class="mb-0 fs-5">No unvisited households found.</p>
                                <p class="small text-muted">Try adjusting your filters or targeting more voters.</p>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        
        {% if households.paginator.num_pages > 1 %}
        <div class="card-footer bg-white border-top py-4">
            <nav aria-label="Page navigation">
                <ul class="pagination justify-content-center mb-0">
                    {% if households.has_previous %}
                    <li class="page-item">
                        <a class="page-link" href="?page=1{% if district_filter %}&district={{ district_filter }}{% endif %}{% if neighborhood_filter %}&neighborhood={{ neighborhood_filter }}{% endif %}{% if address_filter %}&address={{ address_filter }}{% endif %}" aria-label="First">
                            <span aria-hidden="true">&laquo;&laquo;</span>
                        </a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="?page={{ households.previous_page_number }}{% if district_filter %}&district={{ district_filter }}{% endif %}{% if neighborhood_filter %}&neighborhood={{ neighborhood_filter }}{% endif %}{% if address_filter %}&address={{ address_filter }}{% endif %}" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    {% endif %}

                    {% for num in households.paginator.page_range %}
                        {% if households.number == num %}
                            <li class="page-item active"><span class="page-link">{{ num }}</span></li>
                        {% elif num > households.number|add:'-3' and num < households.number|add:'3' %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{ num }}{% if district_filter %}&district={{ district_filter }}{% endif %}{% if neighborhood_filter %}&neighborhood={{ neighborhood_filter }}{% endif %}{% if address_filter %}&address={{ address_filter }}{% endif %}">{{ num }}</a>
                            </li>
                        {% endif %}
                    {% endfor %}

                    {% if households.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ households.next_page_number }}{% if district_filter %}&district={{ district_filter }}{% endif %}{% if neighborhood_filter %}&neighborhood={{ neighborhood_filter }}{% endif %}{% if address_filter %}&address={{ address_filter }}{% endif %}" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="?page={{ households.paginator.num_pages }}{% if district_filter %}&district={{ district_filter }}{% endif %}{% if neighborhood_filter %}&neighborhood={{ neighborhood_filter }}{% endif %}{% if address_filter %}&address={{ address_filter }}{% endif %}" aria-label="Last">
                            <span aria-hidden="true">&raquo;&raquo;</span>
                        </a>
                    </li>
                    {% endif %}
                </ul>
            </nav>
        </div>
        {% endif %}
    </div>
</div>

<!-- Log Visit Modal -->
<div class="modal fade" id="logVisitModal" tabindex="-1" aria-labelledby="logVisitModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content border-0 shadow-lg">
            <form action="{% url 'log_door_visit' %}" method="POST">
                {% csrf_token %}
                <div class="modal-header bg-primary text-white border-0">
                    <h5 class="modal-title" id="logVisitModalLabel"><i class="bi bi-journal-plus me-2"></i>Log Door Visit</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-4">
                    <div class="mb-4 bg-light p-3 rounded border">
                        <p class="mb-0 small text-muted text-uppercase fw-bold ls-1">Address</p>
                        <p id="modalAddressDisplay" class="mb-0 fw-bold text-dark fs-5"></p>
                    </div>
                    
                    <!-- Hidden fields for address -->
                    <input type="hidden" name="address_street" id="modal_address_street">
                    <input type="hidden" name="city" id="modal_city">
                    <input type="hidden" name="state" id="modal_state">
                    <input type="hidden" name="zip_code" id="modal_zip_code">

                    <div class="mb-4">
                        <label class="form-label fw-bold text-primary small text-uppercase">Outcome</label>
                        <div class="bg-light p-3 rounded border">
                            {% for radio in visit_form.outcome %}
                                <div class="form-check mb-2 last-child-mb-0">
                                    {{ radio.tag }}
                                    <label class="form-check-label fw-medium" for="{{ radio.id_for_label }}">
                                        {{ radio.choice_label }}
                                    </label>
                                </div>
                            {% endfor %}
                        </div>
                    </div>

                    <div class="mb-4">
                        <label for="{{ visit_form.notes.id_for_label }}" class="form-label fw-bold text-primary small text-uppercase">Notes / Conversation Summary</label>
                        {{ visit_form.notes }}
                    </div>

                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label fw-bold text-primary small text-uppercase">Support Status</label>
                            {{ visit_form.candidate_support }}
                        </div>
                        <div class="col-md-6 d-flex align-items-end">
                            <div class="form-check mb-2">
                                {{ visit_form.wants_yard_sign }}
                                <label class="form-check-label fw-bold text-dark" for="{{ visit_form.wants_yard_sign.id_for_label }}">
                                    Wants a Yard Sign
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer bg-light border-0 py-3">
                    <button type="button" class="btn btn-outline-secondary px-4" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary px-4 shadow-sm">Save Visit</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var logVisitModal = document.getElementById('logVisitModal');
        if (logVisitModal) {
            logVisitModal.addEventListener('show.bs.modal', function (event) {
                var button = event.relatedTarget;
                var address = button.getAttribute('data-address');
                var city = button.getAttribute('data-city');
                var state = button.getAttribute('data-state');
                var zip = button.getAttribute('data-zip');

                document.getElementById('modalAddressDisplay').textContent = address + ', ' + city + ', ' + state + ' ' + zip;
                document.getElementById('modal_address_street').value = address;
                document.getElementById('modal_city').value = city;
                document.getElementById('modal_state').value = state;
                document.getElementById('modal_zip_code').value = zip;
            });
        }
    });
</script>

<style>
    .hover-underline:hover {
        text-decoration: underline !important;
    }
    .italic {
        font-style: italic;
    }
    .bg-primary-subtle {
        background-color: #e7f1ff;
    }
    .text-primary {
        color: #0d6efd !important;
    }
    .border-primary-subtle {
        border-color: #9ec5fe !important;
    }
    .last-child-mb-0:last-child {
        margin-bottom: 0 !important;
    }
    .ls-1 {
        letter-spacing: 1px;
    }
</style>
{% endblock %}