<?php
$gridLabel = function ($key, $fallback) {
	$value = __($key, true);
	echo htmlspecialchars(!empty($value) && $value !== $key ? $value : $fallback, ENT_QUOTES, 'UTF-8');
};
$gridLabelText = function ($key, $fallback) {
	$value = __($key, true);
	return !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-lg-12 col-md-12 col-sm-12">
                <h2><?php $gridLabel('menuProductDisplay', 'Product Display'); ?></h2>
            </div>
        </div>
        <p class="m-b-none"><i class="fa fa-info-circle"></i> <?php $gridLabel('product_display_desc', 'Configure how products are shown on the listing pages: columns, items per page, and pagination.'); ?></p>
    </div>
</div>

<div class="wrapper wrapper-content animated fadeInRight">
	<div class="row">
		<div class="col-lg-12" style="max-width: 1200px;">
	        <div class="ibox float-e-margins">
	            <div class="ibox-content">
	            	<?php
					$error_code = $controller->_get->toString('err');
					if (!empty($error_code))
				    {
				    	$titles = __('error_titles', true);
				    	$bodies = __('error_bodies', true);
				    	switch (true)
				    	{
				    		case in_array($error_code, array('AOP02')):
				    			?>
				    			<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;
				    	}
				    }
    				if (isset($tpl['arr']) && is_array($tpl['arr']) && !empty($tpl['arr']))
    				{
                    ?>
	                    <form action="<?php echo $_SERVER['PHP_SELF']; ?>?controller=pjAdminOptions&amp;action=pjActionUpdate" method="post" class="form-horizontal" id="frmUpdateGrid">
			<input type="hidden" name="csrf_token" value="<?php echo pjAppController::getCsrfToken(); ?>">
	                        <input type="hidden" name="options_update" value="1" />
	                        <input type="hidden" name="tab" value="2" />
	                        <input type="hidden" name="next_action" value="pjActionGrid" />
	                        <?php
	                        $options_by_key = array();
	                        foreach ($tpl['arr'] as $option) {
	                            $options_by_key[$option['key']] = $option;
	                        }
	                        ?>

	                        <!-- Grid Column Settings -->
	                        <div class="panel panel-default">
	                            <div class="panel-heading">
	                                <h3 class="panel-title"><i class="fa fa-th-large"></i> <?php $gridLabel('product_display_grid_columns', 'Grid Columns'); ?></h3>
	                            </div>
	                            <div class="panel-body">
	                                <p class="text-muted" style="margin-bottom: 20px;">
	                                    <?php $gridLabel('product_display_grid_columns_desc', 'Set how many products are shown side by side for different screen sizes.'); ?>
	                                </p>

	                                <?php
	                                $grid_options = array(
	                                    'o_grid_cols_desktop' => array('label' => $gridLabelText('product_display_device_desktop', 'Desktop (1200px+)'), 'icon' => 'fa-desktop'),
	                                    'o_grid_cols_laptop' => array('label' => $gridLabelText('product_display_device_laptop', 'Laptop (992px - 1199px)'), 'icon' => 'fa-laptop'),
	                                    'o_grid_cols_tablet' => array('label' => $gridLabelText('product_display_device_tablet', 'Tablet (768px - 991px)'), 'icon' => 'fa-tablet'),
	                                    'o_grid_cols_mobile' => array('label' => $gridLabelText('product_display_device_mobile', 'Mobile (<768px)'), 'icon' => 'fa-mobile')
	                                );

	                                foreach ($grid_options as $key => $grid_info) {
	                                    if (isset($options_by_key[$key])) {
	                                        $option = $options_by_key[$key];
	                                        $default = explode("::", $option['value']);
	                                        $enum = explode("|", $default[0]);
	                                        $selected = isset($default[1]) ? $default[1] : $enum[0];
	                                        $labels = isset($option['label']) ? explode("|", $option['label']) : $enum;
	                                ?>
	                                <div class="form-group">
	                                    <label class="col-sm-3 control-label">
	                                        <i class="fa <?php echo $grid_info['icon']; ?>"></i>
	                                        <?php echo $grid_info['label']; ?>
	                                    </label>
	                                    <div class="col-lg-8 col-sm-9">
	                                        <div class="row">
	                                            <div class="col-sm-6">
	                                                <select name="value-enum-<?php echo $option['key']; ?>" class="form-control">
	                                                    <?php
	                                                    foreach ($enum as $k => $val) {
	                                                        $label = isset($labels[$k]) ? $labels[$k] : sprintf($gridLabelText($val > 1 ? 'product_display_columns_plural' : 'product_display_columns_singular', $val > 1 ? '%s columns' : '%s column'), $val);
	                                                        // Overwrite Dutch labels if they are hardcoded in the DB
	                                                        if (strpos($label, 'kolom') !== false) {
	                                                            $label = sprintf($gridLabelText($val > 1 ? 'product_display_columns_plural' : 'product_display_columns_singular', $val > 1 ? '%s columns' : '%s column'), $val);
	                                                        }
	                                                        $sel = ($val == $selected) ? 'selected="selected"' : '';
	                                                        echo '<option value="' . implode("|", $enum) . '::' . $val . '" ' . $sel . '>' . $label . '</option>';
	                                                    }
	                                                    ?>
	                                                </select>
	                                            </div>
	                                        </div>
	                                    </div>
	                                </div>
	                                <?php
	                                    }
	                                }
	                                ?>
	                            </div>
	                        </div>

	                        <!-- Grid Columns — Product recommendations carousel -->
	                        <!-- <div class="panel panel-default">
	                            <div class="panel-heading">
	                                <h3 class="panel-title"><i class="fa fa-star"></i> Grid Columns — Product Recommendations</h3>
	                            </div>
	                            <div class="panel-body">
	                                <p class="text-muted" style="margin-bottom: 20px;">
	                                    Number of cards side by side in the "You might also like" block on the cart page. You can configure the total number of items shown in <a href="<?php echo $_SERVER['PHP_SELF']; ?>?controller=pjAdminOptions&amp;action=pjActionBooking#bk-recommendations">Options &gt; General &gt; Product Recommendations</a>.
	                                </p> -->

	                                <!-- Popup carousel: number of items visible at once -->
	                                <!-- <?php
	                                if (isset($options_by_key['o_cart_recs_popup_visible'])) {
	                                    $opt_visible = $options_by_key['o_cart_recs_popup_visible'];
	                                    $visible_val = isset($opt_visible['value']) ? (int)$opt_visible['value'] : 3;
	                                ?>
	                                <div class="form-group">
	                                    <label class="col-sm-3 control-label">
	                                        <i class="fa fa-window-restore"></i>
	                                        Visible at once in popup
	                                    </label>
	                                    <div class="col-lg-8 col-sm-9">
	                                        <div class="row">
	                                            <div class="col-sm-4">
	                                                <input type="number" name="value-int-o_cart_recs_popup_visible" class="form-control field-int" value="<?php echo $visible_val; ?>" min="1" max="8" />
	                                                <p class="help-block" style="margin-top:6px;font-size:12px;color:#888;">Number of cards side by side in the "Added to cart" popup. Arrows scroll per page (=this number).</p>
	                                            </div>
	                                        </div>
	                                    </div>
	                                </div>
	                                <?php } ?>

	                                <?php
	                                $cart_recs_grid_options = array(
	                                    'o_cart_recs_cols_desktop' => array('label' => 'Desktop (1200px+)', 'icon' => 'fa-desktop'),
	                                    'o_cart_recs_cols_laptop'  => array('label' => 'Laptop (992px - 1199px)', 'icon' => 'fa-laptop'),
	                                    'o_cart_recs_cols_tablet'  => array('label' => 'Tablet (768px - 991px)', 'icon' => 'fa-tablet'),
	                                    'o_cart_recs_cols_mobile'  => array('label' => 'Mobile (<768px)', 'icon' => 'fa-mobile')
	                                );
	                                foreach ($cart_recs_grid_options as $key => $grid_info) {
	                                    if (isset($options_by_key[$key])) {
	                                        $option = $options_by_key[$key];
	                                        $default = explode("::", $option['value']);
	                                        $enum = explode("|", $default[0]);
	                                        $selected = isset($default[1]) ? $default[1] : $enum[0];
	                                        $labels = isset($option['label']) ? explode("|", $option['label']) : $enum;
	                                ?>
	                                <div class="form-group">
	                                    <label class="col-sm-3 control-label">
	                                        <i class="fa <?php echo $grid_info['icon']; ?>"></i>
	                                        <?php echo $grid_info['label']; ?>
	                                    </label>
	                                    <div class="col-lg-8 col-sm-9">
	                                        <div class="row">
	                                            <div class="col-sm-6">
	                                                <select name="value-enum-<?php echo $option['key']; ?>" class="form-control">
	                                                    <?php
	                                                    foreach ($enum as $k => $val) {
	                                                        $label = isset($labels[$k]) ? $labels[$k] : $val . ' column' . ($val > 1 ? 's' : '');
	                                                        if (strpos($label, 'kolom') !== false) {
	                                                            $label = $val . ' column' . ($val > 1 ? 's' : '');
	                                                        }
	                                                        $sel = ($val == $selected) ? 'selected="selected"' : '';
	                                                        echo '<option value="' . implode("|", $enum) . '::' . $val . '" ' . $sel . '>' . $label . '</option>';
	                                                    }
	                                                    ?>
	                                                </select>
	                                            </div>
	                                        </div>
	                                    </div>
	                                </div>
	                                <?php
	                                    }
	                                }
	                                ?>
	                            </div> -->
	                        <!-- </div> -->

	                        <!-- Producten per pagina (per apparaat) -->
	                        <div class="panel panel-default">
	                            <div class="panel-heading">
	                                <h3 class="panel-title"><i class="fa fa-list-ol"></i> <?php $gridLabel('product_display_products_per_page', 'Products per page (initial load)'); ?></h3>
	                            </div>
	                            <div class="panel-body">
	                                <p class="text-muted" style="margin-bottom: 20px;">
	                                    <?php $gridLabel('product_display_products_per_page_desc', 'How many products are shown on the first visit to the listing page, per screen size.'); ?>
	                                </p>
	                                <?php
	                                $ppp_options = array(
	                                    'o_products_per_page_desktop' => array('label' => $gridLabelText('product_display_device_desktop', 'Desktop (1200px+)'), 'icon' => 'fa-desktop', 'default' => 12),
	                                    'o_products_per_page_laptop' => array('label' => $gridLabelText('product_display_device_laptop', 'Laptop (992px - 1199px)'), 'icon' => 'fa-laptop', 'default' => 12),
	                                    'o_products_per_page_tablet' => array('label' => $gridLabelText('product_display_device_tablet', 'Tablet (768px - 991px)'), 'icon' => 'fa-tablet', 'default' => 9),
	                                    'o_products_per_page_mobile' => array('label' => $gridLabelText('product_display_device_mobile', 'Mobile (<768px)'), 'icon' => 'fa-mobile', 'default' => 6)
	                                );
	                                foreach ($ppp_options as $key => $info) {
	                                    if (isset($options_by_key[$key])) {
	                                        $option = $options_by_key[$key];
	                                        $currentVal = isset($option['value']) ? (int)$option['value'] : $info['default'];
	                                ?>
	                                <div class="form-group">
	                                    <label class="col-sm-3 control-label">
	                                        <i class="fa <?php echo $info['icon']; ?>"></i>
	                                        <?php echo $info['label']; ?>
	                                    </label>
	                                    <div class="col-lg-8 col-sm-9">
	                                        <div class="row">
	                                            <div class="col-sm-4">
	                                                <input type="number" name="value-int-<?php echo $option['key']; ?>" class="form-control" value="<?php echo $currentVal; ?>" min="1" max="100" />
	                                            </div>
	                                        </div>
	                                    </div>
	                                </div>
	                                <?php
	                                    }
	                                }
	                                ?>
	                            </div>
	                        </div>

	                        <!-- Bijladen per keer (per apparaat) -->
	                        <div class="panel panel-default" id="panelAutoloadBatch">
	                            <div class="panel-heading">
	                                <h3 class="panel-title"><i class="fa fa-plus-circle"></i> <?php $gridLabel('product_display_load_per_batch', 'Load per batch'); ?></h3>
	                            </div>
	                            <div class="panel-body">
	                                <p class="text-muted" style="margin-bottom: 20px;">
	                                    <?php $gridLabel('product_display_load_per_batch_desc', 'How many products are loaded when auto-loading (scrolling), per screen size. Only applies to pagination mode "Auto load".'); ?>
	                                </p>
	                                <?php
	                                $batch_options = array(
	                                    'o_autoload_batch_desktop' => array('label' => $gridLabelText('product_display_device_desktop', 'Desktop (1200px+)'), 'icon' => 'fa-desktop', 'default' => 12),
	                                    'o_autoload_batch_laptop' => array('label' => $gridLabelText('product_display_device_laptop', 'Laptop (992px - 1199px)'), 'icon' => 'fa-laptop', 'default' => 12),
	                                    'o_autoload_batch_tablet' => array('label' => $gridLabelText('product_display_device_tablet', 'Tablet (768px - 991px)'), 'icon' => 'fa-tablet', 'default' => 9),
	                                    'o_autoload_batch_mobile' => array('label' => $gridLabelText('product_display_device_mobile', 'Mobile (<768px)'), 'icon' => 'fa-mobile', 'default' => 6)
	                                );
	                                foreach ($batch_options as $key => $info) {
	                                    if (isset($options_by_key[$key])) {
	                                        $option = $options_by_key[$key];
	                                        $currentVal = isset($option['value']) ? (int)$option['value'] : $info['default'];
	                                ?>
	                                <div class="form-group">
	                                    <label class="col-sm-3 control-label">
	                                        <i class="fa <?php echo $info['icon']; ?>"></i>
	                                        <?php echo $info['label']; ?>
	                                    </label>
	                                    <div class="col-lg-8 col-sm-9">
	                                        <div class="row">
	                                            <div class="col-sm-4">
	                                                <input type="number" name="value-int-<?php echo $option['key']; ?>" class="form-control" value="<?php echo $currentVal; ?>" min="1" max="100" />
	                                            </div>
	                                        </div>
	                                    </div>
	                                </div>
	                                <?php
	                                    }
	                                }
	                                ?>
	                            </div>
	                        </div>

	                        <!-- Aantal selector op listing -->
	                        <!-- <div class="panel panel-default">
	                            <div class="panel-heading">
	                                <h3 class="panel-title"><i class="fa fa-sort-numeric-asc"></i> Quantity selector</h3>
	                            </div>
	                            <div class="panel-body">
	                                <p class="text-muted" style="margin-bottom: 20px;">
	                                    Show a plus/minus selector on the product cards so customers can directly add multiple quantities. Only visible for simple products (without attributes or extras).
	                                </p>
	                                <?php
	                                if (isset($options_by_key['o_show_qty_listing'])) {
	                                    $option = $options_by_key['o_show_qty_listing'];
	                                    $default = explode("::", $option['value']);
	                                    $selected = isset($default[1]) ? $default[1] : 'No';
	                                ?>
	                                <div class="form-group">
	                                    <label class="col-sm-3 control-label">
	                                        <?php $lbl = __('opt_o_show_qty_listing', true); echo !empty($lbl) ? $lbl : 'Quantity selector on listing'; ?>
	                                    </label>
	                                    <div class="col-lg-8 col-sm-9">
	                                        <div class="switch">
	                                            <div class="onoffswitch">
	                                                <input type="hidden" name="value-enum-o_show_qty_listing" value="Yes|No::<?php echo $selected; ?>" id="o_show_qty_listing_hidden" />
	                                                <input type="checkbox" class="onoffswitch-checkbox" id="o_show_qty_listing_switch" <?php echo $selected === 'Yes' ? 'checked' : ''; ?> />
	                                                <label class="onoffswitch-label" for="o_show_qty_listing_switch">
	                                                    <span class="onoffswitch-inner"></span>
	                                                    <span class="onoffswitch-switch"></span>
	                                                </label>
	                                            </div>
	                                        </div>
	                                        <span class="help-block" style="margin-bottom:0">For products with attributes or extras, only "View details" is shown.</span>
	                                    </div>
	                                </div>
	                                <?php } ?>
	                            </div>
	                        </div> -->

	                        <!-- Paginatiemodus -->
	                        <div class="panel panel-default">
	                            <div class="panel-heading">
	                                <h3 class="panel-title"><i class="fa fa-arrows-v"></i> <?php $gridLabel('product_display_pagination_mode', 'Pagination Mode'); ?></h3>
	                            </div>
	                            <div class="panel-body">
	                                <p class="text-muted" style="margin-bottom: 20px;">
	                                    <?php $gridLabel('product_display_pagination_mode_desc', 'Choose how the next products are loaded: traditional pagination (page 1, 2, 3...) or auto-loading when scrolling.'); ?>
	                                </p>
	                                <?php
	                                foreach ($tpl['arr'] as $option) {
	                                    if ($option['key'] === 'o_pagination_mode') {
	                                        $default = explode("::", $option['value']);
	                                        $enum = explode("|", $default[0]);
	                                        $selected = isset($default[1]) ? $default[1] : $enum[0];
	                                        $labels = isset($option['label']) ? explode("|", $option['label']) : $enum;
	                                ?>
	                                <div class="form-group">
	                                    <label class="col-sm-3 control-label">
	                                        <?php $lbl = __('opt_o_pagination_mode', true); echo !empty($lbl) ? $lbl : 'Pagination Mode'; ?>
	                                    </label>
	                                    <div class="col-lg-8 col-sm-9">
	                                        <div class="row">
	                                            <div class="col-sm-6">
	                                                <select name="value-enum-o_pagination_mode" class="form-control">
	                                                    <?php
	                                                    foreach ($enum as $k => $val) {
	                                                        $lbl = isset($labels[$k]) ? $labels[$k] : $val;
	                                                        if (strpos($lbl, 'Paginatie') !== false) {
	                                                            $lbl = $gridLabelText('product_display_pagination', 'Pagination');
	                                                        } else if (strpos($lbl, 'Auto laden') !== false) {
	                                                            $lbl = $gridLabelText('product_display_auto_load', 'Auto load');
	                                                        }
	                                                        $sel = ($val == $selected) ? 'selected="selected"' : '';
	                                                        echo '<option value="' . implode("|", $enum) . '::' . $val . '" ' . $sel . '>' . htmlspecialchars($lbl) . '</option>';
	                                                    }
	                                                    ?>
	                                                </select>
	                                            </div>
	                                        </div>
	                                        <span class="help-block" style="margin-bottom:0"><?php echo $gridLabelText('product_display_pagination_help', '<strong>Pagination:</strong> traditional page numbers at the bottom. <strong>Auto load:</strong> products load automatically when scrolling.'); ?></span>
	                                    </div>
	                                </div>
	                                <?php
	                                        break;
	                                    }
	                                }
	                                ?>
	                            </div>
	                        </div>

	                        <div class="hr-line-dashed"></div>

	                        <?php
	                        $overviewUrl = null;
	                        include PJ_VIEWS_PATH . 'pjLayouts/elements/form-buttons.php';
	                        ?>
	                    </form>
	                    <?php
	                }
	                ?>
	            </div>
	        </div>
	    </div>
	</div>
</div>
<script type="text/javascript">
jQuery(function($) {
	// Show/hide "Load per batch" panel based on pagination mode
	var $select = $('select[name="value-enum-o_pagination_mode"]');
	var $batchPanel = $('#panelAutoloadBatch');

	function toggleBatchPanel() {
		var val = $select.val();
		// The value contains "pagination|autoload::autoload" — extract the selected value after ::
		var selected = val.indexOf('::') > -1 ? val.split('::')[1] : val;
		if (selected === 'autoload') {
			$batchPanel.slideDown(200);
		} else {
			$batchPanel.slideUp(200);
		}
	}

	toggleBatchPanel();
	$select.on('change', toggleBatchPanel);

	// Qty listing switch
	$('#o_show_qty_listing_switch').on('change', function() {
		var val = $(this).is(':checked') ? 'Yes' : 'No';
		$('#o_show_qty_listing_hidden').val('Yes|No::' + val);
	});
});
</script>
