<?php
$imageLabel = function ($key, $fallback) {
    $value = __($key, true);
    echo htmlspecialchars(!empty($value) && $value !== $key ? $value : $fallback, ENT_QUOTES, 'UTF-8');
};
$imageLabelCss = function ($key, $fallback) {
    $value = __($key, true);
    echo addcslashes(!empty($value) && $value !== $key ? $value : $fallback, "\\\"");
};
?>
<div class="row wrapper border-bottom white-bg page-heading">
	<div class="col-sm-12">
		<div class="row">
			<div class="col-sm-10">
				<h2><?php $imageLabel('menuImages', 'Images'); ?></h2>
			</div>
		</div>
		<p class="m-b-none"><i class="fa fa-info-circle"></i> <?php $imageLabel('images_settings_desc', 'Configure storefront image sizes and processing behavior.'); ?></p>
	</div>
</div>
<div class="wrapper wrapper-content animated fadeInRight">
    <style>
        .sc-image-settings-table {
            margin-bottom: 0;
        }
        .sc-image-settings-table > thead > tr > th {
            border-bottom: 1px solid var(--admin-card-border, #e7eaec);
            color: var(--admin-heading-text, #333);
            font-weight: 600;
            vertical-align: middle;
            white-space: nowrap;
        }
        .sc-image-settings-table > tbody > tr > td {
            vertical-align: middle;
        }
        .sc-image-settings-table .small {
            margin-top: 3px;
        }
        .sc-image-size-field {
            margin: 0 auto;
            max-width: 140px;
        }
        .sc-image-processing-field {
            margin: 0 auto;
            max-width: 150px;
        }
        .sc-image-help {
            background: var(--admin-table-row-alt-bg, #f9f9f9);
            border-color: var(--admin-card-border, #e7eaec);
            margin-bottom: 18px;
        }
        .sc-image-regenerate {
            align-items: center;
            border: 1px solid var(--admin-card-border, #e7eaec);
            display: flex;
            justify-content: space-between;
            gap: 16px;
            padding: 16px;
        }
        .sc-image-regenerate h5 {
            margin: 0 0 5px;
        }
        .sc-image-regenerate-actions {
            min-width: 220px;
            text-align: right;
        }
        .pj-regenerate-images-status {
            margin-top: 8px;
            max-width: 320px;
        }
        @media (max-width: 991px) {
            .sc-image-settings-table,
            .sc-image-settings-table thead,
            .sc-image-settings-table tbody,
            .sc-image-settings-table th,
            .sc-image-settings-table td {
                display: block;
                width: 100%;
            }
            .sc-image-settings-table thead {
                display: none;
            }
            .sc-image-settings-table > tbody > tr {
                border-bottom: 1px solid var(--admin-card-border, #e7eaec);
                display: grid;
                gap: 8px 12px;
                grid-template-columns: repeat(3, minmax(0, 1fr));
                padding: 12px 0;
            }
            .sc-image-settings-table > tbody > tr:last-child {
                border-bottom: 0;
            }
            .sc-image-settings-table > tbody > tr > td {
                border-top: 0;
                padding: 5px 0;
            }
            .sc-image-settings-table > tbody > tr > td:first-child {
                grid-column: 1 / -1;
            }
            .sc-image-settings-table > tbody > tr > td:not(:first-child) {
                display: block;
            }
            .sc-image-settings-table > tbody > tr > td:nth-child(2):before {
                content: "<?php $imageLabelCss('images_width', 'Width'); ?>";
                display: block;
                color: var(--admin-muted-text, #676a6c);
                font-weight: 600;
                margin-bottom: 4px;
            }
            .sc-image-settings-table > tbody > tr > td:nth-child(3):before {
                content: "<?php $imageLabelCss('images_height', 'Height'); ?>";
                display: block;
                color: var(--admin-muted-text, #676a6c);
                font-weight: 600;
                margin-bottom: 4px;
            }
            .sc-image-settings-table > tbody > tr > td:nth-child(4):before {
                content: "<?php $imageLabelCss('images_processing', 'Processing'); ?>";
                display: block;
                color: var(--admin-muted-text, #676a6c);
                font-weight: 600;
                margin-bottom: 4px;
            }
            .sc-image-size-field,
            .sc-image-processing-field {
                margin: 0;
                max-width: none;
                min-width: 0;
                width: 100%;
            }
            .sc-image-regenerate {
                align-items: flex-start;
                display: block;
            }
            .sc-image-regenerate-actions {
                margin-top: 12px;
                min-width: 0;
                text-align: left;
            }
        }
    </style>
	<?php
	$error_code = $controller->_get->toString('err');
	if (!empty($error_code))
    {
    	$titles = __('plugin_base_error_titles', true);
    	$bodies = __('plugin_base_error_bodies', true);
    	switch (true)
    	{
    		case in_array($error_code, array('PBS01')):
    			?>
    			<div class="alert alert-success">
    				<i class="fa fa-check m-r-xs"></i>
    				<strong><?php echo @$titles[$error_code]; ?></strong>
    				<?php echo @$bodies[$error_code]?>
    			</div>
    			<?php
    			break;
    		case in_array($error_code, array('')):
    			?>
    			<div class="alert alert-danger">
    				<i class="fa fa-exclamation-triangle m-r-xs"></i>
    				<strong><?php echo @$titles[$error_code]; ?></strong>
    				<?php echo @$bodies[$error_code]?>
    			</div>
    			<?php
    			break;
    	}
    }

    // Separate image size options from other options
    $image_size_keys = array(
        'o_thumb_width', 'o_thumb_height',
        'o_medium_width', 'o_medium_height',
        'o_default_width', 'o_default_height',
        'o_large_width', 'o_large_height'
    );
    // Image processing options (per-format crop settings)
    $image_processing_keys = array('o_thumb_crop', 'o_medium_crop', 'o_default_crop', 'o_large_crop');
    // Hide deprecated options (replaced by new image format system)
    $hidden_keys = array('o_product_width', 'o_product_height', 'o_image_crop');

    $image_options = array();
    $image_processing_options = array();

    if (isset($tpl['arr']) && is_array($tpl['arr'])) {
        foreach ($tpl['arr'] as $option) {
            if (in_array($option['key'], $image_size_keys)) {
                $image_options[$option['key']] = $option;
            } elseif (in_array($option['key'], $image_processing_keys)) {
                $image_processing_options[$option['key']] = $option;
            }
        }
    }

    // Sort image options: thumb, medium, default, large (small to large)
    $sorted_image_options = array();
    $order = array('o_thumb_width', 'o_thumb_height', 'o_medium_width', 'o_medium_height', 'o_default_width', 'o_default_height', 'o_large_width', 'o_large_height');
    foreach ($order as $key) {
        if (isset($image_options[$key])) {
            $sorted_image_options[] = $image_options[$key];
        }
    }
    ?>

    <form action="<?php echo $_SERVER['PHP_SELF']; ?>?controller=pjBaseOptions&amp;action=pjActionOptionsUpdate" method="post" class="form-horizontal" id="frmGeneral">
        <input type="hidden" name="csrf_token" value="<?php echo pjAppController::getCsrfToken(); ?>" />
        <input type="hidden" name="options_update" value="1" />
        <input type="hidden" name="next_action" value="pjActionImages" />

        <?php if (!empty($image_options)) { ?>
        <div class="row">
            <div class="col-lg-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5><i class="fa fa-image"></i> <?php $imageLabel('images_sizes_title', 'Image sizes'); ?></h5>
                    </div>
                    <div class="ibox-content">
                        <div class="table-responsive">
                            <table class="table table-striped table-hover sc-image-settings-table">
                                <thead>
                                    <tr>
                                        <th><?php $imageLabel('images_type', 'Image type'); ?></th>
                                        <th class="text-center"><?php $imageLabel('images_width', 'Width'); ?></th>
                                        <th class="text-center"><?php $imageLabel('images_height', 'Height'); ?></th>
                                        <th class="text-center"><?php $imageLabel('images_processing', 'Processing'); ?></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>
                                            <strong><?php $imageLabel('images_thumb', 'Thumb'); ?></strong>
                                            <div class="text-muted small"><?php $imageLabel('images_thumb_desc', 'Cart, admin and stock thumbnails'); ?></div>
                                        </td>
                                        <td>
                                        <?php if (isset($image_options['o_thumb_width'])) { $opt = $image_options['o_thumb_width']; ?>
                                            <div class="input-group input-group-sm sc-image-size-field">
                                                <input type="text" name="value-<?php echo $opt['type']; ?>-<?php echo $opt['key']; ?>" class="form-control field-int" value="<?php echo pjSanitize::html($opt['value']); ?>">
                                                <span class="input-group-addon">px</span>
                                            </div>
                                        <?php } ?>
                                        </td>
                                        <td>
                                        <?php if (isset($image_options['o_thumb_height'])) { $opt = $image_options['o_thumb_height']; ?>
                                            <div class="input-group input-group-sm sc-image-size-field">
                                                <input type="text" name="value-<?php echo $opt['type']; ?>-<?php echo $opt['key']; ?>" class="form-control field-int" value="<?php echo pjSanitize::html($opt['value']); ?>">
                                                <span class="input-group-addon">px</span>
                                            </div>
                                        <?php } ?>
                                        </td>
                                        <td>
                                        <?php
                                        $crop_key = 'o_thumb_crop';
                                        $crop_opt = isset($image_processing_options[$crop_key]) ? $image_processing_options[$crop_key] : null;
                                        $crop_selected = 'crop';
                                        if ($crop_opt) {
                                            $crop_parts = explode('::', $crop_opt['value']);
                                            $crop_selected = isset($crop_parts[1]) ? $crop_parts[1] : 'crop';
                                        }
                                        ?>
                                            <select name="value-enum-<?php echo $crop_key; ?>" class="form-control input-sm sc-image-processing-field">
                                                <option value="crop|resize::crop"<?php echo $crop_selected == 'crop' ? ' selected' : ''; ?>><?php $imageLabel('images_crop', 'Crop'); ?></option>
                                                <option value="crop|resize::resize"<?php echo $crop_selected == 'resize' ? ' selected' : ''; ?>><?php $imageLabel('images_resize', 'Resize'); ?></option>
                                            </select>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <strong><?php $imageLabel('images_medium', 'Medium'); ?></strong>
                                            <div class="text-muted small"><?php $imageLabel('images_medium_desc', 'Product grid and listing images'); ?></div>
                                        </td>
                                        <td>
                                        <?php if (isset($image_options['o_medium_width'])) { $opt = $image_options['o_medium_width']; ?>
                                            <div class="input-group input-group-sm sc-image-size-field">
                                                <input type="text" name="value-<?php echo $opt['type']; ?>-<?php echo $opt['key']; ?>" class="form-control field-int" value="<?php echo pjSanitize::html($opt['value']); ?>">
                                                <span class="input-group-addon">px</span>
                                            </div>
                                        <?php } ?>
                                        </td>
                                        <td>
                                        <?php if (isset($image_options['o_medium_height'])) { $opt = $image_options['o_medium_height']; ?>
                                            <div class="input-group input-group-sm sc-image-size-field">
                                                <input type="text" name="value-<?php echo $opt['type']; ?>-<?php echo $opt['key']; ?>" class="form-control field-int" value="<?php echo pjSanitize::html($opt['value']); ?>">
                                                <span class="input-group-addon">px</span>
                                            </div>
                                        <?php } ?>
                                        </td>
                                        <td>
                                        <?php
                                        $crop_key = 'o_medium_crop';
                                        $crop_opt = isset($image_processing_options[$crop_key]) ? $image_processing_options[$crop_key] : null;
                                        $crop_selected = 'crop';
                                        if ($crop_opt) {
                                            $crop_parts = explode('::', $crop_opt['value']);
                                            $crop_selected = isset($crop_parts[1]) ? $crop_parts[1] : 'crop';
                                        }
                                        ?>
                                            <select name="value-enum-<?php echo $crop_key; ?>" class="form-control input-sm sc-image-processing-field">
                                                <option value="crop|resize::crop"<?php echo $crop_selected == 'crop' ? ' selected' : ''; ?>><?php $imageLabel('images_crop', 'Crop'); ?></option>
                                                <option value="crop|resize::resize"<?php echo $crop_selected == 'resize' ? ' selected' : ''; ?>><?php $imageLabel('images_resize', 'Resize'); ?></option>
                                            </select>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <strong><?php $imageLabel('images_default', 'Default'); ?></strong>
                                            <div class="text-muted small"><?php $imageLabel('images_default_desc', 'Product detail display image'); ?></div>
                                        </td>
                                        <td>
                                        <?php if (isset($image_options['o_default_width'])) { $opt = $image_options['o_default_width']; ?>
                                            <div class="input-group input-group-sm sc-image-size-field">
                                                <input type="text" name="value-<?php echo $opt['type']; ?>-<?php echo $opt['key']; ?>" class="form-control field-int" value="<?php echo pjSanitize::html($opt['value']); ?>">
                                                <span class="input-group-addon">px</span>
                                            </div>
                                        <?php } ?>
                                        </td>
                                        <td>
                                        <?php if (isset($image_options['o_default_height'])) { $opt = $image_options['o_default_height']; ?>
                                            <div class="input-group input-group-sm sc-image-size-field">
                                                <input type="text" name="value-<?php echo $opt['type']; ?>-<?php echo $opt['key']; ?>" class="form-control field-int" value="<?php echo pjSanitize::html($opt['value']); ?>">
                                                <span class="input-group-addon">px</span>
                                            </div>
                                        <?php } ?>
                                        </td>
                                        <td>
                                        <?php
                                        $crop_key = 'o_default_crop';
                                        $crop_opt = isset($image_processing_options[$crop_key]) ? $image_processing_options[$crop_key] : null;
                                        $crop_selected = 'resize'; // default for detail images
                                        if ($crop_opt) {
                                            $crop_parts = explode('::', $crop_opt['value']);
                                            $crop_selected = isset($crop_parts[1]) ? $crop_parts[1] : 'resize';
                                        }
                                        ?>
                                            <select name="value-enum-<?php echo $crop_key; ?>" class="form-control input-sm sc-image-processing-field">
                                                <option value="crop|resize::crop"<?php echo $crop_selected == 'crop' ? ' selected' : ''; ?>><?php $imageLabel('images_crop', 'Crop'); ?></option>
                                                <option value="crop|resize::resize"<?php echo $crop_selected == 'resize' ? ' selected' : ''; ?>><?php $imageLabel('images_resize', 'Resize'); ?></option>
                                            </select>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <strong><?php $imageLabel('images_large', 'Large'); ?></strong>
                                            <div class="text-muted small"><?php $imageLabel('images_large_desc', 'Lightbox and zoom image'); ?></div>
                                        </td>
                                        <td>
                                        <?php if (isset($image_options['o_large_width'])) { $opt = $image_options['o_large_width']; ?>
                                            <div class="input-group input-group-sm sc-image-size-field">
                                                <input type="text" name="value-<?php echo $opt['type']; ?>-<?php echo $opt['key']; ?>" class="form-control field-int" value="<?php echo pjSanitize::html($opt['value']); ?>">
                                                <span class="input-group-addon">px</span>
                                            </div>
                                        <?php } ?>
                                        </td>
                                        <td>
                                        <?php if (isset($image_options['o_large_height'])) { $opt = $image_options['o_large_height']; ?>
                                            <div class="input-group input-group-sm sc-image-size-field">
                                                <input type="text" name="value-<?php echo $opt['type']; ?>-<?php echo $opt['key']; ?>" class="form-control field-int" value="<?php echo pjSanitize::html($opt['value']); ?>">
                                                <span class="input-group-addon">px</span>
                                            </div>
                                        <?php } ?>
                                        </td>
                                        <td>
                                        <?php
                                        $crop_key = 'o_large_crop';
                                        $crop_opt = isset($image_processing_options[$crop_key]) ? $image_processing_options[$crop_key] : null;
                                        $crop_selected = 'resize'; // default for lightbox images
                                        if ($crop_opt) {
                                            $crop_parts = explode('::', $crop_opt['value']);
                                            $crop_selected = isset($crop_parts[1]) ? $crop_parts[1] : 'resize';
                                        }
                                        ?>
                                            <select name="value-enum-<?php echo $crop_key; ?>" class="form-control input-sm sc-image-processing-field">
                                                <option value="crop|resize::crop"<?php echo $crop_selected == 'crop' ? ' selected' : ''; ?>><?php $imageLabel('images_crop', 'Crop'); ?></option>
                                                <option value="crop|resize::resize"<?php echo $crop_selected == 'resize' ? ' selected' : ''; ?>><?php $imageLabel('images_resize', 'Resize'); ?></option>
                                            </select>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                        <hr style="margin: 20px 0;">

                        <div class="well well-sm sc-image-help">
                            <p class="m-b-xs"><strong><?php $imageLabel('images_crop', 'Crop'); ?>:</strong> <?php $imageLabel('images_crop_help', 'crops the image to exact dimensions for uniform thumbnails and grid images.'); ?></p>
                            <p class="m-b-none"><strong><?php $imageLabel('images_resize', 'Resize'); ?>:</strong> <?php $imageLabel('images_resize_help', 'scales the image proportionally for detail and zoom images.'); ?></p>
                        </div>

                        <div class="sc-image-regenerate">
                            <div>
                                <h5><i class="fa fa-refresh"></i> <?php $imageLabel('images_regenerate_title', 'Regenerate images'); ?></h5>
                                <p class="text-muted m-b-none"><?php $imageLabel('images_regenerate_desc', 'Rebuild generated gallery images from the original source files using the current Thumb, Medium and Large settings.'); ?></p>
                            </div>
                            <div class="sc-image-regenerate-actions">
                                <button type="button" class="btn btn-primary btnRegenerateImages" data-url="<?php echo $_SERVER['PHP_SELF']; ?>?controller=pjBaseOptions&amp;action=pjActionRegenerateImages">
                                    <i class="fa fa-refresh"></i> <?php $imageLabel('images_regenerate_button', 'Regenerate all images'); ?>
                                </button>
                                <div class="text-muted pj-regenerate-images-status" style="display:none;"></div>
                            </div>
                        </div>

                        <div class="hr-line-dashed"></div>
                        <?php
                        $overviewUrl = null;
                        include PJ_VIEWS_PATH . 'pjLayouts/elements/form-buttons.php';
                        ?>
                    </div>
                </div>
            </div>
        </div>
        <?php } ?>

    </form>

</div><!-- /.wrapper wrapper-content animated fadeInRight -->
