<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Customer Details</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.back-to-menu {
display: block;
margin: 30px auto 10px auto;
padding: 10px 20px;
background-color: #ff5722; /* Bright orange button */
color: #ffffff;
border: none;
border-radius: 25px;
font-size: 1rem;
font-weight: bold;
text-align: center;
text-decoration: none;
width: 100%;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: background-color 0.3s ease;
}
.back-to-menu:hover {
background-color: #e64a19;
text-decoration: none;
}
.copy-btn {
background: none;
border: none;
cursor: pointer;
color: #007bff;
font-size: 1rem;
margin-left: 10px;
}
</style>
<script>
function copyReferralCode() {
const referralText = document.getElementById("referralCode").innerText;
navigator.clipboard.writeText(referralText).then(() => {
alert("Referral Code Copied!");
}).catch(err => console.error("Failed to copy text: ", err));
}
</script>
</head>
<body>
<div class="container mt-4">
<h1>Customer Details</h1>
<div class="card">
<div class="card-body">
<h5 class="card-title">Customer Name: {{ customer.name }}</h5>
<p class="card-text"><strong>Email:</strong> {{ customer.email }}</p>
<p class="card-text"><strong>Phone:</strong> {{ customer.phone }}</p>
<p class="card-text"><strong>Referral Code:</strong> <span id="referralCode">{{ customer.referral_code }}</span>
<button class="copy-btn" onclick="copyReferralCode()">📋</button>
</p>
<p class="card-text"><strong>Reward Points:</strong> {{ customer.reward_points }}</p>
<!-- Edit Profile Button -->
<a href="/edit_profile" class="btn btn-primary">Edit Profile</a>
</div>
</div>
<!-- Back to Menu Button -->
<a href="/menu" class="back-to-menu">Back to Menu</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>