<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Yayapay API Tester</title>

    <style>
        body{
            font-family: Arial, sans-serif;
            background:#0f172a;
            color:white;
            margin:0;
            padding:20px;
        }

        .container{
            display:flex;
            gap:20px;
        }

        .left{
            width:40%;
            background:#1e293b;
            padding:20px;
            border-radius:10px;
        }

        .right{
            width:60%;
            background:#111827;
            padding:20px;
            border-radius:10px;
        }

        input, button{
            width:100%;
            padding:12px;
            margin-top:5px;
            margin-bottom:15px;
            border:none;
            border-radius:6px;
        }

        input{
            background:#334155;
            color:white;
        }

        button{
            background:#22c55e;
            color:white;
            cursor:pointer;
            font-weight:bold;
        }

        button:hover{
            background:#16a34a;
        }

        iframe{
            width:100%;
            height:600px;
            border:2px solid #334155;
            border-radius:10px;
            background:white;
        }

        .logs{
            margin-top:20px;
            background:black;
            padding:15px;
            border-radius:10px;
            height:300px;
            overflow:auto;
            font-size:14px;
        }

        .success{
            color:#4ade80;
        }

        .error{
            color:#f87171;
        }

        .info{
            color:#38bdf8;
        }

        pre{
            white-space: pre-wrap;
            word-wrap: break-word;
        }
    </style>
</head>
<body>

<h1>Yayapay API Interface</h1>

<div class="container">

    <!-- LEFT SIDE -->
    <div class="left">

        <form id="paymentForm" target="paymentFrame">

            <label>User Token</label>
            <input type="text" name="user_token" value="">

            <label>Customer Mobile</label>
            <input type="text" name="customer_mobile" value="9876543210">

            <label>Amount</label>
            <input type="text" name="amount" value="100">

            <label>Order ID</label>
            <input type="text" name="order_id" value="ORD<?php echo time(); ?>">

            <label>Redirect URL</label>
            <input type="text" name="redirect_url" value="https://yourdomain.com/callback.php">

            <label>Remark 1</label>
            <input type="text" name="remark1" value="Yayapay">

            <label>Remark 2</label>
            <input type="text" name="remark2" value="Test">

            <button type="submit">
                Create Order
            </button>

        </form>

        <div class="logs" id="logs">
            <div class="info">[SYSTEM] Ready...</div>
        </div>

    </div>

    <!-- RIGHT SIDE -->
    <div class="right">

        <h2>Payment Page</h2>

        <iframe name="paymentFrame" id="paymentFrame"></iframe>

    </div>

</div>

<script>

const form = document.getElementById("paymentForm");
const logs = document.getElementById("logs");

function addLog(message, type="info")
{
    const div = document.createElement("div");
    div.className = type;

    const time = new Date().toLocaleTimeString();

    div.innerHTML = `[${time}] ${message}`;

    logs.appendChild(div);

    logs.scrollTop = logs.scrollHeight;
}

form.addEventListener("submit", async function(e){

    e.preventDefault();

    addLog("Sending request to Yayapay API...", "info");

    const formData = new FormData(form);

    let data = {};

    formData.forEach((value,key)=>{
        data[key] = value;
    });

    addLog("<pre>"+JSON.stringify(data,null,2)+"</pre>", "info");

    try{

        const response = await fetch("https://yayapay.shop/api/create-order",{
            method:"POST",
            body:formData
        });

        const text = await response.text();

        addLog("Response Received:", "success");

        addLog("<pre>"+text+"</pre>", "success");

        try{

            const json = JSON.parse(text);

            if(json.payment_url)
            {
                addLog("Opening payment_url inside iframe", "success");

                document.getElementById("paymentFrame").src = json.payment_url;
            }
            else
            {
                addLog("payment_url not found in response", "error");
            }

        }catch(err){

            addLog("JSON Parse Failed", "error");

        }

    }catch(error){

        addLog("Request Failed: "+error, "error");

    }

});

</script>

</body>
</html>