{% extends 'schasite/base2.html' %}
{% load static  %}

{% block pagetitle %}
<title>Stonehedge Community Homeowners Association</title>
<script type="text/css">
    /* Membership Form Specific Styles */
#membershipForm fieldset {
    margin-bottom: 2rem;
    padding: 1.5rem;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
}

#membershipForm legend {
    width: auto;
    padding: 0 0.5rem;
    margin-bottom: 0;
    font-size: 1.25rem;
}

.form-check-label {
    user-select: none;
}

/* Responsive adjustments */
@media (max-width: 767.98px) {
    #membershipForm fieldset {
        padding: 1rem;
    }
    
    #membershipForm legend {
        font-size: 1.1rem;
    }
}

/* Form validation styling */
.was-validated .form-control:valid,
.was-validated .form-control.is-valid {
    border-color: #198754;
    background-image: none;
}

.was-validated .form-control:invalid,
.was-validated .form-control.is-invalid {
    border-color: #dc3545;
    background-image: none;
}

/* Modal styling */
.modal-content {
    border: none;
}

.modal-header {
    background-color: var(--bs-success);
    color: white;
}

.modal-header .btn-close {
    filter: invert(1);
}
</script>
    
{% endblock %}

{% block content %}
<main class="py-5">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="card shadow-sm">
                    <div class="card-header bg-success text-white">
                        <h2 class="h4 mb-0">New Member Information</h2>
                    </div>
                    <div class="card-body">
                        <form id="membershipForm" method="POST" action='{% url "membership_form2" %}' class="needs-validation" novalidate>
                            {% csrf_token %}
                            <!-- Household Information -->
                            <fieldset class="mb-4">
                                <legend class="h5 text-success border-bottom pb-2">Household Information</legend>
                                
                                <!-- Address Section -->
                                <div class="row g-3 mb-4">
                                    <div class="col-md-6">
                                        <label for="streetAddress" class="form-label">Street Address*</label>
                                        <input type="text" class="form-control" id="streetAddress" name="streetAddress" required>
                                        <div class="invalid-feedback">
                                            Please provide your street address.
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="unit" class="form-label">Unit/Apt #</label>
                                        <input type="text" class="form-control" id="unit" name="unit">
                                    </div>
                                    <div class="col-md-4">
                                        <label for="city" class="form-label">City*</label>
                                        <input type="text" class="form-control" id="city" name="city" value="Wheaton" required>
                                        <div class="invalid-feedback">
                                            Please provide your city.
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <label for="state" class="form-label">State*</label>
                                        <select class="form-select" id="state" name="state" value="Illinois" required>
                                            <option value="" selected disabled>Choose...</option>
                                            <option>IL</option>
                                        </select>
                                        <div class="invalid-feedback">
                                            Please select your state.
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <label for="zipCode" class="form-label">ZIP Code*</label>
                                        <input type="text" class="form-control" id="zipCode" value="zipCode" value="60189" required>
                                        <div class="invalid-feedback">
                                            Please provide your ZIP code.
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- Primary Member -->
                                <div class="row g-3 mb-4">
                                    <div class="col-12">
                                        <h5 class="text-success">Primary Member*</h5>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="firstName1" class="form-label">First Name*</label>
                                        <input type="text" class="form-control" id="firstName1" name="firstName1" required>
                                        <div class="invalid-feedback">
                                            Please provide first name.
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="lastName1" class="form-label">Last Name*</label>
                                        <input type="text" class="form-control" id="lastName1" name="lastName1" required>
                                        <div class="invalid-feedback">
                                            Please provide last name.
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="email1" class="form-label">Email*</label>
                                        <input type="email" class="form-control" id="email1" name="email1" required>
                                        <div class="invalid-feedback">
                                            Please provide a valid email.
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="phone1" class="form-label">Phone*</label>
                                        <input type="tel" class="form-control" id="phone1" name="phone1" required>
                                        <div class="invalid-feedback">
                                            Please provide phone number.
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- Secondary Member (Optional) -->
                                <div class="row g-3 mb-4">
                                    <div class="col-12">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="addSecondMember">
                                            <label class="form-check-label" for="addSecondMember">
                                                Add Second Household Member
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                
                                <div id="secondMemberSection" class="row g-3 mb-4" style="display: none;">
                                    <div class="col-12">
                                        <h5 class="text-success">Secondary Member</h5>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="firstName2" class="form-label">First Name</label>
                                        <input type="text" class="form-control" id="firstName2" name="firstName2">
                                    </div>
                                    <div class="col-md-6">
                                        <label for="lastName2" class="form-label">Last Name</label>
                                        <input type="text" class="form-control" id="lastName2" name="lastName2">
                                    </div>
                                    <div class="col-md-6">
                                        <label for="email2" class="form-label">Email</label>
                                        <input type="email" class="form-control" id="email2" name="email2">
                                    </div>
                                    <div class="col-md-6">
                                        <label for="phone2" class="form-label">Phone</label>
                                        <input type="tel" class="form-control" id="phone2" name="phone2">
                                    </div>
                                </div>
                            </fieldset>
                            
                            <!-- Committees Section -->
                            <fieldset class="mb-4">
                                <legend class="h5 text-success border-bottom pb-2">Committee Interests</legend>
                                <p>Check all committees you're interested in joining:</p>
                                
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="checkbox" id="block_captain" for="block_captain" name="block_captain">
                                            <label class="form-check-label" id="block_captain">
                                                BlockCaptain
                                            </label>
                                        </div>
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="checkbox" id="coordinator" for="coordinator" name="coordinator">
                                            <label class="form-check-label" id="coordinator">
                                                Coordinator
                                            </label>
                                        </div>
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="checkbox" id="egg_hunt" for="egg_hunt" name="egg_hunt">
                                            <label class="form-check-label" id="egg_hunt">
                                                Easter Egg Hunt
                                            </label>
                                        </div>
                                    
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="checkbox" id="spring_garage_sale" for="spring_garage_sale" name="spring_garage_sale">
                                            <label class="form-check-label" id="spring_garage_sale">
                                                Spring Garage Sale
                                            </label>
                                        </div>
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="checkbox" id="golf_outing" for="golf_outing" name="golf_outing">
                                            <label class="form-check-label" id="golf_outing">
                                                Golf Outing
                                            </label>
                                        </div>
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="checkbox" id="ice_cream_social" for="ice_cream_social" name="ice_cream_social">
                                            <label class="form-check-label" id="ice_cream_social">
                                                Ice Creame Social
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="checkbox" id="fall_garage_sale" for="fall_garage_sale" name="fall_garage_sale">
                                            <label class="form-check-label" id="fall_garage_sale">
                                                Fall Garage Sale
                                            </label>
                                        </div>
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="checkbox" id="halloween_party" for="halloween_party" name="halloween_party">
                                            <label class="form-check-label" id="halloween_party">
                                                Halloween Party
                                            </label>
                                        </div>
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="checkbox" id="santa_visit" for="santa_visit" name="santa_visit">
                                            <label class="form-check-label" id="santa_visit">
                                                Santa Visits
                                            </label>
                                        </div>
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="checkbox" id="civic_affair" for="civic_affair" name="civic_affair">
                                            <label class="form-check-label" id="civic_affair">
                                                Civic Affairs Journalist
                                            </label>
                                        </div>
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="checkbox" id="phone_directory" for="phone_directory" name="phone_directory">
                                            <label class="form-check-label" id="phone_directory">
                                                Annual Phone Director
                                            </label>
                                        </div>
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="checkbox" id="no_preference" for="no_preference" name="no_preference">
                                            <label class="form-check-label" id="no_preference">
                                                No Preference
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </fieldset>
                            
                            <!-- Services Section -->
                            <fieldset class="mb-4">
                                <legend class="h5 text-success border-bottom pb-2">Services</legend>
                                <p>Check if you're interested in providing these services to neighbors:</p>
                                
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="checkbox" id="babysitting" for="babysitting" name="babysitting">
                                            <label class="form-check-label" for="babysitting">
                                                Babysitting
                                            </label>
                                        </div>
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="checkbox" id="lawn_mowing" for="lawn_mowing" name="lawn_mowing">
                                            <label class="form-check-label" for="lawn_mowing">
                                                Lawn Mowing
                                            </label>
                                        </div>
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="checkbox" id="snow_shoveling" for="snow_shoveling" name="snow_shoveling">
                                            <label class="form-check-label" for="snow_shoveling">
                                                Snow Shoveling
                                            </label>
                                        </div>
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="checkbox" id="leaf_raking" for="leaf_raking" name="leaf_raking">
                                            <label class="form-check-label" for="leaf_raking">
                                                Lead Raking
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="checkbox" id="house_sitting" for="house_sitting" name="house_sitting">
                                            <label class="form-check-label" for="house_sitting">
                                                House Sitting
                                            </label>
                                        </div>
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="checkbox" id="petsitting" for="petsitting" name="petsitting">
                                            <label class="form-check-label" for="petsitting">
                                                Pet Sitting
                                            </label>
                                        </div>
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="checkbox" id="other" for="other" name="other">
                                            <label class="form-check-label" for="other">
                                                Other (please specify)
                                            </label>
                                        </div>
                                    </div>
                                    <div class="mt-3">
                                        <label for="other_desc" class="form-label">Other interests or skills you'd like to contribute:</label>
                                        <textarea class="form-control" id="other_desc" for="other_desc" name="other_desc" rows="2"></textarea>
                                    </div>
                                </div>
                                
                                <div class="mt-3" id="otherServiceSpecify" style="display: none;">
                                    <label for="otherServiceDetails" class="form-label">Please specify other service:</label>
                                    <input type="text" class="form-control" id="otherServiceDetails">
                                </div>
                            </fieldset>
                            
                            <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                                {% if captchaForm %}
                                {{ captchaForm }}
                                {% endif %}
                                <button class="btn btn-outline-secondary me-md-2" type="reset">Reset Form</button>
                                <button class="btn btn-success" type="submit">Submit Membership</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

