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

{% block pagetitle %}
<title>Profile | SCHA</title>
<script type="text/css">
    .profile-avatar {
        width: 120px;
        height: 120px;
        margin: 0 auto 1rem;
    }
    
    .dues-history table {
        font-size: 0.875rem;
    }
    
    .dues-history th, 
    .dues-history td {
        padding: 0.5rem;
    }
    
    .list-group-item-action:hover {
        background-color: rgba(25, 135, 84, 0.05);
    }
    
    /* Communication Preferences */
    #preferencesForm .form-check {
        margin-bottom: 0.5rem;
    }
    
    /* Responsive adjustments */
    @media (max-width: 991.98px) {
        .profile-avatar {
            width: 80px;
            height: 80px;
        }
    }
    
    @media (max-width: 767.98px) {
        .profile-avatar {
            width: 100px;
            height: 100px;
        }
    }
</script>
{% endblock %}

{% block content %}
<main class="py-5">
    <div class="container">
        <div class="row mb-4">
            <div class="col-12">
                <h1 class="display-6">My Profile</h1>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="../index.html">Home</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Profile</li>
                    </ol>
                </nav>
            </div>
        </div>
        
        <div class="row g-4">
            <!-- Left Column -->
            <div class="col-lg-4">
                <!-- Member Card -->
                <div class="card shadow-sm mb-4">
                    <div class="card-header bg-success text-white">
                        <h3 class="h5 mb-0"><i class="bi bi-person-badge me-2"></i>Profile</h3>
                    </div>
                    <div class="card-body text-center">
                        <div class="mb-3">
                            <div class="bg-success bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center mx-auto" style="width: 120px; height: 120px;">
                                <i class="bi bi-person-fill text-success fs-1"></i>
                            </div>
                        </div>
                        <h4 class="card-title">John Doe</h4>
                        <p class="text-muted">Member since: January 15, 2020</p>
                        <hr>
                        <button class="btn btn-outline-success btn-sm mb-3">
                            <i class="bi bi-pencil me-1"></i>Edit Profile
                        </button>
                        <button class="btn btn-outline-success btn-sm mb-3">
                            <i class="bi bi-lock me-1"></i>Change Password
                        </button>
                    </div>
                </div>
                
                <!-- Dues Payment History -->
                <div class="card shadow-sm">
                    <div class="card-header bg-success text-white">
                        <h3 class="h5 mb-0"><i class="bi bi-credit-card me-2"></i>Dues Payment History</h3>
                    </div>
                    <div class="card-body">
                        <div class="alert alert-success">
                            <i class="bi bi-check-circle-fill me-2"></i>
                            <strong>Current Status:</strong> Paid through December 2024
                        </div>
                        <div class="table-responsive">
                            <table class="table table-sm">
                                <thead>
                                    <tr>
                                        <th>Date</th>
                                        <th>Amount</th>
                                        <th>Method</th>
                                        <th>Receipt</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>Jan 10, 2024</td>
                                        <td>$600.00</td>
                                        <td>Credit Card</td>
                                        <td><a href="#" class="text-success">View</a></td>
                                    </tr>
                                    <tr>
                                        <td>Jan 5, 2023</td>
                                        <td>$550.00</td>
                                        <td>Bank Transfer</td>
                                        <td><a href="#" class="text-success">View</a></td>
                                    </tr>
                                    <tr>
                                        <td>Jan 8, 2022</td>
                                        <td>$525.00</td>
                                        <td>Check</td>
                                        <td><a href="#" class="text-success">View</a></td>
                                    </tr>
                                    <tr>
                                        <td>Jan 12, 2021</td>
                                        <td>$500.00</td>
                                        <td>Credit Card</td>
                                        <td><a href="#" class="text-success">View</a></td>
                                    </tr>
                                    <tr>
                                        <td>Jan 15, 2020</td>
                                        <td>$500.00</td>
                                        <td>Check</td>
                                        <td><a href="#" class="text-success">View</a></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="text-center mt-2">
                            <a href="#" class="btn btn-sm btn-success">
                                <i class="bi bi-printer me-1"></i>Print Full History
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Right Column -->
            <div class="col-lg-8">
                <!-- Member Details -->
                <div class="card shadow-sm mb-4">
                    <div class="card-header bg-success text-white">
                        <div class="d-flex justify-content-between align-items-center">
                            <h3 class="h5 mb-0"><i class="bi bi-house-heart me-2"></i>Member Details</h3>
                            <button class="btn btn-sm btn-light" id="editDetailsBtn">
                                <i class="bi bi-pencil me-1"></i>Edit
                            </button>
                        </div>
                    </div>
                    <div class="card-body">
                        <form id="memberDetailsForm">
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="form-label">First Name</label>
                                    <input type="text" class="form-control" value="John" disabled>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Last Name</label>
                                    <input type="text" class="form-control" value="Doe" disabled>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Email</label>
                                    <input type="email" class="form-control" value="john.doe@example.com" disabled>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Phone</label>
                                    <input type="tel" class="form-control" value="(555) 123-4567" disabled>
                                </div>
                                <div class="col-12">
                                    <label class="form-label">Street Address</label>
                                    <input type="text" class="form-control" value="123 Oak Drive" disabled>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">City</label>
                                    <input type="text" class="form-control" value="Anytown" disabled>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">State</label>
                                    <input type="text" class="form-control" value="ST" disabled>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">ZIP Code</label>
                                    <input type="text" class="form-control" value="12345" disabled>
                                </div>
                                <div class="col-12 mt-3" id="saveDetailsBtn" style="display: none;">
                                    <button type="submit" class="btn btn-success me-2">Save Changes</button>
                                    <button type="button" class="btn btn-outline-secondary" id="cancelEditBtn">Cancel</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                
                <!-- My Posts -->
                <div class="card shadow-sm mb-4">
                    <div class="card-header bg-success text-white">
                        <h3 class="h5 mb-0"><i class="bi bi-pencil-square me-2"></i>My Posts</h3>
                    </div>
                    <div class="card-body">
                        <div class="list-group list-group-flush">
                            <a href="../posts/detail.html" class="list-group-item list-group-item-action">
                                <div class="d-flex w-100 justify-content-between">
                                    <h6 class="mb-1">Looking for lawn service recommendations</h6>
                                    <small class="text-muted">May 28, 2024</small>
                                </div>
                                <p class="mb-1 small">Does anyone have a landscaper they would recommend for weekly mowing?</p>
                                <small><span class="badge bg-success bg-opacity-10 text-success">Discussion</span> • 5 comments</small>
                            </a>
                            <a href="../posts/detail.html" class="list-group-item list-group-item-action">
                                <div class="d-flex w-100 justify-content-between">
                                    <h6 class="mb-1">Lost cat - gray tabby</h6>
                                    <small class="text-muted">April 15, 2024</small>
                                </div>
                                <p class="mb-1 small">Our cat Mittens got out last night near Oak Drive. Please contact if seen!</p>
                                <small><span class="badge bg-success bg-opacity-10 text-success">Help Needed</span> • 12 comments</small>
                            </a>
                            <a href="../posts/detail.html" class="list-group-item list-group-item-action">
                                <div class="d-flex w-100 justify-content-between">
                                    <h6 class="mb-1">Garage sale this weekend</h6>
                                    <small class="text-muted">March 30, 2024</small>
                                </div>
                                <p class="mb-1 small">We're having a garage sale Saturday 8am-2pm with furniture, tools, and more.</p>
                                <small><span class="badge bg-success bg-opacity-10 text-success">For Sale</span> • 3 comments</small>
                            </a>
                        </div>
                        <div class="text-center mt-3">
                            <a href="../posts/" class="btn btn-sm btn-outline-success">View All My Posts</a>
                        </div>
                    </div>
                </div>
                
                <!-- My Comments -->
                <div class="card shadow-sm mb-4">
                    <div class="card-header bg-success text-white">
                        <h3 class="h5 mb-0"><i class="bi bi-chat-left-text me-2"></i>Posts I've Commented On</h3>
                    </div>
                    <div class="card-body">
                        <div class="list-group list-group-flush">
                            <a href="../posts/detail.html" class="list-group-item list-group-item-action">
                                <div class="d-flex w-100 justify-content-between">
                                    <h6 class="mb-1">Annual Community Picnic</h6>
                                    <small class="text-muted">June 5, 2024</small>
                                </div>
                                <p class="mb-1 small"><strong>My comment:</strong> "Looking forward to it! I'll bring potato salad."</p>
                                <small><span class="badge bg-success bg-opacity-10 text-success">Announcement</span> • 24 comments total</small>
                            </a>
                            <a href="../posts/detail.html" class="list-group-item list-group-item-action">
                                <div class="d-flex w-100 justify-content-between">
                                    <h6 class="mb-1">Pool opening delayed</h6>
                                    <small class="text-muted">May 20, 2024</small>
                                </div>
                                <p class="mb-1 small"><strong>My comment:</strong> "Thanks for the update. Any estimate on opening date?"</p>
                                <small><span class="badge bg-success bg-opacity-10 text-success">Announcement</span> • 8 comments total</small>
                            </a>
                            <a href="../posts/detail.html" class="list-group-item list-group-item-action">
                                <div class="d-flex w-100 justify-content-between">
                                    <h6 class="mb-1">Neighborhood watch meeting</h6>
                                    <small class="text-muted">April 10, 2024</small>
                                </div>
                                <p class="mb-1 small"><strong>My comment:</strong> "I can help organize the next meeting."</p>
                                <small><span class="badge bg-success bg-opacity-10 text-success">Event</span> • 15 comments total</small>
                            </a>
                        </div>
                        <div class="text-center mt-3">
                            <a href="../posts/" class="btn btn-sm btn-outline-success">View All My Comments</a>
                        </div>
                    </div>
                </div>
                
                <!-- Communication Preferences -->
                <div class="card shadow-sm">
                    <div class="card-header bg-success text-white">
                        <h3 class="h5 mb-0"><i class="bi bi-envelope me-2"></i>Communication Preferences</h3>
                    </div>
                    <div class="card-body">
                        <form id="preferencesForm">
                            <div class="mb-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="emailNotifications" checked>
                                    <label class="form-check-label" for="emailNotifications">
                                        Receive email notifications
                                    </label>
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <h6 class="mb-2">Notification Types:</h6>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="postReplies" checked>
                                    <label class="form-check-label" for="postReplies">
                                        When someone replies to my posts
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="commentReplies" checked>
                                    <label class="form-check-label" for="commentReplies">
                                        When someone replies to my comments
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="communityAnnouncements" checked>
                                    <label class="form-check-label" for="communityAnnouncements">
                                        Community announcements
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="eventReminders">
                                    <label class="form-check-label" for="eventReminders">
                                        Event reminders
                                    </label>
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="showInDirectory" checked>
                                    <label class="form-check-label" for="showInDirectory">
                                        Include my contact information in the member directory
                                    </label>
                                </div>
                                <div class="form-text">
                                    Uncheck to hide your email and phone number from other members
                                </div>
                            </div>
                            
                            <div class="mt-4">
                                <button type="submit" class="btn btn-success">Save Preferences</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

