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

{% block pagetitle %}
<title>Set Password | SCHA</title>
{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-md-8 col-lg-6">
            <div class="card shadow-sm">
                <div class="card-header bg-success text-white text-center">
                    <h2><i class="bi bi-key me-2"></i>Set New Password</h2>
                </div>
                <div class="card-body p-4">
                    <form id="passwordForm" class="needs-validation" novalidate>
                        <div class="mb-3">
                            <label for="newPassword" class="form-label">New Password</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="bi bi-lock"></i></span>
                                <input type="password" class="form-control" id="newPassword" required
                                       pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}">
                                <button class="btn btn-outline-secondary" type="button" id="toggleNewPassword">
                                    <i class="bi bi-eye"></i>
                                </button>
                                <div class="invalid-feedback">
                                    Password must contain at least 8 characters with uppercase, lowercase, and a number.
                                </div>
                            </div>
                            <div class="form-text">
                                <small>Must be at least 8 characters with uppercase, lowercase, and a number.</small>
                            </div>
                        </div>
                        
                        <div class="mb-4">
                            <label for="confirmPassword" class="form-label">Confirm Password</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="bi bi-lock"></i></span>
                                <input type="password" class="form-control" id="confirmPassword" required>
                                <button class="btn btn-outline-secondary" type="button" id="toggleConfirmPassword">
                                    <i class="bi bi-eye"></i>
                                </button>
                                <div class="invalid-feedback">
                                    Passwords must match.
                                </div>
                            </div>
                        </div>
                        
                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-success">
                                <i class="bi bi-check-circle me-2"></i>Set Password
                            </button>
                        </div>
                    </form>
                </div>
                <div class="card-footer text-center">
                    <a href="login.html" class="text-decoration-none"><i class="bi bi-arrow-left me-1"></i>Back to Login</a>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Toggle password visibility
        const toggleNewPassword = document.getElementById('toggleNewPassword');
        const newPasswordInput = document.getElementById('newPassword');
        const toggleConfirmPassword = document.getElementById('toggleConfirmPassword');
        const confirmPasswordInput = document.getElementById('confirmPassword');
        
        toggleNewPassword.addEventListener('click', function() {
            const type = newPasswordInput.getAttribute('type') === 'password' ? 'text' : 'password';
            newPasswordInput.setAttribute('type', type);
            this.innerHTML = type === 'password' ? '<i class="bi bi-eye"></i>' : '<i class="bi bi-eye-slash"></i>';
        });
        
        toggleConfirmPassword.addEventListener('click', function() {
            const type = confirmPasswordInput.getAttribute('type') === 'password' ? 'text' : 'password';
            confirmPasswordInput.setAttribute('type', type);
            this.innerHTML = type === 'password' ? '<i class="bi bi-eye"></i>' : '<i class="bi bi-eye-slash"></i>';
        });
        
        // Form validation
        const form = document.getElementById('passwordForm');
        
        form.addEventListener('submit', function(event) {
            event.preventDefault();
            event.stopPropagation();
            
            // Check if passwords match
            if (newPasswordInput.value !== confirmPasswordInput.value) {
                confirmPasswordInput.setCustomValidity("Passwords must match");
            } else {
                confirmPasswordInput.setCustomValidity("");
            }
            
            if (form.checkValidity()) {
                // In a real implementation, this would update the password
                alert('Password successfully updated (simulated)');
                window.location.href = "login.html";
            }
            
            form.classList.add('was-validated');
        }, false);
        
        // Live password validation
        newPasswordInput.addEventListener('input', function() {
            if (this.value !== confirmPasswordInput.value) {
                confirmPasswordInput.setCustomValidity("Passwords must match");
            } else {
                confirmPasswordInput.setCustomValidity("");
            }
        });
        
        confirmPasswordInput.addEventListener('input', function() {
            if (this.value !== newPasswordInput.value) {
                this.setCustomValidity("Passwords must match");
            } else {
                this.setCustomValidity("");
            }
        });
    });
</script>
{% endblock %}