<?php
require_once("../php/db_connect.php");

if (session_status() === PHP_SESSION_NONE) {
    session_start();
}

if (!isset($_SESSION["user_id"])) {
    echo "<p>Please log in first.</p>";
    exit;
}

$customer_id = (int)$_SESSION["user_id"];

$stmt = $conn->prepare("
    SELECT 
        o.id,
        o.total_price,
        o.amount_paid,
        o.remaining_balance,
        o.payment_status,
        o.created_at,
        u.shop_name
    FROM orders o
    LEFT JOIN users u ON o.shop_id = u.id
    WHERE o.customer_id = ?
    ORDER BY o.id DESC
");
$stmt->bind_param("i", $customer_id);
$stmt->execute();
$payments = $stmt->get_result();

function money($amount) {
    return "₱" . number_format((float)$amount, 2);
}
?>

<div class="customer-payments-page">

    <div class="payments-header">
        <h1>Payments</h1>
        <p>Track your payments, remaining balances, and completed transactions.</p>
    </div>

    <div class="payments-card">
        <table class="payments-table">
            <thead>
                <tr>
                    <th>Order ID</th>
                    <th>Shop</th>
                    <th>Total Amount</th>
                    <th>Amount Paid</th>
                    <th>Remaining Balance</th>
                    <th>Status</th>
                    <th>Action</th>
                </tr>
            </thead>

            <tbody>
                <?php if ($payments && $payments->num_rows > 0): ?>
                    <?php while ($row = $payments->fetch_assoc()): ?>
                        <tr>
                            <td>#<?php echo (int)$row["id"]; ?></td>

                            <td>
                                <?php echo htmlspecialchars($row["shop_name"] ?? "Unknown Shop"); ?>
                            </td>

                            <td><?php echo money($row["total_price"]); ?></td>

                            <td class="text-success">
                                <?php echo money($row["amount_paid"]); ?>
                            </td>

                            <td class="text-danger">
                                <?php echo money($row["remaining_balance"]); ?>
                            </td>

                            <td>
                                <?php if ((float)$row["remaining_balance"] <= 0): ?>
                                    <span class="status-badge paid">Fully Paid</span>
                                <?php elseif ((float)$row["amount_paid"] > 0): ?>
                                    <span class="status-badge partial">Partial</span>
                                <?php else: ?>
                                    <span class="status-badge unpaid">Unpaid</span>
                                <?php endif; ?>
                            </td>

<td>
    <?php if ((float)$row['remaining_balance'] > 0): ?>
        <a href="/taiprint/html/pay_balance.php?order_id=<?= (int)$row['id']; ?>" class="pay-balance-btn">
            Pay Balance
        </a>
    <?php else: ?>
        <span>No balance</span>
    <?php endif; ?>
</td>
                        </tr>
                    <?php endwhile; ?>
                <?php else: ?>
                    <tr>
                        <td colspan="7" class="empty-payments">
                            No payment records found.
                        </td>
                    </tr>
                <?php endif; ?>
            </tbody>
        </table>
    </div>

</div>

<style>
    .pay-balance-btn {
    background: #1d2b4f;
    color: #fff;
    padding: 12px 22px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    display: inline-block;
}

.pay-balance-btn:hover {
    background: #12203f;
}
.customer-payments-page {
    padding: 30px;
}

.payments-header h1 {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 6px;
}

.payments-header p {
    color: #64748b;
    margin-bottom: 24px;
}

.payments-card {
    background: #fff;
    border-radius: 22px;
    padding: 24px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.06);
    overflow-x: auto;
}

.payments-table {
    width: 100%;
    border-collapse: collapse;
}

.payments-table th {
    background: #f8fafc;
    padding: 16px;
    font-weight: 700;
    color: #111827;
    border-bottom: 1px solid #e5e7eb;
}

.payments-table td {
    padding: 16px;
    border-bottom: 1px solid #f1f5f9;
    color: #1f2937;
}

.text-success {
    color: #16a34a;
    font-weight: 700;
}

.text-danger {
    color: #dc2626;
    font-weight: 700;
}

.status-badge {
    padding: 7px 13px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
}

.status-badge.paid {
    background: #dcfce7;
    color: #15803d;
}

.status-badge.partial {
    background: #fef3c7;
    color: #b45309;
}

.status-badge.unpaid {
    background: #fee2e2;
    color: #b91c1c;
}

.pay-btn {
    background: #1f2f4a;
    color: #fff;
    padding: 9px 15px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    display: inline-block;
}

.pay-btn:hover {
    background: #111827;
    color: #fff;
}

.empty-payments {
    text-align: center;
    padding: 40px;
    color: #64748b;
}
</style>