<?php
session_start();
require_once dirname(__DIR__) . '/includes/functions.php';

billing_require_auth();

$user = billing_current_user();
$organization = billing_current_organization();
if (!$user) {
    billing_redirect('signin.php');
}
if (!$organization || empty($organization['onboarding_completed_at'])) {
    billing_redirect('onboarding.php?step=1');
}

$stats = billing_dashboard_stats((int) $user['id']);
$organizationName = (string) ($organization['organization_name'] ?? 'bala');
$userLabel = (string) ($user['email'] ?? 'billing-user');
$billingTopbarOrganizationName = $organizationName;
$billingTopbarUserLabel = $userLabel;
$billingActiveNav = 'payments_received';

$receivedPayments = is_array($_SESSION['billing_payment_received_rows'] ?? null)
    ? array_values($_SESSION['billing_payment_received_rows'])
    : [];

usort(
    $receivedPayments,
    static function (array $left, array $right): int {
        return strcmp((string) ($right['date'] ?? ''), (string) ($left['date'] ?? ''));
    }
);

$flashSuccess = billing_flash('success');

function billing_payment_money(float $amount): string
{
    return "\u{20B9}" . number_format($amount, 2);
}

function billing_payment_display_date(string $date): string
{
    $timestamp = strtotime($date);
    return $timestamp ? date('d/m/Y', $timestamp) : $date;
}

function billing_payments_received_query(array $changes = []): string
{
    $query = $_GET;
    foreach ($changes as $key => $value) {
        if ($value === null || $value === '') {
            unset($query[$key]);
        } else {
            $query[$key] = $value;
        }
    }

    return 'payments_received.php' . ($query !== [] ? '?' . http_build_query($query) : '');
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<base href="<?php echo billing_escape(billing_base_href()); ?>">
<title>Payments Received | Zoho Billing</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap">
<link rel="stylesheet" href="Payslip_Project/assets/fontawesome/css/all.min.css">
<link rel="stylesheet" href="assets/billing.css?v=20260507-css-recovery-2">
<style>
.payments-screen {
    background: #fff;
    border-top: 1px solid #e7edf4;
    min-height: calc(100vh - 140px);
}

.payments-screen-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 26px;
    border-bottom: 1px solid #e7edf4;
}

.payments-screen-title {
    color: #111b2d;
    font-size: 18px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.payments-screen-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.payments-screen-more {
    width: 40px;
    min-height: 40px;
    border: 1px solid #d6deea;
    border-radius: 8px;
    background: #fff;
    color: #111b2d;
    cursor: pointer;
}

.payments-flash {
    margin-bottom: 18px;
    padding: 14px 16px;
    border-radius: 16px;
    background: #edf9f0;
    border: 1px solid #cae9d2;
    color: #0d6b3b;
    font-weight: 700;
}

.payments-empty {
    min-height: calc(100vh - 220px);
    padding: 84px 32px 40px;
}

.payments-empty-hero {
    text-align: center;
    padding-bottom: 108px;
}

.payments-empty-hero h2 {
    margin: 0 0 12px;
    color: #000;
    font-size: 28px;
    font-weight: 500;
    letter-spacing: -0.02em;
}

.payments-empty-hero p {
    margin: 0;
    color: #65748b;
    font-size: 15px;
}

.payments-empty-cta {
    margin-top: 34px;
    display: grid;
    justify-items: center;
    gap: 18px;
}

.payments-empty-cta .customer-btn {
    min-width: 260px;
    min-height: 52px;
    font-size: 15px;
    font-weight: 700;
}

.payments-import-link {
    color: #2563eb;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
}

.payments-divider {
    height: 1px;
    margin: 0 auto 34px;
    max-width: 100%;
    background: #e9edf3;
}

.payments-life-cycle {
    max-width: 840px;
    margin: 0 auto;
    text-align: center;
}

.payments-life-cycle h3,
.payments-module-help h3 {
    margin: 0 0 30px;
    color: #000;
    font-size: 22px;
    font-weight: 500;
}

.payments-flow-box {
    max-width: 560px;
    margin: 0 auto;
    border: 1px solid #7bb9ff;
    border-radius: 8px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    background: #fafdff;
}

.payments-flow-box span {
    min-height: 60px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #5f6c80;
    font-size: 12px;
    line-height: 1.25;
    border-left: 1px solid #dceafe;
}

.payments-flow-box span:first-child {
    border-left: 0;
}

.payments-flow-branches {
    position: relative;
    max-width: 820px;
    margin: 0 auto;
    padding-top: 78px;
}

.payments-flow-branches::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 0;
    height: 52px;
    border-left: 2px dotted #9ed0ff;
    transform: translateX(-50%);
}

.payments-flow-branches::after {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    top: 52px;
    border-top: 2px dotted #9ed0ff;
}