{% endblock %}
{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Edit details toggle
        const editBtn = document.getElementById('editDetailsBtn');
        const cancelBtn = document.getElementById('cancelEditBtn');
        const saveBtn = document.getElementById('saveDetailsBtn');
        const formInputs = document.querySelectorAll('#memberDetailsForm input');
        
        editBtn.addEventListener('click', function() {
            formInputs.forEach(input => {
                input.disabled = false;
            });
            saveBtn.style.display = 'block';
            editBtn.style.display = 'none';
        });
        
        cancelBtn.addEventListener('click', function() {
            formInputs.forEach(input => {
                input.disabled = true;
            });
            saveBtn.style.display = 'none';
            editBtn.style.display = 'block';
        });
        
        // Form submissions
        document.getElementById('memberDetailsForm').addEventListener('submit', function(e) {
            e.preventDefault();
            // In a real implementation, this would save the changes
            alert('Profile details updated successfully (simulated)');
            formInputs.forEach(input => {
                input.disabled = true;
            });
            saveBtn.style.display = 'none';
            editBtn.style.display = 'block';
        });
        
        document.getElementById('preferencesForm').addEventListener('submit', function(e) {
            e.preventDefault();
            // In a real implementation, this would save preferences
            alert('Communication preferences saved (simulated)');
        });
    });
</script>
{% endblock %}