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

{% block pagetitle %}
<title>Pay Dues | Stonehedge Community Homeowners Association</title>
<style type="text/css">
    /* Payment Page Specific Styles */
.payment-option-card {
    transition: transform 0.3s ease;
    border-width: 2px;
}

.payment-option-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.payment-option-card .bi {
    font-size: 3rem;
}

/* Table styles */
.table thead th {
    background-color: var(--bs-success);
    color: white;
}

/* Responsive adjustments */
@media (max-width: 767.98px) {
    .payment-option-card {
        margin-bottom: 1.5rem;
    }
    
    .table-responsive {
        font-size: 0.875rem;
    }
}

/* Stripe button styling */
.btn-stripe {
    background-color: #635bff;
    color: white;
    border: none;
}

.btn-stripe:hover {
    background-color: #4a42d1;
    color: white;
}
</style>
{% endblock %}

{% block meta_tags %}
<meta name="description" content="Pay annual Stonehedge HOA dues securely online via Stripe. Current annual dues are $30.">
{% endblock %}
{% block og_title %}Pay Dues | Stonehedge Community Homeowners Association{% endblock %}
{% block og_description %}Pay annual Stonehedge HOA dues securely online via Stripe. Current annual dues are $30.{% endblock %}
{% block twitter_title %}Pay Dues | Stonehedge Community Homeowners Association{% endblock %}
{% block twitter_description %}Pay annual Stonehedge HOA dues securely online via Stripe. Current annual dues are $30.{% endblock %}

{% block content %}
<div class="py-5">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <!-- Payment Information Card -->
                <div class="card shadow-sm mb-5">
                    <div class="card-header bg-success text-white">
                        <h1 class="h3 mb-0">Payment Information</h1>
                    </div>
                    <div class="card-body">
                        <div class="alert alert-info">
                            <i class="bi bi-info-circle-fill me-2"></i>
                            You will be redirected to our secure payment processor (Stripe) to complete your transaction.
                        </div>
                        
                        <h4 class="text-success mb-4">Annual Dues</h4>
                        
                        <div class="table-responsive mb-4">
                            <table class="table table-bordered">
                                <thead class="table-success">
                                    <tr>
                                        <th>Payment Option</th>
                                        <th>Amount</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>Full Payment (Annual)</td>
                                        <td>$30.00</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        
                        <!-- <div class="mb-4 p-3 bg-light rounded">
                            <h5 class="text-success"><i class="bi bi-house-check-fill me-2"></i>Property Information</h5>
                            <p><strong>Member:</strong> John Doe (Lot #42)</p>
                            <p><strong>Current Balance:</strong> $600.00 (Due January 15, 2024)</p>
                            <p><strong>Last Payment:</strong> $600.00 on January 10, 2023</p>
                            <a href="#" class="btn btn-sm btn-outline-success">View Payment History</a>
                        </div> -->
                    </div>
                </div>
                
                <!-- Payment Options -->
                <div class="card shadow-sm mb-5">
                    <div class="card-header bg-success text-white">
                        <h3 class="mb-0">Payment Options</h3>
                    </div>
                    <div class="card-body">
                        <div class="row g-4">
                            <!-- Credit/Debit Card -->
                            <div class="col-md-6">
                                <div class="card h-100 border-success">
                                    <div class="card-body text-center">
                                        <i class="bi bi-credit-card text-success display-4 mb-3"></i>
                                        <h4 class="text-success">Credit/Debit Card</h4>
                                        <p class="card-text">Pay securely with Visa, Mastercard, American Express, or Discover.</p>
                                        
                                        <button class="btn btn-success mt-3" id="submitBtn" type="button" aria-label="Pay annual dues with credit or debit card">Pay Dues</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <hr class="my-4">
                        
                        <!-- Other Payment Methods -->
                        <div class="row">
                            <div class="col-12">
                                <h5 class="text-success mb-3">Other Payment Methods</h5>
                                <div class="d-flex flex-wrap gap-3">
                                    <a href="#" class="btn btn-outline-success">
                                        <i class="bi bi-cash-coin me-2"></i>Mail a Check
                                    </a>
                                    <a href="#" class="btn btn-outline-success">
                                        <i class="bi bi-building me-2"></i>In-Person Payment
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Payment FAQ -->
                <div class="card shadow-sm">
                    <div class="card-header bg-success text-white">
                        <h3 class="mb-0">Payment FAQ</h3>
                    </div>
                    <div class="card-body">
                        <div class="accordion" id="paymentFAQ">
                            <div class="accordion-item">
                                <h2 class="accordion-header">
                                    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faq1">
                                        Is there a fee for online payments?
                                    </button>
                                </h2>
                                <div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#paymentFAQ">
                                    <div class="accordion-body">
                                        No, the HOA absorbs all processing fees for online payments. You pay exactly your dues amount with no additional fees.
                                    </div>
                                </div>
                            </div>
                            <div class="accordion-item">
                                <h2 class="accordion-header">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2">
                                        When will my payment be reflected in my account?
                                    </button>
                                </h2>
                                <div id="faq2" class="accordion-collapse collapse" data-bs-parent="#paymentFAQ">
                                    <div class="accordion-body">
                                        Credit/debit card payments are posted immediately.
                                    </div>
                                </div>
                            </div>
                            <div class="accordion-item">
                                <h2 class="accordion-header">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq4">
                                        What payment methods do you accept?
                                    </button>
                                </h2>
                                <div id="faq4" class="accordion-collapse collapse" data-bs-parent="#paymentFAQ">
                                    <div class="accordion-body">
                                        Online we accept all major credit/debit cards (Visa, Mastercard, American Express, Discover). For in-person or mail payments, we accept checks or money orders made payable to "SCHA"
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}
{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <!-- Stripe Integration Script (example) -->
    <script src="https://js.stripe.com/v3/"></script>
    <script src="{% static 'main.js' %}"></script>  
{% endblock %}