<?php
$B = htmlspecialchars(rtrim((string) ($baseUrl ?? ''), '/'));
if (!function_exists('pp_where')) {
    function pp_where(string $path, string $lang = 'php'): string {
        $l = $lang === 'js' ? 'JS' : 'PHP';
        return '<div class="help-where"><span class="help-where-tag"><i class="bi bi-geo-alt-fill"></i> Where</span>'
             . '<span class="help-where-path">' . $path . '</span>'
             . '<span class="help-where-lang ' . htmlspecialchars($lang) . '">' . $l . '</span></div>';
    }
}
?>
<h1><i class="bi bi-eye-fill"></i> The View page</h1>
<p class="lead">A read-only page for one record. There are no inputs to type into, so the client API <em>reads</em>
the displayed values and styles them. Each recipe says <strong>exactly where the code goes</strong>.</p>

<h2>Events this page fires</h2>
<table class="help-table">
    <thead><tr><th>Event</th><th>Where</th><th>Use for</th></tr></thead>
    <tbody>
        <tr><td>Before View Load</td><td>Table → <b>Page Events</b> (PHP)</td><td>Reshape data / add computed values before the record shows.</td></tr>
        <tr><td>Process Record Values</td><td>Table → <b>Page Events</b> (PHP)</td><td>Format a single value for display.</td></tr>
        <tr><td>On Page Init</td><td>Table → <b>Client Events</b> (JS)</td><td>Highlight, conditional formatting, wire buttons.</td></tr>
    </tbody>
</table>

<h2>Recipes</h2>

<h3>1 · Make a field red (the classic)</h3>
<?= pp_where('Events → <b>orders</b> → Client Events → <b>On Page Init</b>', 'js') ?>
<pre><code>var ctrl = Runner.getControl('status');
ctrl.addStyle('color: red; font-weight: 700');</code></pre>

<h3>2 · Conditional formatting on a value</h3>
<?= pp_where('Events → <b>orders</b> → Client Events → <b>On Page Init</b>', 'js') ?>
<pre><code>if ((+Runner.getControl('balance').getValue() || 0) &lt; 0) {
    Runner.getControl('balance').addStyle('color:#dc2626');   // getValue() reads the shown text on View
}</code></pre>

<h3>3 · Show a computed value that isn't a column</h3>
<?= pp_where('Events → <b>orders</b> → Page Events → <b>Before View Load</b>', 'php') ?>
<pre><code>// add a value your View page displays (place a Text/HTML component bound to it, or read it in Process Values)
$data['days_open'] = (int) ((time() - strtotime($data['created_at'])) / 86400);</code></pre>

<h3>4 · Format one value for display</h3>
<?= pp_where('Events → <b>orders</b> → Page Events → <b>Process Record Values</b>', 'php') ?>
<pre><code>if (isset($data['total'])) $data['total'] = '$' . number_format((float) $data['total'], 2);</code></pre>

<h3>5 · Add an action button (Custom Button) to the View page</h3>
<p>Drop a <a href="<?= $B ?>/help/component_custom_button">Custom&nbsp;Button</a> on the View page in the Designer.</p>
<?= pp_where('Designer → Custom Button → <b>Client Before</b>', 'js') ?>
<pre><code>if (!await pp.dialog.confirm('Send a reminder to the customer?')) return false;
params.id = pp.page.id;</code></pre>
<?= pp_where('Designer → Custom Button → <b>Server</b>', 'php') ?>
<pre><code>$row = dbRow('SELECT customer_email, reference FROM orders WHERE id = ?', [$params['id']]);
pp_send_email($row['customer_email'], 'Reminder', 'Your order ' . $row['reference'] . ' is awaiting payment.');
$result['sent'] = true;</code></pre>
<?= pp_where('Designer → Custom Button → <b>Client After</b>', 'js') ?>
<pre><code>if (result.sent) pp.dialog.toast('success', 'Reminder sent.');</code></pre>

<h3>6 · Read every displayed value</h3>
<?= pp_where('Events → <b>orders</b> → Client Events → <b>On Page Init</b>', 'js') ?>
<pre><code>var data = Runner.getData();   // { reference:'…', total:'…', status:'…' } — the shown values
console.log('Viewing', data.reference);</code></pre>

<div class="help-callout help-callout-info">
    <i class="bi bi-check2-circle"></i>
    <div>The same <code>Runner</code> API works on <strong>Print</strong>, <strong>PDF</strong> and
        <strong>Card</strong> pages too — <code>getControl(field).getValue()</code> returns the displayed value.
        Full method list in the <a href="<?= $B ?>/help/PPjs">PP.js reference</a>.</div>
</div>
