<?php
require_once __DIR__.'/../config/session.php';
require_once __DIR__.'/../config/db.php';
date_default_timezone_set('Asia/Jakarta');
if(empty($_SESSION['user_id'])){
header("Location:/");
exit;
}
$uid = (int)$_SESSION['user_id'];
/* ================= GET DEFAULT ADDRESS ================= */
$addr = $mysqli->query("SELECT * FROM users_address WHERE user_id=$uid LIMIT 1")->fetch_assoc();
$isBuy = isset($_GET['buy']);
$items = [];
$total = 0;
/* ================= MULTI VARIAN DARI POPUP ================= */
if(isset($_GET['multi']) && isset($_GET['items'])){
$raw = json_decode($_GET['items'], true);
$id = (int)$_GET['id'];
$q = $mysqli->prepare("SELECT nama,harga FROM produk WHERE id=?");
$q->bind_param("i",$id);
$q->execute();
$p = $q->get_result()->fetch_assoc();
$items = [];
$total = 0;
foreach($raw as $it){
$qty = (int)$it['qty'];
$varian = trim($it['varian']);
$sub = $qty * $p['harga'];
$total += $sub;
$items[] = [
'nama'=>$p['nama'],
'varian'=>$varian,
'qty'=>$qty,
'harga'=>$p['harga'],
'sub'=>$sub
];
}
}
/* ================= DATA ================= */
if(isset($_GET['multi'])){
// sudah diproses di atas → jangan ambil cart
}
else if($isBuy){
$id = (int)$_GET['id'];
$qty = (int)$_GET['qty'];
$q = $mysqli->prepare("SELECT nama,harga FROM produk WHERE id=?");
$q->bind_param("i",$id);
$q->execute();
$p = $q->get_result()->fetch_assoc();
$sub = $qty * $p['harga'];
$total = $sub;
$items[] = ['nama'=>$p['nama'],'qty'=>$qty,'harga'=>$p['harga'],'sub'=>$sub];
}else{
$q = $mysqli->query("
SELECT
c.produk_id,
c.varian,
SUM(c.qty) as qty,
p.nama,
p.harga
FROM cart c
JOIN produk p ON c.produk_id=p.id
WHERE c.user_id=$uid
GROUP BY c.produk_id, c.varian
");
while($r = $q->fetch_assoc()){
$sub = $r['qty'] * $r['harga'];
$total += $sub;
$items[] = [
'nama'=>$r['nama'],
'varian'=>$r['varian'],
'qty'=>$r['qty'],
'harga'=>$r['harga'],
'sub'=>$sub
];
}
}
/* ================= SAVE ADDRESS ================= */
if(isset($_POST['save_address'])){
$stmt=$mysqli->prepare("INSERT INTO users_address(user_id,nama,wa,kec,kel,rt,rw,jalan) VALUES(?,?,?,?,?,?,?,?)");
$stmt->bind_param("isssssss",$uid,$_POST['nama'],$_POST['wa'],$_POST['kec'],$_POST['kel'],$_POST['rt'],$_POST['rw'],$_POST['jalan']);
$stmt->execute();
echo "ok"; exit;
}
/* ================= DELETE ADDRESS ================= */
if(isset($_POST['delete_address'])){
$mysqli->query("DELETE FROM users_address WHERE user_id=$uid");
echo "ok"; exit;
}
?>
<?php require_once __DIR__.'/../includes/header.php'; ?>
<style>
body{font-family:Poppins;margin:0;background:#fff}
.box{padding:15px 15px 200px}
.ship{padding:18px;border-radius:18px;margin-top:12px;font-weight:700;text-align:center;cursor:pointer}
.ship:active{transform:scale(.96)}
.ojol{background:linear-gradient(#27ae60,#145a32);color:#fff}
.toko{background:linear-gradient(#3498db,#1b4f72);color:#fff}
.btn-main{
display:flex;
align-items:center;
justify-content:center;
gap:8px;
padding:14px;
border-radius:14px;
/* 🔥 UNGU TIPIS (FIX) */
background:linear-gradient(145deg,#f7f5fc,#efeafd);
color:#3a2f5a;
font-weight:600;
font-size:14px;
border:1px solid rgba(84,35,133,.15);
box-shadow:
0 6px 16px rgba(84,35,133,.08),
inset 0 1px 0 rgba(255,255,255,.8);
cursor:pointer;
transition:.25s cubic-bezier(.4,0,.2,1);
}
/* hover */
.btn-main:hover{
background:linear-gradient(145deg,#f3f0fb,#e9e3fb);
border:1px solid rgba(84,35,133,.25);
box-shadow:
0 10px 20px rgba(84,35,133,.12),
0 0 0 1px rgba(84,35,133,.06);
}
/* klik */
.btn-main:active{
transform:scale(.97);
box-shadow:
0 3px 8px rgba(84,35,133,.12),
inset 0 2px 5px rgba(0,0,0,.05);
}
/* ICON */
.icon-upload{
width:18px;
height:18px;
filter:grayscale(100%) brightness(.35);
opacity:.7;
transition:.2s;
}
.btn-main:active .icon-upload{
transform:scale(.9);
opacity:1;
}
#uploadBtn:active .icon-upload{
transform:scale(.85);
}
.input{width:100%;padding:12px;border-radius:12px;border:1px solid #ddd;margin-top:10px}
.row{display:flex;gap:10px}
.small{
font-size:10px;
background:#f5f5f5;
padding:8px;
border-radius:10px;
margin-bottom:10px;
}
.pay{display:flex;gap:10px;margin-top:10px}
.pay div{
flex:1;padding:12px;text-align:center;border-radius:12px;
background:#eee;font-weight:700;cursor:pointer;
}
.pay div:active{transform:scale(.95)}
.tunai.active{background:#2ecc71;color:#fff}
.qris-btn.active{background:#8e44ad;color:#fff}
.qris{display:none;text-align:center;margin-top:15px}
.preview{width:130px;border-radius:12px;margin-top:10px}
.popup{
position:fixed;inset:0;background:rgba(0,0,0,.6);
display:none;align-items:center;justify-content:center;
}
.popup-box{
background:#fff;padding:20px;border-radius:15px;
text-align:center;width:80%;max-width:300px;
}
.popup button{
margin-top:10px;padding:10px;border:none;
border-radius:10px;width:100%;font-weight:bold;
}
.yes{background:#542385;color:#fff}
.no{background:#eee}
.notif{
position:fixed;
bottom:90px;
left:50%;
transform:translateX(-50%);
background:#000;
color:#fff;
padding:10px;
border-radius:10px;
display:none;
}
.qris-download{
margin:6px auto 20px;
font-size:12px;
color:#e53935;
text-align:center;
text-decoration:underline;
cursor:pointer;
display:inline-block;
transition:.2s;
}
.qris-download:active{
transform:scale(.9);
opacity:.7;
}
.pay-total{
margin-top:12px;
font-size:20px;
font-weight:700;
text-align:center;
color:#542385;
}
.bank-logo{
text-align:center;
margin-top:10px;
}
.bank-logo img{
width:80%;
opacity:.9;
}
/* tutorial */
.pay-tutorial{
margin:15px auto;
font-size:10px;
line-height:1.6;
color:#444;
text-align:left;
background:#fafafa;
padding:10px;
border-radius:10px;
border:1px solid #eee;
}
.checkout-bar{
position:fixed;
bottom:0;
left:0;
right:0;
z-index:999;
background:rgba(255,255,255,.9);
backdrop-filter:blur(12px);
border-top:1px solid rgba(84,35,133,.15);
padding:10px;
}
.checkout-inner{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
max-width:500px;
margin:auto;
}
/* kiri */
.co-total{
display:flex;
flex-direction:column;
}
.co-label{
font-size:11px;
color:#888;
}
.co-price{
font-size:16px;
font-weight:700;
color:#542385;
}
/* tombol kanan */
.co-btn{
padding:12px 16px;
border-radius:12px;
background:linear-gradient(145deg,#f7f5fc,#efeafd);
color:#3a2f5a;
font-weight:700;
font-size:13px;
border:1px solid rgba(84,35,133,.2);
box-shadow:
0 6px 16px rgba(84,35,133,.1);
cursor:pointer;
transition:.2s;
}
.co-btn:active{
transform:scale(.95);
box-shadow:
0 3px 8px rgba(84,35,133,.12);
}
.transfer-box{
margin-top:20px;
padding:15px;
border-radius:14px;
background:#fafafa;
border:1px solid #eee;
}
.transfer-title{
font-size:13px;
font-weight:600;
margin-bottom:12px;
color:#333;
}
.transfer-item{
padding:10px;
border-radius:12px;
margin-bottom:10px;
background:#fff;
border:1px solid #eee;
}
.bank-name{
font-size:12px;
color:#666;
margin-bottom:4px;
}
.rekening{
display:flex;
justify-content:space-between;
align-items:center;
font-size:14px;
font-weight:700;
color:#222;
}
.nama{
font-size:11px;
color:#888;
margin-top:4px;
}
/* tombol copy */
.copy-btn{
font-size:11px;
padding:6px 10px;
border-radius:8px;
background:linear-gradient(145deg,#f7f5fc,#efeafd);
border:1px solid rgba(84,35,133,.2);
color:#542385;
font-weight:600;
cursor:pointer;
transition:.2s;
}
.copy-btn:active{
transform:scale(.9);
opacity:.7;
}
</style>
<div class="box">
<h3>Metode Pengiriman</h3>
<div id="choose">
<div class="ship ojol" onclick="setShip('ojol')">🚀 Ojol</div>
<div class="ship toko" onclick="setShip('toko')">🏪 Toko</div>
</div>
<div id="form" style="display:none">
<div class="btn-main" onclick="resetShip()">Ganti Metode Pembelian</div>
<?php if($addr): ?>
<div class="small">
<?= $addr['nama'] ?> | <?= $addr['wa'] ?><br>
<?= $addr['jalan'] ?> RT<?= $addr['rt'] ?>/RW<?= $addr['rw'] ?>, <?= $addr['kel'] ?>, <?= $addr['kec'] ?>
<br><span onclick="deleteAddress()" style="color:red;cursor:pointer">Hapus alamat</span>
</div>
<?php endif; ?>
<input id="nama" class="input" placeholder="Nama" value="<?= $addr['nama'] ?? '' ?>">
<input id="wa" class="input" placeholder="WA" value="<?= $addr['wa'] ?? '' ?>">
<div class="row">
<input id="kec" class="input" placeholder="Kecamatan" value="<?= $addr['kec'] ?? '' ?>">
<input id="kel" class="input" placeholder="Kelurahan" value="<?= $addr['kel'] ?? '' ?>">
</div>
<div class="row">
<input id="rt" class="input" placeholder="RT" value="<?= $addr['rt'] ?? '' ?>">
<input id="rw" class="input" placeholder="RW" value="<?= $addr['rw'] ?? '' ?>">
</div>
<input id="jalan" class="input" placeholder="Jalan" value="<?= $addr['jalan'] ?? '' ?>">
<h3>Pembayaran</h3>
<div class="pay">
<div id="tunai" class="tunai" onclick="setPay('tunai')">Tunai</div>
<div id="qrisBtn" class="qris-btn" onclick="setPay('qris')">QRIS / Transfer</div>
</div>
<div id="qrisBox" class="qris">
<img src="/uploads/icon/qris-appopetshop.jpg" width="200" id="qrisImg">
<br>
<div id="downloadQris" class="qris-download">
Download QRIS
</div>
<div class="pay-total">
Total Pembayaran<br>Rp<?= rupiah($total,0,',','.') ?>
</div>
<div class="bank-logo">
<img src="/uploads/icon/bank.png">
</div>
<div class="pay-tutorial">
<h3><b>Tutorial Pembayaran QRIS:</b><br></h3>
• Unduh QRIS<br>
• Buka aplikasi mobile banking atau e-wallet Anda<br>
• Pilih menu Scan QR / QRIS<br>
• Masukkan nominal <b>Rp<?= rupiah($total,0,',','.') ?></b><br>
• Masukkan PIN untuk konfirmasi pembayaran<br>
• Unggah bukti pembayaran<br>
• Klik tombol “Buat Pesanan”
</div>
<div class="transfer-box">
<div class="transfer-title">
Pembayaran juga dapat dilakukan melalui transfer bank berikut:
</div>
<div class="transfer-item">
<div class="bank-name">Bank BRI</div>
<div class="rekening">
<span id="rek1">019001052522504</span>
<div class="copy-btn" onclick="copyRek('rek1')">Salin</div>
</div>
<div class="nama">a.n. Teguh Prayudi</div>
</div>
<div class="transfer-item">
<div class="bank-name">Bank BNI</div>
<div class="rekening">
<span id="rek2">1889913364</span>
<div class="copy-btn" onclick="copyRek('rek2')">Salin</div>
</div>
<div class="nama">a.n. Teguh Prayudi</div>
</div>
</div>
<input
type="file"
id="file"
accept="image/*"
hidden
onchange="previewImg()">
<div id="uploadBtn" class="btn-main" onclick="file.click()">
<img src="assets/img/upload.svg" class="icon-upload">
Upload Bukti Pembayaran
</div>
<div id="previewWrap"></div>
</div>
<h3>Rincian Pembelian :</h3>
<?php foreach($items as $i): ?>
<div style="
padding:10px;
border-bottom:1px solid #eee;
font-size:13px;
">
<div style="font-weight:500">
<?= $i['nama'] ?>
<?= !empty($i['varian']) ? '('.$i['varian'].')' : '' ?>
</div>
<div style="display:flex;justify-content:space-between;margin-top:4px">
<span><?= $i['qty'] ?> x Rp<?= rupiah($i['harga']) ?></span>
<div stylw="font-weight:500">
<span>Rp<?= rupiah($i['sub']) ?></span></div>
</div>
</div>
<?php endforeach; ?>
<div style="
margin-top:10px;
padding:10px;
border-top:2px solid #000;
display:flex;
justify-content:space-between;
font-weight:700;
">
<span>Total</span>
<span>Rp<?= rupiah($total) ?></span>
</div>
</div>
</div>
<div id="notif" class="notif"></div>
<!-- POPUP -->
<div id="popup" class="popup">
<div class="popup-box">
<div>Jadikan alamat ini sebagai default?</div>
<button class="yes" onclick="saveAddress()">Ya</button>
<button class="no" onclick="skipSave()">Tidak</button>
</div>
</div>
<div class="checkout-bar">
<div class="checkout-inner">
<div class="co-total">
<div class="co-label">Total</div>
<div class="co-price">Rp<?= rupiah($total,0,',','.') ?></div>
</div>
<div class="co-btn" onclick="submitOrder()">
Buat Pesanan
</div>
</div>
</div>
<script>
const uploadBtn = document.getElementById('uploadBtn');
let ship='',pay='',bukti=null;
/* ================= NOTIF ================= */
function showNotif(t){
notif.innerText=t;
notif.style.display='block';
setTimeout(()=>notif.style.display='none',1500);
}
/* ================= PILIH PENGIRIMAN ================= */
function setShip(s){
ship=s;
choose.style.display='none';
form.style.display='block';
}
function resetShip(){
ship='';
form.style.display='none';
choose.style.display='block';
}
/* ================= PAYMENT ================= */
function setPay(p){
pay=p;
tunai.classList.remove('active');
qrisBtn.classList.remove('active');
document.getElementById(p==='tunai'?'tunai':'qrisBtn').classList.add('active');
qrisBox.style.display = (p==='qris') ? 'block' : 'none';
}
/* ================= FORMAT WA ================= */
wa.oninput=()=>{
let v=wa.value.replace(/\D/g,'');
if(v.startsWith('0')) v='62'+v.slice(1);
if(!v.startsWith('62')) v='62'+v;
wa.value='+'+v;
}
/* ================= PREVIEW BUKTI ================= */
function previewImg(){
const f=file.files[0];
if(!f) return;
bukti=f;
previewWrap.innerHTML=`
<img src="${URL.createObjectURL(f)}" class="preview">
<div style="color:red;font-size:12px;cursor:pointer" onclick="removeImg()">Hapus</div>
`;
// 🔥 sembunyikan tombol upload
uploadBtn.style.display = 'none';
}
function removeImg(){
file.value='';
previewWrap.innerHTML='';
bukti=null;
// 🔥 munculkan lagi tombol upload
uploadBtn.style.display = 'flex';
}
/* ================= VALIDASI + SUBMIT ================= */
function submitOrder(){
if(!ship) return showNotif('Pilih metode pengiriman');
if(!pay) return showNotif('Pilih metode pembayaran');
// 🔥 VALIDASI ALAMAT (OJOL)
if(ship==='ojol'){
if(!nama.value) return showNotif('Nama wajib diisi');
if(!wa.value) return showNotif('WA wajib diisi');
if(!kec.value) return showNotif('Kecamatan wajib diisi');
if(!kel.value) return showNotif('Kelurahan wajib diisi');
if(!rt.value) return showNotif('RT wajib diisi');
if(!rw.value) return showNotif('RW wajib diisi');
if(!jalan.value) return showNotif('Alamat wajib diisi');
}
// 🔥 QRIS WAJIB BUKTI
if(pay==='qris' && !bukti){
return showNotif('Silahkan Upload bukti pembayaran');
}
<?php if(!$addr): ?>
popup.style.display='flex';
<?php else: ?>
goWA();
<?php endif; ?>
}
/* ================= SIMPAN ALAMAT ================= */
function saveAddress(){
fetch('',{
method:'POST',
headers:{'Content-Type':'application/x-www-form-urlencoded'},
body:`save_address=1
&nama=${encodeURIComponent(nama.value)}
&wa=${encodeURIComponent(wa.value)}
&kec=${encodeURIComponent(kec.value)}
&kel=${encodeURIComponent(kel.value)}
&rt=${encodeURIComponent(rt.value)}
&rw=${encodeURIComponent(rw.value)}
&jalan=${encodeURIComponent(jalan.value)}`
})
.then(()=>goWA());
}
function skipSave(){
goWA();
}
function deleteAddress(){
if(confirm("Hapus alamat?")){
fetch('',{
method:'POST',
headers:{'Content-Type':'application/x-www-form-urlencoded'},
body:'delete_address=1'
})
.then(()=>location.reload());
}
}
/* ================= REDIRECT WA + PRODUK ================= */
function goWA(){
// 🔥 MATIKAN AKSES CHECKOUT (WAJIB)
sessionStorage.removeItem('allow_checkout');
let text = "ORDER APPO PETSHOP:\n";
text += "Pengiriman: " + ship + "\n";
text += "Pembayaran: " + pay + "\n";
if(ship === 'ojol'){
text += "Nama: " + nama.value + "\n";
text += "WA: " + wa.value + "\n";
text += "Alamat: " + jalan.value + " RT" + rt.value + "/RW" + rw.value + " " + kel.value + " " + kec.value + "\n";
}
<?php foreach($items as $i): ?>
text += "<?= $i['nama'] ?> <?= !empty($i['varian']) ? '('.$i['varian'].')' : '' ?> <?= $i['qty'] ?>x = Rp<?= rupiah($i['sub']) ?>\n";
<?php endforeach; ?>
text += "Total: Rp<?= rupiah($total) ?>";
// 🔥 ENCODE BIAR AMAN (INI PENTING BANGET)
let url = "https://wa.me/6285775641979?text=" + encodeURIComponent(text);
// 🔥 BUKA WA
window.open(url, '_blank');
// 🔥 REDIRECT KE PRODUK (JANGAN PAKAI REFERER)
setTimeout(()=>{
location.replace('/produk');
},500);
}
</script>
<script>
// 🔥 BLOK AKSES LANGSUNG / BACK
if(!sessionStorage.getItem('allow_checkout')){
location.replace('/produk');
}
document.getElementById('downloadQris').onclick = function(){
const url = document.getElementById('qrisImg').src;
const a = document.createElement('a');
a.href = url;
a.download = 'QRIS-AppoPetshop.jpg';
document.body.appendChild(a);
a.click();
a.remove();
};
function copyRek(id){
const text = document.getElementById(id).innerText;
navigator.clipboard.writeText(text).then(()=>{
showNotif('Nomor rekening berhasil disalin');
});
}
</script>
</script>
