@extends('sistema.layout')
@section('titulo', 'Alterar Palavra-passe')
@section('conteudo')
<div class="row">
    <div class="col-lg-12 mb-2">
        <div class="pagetitle">
            <h1 class="fw-bold text-dark mb-1">Alterar Palavra-passe</h1>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb small">
                    <li class="breadcrumb-item">
                        <a href="{{ route('dashboard') }}" class="text-decoration-none">Dashboard</a>
                    </li>
                    <li class="breadcrumb-item">
                        <a href="{{ route('perfil.show') }}" class="text-decoration-none">Perfil</a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">Alterar Palavra-passe</li>
                </ol>
            </nav>
        </div>
    </div>

    <div class="col-lg-12">
        <div class="row">
            <!-- Form Section -->
            <div class="col-lg-8 mb-4">
                <div class="card p-4">
                    <div class="card-body">
                        <h3 class="card-title text-dark mb-4">Segurança da Conta</h3>
                        
                        <form action="{{ route('perfil.password.update') }}" method="POST">
                            @csrf
                            @method('PUT')
                            
                            <!-- Current Password -->
                            <div class="mb-4">
                                <label for="current_password" class="form-label fw-semibold text-secondary">
                                    Palavra-passe Atual <span class="text-danger">*</span>
                                </label>
                                <div class="input-group">
                                    <input type="password" 
                                           name="current_password" 
                                           id="current_password"
                                           required
                                           class="form-control form-control-lg"
                                           placeholder="Digite sua palavra-passe atual">
                                    <button type="button" 
                                            onclick="togglePasswordVisibility('current_password')"
                                            class="btn btn-outline-secondary">
                                        <i class="fa-solid fa-eye"></i>
                                    </button>
                                </div>
                                @error('current_password')
                                <div class="text-danger small mt-2">{{ $message }}</div>
                                @enderror
                            </div>
                            
                            <!-- New Password -->
                            <div class="mb-4">
                                <label for="password" class="form-label fw-semibold text-secondary">
                                    Nova Palavra-passe <span class="text-danger">*</span>
                                </label>
                                <div class="input-group mb-3">
                                    <input type="password" 
                                           name="password" 
                                           id="password"
                                           required
                                           minlength="6"
                                           class="form-control form-control-lg"
                                           placeholder="Mínimo 6 caracteres">
                                    <button type="button" 
                                            onclick="togglePasswordVisibility('password')"
                                            class="btn btn-outline-secondary">
                                        <i class="fa-solid fa-eye"></i>
                                    </button>
                                </div>
                                @error('password')
                                <div class="text-danger small mt-2">{{ $message }}</div>
                                @enderror
                                
                                <!-- Password Strength Meter -->
                                <div class="mt-3">
                                    <div class="d-flex gap-1 mb-2">
                                        <div id="strengthBar1" class="h-2 flex-grow-1 bg-light rounded"></div>
                                        <div id="strengthBar2" class="h-2 flex-grow-1 bg-light rounded"></div>
                                        <div id="strengthBar3" class="h-2 flex-grow-1 bg-light rounded"></div>
                                        <div id="strengthBar4" class="h-2 flex-grow-1 bg-light rounded"></div>
                                    </div>
                                    <p id="strengthText" class="text-muted small mb-0">Força da palavra-passe</p>
                                </div>
                            </div>
                            
                            <!-- Confirm Password -->
                            <div class="mb-4">
                                <label for="password_confirmation" class="form-label fw-semibold text-secondary">
                                    Confirmar Nova Palavra-passe <span class="text-danger">*</span>
                                </label>
                                <div class="input-group">
                                    <input type="password" 
                                           name="password_confirmation" 
                                           id="password_confirmation"
                                           required
                                           minlength="6"
                                           class="form-control form-control-lg"
                                           placeholder="Digite a nova palavra-passe novamente">
                                    <button type="button" 
                                            onclick="togglePasswordVisibility('password_confirmation')"
                                            class="btn btn-outline-secondary">
                                        <i class="fa-solid fa-eye"></i>
                                    </button>
                                </div>
                            </div>
                            
                            <!-- Password Requirements -->
                            <div class="card bg-light mb-4">
                                <div class="card-body">
                                    <h5 class="fw-semibold text-dark mb-3">Requisitos da Palavra-passe</h5>
                                    <div class="row small text-muted">
                                        <div class="col-md-6 mb-2">
                                            <div class="d-flex align-items-center mb-2">
                                                <i id="reqLength" class="fa-solid fa-circle fa-2xs me-2"></i>
                                                <span>Mínimo 6 caracteres</span>
                                            </div>
                                            <div class="d-flex align-items-center mb-2">
                                                <i id="reqLower" class="fa-solid fa-circle fa-2xs me-2"></i>
                                                <span>Pelo menos uma letra minúscula</span>
                                            </div>
                                        </div>
                                        <div class="col-md-6 mb-2">
                                            <div class="d-flex align-items-center mb-2">
                                                <i id="reqUpper" class="fa-solid fa-circle fa-2xs me-2"></i>
                                                <span>Pelo menos uma letra maiúscula</span>
                                            </div>
                                            <div class="d-flex align-items-center mb-2">
                                                <i id="reqNumber" class="fa-solid fa-circle fa-2xs me-2"></i>
                                                <span>Pelo menos um número</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Submit Buttons -->
                            <div class="pt-4 border-top border-gray-300 d-flex flex-column flex-md-row gap-3">
                                <button type="submit" 
                                        id="submitButton"
                                        class="btn btn-primary btn-lg flex-fill d-flex align-items-center justify-content-center">
                                    <i class="fa-solid fa-key me-2"></i>Alterar Palavra-passe
                                </button>
                                
                                <a href="{{ route('perfil.show') }}" 
                                   class="btn btn-outline-secondary btn-lg flex-fill d-flex align-items-center justify-content-center">
                                    <i class="fa-solid fa-times me-2"></i>Cancelar
                                </a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            
            <!-- Info Panel -->
            <div class="col-lg-4">
                <!-- Security Tips -->
                <div class="card mb-4">
                    <div class="card-body">
                        <h4 class="card-title text-dark mb-4">Dicas de Segurança</h4>
                        
                        <div class="d-flex align-items-start mb-3">
                            <div class="bg-success bg-opacity-10 p-2 rounded me-3">
                                <i class="fa-solid fa-shield-alt text-success"></i>
                            </div>
                            <div>
                                <h6 class="fw-semibold text-dark mb-1">Palavras-passe Fortes</h6>
                                <p class="text-muted small mb-0">Use combinações de letras, números e símbolos.</p>
                            </div>
                        </div>
                        
                        <div class="d-flex align-items-start mb-3">
                            <div class="bg-info bg-opacity-10 p-2 rounded me-3">
                                <i class="fa-solid fa-sync-alt text-info"></i>
                            </div>
                            <div>
                                <h6 class="fw-semibold text-dark mb-1">Atualização Regular</h6>
                                <p class="text-muted small mb-0">Altere sua palavra-passe a cada 3-6 meses.</p>
                            </div>
                        </div>
                        
                        <div class="d-flex align-items-start mb-3">
                            <div class="bg-danger bg-opacity-10 p-2 rounded me-3">
                                <i class="fa-solid fa-ban text-danger"></i>
                            </div>
                            <div>
                                <h6 class="fw-semibold text-dark mb-1">Evite Reutilização</h6>
                                <p class="text-muted small mb-0">Não use a mesma palavra-passe em múltiplos serviços.</p>
                            </div>
                        </div>
                        
                        <div class="d-flex align-items-start">
                            <div class="bg-warning bg-opacity-10 p-2 rounded me-3">
                                <i class="fa-solid fa-lock text-warning"></i>
                            </div>
                            <div>
                                <h6 class="fw-semibold text-dark mb-1">Confidencialidade</h6>
                                <p class="text-muted small mb-0">Nunca compartilhe sua palavra-passe com ninguém.</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Account Info -->
                <div class="card mb-4">
                    <div class="card-body">
                        <h4 class="card-title text-dark mb-4">Informações da Conta</h4>
                        
                        <div class="d-flex justify-content-between align-items-center mb-3 pb-2 border-bottom">
                            <span class="text-muted small">Utilizador</span>
                            <span class="fw-semibold text-dark">{{ Auth::user()->name }}</span>
                        </div>
                        
                        <div class="d-flex justify-content-between align-items-center mb-3 pb-2 border-bottom">
                            <span class="text-muted small">Email</span>
                            <span class="fw-semibold text-dark">{{ Auth::user()->email }}</span>
                        </div>
                        
                        <div class="d-flex justify-content-between align-items-center mb-3 pb-2 border-bottom">
                            <span class="text-muted small">Última alteração</span>
                            <span class="fw-semibold text-dark">
                                @if(Auth::user()->password_changed_at)
                                {{ Auth::user()->password_changed_at->format('d/m/Y') }}
                                @else
                                Nunca alterada
                                @endif
                            </span>
                        </div>
                        
                        <div class="d-flex justify-content-between align-items-center">
                            <span class="text-muted small">Dias ativo</span>
                            <span class="fw-semibold text-dark">{{ Auth::user()->created_at->diffInDays(now()) }} dias</span>
                        </div>
                    </div>
                </div>
                
                <!-- Quick Actions -->
                <div class="card">
                    <div class="card-body">
                        <h5 class="fw-semibold text-dark mb-3">Ações Rápidas</h5>
                        <div class="d-grid gap-2">
                            <a href="{{ route('perfil.edit') }}" 
                               class="btn btn-outline-primary d-flex align-items-center justify-content-start">
                                <i class="fa-solid fa-user-edit me-3"></i>
                                <span>Editar Perfil</span>
                            </a>
                            
                            <a href="{{ route('perfil.activity') }}" 
                               class="btn btn-outline-info d-flex align-items-center justify-content-start">
                                <i class="fa-solid fa-history me-3"></i>
                                <span>Ver Atividades</span>
                            </a>
                            
                            <a href="{{ route('perfil.show') }}" 
                               class="btn btn-outline-success d-flex align-items-center justify-content-start">
                                <i class="fa-solid fa-user me-3"></i>
                                <span>Meu Perfil</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Toast Notification -->
