@php /* Example panels definition. Edit this array directly in the blade as you want. - id: panel id (used in names like background_color{ id }) - label: shown title for panel - type: 'images' or 'picker-only' - options: for type 'images' => array of ['value'=>..., 'src'=>..., 'isCustom'=>bool] use 'isCustom'=>true for the final tile that opens the color picker - pickers: array up to 3: each ['name'=> 'input_name', 'label'=>'Label', 'default'=>'#hex'] - selected: preselected option value (int or 'custom') for edit - pickerValues: array of values for pickers in same order as pickers (optional) */ $id = 'buttonStyleSelector'; // change if you need multiple on page $commonBg=[ ['value' => 0, 'src' => asset('assets/images/home/common_bg/bg_1.png')], ['value' => 1, 'src' => asset('assets/images/home/common_bg/bg_2.png')], ['value' => 2, 'src' => asset('assets/images/home/common_bg/bg_3.png')], ['value' => 3, 'src' => asset('assets/images/home/common_bg/bg_4.png')], ['value' => 4, 'src' => asset('assets/images/home/common_bg/bg_5.png')], ['value' => 5, 'src' => asset('assets/images/home/common_bg/bg_6.png')], ['value' => 6, 'src' => asset('assets/images/home/common_bg/bg_7.png')], ['value' => 7, 'src' => asset('assets/images/home/common_bg/bg_8.png')], ['value' => 8, 'src' => asset('assets/images/home/common_bg/bg_9.png')], ['value' => 9, 'src' => asset('assets/images/home/common_bg/bg_10.png')], ['value' => 10, 'src' => asset('assets/images/home/common_bg/bg_11.png')], ['value' => 11, 'src' => asset('assets/images/home/common_bg/bg_12.png')], ['value' => 12, 'src' => asset('assets/images/home/common_bg/bg_13.png')], ['value' => 13, 'src' => asset('assets/images/home/common_bg/bg_14.png')], ['value' => 14, 'src' => asset('assets/images/home/common_bg/bg_15.png')], ['value' => 15, 'src' => asset('assets/images/home/common_bg/bg_16.png')], ['value' => 16, 'src' => asset('assets/images/home/common_bg/bg_17.png')], ['value' => 17, 'src' => asset('assets/images/home/common_bg/bg_18.png')], ['value' => 18, 'src' => asset('assets/images/home/common_bg/bg_19.png')], ['value' => 19, 'src' => asset('assets/images/home/common_bg/bg_20.png')], ['value' => 20, 'src' => asset('assets/images/home/common_bg/bg_21.png')], ['value' => 21, 'src' => asset('assets/images/home/common_bg/bg_22.png')], ['value' => 99, 'src' => asset('assets/images/home/common_bg/bg_custom.png'), 'isCustom' => true], ]; $panels = [ [ 'id' => 0, //1 'label' => 'Select Button Background', 'type' => 'images', 'namePrefix' => 'background_color', // will become background_color0 group 'options' => [ ['value' => 0, 'src' => asset('assets/images/home/style_0/style_1.png')], ['value' => 1, 'src' => asset('assets/images/home/style_0/style_2.png')], ['value' => 2, 'src' => asset('assets/images/home/style_0/style_3.png')], ['value' => 3, 'src' => asset('assets/images/home/style_0/style_4.png')], ['value' => 4, 'src' => asset('assets/images/home/style_0/style_5.png')], ['value' => 5, 'src' => asset('assets/images/home/style_0/style_6.png')], ['value' => 99, 'src' => asset('assets/images/home/style_0/style_7.png'), 'isCustom' => true], ], 'pickers' => [ ['name' => 'background_color_code0', 'label' => 'Card Background', 'default' => '#FFA9A9'], ['name' => 'btnbackground_color0', 'label' => 'Bottom Color', 'default' => '#FFFFFF'], ['name' => 'text_color0', 'label' => 'Title Text Color', 'default' => '#000000'], ['name' => 'btn_text_color0', 'label' => 'Bottom Subtitle Text Color', 'default' => '#ffff'], ], 'selected' => old('background_color0', $data->btn_background ?? null), // edit example 'pickerValues' => [ old('background_color_code0', $data->background_color ?? null), old('btnbackground_color0', $data->btn_color ?? null), old('text_color0', $data->text_color ?? null), old('btn_text_color0', $data->btn_text_color ?? null), ], ], [ 'id' => 1, //2 'label' => 'Select Button Background', 'type' => 'images', 'namePrefix' => 'background_color', // will become background_color0 group 'options' => $commonBg, 'pickers' => [ ['name' => 'background_color_code1', 'label' => 'Card Background', 'default' => '#FFA9A9'], ['name' => 'text_color1', 'label' => 'Text Color', 'default' => '#000000'], ], 'selected' => old('background_color1', $data->btn_background ?? null), // edit example 'pickerValues' => [ old('background_color_code1', $data->background_color ?? null), old('text_color1', $data->text_color ?? null), ], ], [ 'id' => 2, //3 'label' => 'Select Button Background', 'type' => 'images', 'namePrefix' => 'background_color', // will become background_color0 group 'options' =>$commonBg, 'pickers' => [ ['name' => 'background_color_code2', 'label' => 'Card Background', 'default' => '#FFA9A9'], ['name' => 'text_color2', 'label' => 'Text Color', 'default' => '#000000'], ], 'selected' => old('background_color2', $data->btn_background ?? null), // edit example 'pickerValues' => [ old('background_color_code2', $data->background_color ?? null), old('text_color2', $data->text_color ?? null), ], ], [ 'id' => 3, //4 'label' => 'Select Text Color', 'type' => 'picker-only', 'namePrefix' => 'background_color', // will become background_color0 group 'options' => [], 'pickers' => [ ['name' => 'text_color3', 'label' => 'Text Color', 'default' => '#000000'], ], 'selected' => null, // edit example 'pickerValues' => [ old('text_color3', $data->text_color ?? null), ], ],[ 'id' => 4, //5 'label' => 'Select Text Color', 'type' => 'picker-only', 'namePrefix' => 'background_color', // will become background_color0 group 'options' => [], 'pickers' => [ ['name' => 'text_color4', 'label' => 'Text Color', 'default' => '#000000'], ], 'selected' => null, // edit example 'pickerValues' => [ old('text_color4', $data->text_color ?? null), ], ],[ 'id' => 5, //6 'label' => 'Select Text Color', 'type' => 'picker-only', 'namePrefix' => 'background_color', // will become background_color0 group 'options' => [], 'pickers' => [ ['name' => 'background_color_code5', 'label' => 'Card Background', 'default' => '#FFA9A9'], ['name' => 'text_color5', 'label' => 'Text Color', 'default' => '#000000'], ], 'selected' => null, // edit example 'pickerValues' => [ old('background_color_code5', $data->background_color ?? null), old('text_color5', $data->text_color ?? null), ], ],[ 'id' => 6, //7 'label' => 'Select Text Color', 'type' => 'picker-only', 'namePrefix' => 'background_color', // will become background_color0 group 'options' => [], 'pickers' => [ ['name' => 'background_color_code6', 'label' => 'Card Background', 'default' => '#FFA9A9'], ['name' => 'text_color6', 'label' => 'Text Color', 'default' => '#000000'], ], 'selected' => null, // edit example 'pickerValues' => [ old('background_color_code6', $data->background_color ?? null), old('text_color6', $data->text_color ?? null), ], ],[ 'id' => 7, //8 'label' => 'Select Text Color', 'type' => 'images', 'namePrefix' => 'background_color', // will become background_color0 group 'options' => $commonBg, 'pickers' => [ ['name' => 'background_color_code7', 'label' => 'Card Background', 'default' => '#FFA9A9'], ['name' => 'text_color7', 'label' => 'Text Color', 'default' => '#000000'], ], 'selected' => old('background_color7', $data->btn_background ?? null), 'pickerValues' => [ old('background_color_code7', $data->background_color ?? null), old('text_color7', $data->text_color ?? null), ], ],[ 'id' => 8, //9 'label' => 'Select Button Background', 'type' => 'images', 'namePrefix' => 'background_color', // will become background_color0 group 'options' =>$commonBg, 'pickers' => [ ['name' => 'background_color_code8', 'label' => 'Card Background', 'default' => '#FFA9A9'], ['name' => 'text_color8', 'label' => 'Content Text Color', 'default' => '#000000'], ], 'selected' => old('background_color8', $data->btn_background ?? null), // edit example 'pickerValues' => [ old('background_color_code8', $data->background_color ?? null), old('text_color8', $data->text_color ?? null), ], ] ,[ 'id' => 9,//10 'label' => 'Select Button Background', 'type' => 'images', 'namePrefix' => 'background_color', // will become background_color0 group 'options' =>$commonBg, 'pickers' => [ ['name' => 'background_color_code9', 'label' => 'Card Background', 'default' => '#FFA9A9'], ['name' => 'text_color9', 'label' => 'Content Text Color', 'default' => '#000000'], ], 'selected' => old('background_color9', $data->btn_background ?? null), // edit example 'pickerValues' => [ old('background_color_code9', $data->background_color ?? null), old('text_color9', $data->text_color ?? null), ], ],[ 'id' => 10,//11 'label' => 'Select Button Background', 'type' => 'images', 'namePrefix' => 'background_color', // will become background_color0 group 'options' => $commonBg, 'pickers' => [ ['name' => 'background_color_code10', 'label' => 'Card Background', 'default' => '#FFA9A9'], ['name' => 'btnbackground_color10', 'label' => 'Button Background Color', 'default' => '#FFFFFF'], ['name' => 'text_color10', 'label' => 'Content Text Color', 'default' => '#000000'], ['name' => 'btn_text_color10', 'label' => 'Button Text Color', 'default' => '#ffff'], ], 'selected' => old('background_color10', $data->btn_background ?? null), // edit example 'pickerValues' => [ old('background_color_code10', $data->background_color ?? null), old('btnbackground_color10', $data->btn_color ?? null), old('text_color10', $data->text_color ?? null), old('btn_text_color10', $data->btn_text_color ?? null), ], ],[ 'id' => 11,//12 'label' => 'Select Button Background', 'type' => 'images', 'namePrefix' => 'background_color', // will become background_color0 group 'options' => $commonBg, 'pickers' => [ ['name' => 'background_color_code11', 'label' => 'Card Background', 'default' => '#FFA9A9'], ['name' => 'btnbackground_color11', 'label' => 'Button Background Color', 'default' => '#FFFFFF'], ['name' => 'text_color11', 'label' => 'Content Text Color', 'default' => '#000000'], ['name' => 'btn_text_color11', 'label' => 'Button Text Color', 'default' => '#ffff'], ], 'selected' => old('background_color11', $data->btn_background ?? null), // edit example 'pickerValues' => [ old('background_color_code11', $data->background_color ?? null), old('btnbackground_color11', $data->btn_color ?? null), old('text_color11', $data->text_color ?? null), old('btn_text_color11', $data->btn_text_color ?? null), ], ], // [ // 'id' => 1, // 'label' => 'Card-only Colors', // 'type' => 'picker-only', // 'namePrefix' => 'background_color', // 'options' => [], // 'pickers' => [ // ['name' => 'background_color_code1', 'label' => 'Card Background', 'default' => '#FFFFFF'] // ], // 'selected' => old('background_color1', $category->background_color1 ?? null), // 'pickerValues' => [ old('background_color_code1', $category->background_color_code1 ?? null) ] // ], // [ // 'id' => 2, // 'label' => 'Card Backgrounds', // 'type' => 'images', // 'namePrefix' => 'background_color', // 'options' => array_map(function($n){ // return ['value'=>$n, 'src'=> asset("assets/images/home/bg" . ($n+1) . ".png")]; // }, range(0, 11)), // // make last option custom // 'options' => array_merge(array_slice(array_map(function($n){return ['value'=>$n,'src'=>asset("assets/images/home/bg".($n+1).".png")];}, range(0,10)),0), [['value'=>11,'src'=>asset('assets/images/home/bg12.png'),'isCustom'=>true]]), // 'pickers' => [ // ['name' => 'background_color_code2', 'label' => 'Card Background', 'default' => '#EFEFEF'] // ], // 'selected' => old('background_color2', $category->background_color2 ?? null), // 'pickerValues' => [ old('background_color_code2', $category->background_color_code2 ?? null) ] // ], ]; @endphp
{{-- Loop panels --}} @foreach($panels as $panel) @php $pid = $panel['id']; $groupName = ($panel['namePrefix'] ?? 'background_color') . $pid; $panelSelected = (string)($panel['selected'] ?? ''); $pickers = $panel['pickers'] ?? []; @endphp
{{ $panel['label'] }}
{{-- Images (if any) --}} @if($panel['type'] === 'images' && !empty($panel['options']))
@foreach($panel['options'] as $opt) @php $optValue = $opt['value']; $isCustom = !empty($opt['isCustom']); $inputId = "{$id}_p{$pid}_opt{$optValue}"; @endphp
@if($isCustom)
Custom
@endif
@endforeach
@endif {{-- Pickers (shown only when custom selected OR type==picker-only) --}} @php // prepare picker current values (from panel.pickerValues, falling back to defaults) $pickerValues = $panel['pickerValues'] ?? []; @endphp
@foreach($pickers as $idx => $p) @php $pname = $p['name']; $plabel = $p['label'] ?? $pname; $pdefault = $p['default'] ?? '#FFA9A9'; $pvalue = $pickerValues[$idx] ?? old($pname, $pdefault); @endphp
{{ $plabel }}
@endforeach
@endforeach
{{-- Make sure your category select exists with id="cat" and each option has data-value="{{ $item->cat_theme }}" --}} {{-- Example:
Category A
...
--}}