.payments-flow-modes {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 30px;
    align-items: start;
}

.payments-flow-mode {
    position: relative;
    min-height: 42px;
    border: 1px solid #69b0ff;
    border-radius: 8px;
    background: #fafdff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 16px;
    color: #5f6c80;
    font-size: 12px;
    font-weight: 600;
}

.payments-flow-mode::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -30px;
    width: 0;
    height: 30px;
    border-left: 2px dotted #9ed0ff;
    transform: translateX(-50%);
}

.payments-flow-caption {
    margin: 28px 0 0;
    color: #7c8797;
    font-size: 12px;
    font-weight: 500;
}

.payments-flow-caption strong {
    color: #ff5630;
    font-weight: 600;
}

.payments-module-help {
    max-width: 700px;
    margin: 72px auto 0;
}

.payments-help-list {
    display: grid;
    gap: 14px;
}

.payments-help-row {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    color: #111b2d;
    font-size: 16px;
}

.payments-help-row i {
    color: #4f8ff7;
    font-size: 18px;
    margin-top: 2px;
}

.payments-help-row a {
    color: #2563eb;
    text-decoration: none;
}

.payments-table-wrap {
    overflow-x: auto;
}

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

.payments-table th,
.payments-table td {
    padding: 14px 18px;
    border-bottom: 1px solid #edf2f7;
    text-align: left;
    white-space: nowrap;
}

.payments-table th {
    background: #fbfcff;
    color: #667085;
    font-size: 12px;
    font-weight: 800;
}

.payments-status-pill {
    display: inline-flex;
    padding: 6px 10px;
    border-radius: 999px;
    background: #edf9f0;
    color: #0d6b3b;
    font-size: 12px;
    font-weight: 800;
}

@media (max-width: 980px) {
    .payments-flow-modes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
    }

    .payments-flow-branches::after {
        left: 24%;
        right: 24%;
    }
}