@if($errors->any())
<div id="errorToast" class="position-fixed top-0 end-0 p-3" style="z-index: 1050">
    <div class="toast show" role="alert">
        <div class="toast-header bg-danger text-white">
            <i class="fa-solid fa-exclamation-circle me-2"></i>
            <strong class="me-auto">Erro!</strong>
            <button type="button" class="btn-close btn-close-white" onclick="closeError()"></button>
        </div>
        <div class="toast-body">
            {{ $errors->first() }}
        </div>
    </div>
</div>
@endif

@if(session('success'))
<div id="notificationToast" class="position-fixed top-0 end-0 p-3" style="z-index: 1050">
    <div class="toast show" role="alert">
        <div class="toast-header bg-success text-white">
            <i class="fa-solid fa-check-circle me-2"></i>
            <strong class="me-auto">Sucesso!</strong>
            <button type="button" class="btn-close btn-close-white" onclick="closeNotification()"></button>
        </div>
        <div class="toast-body">
            {{ session('success') }}
        </div>
    </div>
</div>
@endif
@endsection

@push('scripts')
<script>
    function togglePasswordVisibility(inputId) {
        const input = document.getElementById(inputId);
        const button = input.parentNode.querySelector('button');
        const icon = button.querySelector('i');
        
        if (input.type === 'password') {
            input.type = 'text';
            icon.className = 'fa-solid fa-eye-slash';
        } else {
            input.type = 'password';
            icon.className = 'fa-solid fa-eye';
        }
    }
    
    // Password strength checker
    document.getElementById('password')?.addEventListener('input', function(e) {
        const password = e.target.value;
        const strengthBars = [
            document.getElementById('strengthBar1'),
            document.getElementById('strengthBar2'),
            document.getElementById('strengthBar3'),
            document.getElementById('strengthBar4')
        ];
        
        const requirements = {
            length: document.getElementById('reqLength'),
            lower: document.getElementById('reqLower'),
            upper: document.getElementById('reqUpper'),
            number: document.getElementById('reqNumber')
        };
        
        // Check requirements
        const hasLength = password.length >= 6;
        const hasLower = /[a-z]/.test(password);
        const hasUpper = /[A-Z]/.test(password);
        const hasNumber = /\d/.test(password);
        
        // Update requirement indicators
        requirements.length.className = hasLength ? 
            'fa-solid fa-check-circle fa-2xs me-2 text-success' : 
            'fa-solid fa-circle fa-2xs me-2 text-muted';
        
        requirements.lower.className = hasLower ? 
            'fa-solid fa-check-circle fa-2xs me-2 text-success' : 
            'fa-solid fa-circle fa-2xs me-2 text-muted';
        
        requirements.upper.className = hasUpper ? 
            'fa-solid fa-check-circle fa-2xs me-2 text-success' : 
            'fa-solid fa-circle fa-2xs me-2 text-muted';
        
        requirements.number.className = hasNumber ? 
            'fa-solid fa-check-circle fa-2xs me-2 text-success' : 
            'fa-solid fa-circle fa-2xs me-2 text-muted';
        
        // Calculate strength
        let strength = 0;
        if (hasLength) strength++;
        if (hasLower) strength++;
        if (hasUpper) strength++;
        if (hasNumber) strength++;
        
        // Update strength bars
        strengthBars.forEach((bar, index) => {
            if (index < strength) {
                let colorClass;
                if (strength === 1) colorClass = 'bg-danger';
                else if (strength === 2) colorClass = 'bg-warning';
                else if (strength === 3) colorClass = 'bg-info';
                else if (strength === 4) colorClass = 'bg-success';
                else colorClass = 'bg-light';
                
                bar.className = 'h-2 flex-grow-1 rounded ' + colorClass;
            } else {
                bar.className = 'h-2 flex-grow-1 bg-light rounded';
            }
        });
        
        // Update strength text
        const strengthText = document.getElementById('strengthText');
        let text, colorClass;
        switch(strength) {
            case 0: text = 'Muito fraca'; colorClass = 'text-danger'; break;
            case 1: text = 'Fraca'; colorClass = 'text-danger'; break;
            case 2: text = 'Razoável'; colorClass = 'text-warning'; break;
            case 3: text = 'Boa'; colorClass = 'text-info'; break;
            case 4: text = 'Forte'; colorClass = 'text-success'; break;
        }
        strengthText.textContent = text;
        strengthText.className = 'small mb-0 ' + colorClass;
        
        // Enable/disable submit button
        const submitButton = document.getElementById('submitButton');
        if (strength >= 2 && password.length >= 6) {
            submitButton.disabled = false;
            submitButton.classList.remove('disabled');
        } else {
            submitButton.disabled = true;
            submitButton.classList.add('disabled');
        }
    });
    
    // Confirm password match
    document.getElementById('password_confirmation')?.addEventListener('input', function(e) {
        const password = document.getElementById('password').value;
        const confirmPassword = e.target.value;
        const submitButton = document.getElementById('submitButton');
        
        if (confirmPassword && password !== confirmPassword) {
            e.target.classList.add('is-invalid');
            e.target.classList.remove('is-valid');
            submitButton.disabled = true;
            submitButton.classList.add('disabled');
        } else if (confirmPassword) {
            e.target.classList.remove('is-invalid');
            e.target.classList.add('is-valid');
            // Re-check strength before enabling
            const passwordInput = document.getElementById('password');
            passwordInput.dispatchEvent(new Event('input'));
        } else {
            e.target.classList.remove('is-invalid', 'is-valid');
            submitButton.disabled = false;
            submitButton.classList.remove('disabled');
        }
    });
    
    function closeError() {
        const toast = document.getElementById('errorToast');
        if (toast) {
            toast.style.display = 'none';
        }
    }
    
    function closeNotification() {
        const toast = document.getElementById('notificationToast');
        if (toast) {
            toast.style.display = 'none';
        }
    }
    
    // Auto-hide notifications after 10 seconds
    document.addEventListener('DOMContentLoaded', function() {
        const errorToast = document.getElementById('errorToast');
        if (errorToast) {
            setTimeout(() => {
                errorToast.style.display = 'none';
            }, 10000);
        }
        
        const notificationToast = document.getElementById('notificationToast');
        if (notificationToast) {
            setTimeout(() => {
                notificationToast.style.display = 'none';
            }, 10000);
        }
    });
</script>
@endpush