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

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

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

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

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

.reset-done-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);
}

.email-preview {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem 0;
}

.countdown {
    font-weight: bold;
    color: #dc3545;
}
</style>
{% endblock %}

{% block content %}
<div class="reset-done-container">
    <div class="reset-done-card">
        <div class="reset-done-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 email sent</p>
        </div>
        
        <div class="reset-done-body">
            <div class="text-center">
                <div class="success-icon">
                    <i class="fas fa-envelope-circle-check"></i>
                </div>
                
                <h4 class="text-success mb-3">Check Your Email!</h4>
                
                <p class="text-muted mb-4">
                    We've sent password reset instructions to your email address. 
                    Please check your inbox and follow the link to reset your password.
                </p>
            </div>

            <div class="alert alert-success">
                <h6 class="alert-heading">
                    <i class="fas fa-check-circle me-2"></i>Email Sent Successfully
                </h6>
                <p class="mb-2">
                    If an account with that email address exists, you'll receive an email with instructions to reset your password.
                </p>
                <hr>
                <p class="mb-0 small">
                    <strong>Note:</strong> For security reasons, we don't confirm whether an email address is registered in our system.
                </p>
            </div>

            <div class="email-preview">
                <h6 class="mb-3">
                    <i class="fas fa-envelope me-2"></i>What to expect in your email:
                </h6>
                <ul class="list-unstyled mb-0">
                    <li class="mb-2">
                        <i class="fas fa-check text-success me-2"></i>
                        A secure link to reset your password
                    </li>
                    <li class="mb-2">
                        <i class="fas fa-check text-success me-2"></i>
                        Instructions on how to create a new password
                    </li>
                    <li class="mb-2">
                        <i class="fas fa-check text-success me-2"></i>
                        The link will expire in <span class="countdown" id="countdown">24 hours</span>
                    </li>
                    <li>
                        <i class="fas fa-check text-success me-2"></i>
                        Security information about the request
                    </li>
                </ul>
            </div>

            <div class="alert alert-warning">
                <h6 class="alert-heading">
                    <i class="fas fa-exclamation-triangle me-2"></i>Didn't receive the email?
                </h6>
                <ul class="mb-0 small">
                    <li>Check your spam or junk mail folder</li>
                    <li>Make sure you entered the correct email address</li>
                    <li>Wait a few minutes - emails can sometimes be delayed</li>
                    <li>Try requesting another reset if needed</li>
                </ul>
            </div>

            <div class="d-grid gap-2">
                <a href="{% url 'accounts:login' %}" class="btn btn-primary btn-login">
                    <i class="fas fa-arrow-left me-2"></i>Back to Login
                </a>
                
                <a href="{% url 'accounts:password_reset' %}" class="btn btn-outline-secondary">
                    <i class="fas fa-redo me-2"></i>Send Another Email
                </a>
            </div>

            <hr class="my-4">

            <div class="text-center">
                <h6 class="mb-3">Need immediate help?</h6>
                <div class="row text-center">
                    <div class="col-6">
                        <a href="mailto:support@hospital.com" class="text-decoration-none">
                            <i class="fas fa-envelope fa-2x text-primary mb-2 d-block"></i>
                            <small>Email Support</small>
                        </a>
                    </div>
                    <div class="col-6">
                        <a href="tel:+1234567890" class="text-decoration-none">
                            <i class="fas fa-phone fa-2x text-primary mb-2 d-block"></i>
                            <small>Call Support</small>
                        </a>
                    </div>
                </div>
            </div>

            <div class="text-center mt-3">
                <small class="text-muted">
                    <i class="fas fa-shield-alt me-1"></i>
                    This request was made from IP: <code id="user-ip">Loading...</code>
                </small>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Get user's IP address for security display
    fetch('https://api.ipify.org?format=json')
        .then(response => response.json())
        .then(data => {
            document.getElementById('user-ip').textContent = data.ip;
        })
        .catch(() => {
            document.getElementById('user-ip').textContent = 'Unknown';
        });
    
    // Countdown timer for link expiration
    let hoursLeft = 24;
    const countdownElement = document.getElementById('countdown');
    
    function updateCountdown() {
        if (hoursLeft > 1) {
            countdownElement.textContent = `${hoursLeft} hours`;
        } else if (hoursLeft === 1) {
            countdownElement.textContent = '1 hour';
        } else {
            countdownElement.textContent = 'less than 1 hour';
            countdownElement.classList.add('text-danger');
        }
    }
    
    updateCountdown();
    
    // Update countdown every hour (for demo purposes, in real app this would be more precise)
    setInterval(() => {
        hoursLeft--;
        if (hoursLeft >= 0) {
            updateCountdown();
        }
    }, 3600000); // 1 hour in milliseconds
    
    // Auto-redirect to login after 2 minutes
    setTimeout(() => {
        if (confirm('Would you like to return to the login page?')) {
            window.location.href = "{% url 'accounts:login' %}";
        }
    }, 120000); // 2 minutes
});
</script>
{% endblock %}