<div class="modal fade" id="clickActionModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header py-2">
                <h6 class="modal-title"><i class="bi bi-hand-index me-2"></i><span id="clickActionTitle">Add Click Action</span></h6>
                <button type="button" class="btn btn-sm ca-guide-btn ms-auto me-2" id="clickActionGuideToggle" onclick="var g=document.getElementById('clickActionGuide');if(g){g.style.display=g.style.display==='none'?'block':'none';this.classList.toggle('is-on',g.style.display!=='none');}" title="Show examples &amp; help"><i class="bi bi-mortarboard-fill"></i> Guide</button>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close click action" title="Close without saving this click action"></button>
            </div>
            <div class="modal-body py-2">
                <input type="hidden" id="clickActionEditIndex" value="-1">

                <div id="clickActionGuide" class="ca-guide" style="display:none">
                    <div class="ca-guide-head"><i class="bi bi-mortarboard-fill"></i> How to use click actions</div>
                    <p class="ca-guide-lead">A click on a <strong>row</strong> or a specific <strong>field cell</strong> runs an action. Choose a <strong>Trigger</strong> (single/double), and optionally <strong>Confirm</strong> first or limit it with <strong>Only run when</strong>. A field action wins over a row action on the same click.</p>
                    <table class="ca-guide-table">
                        <thead><tr><th>Goal</th><th>Set it up like this</th></tr></thead>
                        <tbody>
                            <tr><td>Open the record when a row is clicked</td><td>Field <code>Row Click</code> · Type <code>Open Page</code> · Target <code>View</code></td></tr>
                            <tr><td>Edit on double-click (single click still selects)</td><td>Trigger <code>Double click</code> · Type <code>Open Page</code> · Target <code>Edit</code></td></tr>
                            <tr><td>Open an external / deep link, filled from the row</td><td>Type <code>Open URL</code> · URL <code>https://maps.google.com/?q={city}</code> or <code>/reports/{id}</code> · Open In <code>New Tab</code></td></tr>
                            <tr><td>Ask before a risky action</td><td>Confirm first <code>Delete this record?</code></td></tr>
                            <tr><td>Run only for certain rows</td><td>Only run when <code>data.status === 'pending'</code></td></tr>
                            <tr><td>Run server logic, then toast &amp; refresh the row</td><td>Type <code>Execute Code</code> → Server <code>$result['notify']=['message'=&gt;'Approved','type'=&gt;'success']; $result['refresh']='row';</code></td></tr>
                        </tbody>
                    </table>
                    <div class="ca-guide-note">
                        <p><strong>URL tokens</strong> — in <em>Open URL</em>, <code>{id}</code> and any <code>{column}</code> are replaced with the clicked row's values (URL-encoded). Example: <code>/invoices/{id}?customer={customer_id}</code>.</p>
                        <p><strong>Execute Code</strong> runs in three stages:</p>
                        <ol>
                            <li><strong>Client Before</strong> (JavaScript) — read the row and prepare <code>params</code>, e.g. <code>params['id'] = row.getFieldValue('id');</code> (return <code>false</code> to cancel).</li>
                            <li><strong>Server</strong> (PHP) — reads <code>$params</code>, sets <code>$result</code>; the <code>dbAll / dbRow / dbValue / dbExecute</code> helpers are in scope. It runs on a CSRF-guarded endpoint and is <em>never</em> sent to the browser. Return any of <code>$result['notify']</code>, <code>['redirect']</code>, <code>['setCell']</code>, <code>['refresh']</code>, <code>['reload']</code> and the list applies them automatically.</li>
                            <li><strong>Client After</strong> (JavaScript) — react to the returned <code>result</code>, e.g. <code>row.fieldCell('status').style.background = 'gold';</code></li>
                        </ol>
                        <p><strong>The <code>row</code> helper</strong>: <code>row.getFieldValue('col')</code> · <code>row.data</code> (all values) · <code>row.fieldCell('col')</code> (the &lt;td&gt;) · <code>row.id</code>.</p>
                    </div>
                </div>

                <div class="row g-2">
                    <div class="col-md-4">
                        <label class="form-label small mb-1">Field</label>
                        <select class="form-select form-select-sm" id="clickActionField">
                            <option value="row">Row Click</option>
                            <!-- dynamically filled with table fields -->
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label small mb-1">Action Type</label>
                        <select class="form-select form-select-sm" id="clickActionType">
                            <option value="openPage">Open Page</option>
                            <option value="openUrl">Open URL</option>
                            <option value="selectRecord">Select Record</option>
                            <option value="expandDetails">Expand/Collapse Details</option>
                            <option value="executeCode">Execute Code</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label small mb-1">Trigger <span class="text-muted" title="When the action fires. Tip: single = select/open, double = edit.">ⓘ</span></label>
                        <select class="form-select form-select-sm" id="clickActionOn">
                            <option value="single">Single click</option>
                            <option value="double">Double click</option>
                        </select>
                    </div>
                    <div class="col-md-4" id="clickActionTargetGroup">
                        <label class="form-label small mb-1">Target Page</label>
                        <select class="form-select form-select-sm" id="clickActionTarget">
                            <option value="view">View Page</option>
                            <option value="edit">Edit Page</option>
                            <option value="add">Add Page</option>
                            <option value="print">Print Page</option>
                            <option value="export">Export Page</option>
                        </select>
                    </div>
                    <div class="col-md-8" id="clickActionUrlGroup" style="display:none;">
                        <label class="form-label small mb-1">URL <span class="text-muted">— use <code>{column}</code> and <code>{id}</code> tokens (URL-encoded)</span></label>
                        <input type="text" class="form-control form-control-sm" id="clickActionUrl" placeholder="/reports/{id}?ref={code}  or  https://maps.google.com/?q={city}">
                    </div>
                    <div class="col-md-4" id="clickActionOpenInGroup">
                        <label class="form-label small mb-1">Open In</label>
                        <select class="form-select form-select-sm" id="clickActionOpenIn">
                            <option value="current">Current Window</option>
                            <option value="popup">Popup Window</option>
                            <option value="newtab">New Tab</option>
                        </select>
                    </div>
                </div>

                <div class="row g-2 mt-1">
                    <div class="col-md-6">
                        <label class="form-label small mb-1">Confirm first <span class="text-muted">— message (blank = no prompt)</span></label>
                        <input type="text" class="form-control form-control-sm" id="clickActionConfirm" placeholder="Delete this record?">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label small mb-1">Only run when <span class="text-muted">— JS over <code>data</code> (blank = always)</span></label>
                        <input type="text" class="form-control form-control-sm" id="clickActionOnlyWhen" placeholder="data.status === 'pending'">
                    </div>
                </div>

                <div id="clickActionCodeGroup" class="mt-2" style="display:none;">
                    <label class="form-label small mb-1">Client Before (JavaScript) <span class="text-muted">— <code>row</code>, <code>params</code></span></label>
                    <textarea class="form-control form-control-sm" id="clickActionClientBefore" rows="2" placeholder="params['OrderID'] = row.getFieldValue('OrderID');"></textarea>
                    <label class="form-label small mb-1 mt-2">Server (PHP) <span class="text-muted">— reads <code>$params</code>, sets <code>$result</code>; runs CSRF-guarded</span></label>
                    <textarea class="form-control form-control-sm" id="clickActionServer" rows="3" placeholder="$result['notify'] = ['message'=>'Approved','type'=>'success']; $result['refresh']='row';"></textarea>
                    <label class="form-label small mb-1 mt-2">Client After (JavaScript) <span class="text-muted">— <code>row</code>, <code>params</code>, <code>result</code></span></label>
                    <textarea class="form-control form-control-sm" id="clickActionClientAfter" rows="2" placeholder="row.fieldCell('OrderID').style.background='yellow';"></textarea>
                    <div class="row g-2 mt-1 align-items-end">
                        <div class="col-md-6">
                            <label class="form-label small mb-1">After server, refresh</label>
                            <select class="form-select form-select-sm" id="clickActionRefresh">
                                <option value="none">Nothing (stay)</option>
                                <option value="row">This row</option>
                                <option value="grid">Whole list</option>
                                <option value="reload">Reload page</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <p class="text-muted small mb-1">Server <code>$result</code> keys: <code>notify</code> · <code>redirect</code> · <code>setCell</code> · <code>refresh</code> · <code>reload</code></p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer py-2">
                <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal" title="Cancel this click action">Cancel</button>
                <button type="button" class="btn btn-sm btn-primary" id="btnSaveClickAction" title="Save this click action">Save</button>
            </div>
        </div>
    </div>
</div>
