@extends('layouts.modern-auth')

@section('title', 'Zapomenuté heslo - MARKOVI')

@section('content')
<div class="auth-logo">
    <div class="logo-icon">
        <i class="fas fa-key"></i>
    </div>
    <div class="logo-text">MARKOVI</div>
    <div class="logo-subtitle">Obnovení hesla</div>
</div>

<div style="text-align: center; margin-bottom: 2rem;">
    <h2 style="color: white; font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem;">
        Zapomenuté heslo?
    </h2>
    <p style="color: rgba(255, 255, 255, 0.8); font-size: 0.875rem; line-height: 1.5;">
        Zadejte svou emailovou adresu a pošleme vám odkaz pro obnovení hesla.
    </p>
</div>

<!-- Error Messages -->
@if ($errors->any())
    <div class="error-message">
        <ul style="list-style: none; margin: 0; padding: 0;">
            @foreach ($errors->all() as $error)
                <li><i class="fas fa-exclamation-circle" style="margin-right: 8px;"></i>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

<!-- Status Message -->
@if (session('status'))
    <div class="success-message">
        <i class="fas fa-check-circle" style="margin-right: 8px;"></i>{{ session('status') }}
    </div>
@endif

<form method="POST" action="{{ route('password.email') }}" id="forgotPasswordForm">
    @csrf

    <div class="form-group">
        <label for="email" class="form-label">
            <i class="fas fa-envelope" style="margin-right: 8px;"></i>Email
        </label>
        <input 
            id="email" 
            class="form-input" 
            type="email" 
            name="email" 
            value="{{ old('email') }}" 
            required 
            autofocus 
            autocomplete="email"
            placeholder="váš@email.cz"
        />
    </div>

    <button type="submit" class="btn btn-primary" id="resetButton">
        <i class="fas fa-paper-plane"></i>
        <span>Odeslat odkaz</span>
    </button>

    <div class="text-center mt-4">
        <a class="auth-link" href="{{ route('login') }}">
            <i class="fas fa-arrow-left" style="margin-right: 4px;"></i>Zpět na přihlášení
        </a>
    </div>
</form>

<div class="auth-footer">
    <div class="auth-footer-text">
        <i class="fas fa-info-circle" style="margin-right: 4px;"></i>
        Odkaz bude platný 60 minut
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Form submission with loading state
    const forgotPasswordForm = document.getElementById('forgotPasswordForm');
    const resetButton = document.getElementById('resetButton');
    const emailInput = document.getElementById('email');
    
    if (forgotPasswordForm && resetButton) {
        forgotPasswordForm.addEventListener('submit', function() {
            resetButton.classList.add('loading');
            resetButton.disabled = true;
            
            // Change button text
            const buttonText = resetButton.querySelector('span');
            if (buttonText) {
                buttonText.textContent = 'Odesílám...';
            }
        });
    }
    
    // Input focus effects
    if (emailInput) {
        emailInput.addEventListener('focus', function() {
            this.parentElement.style.transform = 'scale(1.02)';
        });
        
        emailInput.addEventListener('blur', function() {
            this.parentElement.style.transform = 'scale(1)';
        });
        
        // Email validation
        emailInput.addEventListener('blur', function() {
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (this.value && !emailRegex.test(this.value)) {
                this.style.borderColor = 'rgba(239, 68, 68, 0.5)';
                this.style.background = 'rgba(239, 68, 68, 0.1)';
            } else {
                this.style.borderColor = 'rgba(255, 255, 255, 0.3)';
                this.style.background = 'rgba(255, 255, 255, 0.1)';
            }
        });
        
        // Reset validation on input
        emailInput.addEventListener('input', function() {
            this.style.borderColor = 'rgba(255, 255, 255, 0.3)';
            this.style.background = 'rgba(255, 255, 255, 0.1)';
        });
    }
    
    // Auto-submit on Enter
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Enter' && e.target === emailInput) {
            e.preventDefault();
            forgotPasswordForm.submit();
        }
    });
    
    // Show success animation if status message exists
    const successMessage = document.querySelector('.success-message');
    if (successMessage) {
        successMessage.style.animation = 'slideUp 0.5s ease-out';
        
        // Add pulse effect to the icon
        const icon = successMessage.querySelector('i');
        if (icon) {
            icon.style.animation = 'pulse 2s infinite';
        }
    }
});
</script>

<style>
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}
</style>
@endpush