{% extends "base.html" %}
{% load static %}

{% block content %}
<div class="container-fluid py-4 py-md-5 px-3 px-md-4">
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center mb-4 mb-md-5 gap-3">
        <div>
            <h1 class="h2 fw-bold text-dark mb-1">Door Visit History</h1>
            <p class="text-muted mb-0">Review completed door-to-door visits and outcomes.</p>
        </div>
        <div class="d-flex gap-2 w-100 w-md-auto">
            <a href="{% url 'door_visits' %}" class="btn btn-outline-primary shadow-sm flex-grow-1 flex-md-grow-0 py-1 py-md-2">
                <i class="bi bi-door-open-fill me-1"></i> Door Visits
            </a>
        </div>
    </div>

    <!-- Filters and Summary -->
    <div class="row g-4 mb-4 mb-md-5">
        <!-- Date Filter Card -->
        <div class="col-lg-5">
            <div class="card border-0 shadow-sm rounded-4 h-100">
                <div class="card-body p-3 p-md-4">
                    <h5 class="card-title fw-bold mb-3">Filter by Date Range</h5>
                    <form method="get" class="row g-2">
                        <div class="col-6 col-sm-5">
                            <label class="small text-muted mb-1 ms-1">From</label>
                            <input type="date" name="start_date" class="form-control rounded-pill border-light bg-light" value="{{ start_date|default:'' }}">
                        </div>
                        <div class="col-6 col-sm-5">
                            <label class="small text-muted mb-1 ms-1">To</label>
                            <input type="date" name="end_date" class="form-control rounded-pill border-light bg-light" value="{{ end_date|default:'' }}">
                        </div>
                        <div class="col-12 col-sm-2 d-flex align-items-end">
                            <button type="submit" class="btn btn-primary rounded-pill w-100 px-0">Filter</button>
                        </div>
                        {% if start_date or end_date %}
                        <div class="col-12 mt-1">
                            <a href="{% url 'door_visit_history' %}" class="text-secondary small ms-1">
                                <i class="bi bi-x-circle me-1"></i>Clear range
                            </a>
                        </div>
                        {% endif %}
                    </form>
                </div>
            </div>
        </div>

        <!-- Volunteer Counts Summary -->
        <div class="col-lg-7">
            <div class="card border-0 shadow-sm rounded-4 h-100">
                <div class="card-body p-3 p-md-4">
                    <h5 class="card-title fw-bold mb-3">Visits per Volunteer</h5>
                    <div class="d-flex flex-wrap gap-2">
                        {% for v_name, count in volunteer_counts %}
                        <div class="bg-light rounded-pill px-3 py-2 d-flex align-items-center border">
                            <span class="fw-medium text-dark me-2 small">{{ v_name }}</span>
                            <span class="badge bg-primary rounded-pill">{{ count }}</span>
                        </div>
                        {% empty %}
                        <p class="text-muted small mb-0">No volunteer data available for this selection.</p>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Households List -->
    <div class="card border-0 shadow-sm rounded-4 overflow-hidden">
        <div class="card-header bg-white py-3 border-bottom d-flex flex-column flex-sm-row justify-content-between align-items-sm-center gap-2">
            <h5 class="card-title mb-0 fw-bold">Visited Households</h5>
            <span class="badge bg-success-subtle text-success px-3 py-2 rounded-pill align-self-start align-self-sm-center">
                {{ history.paginator.count }} Households Visited
            </span>
        </div>
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="bg-light text-muted">
                    <tr>
                        <th class="ps-3 ps-md-4 py-3 text-uppercase small ls-1">Household Address</th>
                        <th class="py-3 text-uppercase small ls-1 d-none d-md-table-cell">Voters Visited</th>
                        <th class="py-3 text-uppercase small ls-1">Last Visit</th>
                        <th class="py-3 text-uppercase small ls-1 d-none d-sm-table-cell">Volunteer</th>
                        <th class="py-3 text-uppercase small ls-1">Outcome</th>
                        <th class="pe-3 pe-md-4 py-3 text-uppercase small ls-1 d-none d-lg-table-cell">Comments</th>
                    </tr>
                </thead>
                <tbody>
                    {% for household in history %}
                    <tr>
                        <td class="ps-3 ps-md-4">
                            <div class="fw-bold text-dark">{{ household.address_display }}</div>
                            <div class="d-flex flex-wrap gap-1 mt-1">
                                {% if household.neighborhood %}
                                <span class="badge bg-light text-primary border border-primary-subtle small d-md-inline-block">
                                    {{ household.neighborhood }}
                                </span>
                                {% endif %}
                                {% if household.district %}
                                <span class="badge bg-light text-secondary border small d-none d-md-inline-block">
                                    District: {{ household.district }}
                                </span>
                                {% endif %}
                                <div class="d-md-none small text-muted w-100">
                                    {% for v_id, v_name in household.voters_at_address %}
                                        <a href="{% url 'voter_detail' v_id %}" class="text-decoration-none text-muted fw-medium">{{ v_name }}</a>{% if not forloop.last %}, {% endif %}
                                    {% endfor %}
                                </div>
                            </div>
                        </td>
                        <td class="d-none d-md-table-cell">
                            <div class="d-flex flex-wrap gap-1">
                                {% for v_id, v_name in household.voters_at_address %}
                                <a href="{% url 'voter_detail' v_id %}" class="badge bg-light text-dark border fw-normal text-decoration-none voter-badge">
                                    {{ v_name }}
                                </a>
                                {% endfor %}
                            </div>
                        </td>
                        <td>
                            <div class="fw-bold text-dark small">{{ household.last_visit_date|date:"M d, Y" }}</div>
                            <div class="small text-muted d-none d-sm-block">{{ household.last_visit_date|date:"H:i" }}</div>
                        </td>
                        <td class="d-none d-sm-table-cell">
                            {% if household.last_volunteer %}
                            <div class="d-flex align-items-center">
                                <div class="bg-primary bg-opacity-10 text-primary rounded-circle d-flex align-items-center justify-content-center me-2 d-none d-md-flex" style="width: 32px; height: 32px;">
                                    {{ household.last_volunteer.first_name|first }}{{ household.last_volunteer.last_name|first }}
                                </div>
                                <span class="fw-medium small">{{ household.last_volunteer }}</span>
                            </div>
                            {% else %}
                            <span class="text-muted small">N/A</span>
                            {% endif %}
                        </td>
                        <td>
                            <span class="badge {% if 'Spoke' in household.last_outcome %}bg-success{% elif 'Literature' in household.last_outcome %}bg-info{% else %}bg-secondary{% endif %} bg-opacity-10 {% if 'Spoke' in household.last_outcome %}text-success{% elif 'Literature' in household.last_outcome %}text-info{% else %}text-secondary{% endif %} px-2 py-1 small">
                                {{ household.last_outcome }}
                            </span>
                        </td>
                        <td class="pe-3 pe-md-4 d-none d-lg-table-cell">
                            <div class="small text-muted text-wrap" style="max-width: 200px;">
                                {{ household.notes|default:"-" }}
                            </div>
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="6" class="text-center py-5">
                            <div class="text-muted mb-2">
                                <i class="bi bi-calendar-x mb-2" style="font-size: 3rem; opacity: 0.3;"></i>
                            </div>
                            <p class="mb-0 fw-medium">No door visits found for this selection.</p>
                            <p class="small text-muted">Try clearing your filters or visit the <a href="{% url 'door_visits' %}">Door Visits</a> page to log more visits.</p>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        
        {% if history.paginator.num_pages > 1 %}
        <div class="card-footer bg-white border-0 py-4">
            <nav aria-label="Page navigation">
                <ul class="pagination pagination-sm justify-content-center mb-0">
                    {% if history.has_previous %}
                    <li class="page-item">
                        <a class="page-link rounded-circle mx-1 border-0 bg-light text-dark" href="?page=1{% if start_date %}&start_date={{ start_date }}{% endif %}{% if end_date %}&end_date={{ end_date }}{% endif %}" aria-label="First">
                            <i class="bi bi-chevron-double-left"></i>
                        </a>
                    </li>
                    <li class="page-item">
                        <a class="page-link rounded-circle mx-1 border-0 bg-light text-dark" href="?page={{ history.previous_page_number }}{% if start_date %}&start_date={{ start_date }}{% endif %}{% if end_date %}&end_date={{ end_date }}{% endif %}" aria-label="Previous">
                            <i class="bi bi-chevron-left"></i>
                        </a>
                    </li>
                    {% endif %}

                    <li class="page-item active mx-1 mx-md-2"><span class="page-link rounded-pill px-3 border-0">Page {{ history.number }} of {{ history.paginator.num_pages }}</span></li>

                    {% if history.has_next %}
                    <li class="page-item">
                        <a class="page-link rounded-circle mx-1 border-0 bg-light text-dark" href="?page={{ history.next_page_number }}{% if start_date %}&start_date={{ start_date }}{% endif %}{% if end_date %}&end_date={{ end_date }}{% endif %}" aria-label="Next">
                            <i class="bi bi-chevron-right"></i>
                        </a>
                    </li>
                    <li class="page-item">
                        <a class="page-link rounded-circle mx-1 border-0 bg-light text-dark" href="?page={{ history.paginator.num_pages }}{% if start_date %}&start_date={{ start_date }}{% endif %}{% if end_date %}&end_date={{ end_date }}{% endif %}" aria-label="Last">
                            <i class="bi bi-chevron-double-right"></i>
                        </a>
                    </li>
                    {% endif %}
                </ul>
            </nav>
        </div>
        {% endif %}
    </div>
</div>

<style>
    .ls-1 {
        letter-spacing: 1px;
    }
    .bg-success-subtle {
        background-color: #d1e7dd;
    }
    .text-success {
        color: #0f5132 !important;
    }
    .bg-info-subtle {
        background-color: #cff4fc;
    }
    .text-info {
        color: #055160 !important;
    }
    .voter-badge:hover {
        background-color: #e9ecef !important;
        border-color: #adb5bd !important;
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    }
    @media (max-width: 576px) {
        .container-fluid {
            padding-left: 0.75rem !important;
            padding-right: 0.75rem !important;
        }
        .card-body {
            padding: 1rem !important;
        }
        h1.h2 {
            font-size: 1.5rem;
        }
    }
</style>
{% endblock %}