{% extends 'auth/base.html' %}
{% load static %}

{% block title %}Password Reset Sent - {{ block.super }}{% endblock %}

{% block content %}
<div class="done-container">
    <div class="done-card">
        <div class="logo-container">
            <img src="{% static 'images/logo.png' %}" alt="Logo" class="logo">
        </div>
        <i class="fas fa-envelope-open fa-4x text-success mb-4"></i>
        <h1 class="text-success mb-3">Check Your Email</h1>
                <p class="lead mb-4">
                    We've sent password reset instructions to your email address.
                </p>
                
        <div class="security-badge text-start">
            <h6 class="alert-heading">
                <i class="fas fa-info-circle me-2"></i>Next Steps
            </h6>
            <ol class="mb-0">
                <li>Check your email inbox</li>
                <li>Look for an email from our team</li>
                <li>Click the reset link in the email</li>
                <li>Create your new password</li>
                <li>Sign in with your new password</li>
            </ol>
        </div>
                
        <div class="row g-3 mt-3">
            <div class="col-12">
                <a href="{% url 'auth:login' %}" class="btn-verification btn-lg w-100">
                    <i class="fas fa-sign-in-alt me-2"></i>Back to Login
                </a>
            </div>
            <div class="col-12">
                <a href="{% url 'auth:password_reset' %}" class="login-link w-100">
                    <i class="fas fa-redo me-2"></i>Send Another Email
                </a>
            </div>
        </div>
        
        <div class="divider"></div>
                
                <hr class="my-4">
                
        <!-- Troubleshooting Section -->
        <div class="text-start">
            <h6 class="mb-3">
                <i class="fas fa-question-circle me-2"></i>Didn't receive the email?
            </h6>
                    
                    <div class="accordion" id="troubleshootAccordion">
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="headingSpam">
                                <button class="accordion-button collapsed" type="button" 
                                        data-bs-toggle="collapse" data-bs-target="#collapseSpam">
                                    <i class="fas fa-search me-2"></i>Check Your Spam Folder
                                </button>
                            </h2>
                            <div id="collapseSpam" class="accordion-collapse collapse" 
                                 data-bs-parent="#troubleshootAccordion">
                                <div class="accordion-body small">
                                    <p>Sometimes our emails end up in spam or junk folders. Please check:</p>
                                    <ul class="mb-0">
                                        <li>Spam/Junk folder</li>
                                        <li>Promotions tab (Gmail)</li>
                                        <li>Social tab (Gmail)</li>
                                        <li>Updates tab (Gmail)</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="headingWait">
                                <button class="accordion-button collapsed" type="button" 
                                        data-bs-toggle="collapse" data-bs-target="#collapseWait">
                                    <i class="fas fa-clock me-2"></i>Wait a Few Minutes
                                </button>
                            </h2>
                            <div id="collapseWait" class="accordion-collapse collapse" 
                                 data-bs-parent="#troubleshootAccordion">
                                <div class="accordion-body small">
                                    <p>Email delivery can sometimes take a few minutes. Please wait up to 10 minutes before trying again.</p>
                                    <div class="d-flex align-items-center mt-2">
                                        <div class="spinner-border spinner-border-sm text-primary me-2" role="status">
                                            <span class="visually-hidden">Loading...</span>
                                        </div>
                                        <span class="text-muted">Email may still be on its way...</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="headingEmail">
                                <button class="accordion-button collapsed" type="button" 
                                        data-bs-toggle="collapse" data-bs-target="#collapseEmail">
                                    <i class="fas fa-envelope me-2"></i>Check Email Address
                                </button>
                            </h2>
                            <div id="collapseEmail" class="accordion-collapse collapse" 
                                 data-bs-parent="#troubleshootAccordion">
                                <div class="accordion-body small">
                                    <p>Make sure you entered the correct email address. Common mistakes include:</p>
                                    <ul class="mb-2">
                                        <li>Typos in the email address</li>
                                        <li>Using an old email address</li>
                                        <li>Mixing up similar email providers</li>
                                    </ul>
                            <a href="{% url 'auth:password_reset' %}" class="login-link btn-sm">
                                <i class="fas fa-edit me-1"></i>Try Different Email
                            </a>
                                </div>
                            </div>
                        </div>
                        
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="headingSupport">
                                <button class="accordion-button collapsed" type="button" 
                                        data-bs-toggle="collapse" data-bs-target="#collapseSupport">
                                    <i class="fas fa-life-ring me-2"></i>Contact Support
                                </button>
                            </h2>
                            <div id="collapseSupport" class="accordion-collapse collapse" 
                                 data-bs-parent="#troubleshootAccordion">
                                <div class="accordion-body small">
                                    <p>If you've tried everything above and still haven't received the email, please contact our support team.</p>
                                    <div class="d-grid gap-2">
                                <a href="mailto:support@example.com" class="login-link btn-sm">
                                    <i class="fas fa-envelope me-1"></i>Email Support
                                </a>
                                <a href="#" class="login-link btn-sm" onclick="openLiveChat()">
                                    <i class="fas fa-comments me-1"></i>Live Chat
                                </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
        <!-- Security Notice -->
        <div class="security-badge mt-4">
            <h6 class="mb-2">
                <i class="fas fa-shield-alt me-2"></i>Security Notice
            </h6>
            <small>
                For security reasons, we don't reveal whether an email address is registered with us. 
                If you don't receive an email, the address might not be associated with an account.
            </small>
        </div>
                
        <!-- Timer Display -->
        <div class="mt-3">
            <small>
                <i class="fas fa-clock me-1"></i>
                You can request another email in <span id="countdown" class="fw-bold">60</span> seconds
            </small>
        </div>
    </div>
    
    <!-- Additional Help -->
    <div class="text-center mt-4">
        <div class="row g-2">
            <div class="col-6">
                <a href="{% url 'auth:register' %}" class="login-link btn-sm w-100">
                    <i class="fas fa-user-plus me-1"></i>Create Account
                </a>
            </div>
            <div class="col-6">
                <a href="/" class="login-link btn-sm w-100">
                    <i class="fas fa-home me-1"></i>Home Page
                </a>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Countdown timer for resend button
    let countdown = 60;
    const countdownElement = document.getElementById('countdown');
    const resendButton = document.querySelector('a[href="{% url "auth:password_reset" %}"]');
    
    function updateCountdown() {
        if (countdown > 0) {
            countdownElement.textContent = countdown;
            countdown--;
            setTimeout(updateCountdown, 1000);
        } else {
            countdownElement.parentElement.innerHTML = `
                <i class="fas fa-check me-1"></i>
                You can now request another email
            `;
            countdownElement.parentElement.className = 'text-success';
            
            // Enable resend button with visual feedback
            if (resendButton) {
                resendButton.classList.remove('btn-outline-secondary');
                resendButton.classList.add('btn-success');
                resendButton.innerHTML = '<i class="fas fa-redo me-2"></i>Send Another Email (Available)';
            }
        }
    }
    
    // Start countdown
    updateCountdown();
    
    // Add fade-in animation
    const card = document.querySelector('.card');
    card.style.opacity = '0';
    card.style.transform = 'translateY(20px)';
    
    setTimeout(() => {
        card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
        card.style.opacity = '1';
        card.style.transform = 'translateY(0)';
    }, 100);
    
    // Animate accordion items
    const accordionButtons = document.querySelectorAll('.accordion-button');
    accordionButtons.forEach(button => {
        button.addEventListener('click', function() {
            const icon = this.querySelector('i');
            setTimeout(() => {
                if (this.classList.contains('collapsed')) {
                    icon.style.transform = 'rotate(0deg)';
                } else {
                    icon.style.transform = 'rotate(90deg)';
                }
            }, 100);
        });
    });
    
    // Auto-open first accordion item after 3 seconds
    setTimeout(() => {
        const firstAccordionButton = document.querySelector('#headingSpam .accordion-button');
        if (firstAccordionButton && firstAccordionButton.classList.contains('collapsed')) {
            firstAccordionButton.click();
        }
    }, 3000);
    
    // Add keyboard shortcuts
    document.addEventListener('keydown', function(e) {
        // Enter to go to login
        if (e.key === 'Enter') {
            window.location.href = '{% url "auth:login" %}';
        }
        
        // R to resend email (if available)
        if (e.key.toLowerCase() === 'r' && countdown <= 0) {
            window.location.href = '{% url "auth:password_reset" %}';
        }
        
        // Escape to go home
        if (e.key === 'Escape') {
            window.location.href = '/';
        }
    });
    
    // Add pulse animation to main icon
    const mainIcon = document.querySelector('.fa-envelope-open');
    setInterval(() => {
        mainIcon.style.transform = 'scale(1.1)';
        setTimeout(() => {
            mainIcon.style.transform = 'scale(1)';
        }, 200);
    }, 3000);
    
    // Add transition to main icon
    mainIcon.style.transition = 'transform 0.2s ease';
    
    // Track user engagement
    let engagementScore = 0;
    
    // Track accordion interactions
    accordionButtons.forEach(button => {
        button.addEventListener('click', function() {
            engagementScore++;
            if (engagementScore >= 2) {
                // Show helpful tip after user shows interest
                showHelpfulTip();
            }
        });
    });
    
    function showHelpfulTip() {
        if (document.querySelector('.helpful-tip')) return; // Don't show multiple times
        
        const tipDiv = document.createElement('div');
        tipDiv.className = 'alert alert-success helpful-tip mt-3';
        tipDiv.innerHTML = `
            <i class="fas fa-lightbulb me-2"></i>
            <strong>Tip:</strong> Add our email address to your contacts to ensure future emails reach your inbox.
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        `;
        
        const cardBody = document.querySelector('.card-body');
        cardBody.appendChild(tipDiv);
        
        // Auto-hide after 10 seconds
        setTimeout(() => {
            if (tipDiv.parentNode) {
                tipDiv.remove();
            }
        }, 10000);
    }
    
    // Live chat function (placeholder)
    window.openLiveChat = function() {
        alert('Live chat feature coming soon! Please use email support for now.');
    };
    
    // Add smooth scrolling for internal links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                target.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }
        });
    });
});
</script>
{% endblock %}