{% endblock %}


{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Toggle second member section
        const addSecondMember = document.getElementById('addSecondMember');
        const secondMemberSection = document.getElementById('secondMemberSection');
        
        addSecondMember.addEventListener('change', function() {
            if(this.checked) {
                secondMemberSection.style.display = 'flex';
            } else {
                secondMemberSection.style.display = 'none';
                // Clear second member fields when hidden
                document.getElementById('firstName2').value = '';
                document.getElementById('lastName2').value = '';
                document.getElementById('email2').value = '';
                document.getElementById('phone2').value = '';
            }
        });
        
        // Toggle other service field
        const otherService = document.getElementById('otherService');
        const otherServiceSpecify = document.getElementById('otherServiceSpecify');
        
        otherService.addEventListener('change', function() {
            otherServiceSpecify.style.display = this.checked ? 'block' : 'none';
            if(!this.checked) {
                document.getElementById('otherServiceDetails').value = '';
            }
        });
        
        // Form validation
        const form = document.getElementById('membershipForm');
        
        form.addEventListener('submit', function(event) {
            if (!form.checkValidity()) {
                event.preventDefault();
                event.stopPropagation();
            }
            
            form.classList.add('was-validated');
        }, false);
        
        // Phone number formatting
        const phoneInputs = document.querySelectorAll('input[type="tel"]');
        phoneInputs.forEach(input => {
            input.addEventListener('input', function() {
                this.value = this.value.replace(/[^0-9]/g, '');
                if(this.value.length > 10) {
                    this.value = this.value.slice(0, 10);
                }
            });
        });
    });
</script>
{% endblock %}