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

{% block content %}
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-12 col-lg-8">
            <div class="d-flex align-items-center mb-4">
                <a href="{{ redirect_url }}" class="btn btn-outline-secondary rounded-circle me-3">
                    <i class="bi bi-arrow-left"></i>
                </a>
                <div>
                    <h1 class="h3 fw-bold mb-0">Log Door Visit</h1>
                    <p class="text-muted mb-0">Record interaction for this household</p>
                </div>
            </div>

            <div class="card border-0 shadow-sm rounded-4 overflow-hidden">
                <div class="card-body p-4 p-md-5">
                    <div class="bg-primary-subtle p-4 rounded-3 mb-4 border border-primary-subtle">
                        <div class="small text-uppercase fw-bold text-primary mb-1">Household Address</div>
                        <div class="h4 mb-0 fw-bold text-dark">{{ address_street }}</div>
                        <div class="text-muted">{{ city }}, {{ state }} {{ zip_code }}</div>
                    </div>

                    <form action="{% url 'log_door_visit' %}" method="POST">
                        {% csrf_token %}
                        <input type="hidden" name="address_street" value="{{ address_street }}">
                        <input type="hidden" name="city" value="{{ city }}">
                        <input type="hidden" name="state" value="{{ state }}">
                        <input type="hidden" name="zip_code" value="{{ zip_code }}">
                        <input type="hidden" name="next_query_string" value="{{ next_query_string }}">
                        <input type="hidden" name="source" value="{{ source }}">

                        <div class="mb-4">
                            <label class="form-label fw-bold text-primary small text-uppercase">Visit Outcome</label>
                            <div class="row g-2">
                                {% for radio in visit_form.outcome %}
                                <div class="col-12 col-md-4">
                                    {{ radio.tag }}
                                    <label class="btn btn-outline-primary w-100 h-100 d-flex align-items-center justify-content-center text-center py-3 px-2" 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 mb-4">
                            <div class="col-12 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-12 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>

                        <hr class="my-5">

                        <div class="bg-light p-4 rounded-4">
                            <div class="form-check mb-4">
                                {{ visit_form.follow_up }}
                                <label class="form-check-label h6 fw-bold text-dark mb-0" for="{{ visit_form.follow_up.id_for_label }}">
                                    Schedule a Follow-up Call
                                </label>
                            </div>
                            <div id="callNotesContainer" {% if not visit_form.follow_up.value %}style="display: none;"{% endif %}>
                                <div class="mb-3">
                                    <label for="{{ visit_form.follow_up_voter.id_for_label }}" class="form-label fw-bold text-primary small text-uppercase">Recipient of the Call</label>
                                    {{ visit_form.follow_up_voter }}
                                </div>
                                <div class="mb-0">
                                    <label for="{{ visit_form.call_notes.id_for_label }}" class="form-label fw-bold text-primary small text-uppercase">Call Queue Notes</label>
                                    {{ visit_form.call_notes }}
                                    <div class="form-text small">These notes will be added to the call queue for the default caller.</div>
                                </div>
                            </div>
                        </div>

                        <div class="mt-5 d-grid d-md-flex justify-content-md-end gap-2">
                            <a href="{{ redirect_url }}" class="btn btn-light px-5 py-3 rounded-3 fw-bold">Cancel</a>
                            <button type="submit" class="btn btn-primary px-5 py-3 rounded-3 fw-bold shadow">Save Visit</button>
                        </div>
                    </form>
                </div>
            </div>

            <div class="mt-4">
                <h5 class="fw-bold text-dark mb-3">Targeted Voters at this Address</h5>
                <div class="list-group list-group-flush shadow-sm rounded-4 overflow-hidden">
                    {% for voter in voters %}
                    <a href="{% url 'voter_detail' voter.id %}" class="list-group-item list-group-item-action py-3 border-0">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <div class="fw-bold text-primary">{{ voter.first_name }} {{ voter.last_name }}</div>
                                <div class="small text-muted">Voter ID: {{ voter.voter_id|default:"N/A" }}</div>
                            </div>
                            <i class="bi bi-chevron-right text-muted"></i>
                        </div>
                    </a>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const followUpCheckbox = document.getElementById('{{ visit_form.follow_up.id_for_label }}');
        const callNotesContainer = document.getElementById('callNotesContainer');
        if (followUpCheckbox && callNotesContainer) {
            followUpCheckbox.addEventListener('change', function() {
                callNotesContainer.style.display = this.checked ? 'block' : 'none';
            });
        }
    });
</script>

<style>
    .btn-outline-primary {
        color: #0d6efd !important;
        border-color: #0d6efd !important;
    }
    .btn-outline-primary:hover, .btn-check:checked + .btn-outline-primary {
        background-color: #0d6efd !important;
        color: #ffffff !important;
    }
    .bg-primary-subtle {
        background-color: #e7f1ff;
    }
    .text-primary {
        color: #0d6efd !important;
    }
    .border-primary-subtle {
        border-color: #9ec5fe !important;
    }
</style>
{% endblock %}