<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rekening Persembahan</title>
<style>
    body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        background: linear-gradient(135deg, #e4ecf7, #f7e4ec);
        display: flex;
        justify-content: center;
        align-items: flex-start;
        padding: 20px;
        min-height: 100vh;
    }
    .glass-card {
        backdrop-filter: blur(20px);
        background: rgba(255, 255, 255, 0.25);
        border-radius: 20px;
        padding: 22px;
        max-width: 420px;
        width: 100%;
        color: #222;
        box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    }
    h2 {
        text-align: center;
        font-size: 20px;
        margin-bottom: 6px;
        font-weight: 600;
        color: #111;
    }
    .owner {
        text-align: center;
        font-size: 14px;
        color: #555;
        margin-bottom: 20px;
    }
    .account {
        background: rgba(255,255,255,0.6);
        padding: 14px 16px;
        border-radius: 14px;
        margin-bottom: 14px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-shadow: inset 0 0 6px rgba(0,0,0,0.05);
    }
    .label {
        font-size: 13px;
        font-weight: 500;
        color: #666;
        margin-bottom: 2px;
    }
    .number {
        font-size: 16px;
        font-weight: 600;
        color: #000;
        letter-spacing: 0.5px;
    }
    .copy-btn {
        background: rgba(0,0,0,0.05);
        border: none;
        border-radius: 8px;
        cursor: pointer;
        font-size: 16px;
        padding: 6px 10px;
        color: #007aff;
        transition: all 0.25s ease;
    }
    .copy-btn:hover {
        background: rgba(0,0,0,0.1);
    }
    .upload-box {
        text-align: center;
        margin-top: 15px;
        padding: 15px;
        background: rgba(255,255,255,0.6);
        border-radius: 14px;
        cursor: pointer;
        border: 2px dashed rgba(0,0,0,0.1);
        transition: all 0.25s ease;
        font-size: 14px;
        color: #555;
    }
    .upload-box:hover {
        background: rgba(255,255,255,0.8);
    }
    .upload-box input {
        display: none;
    }
    .preview-img {
        max-width: 100%;
        margin-top: 10px;
        border-radius: 12px;
        display: none;
    }
    textarea {
        width: 100%;
        margin-top: 12px;
        padding: 12px;
        border-radius: 12px;
        border: 1px solid rgba(0,0,0,0.1);
        resize: none;
        font-family: inherit;
        font-size: 14px;
        background: rgba(255,255,255,0.6);
        transition: border 0.2s ease;
    }
    textarea:focus {
        border: 1px solid #007aff;
        outline: none;
    }
    button.send {
        margin-top: 15px;
        width: 100%;
        padding: 14px;
        border: none;
        border-radius: 12px;
        background: linear-gradient(135deg, #007aff, #0051c3);
        color: white;
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
        box-shadow: 0 4px 12px rgba(0,122,255,0.3);
        transition: all 0.3s ease;
    }
    button.send:hover {
        background: linear-gradient(135deg, #0066d6, #003e99);
        box-shadow: 0 6px 16px rgba(0,122,255,0.4);
    }
    /* Toast Notification */
    #toast {
        visibility: hidden;
        min-width: 220px;
        background-color: rgba(0,0,0,0.85);
        color: #fff;
        text-align: center;
        border-radius: 10px;
        padding: 12px;
        position: fixed;
        z-index: 1;
        left: 50%;
        bottom: 30px;
        transform: translateX(-50%);
        font-size: 14px;
        opacity: 0;
        transition: opacity 0.4s, visibility 0.4s;
    }
    #toast.show {
        visibility: visible;
        opacity: 1;
    }
</style>
</head>
<body>

<div class="glass-card">
    <h2>Rekening Persembahan</h2>
    <div class="owner">Eddy Kusmayadi & Tutik Eliyatie Gunadi</div>

    <div class="account">
        <div>
            <div class="label">Persembahan Syukur (BCA)</div>
            <div class="number">1130446562</div>
        </div>
        <button class="copy-btn" onclick="copyNumber('1130446562')">📋</button>
    </div>

    <div class="account">
        <div>
            <div class="label">Persembahan Persepuluhan (BCA)</div>
            <div class="number">1130174643</div>
        </div>
        <button class="copy-btn" onclick="copyNumber('1130174643')">📋</button>
    </div>

    <div class="account">
        <div>
            <div class="label">Persembahan Khusus (BCA)</div>
            <div class="number">1130446546</div>
        </div>
        <button class="copy-btn" onclick="copyNumber('1130446546')">📋</button>
    </div>

    <label class="upload-box">
        📷 Upload Bukti Transfer
        <input type="file" accept="image/*" onchange="previewImage(event)">
        <img id="preview" class="preview-img">
    </label>

    <textarea id="note" rows="3" placeholder="Catatan (Opsional)"></textarea>

    <button class="send" onclick="sendToTelegram()">Kirim ke Admin</button>
</div>

<div id="toast">Nomor rekening disalin!</div>

<script>
    const BOT_TOKEN = "7494680569:AAFE4m37_G-Dp8PHsQdE0ELDHz3DMqErkhc";
    const CHAT_ID = "-1002323505660";

    function showToast(msg) {
        const toast = document.getElementById("toast");
        toast.textContent = msg;
        toast.className = "show";
        setTimeout(() => { toast.className = toast.className.replace("show", ""); }, 2000);
    }

    function copyNumber(number) {
        navigator.clipboard.writeText(number).then(() => {
            showToast("Nomor rekening berhasil disalin");
        });
    }

    function previewImage(event) {
        const file = event.target.files[0];
        if (file) {
            const preview = document.getElementById('preview');
            preview.src = URL.createObjectURL(file);
            preview.style.display = 'block';
        }
    }

    async function sendToTelegram() {
        const note = document.getElementById("note").value;
        const fileInput = document.querySelector(".upload-box input");
        const file = fileInput.files[0];

        let message = "💳 *Bukti Transfer*\n";
        if (note) message += "📝 Catatan: " + note;

        await fetch(`https://api.telegram.org/bot${BOT_TOKEN}/sendMessage`, {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({
                chat_id: CHAT_ID,
                text: message,
                parse_mode: "Markdown"
            })
        });

        if (file) {
            const formData = new FormData();
            formData.append("chat_id", CHAT_ID);
            formData.append("photo", file);

            await fetch(`https://api.telegram.org/bot${BOT_TOKEN}/sendPhoto`, {
                method: "POST",
                body: formData
            });
        }

        showToast("Data berhasil dikirim");
        document.getElementById("note").value = "";
        document.getElementById("preview").style.display = "none";
        fileInput.value = "";
    }
</script>

</body>
</html>
