@php
    $defaultType = $defaultType ?? 'color';
    $defaultColor = $defaultColor ?? '#ffffff';
    $currentType = $home[$prefix . '_bg_type'] ?? $defaultType;
    $currentColor = $home[$prefix . '_bg_color'] ?? $defaultColor;
    $currentImage = $home[$prefix . '_bg_image'] ?? '';
    $imgSrc = !empty($currentImage) ? asset($currentImage) : '';
@endphp

<div class="bg-options-box">
    <div class="form-section-title">
        <span><i class="voyager-paint-bucket"></i> Background Styling</span>
        @if(!empty($breadLink))
            <a href="{{ $breadLink }}" target="_blank" class="section-bread-link">
                <i class="voyager-external"></i> {{ $breadLabel ?? 'Manage' }}
            </a>
        @endif
    </div>

    <!-- Dropdown: Color or Image -->
    <div class="form-group" style="margin-bottom: 14px;">
        <label><i class="voyager-brush"></i> Background Type</label>
        <select class="form-control bg-type-select" name="values[{{ $prefix }}_bg_type]" data-target="{{ $prefix }}">
            <option value="color" {{ $currentType === 'color' ? 'selected' : '' }}>Solid Color</option>
            <option value="image" {{ $currentType === 'image' ? 'selected' : '' }}>Background Image</option>
        </select>
    </div>

    <!-- Group 1: Color Option (Only shown if color is selected) -->
    <div class="bg-group-color bg-group-{{ $prefix }}-color" style="{{ $currentType === 'color' ? '' : 'display: none;' }}">
        <div class="form-group">
            <label>Background Color</label>
            <div class="input-group">
                <span class="input-group-addon" style="padding: 2px 6px;">
                    <input type="color" 
                           id="picker_{{ $prefix }}_bg_color"
                           value="{{ $currentColor }}" 
                           oninput="document.getElementById('input_{{ $prefix }}_bg_color').value = this.value; document.getElementById('swatch_{{ $prefix }}').style.backgroundColor = this.value;" 
                           style="border: none; width: 28px; height: 28px; cursor: pointer;">
                </span>
                <input type="text" 
                       class="form-control" 
                       id="input_{{ $prefix }}_bg_color" 
                       name="values[{{ $prefix }}_bg_color]" 
                       value="{{ $currentColor }}"
                       placeholder="#ffffff"
                       oninput="document.getElementById('picker_{{ $prefix }}_bg_color').value = this.value; document.getElementById('swatch_{{ $prefix }}').style.backgroundColor = this.value;">
            </div>
            <div class="color-preview-bar" id="swatch_{{ $prefix }}" style="background-color: {{ $currentColor }};"></div>
            <small class="help-text">Click the swatch to open the color picker or enter a HEX code.</small>
        </div>
    </div>

    <!-- Group 2: Image Option (Only shown if image is selected) -->
    <div class="bg-group-image bg-group-{{ $prefix }}-image" style="{{ $currentType === 'image' ? '' : 'display: none;' }}">
        <div class="form-group">
            <label>Upload Background Image</label>
            <input type="file" 
                   class="form-control bg-file-input" 
                   name="{{ $prefix }}_bg_image_file" 
                   accept="image/*" 
                   data-preview="#preview_img_{{ $prefix }}" 
                   data-path="#path_input_{{ $prefix }}"
                   data-placeholder="#no_img_{{ $prefix }}">
            <small class="help-text">Select an image to preview instantly and upload upon saving.</small>
        </div>

        <!-- Image Preview Card -->
        <div class="form-group" style="margin-top: 10px;">
            <label>Image Preview</label>
            <div class="bg-preview-wrapper" id="preview_wrap_{{ $prefix }}">
                <img id="preview_img_{{ $prefix }}" 
                     src="{{ $imgSrc }}" 
                     alt="Background Preview" 
                     class="bg-preview-thumbnail" 
                     style="{{ empty($imgSrc) ? 'display: none;' : '' }}">
                <div id="no_img_{{ $prefix }}" class="text-muted bg-preview-placeholder" style="{{ !empty($imgSrc) ? 'display: none;' : '' }}">
                    <i class="voyager-photo" style="font-size: 26px; display: block; margin-bottom: 4px; color: #94a3b8;"></i>
                    <span>No image uploaded yet</span>
                </div>
            </div>
        </div>

        <!-- Readonly Path Field -->
        <div class="form-group">
            <label>Current Image Path <span class="text-muted" style="font-size: 11px; text-transform: none;">(Read-only)</span></label>
            <div class="input-group">
                <span class="input-group-addon"><i class="voyager-link"></i></span>
                <input type="text" 
                       class="form-control readonly-path-input" 
                       id="path_input_{{ $prefix }}" 
                       name="values[{{ $prefix }}_bg_image]" 
                       value="{{ $currentImage }}" 
                       readonly>
            </div>
            <small class="help-text">Path is automatically updated on file upload.</small>
        </div>
    </div>
</div>