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

{% block content %}
<div class="hero-section" style="padding: 60px 0 100px 0;">
    <div class="container text-center position-relative">
        <a href="{% url 'index' %}" class="text-white-50 text-decoration-none mb-3 d-inline-block">← Back to Dashboard</a>
        <h1 class="display-5 text-white">{{ voter.first_name }} {{ voter.last_name }}</h1>
        <p class="text-white-50">Voter ID: {{ voter.voter_id }} | {{ voter.district }} / {{ voter.precinct }}</p>
        <button type="button" class="btn btn-outline-light btn-sm mt-2" data-bs-toggle="modal" data-bs-target="#editVoterModal">
            <i class="bi bi-pencil-square me-1"></i> Edit Profile
        </button>
    </div>
</div>

<div class="container">
    <div class="voter-profile-header mb-5">
        <div class="row">
            <div class="col-lg-8 border-end">
                <h4 class="mb-4">Demographics & Contact</h4>
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="text-muted small d-block">Full Address</label>
                        <p class="fw-medium">{{ voter.address }}</p>
                    </div>
                    <div class="col-md-6">
                        <label class="text-muted small d-block">Phone / Email</label>
                        <p class="fw-medium">{{ voter.phone|default:"N/A" }}<br>{{ voter.email|default:"N/A" }}</p>
                    </div>
                    <div class="col-md-6">
                        <label class="text-muted small d-block">Registration Date</label>
                        <p class="fw-medium">{{ voter.registration_date|date:"M d, Y"|default:"Unknown" }}</p>
                    </div>
                    <div class="col-md-6">
                        <label class="text-muted small d-block">District / Precinct</label>
                        <p class="fw-medium">{{ voter.district }} / {{ voter.precinct }}</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 ps-lg-4">
                <h4 class="mb-4">Engagement</h4>
                <div class="mb-4">
                    <label class="text-muted small d-block mb-1">Likelihood to Vote (1-5)</label>
                    <div class="progress" style="height: 10px;">
                        <div class="progress-bar bg-primary" style="width: {% widthratio voter.likelihood_to_vote 5 100 %}%;"></div>
                    </div>
                    <span class="small fw-bold">{{ voter.likelihood_to_vote }}/5</span>
                </div>
                <div class="mb-4">
                    <label class="text-muted small d-block">Candidate Support</label>
                    <span class="badge rounded-pill {% if voter.candidate_support == 'supporting' %}bg-success{% elif voter.candidate_support == 'not_supporting' %}bg-danger{% else %}bg-secondary{% endif %} px-3">
                        {{ voter.get_candidate_support_display }}
                    </span>
                </div>
                <div>
                    <label class="text-muted small d-block">Yard Sign</label>
                    <p class="fw-medium"><i class="bi bi-flag"></i> {{ voter.get_yard_sign_status_display }}</p>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-4 mb-5">
        <!-- Voting History -->
        <div class="col-md-6 col-lg-3">
            <div class="card h-100 p-4 shadow-sm">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h5 class="mb-0"><i class="bi bi-calendar-check text-primary me-2"></i>Voting</h5>
                    <button class="btn btn-link btn-sm p-0" data-bs-toggle="modal" data-bs-target="#addVotingModal"><i class="bi bi-plus-circle-fill fs-5"></i></button>
                </div>
                {% for record in voter.voting_records.all %}
                <div class="d-flex justify-content-between border-bottom pb-2 mb-2">
                    <span class="small">{{ record.description }}</span>
                    <span class="text-muted small">{{ record.election_date|date:"Y" }}</span>
                </div>
                {% empty %}
                <p class="text-muted small">No voting records on file.</p>
                {% endfor %}
            </div>
        </div>

        <!-- Donations -->
        <div class="col-md-6 col-lg-3">
            <div class="card h-100 p-4 shadow-sm">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h5 class="mb-0"><i class="bi bi-cash-coin text-success me-2"></i>Donations</h5>
                    <button class="btn btn-link btn-sm p-0 text-success" data-bs-toggle="modal" data-bs-target="#addDonationModal"><i class="bi bi-plus-circle-fill fs-5"></i></button>
                </div>
                {% for donation in voter.donations.all %}
                <div class="mb-2 border-bottom pb-2">
                    <div class="d-flex justify-content-between">
                        <span class="fw-bold">${{ donation.amount }}</span>
                        <span class="text-muted small">{{ donation.donation_date|date:"M d, Y" }}</span>
                    </div>
                    <div class="extra-small text-muted">{{ donation.method }}</div>
                </div>
                {% empty %}
                <p class="text-muted small">No donation history.</p>
                {% endfor %}
            </div>
        </div>

        <!-- Event Participation -->
        <div class="col-md-6 col-lg-3">
            <div class="card h-100 p-4 shadow-sm">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h5 class="mb-0"><i class="bi bi-people text-info me-2"></i>Events</h5>
                    <button class="btn btn-link btn-sm p-0 text-info" data-bs-toggle="modal" data-bs-target="#addEventModal"><i class="bi bi-plus-circle-fill fs-5"></i></button>
                </div>
                {% for participation in voter.event_participations.all %}
                <div class="mb-3 border-bottom pb-2">
                    <div class="d-flex justify-content-between mb-1">
                        <span class="fw-bold small">{{ participation.event_type }}</span>
                        <span class="text-muted small">{{ participation.event_date|date:"M d, Y" }}</span>
                    </div>
                    {% if participation.description %}
                    <p class="extra-small text-muted mb-0">{{ participation.description|truncatechars:50 }}</p>
                    {% endif %}
                </div>
                {% empty %}
                <p class="text-muted small">No events recorded.</p>
                {% endfor %}
            </div>
        </div>

        <!-- Recent Contacts -->
        <div class="col-md-6 col-lg-3">
            <div class="card h-100 p-4 shadow-sm">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h5 class="mb-0"><i class="bi bi-chat-dots text-warning me-2"></i>Contacts</h5>
                    <button class="btn btn-link btn-sm p-0 text-warning" data-bs-toggle="modal" data-bs-target="#addContactModal"><i class="bi bi-plus-circle-fill fs-5"></i></button>
                </div>
                {% for contact in voter.contacts.all %}
                <div class="mb-3 border-bottom pb-2">
                    <div class="d-flex justify-content-between mb-1">
                        <span class="fw-bold small">{{ contact.contact_type }}</span>
                        <span class="text-muted small">{{ contact.contact_date|date:"M d, Y" }}</span>
                    </div>
                    <p class="extra-small text-muted mb-0">{{ contact.description|truncatechars:50 }}</p>
                </div>
                {% empty %}
                <p class="text-muted small">No contact history.</p>
                {% endfor %}
            </div>
        </div>
    </div>
