|
Server : Apache/2.4.18 (Ubuntu) System : Linux canvaswebdesign 3.13.0-71-generic #114-Ubuntu SMP Tue Dec 1 02:34:22 UTC 2015 x86_64 User : oppastar ( 1041) PHP Version : 7.0.33-0ubuntu0.16.04.15 Disable Function : pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wifcontinued,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority, Directory : /var/www/laciasmara.com/public_html/shop/application/views/payment/ |
Upload File : |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?= $browser_title ?></title>
<meta name="description" content="<?= $meta_description; ?>">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="icon" href="<?= base_url() . 'uploads/' . $website_icon; ?>">
<link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
'brand-purple': '#7A4397'
}
}
}
}
</script>
<style>
body {
color: #333;
}
</style>
</head>
<body class="bg-gray-100">
<div class="container mx-auto px-4 py-8 max-w-6xl">
<div class="bg-white rounded-lg shadow-lg overflow-hidden">
<!-- Success Header -->
<div class="text-center py-6 bg-white">
<div class="text-6xl text-brand-purple mb-4">
<i class="ri-checkbox-circle-fill"></i>
</div>
<h1 class="text-3xl font-bold text-gray-800">Pesanan Berhasil!</h1>
<p class="text-gray-600 mt-2">
Yay! Pesanan kamu dengan nomor <strong>#<?= $orderData['id_orders'] ?></strong> udah dikonfirmasi.
Cek email kamu di <strong><?= $orderData['customer_email'] ?></strong>, siapa tahu udah nyampe 😉.
</p>
</div>
<div class="flex flex-col md:flex-row p-6 gap-6">
<!-- Bank Transfer Information Section (Left Side) -->
<div class="w-full md:w-2/3 space-y-4">
<h2 class="text-xl font-semibold mb-4 text-brand-purple">Cara Bayarnya</h2>
<div class="bg-gray-50 p-2 rounded-lg">
<div class="space-y-2 mb-3">
<p class="font-medium">Transfer ke:</p>
<p><strong>Bank Name:</strong> <?= $bankData['bank_name'] ?></p>
<div class="flex items-center space-x-2">
<p><strong>Account Number:</strong> <?= $bankData['account_number'] ?></p>
<button id="copyAccountBtn" class="text-brand-purple hover:text-opacity-80 flex items-center space-x-1">
<i class="ri-file-copy-line"></i>
<span class="text-sm">Salin</span>
</button>
</div>
<p><strong>Account Name:</strong> <?= $bankData['account_holder'] ?></p>
<p class="font-medium">Lakukan Pembayaran Dalam 24 Jam dan Konfirmasi Pembayaran Kamu</p>
</div>
<div class="md:text-right">
<p class="text-md text-gray-600">Total Transfer:</p>
<p class="font-bold text-lg text-brand-purple">
Rp <?= number_format($orderData['grand_total_amount'], 0, ',', '.') ?>
</p>
</div>
</div>
</div>
<!-- Recipient Information Section (Right Side) -->
<div class="w-full md:w-1/3">
<h2 class="text-xl font-semibold mb-4 md:ml-4 text-brand-purple">
<?= empty($orderData['gift_receiver_name']) ? 'Dikirim Untuk' : 'Hadiah Untuk' ?>
</h2>
<div class="bg-gray-50 md:p-4 rounded-lg">
<div class="space-y-4">
<?php if (empty($orderData['gift_receiver_name'])): ?>
<!-- Nama dan Alamat Penerima -->
<div>
<p class="font-medium text-gray-600">Nama Penerima</p>
<p class="text-md text-gray-800"><?= $orderData['shipping_name'] ?></p>
</div>
<div>
<p class="font-medium text-gray-600">Alamat Penerima</p>
<p class="text-md text-gray-800"><?= $orderData['shipping_address'] ?>. <?= $orderData['shipping_province'] ?>, <?= $orderData['shipping_district'] ?>, <?= $orderData['shipping_subdistrict'] ?></p>
</div>
<?php else: ?>
<!-- Nama dan Telepon Penerima Hadiah -->
<div>
<p class="font-medium text-gray-600">Nama Penerima</p>
<p class="text-md text-gray-800"><?= $orderData['gift_receiver_name'] ?> - <?= $orderData['gift_receiver_phone'] ?></p>
</div>
<div>
<p class="font-medium text-gray-600">Alamat Penerima</p>
<p class="text-md text-gray-800"><?= $orderData['shipping_address'] ?>. <?= $orderData['shipping_province'] ?>, <?= $orderData['shipping_district'] ?>, <?= $orderData['shipping_subdistrict'] ?></p>
</div>
<?php endif; ?>
</div>
</div>
</div>
</div>
<!-- Order Content -->
<div class="flex flex-col md:flex-row p-6 gap-6">
<!-- Left Section: Order Details -->
<div class="w-full md:w-2/3 space-y-4">
<div class="bg-gray-50 p-4 rounded-lg">
<h2 class="text-xl font-semibold mb-4 text-brand-purple">Detail Pesanan</h2>
<?php foreach ($orderDetails as $product): ?>
<div class="flex items-center justify-between py-3 border-b last:border-b-0">
<div class="flex items-center space-x-4">
<img src="<?= !empty($product['item_image']) ? base_url('uploads/product/' . $product['item_image']) : base_url('uploads/default-placeholder.png') ?>"
alt="<?= $product['item_name'] ?>"
class="w-16 h-16 object-cover rounded">
<div>
<p class="font-medium"><?= $product['item_name'] ?></p>
<p class="text-gray-500 text-sm">Jumlah: <?= $product['quantity'] ?></p>
</div>
</div>
<p class="font-semibold">
Rp <?= number_format($product['item_price'] * $product['quantity'], 0, ',', '.') ?>
</p>
</div>
<?php endforeach; ?>
</div>
</div>
<!-- Right Section: Checkout Summary -->
<div class="w-full md:w-1/3">
<div class="bg-gray-50 p-4 rounded-lg sticky top-6">
<h2 class="text-xl font-semibold mb-4 text-brand-purple">Ringkasan Pesanan</h2>
<div class="space-y-3">
<div class="flex justify-between">
<span class="text-gray-600 w-1/2 truncate">Subtotal</span>
<span class="w-1/2 text-right">IDR <?= number_format($orderData['total_amount'], 0, ',', '.') ?></span>
</div>
<div class="flex justify-between">
<span class="text-gray-600 w-1/2 truncate">Biaya Pengiriman</span>
<span class="w-1/2 text-right">
<?php if ($orderData['shipping_fee'] == 0): ?>
<span class="text-green-600">Free</span>
<?php else: ?>
IDR <?= number_format($orderData['shipping_fee'], 0, ',', '.') ?>
<?php endif; ?>
</span>
</div>
<?php if ($orderData['insurance_status'] == "Yes"): ?>
<div class="flex justify-between">
<span class="text-gray-600 w-1/2 truncate">Asuransi Pengiriman</span>
<span class="w-1/2 text-right">IDR <?= number_format($orderData['insurance_cost'] ?? 0, 0, ',', '.') ?></span>
</div>
<?php endif; ?>
<?php if (!empty($orderData['redeemed_voucher_code'])): ?>
<div class="flex justify-between">
<span class="text-gray-600 w-1/2 truncate">Voucher <?= $orderData['redeemed_voucher_code'] ?></span>
<span class="w-1/2 text-right text-green-600">
- IDR <?= number_format($orderData['redeemed_voucher_amount'] ?? 0, 0, ',', '.') ?>
</span>
</div>
<?php endif; ?>
<?php if ($orderData['minus_reward'] > 0): ?>
<div class="flex justify-between">
<span class="text-gray-600 w-1/2 truncate">Penukaran <?= $orderData['minus_reward'] ?> poin</span>
<span class="w-1/2 text-right text-green-600">
- IDR <?= number_format($orderData['minus_reward_amount'] ?? 0, 0, ',', '.') ?>
</span>
</div>
<?php endif; ?>
<div class="flex justify-between font-bold text-lg border-t pt-3">
<span class="w-1/2">Total</span>
<span class="w-1/2 text-right text-brand-purple">
IDR <?= number_format($orderData['grand_total_amount'], 0, ',', '.') ?>
</span>
</div>
</div>
<button onclick="window.location.href='<?= base_url('account/order_history') ?>'"
class="w-full mt-4 bg-brand-purple text-white py-3 rounded hover:bg-opacity-90 transition">
Konfirmasi Pesanan
</button>
</div>
</div>
</div>
<!-- Action Buttons -->
<div class="p-6 bg-gray-100 flex space-x-4">
<button onclick="window.location.href='<?= base_url() ?>'"
class="flex-1 bg-brand-purple text-white py-3 rounded hover:bg-opacity-90 transition">
Lanjut Belanja
</button>
</div>
</div>
</div>
<script>
document.getElementById('copyAccountBtn').addEventListener('click', () => {
const accountNumber = '<?= $bankData['account_number'] ?>';
navigator.clipboard.writeText(accountNumber).then(() => {
alert('Nomor rekening berhasil disalin!');
});
});
// Entrance animation
document.addEventListener('DOMContentLoaded', () => {
const container = document.querySelector('.container');
container.style.opacity = 0;
container.style.transform = 'translateY(20px)';
setTimeout(() => {
container.style.transition = 'all 0.5s ease';
container.style.opacity = 1;
container.style.transform = 'translateY(0)';
}, 100);
});
</script>
</body>
</html>