dw-sheet-data-checker/templates/editor/setting-table-result.php

<table class="table checker-setting" data-toggle="table" id="checker-result" style="display:none;">
    <tbody>
        <tr class="has-link" style="display: none;">
            <th>Data Display Mode</th>
            <td>
                <div class="row mb-3">
                    <div class="col-3"><label class="form-label fw-bold mb-0">Initial Display</label></div>
                    <div class="col-9">
                        <select name="checker[result][initial_display]" class="form-select result-initial-display">
                            <option value="hidden" <?= ($checker['result']['initial_display'] ?? 'hidden') == 'hidden' ? 'selected' : '' ?>>Hidden - Show after search</option>
                            <option value="all" <?= ($checker['result']['initial_display'] ?? 'hidden') == 'all' ? 'selected' : '' ?>>Show All - Display all records</option>
                            <option value="limited" <?= ($checker['result']['initial_display'] ?? 'hidden') == 'limited' ? 'selected' : '' ?>>Show Limited - First 10 records</option>
                        </select>
                        <small class="text-muted">How to display data on page load</small>
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-3"><label class="form-label fw-bold mb-0">Filter Mode</label></div>
                    <div class="col-9">
                        <select name="checker[result][filter_mode]" class="form-select result-filter-mode">
                            <option value="search" <?= ($checker['result']['filter_mode'] ?? 'search') == 'search' ? 'selected' : '' ?>>Search - Submit to find</option>
                            <option value="filter" <?= ($checker['result']['filter_mode'] ?? 'search') == 'filter' ? 'selected' : '' ?>>Filter - Real-time filtering</option>
                        </select>
                        <small class="text-muted">Search requires submit, Filter updates live as you type</small>
                    </div>
                </div>
                <div class="row mb-2">
                    <div class="col-3"><label class="form-label fw-bold mb-0">Max Records</label></div>
                    <div class="col-9">
                        <input type="number" name="checker[result][max_records]" class="form-control" value="<?= $checker['result']['max_records'] ?? 100 ?>" min="10" max="1000">
                        <small class="text-muted">Maximum records to display (performance limit)</small>
                    </div>
                </div>
            </td>
        </tr>
        <tr class="has-link" style="display: none;">
            <th>Result Display Type</th>
            <td>
                <select name="checker[result][display]" class="form-select form-control border result-display-type">
                    <option value="standard-table" <?= ($checker['result']['display'] == 'standard-table') ? 'selected' : '' ?>>Standard Table</option>
                    <option value="vertical-table" <?= ($checker['result']['display'] == 'vertical-table') ? 'selected' : '' ?>>Vertical Table</option>
                    <option value="div" <?= ($checker['result']['display'] == 'div') ? 'selected' : '' ?>>Div</option>
                    <option value="cards" <?= ($checker['result']['display'] == 'cards') ? 'selected' : '' ?>>Card</option>
                </select>
            </td>
        </tr>
        <tr class="setting-card-column" <?= ($checker['result']['display'] !== 'cards') ? 'style="display: none;"' : '' ?>>
            <th>Result Display Column</th>
            <td>
                <div class="card-column-settings d-flex gap-2">
                    <div class="input-group">
                        <span class="input-group-text">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
                                <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1zm4 15h10m-8-4v4m6-4v4" />
                            </svg>
                        </span>
                        <input type="number" class="form-control border" name="checker[result][card_grid][desktop]" value="<?= ($checker['result']['card_grid']['desktop']) ? $checker['result']['card_grid']['desktop'] : '4' ?>">
                    </div>
                    <div class="input-group">
                        <span class="input-group-text">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
                                <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
                                    <path d="M5 4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1z" />
                                    <path d="M11 17a1 1 0 1 0 2 0a1 1 0 0 0-2 0" />
                                </g>
                            </svg>
                        </span>
                        <input type="number" class="form-control border" name="checker[result][card_grid][tablet]" value="<?= ($checker['result']['card_grid']['tablet']) ? $checker['result']['card_grid']['tablet'] : '2' ?>">
                    </div>
                    <div class="input-group">
                        <span class="input-group-text">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
                                <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2zm5-1h2m-1 13v.01" />
                            </svg>
                        </span>
                        <input type="number" class="form-control border" name="checker[result][card_grid][mobile]" value="<?= ($checker['result']['card_grid']['mobile']) ? $checker['result']['card_grid']['mobile'] : '1' ?>">
                    </div>
                </div>
            </td>
        </tr>
        <tr class="has-link" style="display: none;">
            <th>Content</th>
            <td>
                <div class="row mb-2">
                    <div class="col-3"><label class="form-label fw-bold mb-0">Header</label></div>
                    <div class="col-9">
                        <input type="color" name="checker[result][header]" class="form-control result-header" id="result_header" value="<?php echo esc_attr( $checker['result']['header'] ); ?>" />
                    </div>
                </div>
                <div class="row mb-2">
                    <div class="col-3"><label class="form-label fw-bold mb-0">Value</label></div>
                    <div class="col-9">
                        <input type="color" name="checker[result][value]" class="form-control result-value" id="result_value" value="<?php echo esc_attr( $checker['result']['value'] ); ?>" />
                    </div>
                </div>
                <div class="row mb-2">
                    <div class="col-3"><label class="form-label fw-bold mb-0">Divider</label></div>
                    <div class="col-9">
                        <input type="color" name="checker[result][divider]" class="form-control result-divider" value="<?php echo esc_attr( $checker['result']['divider'] ); ?>" />
                    </div>
                </div>
                <div class="row mb-2">
                    <div class="col-3"><label class="form-label fw-bold mb-0">Divider Width</label></div>
                    <div class="col-9">
                        <div class="input-group">
                            <input type="number" name="checker[result][divider_width]" class="form-control border result-divider-width" value="<?php echo esc_attr( $checker['result']['divider_width'] ?? '1' ); ?>" />
                            <span class="input-group-text">px</span>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-3"><label class="form-label fw-bold mb-0">Output Value</label></div>
                    <div class="col-9">
                        <div class="result-value-output inset bg-light"></div>
                    </div>
                </div>
            </td>
        </tr>
        <tr class="has-link" style="display: none;">
            <th>Back Button</th>
            <td>
                <div class="row mb-2">
                    <div class="col-3"><label class="form-label fw-bold mb-0">"Back"</label></div>
                    <div class="col-9">
                        <input name="checker[back_button][text]" class="form-control back-btn-text" value="<?php echo esc_attr( $checker['back_button']['text'] ?? 'Back' ); ?>" />
                    </div>
                </div>
                <div class="row mb-2">
                    <div class="col-3"><label class="form-label fw-bold mb-0">Background</label></div>
                    <div class="col-9">
                        <input type="color" name="checker[back_button][bg_color]" class="form-control border back-btn-bg-color" value="<?php echo esc_attr( $checker['back_button']['bg_color'] ?? '#333333' ); ?>" />
                    </div>
                </div>
                <div class="row mb-2">
                    <div class="col-3"><label class="form-label fw-bold mb-0">Text</label></div>
                    <div class="col-9">
                        <input type="color" name="checker[back_button][text_color]" class="form-control border back-btn-text-color" value="<?php echo esc_attr( $checker['back_button']['text_color'] ?? '#ffffff' ); ?>" />
                    </div>
                </div>
                <div class="row mb-2">
                    <div class="col-3"><label class="form-label fw-bold mb-0">Position</label></div>
                    <div class="col-9">
                        <select name="checker[back_button][position]" class="form-select form-control border back-btn-position">
                            <option value="flex-start" <?= ($checker['back_button']['position'] == 'flex-start') ? 'selected' : '' ?>>Left</option>
                            <option value="center" <?= ($checker['back_button']['position'] == 'center') ? 'selected' : '' ?>>Center</option>
                            <option value="flex-end" <?= ($checker['back_button']['position'] == 'flex-end') ? 'selected' : '' ?>>Right</option>
                        </select>
                    </div>
                </div>
            </td>
        </tr>
    </tbody>
</table>