<?php
require_once __DIR__ . '/config/database.php';

$success = '';
$error = '';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {

    $name   = trim($_POST['name'] ?? '');
    $status = $_POST['status'] ?? '';
    $pax    = (int)($_POST['pax'] ?? 1);

    if ($name === '' || !in_array($status, ['Going','Not Going'])) {
        $error = "Please complete the form.";
    } else {

        $stmt = $pdo->prepare("
            INSERT INTO rsvps (name, status, pax)
            VALUES (?, ?, ?)
        ");
        $stmt->execute([$name, $status, $pax]);

        $success = "Thank you for your response 🤍";
    }
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>RSVP</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
*{margin:0;padding:0;box-sizing:border-box}

body{
    font-family:Arial, Helvetica, sans-serif;
    background:#eef3f4;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
}

.card{
    width:100%;
    max-width:420px;
    background:#fff;
    border-radius:28px;
    padding:40px 30px;
    box-shadow:0 20px 60px rgba(0,0,0,.15);
}

h1{
    text-align:center;
    margin-bottom:30px;
    font-size:24px;
    letter-spacing:3px;
    color:#444;
}

.toggle{
    display:flex;
    gap:12px;
    margin-bottom:24px;
}

.toggle button{
    flex:1;
    padding:14px;
    border-radius:14px;
    border:1px solid #ccc;
    background:#f7f7f7;
    cursor:pointer;
    font-size:15px;
}

.toggle button.active{
    background:#eaeaea;
    border-color:#333;
    font-weight:bold;
}

input{
    width:100%;
    padding:14px;
    border-radius:12px;
    border:1px solid #ccc;
    margin-bottom:20px;
    font-size:14px;
}

.actions{
    display:flex;
    gap:14px;
    justify-content:center;
}

.actions button{
    padding:12px 28px;
    border-radius:30px;
    border:1px solid #444;
    background:#fff;
    cursor:pointer;
    font-size:14px;
}

.actions .primary{
    background:#6c5ce7;
    color:#fff;
    border:none;
}

.msg{
    text-align:center;
    margin-bottom:15px;
    font-size:14px;
}

.success{color:green}
.error{color:red}
</style>
</head>

<body>

<div class="card">

<h1>RSVP</h1>

<?php if($success): ?>
<div class="msg success"><?= htmlspecialchars($success) ?></div>
<?php elseif($error): ?>
<div class="msg error"><?= htmlspecialchars($error) ?></div>
<?php endif; ?>

<form method="post">

<div class="toggle">
    <button type="button" onclick="setStatus('Going')" id="btnGoing">✔ Going</button>
    <button type="button" onclick="setStatus('Not Going')" id="btnNot">✖ Not Going</button>
</div>

<input type="hidden" name="status" id="status">

<input type="text" name="name" placeholder="Your Name" required>

<input type="number" name="pax" value="1" min="1" placeholder="Total Attendance">

<div class="actions">
    <button type="submit" class="primary">Send</button>
    <button type="button" onclick="window.history.back()">Cancel</button>
</div>

</form>

</div>

<script>
function setStatus(val){
    document.getElementById('status').value = val;
    document.getElementById('btnGoing').classList.remove('active');
    document.getElementById('btnNot').classList.remove('active');

    if(val === 'Going'){
        document.getElementById('btnGoing').classList.add('active');
    } else {
        document.getElementById('btnNot').classList.add('active');
    }
}
</script>

</body>
</html>