@media (max-width: 700px) {
    .payments-screen-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .payments-empty {
        padding-left: 18px;
        padding-right: 18px;
    }

    .payments-flow-box,
    .payments-flow-modes {
        grid-template-columns: 1fr;
    }

    .payments-flow-branches {
        padding-top: 28px;
    }

    .payments-flow-branches::before,
    .payments-flow-branches::after,
    .payments-flow-mode::before {
        display: none;
    }
}
</style>
</head>
<body>
<div class="dashboard-shell customer-shell">
    <?php include dirname(__DIR__) . '/includes/app_sidebar.php'; ?>
    <div class="dashboard-main customer-main">
        <?php include dirname(__DIR__) . '/includes/topbar.php'; ?>
        <main class="customer-views-page">
            <?php if ($flashSuccess): ?><div class="payments-flash"><?php echo billing_escape($flashSuccess); ?></div><?php endif; ?>
            <section class="payments-screen">
                <div class="payments-screen-head">
                    <a class="payments-screen-title" href="payments_received.php">
                        All Received Payments
                        <i class="fa-solid fa-angle-down"></i>
                    </a>
                    <div class="payments-screen-actions">
                        <a class="customer-btn customer-btn--green" href="payments_received_import.php"><i class="fa-solid fa-plus"></i> New</a>
                        <div class="customer-menu-wrap customer-menu-wrap--table">
                            <button class="payments-screen-more" type="button" aria-label="More actions" data-menu-toggle="paymentsReceivedMenu"><i class="fa-solid fa-ellipsis"></i></button>
                            <div class="customer-pop-menu customer-pop-menu--table" id="paymentsReceivedMenu" hidden>
                                <button class="menu-item" type="button" data-menu-child="paymentsReceivedSortMenu">
                                    <i class="fa-solid fa-arrow-down-wide-short"></i><span>Sort by</span><i class="fa-solid fa-angle-right"></i>
                                </button>
                                <a class="menu-item" href="payments_received_import.php">
                                    <i class="fa-solid fa-file-import"></i><span>Import</span><i class="fa-solid fa-angle-right"></i>
                                </a>
                                <button class="menu-item" type="button" data-customer-note="Export payments can be added next.">
                                    <i class="fa-solid fa-file-export"></i><span>Export Payments</span>
                                </button>
                                <button class="menu-item" type="button" data-customer-note="Manage custom fields can be added next.">
                                    <i class="fa-regular fa-rectangle-list"></i><span>Manage Custom Fields</span>
                                </button>
                                <a class="menu-item" href="zoho_payments.php">
                                    <i class="fa-regular fa-credit-card"></i><span>Online Payments</span>
                                </a>
                                <a class="menu-item" href="<?php echo billing_escape(billing_payments_received_query()); ?>">
                                    <i class="fa-solid fa-arrow-rotate-left"></i><span>Reset Column Width</span>
                                </a>
                                <a class="menu-item" href="<?php echo billing_escape(billing_payments_received_query()); ?>">
                                    <i class="fa-solid fa-rotate-right"></i><span>Refresh List</span>
                                </a>
                            </div>
                            <div class="customer-pop-submenu" id="paymentsReceivedSortMenu" hidden>
                                <button class="menu-item" type="button" data-customer-note="Date sorting is the current default view.">
                                    <span>Date</span>
                                </button>
                                <button class="menu-item" type="button" data-customer-note="Customer sorting can be added next.">
                                    <span>Customer Name</span>
                                </button>
                                <button class="menu-item" type="button" data-customer-note="Amount sorting can be added next.">
                                    <span>Amount</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <?php if ($receivedPayments === []): ?>
                    <div class="payments-empty">
                        <section class="payments-empty-hero">
                            <h2>No payments received, yet</h2>
                            <p>Payments will be added once your customers pay for their invoices.</p>
                            <div class="payments-empty-cta">
                                <a class="customer-btn customer-btn--green" href="invoices.php?filter_by=status.unpaid">GO TO UNPAID INVOICES</a>
                                <a class="payments-import-link" href="payments_received_import.php">Import Payments</a>
                            </div>
                        </section>

                        <div class="payments-divider"></div>

                        <section class="payments-life-cycle">
                            <h3>Life cycle of a Customer Payment</h3>
                            <div class="payments-flow-box">
                                <span>INITIAL<br>REQUEST</span>
                                <span>REMINDER 1</span>
                                <span>REMINDER 2</span>
                                <span>REMINDER N</span>
                            </div>
                            <div class="payments-flow-branches">
                                <div class="payments-flow-modes">
                                    <div class="payments-flow-mode"><i class="fa-brands fa-paypal"></i> PAYPAL</div>
                                    <div class="payments-flow-mode"><i class="fa-regular fa-credit-card"></i> CREDIT CARD</div>
                                    <div class="payments-flow-mode"><i class="fa-solid fa-building-columns"></i> BANK</div>
                                    <div class="payments-flow-mode"><i class="fa-regular fa-handshake"></i> MANUAL / OFFLINE</div>
                                </div>
                            </div>
                            <div class="payments-flow-caption">PAID THROUGH <strong>CLIENT PORTAL</strong></div>
                        </section>

                        <section class="payments-module-help">
                            <h3>In the Payments Received module, you can:</h3>
                            <div class="payments-help-list">
                                <div class="payments-help-row"><i class="fa-regular fa-circle-check"></i><span>Automatically charge your customer's card for recurring invoices</span></div>
                                <div class="payments-help-row"><i class="fa-regular fa-circle-check"></i><span>Configure payment gateways to receive online payments <a href="#">Learn More</a></span></div>
                                <div class="payments-help-row"><i class="fa-regular fa-circle-check"></i><span>Record payments manually</span></div>
                                <div class="payments-help-row"><i class="fa-regular fa-circle-check"></i><span>Send payment receipts to your customers</span></div>
                            </div>
                        </section>
                    </div>
                <?php else: ?>
                    <div class="payments-table-wrap">
                        <table class="payments-table">
                            <thead>
                                <tr>
                                    <th>DATE</th>
                                    <th>PAYMENT#</th>
                                    <th>CUSTOMER NAME</th>
                                    <th>INVOICE#</th>
                                    <th>MODE</th>
                                    <th>REFERENCE</th>
                                    <th>AMOUNT</th>
                                    <th>STATUS</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php foreach ($receivedPayments as $payment): ?>
                                    <tr>
                                        <td><?php echo billing_escape(billing_payment_display_date((string) ($payment['date'] ?? ''))); ?></td>
                                        <td><?php echo billing_escape((string) ($payment['payment_number'] ?? '-')); ?></td>
                                        <td><?php echo billing_escape((string) ($payment['customer_name'] ?? '-')); ?></td>
                                        <td><?php echo billing_escape((string) ($payment['invoice_number'] ?? '-')); ?></td>
                                        <td><?php echo billing_escape((string) ($payment['mode'] ?? 'Manual / Offline')); ?></td>
                                        <td><?php echo billing_escape((string) ($payment['reference_number'] ?? '-')); ?></td>
                                        <td><?php echo billing_escape(billing_payment_money((float) ($payment['amount'] ?? 0))); ?></td>
                                        <td><span class="payments-status-pill"><?php echo billing_escape(strtoupper((string) ($payment['status'] ?? 'completed'))); ?></span></td>
                                    </tr>
                                <?php endforeach; ?>
                            </tbody>
                        </table>
                    </div>
                <?php endif; ?>
            </section>
        </main>
    </div>
</div>
<script src="assets/billing.js"></script>
</body>
</html>



