/home/ejrndhmu/tokobiolink.com/checkout.php
<?php
// Form Checkout Publik untuk Paket Langganan
session_start();
require_once 'config/database.php';
require_once 'includes/functions.php';
require_once 'includes/email.php';
// Fungsi untuk mendapatkan paket berdasarkan ID
function getPackageById($id) {
global $pdo;
try {
$stmt = $pdo->prepare("SELECT * FROM subscription_packages WHERE id = ? AND status = 'active'");
$stmt->execute([$id]);
return $stmt->fetch(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
error_log("Error getting package: " . $e->getMessage());
return false;
}
}
// Fungsi untuk mendapatkan semua paket aktif
function getAllActivePackages() {
global $pdo;
try {
$stmt = $pdo->prepare("SELECT * FROM subscription_packages WHERE status = 'active' ORDER BY price ASC");
$stmt->execute();
return $stmt->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
error_log("Error getting packages: " . $e->getMessage());
return [];
}
}
// Fungsi untuk mendapatkan rekening pembayaran aktif
function getActivePaymentAccounts() {
global $pdo;
try {
$stmt = $pdo->prepare("SELECT * FROM payment_accounts WHERE is_active = 'active' ORDER BY bank_name ASC");
$stmt->execute();
return $stmt->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
error_log("Error getting payment accounts: " . $e->getMessage());
return [];
}
}
// Fungsi untuk membuat pesanan baru
function createOrder($data) {
global $pdo;
try {
$pdo->beginTransaction();
// Generate order number
$orderNumber = 'ORD-' . date('Ymd') . '-' . strtoupper(substr(uniqid(), -6));
// Ambil data paket untuk mendapatkan target_role
$stmt = $pdo->prepare("SELECT target_role FROM subscription_packages WHERE id = ?");
$stmt->execute([$data['package_id']]);
$package = $stmt->fetch(PDO::FETCH_ASSOC);
if (!$package) {
throw new Exception("Paket tidak ditemukan");
}
$userId = null;
$username = null;
// Jika user sudah login, gunakan user yang sudah ada
if (isset($data['user_id'])) {
$userId = $data['user_id'];
// Ambil username dari database
$stmt = $pdo->prepare("SELECT username FROM users WHERE id = ?");
$stmt->execute([$userId]);
$userInfo = $stmt->fetch(PDO::FETCH_ASSOC);
$username = $userInfo['username'];
} else {
// Generate username dari email
$username = explode('@', $data['customer_email'])[0] . '_' . time();
// Buat user dengan status inactive
$stmt = $pdo->prepare("
INSERT INTO users (username, email, password, full_name, role, status, whatsapp_number, created_at)
VALUES (?, ?, ?, ?, ?, 'inactive', ?, CURRENT_TIMESTAMP)
");
$stmt->execute([
$username,
$data['customer_email'],
$data['customer_password'], // sudah di-hash dari form
$data['customer_name'],
$package['target_role'],
$data['customer_phone']
]);
$userId = $pdo->lastInsertId();
}
// Insert pesanan dengan user_id
$stmt = $pdo->prepare("
INSERT INTO subscription_orders (
order_number, package_id, payment_account_id, customer_name,
customer_email, customer_phone, customer_password,
total_amount, notes, status, user_id, created_at
) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, 'pending', ?, CURRENT_TIMESTAMP)
");
$stmt->execute([
$orderNumber,
$data['package_id'],
$data['payment_account_id'],
$data['customer_name'],
$data['customer_email'],
$data['customer_phone'],
$data['customer_password'],
$data['total_amount'],
$data['notes'],
$userId
]);
$orderId = $pdo->lastInsertId();
// Log aktivitas
$stmt = $pdo->prepare("
INSERT INTO subscription_logs (order_id, action, description)
VALUES (?, ?, ?)
");
$stmt->execute([$orderId, 'created', "Pesanan dibuat melalui form checkout publik. User dibuat dengan status inactive (ID: {$userId}, Username: {$username})"]);
// Sinkronisasi ke Mailketing untuk user dengan status pending
require_once 'includes/mailketing.php';
$mailketingSettings = getMailketingSettings();
if ($mailketingSettings && $mailketingSettings['auto_sync'] == '1') {
try {
$userData = [
'email' => $data['customer_email'],
'full_name' => $data['customer_name'],
'username' => $username,
'phone' => $data['customer_phone'],
'mobile' => $data['customer_phone'],
'role' => $package['target_role'],
'status' => 'pending' // Status pending untuk user yang baru checkout
];
syncUserToMailketing($userData);
error_log("User from checkout synced to Mailketing: {$data['customer_email']}");
} catch (Exception $e) {
error_log("Failed to sync checkout user to Mailketing: " . $e->getMessage());
}
}
// Kirim notifikasi Telegram untuk pesanan baru
try {
// Ambil data lengkap pesanan untuk notifikasi
$stmt = $pdo->prepare("
SELECT so.*, sp.name as package_name
FROM subscription_orders so
JOIN subscription_packages sp ON so.package_id = sp.id
WHERE so.id = ?
");
$stmt->execute([$orderId]);
$orderData = $stmt->fetch(PDO::FETCH_ASSOC);
if ($orderData) {
$orderData['customer_whatsapp'] = $orderData['customer_phone'];
// Get Telegram settings using the same PDO connection
$stmt = $pdo->prepare("SELECT setting_value FROM settings WHERE setting_key = ?");
$stmt->execute(['telegram_notifications_enabled']);
$telegramEnabled = $stmt->fetchColumn();
$stmt->execute(['telegram_bot_token']);
$botToken = $stmt->fetchColumn();
$stmt->execute(['telegram_channel_id']);
$channelId = $stmt->fetchColumn();
// Check if Telegram notifications are enabled and configured
if ($telegramEnabled === '1' && !empty($botToken) && !empty($channelId)) {
// Format Telegram message without database dependency
$siteName = 'Kiblat Digital';
$emoji = '🆕';
$title = 'PESANAN BARU';
$telegramMessage = "<b>{$emoji} {$title}</b>\n\n";
$telegramMessage .= "<b>Nomor Pesanan:</b> {$orderData['order_number']}\n";
$telegramMessage .= "<b>Nama Customer:</b> {$orderData['customer_name']}\n";
$telegramMessage .= "<b>Email:</b> {$orderData['customer_email']}\n";
$telegramMessage .= "<b>WhatsApp:</b> {$orderData['customer_whatsapp']}\n";
$telegramMessage .= "<b>Paket:</b> {$orderData['package_name']}\n";
$telegramMessage .= "<b>Harga:</b> Rp " . number_format($orderData['total_amount'], 0, ',', '.') . "\n";
$telegramMessage .= "<b>Tanggal:</b> " . date('d/m/Y H:i', strtotime($orderData['created_at'])) . "\n\n";
$telegramMessage .= "<i>Menunggu konfirmasi pembayaran</i>";
$telegramMessage .= "\n\n<b>{$siteName}</b>";
// Send notification using cURL without database dependency
$apiUrl = "https://api.telegram.org/bot{$botToken}/sendMessage";
$data = [
'chat_id' => $channelId,
'text' => $telegramMessage,
'parse_mode' => 'HTML',
'disable_web_page_preview' => true
];
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $apiUrl);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($data));
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_TIMEOUT, 10);
curl_exec($ch);
curl_close($ch);
}
}
} catch (Exception $e) {
error_log("Failed to send Telegram notification for new order: " . $e->getMessage());
}
$pdo->commit();
return ['success' => true, 'order_id' => $orderId, 'order_number' => $orderNumber, 'user_id' => $userId, 'username' => $username];
} catch (Exception $e) {
if ($pdo->inTransaction()) {
$pdo->rollBack();
}
error_log("Error creating order: " . $e->getMessage());
return ['success' => false, 'message' => 'Gagal membuat pesanan: ' . $e->getMessage()];
}
}
// Handle form submission
$message = '';
$messageType = '';
$orderCreated = false;
$orderDetails = null;
$isLoggedIn = isset($_SESSION['user_id']);
$userData = null;
// Jika user sudah login, ambil data user
if ($isLoggedIn) {
$stmt = $pdo->prepare("SELECT * FROM users WHERE id = ?");
$stmt->execute([$_SESSION['user_id']]);
$userData = $stmt->fetch(PDO::FETCH_ASSOC);
}
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$action = $_POST['action'] ?? '';
// Handle login
if ($action === 'login') {
$email = trim($_POST['login_email'] ?? '');
$password = $_POST['login_password'] ?? '';
if (empty($email) || empty($password)) {
$errors[] = "Email dan password harus diisi";
} else {
// Cek user di database
$stmt = $pdo->prepare("SELECT id, username, email, password, status FROM users WHERE email = ?");
$stmt->execute([$email]);
$user = $stmt->fetch(PDO::FETCH_ASSOC);
if ($user && password_verify($password, $user['password'])) {
if ($user['status'] === 'active') {
$_SESSION['user_id'] = $user['id'];
$_SESSION['username'] = $user['username'];
$_SESSION['email'] = $user['email'];
// Redirect untuk refresh halaman
header('Location: checkout.php' . (isset($_GET['package']) ? '?package=' . $_GET['package'] : ''));
exit();
} else {
$errors[] = "Akun Anda belum aktif. Silakan hubungi admin.";
}
} else {
$errors[] = "Email atau password salah";
}
}
if (!empty($errors)) {
$message = implode('<br>', $errors);
$messageType = 'error';
}
}
// Handle logout
elseif ($action === 'logout') {
session_destroy();
header('Location: checkout.php' . (isset($_GET['package']) ? '?package=' . $_GET['package'] : ''));
exit();
}
// Handle create order
elseif ($action === 'create_order') {
// Validasi input
$packageId = (int)($_POST['package_id'] ?? 0);
$paymentAccountId = (int)($_POST['payment_account_id'] ?? 0);
$customerName = sanitizeInput($_POST['customer_name'] ?? '');
$customerEmail = sanitizeInput($_POST['customer_email'] ?? '');
$customerPhone = sanitizeInput($_POST['customer_phone'] ?? '');
$customerPassword = $_POST['customer_password'] ?? '';
$confirmPassword = $_POST['confirm_password'] ?? '';
$notes = sanitizeInput($_POST['notes'] ?? '');
// Validasi
$errors = [];
if (empty($customerName)) {
$errors[] = 'Nama lengkap harus diisi.';
}
if (empty($customerEmail) || !filter_var($customerEmail, FILTER_VALIDATE_EMAIL)) {
$errors[] = 'Email tidak valid.';
}
if (empty($customerPhone)) {
$errors[] = 'Nomor telepon harus diisi.';
}
// Validasi password hanya untuk user yang belum login
if (!$isLoggedIn) {
if (empty($customerPassword) || strlen($customerPassword) < 6) {
$errors[] = 'Password minimal 6 karakter.';
}
if ($customerPassword !== $confirmPassword) {
$errors[] = 'Konfirmasi password tidak cocok.';
}
}
if ($packageId <= 0) {
$errors[] = 'Pilih paket langganan.';
}
if ($paymentAccountId <= 0) {
$errors[] = 'Pilih metode pembayaran.';
}
// Validasi untuk user yang belum login
if (!$isLoggedIn) {
// Cek apakah email sudah terdaftar
$stmt = $pdo->prepare("SELECT id FROM users WHERE email = ?");
$stmt->execute([$customerEmail]);
if ($stmt->fetch()) {
$errors[] = 'Email sudah terdaftar. Silakan login dengan akun yang sudah ada.';
}
}
// Cek apakah ada pesanan pending dengan email yang sama
$stmt = $pdo->prepare("SELECT id FROM subscription_orders WHERE customer_email = ? AND status IN ('pending', 'paid')");
$stmt->execute([$customerEmail]);
if ($stmt->fetch()) {
$errors[] = 'Anda masih memiliki pesanan yang belum selesai dengan email ini.';
}
if (empty($errors)) {
// Ambil data paket
$package = getPackageById($packageId);
if (!$package) {
$errors[] = 'Paket tidak ditemukan atau tidak aktif.';
} else {
// Hash password hanya jika user belum login
$hashedPassword = null;
if (!$isLoggedIn) {
$hashedPassword = password_hash($customerPassword, PASSWORD_DEFAULT);
}
$orderData = [
'package_id' => $packageId,
'payment_account_id' => $paymentAccountId,
'customer_name' => $customerName,
'customer_email' => $customerEmail,
'customer_phone' => $customerPhone,
'customer_password' => $isLoggedIn ? null : $hashedPassword,
'total_amount' => $package['price'],
'notes' => $notes
];
// Tambahkan user_id jika user sudah login
if ($isLoggedIn) {
$orderData['user_id'] = $_SESSION['user_id'];
}
$result = createOrder($orderData);
if ($result['success']) {
// Kirim notifikasi email checkout
$emailData = [
'customer_name' => $customerName,
'order_number' => $result['order_number'],
'package_name' => $package['name'],
'package_price' => 'Rp ' . number_format($package['price'], 0, ',', '.')
];
$emailSent = sendEmailNotification(
$customerEmail,
'checkout',
$emailData
);
if (!$emailSent) {
error_log("Failed to send checkout email to: $customerEmail");
}
// Redirect ke halaman invoice
header('Location: invoice.php?order=' . urlencode($result['order_number']));
exit();
} else {
$errors[] = $result['message'];
}
}
}
if (!empty($errors)) {
$message = implode('<br>', $errors);
$messageType = 'error';
}
}
}
// Get data untuk form
$packages = getAllActivePackages();
$paymentAccounts = getActivePaymentAccounts();
$selectedPackageId = (int)($_GET['package'] ?? 0);
?>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Checkout - Paket Langganan</title>
<?php echo renderMetaPixelForPage('checkout'); ?>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
'blue-primary': '#3B82F6',
'blue-dark': '#1E40AF'
}
}
}
}
</script>
</head>
<body class="bg-gray-50">
<div class="min-h-screen py-8">
<div class="max-w-4xl mx-auto px-4">
<!-- Header -->
<div class="text-center mb-8">
<h1 class="text-3xl font-bold text-gray-800 mb-2">Checkout Paket Langganan</h1>
<p class="text-gray-600">Lengkapi data di bawah untuk melanjutkan pembelian</p>
</div>
<!-- Message Display -->
<?php if ($message): ?>
<div class="mb-6 p-4 rounded-lg <?php echo $messageType === 'success' ? 'bg-green-50 border border-green-200 text-green-700' : 'bg-red-50 border border-red-200 text-red-700'; ?>">
<i class="fas <?php echo $messageType === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle'; ?> mr-2"></i>
<?php echo $message; ?>
</div>
<?php endif; ?>
<!-- Login/User Status Section -->
<?php if (!$isLoggedIn): ?>
<div class="mb-6 bg-white rounded-lg shadow-sm border border-gray-200 p-6">
<div class="flex justify-center mb-4">
<div class="bg-gray-100 p-1 rounded-lg">
<button type="button" id="toggleLogin" class="px-4 py-2 rounded-md text-sm font-medium transition-colors text-gray-600 hover:text-gray-800">
<i class="fas fa-sign-in-alt mr-2"></i>Login
</button>
<button type="button" id="toggleRegister" class="px-4 py-2 rounded-md text-sm font-medium transition-colors bg-blue-primary text-white">
<i class="fas fa-user-plus mr-2"></i>Daftar Baru
</button>
</div>
</div>
<!-- Login Form -->
<div id="loginForm" class="hidden">
<h3 class="text-lg font-semibold text-gray-800 mb-4 text-center">Masuk dengan Akun Anda</h3>
<form method="POST" class="space-y-4">
<input type="hidden" name="action" value="login">
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Email</label>
<input type="email" name="login_email" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Password</label>
<input type="password" name="login_password" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<button type="submit" class="w-full bg-blue-primary hover:bg-blue-dark text-white py-2 px-4 rounded-lg font-semibold transition duration-200">
<i class="fas fa-sign-in-alt mr-2"></i>Masuk
</button>
</form>
<p class="text-center text-sm text-gray-600 mt-4">
Belum punya akun? <button type="button" onclick="showRegisterForm()" class="text-blue-primary hover:underline">Daftar di sini</button>
</p>
</div>
<!-- Register Info -->
<div id="registerInfo" class="">
<h3 class="text-lg font-semibold text-gray-800 mb-4 text-center">Daftar Akun Baru</h3>
<p class="text-center text-gray-600 mb-4">Isi form di bawah untuk membuat akun baru dan melanjutkan checkout</p>
<p class="text-center text-sm text-gray-600">
Sudah punya akun? <button type="button" onclick="showLoginForm()" class="text-blue-primary hover:underline">Masuk di sini</button>
</p>
</div>
</div>
<?php else: ?>
<!-- User Logged In Status -->
<div class="mb-6 bg-green-50 border border-green-200 rounded-lg p-4">
<div class="flex items-center justify-between">
<div class="flex items-center">
<i class="fas fa-user-check text-green-600 mr-3"></i>
<div>
<p class="text-green-800 font-medium">Anda sudah masuk sebagai: <?php echo htmlspecialchars($userData['full_name'] ?? $userData['username']); ?></p>
<p class="text-green-600 text-sm"><?php echo htmlspecialchars($userData['email']); ?></p>
</div>
</div>
<form method="POST" class="inline">
<input type="hidden" name="action" value="logout">
<button type="submit" class="text-red-600 hover:text-red-800 text-sm">
<i class="fas fa-sign-out-alt mr-1"></i>Keluar
</button>
</form>
</div>
</div>
<?php endif; ?>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- Form Checkout -->
<div class="lg:col-span-2">
<form method="POST" class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
<input type="hidden" name="action" value="create_order">
<h2 class="text-xl font-semibold text-gray-800 mb-6">Informasi Pelanggan</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Nama Lengkap *</label>
<input type="text" name="customer_name" value="<?php echo htmlspecialchars($_POST['customer_name'] ?? ($userData['full_name'] ?? '')); ?>" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 <?php echo $isLoggedIn ? 'bg-gray-50' : ''; ?>" <?php echo $isLoggedIn ? 'readonly' : ''; ?>>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Email *</label>
<input type="email" name="customer_email" value="<?php echo htmlspecialchars($_POST['customer_email'] ?? ($userData['email'] ?? '')); ?>" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 <?php echo $isLoggedIn ? 'bg-gray-50' : ''; ?>" <?php echo $isLoggedIn ? 'readonly' : ''; ?>>
</div>
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-2">Nomor Telepon/WhatsApp *</label>
<input type="tel" name="customer_phone" value="<?php echo htmlspecialchars($_POST['customer_phone'] ?? ($userData['whatsapp_number'] ?? '')); ?>" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<?php if (!$isLoggedIn): ?>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Password *</label>
<input type="password" name="customer_password" required minlength="6" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
<p class="text-xs text-gray-500 mt-1">Minimal 6 karakter</p>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Konfirmasi Password *</label>
<input type="password" name="confirm_password" required minlength="6" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
</div>
<?php else: ?>
<div class="mb-6 p-3 bg-blue-50 border border-blue-200 rounded-lg">
<p class="text-blue-800 text-sm">
<i class="fas fa-info-circle mr-2"></i>
Anda sudah login, tidak perlu mengisi password lagi.
</p>
</div>
<?php endif; ?>
<h2 class="text-xl font-semibold text-gray-800 mb-4">Pilih Paket Langganan</h2>
<div class="space-y-3 mb-6">
<?php foreach ($packages as $package): ?>
<label class="flex items-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer <?php echo $selectedPackageId === $package['id'] ? 'border-blue-500 bg-blue-50' : ''; ?>">
<input type="radio" name="package_id" value="<?php echo $package['id']; ?>" <?php echo $selectedPackageId === $package['id'] ? 'checked' : ''; ?> required class="mr-3">
<div class="flex-1">
<div class="flex justify-between items-start">
<div>
<h3 class="font-semibold text-gray-800"><?php echo htmlspecialchars($package['name']); ?></h3>
<p class="text-sm text-gray-600 mt-1"><?php echo htmlspecialchars($package['description']); ?></p>
<span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full mt-2 <?php echo $package['target_role'] === 'reseller' ? 'bg-purple-100 text-purple-800' : 'bg-blue-100 text-blue-800'; ?>">
<?php echo ucfirst($package['target_role']); ?>
</span>
</div>
<div class="text-right">
<div class="text-2xl font-bold text-gray-800">Rp <?php echo number_format($package['price'], 0, ',', '.'); ?></div>
<div class="text-sm text-gray-500"><?php echo $package['duration_days']; ?> hari</div>
</div>
</div>
</div>
</label>
<?php endforeach; ?>
</div>
<h2 class="text-xl font-semibold text-gray-800 mb-4">Metode Pembayaran</h2>
<div class="space-y-3 mb-6">
<?php foreach ($paymentAccounts as $account): ?>
<label class="flex items-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer">
<input type="radio" name="payment_account_id" value="<?php echo $account['id']; ?>" required class="mr-3">
<div class="flex-1">
<div class="flex items-center">
<div>
<h3 class="font-semibold text-gray-800"><?php echo htmlspecialchars($account['bank_name']); ?></h3>
<p class="text-sm text-gray-600"><?php echo htmlspecialchars($account['account_number']); ?></p>
<p class="text-sm text-gray-600">a.n. <?php echo htmlspecialchars($account['account_name']); ?></p>
</div>
</div>
</div>
</label>
<?php endforeach; ?>
</div>
<div class="flex items-center mb-6">
<input type="checkbox" id="agree_terms" required class="mr-2">
<label for="agree_terms" class="text-sm text-gray-600">
Saya setuju dengan syarat dan ketentuan yang berlaku
</label>
</div>
<button type="submit" class="w-full bg-blue-primary hover:bg-blue-dark text-white py-3 px-4 rounded-lg font-semibold transition duration-200">
<i class="fas fa-shopping-cart mr-2"></i>Buat Pesanan
</button>
</form>
</div>
<!-- Order Summary -->
<div class="lg:col-span-1">
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 sticky top-4">
<h3 class="text-lg font-semibold text-gray-800 mb-4">Ringkasan Pesanan</h3>
<div id="orderSummary" class="space-y-3">
<div class="text-center text-gray-500 py-8">
<i class="fas fa-box-open text-3xl mb-2"></i>
<p>Pilih paket untuk melihat ringkasan</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
// Toggle between login and register forms
function showLoginForm() {
document.getElementById('loginForm').classList.remove('hidden');
document.getElementById('registerInfo').classList.add('hidden');
document.getElementById('toggleLogin').classList.add('bg-blue-primary', 'text-white');
document.getElementById('toggleLogin').classList.remove('text-gray-600', 'hover:text-gray-800');
document.getElementById('toggleRegister').classList.remove('bg-blue-primary', 'text-white');
document.getElementById('toggleRegister').classList.add('text-gray-600', 'hover:text-gray-800');
}
function showRegisterForm() {
document.getElementById('loginForm').classList.add('hidden');
document.getElementById('registerInfo').classList.remove('hidden');
document.getElementById('toggleRegister').classList.add('bg-blue-primary', 'text-white');
document.getElementById('toggleRegister').classList.remove('text-gray-600', 'hover:text-gray-800');
document.getElementById('toggleLogin').classList.remove('bg-blue-primary', 'text-white');
document.getElementById('toggleLogin').classList.add('text-gray-600', 'hover:text-gray-800');
}
// Update order summary when package is selected
document.addEventListener('DOMContentLoaded', function() {
// Setup toggle buttons
const toggleLogin = document.getElementById('toggleLogin');
const toggleRegister = document.getElementById('toggleRegister');
if (toggleLogin) {
toggleLogin.addEventListener('click', showLoginForm);
}
if (toggleRegister) {
toggleRegister.addEventListener('click', showRegisterForm);
}
const packageRadios = document.querySelectorAll('input[name="package_id"]');
const paymentRadios = document.querySelectorAll('input[name="payment_account_id"]');
function updateOrderSummary() {
const selectedPackage = document.querySelector('input[name="package_id"]:checked');
const selectedPayment = document.querySelector('input[name="payment_account_id"]:checked');
const summaryDiv = document.getElementById('orderSummary');
if (selectedPackage) {
const packageLabel = selectedPackage.closest('label');
const packageName = packageLabel.querySelector('h3').textContent;
const packagePrice = packageLabel.querySelector('.text-2xl').textContent;
const packageDuration = packageLabel.querySelector('.text-sm.text-gray-500').textContent;
const packageRole = packageLabel.querySelector('.inline-flex').textContent;
let paymentInfo = '';
if (selectedPayment) {
const paymentLabel = selectedPayment.closest('label');
const bankName = paymentLabel.querySelector('h3').textContent;
const accountNumber = paymentLabel.querySelector('.text-sm.text-gray-600').textContent;
paymentInfo = `
<div class="border-t pt-3">
<h4 class="font-medium text-gray-800 mb-2">Pembayaran:</h4>
<p class="text-sm text-gray-600">${bankName}</p>
<p class="text-sm text-gray-600">${accountNumber}</p>
</div>
`;
}
summaryDiv.innerHTML = `
<div>
<h4 class="font-medium text-gray-800 mb-2">Paket Dipilih:</h4>
<p class="text-sm font-semibold">${packageName}</p>
<p class="text-xs text-gray-600">${packageRole} - ${packageDuration}</p>
</div>
${paymentInfo}
<div class="border-t pt-3">
<div class="flex justify-between items-center">
<span class="font-semibold text-gray-800">Total:</span>
<span class="text-xl font-bold text-blue-600">${packagePrice}</span>
</div>
</div>
`;
} else {
summaryDiv.innerHTML = `
<div class="text-center text-gray-500 py-8">
<i class="fas fa-box-open text-3xl mb-2"></i>
<p>Pilih paket untuk melihat ringkasan</p>
</div>
`;
}
}
packageRadios.forEach(radio => {
radio.addEventListener('change', updateOrderSummary);
});
paymentRadios.forEach(radio => {
radio.addEventListener('change', updateOrderSummary);
});
// Initial update
updateOrderSummary();
});
// Password confirmation validation
document.addEventListener('DOMContentLoaded', function() {
const password = document.querySelector('input[name="customer_password"]');
const confirmPassword = document.querySelector('input[name="confirm_password"]');
function validatePassword() {
if (password.value !== confirmPassword.value) {
confirmPassword.setCustomValidity('Password tidak cocok');
} else {
confirmPassword.setCustomValidity('');
}
}
password.addEventListener('input', validatePassword);
confirmPassword.addEventListener('input', validatePassword);
});
</script>
</body>
</html>