</div>

<!-- Modals -->

<!-- Edit Voter Modal -->
<div class="modal fade" id="editVoterModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form action="{% url 'voter_edit' voter.pk %}" method="post">
                {% csrf_token %}
                <div class="modal-header">
                    <h5 class="modal-title">Edit Voter Profile</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="row g-3">
                        {% for field in voter_form %}
                        <div class="col-md-6">
                            <label class="form-label small">{{ field.label }}</label>
                            {{ field }}
                            {% if field.errors %}
                            <div class="text-danger small">{{ field.errors }}</div>
                            {% endif %}
                        </div>
                        {% endfor %}
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save Changes</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Add Voting Record Modal -->
<div class="modal fade" id="addVotingModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form action="{% url 'add_voting_record' voter.pk %}" method="post">
                {% csrf_token %}
                <div class="modal-header">
                    <h5 class="modal-title">Add Voting Record</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    {% for field in voting_form %}
                    <div class="mb-3">
                        <label class="form-label small">{{ field.label }}</label>
                        {{ field }}
                    </div>
                    {% endfor %}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Add Record</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Add Donation Modal -->
<div class="modal fade" id="addDonationModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form action="{% url 'add_donation' voter.pk %}" method="post">
                {% csrf_token %}
                <div class="modal-header">
                    <h5 class="modal-title">Log Donation</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    {% for field in donation_form %}
                    <div class="mb-3">
                        <label class="form-label small">{{ field.label }}</label>
                        {{ field }}
                    </div>
                    {% endfor %}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-success">Save Donation</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Add Event Modal -->
<div class="modal fade" id="addEventModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form action="{% url 'add_event' voter.pk %}" method="post">
                {% csrf_token %}
                <div class="modal-header">
                    <h5 class="modal-title">Record Event Participation</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    {% for field in event_form %}
                    <div class="mb-3">
                        <label class="form-label small">{{ field.label }}</label>
                        {{ field }}
                    </div>
                    {% endfor %}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-info text-white">Save Participation</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Add Contact Modal -->
<div class="modal fade" id="addContactModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form action="{% url 'add_contact' voter.pk %}" method="post">
                {% csrf_token %}
                <div class="modal-header">
                    <h5 class="modal-title">Log Voter Contact</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    {% for field in contact_form %}
                    <div class="mb-3">
                        <label class="form-label small">{{ field.label }}</label>
                        {{ field }}
                    </div>
                    {% endfor %}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-warning">Save Contact</button>
                </div>
            </form>
        </div>
    </div>
</div>

<style>
    .extra-small {
        font-size: 0.75rem;
    }
    .modal-body input, .modal-body select, .modal-body textarea {
        display: block;
        width: 100%;
        padding: 0.375rem 0.75rem;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: #212529;
        background-color: #fff;
        background-clip: padding-box;
        border: 1px solid #ced4da;
        appearance: none;
        border-radius: 0.375rem;
        transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    }
</style>
{% endblock %}