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

$msg = "";

// =========================
// KIRIM OTP
// =========================
if(isset($_POST['kirim'])){

    $hp = mysqli_real_escape_string($conn,$_POST['hp']);

    $cek = mysqli_query($conn,
    "SELECT * FROM users WHERE no_hp='$hp'");

    if(mysqli_num_rows($cek) > 0){

        $otp = rand(100000,999999);

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

        $_SESSION['hp_reset'] = $hp;

        // =========================
        // FONNTE SEND WA
        // =========================
        $token = "RLbMMRQFGFvNZWQdzqhE";

        $curl = curl_init();

        curl_setopt_array($curl, array(
            CURLOPT_URL => "https://api.fonnte.com/send",
            CURLOPT_RETURNTRANSFER => true,
            CURLOPT_POST => true,
            CURLOPT_POSTFIELDS => array(
                'target' => $hp,
                'message' => "Kode OTP Reset Password SILAKU : $otp"
            ),
            CURLOPT_HTTPHEADER => array(
                "Authorization: $token"
            ),
        ));

        curl_exec($curl);
        curl_close($curl);

        $msg = "<div class='success'>OTP berhasil dikirim ke WhatsApp</div>";

    }else{
        $msg = "<div class='error'>Nomor HP tidak ditemukan</div>";
    }
}

// =========================
// VERIFIKASI OTP
// =========================
if(isset($_POST['verifikasi'])){

    $otp_input = mysqli_real_escape_string($conn,$_POST['otp']);

    $cek = mysqli_query($conn,
    "SELECT * FROM users WHERE otp='$otp_input'");

    if(mysqli_num_rows($cek) > 0){

        $_SESSION['otp_verified'] = true;

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

    }else{
        $msg = "<div class='error'>OTP Salah</div>";
    }
}
?>

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Reset Password OTP</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,#0f172a,#1e293b,#334155);
    overflow:hidden;
}

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

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

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

.container{
    position:relative;
    width:400px;
    padding:35px;
    border-radius:25px;
    background:rgba(255,255,255,0.08);
    backdrop-filter:blur(15px);
    border:1px solid rgba(255,255,255,0.1);
    box-shadow:0 8px 32px rgba(0,0,0,0.3);
    color:white;
    animation:fadeIn 0.6s 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:28px;
    font-weight:700;
}

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

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

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

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

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

input::placeholder{
    color:#cbd5e1;
}

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:5px;
}

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

.line{
    width:100%;
    height:1px;
    background:rgba(255,255,255,0.1);
    margin:25px 0;
}

.success{
    margin-top:20px;
    padding:12px;
    border-radius:12px;
    background:rgba(34,197,94,0.2);
    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.2);
    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="background bg1"></div>
<div class="background bg2"></div>

<div class="container">

    <div class="logo">
        <h1>SILAKU</h1>
        <p>Reset Password via WhatsApp OTP</p>
    </div>

    <!-- FORM KIRIM OTP -->
    <form method="POST">

        <div class="form-group">
            <label>Nomor WhatsApp</label>

            <input type="text"
            name="hp"
            placeholder="08123456789"
            required>
        </div>

        <button name="kirim">
            Kirim OTP
        </button>

    </form>

    <div class="line"></div>

    <!-- FORM VERIFIKASI OTP -->
    <form method="POST">

        <div class="form-group">

            <label>Masukkan Kode OTP</label>

            <input type="text"
            name="otp"
            placeholder="6 Digit OTP"
            maxlength="6"
            required>

        </div>

        <button name="verifikasi">
            Verifikasi OTP
        </button>

    </form>

    <?php echo $msg; ?>

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

</div>

</body>
</html>