<?php
if ( ! defined( 'ABSPATH' ) ) exit;
/**
 * Image-select (multi-choice with picture-style options).
 *
 * Storage shape — identical to `checkbox` for back-compat:
 *   [ 'BTC' => '1', 'ETH' => '', ... ]   (every key present, '1' or '')
 *
 * Each option declares its own image (and optional corner badge), so the
 * field config is fully self-describing — no per-plugin CSS hacks needed.
 *
 * Option config:
 *   'BTC'      => [ 'label'  => 'Bitcoin',
 *                   'image'  => '<url>/btc.svg' ]
 *   'USDT_ETH' => [ 'label'  => 'USDT on Ethereum',
 *                   'image'  => '<url>/usdt.svg',
 *                   'badge'  => '<url>/eth.svg' ]
 *   'LTC'      => [ 'label'  => 'Litecoin',
 *                   'image'  => '<url>/ltc.svg',
 *                   'locked' => true,
 *                   'locked_label' => 'Litecoin — Available in PRO' ]
 *
 * Locked options render dimmed with a lock badge and a disabled input.
 * The engine also strips them from POSTed values on save, so a tampered
 * form can't activate a locked option.
 *
 * @var array  $field
 * @var mixed  $value
 * @var string $name_base
 */
$options = isset( $field['options'] ) && is_array( $field['options'] ) ? $field['options'] : array();
$value   = is_array( $value ) ? $value : array();
$columns = isset( $field['columns'] ) ? (int) $field['columns'] : 0;
?>
<div class="cn-image-select <?php echo $columns > 0 ? 'has-columns' : ''; ?>"
     <?php if ( $columns > 0 ) echo 'style="--cn-cols:' . (int) $columns . '"'; ?>>
    <?php foreach ( $options as $key => $opt ) :
        $opt          = is_array( $opt ) ? $opt : array( 'label' => (string) $opt );
        $label        = isset( $opt['label'] ) ? $opt['label'] : (string) $key;
        $image        = isset( $opt['image'] ) ? $opt['image'] : '';
        $badge        = isset( $opt['badge'] ) ? $opt['badge'] : '';
        $locked       = ! empty( $opt['locked'] );
        $tooltip_text = $locked && ! empty( $opt['locked_label'] ) ? $opt['locked_label'] : $label;

        $row_id  = 'cn-field-' . $field['id'] . '-' . $key;
        // Locked options can never appear checked, even if the stored value
        // says otherwise (e.g. someone had PRO, downgraded, but the saved
        // selection still includes a now-PRO coin).
        $checked = ! $locked && ! empty( $value[ $key ] );
        $style   = $image ? 'background-image:url(' . esc_url( $image ) . ')' : '';

        $classes = array( 'cn-image-option' );
        if ( $checked ) $classes[] = 'is-checked';
        if ( $locked )  $classes[] = 'is-locked';
    ?>
        <label class="<?php echo esc_attr( implode( ' ', $classes ) ); ?>"
               aria-label="<?php echo esc_attr( $tooltip_text ); ?>"
               style="<?php echo esc_attr( $style ); ?>">
            <input type="checkbox"
                   id="<?php echo esc_attr( $row_id ); ?>"
                   name="<?php echo esc_attr( $name_base . '[' . $key . ']' ); ?>"
                   value="1"
                   <?php checked( $checked ); ?>
                   <?php disabled( $locked ); ?> />
            <?php if ( $badge ) : ?>
                <span class="cn-image-option-badge"
                      style="background-image:url(<?php echo esc_url( $badge ); ?>)"></span>
            <?php endif; ?>
            <?php if ( $locked ) : ?>
                <span class="cn-image-option-lock" aria-hidden="true"><i class="icon ion-md-lock"></i></span>
            <?php endif; ?>
            <span class="cn-image-option-tooltip"><?php echo esc_html( $tooltip_text ); ?></span>
        </label>
    <?php endforeach; ?>
</div>
