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

{% block content %}
<div class="container py-5">
    <div class="mb-4">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{% url 'voter_list' %}">Voters</a></li>
                <li class="breadcrumb-item active" aria-current="page">Add New Voter</li>
            </ol>
        </nav>
        <h1 class="h2 mb-0">Add New Voter</h1>
    </div>

    <div class="row justify-content-center">
        <div class="col-lg-10">
            <div class="card border-0 shadow-sm">
                <div class="card-body p-4">
                    <form method="POST">
                        {% csrf_token %}
                        
                        <div class="row">
                            <h5 class="fw-bold mb-3 border-bottom pb-2">Core Information</h5>
                            <div class="col-md-4 mb-3">
                                <label class="form-label fw-medium">{{ form.first_name.label }}</label>
                                {{ form.first_name }}
                                {% if form.first_name.errors %}<div class="text-danger small">{{ form.first_name.errors }}</div>{% endif %}
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label fw-medium">{{ form.last_name.label }}</label>
                                {{ form.last_name }}
                                {% if form.last_name.errors %}<div class="text-danger small">{{ form.last_name.errors }}</div>{% endif %}
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label fw-medium">{{ form.nickname.label }}</label>
                                {{ form.nickname }}
                                {% if form.nickname.errors %}<div class="text-danger small">{{ form.nickname.errors }}</div>{% endif %}
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label fw-medium">{{ form.voter_id.label }}</label>
                                {{ form.voter_id }}
                                {% if form.voter_id.errors %}<div class="text-danger small">{{ form.voter_id.errors }}</div>{% endif %}
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label fw-medium">{{ form.birthdate.label }}</label>
                                {{ form.birthdate }}
                                {% if form.birthdate.errors %}<div class="text-danger small">{{ form.birthdate.errors }}</div>{% endif %}
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label fw-medium">{{ form.registration_date.label }}</label>
                                {{ form.registration_date }}
                                {% if form.registration_date.errors %}<div class="text-danger small">{{ form.registration_date.errors }}</div>{% endif %}
                            </div>

                            <h5 class="fw-bold mb-3 mt-4 border-bottom pb-2">Address</h5>
                            <div class="col-md-12 mb-3">
                                <label class="form-label fw-medium">Address Street</label>
                                {{ form.address_street }}
                                {% if form.address_street.errors %}<div class="text-danger small">{{ form.address_street.errors }}</div>{% endif %}
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-medium">City</label>
                                {{ form.city }}
                                {% if form.city.errors %}<div class="text-danger small">{{ form.city.errors }}</div>{% endif %}
                            </div>
                            <div class="col-md-2 mb-3">
                                <label class="form-label fw-medium">State</label>
                                {{ form.state }}
                                {% if form.state.errors %}<div class="text-danger small">{{ form.state.errors }}</div>{% endif %}
                            </div>
                            <div class="col-md-2 mb-3">
                                <label class="form-label fw-medium">Prior State</label>
                                {{ form.prior_state }}
                                {% if form.prior_state.errors %}<div class="text-danger small">{{ form.prior_state.errors }}</div>{% endif %}
                            </div>
                            <div class="col-md-2 mb-3">
                                <label class="form-label fw-medium">Zip Code</label>
                                {{ form.zip_code }}
                                {% if form.zip_code.errors %}<div class="text-danger small">{{ form.zip_code.errors }}</div>{% endif %}
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-medium">County</label>
                                {{ form.county }}
                                {% if form.county.errors %}<div class="text-danger small">{{ form.county.errors }}</div>{% endif %}
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-medium">{{ form.neighborhood.label }}</label>
                                {{ form.neighborhood }}
                                {% if form.neighborhood.errors %}<div class="text-danger small">{{ form.neighborhood.errors }}</div>{% endif %}
                            </div>
                            
                            <div class="col-12 mb-4">
                                <button type="button" id="manualGeocodeBtn" class="btn btn-outline-primary w-100 fw-bold py-2 shadow-sm">
                                    <i class="bi bi-geo-alt-fill me-2"></i>Manual Geocode Address
                                </button>
                                <div id="geocodeStatus" class="small mt-2 text-center" style="display: none;"></div>
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-medium">Latitude</label>
                                {{ form.latitude }}
                                {% if form.latitude.errors %}<div class="text-danger small">{{ form.latitude.errors }}</div>{% endif %}
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-medium">Longitude</label>
                                {{ form.longitude }}
                                {% if form.longitude.errors %}<div class="text-danger small">{{ form.longitude.errors }}</div>{% endif %}
                            </div>

                            <h5 class="fw-bold mb-3 mt-4 border-bottom pb-2">Contact Information</h5>
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-medium">{{ form.phone.label }}</label>
                                {{ form.phone }}
                                {% if form.phone.errors %}<div class="text-danger small">{{ form.phone.errors }}</div>{% endif %}
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-medium">{{ form.phone_type.label }}</label>
                                {{ form.phone_type }}
                                {% if form.phone_type.errors %}<div class="text-danger small">{{ form.phone_type.errors }}</div>{% endif %}
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-medium">{{ form.secondary_phone.label }}</label>
                                {{ form.secondary_phone }}
                                {% if form.secondary_phone.errors %}<div class="text-danger small">{{ form.secondary_phone.errors }}</div>{% endif %}
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-medium">{{ form.secondary_phone_type.label }}</label>
                                {{ form.secondary_phone_type }}
                                {% if form.secondary_phone_type.errors %}<div class="text-danger small">{{ form.secondary_phone_type.errors }}</div>{% endif %}
                            </div>
                            <div class="col-md-12 mb-3">
                                <label class="form-label fw-medium">{{ form.email.label }}</label>
                                {{ form.email }}
                                {% if form.email.errors %}<div class="text-danger small">{{ form.email.errors }}</div>{% endif %}
                            </div>

                            <h5 class="fw-bold mb-3 mt-4 border-bottom pb-2">Campaign Data</h5>
                            <div class="col-md-4 mb-3">
                                <label class="form-label fw-medium">{{ form.district.label }}</label>
                                {{ form.district }}
                                {% if form.district.errors %}<div class="text-danger small">{{ form.district.errors }}</div>{% endif %}
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label fw-medium">{{ form.precinct.label }}</label>
                                {{ form.precinct }}
                                {% if form.precinct.errors %}<div class="text-danger small">{{ form.precinct.errors }}</div>{% endif %}
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label fw-medium">{{ form.candidate_support.label }}</label>
                                {{ form.candidate_support }}
                                {% if form.candidate_support.errors %}<div class="text-danger small">{{ form.candidate_support.errors }}</div>{% endif %}
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label fw-medium">{{ form.yard_sign.label }}</label>
                                {{ form.yard_sign }}
                                {% if form.yard_sign.errors %}<div class="text-danger small">{{ form.yard_sign.errors }}</div>{% endif %}
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label fw-medium">{{ form.window_sticker.label }}</label>
                                {{ form.window_sticker }}
                                {% if form.window_sticker.errors %}<div class="text-danger small">{{ form.window_sticker.errors }}</div>{% endif %}
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label fw-medium">{{ form.call_queue_status.label }}</label>
                                {{ form.call_queue_status }}
                                {% if form.call_queue_status.errors %}<div class="text-danger small">{{ form.call_queue_status.errors }}</div>{% endif %}
                            </div>
                            <div class="col-md-6 mb-3 pt-4">
                                <div class="form-check">
                                    {{ form.is_targeted }}
                                    <label class="form-check-label fw-medium" for="{{ form.is_targeted.id_for_label }}">
                                        Targeted Voter
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-6 mb-3 pt-4">
                                <div class="form-check">
                                    {{ form.target_door_visit }}
                                    <label class="form-check-label fw-medium" for="{{ form.target_door_visit.id_for_label }}">
                                        Target Door Visit
                                    </label>
                                </div>
                            </div>
                            
                            <div class="col-md-12 mb-3">
                                <label class="form-label fw-medium">Notes</label>
                                {{ form.notes }}
                                {% if form.notes.errors %}<div class="text-danger small">{{ form.notes.errors }}</div>{% endif %}
                            </div>
                        </div>

                        <div class="mt-4 d-flex gap-3 justify-content-end">
                            <a href="{% url 'voter_list' %}" class="btn btn-outline-secondary px-5 rounded-pill">Cancel</a>
                            <button type="submit" class="btn btn-primary px-5 rounded-pill shadow-sm">Add Voter</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Manual Geocode Logic
        const geocodeBtn = document.getElementById('manualGeocodeBtn');
        const statusDiv = document.getElementById('geocodeStatus');
        
        if (geocodeBtn) {
            geocodeBtn.addEventListener('click', function() {
                const street = document.querySelector('[name="address_street"]').value;
                const city = document.querySelector('[name="city"]').value;
                const state = document.querySelector('[name="state"]').value;
                const zip = document.querySelector('[name="zip_code"]').value;
                
                if (!street && !city) {
                    statusDiv.innerHTML = '<span class="text-danger">Please enter at least a street or city.</span>';
                    statusDiv.style.display = 'block';
                    return;
                }
                
                geocodeBtn.disabled = true;
                geocodeBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Geocoding...';
                statusDiv.style.display = 'none';
                
                const formData = new FormData();
                formData.append('address_street', street);
                formData.append('city', city);
                formData.append('state', state);
                formData.append('zip_code', zip);
                formData.append('csrfmiddlewaretoken', '{{ csrf_token }}');
                
                // We use a dummy ID of 0 for geocoding a new voter if the backend supports it, 
                // or we might need a separate endpoint for geocoding arbitrary addresses.
                // Let's check if voter_geocode requires an existing voter.
                // In views.py: voter = get_object_or_404(Voter, id=voter_id, tenant=tenant)
                // So it DOES require an existing voter.
                
                // I should probably add a generic geocode endpoint or modify voter_geocode to handle ID 0.
                
                statusDiv.innerHTML = '<span class="text-warning">Geocoding is available after saving the voter, or use a generic geocoder.</span>';
                statusDiv.style.display = 'block';
                geocodeBtn.disabled = false;
                geocodeBtn.innerHTML = '<i class="bi bi-geo-alt-fill me-2"></i>Manual Geocode Address';
            });
        }
    });
</script>

<style>
    .form-control, .form-select {
        border-color: #e5e7eb;
        padding: 0.6rem 0.8rem;
    }
    .form-control:focus, .form-select:focus {
        border-color: #059669;
        box-shadow: 0 0 0 0.25rem rgba(5, 150, 105, 0.1);
    }
</style>
{% endblock %}