<?php

declare(strict_types=1);

require_once '../../private/db.php';
require_once '../../private/auth.php';

require_login();

$stmt = $pdo->query("
SELECT *
FROM products
WHERE active = 1
ORDER BY name ASC
");

$products = $stmt->fetchAll();

?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>EpiPos POS</title>

<style>

body{
margin:0;
font-family:Arial;
background:#111827;
color:#fff;
}

.topbar{
background:#000;
padding:20px;
display:flex;
justify-content:space-between;
align-items:center;
}

.topbar a{
color:#fff;
text-decoration:none;
margin-left:15px;
}

.container{
display:flex;
}

.products{
width:70%;
padding:20px;
display:grid;
grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
gap:20px;
}

.card{
background:#1f2937;
border-radius:12px;
overflow:hidden;
box-shadow:0 0 10px rgba(0,0,0,0.3);
}

.product-image{
width:100%;
height:220px;
background:#0f172a;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
}

.product-image img{
width:100%;
height:100%;
object-fit:cover;
}

.card-content{
padding:20px;
}

.card h3{
margin-top:0;
margin-bottom:10px;
}

.card button{
width:100%;
padding:12px;
background:#2563eb;
border:none;
border-radius:8px;
color:#fff;
cursor:pointer;
font-size:15px;
}

.card button:hover{
background:#1d4ed8;
}

.cart{
width:30%;
background:#0f172a;
padding:20px;
min-height:100vh;
}

.cart-item{
padding:10px 0;
border-bottom:1px solid #374151;
}

.checkout-btn{
width:100%;
padding:14px;
margin-top:10px;
border:none;
border-radius:8px;
cursor:pointer;
font-size:15px;
}

.cash{
background:#059669;
color:#fff;
}

.cardpay{
background:#2563eb;
color:#fff;
}

</style>

</head>
<body>

<div class="topbar">

<div>
<strong>EpiPos POS</strong>
</div>

<div>
<a href="dashboard.php">Dashboard</a>
<a href="inventory.php">Inventory</a>
<a href="customers.php">Customers</a>
<a href="reports.php">Reports</a>
<a href="settings.php">Settings</a>
<a href="logout.php">Logout</a>
</div>

</div>

<div class="container">

<div class="products">

<?php foreach($products as $product): ?>

<div class="card">

<div class="product-image">

<?php if(!empty($product['image'])): ?>

<img
src="images/<?= htmlspecialchars($product['image']) ?>"
alt="<?= htmlspecialchars($product['name']) ?>"
>

<?php else: ?>

<div>No Image</div>

<?php endif; ?>

</div>

<div class="card-content">

<h3><?= htmlspecialchars($product['name']) ?></h3>

<p>
SKU:
<?= htmlspecialchars($product['sku']) ?>
</p>

<p>
Price:
$<?= number_format((float)$product['price'],2) ?>
</p>

<p>
Stock:
<?= (int)$product['quantity'] ?>
</p>

<button onclick="addToCart(
<?= (int)$product['id'] ?>,
'<?= htmlspecialchars($product['name'],ENT_QUOTES) ?>',
<?= (float)$product['price'] ?>
)">
Add To Cart
</button>

</div>

</div>

<?php endforeach; ?>

</div>

<div class="cart">

<h2>Shopping Cart</h2>

<div id="cart-items"></div>

<h3 id="cart-total">$0.00</h3>

<button
class="checkout-btn cash"
onclick="window.location.href='pos_cash_ready.php'"
>
Cash Checkout
</button>

<button
class="checkout-btn cardpay"
onclick="cardCheckout()"
>
Stripe Terminal Checkout
</button>

</div>

</div>

<script>

let cart = [];

function addToCart(id,name,price){

cart.push({
id:id,
name:name,
price:parseFloat(price)
});

renderCart();
}

function renderCart(){

let html = '';
let total = 0;

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

total += item.price;

html += `
<div class="cart-item">
${item.name} - $${item.price.toFixed(2)}
</div>
`;

});

document.getElementById('cart-items').innerHTML = html;

document.getElementById('cart-total').innerHTML =
'$' + total.toFixed(2);
}

function cardCheckout(){

if(cart.length < 1){
alert('Cart empty');
return;
}

alert('Stripe Terminal Integration Ready');

}

</script>

</body>
</html>
