<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Receive Payment</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body{ background:#f8f9fa; }
.card{ border-radius:14px; }
.stat-row{ display:flex; justify-content:space-between; font-size:15px; }
.stat-row b{ font-size:16px; }
.amount-lg{ font-size:22px; font-weight:700; }
</style>
</head>

<body class="pb-5">

<div class="container-fluid px-3">

<!-- HEADER -->
<div class="d-flex align-items-center my-3">
    <a href="hps_sale_approved.php" class="btn btn-outline-secondary btn-sm me-2">← Back</a>
    <h5 class="mb-0">Receive Payment</h5>
</div>

<?php if ($msg): ?>
<div class="alert alert-danger"><?= htmlspecialchars($msg) ?></div>
<?php endif; ?>

<!-- SUMMARY CARD -->
<div class="card shadow-sm mb-3">
<div class="card-body">

<div class="stat-row mb-2">
    <span>Total Receivable</span>
    <b><?= number_format($total) ?></b>
</div>

<div class="stat-row mb-2">
    <span>Paid</span>
    <b><?= number_format($paid) ?></b>
</div>

<div class="stat-row bg-warning bg-opacity-25 p-2 rounded">
    <span>Outstanding</span>
    <b><?= number_format($outstanding) ?></b>
</div>

</div>
</div>

<!-- RECEIVE PAYMENT -->
<div class="card shadow-sm mb-3">
<div class="card-body">

<h6 class="mb-3">Receive Payment</h6>

<form method="post">

<div class="mb-3">
    <label class="form-label">Payment Type</label>
    <select name="type" class="form-select">
        <option value="INSTALLMENT">Installment</option>
        <option value="DOWN">Down Payment</option>
        <option value="DOC">Documentation</option>
    </select>
</div>

<div class="mb-3">
    <label class="form-label">Amount</label>
    <input type="number"
           name="amount"
           class="form-control amount-lg"
           value="<?= $receive_now ?>">
</div>

<div class="mb-3">
    <label class="form-label">Remarks</label>
    <input type="text" name="remarks" class="form-control">
</div>

<button name="receive" class="btn btn-success w-100 py-2">
    Receive Payment
</button>

</form>
</div>
</div>

<!-- PAYMENT HISTORY -->
<h6 class="mb-2">Payment History</h6>

<?php if (mysqli_num_rows($history) == 0): ?>
<div class="text-muted small">No payments yet</div>
<?php endif; ?>

<?php while($p=mysqli_fetch_assoc($history)): ?>
<div class="card shadow-sm mb-2">
<div class="card-body p-2">

<div class="d-flex justify-content-between">
    <b><?= number_format($p['cr']) ?></b>
    <span class="badge bg-secondary"><?= $p['ref_type'] ?></span>
</div>

<div class="small text-muted">
    <?= $p['trans_date'] ?>
</div>

<div class="small">
    <?= htmlspecialchars($p['description']) ?>
</div>

<a href="hps_payment_receipt.php?pid=<?= $p['id'] ?>"
   target="_blank"
   class="btn btn-sm btn-outline-primary mt-2 w-100">
   Print Receipt
</a>

</div>
</div>
<?php endwhile; ?>

</div>
</body>
</html>
