{% extends "base.html" %}
{% load static %}

{% block title %}Password Reset Complete - Hospital Management System{% endblock %}

{% block css %}
<style>
.reset-complete-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.reset-complete-card {
    background: white;
    border-radius: 15px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    width: 100%;
    max-width: 450px;
}

.reset-complete-header {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    padding: 2rem;
    text-align: center;
}

.reset-complete-body {
    padding: 2rem;
}

.success-icon {
    font-size: 4rem;
    color: #28a745;
    margin-bottom: 1rem;
}

.btn-login {
    background: linear-gradient(135deg, #348ac7 0%, #7474bf 100%);
    border: none;
    padding: 12px 24px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(52, 138, 199, 0.4);
}

.auto-redirect {
    background: #e3f2fd;
    border: 1px solid #2196f3;
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
}

.countdown-timer {
    font-weight: bold;
    color: #1976d2;
    font-size: 1.2rem;
}
</style>
{% endblock %}

{% block content %}
<div class="reset-complete-container">
    <div class="reset-complete-card">
        <div class="reset-complete-header">
            <h3 class="mb-0">
                <i class="fas fa-hospital-alt me-2"></i>
                Hospital Management
            </h3>
            <p class="mb-0 mt-2 opacity-75">Password reset successful</p>
        </div>
        
        <div class="reset-complete-body">
            <div class="text-center">
                <div class="success-icon">
                    <i class="fas fa-check-circle"></i>
                </div>
                
                <h4 class="text-success mb-3">Password Reset Complete!</h4>
                
                <p class="text-muted mb-4">
                    Your password has been successfully reset. You can now sign in with your new password.
                </p>
            </div>

            <div class="alert alert-success">
                <h6 class="alert-heading">
                    <i class="fas fa-shield-check me-2"></i>Security Update
                </h6>
                <ul class="mb-0 small">
                    <li>Your password has been securely updated</li>
                    <li>All existing sessions have been terminated</li>
                    <li>You'll need to sign in again on all devices</li>
                    <li>The reset link has been invalidated</li>
                </ul>
            </div>

            <div class="auto-redirect mb-4">
                <div class="mb-2">
                    <i class="fas fa-clock text-primary me-2"></i>
                    <strong>Auto-redirect in:</strong>
                </div>
                <div class="countdown-timer" id="countdown">10</div>
                <small class="text-muted d-block mt-2">
                    You'll be automatically redirected to the login page
                </small>
            </div>

            <div class="d-grid gap-2">
                <a href="{% url 'accounts:login' %}" class="btn btn-primary btn-login">
                    <i class="fas fa-sign-in-alt me-2"></i>Sign In Now
                </a>
                
                <button type="button" class="btn btn-outline-secondary" onclick="cancelRedirect()">
                    <i class="fas fa-pause me-2"></i>Cancel Auto-redirect
                </button>
            </div>

            <hr class="my-4">

            <div class="alert alert-info">
                <h6 class="alert-heading">
                    <i class="fas fa-lightbulb me-2"></i>Security Tips
                </h6>
                <ul class="mb-0 small">
                    <li>Keep your password secure and don't share it</li>
                    <li>Use a unique password for this account</li>
                    <li>Consider enabling two-factor authentication</li>
                    <li>Sign out when using shared computers</li>
                </ul>
            </div>

            <div class="text-center">
                <small class="text-muted">
                    <i class="fas fa-calendar-alt me-1"></i>
                    Password reset completed on: <span id="current-date"></span>
                </small>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Display current date and time
    const now = new Date();
    const options = { 
        year: 'numeric', 
        month: 'long', 
        day: 'numeric', 
        hour: '2-digit', 
        minute: '2-digit',
        timeZoneName: 'short'
    };
    document.getElementById('current-date').textContent = now.toLocaleDateString('en-US', options);
    
    // Countdown timer
    let countdown = 10;
    const countdownElement = document.getElementById('countdown');
    let redirectTimer;
    let countdownInterval;
    
    function startCountdown() {
        countdownInterval = setInterval(() => {
            countdown--;
            countdownElement.textContent = countdown;
            
            if (countdown <= 0) {
                clearInterval(countdownInterval);
                window.location.href = "{% url 'accounts:login' %}";
            }
        }, 1000);
        
        // Set the redirect timer
        redirectTimer = setTimeout(() => {
            window.location.href = "{% url 'accounts:login' %}";
        }, 10000);
    }
    
    // Start the countdown
    startCountdown();
    
    // Cancel redirect function
    window.cancelRedirect = function() {
        clearInterval(countdownInterval);
        clearTimeout(redirectTimer);
        
        const autoRedirectDiv = document.querySelector('.auto-redirect');
        autoRedirectDiv.innerHTML = `
            <div class="text-success">
                <i class="fas fa-check me-2"></i>
                <strong>Auto-redirect cancelled</strong>
            </div>
            <small class="text-muted d-block mt-2">
                You can now stay on this page or navigate manually
            </small>
        `;
        
        // Hide the cancel button
        const cancelBtn = document.querySelector('button[onclick="cancelRedirect()"]');
        cancelBtn.style.display = 'none';
    };
    
    // Add click tracking for analytics
    document.querySelector('a[href*="login"]').addEventListener('click', function() {
        // Clear timers if user clicks login manually
        clearInterval(countdownInterval);
        clearTimeout(redirectTimer);
    });
    
    // Show success animation
    setTimeout(() => {
        const successIcon = document.querySelector('.success-icon i');
        successIcon.style.animation = 'pulse 1s ease-in-out';
    }, 500);
});

// Add CSS animation for success icon
const style = document.createElement('style');
style.textContent = `
    @keyframes pulse {
        0% { transform: scale(1); }
        50% { transform: scale(1.1); }
        100% { transform: scale(1); }
    }
`;
document.head.appendChild(style);
</script>
{% endblock %}