<?php
declare(strict_types=1);
//require_once '../private/auth.php';
//require_login();
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WisePOS E Browser Test</title>
<script src="https://js.stripe.com/terminal/v1/"></script>
<style>
body{font-family:Arial;background:#111827;color:#fff;padding:30px;}
.container{max-width:700px;margin:auto;background:#1f2937;padding:30px;border-radius:12px;}
input{width:100%;padding:12px;margin-bottom:12px;border:none;border-radius:6px;}
button{width:100%;padding:14px;margin-bottom:12px;background:#2563eb;border:none;border-radius:8px;color:#fff;cursor:pointer;}
#status{margin-top:20px;padding:20px;background:#0f172a;border-radius:8px;white-space:pre-wrap;}
</style>
</head>
<body>
<div class="container">
<h1>WisePOS E Browser SDK Test</h1>

<input type="email" id="email" placeholder="Customer Email">
<input type="text" id="phone" placeholder="Customer Phone">
<input type="number" id="amount" value="1.00" step="0.01">

<button onclick="connectReader()">Connect WisePOS E Reader</button>
<button onclick="startPayment()">Start Payment</button>

<div id="status"></div>
</div>

<script>

let terminal = null;
let connectedReader = null;

function log(message){
document.getElementById('status').innerHTML += message + "\n";
}

async function initializeTerminal(){

terminal = StripeTerminal.create({

onFetchConnectionToken: async () => {

const response = await fetch(
'api/terminal_connection_token.php',
{
method:'POST'
}
);

const data = await response.json();

return data.secret;
},

onUnexpectedReaderDisconnect: () => {
log('Reader disconnected');
}

});

}

async function connectReader(){

if(!terminal){
await initializeTerminal();
}

log('Discovering readers...');

const discoverResult =
await terminal.discoverReaders({
simulated:false
});

if(discoverResult.error){
log(discoverResult.error.message);
return;
}

if(discoverResult.discoveredReaders.length === 0){
log('No readers found');
return;
}

const selectedReader =
discoverResult.discoveredReaders[0];

const connectResult =
await terminal.connectReader(selectedReader);

if(connectResult.error){
log(connectResult.error.message);
return;
}

connectedReader = connectResult.reader;

log('Connected to: ' + connectedReader.label);

}

async function startPayment(){

if(!connectedReader){
log('Connect reader first');
return;
}

const response = await fetch(
'api/create_terminal_payment.php',
{
method:'POST',
headers:{
'Content-Type':'application/json'
},
body:JSON.stringify({
email:document.getElementById('email').value,
phone:document.getElementById('phone').value,
amount:document.getElementById('amount').value
})
}
);

const data = await response.json();

if(data.error){
log(data.error);
return;
}

log('Collecting payment...');

const collectResult =
await terminal.collectPaymentMethod(
data.client_secret
);

if(collectResult.error){
log(collectResult.error.message);
return;
}

log('Processing payment...');

const processResult =
await terminal.processPayment(
collectResult.paymentIntent
);

if(processResult.error){
log(processResult.error.message);
return;
}

log('Payment successful');

await fetch(
'api/save_terminal_order.php',
{
method:'POST',
headers:{
'Content-Type':'application/json'
},
body:JSON.stringify({
payment_intent:
processResult.paymentIntent.id,
amount:
document.getElementById('amount').value,
email:
document.getElementById('email').value,
phone:
document.getElementById('phone').value
})
}
);

log('Order saved and receipt sent');

}

</script>
</body>
</html>
