<?php
session_start();
include 'koneksi.php';

if(!isset($_SESSION['otp_verified'])){
    header("Location: reset.php");
    exit;
}

$msg = "";

if(isset($_POST['ubah'])){

    $hp = $_SESSION['hp_reset'];
    $password_baru = $_POST['password'];
    $konfirmasi = $_POST['konfirmasi'];

    // VALIDASI PASSWORD
    if($password_baru != $konfirmasi){

        $msg = "<div class='error'>
                    Konfirmasi password tidak cocok
                </div>";

    }else{

        $password = password_hash($password_baru, PASSWORD_DEFAULT);

        $update = mysqli_query($conn,
        "UPDATE users 
        SET password='$password', otp='' 
        WHERE no_hp='$hp'");

        if($update){

            session_destroy();

            header("Location: login.php");
            exit;

        }else{

            $msg = "<div class='error'>
                        Gagal mengubah password
                    </div>";
        }
    }
}
?>

<!DOCTYPE html>
<html lang="id">
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Password Baru</title>

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">

<style>

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

body{
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    background:linear-gradient(135deg,#020617,#0f172a,#1e293b);
    overflow:hidden;
}

.bg{
    position:absolute;
    width:450px;
    height:450px;
    background:rgba(255,255,255,0.05);
    border-radius:50%;
    filter:blur(100px);
}

.bg1{
    top:-120px;
    left:-120px;
}

.bg2{
    bottom:-120px;
    right:-120px;
}

.container{
    position:relative;
    width:400px;
    padding:35px;
    border-radius:28px;
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.1);
    backdrop-filter:blur(18px);
    box-shadow:0 8px 32px rgba(0,0,0,0.4);
    color:white;
    animation:fadeIn 0.5s ease;
}

@keyframes fadeIn{
    from{
        opacity:0;
        transform:translateY(20px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

.logo{
    text-align:center;
    margin-bottom:25px;
}

.logo h1{
    font-size:30px;
    font-weight:700;
}

.logo p{
    margin-top:5px;
    font-size:13px;
    color:#cbd5e1;
}

.form-group{
    margin-bottom:18px;
}

label{
    display:block;
    margin-bottom:8px;
    font-size:14px;
    color:#e2e8f0;
}

input{
    width:100%;
    padding:14px;
    border:none;
    outline:none;
    border-radius:14px;
    background:rgba(255,255,255,0.07);
    border:1px solid rgba(255,255,255,0.08);
    color:white;
    font-size:14px;
    transition:0.3s;
}

input::placeholder{
    color:#94a3b8;
}

input:focus{
    border-color:#38bdf8;
    box-shadow:0 0 15px rgba(56,189,248,0.5);
}

button{
    width:100%;
    padding:14px;
    border:none;
    border-radius:14px;
    background:linear-gradient(135deg,#38bdf8,#0ea5e9);
    color:white;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    transition:0.3s;
    margin-top:10px;
}

button:hover{
    transform:translateY(-2px);
    box-shadow:0 5px 20px rgba(14,165,233,0.5);
}

.success{
    margin-top:20px;
    padding:12px;
    border-radius:12px;
    background:rgba(34,197,94,0.15);
    border:1px solid #22c55e;
    text-align:center;
    font-size:14px;
}

.error{
    margin-top:20px;
    padding:12px;
    border-radius:12px;
    background:rgba(239,68,68,0.15);
    border:1px solid #ef4444;
    text-align:center;
    font-size:14px;
}

.footer{
    text-align:center;
    margin-top:20px;
    font-size:12px;
    color:#94a3b8;
}

</style>

</head>
<body>

<div class="bg bg1"></div>
<div class="bg bg2"></div>

<div class="container">

    <div class="logo">
        <h1>SILAKU</h1>
        <p>Ganti Password Baru Akun Anda</p>
    </div>

    <form method="POST">

        <div class="form-group">

            <label>Password Baru</label>

            <input type="password"
            name="password"
            placeholder="Masukkan password baru"
            required>

        </div>

        <div class="form-group">

            <label>Konfirmasi Password</label>

            <input type="password"
            name="konfirmasi"
            placeholder="Ulangi password baru"
            required>

        </div>

        <button name="ubah">
            Simpan Password Baru
        </button>

    </form>

    <?php echo $msg; ?>

    <div class="footer">
        © 2026 SILAKU SYSTEM
    </div>

</div>

</body>
</html>