<?php
include 'includes/header.php';
require_once 'includes/config.php';

if (session_status() === PHP_SESSION_NONE) {
    session_start();
}

/* CSRF TOKEN */
if (empty($_SESSION['csrf_token'])) {
    $_SESSION['csrf_token'] = bin2hex(random_bytes(32));
}

$error = $success = "";

/* FORM SUBMIT */
if ($_SERVER['REQUEST_METHOD'] === 'POST') {

    /* CSRF CHECK */
    if (!hash_equals($_SESSION['csrf_token'], $_POST['csrf_token'] ?? '')) {
        die("Invalid Request");
    }

    function clean($v){
        return htmlspecialchars(trim($v), ENT_QUOTES, 'UTF-8');
    }

    $name     = clean($_POST['name']);
    $username = clean($_POST['username']);
    $email    = filter_var($_POST['email'], FILTER_VALIDATE_EMAIL);
    $mobile   = clean($_POST['mobile']);
    $password = $_POST['password'];
    $confirm  = $_POST['confirm_password'];
    $address  = clean($_POST['address']);
    $city     = clean($_POST['city']);
    $state    = clean($_POST['state']);
    $pincode  = clean($_POST['pincode']);

    if (!$email) {
        $error = "Invalid email address";
    } elseif ($password !== $confirm) {
        $error = "Passwords do not match";
    } elseif (strlen($password) < 6) {
        $error = "Password must be at least 6 characters";
    } else {

        $check = $db->prepare("SELECT id FROM users WHERE email=? OR username=?");
        $check->execute([$email, $username]);

        if ($check->rowCount() > 0) {
            $error = "Email or Username already exists";
        } else {

            $hash = password_hash($password, PASSWORD_BCRYPT);

            $insert = $db->prepare("
                INSERT INTO users 
                (name, username, email, mobile, password, address, city, state, pincode, created_at)
                VALUES (?,?,?,?,?,?,?,?,?,NOW())
            ");

            if ($insert->execute([
                $name,$username,$email,$mobile,$hash,
                $address,$city,$state,$pincode
            ])) {
                $success = "Registration successful. You can login now.";
            } else {
                $error = "Something went wrong. Please try again.";
            }
        }
    }
}
?>

<style>
.register-hero{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    overflow:hidden;
    background:#020617;
}
.bg-layer{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    animation:bgZoom 14s ease-in-out infinite;
    transition:opacity 1s ease-in-out;
    z-index:1;
}
.register-hero::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(rgba(2,6,23,.85),rgba(2,6,23,.65));
    z-index:2;
}
@keyframes bgZoom{
    from{transform:scale(1);}
    to{transform:scale(1.15);}
}
.crystal-card{
    position:relative;
    z-index:3;
    width:100%;
    max-width:480px;
    padding:42px 36px;
    border-radius:26px;
    background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.05));
    backdrop-filter:blur(22px);
    border:1px solid rgba(255,255,255,.25);
    box-shadow:0 40px 120px rgba(0,0,0,.55);
}
.form-control{
    background:rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.25);
    color:#fff;
    padding:14px 16px;
    border-radius:14px;
}
.form-control::placeholder{color:#cbd5f5;}
.form-control:focus{
    background:rgba(255,255,255,.15);
    border-color:#38bdf8;
    box-shadow:none;
}
.btn-crystal{
    background:linear-gradient(90deg,#22c55e,#38bdf8,#a855f7);
    border:none;
    border-radius:16px;
    padding:15px;
    font-weight:600;
    transition:.3s;
}
.btn-crystal:hover{
    transform:translateY(-2px);
    box-shadow:0 18px 40px rgba(56,189,248,.45);
}
.crystal-links a{
    color:#cbd5f5;
    font-size:14px;
    text-decoration:none;
}
.crystal-links a:hover{color:#38bdf8;}
</style>

<section class="register-hero">
<div class="bg-layer" id="bgLayer"></div>

<div class="crystal-card text-white">

<h3 class="fw-bold text-center mb-1">Create Account</h3>
<p class="text-center opacity-75 mb-4">Complete your details</p>

<?php if($error): ?>
<div class="alert alert-danger text-center"><?= $error ?></div>
<?php endif; ?>

<?php if($success): ?>
<div class="alert alert-success text-center"><?= $success ?></div>
<?php endif; ?>

<form method="post">
<input type="hidden" name="csrf_token" value="<?= $_SESSION['csrf_token']; ?>">

<input class="form-control mb-3" name="name" placeholder="Full Name" required>
<input class="form-control mb-3" name="username" placeholder="Username" required>
<input type="email" class="form-control mb-3" name="email" placeholder="Email Address" required>
<input type="tel" class="form-control mb-3" name="mobile" placeholder="Mobile Number" required>
<input type="password" class="form-control mb-3" name="password" placeholder="Password" required>
<input type="password" class="form-control mb-3" name="confirm_password" placeholder="Confirm Password" required>
<textarea class="form-control mb-3" name="address" placeholder="Full Address"></textarea>

<div class="row">
<div class="col-md-6">
<input class="form-control mb-3" name="city" placeholder="City">
</div>
<div class="col-md-6">
<input class="form-control mb-3" name="state" placeholder="State">
</div>
</div>

<input class="form-control mb-3" name="pincode" placeholder="Pincode">

<div class="form-check mb-4">
<input class="form-check-input" type="checkbox" required>
<label class="form-check-label">I agree to Terms & Privacy Policy</label>
</div>

<button class="btn btn-crystal w-100 text-white">
Register Now
</button>
</form>

<div class="crystal-links d-flex justify-content-between mt-4">
<a href="login.php">Already have an account?</a>
<a href="#">Help</a>
</div>

</div>
</section>

<script>
const images=["assets/bg/bg1.jpg","assets/bg/bg2.jpg","assets/bg/bg3.jpg"];
let i=0;
const bg=document.getElementById("bgLayer");
function rotateBG(){
    bg.style.opacity=0;
    setTimeout(()=>{
        bg.style.backgroundImage=`url('${images[i]}')`;
        bg.style.opacity=1;
        i=(i+1)%images.length;
    },600);
}
rotateBG();
setInterval(rotateBG,6500);
</script>

<?php include 'includes/footer.php'; ?>
