{% extends "base.html" %}

{% block head %}
<!-- Tom Select CSS/JS -->
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/css/tom-select.bootstrap5.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/js/tom-select.complete.min.js"></script>
<style>
    .ts-control { 
        border: 1px solid #dee2e6 !important;
        padding: 0.5rem 0.75rem !important;
        border-radius: 0.375rem !important;
        box-shadow: none !important;
    }
    .ts-control .item {
        background: #e9ecef !important;
        border: 1px solid #dee2e6 !important;
        color: #212529 !important;
        border-radius: 4px !important;
        padding: 2px 8px !important;
    }
    .ts-dropdown {
        border-radius: 0.375rem !important;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    }
    .ts-control.focus {
        border-color: #86b7fe !important;
        outline: 0 !important;
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
    }
</style>
{% endblock %}

{% 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 'volunteer_list' %}">Volunteers</a></li>
                <li class="breadcrumb-item active" aria-current="page">{% if volunteer %}{{ volunteer.first_name }} {{ volunteer.last_name }}{% else %}Add New Volunteer{% endif %}</li>
            </ol>
        </nav>
        <div class="d-flex justify-content-between align-items-center">
            <h1 class="h2 mb-0">{% if volunteer %}{{ volunteer.first_name }} {{ volunteer.last_name }}{% else %}New Volunteer{% endif %}</h1>
            {% if volunteer %}
            <form action="{% url 'volunteer_delete' volunteer.id %}" method="POST" onsubmit="return confirm('Are you sure you want to delete this volunteer?')">
                {% csrf_token %}
                <button type="submit" class="btn btn-outline-danger btn-sm">Delete Volunteer</button>
            </form>
            {% endif %}
        </div>
    </div>

    <div class="row g-4">
        <!-- Volunteer Info & Edit Form -->
        <div class="col-lg-7">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body p-4">
                    <h5 class="card-title fw-bold mb-4">Volunteer Information</h5>
                    <form action="{% if volunteer %}{% url 'volunteer_detail' volunteer.id %}{% else %}{% url 'volunteer_add' %}{% endif %}" method="POST" id="volunteerForm">
                        {% csrf_token %}
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label for="{{ form.first_name.id_for_label }}" class="form-label small text-muted text-uppercase fw-bold">First Name</label>
                                {{ form.first_name }}
                            </div>
                            <div class="col-md-6">
                                <label for="{{ form.last_name.id_for_label }}" class="form-label small text-muted text-uppercase fw-bold">Last Name</label>
                                {{ form.last_name }}
                            </div>
                            <div class="col-md-6">
                                <label for="{{ form.email.id_for_label }}" class="form-label small text-muted text-uppercase fw-bold">Email Address</label>
                                {{ form.email }}
                            </div>
                            <div class="col-md-6">
                                <label for="{{ form.phone.id_for_label }}" class="form-label small text-muted text-uppercase fw-bold">Phone Number</label>
                                {{ form.phone }}
                            </div>
                            <div class="col-12">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <label for="{{ form.interests.id_for_label }}" class="form-label small text-muted text-uppercase fw-bold mb-0">Interests</label>
                                    <div>
                                        <button type="button" class="btn btn-sm btn-link text-decoration-none py-0 me-2" data-bs-toggle="modal" data-bs-target="#manageInterestsModal">
                                            <small>Manage Types</small>
                                        </button>
                                        <button type="button" class="btn btn-sm btn-outline-primary py-0" data-bs-toggle="modal" data-bs-target="#addInterestModal">
                                            <small>+ Add New Type</small>
                                        </button>
                                    </div>
                                </div>
                                {{ form.interests }}
                            </div>
                            <div class="col-12">
                                <label for="{{ form.notes.id_for_label }}" class="form-label small text-muted text-uppercase fw-bold">Notes</label>
                                {{ form.notes }}
                            </div>
                        </div>
                        <div class="mt-4 pt-3 border-top text-end">
                            <a href="{% url 'volunteer_list' %}" class="btn btn-outline-secondary px-4 me-2">Cancel</a>
                            <button type="submit" class="btn btn-primary px-4">{% if volunteer %}Save Changes{% else %}Create Volunteer{% endif %}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        {% if volunteer %}
        <!-- Event Assignments -->
        <div class="col-lg-5">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white border-0 py-3 d-flex justify-content-between align-items-center">
                    <h5 class="mb-0 fw-bold">Event Assignments</h5>
                    <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#assignEventModal">
                        + Assign Event
                    </button>
                </div>
                <div class="table-responsive">
                    <table class="table table-hover mb-0 align-middle">
                        <thead class="bg-light">
                            <tr>
                                <th class="ps-4">Event</th>
                                <th>Role</th>
                                <th class="pe-4 text-end">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for assignment in assignments %}
                            <tr>
                                <td class="ps-4">
                                    <a href="{% url 'event_detail' assignment.event.id %}" class="fw-semibold text-primary text-decoration-none">
                                        {{ assignment.event.name|default:assignment.event.event_type }}
                                    </a>
                                    <div class="small text-muted">{{ assignment.event.date|date:"M d, Y" }}</div>
                                </td>
                                <td>{{ assignment.role }}</td>
                                <td class="pe-4 text-end">
                                    <form action="{% url 'volunteer_remove_event' assignment.id %}" method="POST" onsubmit="return confirm('Remove this assignment?')">
                                        {% csrf_token %}
                                        <button type="submit" class="btn btn-sm btn-link text-danger p-0">Remove</button>
                                    </form>
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="3" class="text-center py-5 text-muted">
                                    No events assigned yet.
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        {% endif %}
    </div>
