<?php
// admin/profile.php
$pageTitle = 'Meu Perfil';
$pageHeader = 'Gerenciar Perfil';
$currentPage = 'profile';

// Definições básicas
if (!defined('BASE_PATH')) {
    define('BASE_PATH', dirname(dirname(__FILE__)));
}

require_once '../includes/config.php';
require_once '../includes/db.php';
require_once '../includes/functions.php';
require_once '../includes/auth.php';

// Verificar autenticação
$auth->requireAuth();

// Obter dados do usuário atual
$userId = $_SESSION['admin_id'];
$userInfo = [];

try {
    $db->query("SELECT id, username, email, profile_image, role, last_login, created_at FROM admins WHERE id = :id");
    $db->bind(':id', $userId);
    $userInfo = $db->single();
    
    if (!$userInfo) {
        setAlert("Erro ao carregar informações do usuário.", ALERT_ERROR);
        redirect('admin/index.php');
        exit;
    }
} catch (Exception $e) {
    setAlert("Erro ao buscar dados: " . $e->getMessage(), ALERT_ERROR);
    redirect('admin/index.php');
    exit;
}

// Incluir cabeçalho
require_once 'inc/header.php';
?>

<style>
    :root {
        --primary-color: #4F46E5;
        --secondary-color: #7C3AED;
        --accent-color: #EC4899;
        --dark-color: #1F2937;
        --light-color: #F8FAFC;
        --text-color: #1F2937;
        --border-color: #E5E7EB;
        --gradient: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
        --success-color: #10B981;
        --warning-color: #F59E0B;
        --danger-color: #EF4444;
        --info-color: #3B82F6;
    }

    .page-container {
        max-width: 1100px;
        margin: 0 auto;
        padding: 2rem 1rem;
    }
    
    .profile-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    @media (min-width: 992px) {
        .profile-grid {
            grid-template-columns: 320px 1fr;
        }
    }
    
    .profile-card {
        border-radius: 16px;
        background: white;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        overflow: hidden;
        transition: all 0.3s ease;
    }
    
    .profile-sidebar {
        text-align: center;
    }
    
    .profile-cover {
        height: 100px;
        background: var(--gradient);
        position: relative;
    }
    
    .profile-avatar-container {
        position: relative;
        margin-top: -50px;
        padding: 0 1.5rem;
        margin-bottom: 1.5rem;
    }
    
    .profile-avatar {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: #f5f5f5;
        border: 4px solid white;
        object-fit: cover;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        transition: all 0.3s ease;
    }
    
    .profile-avatar img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
    }
    
    .profile-avatar i {
        font-size: 2.5rem;
        color: #CBD5E1;
    }
    
    .profile-avatar-edit {
        position: absolute;
        bottom: 0;
        right: 0;
        background: var(--primary-color);
        color: white;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 0.85rem;
        border: 2px solid white;
        transition: all 0.2s ease;
    }
    
    .profile-avatar-edit:hover {
        transform: scale(1.1);
        background: var(--secondary-color);
    }
    
    .profile-sidebar-content {
        padding: 0 1.5rem 1.5rem;
    }
    
    .profile-name {
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
        color: var(--dark-color);
    }
    
    .profile-email {
        color: #64748B;
        margin-bottom: 1rem;
        font-size: 0.95rem;
    }
    
    .profile-role-badge {
        display: inline-block;
        background: rgba(79, 70, 229, 0.1);
        color: var(--primary-color);
        font-weight: 500;
        padding: 0.35rem 1rem;
        border-radius: 20px;
        font-size: 0.85rem;
        margin-bottom: 1.5rem;
    }
    
    .profile-stats {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        text-align: center;
        margin-bottom: 1.5rem;
    }
    
    .profile-stat {
        background: #F9FAFB;
        padding: 1rem;
        border-radius: 12px;
    }
    
    .profile-stat-value {
        font-size: 1.0rem;
        font-weight: 700;
        color: var(--primary-color);
        margin-bottom: 0.25rem;
    }
    
    .profile-stat-label {
        font-size: 0.85rem;
        color: #64748B;
    }
    
    .profile-action {
        margin-top: 1rem;
    }
    
    .profile-action-btn {
        width: 100%;
        padding: 0.75rem;
        border-radius: 10px;
        font-weight: 500;
        transition: all 0.2s ease;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
    }
    
    .btn-primary {
        background: var(--gradient);
        color: white;
    }
    
    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(79, 70, 229, 0.3);
    }
    
    .btn-outline {
        background: transparent;
        border: 1px solid var(--border-color);
        color: #64748B;
    }
    
    .btn-outline:hover {
        background: #F9FAFB;
        color: var(--dark-color);
    }
    
    .btn-danger {
        background: rgba(239, 68, 68, 0.1);
        color: var(--danger-color);
    }
    
    .btn-danger:hover {
        background: var(--danger-color);
        color: white;
    }
    
    .profile-main {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }
    
    .profile-section {
        background: white;
        border-radius: 16px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        overflow: hidden;
    }
    
    .profile-section-header {
        padding: 1.5rem;
        border-bottom: 1px solid var(--border-color);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .profile-section-title {
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--dark-color);
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin: 0;
    }
    
    .profile-section-title i {
        color: var(--primary-color);
    }
    
    .profile-section-action {
        cursor: pointer;
        color: var(--primary-color);
        font-weight: 500;
        font-size: 0.9rem;
        display: flex;
        align-items: center;
        gap: 0.35rem;
        transition: all 0.2s ease;
    }
    
    .profile-section-action:hover {
        color: var(--secondary-color);
    }
    
    .profile-section-content {
        padding: 1.5rem;
    }
    
    .profile-info-list {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    
    .profile-info-item {
        padding: 1rem 0;
        border-bottom: 1px solid var(--border-color);
        display: flex;
        flex-direction: column;
    }
    
    .profile-info-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
    
    .profile-info-label {
        font-weight: 500;
        font-size: 0.9rem;
        color: #64748B;
        margin-bottom: 0.35rem;
    }
    
    .profile-info-value {
        font-size: 1.05rem;
        color: var(--dark-color);
    }
    
    @media (min-width: 768px) {
        .profile-info-item {
            flex-direction: row;
            align-items: center;
        }
        
        .profile-info-label {
            width: 160px;
            margin-bottom: 0;
        }
        
        .profile-info-value {
            flex: 1;
        }
    }
    
    .edit-form {
        display: none;
    }
    
    .edit-form.active {
        display: block;
        animation: fadeIn 0.3s ease-out;
    }
    
    .view-form.hidden {
        display: none;
    }
    
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }
    
    .form-group {
        margin-bottom: 1.5rem;
    }
    
    .form-label {
        display: block;
        margin-bottom: 0.5rem;
        font-weight: 500;
        color: var(--dark-color);
    }
    
    .form-control {
        width: 100%;
        padding: 0.75rem 1rem;
        border: 1px solid var(--border-color);
        border-radius: 10px;
        background: #F9FAFB;
        font-size: 1rem;
        transition: all 0.2s ease;
    }
    
    .form-control:focus {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
        background: white;
    }
    
    .form-text {
        display: block;
        margin-top: 0.5rem;
        font-size: 0.85rem;
        color: #64748B;
    }
    
    .form-actions {
        display: flex;
        justify-content: flex-end;
        gap: 1rem;
        margin-top: 1.5rem;
    }
    
    .input-group {
        position: relative;
    }
    
    .input-group .form-control {
        padding-right: 3rem;
    }
    
    .input-group-append {
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        display: flex;
        align-items: center;
        padding: 0 1rem;
    }
    
    .toggle-password {
        background: none;
        border: none;
        color: #64748B;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    
    .toggle-password:hover {
        color: var(--primary-color);
    }
    
    .password-meter {
        height: 4px;
        background: #E5E7EB;
        border-radius: 2px;
        margin-top: 0.75rem;
        overflow: hidden;
    }
    
    .password-meter-bar {
        height: 100%;
        width: 0%;
        border-radius: 2px;
        transition: all 0.3s ease;
    }
    
    .password-meter-text {
        display: block;
        font-size: 0.85rem;
        margin-top: 0.5rem;
    }
    
    .photo-upload-container {
        position: relative;
        width: 100%;
        max-width: 300px;
        margin: 0 auto 1.5rem;
    }
    
    .photo-preview {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        background: #F9FAFB;
        border: 2px solid var(--border-color);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        overflow: hidden;
        position: relative;
    }
    
    .photo-preview img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .photo-preview i {
        font-size: 3rem;
        color: #CBD5E1;
    }
    
    .photo-upload-label {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        background: var(--primary-color);
        color: white;
        padding: 0.5rem 1rem;
        border-radius: 8px;
        font-size: 0.9rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
        width: 150px;
        margin: 1rem auto 0;
    }
    
    .photo-upload-label:hover {
        background: var(--secondary-color);
    }
    
    .photo-upload-input {
        display: none;
    }
    
    .photo-upload-text {
        text-align: center;
        font-size: 0.85rem;
        color: #64748B;
        margin-top: 0.5rem;
    }
    
    .account-status {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem 1rem;
        border-radius: 10px;
        background: rgba(16, 185, 129, 0.1);
        color: var(--success-color);
        margin-bottom: 1.5rem;
    }
    
    .account-status i {
        font-size: 1.25rem;
    }
    
    .security-tip {
        background: rgba(59, 130, 246, 0.1);
        border-left: 3px solid var(--info-color);
        padding: 1rem;
        border-radius: 0 10px 10px 0;
        margin: 1.5rem 0;
    }
    
    .security-tip-title {
        font-weight: 600;
        margin-bottom: 0.5rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    .security-tip-title i {
        color: var(--info-color);
    }
    
    .security-tip p {
        margin: 0;
        font-size: 0.95rem;
        color: #1F2937;
    }
</style>

<div class="page-container">
    <div class="profile-grid">
        <!-- Sidebar - Informações Principais e Foto -->
        <div class="profile-sidebar">
            <div class="profile-card">
                <div class="profile-cover"></div>
                <div class="profile-avatar-container">
                    <div class="profile-avatar">
                        <?php if (!empty($userInfo['profile_image'])): ?>
                            <img src="<?php echo htmlspecialchars($userInfo['profile_image']); ?>" alt="<?php echo htmlspecialchars($userInfo['username']); ?>">
                        <?php else: ?>
                            <i class="fas fa-user"></i>
                        <?php endif; ?>
                        <div class="profile-avatar-edit" id="togglePhoto">
                            <i class="fas fa-camera"></i>
                        </div>
                    </div>
                </div>
                
                <div class="profile-sidebar-content">
                    <h1 class="profile-name"><?php echo htmlspecialchars($userInfo['username']); ?></h1>
                    <div class="profile-email"><?php echo htmlspecialchars($userInfo['email']); ?></div>
                    <div class="profile-role-badge">
                        <?php echo ucfirst(htmlspecialchars($userInfo['role'])); ?>
                    </div>
                    
                    <div class="profile-stats">
                        <div class="profile-stat">
                            <div class="profile-stat-value"><?php echo formatTimeAgo($userInfo['last_login']); ?></div>
                            <div class="profile-stat-label">Último Login</div>
                        </div>
                        <div class="profile-stat">
                            <div class="profile-stat-value"><?php echo date('d/m/y', strtotime($userInfo['created_at'])); ?></div>
                            <div class="profile-stat-label">Membro Desde</div>
                        </div>
                    </div>
                    
                    <div class="account-status">
                        <i class="fas fa-shield-alt"></i>
                        <span>Conta ativa e segura</span>
                    </div>
                    
                    <div class="profile-action">
                        <a href="index.php" class="profile-action-btn btn-outline">
                            <i class="fas fa-arrow-left"></i>
                            Voltar ao Dashboard
                        </a>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Conteúdo Principal - Formulários e Dados -->
        <div class="profile-main">
            <!-- Seção de Foto do Perfil (Oculta por padrão) -->
            <div class="profile-section" id="photoSection" style="display: none;">
                <div class="profile-section-header">
                    <h2 class="profile-section-title">
                        <i class="fas fa-camera"></i>
                        Foto do Perfil
                    </h2>
                    <span class="profile-section-action" id="cancelPhoto">
                        <i class="fas fa-times"></i>
                        Cancelar
                    </span>
                </div>
                
                <div class="profile-section-content">
                    <form action="update-profile.php" method="post" enctype="multipart/form-data">
                        <input type="hidden" name="action" value="update_photo">
                        
                        <div class="photo-upload-container">
                            <div class="photo-preview" id="photoPreview">
                                <?php if (!empty($userInfo['profile_image'])): ?>
                                    <img src="<?php echo htmlspecialchars($userInfo['profile_image']); ?>" alt="<?php echo htmlspecialchars($userInfo['username']); ?>">
                                <?php else: ?>
                                    <i class="fas fa-user"></i>
                                <?php endif; ?>
                            </div>
                            
                            <label for="profile_image" class="photo-upload-label">
                                <i class="fas fa-upload"></i>
                                Selecionar Foto
                            </label>
                            <input type="file" name="profile_image" id="profile_image" class="photo-upload-input" accept="image/*">
                            
                            <div class="photo-upload-text">
                                JPG, PNG ou GIF. Tamanho máximo de 2MB.
                            </div>
                        </div>
                        
                        <div class="form-actions">
                            <?php if (!empty($userInfo['profile_image'])): ?>
                            <button type="submit" name="remove_photo" value="1" class="profile-action-btn btn-danger">
                                <i class="fas fa-trash-alt"></i>
                                Remover Foto
                            </button>
                            <?php endif; ?>
                            <button type="submit" class="profile-action-btn btn-primary">
                                <i class="fas fa-save"></i>
                                Salvar Foto
                            </button>
                        </div>
                    </form>
                </div>
            </div>
            
            <!-- Seção de Informações da Conta -->
            <div class="profile-section">
                <div class="profile-section-header">
                    <h2 class="profile-section-title">
                        <i class="fas fa-user-circle"></i>
                        Informações da Conta
                    </h2>
                    <span class="profile-section-action" id="toggleBasicInfo">
                        <i class="fas fa-edit"></i>
                        Editar
                    </span>
                </div>
                
                <div class="profile-section-content">
                    <!-- Visualização de Informações -->
                    <div class="view-form" id="viewBasicInfo">
                        <ul class="profile-info-list">
                            <li class="profile-info-item">
                                <div class="profile-info-label">Nome de Usuário:</div>
                                <div class="profile-info-value"><?php echo htmlspecialchars($userInfo['username']); ?></div>
                            </li>
                            <li class="profile-info-item">
                                <div class="profile-info-label">E-mail:</div>
                                <div class="profile-info-value"><?php echo htmlspecialchars($userInfo['email']); ?></div>
                            </li>
                            <li class="profile-info-item">
                                <div class="profile-info-label">Nível de Acesso:</div>
                                <div class="profile-info-value"><?php echo ucfirst(htmlspecialchars($userInfo['role'])); ?></div>
                            </li>
                            <li class="profile-info-item">
                                <div class="profile-info-label">Último Acesso:</div>
                                <div class="profile-info-value"><?php echo formatDate($userInfo['last_login']); ?></div>
                            </li>
                            <li class="profile-info-item">
                                <div class="profile-info-label">Conta Criada em:</div>
                                <div class="profile-info-value"><?php echo formatDate($userInfo['created_at']); ?></div>
                            </li>
                        </ul>
                    </div>
                    
                    <!-- Formulário de Edição de Informações -->
                    <div class="edit-form" id="editBasicInfo">
                        <form action="update-profile.php" method="post">
                            <input type="hidden" name="action" value="update_basic">
                            
                            <div class="form-group">
                                <label for="username" class="form-label">Nome de Usuário</label>
                                <input type="text" class="form-control" id="username" name="username" value="<?php echo htmlspecialchars($userInfo['username']); ?>" required>
                            </div>
                            
                            <div class="form-group">
                                <label for="email" class="form-label">E-mail</label>
                                <input type="email" class="form-control" id="email" name="email" value="<?php echo htmlspecialchars($userInfo['email']); ?>" required>
                                <small class="form-text">Este e-mail será usado para comunicações importantes do sistema.</small>
                            </div>
                            
                            <div class="form-actions">
                                <button type="button" class="profile-action-btn btn-outline cancelEdit" data-target="BasicInfo">Cancelar</button>
                                <button type="submit" class="profile-action-btn btn-primary">Salvar Alterações</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            
            <!-- Seção de Segurança -->
            <div class="profile-section">
                <div class="profile-section-header">
                    <h2 class="profile-section-title">
                        <i class="fas fa-lock"></i>
                        Segurança
                    </h2>
                    <span class="profile-section-action" id="togglePassword">
                        <i class="fas fa-key"></i>
                        Alterar Senha
                    </span>
                </div>
                
                <div class="profile-section-content">
                    <!-- Visualização de Segurança -->
                    <div class="view-form" id="viewPassword">
                        <ul class="profile-info-list">
                            <li class="profile-info-item">
                                <div class="profile-info-label">Senha:</div>
                                <div class="profile-info-value">••••••••••</div>
                            </li>
                            <li class="profile-info-item">
                                <div class="profile-info-label">Último Login:</div>
                                <div class="profile-info-value"><?php echo formatDate($userInfo['last_login']); ?></div>
                            </li>
                        </ul>
                        
                        <div class="security-tip">
                            <div class="security-tip-title">
                                <i class="fas fa-shield-alt"></i>
                                Dica de Segurança
                            </div>
                            <p>Uma senha forte deve ter pelo menos 8 caracteres e incluir letras maiúsculas, minúsculas, números e símbolos. Evite usar informações pessoais ou senhas que você utiliza em outros sites.</p>
                        </div>
                    </div>
                    
                    <!-- Formulário de Alteração de Senha -->
                    <div class="edit-form" id="editPassword">
                        <form action="update-profile.php" method="post">
                            <input type="hidden" name="action" value="update_password">
                            
                            <div class="form-group">
                                <label for="current_password" class="form-label">Senha Atual</label>
                                <div class="input-group">
                                    <input type="password" class="form-control" id="current_password" name="current_password" required>
                                    <div class="input-group-append">
                                        <button type="button" class="toggle-password" data-target="current_password">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="form-group">
                                <label for="new_password" class="form-label">Nova Senha</label>
                                <div class="input-group">
                                    <input type="password" class="form-control" id="new_password" name="new_password" required minlength="8">
                                    <div class="input-group-append">
                                        <button type="button" class="toggle-password" data-target="new_password">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="password-meter">
                                    <div class="password-meter-bar" id="passwordStrengthBar"></div>
                                </div>
                                <small class="password-meter-text" id="passwordStrengthText">Força da senha: Insira uma senha</small>
                            </div>
                            
                            <div class="form-group">
                                <label for="confirm_password" class="form-label">Confirmar Nova Senha</label>
                                <div class="input-group">
                                    <input type="password" class="form-control" id="confirm_password" name="confirm_password" required minlength="8">
                                    <div class="input-group-append">
                                        <button type="button" class="toggle-password" data-target="confirm_password">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="form-actions">
                                <button type="button" class="profile-action-btn btn-outline cancelEdit" data-target="Password">Cancelar</button>
                                <button type="submit" class="profile-action-btn btn-primary">Alterar Senha</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Toggle para edição de informações básicas
    document.getElementById('toggleBasicInfo').addEventListener('click', function() {
        document.getElementById('viewBasicInfo').classList.toggle('hidden');
        document.getElementById('editBasicInfo').classList.toggle('active');
    });
    
    // Toggle para alteração de senha
    document.getElementById('togglePassword').addEventListener('click', function() {
        document.getElementById('viewPassword').classList.toggle('hidden');
        document.getElementById('editPassword').classList.toggle('active');
    });
    
    // Toggle para seção de foto
    document.getElementById('togglePhoto').addEventListener('click', function() {
        document.getElementById('photoSection').style.display = 'block';
    });
    
    document.getElementById('cancelPhoto').addEventListener('click', function() {
        document.getElementById('photoSection').style.display = 'none';
    });
    
    // Botões de cancelar edição
    document.querySelectorAll('.cancelEdit').forEach(button => {
        button.addEventListener('click', function() {
            const target = this.getAttribute('data-target');
            document.getElementById('view' + target).classList.remove('hidden');
            document.getElementById('edit' + target).classList.remove('active');
        });
    });
    
    // Toggle de visualização de senha
    document.querySelectorAll('.toggle-password').forEach(button => {
        button.addEventListener('click', function() {
            const targetId = this.getAttribute('data-target');
            const passwordInput = document.getElementById(targetId);
            const icon = this.querySelector('i');
            
            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                icon.classList.remove('fa-eye');
                icon.classList.add('fa-eye-slash');
            } else {
                passwordInput.type = 'password';
                icon.classList.remove('fa-eye-slash');
                icon.classList.add('fa-eye');
            }
        });
    });
    
    // Pré-visualização da foto
    const photoInput = document.getElementById('profile_image');
    const photoPreview = document.getElementById('photoPreview');
    
    if (photoInput && photoPreview) {
        photoInput.addEventListener('change', function() {
            if (this.files && this.files[0]) {
                const reader = new FileReader();
                
                reader.onload = function(e) {
                    photoPreview.innerHTML = `<img src="${e.target.result}" alt="Preview">`;
                }
                
                reader.readAsDataURL(this.files[0]);
            }
        });
    }
    
    // Validação de senha
    const passwordInput = document.getElementById('new_password');
    const confirmInput = document.getElementById('confirm_password');
    const strengthBar = document.getElementById('passwordStrengthBar');
    const strengthText = document.getElementById('passwordStrengthText');
    
    if (passwordInput && strengthBar && strengthText) {
        passwordInput.addEventListener('input', function() {
            const password = this.value;
            let strength = 0;
            let message = '';
            
            // Critérios de força
            if (password.length >= 8) strength += 25;
            if (password.match(/[a-z]+/)) strength += 25;
            if (password.match(/[A-Z]+/)) strength += 25;
            if (password.match(/[0-9]+/) || password.match(/[^a-zA-Z0-9]+/)) strength += 25;
            
            // Atualizar barra de força
            strengthBar.style.width = strength + '%';
            
            // Definir cor e mensagem
            if (strength <= 25) {
                strengthBar.style.background = '#EF4444';
                message = 'Fraca';
            } else if (strength <= 50) {
                strengthBar.style.background = '#F59E0B';
                message = 'Razoável';
            } else if (strength <= 75) {
                strengthBar.style.background = '#3B82F6';
                message = 'Boa';
            } else {
                strengthBar.style.background = '#10B981';
                message = 'Forte';
            }
            
            strengthText.textContent = 'Força da senha: ' + message;
        });
    }
    
    // Validação de correspondência das senhas
    if (confirmInput && passwordInput) {
        confirmInput.addEventListener('input', function() {
            if (this.value === passwordInput.value) {
                this.setCustomValidity('');
            } else {
                this.setCustomValidity('As senhas não coincidem');
            }
        });
    }
});
</script>

<?php require_once 'inc/footer.php'; ?>