@php
    // If $bundles is set, loop through each bundle and render the UI for each
    $bundleList = isset($bundles) && is_array($bundles) && count($bundles) > 0 ? $bundles : [null];
    $isGuest = !auth()->check();
    $readonly = $isGuest ? 'readonly' : null;
    $disabled = $isGuest ? 'disabled' : null;
@endphp

@foreach ($bundleList as $bundleIdx => $bundleData)
    @php
        // Use bundle data if available, else fallback to default
        $devicesData = $bundleData['devices'] ?? ($devices ?? []);
        // For backward compatibility, if $selectedDevices is set, use it
        $selectedDevices = [];
        if (isset($bundleData['devices'])) {
            foreach ($bundleData['devices'] as $dIdx => $d) {
                $selectedDevices[$dIdx] = [
                    'option' => $d['master_device_id'] ?? '',
                    'price' => $d['price'] ?? '',
                ];
            }
        } elseif (isset($selectedDevices)) {
            $selectedDevices = $selectedDevices;
        }
    @endphp
    <div class="card free-pos-bundle-item mb-2" data-bundle-idx="{{ $bundleIdx }}">
        <div class="card-header p-2" id="posBundleHeading{{ $bundleIdx }}">
            <h6 class="mb-0">
                <a class="text-dark d-block pos-bundle-toggle" data-toggle="collapse"
                    href="#posBundleCollapse{{ $bundleIdx }}" aria-expanded="true"
                    aria-controls="posBundleCollapse{{ $bundleIdx }}">
                    POS Bundle #{{ $bundleIdx + 1 }}
                </a>
            </h6>
        </div>
        <div id="posBundleCollapse{{ $bundleIdx }}" class="collapse show"
            aria-labelledby="posBundleHeading{{ $bundleIdx }}" data-parent="#free-pos-bundle-list">
            <div class="card-body row-divider">
                @if (!empty($devicesData) && count($devicesData) > 0)
                    @foreach ($devices as $idx => $device)
                        @if (!empty($device['active']))
                            <div class="row mb-3 device-row align-items-center" data-device-idx="{{ $idx }}">
                                <div class="col-lg-6">
                                    <div class="form-group mb-0">
                                        {!! html()->label(
                                                $device['label'] . (!empty($device['required']) ? ' <span class="text-danger">*</span>' : ''),
                                                'bundle_' . $bundleIdx . '_device_' . $idx . '_option',
                                            )->toHtml() !!}
                                        <select name="bundles[{{ $bundleIdx }}][device][{{ $idx }}][option]"
                                            class="form-control device-option-select select2"
                                            id="bundle_{{ $bundleIdx }}_device_{{ $idx }}_option"
                                            @if (!empty($device['required']) && !$isGuest) required
                                                data-parsley-required-message="Please select a {{ $device['label'] }}" @endif
                                            {{ $readonly }} {{ $disabled }}>
                                            {{-- <option value="">Select</option> --}}
                                            @foreach ($device['options'] as $opt)
                                                @if ($opt['price'] == '0.0')
                                                    @php
                                                        // Get the option text
                                                        $optionText = $opt['text'] ?? '';
                                                        // Remove price information (like "- $12.90") while keeping other parts
                                                        $cleanText = preg_replace(
                                                            '/\s+-\s+\$[\d\.]+$/',
                                                            '',
                                                            $optionText,
                                                        );
                                                        // Also remove "(Free)" pattern if present
                                                        // $cleanText = preg_replace('/\s+\(Free\)$/', '', $cleanText);
                                                    @endphp
                                                    <option value="{{ $opt['id'] }}"
                                                        data-price="{{ isset($opt['price']) ? $opt['price'] : (isset($device['price']) ? $device['price'] : '') }}"
                                                        @php
$selectedVal = old('bundles.' . $bundleIdx . ".device.{$idx}.option", $selectedDevices[$idx]['option'] ?? ''); @endphp
                                                        @if ($selectedVal == $opt['id']) selected @endif>
                                                        {{ $cleanText }}
                                                    </option>
                                                @endif
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="form-group mb-0">
                                        {!! html()->label(
                                                'Unit Price /month ' . (!empty($device['required'] && !$isGuest) ? ' <span class="text-danger">*</span>' : ''),
                                            )->toHtml() !!}
                                        {!! html()->text(
                                                'bundles[' . $bundleIdx . '][device][' . $idx . '][price]',
                                                old(
                                                    'bundles.' . $bundleIdx . ".device.{$idx}.price",
                                                    $selectedDevices[$idx]['price'] ?? ($device['price'] ?? 'FREE'),
                                                ),
                                            )->class('form-control device-price hardware-price-input')->id('bundle_' . $bundleIdx . '_device_' . $idx . '_price')->attribute('readonly', $isGuest ? 'readonly' : '') !!}

                                    </div>
                                </div>
                                @if (!$isGuest)
                                    <div class="col-lg-2 d-flex align-items-center">
                                        <button type="button" class="btn btn-danger btn-sm remove-device-row mt-4"
                                            title="Remove">
                                            Remove
                                        </button>
                                        <button type="button"
                                            class="btn btn-secondary btn-sm undo-device-row d-none ml-1" title="Undo">
                                            Undo
                                        </button>
                                    </div>
                                @endif

                            </div>
                        @endif
                    @endforeach
                @else
                    <div class="col-lg-7">
                        <p>No devices found.</p>
                    </div>
                @endif
            </div>
        </div>
    </div>
@endforeach