@extends('layouts.principal')

@section('titulo', 'Redefinir Senha - MNGD Sistemas')

@section('conteudo')
<div class="auth-container">
    <div class="auth-card" style="max-width: 500px;">
        <div class="auth-header">
            <h1 class="auth-title">Redefinir Senha</h1>
            <p class="auth-subtitle">Crie uma nova senha para sua conta</p>
        </div>

        @if (session('error'))
            <div class="alert alert-danger">
                {{ session('error') }}
            </div>
        @endif

        @if ($errors->any())
            <div class="alert alert-danger">
                @if ($errors->has('reset'))
                    <p style="margin: 0;">{{ $errors->first('reset') }}</p>
                @else
                    <ul style="margin: 0; padding-left: 20px;">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                @endif
            </div>
        @endif

        <form method="POST" action="{{ route('cliente.password.update') }}" class="auth-form" id="password-reset-form">
            @csrf
            <input type="hidden" name="email" value="{{ $email }}">
            <input type="hidden" name="token" value="{{ $token }}">
            
            <div class="form-group">
                <label for="password">
                    <i class="fas fa-lock"></i> Nova Senha
                </label>
                <div style="position: relative;">
                    <input 
                        type="password" 
                        id="password" 
                        name="password" 
                        required
                        minlength="8"
                        autocomplete="new-password"
                        autofocus
                        placeholder="Mínimo de 8 caracteres"
                    >
                    <button 
                        type="button" 
                        class="password-toggle" 
                        data-target="password"
                        style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; color: #666; cursor: pointer; padding: 5px;"
                    >
                        <i class="fas fa-eye"></i>
                    </button>
                </div>
                <div class="password-strength" id="password-strength" style="margin-top: 8px; font-size: 12px; display: none;">
                    <div class="strength-bar" style="height: 4px; background: #e0e0e0; border-radius: 2px; margin-bottom: 5px;">
                        <div class="strength-fill" style="height: 100%; width: 0%; background: #dc3545; border-radius: 2px; transition: all 0.3s;"></div>
                    </div>
                    <div class="strength-text" style="color: #666;"></div>
                </div>
                <small style="display: block; margin-top: 5px; color: #666;">
                    <i class="fas fa-info-circle"></i> A senha deve ter no mínimo 8 caracteres
                </small>
            </div>
            
            <div class="form-group">
                <label for="password_confirmation">
                    <i class="fas fa-lock"></i> Confirmar Nova Senha
                </label>
                <div style="position: relative;">
                    <input 
                        type="password" 
                        id="password_confirmation" 
                        name="password_confirmation" 
                        required
                        minlength="8"
                        autocomplete="new-password"
                        placeholder="Digite a nova senha novamente"
                    >
                    <button 
                        type="button" 
                        class="password-toggle" 
                        data-target="password_confirmation"
                        style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; color: #666; cursor: pointer; padding: 5px;"
                    >
                        <i class="fas fa-eye"></i>
                    </button>
                </div>
                <div id="password-match" style="margin-top: 5px; font-size: 12px; display: none;">
                    <i class="fas fa-check-circle" style="color: #28a745;"></i>
                    <span style="color: #28a745;">As senhas coincidem</span>
                </div>
            </div>

            <button type="submit" class="btn-primary btn-full">
                <i class="fas fa-save"></i>
                <span>Redefinir Senha</span>
            </button>
        </form>

        <div class="auth-footer">
            <p>
                <a href="{{ route('cliente.login') }}" class="auth-link">
                    <i class="fas fa-arrow-left"></i> Voltar para o login
                </a>
            </p>
        </div>
    </div>
</div>

<style>
    .password-strength.show {
        display: block !important;
    }
    
    .strength-weak { color: #dc3545; }
    .strength-medium { color: #ffc107; }
    .strength-strong { color: #28a745; }
    
    .password-toggle:hover {
        color: #333;
    }
    
    #password-match.show {
        display: block !important;
    }
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Toggle password visibility
    document.querySelectorAll('.password-toggle').forEach(button => {
        button.addEventListener('click', function() {
            const targetId = this.getAttribute('data-target');
            const input = document.getElementById(targetId);
            const icon = this.querySelector('i');
            
            if (input.type === 'password') {
                input.type = 'text';
                icon.classList.remove('fa-eye');
                icon.classList.add('fa-eye-slash');
            } else {
                input.type = 'password';
                icon.classList.remove('fa-eye-slash');
                icon.classList.add('fa-eye');
            }
        });
    });
    
    // Password strength indicator
    const passwordInput = document.getElementById('password');
    const strengthBar = document.querySelector('.strength-fill');
    const strengthText = document.querySelector('.strength-text');
    const strengthContainer = document.getElementById('password-strength');
    
    if (passwordInput && strengthBar && strengthText && strengthContainer) {
        passwordInput.addEventListener('input', function() {
            const password = this.value;
            
            if (password.length === 0) {
                strengthContainer.classList.remove('show');
                return;
            }
            
            strengthContainer.classList.add('show');
            
            let strength = 0;
            let strengthLabel = '';
            let strengthClass = '';
            let width = 0;
            let color = '#dc3545';
            
            if (password.length >= 8) strength += 1;
            if (password.length >= 12) strength += 1;
            if (/[a-z]/.test(password)) strength += 1;
            if (/[A-Z]/.test(password)) strength += 1;
            if (/[0-9]/.test(password)) strength += 1;
            if (/[^a-zA-Z0-9]/.test(password)) strength += 1;
            
            if (strength <= 2) {
                strengthLabel = 'Senha fraca';
                strengthClass = 'strength-weak';
                width = 33;
                color = '#dc3545';
            } else if (strength <= 4) {
                strengthLabel = 'Senha média';
                strengthClass = 'strength-medium';
                width = 66;
                color = '#ffc107';
            } else {
                strengthLabel = 'Senha forte';
                strengthClass = 'strength-strong';
                width = 100;
                color = '#28a745';
            }
            
            strengthBar.style.width = width + '%';
            strengthBar.style.background = color;
            strengthText.textContent = strengthLabel;
            strengthText.className = 'strength-text ' + strengthClass;
        });
    }
    
    // Password match indicator
    const confirmPasswordInput = document.getElementById('password_confirmation');
    const matchIndicator = document.getElementById('password-match');
    
    function checkPasswordMatch() {
        if (!passwordInput || !confirmPasswordInput || !matchIndicator) return;
        
        const password = passwordInput.value;
        const confirm = confirmPasswordInput.value;
        
        if (confirm.length === 0) {
            matchIndicator.classList.remove('show');
            return;
        }
        
        if (password === confirm && password.length >= 8) {
            matchIndicator.classList.add('show');
            matchIndicator.innerHTML = '<i class="fas fa-check-circle" style="color: #28a745;"></i> <span style="color: #28a745;">As senhas coincidem</span>';
        } else {
            matchIndicator.classList.add('show');
            matchIndicator.innerHTML = '<i class="fas fa-times-circle" style="color: #dc3545;"></i> <span style="color: #dc3545;">As senhas não coincidem</span>';
        }
    }
    
    if (passwordInput && confirmPasswordInput) {
        passwordInput.addEventListener('input', checkPasswordMatch);
        confirmPasswordInput.addEventListener('input', checkPasswordMatch);
    }
});
</script>
@endsection