<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ringkasan Keranjang Belanja</title>
    <!-- Integrasi CDN Tailwind CSS resmi -->
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body class="bg-slate-50 min-h-screen flex items-center justify-center p-4">

    <div class="bg-white border border-slate-200 rounded-2xl p-6 shadow-xl w-full max-w-md">
        <!-- Header -->
        <div class="border-b border-slate-100 pb-4 mb-4">
            <h2 class="text-lg font-black text-slate-900 flex items-center gap-2">
                🛒 Ringkasan Pemesanan
            </h2>
            <p class="text-xs text-slate-500 mt-1">Konfirmasi item e-book sebelum melanjutkan pembayaran</p>
        </div>

        <!-- Detail Item Komponen -->
        <div id="cart-item-box" class="bg-slate-50 rounded-xl p-4 border border-slate-100 mb-6">
            <div class="flex justify-between items-start">
                <div class="max-w-[75%]">
                    <h4 id="product-name" class="font-bold text-sm text-slate-900 leading-tight">Memuat detail produk...</h4>
                    <span class="inline-block bg-indigo-50 text-indigo-700 text-[10px] font-semibold px-2 py-0.5 rounded mt-2">Akses Digital</span>
                </div>
                <span id="product-price" class="font-extrabold text-sm text-slate-900">Rp 0</span>
            </div>
        </div>

        <!-- Ringkasan Total Tagihan -->
        <div class="space-y-2 border-t border-slate-100 pt-4 mb-6">
            <div class="flex justify-between text-xs text-slate-500">
                <span>Subtotal</span>
                <span id="subtotal-val">Rp 0</span>
            </div>
            <div class="flex justify-between text-xs text-slate-500">
                <span>Biaya Layanan Sistem</span>
                <span class="text-emerald-600 font-medium">Gratis</span>
            </div>
            <div class="flex justify-between text-sm font-black text-slate-900 pt-2 border-dashed border-t border-slate-200">
                <span>Total Pembayaran</span>
                <span id="total-val" class="text-indigo-600 text-base">Rp 0</span>
            </div>
        </div>

        <!-- Navigasi Aksi Eksekusi -->
        <div class="space-y-2">
            <button onclick="kirimKeWhatsApp()" class="block text-center w-full bg-emerald-600 hover:bg-emerald-500 text-white font-semibold py-3 rounded-xl text-xs transition shadow-sm cursor-pointer">
                Lanjutkan Konfirmasi ke WhatsApp &rarr;
            </button>
            <a href="/" class="block text-center w-full bg-slate-100 hover:bg-slate-200 text-slate-700 font-medium py-2.5 rounded-xl text-xs transition">
                &larr; Kembali Pilih E-Book Lain
            </a>
        </div>
    </div>

    <!-- Logika Penarik Data & Generator Notifikasi WhatsApp -->
    <script>
        // MASUKKAN NOMOR WHATSAPP ADMIN ANDA DI SINI (Gunakan kode negara, tanpa tanda +)
        const NOMOR_WA_ADMIN = "6282122307021"; 
        
        let produkTerpilih = null;

        // Fungsi membaca data kiriman dari file pertama
        window.onload = function() {
            const dataStorage = localStorage.getItem('selectedProduct');
            
            if (!dataStorage) {
                // Proteksi jika keranjang belanja kosong langsung dilempar balik
                alert("Keranjang belanja Anda kosong, silakan pilih produk terlebih dahulu.");
                window.location.href = 'index.html';
                return;
            }

            produkTerpilih = JSON.parse(dataStorage);

            // Tampilkan data ke struktur HTML
            document.getElementById('product-name').innerText = produkTerpilih.name;
            document.getElementById('product-price').innerText = "Rp " + produkTerpilih.price.toLocaleString('id-ID');
            document.getElementById('subtotal-val').innerText = "Rp " + produkTerpilih.price.toLocaleString('id-ID');
            document.getElementById('total-val').innerText = "Rp " + produkTerpilih.price.toLocaleString('id-ID');
        };

        // Fungsi menyusun format string notifikasi WA
        function kirimKeWhatsApp() {
            if (!produkTerpilih) return;

            let textWA = `*NOTIFIKASI PEMESANAN BARU (KART)*\n`;
            textWA += `==============================\n\n`;
            textWA += `Halo Admin, saya baru saja melakukan checkout produk melalui website:\n\n`;
            textWA += `*Nama E-Book:* ${produkTerpilih.name}\n`;
            textWA += `*Total Tagihan:* Rp ${produkTerpilih.price.toLocaleString('id-ID')}\n\n`;
            textWA += `==============================\n`;
            textWA += `Mohon untuk dibantu mengirimkan instruksi metode pembayaran dan link pengiriman filenya. Terima kasih!`;

            // Enkoding string agar aman masuk URL API
            let stringAman = encodeURIComponent(textWA);
            let targetURL = `https://wa.me/${NOMOR_WA_ADMIN}?text=${stringAman}`;

            // Buka WhatsApp pembeli
            window.open(targetURL, '_blank');
        }
    </script>
</body>
</html>