<!DOCTYPE html>

<head>

<title>Restoran Embok Lily - Pesanan Digital</title>

<style>

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;600;700;800&display=swap');

body { font-family: 'Plus Jakarta Sans', sans-serif; scroll-behavior: smooth; background-color: #fcfcfc; }

.admin-only { display: none; }

body.admin-mode .admin-only { display: block; }

body.admin-mode .customer-only { display: none; }

.modal-animate { animation: fadeIn 0.25s ease-out; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }

</style>

</head>

const DEFAULT_CONFIG = {

nama: "Restoran Embok Lily",

tagline: "Rasa Tradisional, Pesanan Digital",

logoUrl: "https://via.placeholder.com/150?text=LOGO",

whatsappAdmin: "60123456789",

alamat: "No. 12, Jalan Utama, Bandar Baru, 80000 Johor Bahru",

duitnowQr: "",

menu: [

{

kategori: "Makanan Utama",

items: [

{ id: 1, nama: "Nasi Ayam Penyet", harga: 12.50, options: "Asing Sambal, Asing Kuah, Extra Pedas", img: "" }

]

}

]

};

let KEDAI_CONFIG = JSON.parse(localStorage.getItem('embok_lily_v2')) || DEFAULT_CONFIG;

let cart = [];

let currentEditIndices = { cat: -1, item: -1 };

let uploadedImageBase64 = "";

function persistData() {

localStorage.setItem('embok_lily_v2', JSON.stringify(KEDAI_CONFIG));

}

</script>

<div>

</div>

<button onclick="toggleAdminLogin(true)" id="admin-btn" class="bg-gray-100 text-gray-400 px-3 py-1.5 rounded-lg text-[9px] font-black border uppercase">Admin</button>

</div>

</header>

<h2 class="font-black text-yellow-800 text-[10px] uppercase">🛠️ Kawalan Restoran</h2>

<button onclick="exitAdmin()" class="text-[9px] bg-yellow-600 px-5 py-2 rounded-xl text-white font-black uppercase shadow-sm">Simpan</button>

</div>

Tukar Logo

</label>

</div>

<p class="text-[9px] font-black text-green-600 uppercase border-b pb-1 mt-4">Upload QR Bayaran</p>

</div>

</div>

<p class="text-[10px] font-black text-red-400 uppercase tracking-widest">Lokasi Kami</p>

</div>

<button onclick="openCategoryModal()" class="admin-only w-full py-10 border-4 border-dashed border-yellow-200 rounded-[3.5rem] text-yellow-600 font-black text-xs uppercase tracking-widest mt-10">✨ Tambah Kategori</button>

</main>

</div>

<div>

<label class="text-[10px] font-black text-gray-400 uppercase">Optional Pilihan (Pisahkan dengan koma):</label>

</div>

<button onclick="saveItem()" class="flex-1 bg-green-600 py-4 rounded-2xl font-black text-white text-xs uppercase tracking-widest">Simpan</button>

<button onclick="closeItemModal()" class="flex-1 bg-gray-100 py-4 rounded-2xl font-bold text-gray-400 text-xs uppercase tracking-widest">Batal</button>

</div>

<h2 class="text-2xl font-black text-gray-900 text-center uppercase tracking-widest mb-6">Check Out</h2>

<p class="text-[10px] font-bold text-gray-400 uppercase">Jumlah Bayaran:</p>

</div>

<button onclick="finalCheckout()" class="w-full bg-green-600 text-white font-black py-5 rounded-[2rem] shadow-xl uppercase tracking-widest">🚀 Hantar Order Ke WhatsApp</button>

</div>

<button onclick="toggleModal(false)" class="w-full text-slate-300 font-black text-[10px] mt-8 uppercase tracking-widest">Tutup</button>

</div>

</div>

<button onclick="toggleModal(true)" class="bg-red-600 text-white px-10 py-5 rounded-[2rem] font-black text-xs uppercase tracking-widest active:scale-95 transition-all shadow-lg">Check Out</button>

</div>

<div id="admin-login-modal" class="fixed inset-0 bg-black/60 z-[200] hidden items-center justify-center p-6"><div class="bg-white w-full max-w-xs rounded-[3rem] p-10 shadow-2xl text-center"><h3 class="font-black text-xl mb-6">ADMIN LOGIN</h3><input type="password" id="admin-pass-input" class="w-full border rounded-xl p-4 mb-6 text-center" placeholder="••••••"><button onclick="checkAdminPass()" class="w-full bg-red-600 text-white py-4 rounded-xl font-black mb-2">MASUK</button><button onclick="toggleAdminLogin(false)" class="w-full text-gray-400 font-bold">BATAL</button></div></div>

<div id="category-modal" class="fixed inset-0 bg-black/60 z-[350] hidden items-center justify-center p-6"><div class="bg-white w-full max-w-xs rounded-[3rem] p-8 text-center"><h3 class="font-black text-lg mb-6 uppercase">Kategori Baru</h3><input type="text" id="modal-cat-name" class="w-full border rounded-xl p-4 mb-6 text-center font-bold" placeholder="Cth: Minuman"><button onclick="saveCategory()" class="w-full bg-yellow-500 text-white py-4 rounded-xl font-black">TAMBAH</button></div></div>

function initApp() {

document.getElementById('display-name').innerText = KEDAI_CONFIG.nama;

document.getElementById('display-tagline').innerText = KEDAI_CONFIG.tagline;

document.getElementById('display-logo').src = KEDAI_CONFIG.logoUrl;

document.getElementById('display-address').innerText = KEDAI_CONFIG.alamat;

document.getElementById('edit-name').value = KEDAI_CONFIG.nama;

document.getElementById('edit-wa').value = KEDAI_CONFIG.whatsappAdmin;

document.getElementById('edit-address').value = KEDAI_CONFIG.alamat;

document.getElementById('edit-logo-preview').src = KEDAI_CONFIG.logoUrl;

document.getElementById('edit-qr-preview').src = KEDAI_CONFIG.duitnowQr || "";

renderMenu();

}

function renderMenu() {

const container = document.getElementById('main-content');

container.innerHTML = "";

const isAdmin = document.getElementById('body-root').classList.contains('admin-mode');

KEDAI_CONFIG.menu.forEach((cat, catIdx) => {

let html = `<div class="mb-10"><div class="flex items-center justify-between mb-8 px-2"><div class="flex items-center gap-4"><div class="h-2 w-2 bg-red-600 rounded-full animate-pulse"></div><h2 class="text-xs font-black text-gray-800 uppercase tracking-[0.4em]">${cat.kategori}</h2></div>${isAdmin ? `<button onclick="deleteCategory(${catIdx})" class="text-[9px] text-red-400 font-bold">Hapus</button>` : ''}</div><div class="grid gap-6">`;

cat.items.forEach((item, itemIdx) => {

const cartItem = cart.find(c => c.name === item.nama);

const qty = cartItem ? cartItem.qty : 0;

const opts = item.options ? item.options.split(',') : [];

html += `

</div>

<p class="text-red-600 font-black text-lg leading-none">RM ${parseFloat(item.harga).toFixed(2)}</p>

${qty > 0 ? `<button onclick="removeFromCart('${item.nama}')" class="bg-gray-100 p-2 rounded-xl active:scale-90"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4" /></svg></button><span class="font-black">${qty}</span>` : ''}

<button onclick="addToCart('${item.nama}', ${item.harga})" class="bg-red-600 text-white p-2 px-6 rounded-2xl font-black text-[10px] uppercase flex items-center gap-1 active:scale-90 shadow-lg shadow-red-100"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" /></svg>${qty === 0 ? 'Pilih' : ''}</button>

</div>

${isAdmin ? `<div class="flex gap-2 mt-4"><button onclick="openEditModal(${catIdx}, ${itemIdx})" class="bg-yellow-400 text-[10px] font-black px-4 py-1.5 rounded-full">Edit</button><button onclick="deleteItem(${catIdx}, ${itemIdx})" class="bg-gray-100 text-[10px] font-bold px-4 py-1.5 rounded-full">Padam</button></div>` : ''}

</div>

${qty > 0 && opts.length > 0 ? `

${opts.map((o, oIdx) => `

</label>

`).join('')}

</div>

` : ''}

</div>

});

html += `</div></div>`;

container.innerHTML += html;

});

}

// --- CART LOGIC ---

function addToCart(name, price) {

const item = cart.find(i => i.name === name);

if (item) { item.qty++; } else { cart.push({ name, price, qty: 1, selectedOpts: [] }); }

updateCartUI(); renderMenu();

}

function removeFromCart(name) {

const idx = cart.findIndex(i => i.name === name);

if (idx > -1) { cart[idx].qty--; if (cart[idx].qty <= 0) cart.splice(idx, 1); }

updateCartUI(); renderMenu();

if (document.getElementById('checkout-modal').style.display === 'flex') updateModalCartList();

}

function toggleCartOption(name, option) {

const item = cart.find(i => i.name === name);

if (item) {

if (!item.selectedOpts) item.selectedOpts = [];

const oIdx = item.selectedOpts.indexOf(option);

if (oIdx > -1) { item.selectedOpts.splice(oIdx, 1); } else { item.selectedOpts.push(option); }

}

if (document.getElementById('checkout-modal').style.display === 'flex') updateModalCartList();

}

function updateCartUI() {

const bar = document.getElementById('cart-bar');

if (cart.length > 0) {

bar.classList.remove('hidden');

const tQty = cart.reduce((s, i) => s + i.qty, 0);

const tPrice = cart.reduce((s, i) => s + (i.price * i.qty), 0);

document.getElementById('total-items').innerText = `${tQty} Unit`;

document.getElementById('total-price').innerText = `RM ${tPrice.toFixed(2)}`;

} else { bar.classList.add('hidden'); }

}

function updateModalCartList() {

const list = document.getElementById('modal-cart-list');

const totalDisplay = document.getElementById('modal-total-price');

list.innerHTML = ""; let total = 0;

if (cart.length === 0) { list.innerHTML = "<p class='text-center text-xs py-4'>Bakul kosong.</p>"; totalDisplay.innerText = "RM 0.00"; return; }

cart.forEach((item, idx) => {

const sub = item.price * item.qty; total += sub;

list.innerHTML += `<div class="bg-white p-4 rounded-3xl border text-left"><div class="flex justify-between font-black text-xs"><span>${item.name} (x${item.qty})</span><span class="text-red-600">RM ${sub.toFixed(2)}</span></div><div class="text-[10px] text-red-400 italic mt-1">${item.selectedOpts && item.selectedOpts.length > 0 ? '✅ ' + item.selectedOpts.join(', ') : 'Tiada request'}</div></div>`;

});

totalDisplay.innerText = `RM ${total.toFixed(2)}`;

}

function toggleModal(show) {

if (show) { updateModalCartList(); document.getElementById('display-qr-img').src = KEDAI_CONFIG.duitnowQr; }

document.getElementById('checkout-modal').style.display = show ? 'flex' : 'none';

}

function finalCheckout() {

const name = document.getElementById('cust-name').value;

const addr = document.getElementById('cust-address').value;

if(!name || !addr) return alert("Isi Nama & Lokasi.");

const total = cart.reduce((s, i) => s + (i.price * i.qty), 0);

let msg = `*PESANAN - ${KEDAI_CONFIG.nama.toUpperCase()}*\n👤: ${name}\n📍: ${addr}\n━━━━━━━━━━━━━━━━━━━━\n\n`;

cart.forEach(i => {

msg += `• ${i.name} (x${i.qty}): RM ${(i.price * i.qty).toFixed(2)}\n`;

if(i.selectedOpts && i.selectedOpts.length > 0) msg += ` _Request: ${i.selectedOpts.join(', ')}_\n`;

});

msg += `\n*TOTAL: RM ${total.toFixed(2)}*\n━━━━━━━━━━━━━━━━━━━━\n\n✅ *DAH BAYAR (QR/RESIT)*`;

window.open(`https://wa.me/${KEDAI_CONFIG.whatsappAdmin}?text=${encodeURIComponent(msg)}`);

}

// --- ADMIN ACTIONS ---

function updateShopInfo() {

KEDAI_CONFIG.nama = document.getElementById('edit-name').value;

KEDAI_CONFIG.whatsappAdmin = document.getElementById('edit-wa').value;

KEDAI_CONFIG.alamat = document.getElementById('edit-address').value;

initApp(); persistData();

}

function handleLogoUpload(input) {

const file = input.files[0]; if (file) {

const reader = new FileReader(); reader.onload = (e) => { KEDAI_CONFIG.logoUrl = e.target.result; initApp(); persistData(); }; reader.readAsDataURL(file);

}

function handleQrUpload(input) {

const file = input.files[0]; if (file) {

const reader = new FileReader(); reader.onload = (e) => { KEDAI_CONFIG.duitnowQr = e.target.result; initApp(); persistData(); }; reader.readAsDataURL(file);

}

function handleFileUpload(input) {

const file = input.files[0]; if (file) {

const reader = new FileReader(); reader.onload = (e) => { uploadedImageBase64 = e.target.result; document.getElementById('modal-img-preview').src = uploadedImageBase64; document.getElementById('modal-img-preview').classList.remove('hidden'); }; reader.readAsDataURL(file);

}

function toggleAdminLogin(show) { document.getElementById('admin-login-modal').style.display = show ? 'flex' : 'none'; }

function checkAdminPass() { if (document.getElementById('admin-pass-input').value === "admin123") { document.getElementById('body-root').classList.add('admin-mode'); toggleAdminLogin(false); renderMenu(); } else alert("Salah!"); }

function exitAdmin() { document.getElementById('body-root').classList.remove('admin-mode'); initApp(); }

function openCategoryModal() { document.getElementById('modal-cat-name').value = ""; document.getElementById('category-modal').style.display = 'flex'; }

function closeCategoryModal() { document.getElementById('category-modal').style.display = 'none'; }

function saveCategory() { const n = document.getElementById('modal-cat-name').value; if (!n) return; KEDAI_CONFIG.menu.push({ kategori: n, items: [] }); closeCategoryModal(); renderMenu(); persistData(); }

function deleteCategory(idx) { if (confirm(`Hapus?`)) { KEDAI_CONFIG.menu.splice(idx, 1); renderMenu(); persistData(); } }

function openEditModal(catIdx, itemIdx) {

modalMode = 'edit'; currentEditIndices = { cat: catIdx, item: itemIdx };

const item = KEDAI_CONFIG.menu[catIdx].items[itemIdx];

uploadedImageBase64 = item.img || "";

document.getElementById('modal-item-name').value = item.nama;

document.getElementById('modal-item-price').value = item.harga;

document.getElementById('modal-item-options').value = item.options || "";

if (item.img) { document.getElementById('modal-img-preview').src = item.img; document.getElementById('modal-img-preview').classList.remove('hidden'); } else document.getElementById('modal-img-preview').classList.add('hidden');

document.getElementById('item-modal').style.display = 'flex';

}

function openAddModal(catIdx) {

modalMode = 'add'; currentEditIndices.cat = catIdx; uploadedImageBase64 = "";

document.getElementById('modal-img-preview').classList.add('hidden');

document.getElementById('modal-item-name').value = ""; document.getElementById('modal-item-price').value = ""; document.getElementById('modal-item-options').value = "";

document.getElementById('item-modal').style.display = 'flex';

}

function closeItemModal() { document.getElementById('item-modal').style.display = 'none'; }

function saveItem() {

const n = document.getElementById('modal-item-name').value, p = document.getElementById('modal-item-price').value, o = document.getElementById('modal-item-options').value;

if (!n || !p) return alert("Isi data!");

if (modalMode === 'add') { KEDAI_CONFIG.menu[currentEditIndices.cat].items.push({ id: Date.now(), nama: n, harga: parseFloat(p), img: uploadedImageBase64, options: o }); }

else { const i = KEDAI_CONFIG.menu[currentEditIndices.cat].items[currentEditIndices.item]; i.nama = n; i.harga = parseFloat(p); i.img = uploadedImageBase64; i.options = o; }

closeItemModal(); renderMenu(); persistData();

}

function deleteItem(catIdx, itemIdx) { if (confirm(`Hapus?`)) { KEDAI_CONFIG.menu[catIdx].items.splice(itemIdx, 1); renderMenu(); persistData(); } }

window.onload = initApp;

</script>

</body>

</html>