<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nova Senha — Breno Paiva Advocacia</title>
    <link rel="stylesheet" href="<?php echo base_url('assets/bootstrap/css/bootstrap.min.css')?>">
    <link rel="stylesheet" href="<?php echo base_url('assets/css/font-awesome.min.css')?>">
    <style>
        body { background:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%); min-height:100vh; display:flex; align-items:center; justify-content:center; font-family:'Segoe UI',Arial,sans-serif; }
        .card { width:100%; max-width:440px; background:#fff; border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.4); overflow:hidden; }
        .card-header { background:linear-gradient(135deg,#1a1a2e,#0f3460); padding:30px; text-align:center; color:#fff; }
        .card-header h3 { margin:0; font-size:20px; }
        .card-body { padding:30px; }
        .form-control { height:44px; border-radius:6px; border-color:#dee2e6; }
        .form-control:focus { border-color:#0f3460; box-shadow:0 0 0 3px rgba(15,52,96,.15); }
        .btn-success { width:100%; height:46px; background:linear-gradient(135deg,#1D6B3B,#28a745); border:none; font-weight:600; border-radius:6px; }
        .alert { border-radius:6px; font-size:13px; }
        .pass-req { background:#f8f9fa; border-radius:6px; padding:12px 16px; margin-bottom:16px; font-size:12px; }
        .pass-req li { margin:3px 0; color:#666; }
        .pass-req li.ok { color:#28a745; }
        .pass-req li.fail { color:#dc3545; }
        .pass-wrapper { position:relative; }
        .pass-wrapper .form-control { padding-right:40px; }
        .toggle-pass { position:absolute; right:12px; top:50%; transform:translateY(-50%); cursor:pointer; color:#999; border:none; background:none; }
        .strength-bar { height:4px; border-radius:2px; transition:all .3s; margin-top:6px; }
        .card-footer { background:#f8f9fa; padding:12px; text-align:center; font-size:11px; color:#aaa; }
    </style>
</head>
<body>
<div class="card">
    <div class="card-header"><div class="card-header"><img src="<?php echo base_url('assets/uploads/images/Nova logo Breno Paiva Adv site.jpg')?>" alt="Breno Paiva Advocacia"
                 style="max-width: 180px; height: auto; display: block; margin: 0 auto 10px auto;"
         onerror="this.style.display='none'">
        <h3><i class="fa fa-lock"></i> Criar Nova Senha</h3>
    </div>
    <div class="card-body">
        <?php if(!empty($error)): ?>
        <div class="alert alert-danger"><i class="fa fa-exclamation-triangle"></i> <?php echo $error?></div>
        <?php endif; ?>

        <div class="pass-req">
            <strong>Requisitos da senha:</strong>
            <ul class="list-unstyled" style="margin:6px 0 0" id="req-list">
                <li id="req-len"><i class="fa fa-circle-o"></i> Mínimo <?php echo $min_length?> caracteres</li>
                <?php if($req_upper): ?><li id="req-upper"><i class="fa fa-circle-o"></i> Pelo menos 1 letra maiúscula</li><?php endif; ?>
                <?php if($req_number): ?><li id="req-number"><i class="fa fa-circle-o"></i> Pelo menos 1 número</li><?php endif; ?>
                <?php if($req_symbol): ?><li id="req-symbol"><i class="fa fa-circle-o"></i> Pelo menos 1 símbolo (!@#$%...)</li><?php endif; ?>
            </ul>
        </div>

        <form method="post" action="<?php echo site_url('forgot/forgot_password/reset/'.$token)?>">
            <input type="hidden" name="email" value="<?php echo $email?>">
            <div class="form-group">
                <label><i class="fa fa-lock"></i> Nova Senha</label>
                <div class="pass-wrapper">
                    <input type="password" name="password" id="inp-pass" class="form-control" 
                           placeholder="Nova senha" required autocomplete="new-password">
                    <button type="button" class="toggle-pass" onclick="togglePass('inp-pass','eye1')">
                        <i class="fa fa-eye" id="eye1"></i>
                    </button>
                </div>
                <div class="strength-bar" id="strength-bar" style="background:#eee"></div>
            </div>
            <div class="form-group">
                <label><i class="fa fa-lock"></i> Confirmar Nova Senha</label>
                <div class="pass-wrapper">
                    <input type="password" name="confirm" id="inp-confirm" class="form-control" 
                           placeholder="Repita a senha" required autocomplete="new-password">
                    <button type="button" class="toggle-pass" onclick="togglePass('inp-confirm','eye2')">
                        <i class="fa fa-eye" id="eye2"></i>
                    </button>
                </div>
                <small id="match-msg" style="font-size:12px"></small>
            </div>
            <button type="submit" class="btn btn-success" id="btn-submit" disabled>
                <i class="fa fa-check"></i> Salvar Nova Senha
            </button>
        </form>
    </div>
    <div class="card-footer">Breno Paiva Advocacia - Gerência de Tecnologia da Informação</div>
</div>
<script>
var minLen = <?php echo $min_length?>;
var reqUpper = <?php echo $req_upper?>;
var reqNumber = <?php echo $req_number?>;
var reqSymbol = <?php echo $req_symbol?>;

function togglePass(id, eyeId) {
    var inp = document.getElementById(id);
    var ico = document.getElementById(eyeId);
    inp.type = inp.type === 'password' ? 'text' : 'password';
    ico.className = inp.type === 'text' ? 'fa fa-eye-slash' : 'fa fa-eye';
}

function check(id, ok) {
    var el = document.getElementById(id);
    if (!el) return;
    el.innerHTML = (ok ? '<i class="fa fa-check-circle" style="color:#28a745"></i>' : '<i class="fa fa-circle-o"></i>') + el.innerHTML.replace(/<[^>]+>/g,'').trim();
    el.style.color = ok ? '#28a745' : '#666';
}

document.getElementById('inp-pass').addEventListener('input', function() {
    var p = this.value;
    var score = 0;
    var lenOk = p.length >= minLen;
    var upOk  = !reqUpper  || /[A-Z]/.test(p);
    var numOk = !reqNumber || /[0-9]/.test(p);
    var symOk = !reqSymbol || /[^a-zA-Z0-9]/.test(p);
    if(lenOk) score++;
    if(upOk)  score++;
    if(numOk) score++;
    if(symOk) score++;
    var colors = ['#eee','#dc3545','#fd7e14','#ffc107','#28a745'];
    document.getElementById('strength-bar').style.background = colors[score];
    document.getElementById('strength-bar').style.width = (score*25)+'%';
    document.getElementById('req-len').style.color    = lenOk?'#28a745':'#666';
    if(document.getElementById('req-upper'))  document.getElementById('req-upper').style.color  = upOk?'#28a745':'#666';
    if(document.getElementById('req-number')) document.getElementById('req-number').style.color = numOk?'#28a745':'#666';
    if(document.getElementById('req-symbol')) document.getElementById('req-symbol').style.color = symOk?'#28a745':'#666';
    checkSubmit();
});

document.getElementById('inp-confirm').addEventListener('input', function() {
    var p = document.getElementById('inp-pass').value;
    var msg = document.getElementById('match-msg');
    if(this.value === p && p.length > 0) {
        msg.innerHTML = '<span style="color:#28a745"><i class="fa fa-check"></i> Senhas coincidem</span>';
    } else if(this.value.length > 0) {
        msg.innerHTML = '<span style="color:#dc3545"><i class="fa fa-times"></i> Senhas não coincidem</span>';
    } else { msg.innerHTML = ''; }
    checkSubmit();
});

function checkSubmit() {
    var p = document.getElementById('inp-pass').value;
    var c = document.getElementById('inp-confirm').value;
    var ok = p.length >= minLen && p === c &&
             (!reqUpper  || /[A-Z]/.test(p)) &&
             (!reqNumber || /[0-9]/.test(p)) &&
             (!reqSymbol || /[^a-zA-Z0-9]/.test(p));
    document.getElementById('btn-submit').disabled = !ok;
}
</script>
</body>
</html>