</div>

<!-- Add Interest Modal -->
<div class="modal fade" id="addInterestModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content border-0 shadow">
            <div class="modal-header border-0 pb-0">
                <h6 class="modal-title fw-bold">New Interest Type</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <input type="text" id="newInterestName" class="form-control" placeholder="e.g. Phone Banking">
            </div>
            <div class="modal-footer border-0 pt-0">
                <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" id="saveInterestBtn" class="btn btn-sm btn-primary">Add</button>
            </div>
        </div>
    </div>
</div>

<!-- Manage Interests Modal -->
<div class="modal fade" id="manageInterestsModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content border-0 shadow">
            <div class="modal-header border-0 bg-light">
                <h5 class="modal-title fw-bold">Manage Interest Types</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p class="small text-muted mb-3">Deleting an interest type will remove it from all volunteers in the campaign.</p>
                <div class="list-group list-group-flush" id="manageInterestsList">
                    {% for interest in form.interests.field.queryset %}
                    <div class="list-group-item d-flex justify-content-between align-items-center px-0 interest-manage-item" data-id="{{ interest.id }}">
                        <span>{{ interest.name }}</span>
                        <button type="button" class="btn btn-sm btn-outline-danger border-0 delete-interest-btn" data-id="{{ interest.id }}">
                            <i class="bi bi-trash"></i>
                        </button>
                    </div>
                    {% endfor %}
                </div>
            </div>
            <div class="modal-footer border-0">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

{% if volunteer %}
<!-- Assign Event Modal -->
<div class="modal fade" id="assignEventModal" tabindex="-1" aria-labelledby="assignEventModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content border-0 shadow">
            <div class="modal-header border-0 bg-primary text-white">
                <h5 class="modal-title fw-bold" id="assignEventModalLabel">Assign Volunteer to Event</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{% url 'volunteer_assign_event' volunteer.id %}" method="POST">
                {% csrf_token %}
                <div class="modal-body p-4">
                    <div class="mb-3">
                        <label for="{{ assign_form.event.id_for_label }}" class="form-label fw-bold">Select Event</label>
                        {{ assign_form.event }}
                    </div>
                    <div class="mb-0">
                        <label for="{{ assign_form.role.id_for_label }}" class="form-label fw-bold">Role/Task</label>
                        {{ assign_form.role }}
                        <div class="form-text">e.g., Door knocker, Registration desk, Driver</div>
                    </div>
                </div>
                <div class="modal-footer border-0 p-4 pt-0">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary px-4">Assign Event</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endif %}

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize Tom Select
    const interestSelect = new TomSelect('#id_interests', {
        plugins: ['remove_button'],
        placeholder: 'Search for interests...',
        create: false,
    });

    const saveInterestBtn = document.getElementById('saveInterestBtn');
    const newInterestNameInput = document.getElementById('newInterestName');
    const manageInterestsList = document.getElementById('manageInterestsList');

    saveInterestBtn.addEventListener('click', function() {
        const name = newInterestNameInput.value.trim();
        if (!name) return;

        const formData = new FormData();
        formData.append('name', name);
        formData.append('csrfmiddlewaretoken', '{{ csrf_token }}');

        fetch('{% url "interest_add" %}', {
            method: 'POST',
            body: formData,
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Add new option to Tom Select and select it
                interestSelect.addOption({value: data.id, text: data.name});
                interestSelect.addItem(data.id);
                
                // Add to manage list
                const item = document.createElement('div');
                item.className = 'list-group-item d-flex justify-content-between align-items-center px-0 interest-manage-item';
                item.dataset.id = data.id;
                item.innerHTML = `
                    <span>${data.name}</span>
                    <button type="button" class="btn btn-sm btn-outline-danger border-0 delete-interest-btn" data-id="${data.id}">
                        <i class="bi bi-trash"></i>
                    </button>
                `;
                manageInterestsList.appendChild(item);
                
                // Close modal and reset input
                const modal = bootstrap.Modal.getInstance(document.getElementById('addInterestModal'));
                modal.hide();
                newInterestNameInput.value = '';
                
                // Re-bind delete events
                bindDeleteEvents();
            } else {
                alert(data.error || 'Error adding interest.');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('An error occurred.');
        });
    });

    function bindDeleteEvents() {
        document.querySelectorAll('.delete-interest-btn').forEach(btn => {
            btn.onclick = function() {
                const id = this.dataset.id;
                if (!confirm('Are you sure you want to delete this interest type from the campaign? This will remove it from all volunteers.')) {
                    return;
                }

                const formData = new FormData();
                formData.append('csrfmiddlewaretoken', '{{ csrf_token }}');

                fetch(`/interests/${id}/delete/`, {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        // Remove from Tom Select
                        interestSelect.removeOption(id);
                        
                        // Remove from manage list
                        const item = document.querySelector(`.interest-manage-item[data-id="${id}"]`);
                        if (item) item.remove();
                    } else {
                        alert(data.error || 'Error deleting interest.');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('An error occurred.');
                });
            };
        });
    }

    bindDeleteEvents();
});
</script>
{% endblock %}